docs: add previous components back

apps/www/.vitepress/theme/style.css

@@ -7,68 +7,49 @@
 	:root {
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
-
-		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
-
-		--popover: 0 0% 100%;
-		--popover-foreground: 240 10% 3.9%;
-
 		--card: 0 0% 100%;
 		--card-foreground: 240 10% 3.9%;
-
+		--popover: 0 0% 100%;
-		--border: 240 5.9% 90%;
+		--popover-foreground: 240 10% 3.9%;
-		--input: 240 5.9% 90%;
-
 		--primary: 240 5.9% 10%;
 		--primary-foreground: 0 0% 98%;
-
 		--secondary: 240 4.8% 95.9%;
 		--secondary-foreground: 240 5.9% 10%;
-
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
 		--accent: 240 4.8% 95.9%;
 		--accent-foreground: 240 5.9% 10%;
-
 		--destructive: 0 84.2% 60.2%;
 		--destructive-foreground: 0 0% 98%;
-
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
 		--ring: 240 5% 64.9%;
-
 		--radius: 0.5rem;
 	}
 
 	.dark {
 		--background: 240 10% 3.9%;
 		--foreground: 0 0% 98%;
-
-		--muted: 240 3.7% 15.9%;
-		--muted-foreground: 240 5% 64.9%;
-
-		--popover: 240 10% 3.9%;
-		--popover-foreground: 0 0% 98%;
-
 		--card: 240 10% 3.9%;
 		--card-foreground: 0 0% 98%;
-
+		--popover: 240 10% 3.9%;
-		--border: 240 3.7% 15.9%;
+		--popover-foreground: 0 0% 98%;
-		--input: 240 3.7% 15.9%;
-
 		--primary: 0 0% 98%;
 		--primary-foreground: 240 5.9% 10%;
-
 		--secondary: 240 3.7% 15.9%;
 		--secondary-foreground: 0 0% 98%;
-
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
 		--accent: 240 3.7% 15.9%;
 		--accent-foreground: 0 0% 98%;
-
 		--destructive: 0 62.8% 30.6%;
 		--destructive-foreground: 0 85.7% 97.3%;
-
+		--border: 240 3.7% 15.9%;
-		--ring: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
 	}
-}
+
-@layer base {
+
 	* {
 		@apply border-border;
 	}
@@ -132,12 +113,9 @@
   pre code {
     @apply relative rounded font-mono text-sm ;
   }
-  pre code .line {
-    @apply  px-4 min-h-[1.5rem] py-0.5 w-full inline-block;
-  } 
- 
 }
 
+
 @layer utilities {
 	.step {
 		counter-increment: step;
@@ -148,6 +126,11 @@
 		@apply ml-[-50px] mt-[-4px];
 		content: counter(step);
 	}
+
+	pre code .line {
+		@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
+	} 
+	
 }
 
 @media (max-width: 640px) {

apps/www/src/content/docs/components/alert-dialog.md

@@ -0,0 +1,71 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/alert-dialog 
+primitive: https://www.radix-vue.com/components/alert-dialog.html
+---
+
+
+<ComponentPreview name="AlertDialogDemo" >
+
+<<< ../../../lib/registry/default/examples/AlertDialogDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add alert-dialog
+```
+
+<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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/lib/registry/default/ui/alert-dialog'
+</script>
+
+<template>
+  <AlertDialog>
+    <AlertDialogTrigger>
+      Open
+    </AlertDialogTrigger>
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+        <AlertDialogDescription>
+          This action cannot be undone. This will permanently delete your
+          account and remove your data from our servers.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogCancel>Cancel</AlertDialogCancel>
+        <AlertDialogAction>Continue</AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>
+```

apps/www/src/content/docs/components/dialog.md

@@ -0,0 +1,68 @@
+---
+title: Dialog
+description: A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/dialog 
+primitive: https://www.radix-vue.com/components/dialog.html
+---
+
+
+<ComponentPreview name="DialogDemo" >
+
+<<< ../../../lib/registry/default/examples/DialogDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add dialog
+```
+
+<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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger>
+      Edit Profile
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Edit profile</DialogTitle>
+        <DialogDescription>
+          Make changes to your profile here. Click save when you're done.
+        </DialogDescription>
+      </DialogHeader>
+
+      <DialogFooter>
+        Save changes
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
+```

apps/www/src/content/docs/components/popover.md

@@ -0,0 +1,53 @@
+---
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+source: https://github.com/radix-vue/shadcn-vue/tree/main/apps/www/src/lib/registry/default/ui/popover 
+primitive: https://www.radix-vue.com/components/popover.html
+---
+
+
+<ComponentPreview name="PopoverDemo" >
+
+<<< ../../../lib/registry/default/examples/PopoverDemo.vue
+
+</ComponentPreview>
+
+
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add popover
+```
+
+<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 {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger>
+      Open popover
+    </PopoverTrigger>
+    <PopoverContent />
+  </Popover>
+</template>
+```

apps/www/src/lib/registry/default/examples/PopoverDemo.vue

@@ -16,7 +16,7 @@ import { Input } from '@/lib/registry/default/ui/input'
         Open popover
       </Button>
     </PopoverTrigger>
-    <PopoverContent class="w-80" @open-auto-focus.prevent>
+    <PopoverContent class="w-80">
       <div class="grid gap-4">
         <div class="space-y-2">
           <h4 class="font-medium leading-none">

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<AlertDialogActionProps>()
 </script>
 
 <template>
-  <AlertDialogAction v-bind="props">
+  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
     <slot />
   </AlertDialogAction>
 </template>

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<AlertDialogCancelProps>()
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="props">
+  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
     <slot />
   </AlertDialogCancel>
 </template>

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue

@@ -13,7 +13,7 @@ const props = defineProps<AlertDialogContentProps & { class?: string }>()
 <template>
   <AlertDialogPortal>
     <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-white/80 dark:bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <AlertDialogContent
       v-bind="props"

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogDescription.vue

@@ -10,7 +10,7 @@ const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
 
 <template>
   <AlertDialogDescription
-    :class="cn('text-muted text-sm', props.class)"
+    :class="cn('text-muted-foreground text-sm', props.class)"
     :as-child="props.asChild"
   >
     <slot />

apps/www/src/lib/registry/default/ui/button/Button.vue

@@ -1,63 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { buttonVariants } from '.'
-import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
-interface ButtonProps {
+interface Props {
-  class?: string
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
-  variant?:
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
-  | 'primary'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'ghost'
-  | 'link'
-  | 'neutral'
-  disabled?: boolean | undefined
   as?: string
 }
 
-const props = withDefaults(defineProps<ButtonProps>(), {
+withDefaults(defineProps<Props>(), {
-  variant: 'primary',
-  disabled: false,
   as: 'button',
 })
-
-const buttonClass = computed(() => {
-  return cva(
-    'inline-flex items-center justify-center text-sm px-4 py-2.5 rounded-md font-medium transition-colors ease-in-out duration-300',
-    {
-      variants: {
-        variant: {
-          primary:
-            'bg-primary text-primary-foreground enabled:hover:bg-primary-hover',
-          secondary:
-            'bg-secondary text-secondary-foreground enabled:hover:bg-secondary-hover',
-          destructive:
-            'bg-destructive text-destructive-foreground hover:bg-destructive-hover',
-          outline:
-            'border border-border text-foreground shadow-sm hover:bg-outline-hover',
-          ghost: 'text-foreground hover:bg-outline-hover',
-          link: 'text-foreground hover:underline hover:underline-offset-4',
-          neutral: '',
-        },
-        disabled: {
-          true: '!opacity-50 !cursor-not-allowed',
-        },
-      },
-    },
-  )({
-    variant: props.variant,
-    disabled: props.disabled,
-  })
-})
 </script>
 
 <template>
   <component
-    :is="props.as"
+    :is="as"
-    :class="cn(buttonClass, props.class)"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
-    :disabled="props.disabled"
   >
     <slot />
   </component>

apps/www/src/lib/registry/default/ui/button/index.ts

@@ -1 +1,32 @@
+import { cva } from 'class-variance-authority'
+
 export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)

apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue

@@ -2,36 +2,41 @@
 import {
   DialogClose,
   DialogContent,
+  type DialogContentEmits,
   type DialogContentProps,
   DialogOverlay,
   DialogPortal,
 } from 'radix-vue'
 import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = defineProps<DialogContentProps & { class?: string }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="fixed inset-0 z-50 bg-white/80 dark:bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogContent
-      :as-child="props.asChild"
       :class="
         cn(
           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
           props.class,
         )
       "
+      v-bind="{ ...props, ...emitsAsProps }"
     >
       <slot />
 
       <DialogClose
         class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
       >
-        <X class="w-4 h-4 text-muted" />
+        <X class="w-4 h-4" />
+        <span className="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
   </DialogPortal>

apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue

@@ -8,7 +8,7 @@ const props = defineProps<DialogDescriptionProps & { class?: string }>()
 <template>
   <DialogDescription
     v-bind="props"
-    :class="cn('text-muted text-sm', props.class)"
+    :class="cn('text-muted-foreground text-sm', props.class)"
   >
     <slot />
   </DialogDescription>

apps/www/src/lib/registry/default/ui/input/Input.vue

@@ -1,68 +1,11 @@
 <script setup lang="ts">
-import { AlertTriangle } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
 
-interface InputProps {
+defineProps<{
-  id?: string
+  defaultValue: string | number
-  value?: string
+}>()
-  type?: string
-  placeholder?: string
-  required?: boolean
-  disabled?: boolean
-  invalid?: boolean
-  helperText?: string
-  class?: string
-}
-
-const props = withDefaults(defineProps<InputProps>(), {
-  id: '',
-  value: '',
-  type: 'text',
-  placeholder: '',
-  required: false,
-  disabled: false,
-  invalid: false,
-  helperText: '',
-})
-
-const emit = defineEmits(['update:value'])
-
-function handleInput(event: Event) {
-  emit('update:value', (event.target as HTMLInputElement).value)
-}
 </script>
 
 <template>
-  <div :class="cn('relative', props.class)">
+  <input type="text" :value="defaultValue" :class="cn(cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', $attrs.class ?? ''))">
-    <input
-      :id="props.id"
-      :value="props.value"
-      :type="props.type"
-      :required="props.required"
-      :placeholder="props.placeholder"
-      :disabled="props.disabled"
-      :class="[
-        props.invalid
-          ? '!ring-destructive ring-2 placeholder:!text-destructive'
-          : '',
-        props.disabled ? 'cursor-not-allowed opacity-50' : '',
-        cn(
-          'px-3 h-9 bg-transparent block w-full outline-none focus:ring-2 focus:ring-accent ring-secondary placeholder:text-muted rounded-md text-sm ring-1 text-foreground',
-          props.class,
-        ),
-      ]"
-      @input="handleInput"
-    >
-    <div
-      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
-    >
-      <AlertTriangle v-if="props.invalid" class="w-4 h-4 text-destructive" />
-    </div>
-  </div>
-  <p
-    v-if="props.helperText && !props.invalid"
-    class="gap-1 leading-5 text-[13px] text-muted"
-  >
-    {{ props.helperText }}
-  </p>
 </template>

apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import {
   PopoverContent,
+  type PopoverContentEmits,
   type PopoverContentProps,
   PopoverPortal,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { cn, useEmitAsProps } from '@/lib/utils'
 
 const props = withDefaults(
   defineProps<PopoverContentProps & { class?: string }>(),
@@ -12,15 +13,17 @@ const props = withDefaults(
     sideOffset: 4,
   },
 )
+const emits = defineEmits<PopoverContentEmits>()
+const emitsAsProps = useEmitAsProps(emits)
 </script>
 
 <template>
   <PopoverPortal>
     <PopoverContent
-      v-bind="props"
+      v-bind="{ ...props, ...emitsAsProps, $attrs }"
       :class="
         cn(
-          'z-50 w-[var(--radix-popover-trigger-width)] rounded-md border border-border bg-background shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "