@reinvented/design 0.1.0 → 0.2.1

package/src/components/ui/table/TableCell.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><td :class="cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"><slot /></td></template>

package/src/components/ui/table/TableFooter.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><tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)"><slot /></tfoot></template>

package/src/components/ui/table/TableHead.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><th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)"><slot /></th></template>

package/src/components/ui/table/TableHeader.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><thead :class="cn('[&_tr]:border-b', props.class)"><slot /></thead></template>

package/src/components/ui/table/TableRow.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><tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)"><slot /></tr></template>

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

@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/src/components/ui/tabs/Tabs.vue

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

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsContent
+    v-bind="forwardedProps"
+    :class="cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsList, type TabsListProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsList
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/src/components/ui/textarea/Textarea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string
+  modelValue?: string
+}>()
+
+const emits = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const modelValue = computed({
+  get: () => props.modelValue,
+  set: (val) => emits('update:modelValue', val ?? ''),
+})
+</script>
+
+<template>
+  <textarea
+    v-model="modelValue"
+    :class="cn(
+      'flex min-h-20 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  />
+</template>

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

@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

package/src/components/ui/toggle/Toggle.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Toggle as ToggleRoot, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+type ToggleVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleProps & { class?: HTMLAttributes['class']; variant?: ToggleVariants['variant']; size?: ToggleVariants['size'] }>()
+const emits = defineEmits<ToggleEmits>()
+const delegatedProps = computed(() => { const { class: _, variant: _v, size: _s, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleRoot v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
+    <slot />
+  </ToggleRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Toggle } from './Toggle.vue'

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<ToggleGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = defineProps<ToggleGroupItemProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground bg-transparent h-9 px-3',
+      props.class,
+    )"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

package/src/components/ui/tooltip/Tooltip.vue

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

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '../lib/utils'
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(),
+  { sideOffset: 4 },
+)
+const emits = defineEmits<TooltipContentEmits>()
+const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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,
+      )"
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps, useForwardProps } from 'radix-vue'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), { delayDuration: 200 })
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <TooltipProvider v-bind="forwardedProps">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

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

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

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'

package/src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+// ── @reinvented/design — Design System Barrel Export ──────────────
+// Re-exports all styled UI components, utils, and types
+
+// Utilities
+export { cn } from './lib/utils'
+
+// ── Styled UI Components ──────────────────────────────────────────
+
+// Core
+export { Button } from './components/ui/button'
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './components/ui/card'
+export { Input } from './components/ui/input'
+export { Badge } from './components/ui/badge'
+export { Avatar } from './components/ui/avatar'
+export { Separator } from './components/ui/separator'
+export { Skeleton } from './components/ui/skeleton'
+export { ScrollArea } from './components/ui/scroll-area'
+
+// Overlays
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogScrollContent, DialogTitle, DialogTrigger } from './components/ui/dialog'
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from './components/ui/alert-dialog'
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './components/ui/sheet'
+
+// Data Input
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/select'
+export { Label } from './components/ui/label'
+export { Textarea } from './components/ui/textarea'
+export { Switch } from './components/ui/switch'
+export { Checkbox } from './components/ui/checkbox'
+export { RadioGroup, RadioGroupItem } from './components/ui/radio-group'
+export { Slider } from './components/ui/slider'
+
+// Navigation & Menus
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/ui/dropdown-menu'
+export { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuSubContent } from './components/ui/context-menu'
+export { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from './components/ui/menubar'
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from './components/ui/navigation-menu'
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs'
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/ui/breadcrumb'
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationLast, PaginationNext, PaginationPrev } from './components/ui/pagination'
+
+// Feedback
+export { Alert, AlertDescription, AlertTitle } from './components/ui/alert'
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/ui/tooltip'
+export { Popover, PopoverContent, PopoverTrigger } from './components/ui/popover'
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './components/ui/hover-card'
+export { Progress } from './components/ui/progress'
+
+// Data Display
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/ui/table'
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/ui/accordion'
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/ui/collapsible'
+
+// Actions
+export { Toggle } from './components/ui/toggle'
+export { ToggleGroup, ToggleGroupItem } from './components/ui/toggle-group'
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from './components/ui/command'
+
+// Form
+export { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from './components/ui/form'
+
+// External library re-exports
+export { Toaster, toast } from 'vue-sonner'

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/patterns/DetailView.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * DetailView Pattern
+ * A detail page with hero/header + content sections.
+ * Use for: Circle detail, Event detail, Profile, App detail.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  title?: string
+  subtitle?: string
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col h-full', props.class)">
+    <!-- Back navigation -->
+    <div class="flex items-center gap-2 px-4 py-2 border-b">
+      <slot name="back-button" />
+      <slot name="breadcrumb" />
+      <div class="flex-1" />
+      <slot name="header-actions" />
+    </div>
+
+    <!-- Hero / Header section -->
+    <div class="px-4 py-6 border-b">
+      <slot name="hero">
+        <h1 v-if="title" class="text-2xl font-bold">{{ title }}</h1>
+        <p v-if="subtitle" class="text-muted-foreground mt-1">{{ subtitle }}</p>
+      </slot>
+    </div>
+
+    <!-- Tabs / navigation -->
+    <div v-if="$slots['tabs']" class="px-4 border-b">
+      <slot name="tabs" />
+    </div>
+
+    <!-- Main content -->
+    <div class="flex-1 overflow-auto px-4 py-4">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/patterns/EmptyState.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * EmptyState Pattern
+ * A centered, friendly empty state with icon, title, description, and CTA.
+ * Use when a list/section has no data.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  title: string
+  description?: string
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col items-center justify-center text-center py-12 px-4', props.class)">
+    <div v-if="$slots['icon']" class="mb-4 text-muted-foreground">
+      <slot name="icon" />
+    </div>
+    <h3 class="text-lg font-semibold mb-1">{{ title }}</h3>
+    <p v-if="description" class="text-sm text-muted-foreground max-w-sm mb-4">{{ description }}</p>
+    <slot name="action" />
+  </div>
+</template>

package/src/patterns/FormView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * FormView Pattern
+ * A form page/dialog with sections, validation, and submit.
+ * Use for: Settings, Profile edit, Create event, etc.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  title?: string
+  description?: string
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+const emit = defineEmits<{ submit: [] }>()
+</script>
+
+<template>
+  <form :class="cn('flex flex-col gap-6', props.class)" @submit.prevent="emit('submit')">
+    <div v-if="title" class="space-y-1">
+      <h2 class="text-xl font-semibold">{{ title }}</h2>
+      <p v-if="description" class="text-sm text-muted-foreground">{{ description }}</p>
+    </div>
+
+    <!-- Form sections -->
+    <slot />
+
+    <!-- Actions -->
+    <div v-if="$slots['actions']" class="flex items-center justify-end gap-2 pt-4 border-t">
+      <slot name="actions" />
+    </div>
+  </form>
+</template>

package/src/patterns/ListView.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * ListView Pattern
+ * A standard list page with search, filters, and items.
+ * Use for: Circles list, Friends list, Notifications, App Store browse.
+ */
+import { type HTMLAttributes } from 'vue'
+import { cn } from '../lib/utils'
+
+interface Props {
+  title?: string
+  class?: HTMLAttributes['class']
+}
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col h-full', props.class)">
+    <!-- Header with title and actions -->
+    <div class="flex items-center justify-between px-4 py-3 border-b">
+      <h1 v-if="title" class="text-xl font-semibold">{{ title }}</h1>
+      <slot name="header-actions" />
+    </div>
+
+    <!-- Search / Filter Bar -->
+    <div v-if="$slots['search']" class="px-4 py-2 border-b bg-muted/30">
+      <slot name="search" />
+    </div>
+
+    <!-- Filter Tabs -->
+    <div v-if="$slots['filters']" class="px-4 py-2 border-b">
+      <slot name="filters" />
+    </div>
+
+    <!-- List content -->
+    <div class="flex-1 overflow-auto">
+      <slot />
+    </div>
+
+    <!-- Empty state -->
+    <div v-if="$slots['empty']" class="flex-1 flex items-center justify-center p-8">
+      <slot name="empty" />
+    </div>
+  </div>
+</template>

package/src/styles/index.css

@@ -0,0 +1,4 @@
+@import './tokens.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;