@reinvented/design 0.2.0 → 0.3.0

package/docs/layouts/list-page.md

@@ -0,0 +1,107 @@
+# List Page Layout
+
+## When to Use
+- Browse a collection of items (tasks, users, apps)
+- Filterable, searchable, sortable data
+- Paginated or infinite-scroll lists
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import {
+  Button, Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
+  Card, CardContent, Badge, Skeleton,
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from '@reinvented/design'
+import { Plus, Search, MoreHorizontal } from 'lucide-vue-next'
+
+const search = ref('')
+const filter = ref('all')
+const items = ref([]) // from GraphQL query
+const loading = ref(true)
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
+
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-2xl font-bold tracking-tight">Items</h1>
+        <p class="text-muted-foreground">Manage your items.</p>
+      </div>
+      <Button><Plus class="mr-2 h-4 w-4" /> New Item</Button>
+    </div>
+
+    <!-- Filters Bar -->
+    <div class="flex items-center gap-4">
+      <div class="relative flex-1 max-w-sm">
+        <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input v-model="search" class="pl-9" placeholder="Search items..." />
+      </div>
+      <Select v-model="filter">
+        <SelectTrigger class="w-[150px]">
+          <SelectValue placeholder="Filter" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">All</SelectItem>
+          <SelectItem value="active">Active</SelectItem>
+          <SelectItem value="archived">Archived</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading" class="space-y-3">
+      <Skeleton v-for="i in 5" :key="i" class="h-16 w-full rounded-lg" />
+    </div>
+
+    <!-- Empty State -->
+    <div v-else-if="items.length === 0" class="flex flex-col items-center justify-center py-12 text-center">
+      <div class="rounded-full bg-muted p-4 mb-4">
+        <Search class="h-8 w-8 text-muted-foreground" />
+      </div>
+      <h3 class="text-lg font-semibold">No items found</h3>
+      <p class="text-muted-foreground mt-1">Get started by creating your first item.</p>
+      <Button class="mt-4"><Plus class="mr-2 h-4 w-4" /> Create Item</Button>
+    </div>
+
+    <!-- Data State -->
+    <div v-else class="space-y-3">
+      <Card v-for="item in items" :key="item.id" class="hover:shadow-sm transition-shadow">
+        <CardContent class="flex items-center justify-between p-4">
+          <div class="flex items-center gap-3">
+            <div>
+              <p class="font-medium">{{ item.name }}</p>
+              <p class="text-sm text-muted-foreground">{{ item.description }}</p>
+            </div>
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge>{{ item.status }}</Badge>
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="ghost" size="icon">
+                  <MoreHorizontal class="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Header**: Title + description + primary CTA
+- **Filters**: Search + dropdown filters in a row
+- **Three states**: Loading (skeletons), empty, data
+- **Item cards**: Name + description + badge + action menu
+- **Empty state**: Icon + message + CTA

package/docs/layouts/settings-page.md

@@ -0,0 +1,79 @@
+# Settings Page Layout
+
+## When to Use
+- User preferences
+- App configuration
+- Account management
+
+## Skeleton Code
+
+```vue
+<script setup>
+import {
+  Button, Input, Label, Separator, Switch, Textarea,
+  Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle,
+} from '@reinvented/design'
+</script>
+
+<template>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex flex-col md:flex-row gap-8">
+
+      <!-- Sidebar Nav -->
+      <nav class="w-full md:w-48 space-y-1">
+        <a v-for="section in sections" :key="section.id"
+           :href="`#${section.id}`"
+           class="block rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+           :class="{ 'bg-muted text-foreground': activeSection === section.id }">
+          {{ section.label }}
+        </a>
+      </nav>
+
+      <!-- Settings Content -->
+      <div class="flex-1 space-y-6 max-w-2xl">
+        <Card id="profile">
+          <CardHeader>
+            <CardTitle>Profile</CardTitle>
+            <CardDescription>Update your personal information.</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="space-y-2">
+              <Label for="name">Name</Label>
+              <Input id="name" placeholder="Your name" />
+            </div>
+            <div class="space-y-2">
+              <Label for="bio">Bio</Label>
+              <Textarea id="bio" placeholder="About you" />
+            </div>
+          </CardContent>
+          <CardFooter>
+            <Button>Save Changes</Button>
+          </CardFooter>
+        </Card>
+
+        <Card id="notifications">
+          <CardHeader>
+            <CardTitle>Notifications</CardTitle>
+            <CardDescription>Choose what notifications you receive.</CardDescription>
+          </CardHeader>
+          <CardContent class="space-y-4">
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium">Email notifications</p>
+                <p class="text-sm text-muted-foreground">Receive updates via email.</p>
+              </div>
+              <Switch />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Sidebar nav** on left, content on right
+- **Each section** is a Card with header + form fields + save button
+- **Switch rows**: Label + description on left, Switch on right
+- **Mobile**: sidebar stacks above content

package/docs/layouts/step-wizard.md

@@ -0,0 +1,73 @@
+# Step Wizard Layout
+
+## When to Use  
+- Multi-step processes (onboarding, app creation, checkout)
+- 3–7 steps where each depends on the previous
+
+## Skeleton Code
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, Progress } from '@reinvented/design'
+import { Check } from 'lucide-vue-next'
+
+const currentStep = ref(0)
+const steps = [
+  { title: 'Details', component: 'StepDetails' },
+  { title: 'Configuration', component: 'StepConfig' },
+  { title: 'Review', component: 'StepReview' },
+]
+const progress = computed(() => ((currentStep.value + 1) / steps.length) * 100)
+</script>
+
+<template>
+  <div class="max-w-2xl mx-auto px-4 py-8 space-y-8">
+
+    <!-- Step Indicator -->
+    <div class="space-y-4">
+      <Progress :model-value="progress" />
+      <div class="flex justify-between">
+        <div v-for="(step, i) in steps" :key="i" class="flex items-center gap-2 text-sm">
+          <div
+            class="flex h-6 w-6 items-center justify-center rounded-full text-xs font-medium"
+            :class="i <= currentStep ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'"
+          >
+            <Check v-if="i < currentStep" class="h-3 w-3" />
+            <span v-else>{{ i + 1 }}</span>
+          </div>
+          <span :class="i <= currentStep ? 'text-foreground' : 'text-muted-foreground'">{{ step.title }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Step Content -->
+    <Card>
+      <CardHeader>
+        <CardTitle>{{ steps[currentStep].title }}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <component :is="steps[currentStep].component" />
+      </CardContent>
+      <CardFooter class="flex justify-between">
+        <Button variant="outline" :disabled="currentStep === 0" @click="currentStep--">
+          Previous
+        </Button>
+        <Button v-if="currentStep < steps.length - 1" @click="currentStep++">
+          Next
+        </Button>
+        <Button v-else @click="submit">
+          Complete
+        </Button>
+      </CardFooter>
+    </Card>
+  </div>
+</template>
+```
+
+## Key Patterns
+- **Progress bar** + step circles at top
+- **Single card** with dynamic content
+- **Previous/Next** buttons in card footer
+- **Narrower max-width** than other layouts (`max-w-2xl`)
+- Completed steps show ✓, current step highlighted

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reinvented/design",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "exports": {
@@ -10,7 +10,9 @@
     "./src/styles/*": "./src/styles/*",
     "./src/*": "./src/*",
     "./tailwind.config.js": "./tailwind.config.js",
-    "./patterns/*": "./src/patterns/*"
+    "./patterns/*": "./src/patterns/*",
+    "./eslint": "./src/eslint/index.js",
+    "./eslint/recommended": "./src/eslint/recommended.js"
   },
   "files": [
     "src/",
@@ -40,7 +42,9 @@
     "zod": "^3.23.0",
     "vue-sonner": "^1.2.0",
     "v-calendar": "^3.1.0",
-    "@tanstack/vue-table": "^8.21.0"
+    "@tanstack/vue-table": "^8.21.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "vue-eslint-parser": "^9.4.0"
   },
   "devDependencies": {
     "vue": "^3.5.0",

package/src/components/ui/accordion/Accordion.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AccordionRoot, type AccordionRootEmits, type AccordionRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionContent, type AccordionContentProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="forwardedProps"
+    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
+    <slot />
+  </AccordionItem>
+</template>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'radix-vue'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="forwardedProps"
+      :class="cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        props.class,
+      )"
+    >
+      <slot />
+      <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/src/components/ui/alert/Alert.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
+
+const props = defineProps<{
+  variant?: AlertVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...d } = props
+  return d
+})
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant: delegatedProps.variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>

package/src/components/ui/alert/index.ts

@@ -0,0 +1,3 @@
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AlertDialogRoot, type AlertDialogEmits, type AlertDialogProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogAction, type AlertDialogActionProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AlertDialogAction
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogAction>
+</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogCancel, type AlertDialogCancelProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-semibold ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80 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="forwarded"
+      :class="cn(
+        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 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',
+        props.class,
+      )"
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogDescription, type AlertDialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AlertDialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </AlertDialogDescription>
+</template>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { AlertDialogTitle, type AlertDialogTitleProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AlertDialogTitle v-bind="forwardedProps" :class="cn('text-lg font-semibold', props.class)">
+    <slot />
+  </AlertDialogTitle>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+<template><nav aria-label="breadcrumb" :class="cn('', props.class)"><slot /></nav></template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { MoreHorizontal } from 'lucide-vue-next'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+<template>
+  <span role="presentation" aria-hidden="true" :class="cn('flex h-9 w-9 items-center justify-center', props.class)">
+    <slot><MoreHorizontal class="h-4 w-4" /></slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+<template><li :class="cn('inline-flex items-center gap-1.5', props.class)"><slot /></li></template>