From b34e1dbc6216953b17e3f02868412cb2526f9608 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 30 Aug 2023 22:47:55 +0800
Subject: [PATCH] feat: b,c components

---
 .../.vitepress/theme/layout/DocsLayout.vue    |  5 ++
 .../.vitepress/theme/layout/MainLayout.vue    | 10 +--
 apps/www/package.json                         |  2 +-
 apps/www/src/content/docs/components/badge.md | 42 +++++++++++
 .../www/src/content/docs/components/button.md | 42 +++++++++++
 apps/www/src/content/docs/components/card.md  | 60 +++++++++++++++
 .../src/content/docs/components/checkbox.md   | 44 +++++++++++
 .../content/docs/components/collapsible.md    | 59 +++++++++++++++
 .../registry/default/examples/BadgeDemo.vue   |  7 ++
 .../registry/default/examples/ButtonDemo.vue  |  7 ++
 .../registry/default/examples/CardDemo.vue    | 74 +++++++++++++++++++
 .../default/examples/CheckboxDemo.vue         | 15 ++++
 .../default/examples/CollapsibleDemo.vue      | 43 +++++++++++
 .../lib/registry/default/ui/badge/Badge.vue   | 42 +++--------
 .../lib/registry/default/ui/badge/index.ts    | 22 ++++++
 .../src/lib/registry/default/ui/card/Card.vue |  2 +-
 .../default/ui/card/CardDescription.vue       |  2 +-
 .../registry/default/ui/checkbox/Checkbox.vue | 52 +++++--------
 .../default/ui/collapsible/Collapsible.vue    | 11 ++-
 apps/www/tailwind.config.js                   | 10 +++
 pnpm-lock.yaml                                | 21 +++---
 21 files changed, 482 insertions(+), 90 deletions(-)
 create mode 100644 apps/www/src/content/docs/components/badge.md
 create mode 100644 apps/www/src/content/docs/components/button.md
 create mode 100644 apps/www/src/content/docs/components/card.md
 create mode 100644 apps/www/src/content/docs/components/checkbox.md
 create mode 100644 apps/www/src/content/docs/components/collapsible.md
 create mode 100644 apps/www/src/lib/registry/default/examples/BadgeDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/examples/ButtonDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/examples/CardDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/examples/CheckboxDemo.vue
 create mode 100644 apps/www/src/lib/registry/default/examples/CollapsibleDemo.vue

diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index 4b21cf3f..512951d2 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -3,6 +3,7 @@ import { useData, useRoute } from 'vitepress'
 import { docsConfig } from '../config/docs'
 import TableOfContentVue from '../components/TableOfContent.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
+import { Badge } from '@/lib/registry/default/ui/badge'
 import RadixIconsCode from '~icons/radix-icons/code'
 import ChevronRightIcon from '~icons/lucide/chevron-right'
 
@@ -39,6 +40,10 @@ const { frontmatter } = useData()
                 }"
               >
                 {{ doc.title }}
+
+                <Badge v-if="doc.label" class="ml-2" :variant="'secondary'">
+                  {{ doc.label }}
+                </Badge>
               </a>
             </div>
           </div>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 4d89ff08..27114747 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -57,7 +57,7 @@ const links = [
 
 <template>
   <div class="flex min-h-screen flex-col bg-background">
-    <header class="sticky z-40 top-0 border-b border-border">
+    <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
         class="max-w-8xl flex h-[58px] items-center justify-between p-4 mx-auto"
       >
@@ -88,8 +88,8 @@ const links = [
             class="w-72 h-8 px-3 hidden lg:flex lg:justify-between lg:items-center"
           >
             <div class="flex items-center">
-              <LucideSearch class="w-4 h-4 mr-2 text-muted" />
-              <span class="text-muted"> Search for anything... </span>
+              <LucideSearch class="w-4 h-4 mr-2 text-muted-foreground" />
+              <span class="text-muted-foreground"> Search for anything... </span>
             </div>
             <div class="flex items-center gap-x-1">
               <Kbd>⌘</Kbd>
@@ -128,7 +128,7 @@ const links = [
       </div>
     </header>
 
-    <div class="flex-1">
+    <div class="flex-1  bg-background">
       <component :is="'docs'" v-if="$route.path.includes('docs')">
         <Content />
       </component>
@@ -140,7 +140,7 @@ const links = [
       </main>
     </div>
 
-    <footer class="z-40 border-t border-border text-foreground">
+    <footer class="bg-background z-40 border-t border-border text-foreground">
       <div class="max-w-8xl h-20 flex items-center justify-between p-4 mx-auto">
         <div class="flex justify-center items-center">
           <span class="text-sm">
diff --git a/apps/www/package.json b/apps/www/package.json
index 2b83f2dc..6fe7e130 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -17,7 +17,6 @@
     "class-variance-authority": "^0.6.1",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.268.0",
-    "radix-vue": "^0.1.24",
     "tailwindcss-animate": "^1.0.6",
     "vitepress": "^1.0.0-rc.10",
     "vue": "^3.3.4"
@@ -30,6 +29,7 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.24",
+    "radix-vue": "^0.1.29",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
new file mode 100644
index 00000000..8bbaf92a
--- /dev/null
+++ b/apps/www/src/content/docs/components/badge.md
@@ -0,0 +1,42 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+---
+
+
+<ComponentPreview name="BadgeDemo"  >
+
+<<< ../../../lib/registry/default/examples/BadgeDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add badge
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge>Badge</Badge>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
new file mode 100644
index 00000000..d65a3c25
--- /dev/null
+++ b/apps/www/src/content/docs/components/button.md
@@ -0,0 +1,42 @@
+---
+title: Button
+description: Displays a button or a component that looks like a button.
+---
+
+
+<ComponentPreview name="ButtonDemo"  >
+
+<<< ../../../lib/registry/default/examples/ButtonDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add button
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button>Button</Button>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/card.md b/apps/www/src/content/docs/components/card.md
new file mode 100644
index 00000000..1ca7cc8c
--- /dev/null
+++ b/apps/www/src/content/docs/components/card.md
@@ -0,0 +1,60 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+---
+
+
+<ComponentPreview name="CardDemo"  >
+
+<<< ../../../lib/registry/default/examples/CardDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add card
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Card Title</CardTitle>
+      <CardDescription>Card Description</CardDescription>
+    </CardHeader>
+    <CardContent>
+      Card Content
+    </CardContent>
+    <CardFooter>
+      Card Footer
+    </CardFooter>
+  </Card>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/checkbox.md b/apps/www/src/content/docs/components/checkbox.md
new file mode 100644
index 00000000..70359ad5
--- /dev/null
+++ b/apps/www/src/content/docs/components/checkbox.md
@@ -0,0 +1,44 @@
+---
+title: Checkbox
+description: A control that allows the user to toggle between checked and not checked.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/checkbox 
+primitive: https://www.radix-vue.com/components/checkbox.html
+---
+
+
+<ComponentPreview name="CheckboxDemo"  >
+
+<<< ../../../lib/registry/default/examples/CheckboxDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add checkbox
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+</script>
+
+<template>
+  <Checkbox id="terms" />
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
new file mode 100644
index 00000000..1c013d8a
--- /dev/null
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -0,0 +1,59 @@
+--- 
+title: Collapsible
+description: An interactive component which expands/collapses a panel.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/collapsible 
+primitive: https://www.radix-vue.com/components/collapsible.html
+---
+
+
+<ComponentPreview name="CollapsibleDemo"  >
+
+<<< ../../../lib/registry/default/examples/CollapsibleDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add collapsible
+```
+
+<ManualInstall>
+
+1. Install `radix-vue`:
+
+```bash
+npm install radix-vue
+```
+
+2. Copy and paste the component source files linked at the top of this page into your project.
+</ManualInstall>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/lib/registry/default/ui/collapsible'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+  >
+    <CollapsibleTrigger>
+      Trigger
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      Content
+    </CollapsibleContent>
+  </Collapsible>
+</template>
+```
\ No newline at end of file
diff --git a/apps/www/src/lib/registry/default/examples/BadgeDemo.vue b/apps/www/src/lib/registry/default/examples/BadgeDemo.vue
new file mode 100644
index 00000000..c4521fc7
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/BadgeDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge>Badge</Badge>
+</template>
diff --git a/apps/www/src/lib/registry/default/examples/ButtonDemo.vue b/apps/www/src/lib/registry/default/examples/ButtonDemo.vue
new file mode 100644
index 00000000..6f8e4f25
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/ButtonDemo.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button>Button</Button>
+</template>
diff --git a/apps/www/src/lib/registry/default/examples/CardDemo.vue b/apps/www/src/lib/registry/default/examples/CardDemo.vue
new file mode 100644
index 00000000..1e3c5bc9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/CardDemo.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { BellRing, Check } from 'lucide-vue-next'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Switch } from '@/lib/registry/default/ui/switch'
+import { cn } from '@/lib/utils'
+
+const notifications = [
+  {
+    title: 'Your call has been confirmed.',
+    description: '1 hour ago',
+  },
+  {
+    title: 'You have a new message!',
+    description: '1 hour ago',
+  },
+  {
+    title: 'Your subscription is expiring soon!',
+    description: '2 hours ago',
+  },
+]
+</script>
+
+<template>
+  <Card :class="cn('w-[380px]', $attrs.class ?? '')">
+    <CardHeader>
+      <CardTitle>Notifications</CardTitle>
+      <CardDescription>You have 3 unread messages.</CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-4">
+      <div class=" flex items-center space-x-4 rounded-md border p-4">
+        <BellRing />
+        <div class="flex-1 space-y-1">
+          <p class="text-sm font-medium leading-none">
+            Push Notifications
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Send notifications to device.
+          </p>
+        </div>
+        <Switch />
+      </div>
+      <div>
+        <div
+          v-for="(notification, index) in notifications" :key="index"
+          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+        >
+          <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">
+              {{ notification.title }}
+            </p>
+            <p class="text-sm text-muted-foreground">
+              {{ notification.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        <Check class="mr-2 h-4 w-4" /> Mark all as read
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/examples/CheckboxDemo.vue b/apps/www/src/lib/registry/default/examples/CheckboxDemo.vue
new file mode 100644
index 00000000..7c7ea27b
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/CheckboxDemo.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+</script>
+
+<template>
+  <div className="flex items-center space-x-2">
+    <Checkbox id="terms" />
+    <label
+      htmlFor="terms"
+      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    >
+      Accept terms and conditions
+    </label>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/examples/CollapsibleDemo.vue b/apps/www/src/lib/registry/default/examples/CollapsibleDemo.vue
new file mode 100644
index 00000000..b0980a30
--- /dev/null
+++ b/apps/www/src/lib/registry/default/examples/CollapsibleDemo.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ChevronsUpDown } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/lib/registry/default/ui/collapsible'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+    class="w-[350px] space-y-2"
+  >
+    <div class="flex items-center justify-between space-x-4 px-4">
+      <h4 class="text-sm font-semibold">
+        @peduarte starred 3 repositories
+      </h4>
+      <CollapsibleTrigger as-child>
+        <Button variant="ghost" size="sm" class="w-9 p-0">
+          <ChevronsUpDown class="h-4 w-4" />
+          <span class="sr-only">Toggle</span>
+        </Button>
+      </CollapsibleTrigger>
+    </div>
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">
+      @radix-ui/primitives
+    </div>
+    <CollapsibleContent class="space-y-2">
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">
+        @radix-ui/colors
+      </div>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">
+        @stitches/react
+      </div>
+    </CollapsibleContent>
+  </Collapsible>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
index e0ec600b..b459c145 100644
--- a/apps/www/src/lib/registry/default/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
@@ -1,42 +1,18 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { cva } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
+import { badgeVariants } from '.'
 import { cn } from '@/lib/utils'
 
-interface BadgeProps {
-  variant?: 'primary' | 'secondary' | 'outline' | 'destructive'
-  as?: string
-  class?: string
+interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
+
+interface Props {
+  variant?: BadgeVariantProps['variant']
 }
-
-const props = withDefaults(defineProps<BadgeProps>(), {
-  variant: 'primary',
-  as: 'span',
-})
-
-const badgeClass = computed(() => {
-  return cva(
-    'inline-flex items-center cursor-default text-xs font-semibold px-2.5 py-0.5 rounded-md transition-colors ease-in-out duration-300',
-    {
-      variants: {
-        variant: {
-          primary: 'bg-primary text-primary-foreground hover:bg-primary-hover',
-          secondary: 'bg-secondary text-foreground hover:bg-secondary-hover',
-          outline:
-            'border border-border text-foreground shadow-sm hover:bg-outline-hover',
-          destructive:
-            'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
-        },
-      },
-    },
-  )({
-    variant: props.variant,
-  })
-})
+defineProps<Props>()
 </script>
 
 <template>
-  <component :is="props.as" :class="cn(badgeClass, props.class)">
+  <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
     <slot />
-  </component>
+  </div>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/src/lib/registry/default/ui/badge/index.ts
index 1734c2d4..771c75f1 100644
--- a/apps/www/src/lib/registry/default/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/default/ui/badge/index.ts
@@ -1 +1,23 @@
+import { cva } from 'class-variance-authority'
+
 export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
diff --git a/apps/www/src/lib/registry/default/ui/card/Card.vue b/apps/www/src/lib/registry/default/ui/card/Card.vue
index 399c74b5..3f5e10c7 100644
--- a/apps/www/src/lib/registry/default/ui/card/Card.vue
+++ b/apps/www/src/lib/registry/default/ui/card/Card.vue
@@ -13,7 +13,7 @@ const props = defineProps({
   <div
     :class="
       cn(
-        'bg-background text-foreground border border-border rounded-xl shadow-md',
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
index 9b55c53c..6f1fc0ee 100644
--- a/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/card/CardDescription.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <p :class="cn('text-muted text-sm', props.class)">
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
     <slot />
   </p>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
index b088c599..93f75c74 100644
--- a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -1,42 +1,24 @@
 <script setup lang="ts">
-import RadixIconsCheck from '~icons/radix-icons/check'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
+import { Check } from 'lucide-vue-next'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
-interface CheckBoxProps {
-  id?: string
-  modelValue?: boolean
-  required?: boolean
-  disabled?: boolean
-  invalid?: boolean
-  checked?: boolean
-}
+const props = defineProps<CheckboxRootProps>()
+const emits = defineEmits<CheckboxRootEmits>()
 
-const props = defineProps<CheckBoxProps>()
-
-const emit = defineEmits(['update:modelValue'])
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <div class="flex items-center">
-    <input
-      :id="props.id"
-      type="checkbox"
-      :value="props.modelValue"
-      :required="props.required"
-      :disabled="props.disabled"
-      :class="{
-        'ring-destructive-light dark:ring-destructive': props.invalid,
-        '!cursor-not-allowed opacity-50': props.disabled,
-      }"
-      :checked="props.checked"
-      class="w-4 h-4 peer cursor-pointer shrink-0 relative checked:bg-primary appearance-none text-foreground border border-primary rounded"
-      @input="
-        ($event) =>
-          emit('update:modelValue', ($event.target as HTMLInputElement).checked)
-      "
-    >
-
-    <RadixIconsCheck
-      class="absolute pointer-events-none hidden peer-checked:block w-4 h-3 text-background"
-    />
-  </div>
+  <CheckboxRoot
+    v-bind="{ ...props, ...emitsAsProps }"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         $attrs.class ?? '')"
+  >
+    <CheckboxIndicator class="flex items-center justify-center text-current">
+      <Check class="h-4 w-4" />
+    </CheckboxIndicator>
+  </CheckboxRoot>
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
index f3b1ef78..05bf9c23 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
+++ b/apps/www/src/lib/registry/default/ui/collapsible/Collapsible.vue
@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import { CollapsibleRoot, type CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
-  <CollapsibleRoot v-bind="props">
-    <slot />
+  <CollapsibleRoot v-slot="{ open }" v-bind="{ ...props, ...emitsAsProps }">
+    <slot :open="open" />
   </CollapsibleRoot>
 </template>
diff --git a/apps/www/tailwind.config.js b/apps/www/tailwind.config.js
index 68075402..b6fb15c1 100644
--- a/apps/www/tailwind.config.js
+++ b/apps/www/tailwind.config.js
@@ -66,10 +66,20 @@ export default {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-in-out',
         'accordion-up': 'accordion-up 0.2s ease-in-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-in-out',
       },
     },
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b6604b66..2de3fe2f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,9 +59,6 @@ importers:
       lucide-vue-next:
         specifier: ^0.268.0
         version: 0.268.0(vue@3.3.4)
-      radix-vue:
-        specifier: ^0.1.24
-        version: 0.1.24(vue@3.3.4)
       tailwindcss-animate:
         specifier: ^1.0.6
         version: 1.0.6(tailwindcss@3.3.2)
@@ -93,6 +90,9 @@ importers:
       postcss:
         specifier: ^8.4.24
         version: 8.4.24
+      radix-vue:
+        specifier: ^0.1.29
+        version: 0.1.29(vue@3.3.4)
       tailwind-merge:
         specifier: ^1.14.0
         version: 1.14.0
@@ -1491,18 +1491,18 @@ packages:
     resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==}
     dependencies:
       '@floating-ui/utils': 0.1.1
-    dev: false
+    dev: true
 
   /@floating-ui/dom@1.5.1:
     resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==}
     dependencies:
       '@floating-ui/core': 1.4.1
       '@floating-ui/utils': 0.1.1
-    dev: false
+    dev: true
 
   /@floating-ui/utils@0.1.1:
     resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==}
-    dev: false
+    dev: true
 
   /@floating-ui/vue@1.0.2(vue@3.3.4):
     resolution: {integrity: sha512-sImlAl9mAoCKZLNlwWz2P2ZMJIDlOEDXrRD6aD2sIHAka1LPC+nWtB+D3lPe7IE7FGWSbwBPTnlSdlABa3Fr0A==}
@@ -1512,7 +1512,7 @@ packages:
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
+    dev: true
 
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
@@ -5438,15 +5438,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /radix-vue@0.1.24(vue@3.3.4):
-    resolution: {integrity: sha512-XKEPi4K/DfTRHMZ6Y9PEP87Xn+zwFahhJFp/8vhc0DQEx/flev8izVYll6EwH931Tt7dwm+Vy1/edkxBnjJXkA==}
+  /radix-vue@0.1.29(vue@3.3.4):
+    resolution: {integrity: sha512-CMxjLRWykFgHIUm9y2nyWtDfcAfgaDeS2A8KabjBzNlW1csl9nmuByGjMD5VBsbA0YBKk+bgtVLychr/oPcAjQ==}
     dependencies:
       '@floating-ui/dom': 1.5.1
       '@floating-ui/vue': 1.0.2(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
-    dev: false
+    dev: true
 
   /rc9@2.1.1:
     resolution: {integrity: sha512-lNeOl38Ws0eNxpO3+wD1I9rkHGQyj1NU1jlzv4go2CtEnEQEUfqnIvZG7W+bC/aXdJ27n5x/yUjb6RoT9tko+Q==}
@@ -6719,7 +6719,6 @@ packages:
         optional: true
     dependencies:
       vue: 3.3.4
-    dev: false
 
   /vue-eslint-parser@9.3.1(eslint@8.43.0):
     resolution: {integrity: sha512-Clr85iD2XFZ3lJ52/ppmUDG/spxQu6+MAeHXjjyI4I1NUYZ9xmenQp4N0oaHJhrA8OOxltCVxMRfANGa70vU0g==}