wip

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

@@ -0,0 +1,32 @@
+import { Checkbox } from '@/components/ui/checkbox'
+import { Label } from '@/components/ui/label'
+
+const CheckboxCardDemo = () => {
+  return (
+    <div className="space-y-2">
+      <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"
+        />
+        <div className="grid gap-1.5 font-normal">
+          <p className="text-sm leading-none font-medium">Auto Start</p>
+          <p className="text-muted-foreground text-sm">
+            Starting with your OS.
+          </p>
+        </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" />
+        <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">
+            Download and install new version
+          </p>
+        </div>
+      </Label>
+    </div>
+  )
+}
+
+export default CheckboxCardDemo

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

@@ -0,0 +1,76 @@
+import { BookIcon, GiftIcon, HeartIcon } from 'lucide-react'
+
+import CheckboxCardDemo from '../checkbox/checkbox-13'
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+
+const tabs = [
+  {
+    name: 'Explore',
+    value: 'explore',
+    icon: BookIcon,
+    content: (
+      <>
+        <CheckboxCardDemo />
+      </>
+    ),
+  },
+  {
+    name: 'Favorites',
+    value: 'favorites',
+    icon: HeartIcon,
+    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',
+    value: 'surprise',
+    icon: GiftIcon,
+    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 TabsWithIconDemo = () => {
+  return (
+    <div className="w-full">
+      <Tabs defaultValue="explore" className="gap-4">
+        <TabsList className="w-full">
+          {tabs.map(({ icon: Icon, name, value }) => (
+            <TabsTrigger
+              key={value}
+              value={value}
+              className="flex items-center gap-1 px-2.5 sm:px-3"
+            >
+              <Icon />
+              {name}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {tabs.map((tab) => (
+          <TabsContent
+            key={tab.value}
+            value={tab.value}
+            className="animate-in fade-in duration-300 ease-out"
+          >
+            <p className="text-muted-foreground text-sm">{tab.content}</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    </div>
+  )
+}
+
+export default TabsWithIconDemo

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/tabs.tsx

@@ -0,0 +1,64 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }