@otfdashkit/ui 0.1.1 → 0.1.3

package/src/blocks/task-card.tsx

@@ -1,88 +1 @@
-import React from 'react'
-import { Calendar } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-
-const PRIORITY_COLOR: Record<string, string> = {
-  High: 'bg-red-500/10 text-red-600 border-red-200',
-  Medium: 'bg-yellow-500/10 text-yellow-600 border-yellow-200',
-  Low: 'bg-green-500/10 text-green-600 border-green-200',
-}
-
-export interface TaskCardProps {
-  title?: string
-  description?: string
-  assigneeInitials?: string
-  dueDate?: string
-  priority?: 'High' | 'Medium' | 'Low'
-  className?: string
-}
-
-export function TaskCard({
-  title = 'Redesign onboarding flow',
-  description = 'Update the user onboarding experience with the new design language.',
-  assigneeInitials = 'AC',
-  dueDate = 'Mar 20',
-  priority = 'High',
-  className,
-}: TaskCardProps) {
-  return (
-    <Card className={cn('cursor-pointer hover:shadow-md transition-shadow', className)}>
-      <CardContent className="p-4 space-y-3">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm font-semibold leading-tight">{title}</p>
-          <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0', PRIORITY_COLOR[priority])}>
-            {priority}
-          </span>
-        </div>
-        <p className="text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2">{description}</p>
-        <div className="flex items-center justify-between">
-          <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{assigneeInitials}</AvatarFallback></Avatar>
-          <div className="flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]">
-            <Calendar className="h-3 w-3" />{dueDate}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
-
-const LABEL_COLORS = ['bg-blue-100 text-blue-700', 'bg-purple-100 text-purple-700', 'bg-green-100 text-green-700']
-
-export interface TaskCardWithLabelsProps extends TaskCardProps {
-  labels?: string[]
-}
-
-export function TaskCardWithLabels({
-  labels = ['Design', 'Frontend'],
-  ...props
-}: TaskCardWithLabelsProps) {
-  return (
-    <Card className={cn('cursor-pointer hover:shadow-md transition-shadow', props.className)}>
-      <CardContent className="p-4 space-y-3">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm font-semibold leading-tight">{props.title ?? 'Redesign onboarding flow'}</p>
-          <span className={cn('text-[10px] px-1.5 py-0.5 rounded-full border font-medium shrink-0', PRIORITY_COLOR[props.priority ?? 'High'])}>
-            {props.priority ?? 'High'}
-          </span>
-        </div>
-        <p className="text-xs text-[hsl(var(--muted-foreground))] leading-relaxed line-clamp-2">
-          {props.description ?? 'Update the user onboarding experience with the new design language.'}
-        </p>
-        <div className="flex flex-wrap gap-1">
-          {labels.map((l, i) => (
-            <span key={l} className={cn('text-[10px] px-1.5 py-0.5 rounded-full font-medium', LABEL_COLORS[i % LABEL_COLORS.length])}>{l}</span>
-          ))}
-        </div>
-        <div className="flex items-center justify-between">
-          <Avatar className="h-6 w-6"><AvatarFallback className="text-[10px]">{props.assigneeInitials ?? 'AC'}</AvatarFallback></Avatar>
-          <div className="flex items-center gap-1 text-xs text-[hsl(var(--muted-foreground))]">
-            <Calendar className="h-3 w-3" />{props.dueDate ?? 'Mar 20'}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
+export * from './TaskCard'

package/src/blocks/user-menu.tsx

@@ -1,62 +1 @@
-import React from 'react'
-import { ChevronDown, User, Settings, CreditCard, LogOut } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '../primitives/dropdown-menu'
-
-export interface UserMenuProps {
-  name?: string
-  email?: string
-  initials?: string
-  onProfile?: () => void
-  onSettings?: () => void
-  onBilling?: () => void
-  onSignOut?: () => void
-  className?: string
-}
-
-export function UserMenu({
-  name = 'Jane Doe',
-  email = 'jane@acme.com',
-  initials = 'JD',
-  onProfile,
-  onSettings,
-  onBilling,
-  onSignOut,
-  className,
-}: UserMenuProps) {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <button className={cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-[hsl(var(--accent))] focus:outline-none', className)}>
-          <Avatar className="h-7 w-7">
-            <AvatarFallback className="text-xs">{initials}</AvatarFallback>
-          </Avatar>
-          <span className="font-medium max-w-[120px] truncate">{name}</span>
-          <ChevronDown className="h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-52">
-        <DropdownMenuLabel className="font-normal">
-          <p className="text-sm font-medium">{name}</p>
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">{email}</p>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onProfile}><User className="h-4 w-4" />Profile</DropdownMenuItem>
-        <DropdownMenuItem onClick={onSettings}><Settings className="h-4 w-4" />Account Settings</DropdownMenuItem>
-        <DropdownMenuItem onClick={onBilling}><CreditCard className="h-4 w-4" />Billing</DropdownMenuItem>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onSignOut} className="text-[hsl(var(--destructive))] focus:text-[hsl(var(--destructive))]">
-          <LogOut className="h-4 w-4" />Sign out
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
+export * from './UserMenu'

package/src/blocks/workspace-members.tsx

@@ -1,61 +1 @@
-import React, { useState } from 'react'
-import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { Input } from '../primitives/input'
-import { Avatar, AvatarFallback } from '../primitives/avatar'
-import { Badge } from '../primitives/badge'
-import { Button } from '../primitives/button'
-
-const MEMBERS = [
-  { id: '1', name: 'Jane Doe', email: 'jane@acme.com', role: 'Owner', initials: 'JD' },
-  { id: '2', name: 'Bob Smith', email: 'bob@acme.com', role: 'Admin', initials: 'BS' },
-  { id: '3', name: 'Alice Chen', email: 'alice@acme.com', role: 'Member', initials: 'AC' },
-  { id: '4', name: 'Tom Ray', email: 'tom@acme.com', role: 'Member', initials: 'TR' },
-  { id: '5', name: 'Sara Kim', email: 'sara@acme.com', role: 'Viewer', initials: 'SK' },
-]
-
-const roleVariant = (role: string): 'default' | 'secondary' | 'outline' =>
-  role === 'Owner' ? 'default' : role === 'Admin' ? 'secondary' : 'outline'
-
-export interface WorkspaceMembersProps { className?: string }
-
-export function WorkspaceMembers({ className }: WorkspaceMembersProps) {
-  const [query, setQuery] = useState('')
-  const [members, setMembers] = useState(MEMBERS)
-  const filtered = members.filter(m =>
-    m.name.toLowerCase().includes(query.toLowerCase()) ||
-    m.email.toLowerCase().includes(query.toLowerCase())
-  )
-
-  return (
-    <div className={cn('rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))]', className)}>
-      <div className="flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
-        <div>
-          <h2 className="text-sm font-semibold">Members</h2>
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">{members.length} members</p>
-        </div>
-        <div className="relative">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[hsl(var(--muted-foreground))]" />
-          <Input className="h-8 pl-8 text-xs w-48" placeholder="Search members..." value={query} onChange={e => setQuery(e.target.value)} />
-        </div>
-      </div>
-      <div className="divide-y divide-[hsl(var(--border))]">
-        {filtered.map(m => (
-          <div key={m.id} className="flex items-center gap-3 px-4 py-3">
-            <Avatar className="h-8 w-8"><AvatarFallback className="text-xs">{m.initials}</AvatarFallback></Avatar>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium truncate">{m.name}</p>
-              <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{m.email}</p>
-            </div>
-            <Badge variant={roleVariant(m.role)} className="text-[10px] px-1.5 py-0.5 shrink-0">{m.role}</Badge>
-            {m.role !== 'Owner' && (
-              <Button size="icon" variant="ghost" className="h-7 w-7 shrink-0" onClick={() => setMembers(ms => ms.filter(x => x.id !== m.id))}>
-                <X className="h-3.5 w-3.5" />
-              </Button>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
+export * from './WorkspaceMembers'

package/src/charts/sparkline.tsx

@@ -38,7 +38,7 @@ export function Sparkline({
   const max = Math.max(...data)
   const range = max - min || 1
   const pad = 2
-  const lastY = pad + (1 - (data[data.length - 1] - min) / range) * (height - pad * 2)
+  const lastY = pad + (1 - ((data.at(-1) ?? 0) - min) / range) * (height - pad * 2)
 
   const areaPath = type === 'area'
     ? `${path} L ${width - pad},${height - pad} L ${pad},${height - pad} Z`

package/src/components/DataGrid/DataGrid.tsx

@@ -8,7 +8,7 @@ import {
   ColumnResizeMode,
 } from '@tanstack/react-table'
 import { cn } from '../utils/cn'
-import { Checkbox } from '../primitives/checkbox'
+import { Checkbox } from '../../primitives/checkbox'
 
 interface DataGridProps<T extends object> {
   columns: ColumnDef<T, any>[]

package/src/components/DataTable/DataTable.tsx

@@ -11,10 +11,10 @@ import {
 } from '@tanstack/react-table'
 import { ArrowUpDown, ArrowUp, ArrowDown, ChevronLeft, ChevronRight } from 'lucide-react'
 import { cn } from '../utils/cn'
-import { Button } from '../primitives/button'
-import { Input } from '../primitives/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
-import { Skeleton } from '../primitives/skeleton'
+import { Button } from '../../primitives/button'
+import { Input } from '../../primitives/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select'
+import { Skeleton } from '../../primitives/skeleton'
 
 interface DataTableProps<T> {
   columns: ColumnDef<T>[]

package/src/components/EmptyState/EmptyState.tsx

@@ -1,24 +1,15 @@
 import React from 'react'
 import { cn } from '../../utils/cn'
-import { Button } from '../../primitives/Button/Button'
+import { Button } from '../../primitives/button'
 
 export const EmptyStateIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      data-slot="empty-state-icon"
-      className={cn(
-        'flex h-12 w-12 items-center justify-center rounded-full',
-        'bg-muted text-muted-foreground',
-        className
-      )}
-      {...props}
-    />
+    <div ref={ref} className={cn('flex h-12 w-12 items-center justify-center rounded-full bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]', className)} {...props} />
   )
 )
 EmptyStateIcon.displayName = 'EmptyStateIcon'
 
-export interface EmptyStateProps {
+interface EmptyStateProps {
   icon?: React.ReactNode
   title: string
   description?: string
@@ -62,23 +53,16 @@ export function EmptyState({
   className,
 }: EmptyStateProps) {
   return (
-    <div
-      data-slot="empty-state"
-      className={cn(
-        'flex flex-col items-center justify-center text-center',
-        sizeMap[size],
-        className
-      )}
-    >
+    <div className={cn('flex flex-col items-center justify-center text-center', sizeMap[size], className)}>
       {icon && (
         <EmptyStateIcon className={iconSizeMap[size]}>
           {icon}
         </EmptyStateIcon>
       )}
       <div className="space-y-1 max-w-sm">
-        <h3 className={cn(titleSizeMap[size], 'text-foreground')}>{title}</h3>
+        <h3 className={cn(titleSizeMap[size], 'text-[hsl(var(--foreground))]')}>{title}</h3>
         {description && (
-          <p className={cn(descSizeMap[size], 'text-muted-foreground')}>
+          <p className={cn(descSizeMap[size], 'text-[hsl(var(--muted-foreground))]')}>
             {description}
           </p>
         )}

package/src/components/Persona/Persona.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { cn } from '../utils/cn'
-import { Avatar, AvatarFallback, AvatarImage } from '../primitives/avatar'
+import { Avatar, AvatarFallback, AvatarImage } from '../../primitives/avatar'
 
 const sizeMap = {
   sm: { avatar: 'h-7 w-7', name: 'text-sm', subtitle: 'text-xs' },

package/src/components/Stat/Stat.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { TrendingUp, TrendingDown } from 'lucide-react'
 import { cn } from '../utils/cn'
-import { Card, CardContent } from '../primitives/card'
+import { Card, CardContent } from '../../primitives/card'
 
 interface StatProps {
   label: string

package/src/components/Stepper/Stepper.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Check } from 'lucide-react'
-import { cn } from '../utils/cn'
+import { cn } from '../../utils/cn'
 
 interface StepDef { title: string; description?: string }
 
@@ -40,9 +40,20 @@ interface StepperProps {
   currentStep: number
   steps: StepDef[]
   className?: string
+  /** 'horizontal' (default) | 'vertical' — vertical stacks steps as rows */
+  direction?: 'horizontal' | 'vertical'
 }
 
-export function Stepper({ currentStep, steps, className }: StepperProps) {
+export function Stepper({ currentStep, steps, className, direction = 'horizontal' }: StepperProps) {
+  if (direction === 'vertical' || (className && className.includes('flex-col'))) {
+    return (
+      <div className={cn('flex flex-col gap-0', className?.replace('flex-col', ''))}>
+        {steps.map((step, i) => (
+          <StepperStep key={i} {...step} index={i} current={currentStep} total={steps.length} />
+        ))}
+      </div>
+    )
+  }
   return (
     <div className={cn('flex gap-0', className)}>
       {steps.map((step, i) => (

package/src/components/banner.tsx

@@ -1,203 +1 @@
-import React from 'react'
-import { Info, CheckCircle2, AlertTriangle, XCircle, X, ArrowRight } from 'lucide-react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../utils/cn'
-
-// ─── Variant config ──────────────────────────────────────────────────────────
-
-const bannerVariants = cva(
-  'relative flex items-start gap-3 rounded-lg border px-4 py-3.5 text-sm transition-all',
-  {
-    variants: {
-      variant: {
-        info:    'border-blue-200/80   bg-blue-50/60   dark:border-blue-800/60  dark:bg-blue-950/30',
-        success: 'border-green-200/80  bg-green-50/60  dark:border-green-800/60 dark:bg-green-950/30',
-        warning: 'border-yellow-200/80 bg-yellow-50/60 dark:border-yellow-800/60 dark:bg-yellow-950/30',
-        error:   'border-red-200/80    bg-red-50/60    dark:border-red-800/60   dark:bg-red-950/30',
-        neutral: 'border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.5)]',
-      },
-    },
-    defaultVariants: { variant: 'info' },
-  }
-)
-
-const accentVariants = cva('absolute left-0 top-[12%] bottom-[12%] w-[3px] rounded-full', {
-  variants: {
-    variant: {
-      info:    'bg-blue-500',
-      success: 'bg-green-500',
-      warning: 'bg-yellow-500',
-      error:   'bg-red-500',
-      neutral: 'bg-[hsl(var(--foreground)/0.3)]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const iconVariants = cva('mt-0.5 h-4 w-4 shrink-0', {
-  variants: {
-    variant: {
-      info:    'text-blue-500   dark:text-blue-400',
-      success: 'text-green-500  dark:text-green-400',
-      warning: 'text-yellow-500 dark:text-yellow-400',
-      error:   'text-red-500    dark:text-red-400',
-      neutral: 'text-[hsl(var(--muted-foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const titleVariants = cva('font-semibold leading-snug', {
-  variants: {
-    variant: {
-      info:    'text-blue-900   dark:text-blue-100',
-      success: 'text-green-900  dark:text-green-100',
-      warning: 'text-yellow-900 dark:text-yellow-100',
-      error:   'text-red-900    dark:text-red-100',
-      neutral: 'text-[hsl(var(--foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const descriptionVariants = cva('mt-0.5 leading-snug opacity-80', {
-  variants: {
-    variant: {
-      info:    'text-blue-800   dark:text-blue-200',
-      success: 'text-green-800  dark:text-green-200',
-      warning: 'text-yellow-800 dark:text-yellow-200',
-      error:   'text-red-800    dark:text-red-200',
-      neutral: 'text-[hsl(var(--muted-foreground))]',
-    },
-  },
-  defaultVariants: { variant: 'info' },
-})
-
-const actionVariants = cva(
-  'inline-flex items-center gap-1 text-xs font-medium underline-offset-2 hover:underline transition-opacity hover:opacity-80',
-  {
-    variants: {
-      variant: {
-        info:    'text-blue-700   dark:text-blue-300',
-        success: 'text-green-700  dark:text-green-300',
-        warning: 'text-yellow-700 dark:text-yellow-300',
-        error:   'text-red-700    dark:text-red-300',
-        neutral: 'text-[hsl(var(--foreground))]',
-      },
-    },
-    defaultVariants: { variant: 'info' },
-  }
-)
-
-// ─── Icons ───────────────────────────────────────────────────────────────────
-
-const ICONS: Record<NonNullable<BannerVariant>, React.ReactNode> = {
-  info:    <Info className="h-4 w-4" />,
-  success: <CheckCircle2 className="h-4 w-4" />,
-  warning: <AlertTriangle className="h-4 w-4" />,
-  error:   <XCircle className="h-4 w-4" />,
-  neutral: <Info className="h-4 w-4" />,
-}
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-type BannerVariant = VariantProps<typeof bannerVariants>['variant']
-
-export interface BannerAction {
-  label: string
-  onClick: () => void
-  icon?: boolean
-}
-
-export interface BannerProps extends VariantProps<typeof bannerVariants> {
-  title?: string
-  description?: string
-  dismissible?: boolean
-  onDismiss?: () => void
-  action?: BannerAction
-  icon?: boolean
-  className?: string
-  children?: React.ReactNode
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export function Banner({
-  variant = 'info',
-  title,
-  description,
-  dismissible,
-  onDismiss,
-  action,
-  icon = true,
-  className,
-  children,
-}: BannerProps) {
-  const [dismissed, setDismissed] = React.useState(false)
-  const [exiting, setExiting] = React.useState(false)
-
-  const handleDismiss = () => {
-    setExiting(true)
-    setTimeout(() => {
-      setDismissed(true)
-      onDismiss?.()
-    }, 200)
-  }
-
-  if (dismissed) return null
-
-  return (
-    <div
-      className={cn(
-        bannerVariants({ variant }),
-        'pl-[18px]',
-        exiting && 'opacity-0 translate-x-1 scale-[0.98]',
-        'transition-all duration-200',
-        className
-      )}
-    >
-      {/* left accent bar */}
-      <span className={accentVariants({ variant })} aria-hidden />
-
-      {/* icon */}
-      {icon && (
-        <span className={iconVariants({ variant })}>
-          {ICONS[variant as NonNullable<BannerVariant>]}
-        </span>
-      )}
-
-      {/* body */}
-      <div className="min-w-0 flex-1 space-y-1">
-        {title && (
-          <p className={cn(titleVariants({ variant }), 'text-sm')}>{title}</p>
-        )}
-        {description && (
-          <p className={cn(descriptionVariants({ variant }), 'text-sm')}>{description}</p>
-        )}
-        {children && (
-          <div className={cn(descriptionVariants({ variant }), 'text-sm')}>{children}</div>
-        )}
-        {action && (
-          <button
-            onClick={action.onClick}
-            className={cn(actionVariants({ variant }), 'mt-1.5')}
-          >
-            {action.label}
-            {action.icon !== false && <ArrowRight className="h-3 w-3" />}
-          </button>
-        )}
-      </div>
-
-      {/* dismiss */}
-      {dismissible && (
-        <button
-          onClick={handleDismiss}
-          aria-label="Dismiss"
-          className="shrink-0 rounded-md p-0.5 text-[hsl(var(--muted-foreground))] opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  )
-}
+export * from './Banner/index'

package/src/components/breadcrumb.tsx

@@ -1,58 +1 @@
-import React from 'react'
-import { ChevronRight } from 'lucide-react'
-import { cn } from '../utils/cn'
-
-interface BreadcrumbItemProps {
-  href?: string
-  label: string
-  active?: boolean
-  className?: string
-}
-
-export function BreadcrumbItem({ href, label, active, className }: BreadcrumbItemProps) {
-  return (
-    <li className={cn('flex items-center', className)}>
-      {href && !active ? (
-        <a href={href} className="text-sm text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">{label}</a>
-      ) : (
-        <span className="text-sm text-[hsl(var(--foreground))] font-medium">{label}</span>
-      )}
-    </li>
-  )
-}
-
-export function BreadcrumbPage({ children, className }: { children: React.ReactNode; className?: string }) {
-  return (
-    <li aria-current="page" className={cn('flex items-center text-sm font-medium text-[hsl(var(--foreground))]', className)}>
-      {children}
-    </li>
-  )
-}
-
-export function BreadcrumbSeparator({ className }: { className?: string }) {
-  return (
-    <li role="presentation" aria-hidden="true" className={cn('flex items-center text-[hsl(var(--muted-foreground))]', className)}>
-      <ChevronRight className="h-3.5 w-3.5" />
-    </li>
-  )
-}
-
-interface BreadcrumbProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function Breadcrumb({ children, className }: BreadcrumbProps) {
-  const items = React.Children.toArray(children)
-  const withSeparators: React.ReactNode[] = []
-  items.forEach((item, i) => {
-    withSeparators.push(item)
-    if (i < items.length - 1) withSeparators.push(<BreadcrumbSeparator key={`sep-${i}`} />)
-  })
-
-  return (
-    <nav aria-label="breadcrumb">
-      <ol className={cn('flex flex-wrap items-center gap-1', className)}>{withSeparators}</ol>
-    </nav>
-  )
-}
+export * from './Breadcrumb/index'

package/src/components/command-item.tsx

@@ -1,36 +1 @@
-import React from 'react'
-import { cn } from '../utils/cn'
-
-interface CommandItemProps {
-  icon?: React.ReactNode
-  label: string
-  description?: string
-  shortcut?: string
-  active?: boolean
-  onClick?: () => void
-  className?: string
-}
-
-export function CommandItem({ icon, label, description, shortcut, active, onClick, className }: CommandItemProps) {
-  return (
-    <div
-      onClick={onClick}
-      className={cn(
-        'flex items-center gap-3 rounded-md px-3 py-2 cursor-pointer transition-colors',
-        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
-        className
-      )}
-    >
-      {icon && <span className="shrink-0 text-[hsl(var(--muted-foreground))] h-4 w-4 flex items-center justify-center">{icon}</span>}
-      <div className="min-w-0 flex-1">
-        <p className="text-sm font-medium truncate">{label}</p>
-        {description && <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">{description}</p>}
-      </div>
-      {shortcut && (
-        <kbd className="shrink-0 pointer-events-none inline-flex h-5 items-center gap-1 rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
-          {shortcut}
-        </kbd>
-      )}
-    </div>
-  )
-}
+export { CommandItem as CommandListItem } from './CommandItem'