finalizada sección de Referencias para la IA

src/components/shadcn-studio/checkbox/checkbox-13.tsx

@@ -7,7 +7,7 @@ const CheckboxCardDemo = () => {
       <Label className="border-border hover:border-primary/30 hover:bg-accent/50 flex cursor-pointer items-center items-start gap-2 gap-3 rounded-lg border p-3 transition-colors has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
         <Checkbox
           defaultChecked
-          className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+          className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
         />
         <div className="grid gap-1.5 font-normal">
           <p className="text-sm leading-none font-medium">Auto Start</p>
@@ -17,7 +17,7 @@ const CheckboxCardDemo = () => {
         </div>
       </Label>
       <Label className="hover:bg-accent/50 flex items-start gap-2 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-        <Checkbox className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700" />
+        <Checkbox className="peer border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring h-5 w-5 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50" />
         <div className="grid gap-1.5 font-normal">
           <p className="text-sm leading-none font-medium">Auto update</p>
           <p className="text-muted-foreground text-sm">

src/components/shadcn-studio/tabs/tabs-27.tsx

@@ -0,0 +1,72 @@
+import { Tabs, TabsContent, TabsContents, TabsList, TabsTrigger } from '@/components/ui/motion-tabs'
+
+const tabs = [
+  {
+    name: 'Explore',
+    value: 'explore',
+    content: (
+      <>
+        Discover <span className='text-foreground font-semibold'>fresh ideas</span>, trending topics, and hidden gems
+        curated just for you. Start exploring and let your curiosity lead the way!
+      </>
+    )
+  },
+  {
+    name: 'Favorites',
+    value: 'favorites',
+    content: (
+      <>
+        All your <span className='text-foreground font-semibold'>favorites</span> are saved here. Revisit articles,
+        collections, and moments you love, any time you want a little inspiration.
+      </>
+    )
+  },
+  {
+    name: 'Surprise Me',
+    value: 'surprise',
+    content: (
+      <>
+        <span className='text-foreground font-semibold'>Surprise!</span> Here&apos;s something unexpected—a fun fact, a
+        quirky tip, or a daily challenge. Come back for a new surprise every day!
+      </>
+    )
+  }
+]
+
+const AnimatedTabsDemo = () => {
+  return (
+    <div className='w-full max-w-md'>
+      <Tabs defaultValue='explore' className='gap-4'>
+        <TabsList>
+          {tabs.map(tab => (
+            <TabsTrigger key={tab.value} value={tab.value}>
+              {tab.name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContents className='bg-background mx-1 -mt-2 mb-1 h-full rounded-sm'>
+          {tabs.map(tab => (
+            <TabsContent key={tab.value} value={tab.value}>
+              <p className='text-muted-foreground text-sm'>{tab.content}</p>
+            </TabsContent>
+          ))}
+        </TabsContents>
+      </Tabs>
+
+      <p className='text-muted-foreground mt-4 text-center text-xs'>
+        Inspired by{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://animate-ui.com/docs/components/tabs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          Animate UI
+        </a>
+      </p>
+    </div>
+  )
+}
+
+export default AnimatedTabsDemo