@handled-ai/design-system 0.9.28 → 0.10.0

package/dist/components/variable-autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/variable-autocomplete.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface VariableDef {\n  name: string\n  description?: string\n  source?: string\n}\n\ninterface VariableGroup {\n  label: string\n  variables: VariableDef[]\n}\n\ninterface VariableAutocompleteProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  groups: VariableGroup[]\n  filter?: string\n  onSelect: (variable: VariableDef) => void\n  onClose: () => void\n  maxResults?: number\n}\n\nfunction VariableAutocomplete({\n  groups,\n  filter = \"\",\n  onSelect,\n  onClose,\n  maxResults = 10,\n  className,\n  ...rest\n}: VariableAutocompleteProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const [activeIndex, setActiveIndex] = React.useState(-1)\n\n  // Build filtered results preserving group structure\n  const filteredGroups = React.useMemo(\n    () =>\n      groups\n        .map((group) => ({\n          ...group,\n          variables: group.variables.filter((v) =>\n            v.name.toLowerCase().startsWith(filter.toLowerCase())\n          ),\n        }))\n        .filter((group) => group.variables.length > 0),\n    [groups, filter]\n  )\n\n  // Flatten for indexing / keyboard navigation, respecting maxResults\n  const allFiltered = React.useMemo(() => {\n    const result: { group: VariableGroup; variable: VariableDef }[] = []\n    for (const group of filteredGroups) {\n      for (const variable of group.variables) {\n        if (result.length >= maxResults) break\n        result.push({ group, variable })\n      }\n      if (result.length >= maxResults) break\n    }\n    return result\n  }, [filteredGroups, maxResults])\n\n  // Reset active index when results change\n  React.useEffect(() => {\n    setActiveIndex(-1)\n  }, [filter])\n\n  React.useEffect(() => {\n    function handleMouseDown(e: MouseEvent) {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        onClose()\n      }\n    }\n    function handleKeyDown(e: KeyboardEvent) {\n      if (e.key === \"Escape\") {\n        onClose()\n      }\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault()\n        setActiveIndex((prev) => (prev < allFiltered.length - 1 ? prev + 1 : 0))\n      }\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault()\n        setActiveIndex((prev) => (prev > 0 ? prev - 1 : allFiltered.length - 1))\n      }\n      if (e.key === \"Enter\" && activeIndex >= 0 && activeIndex < allFiltered.length) {\n        e.preventDefault()\n        onSelect(allFiltered[activeIndex].variable)\n      }\n    }\n    document.addEventListener(\"mousedown\", handleMouseDown)\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => {\n      document.removeEventListener(\"mousedown\", handleMouseDown)\n      document.removeEventListener(\"keydown\", handleKeyDown)\n    }\n  }, [onClose, onSelect, allFiltered, activeIndex])\n\n  if (allFiltered.length === 0) {\n    return null\n  }\n\n  // Group the capped results back for rendering\n  const groupsToRender: { label: string; items: { variable: VariableDef; flatIndex: number }[] }[] = []\n  let flatIndex = 0\n  for (const group of filteredGroups) {\n    const items: { variable: VariableDef; flatIndex: number }[] = []\n    for (const variable of group.variables) {\n      if (flatIndex >= maxResults) break\n      items.push({ variable, flatIndex })\n      flatIndex++\n    }\n    if (items.length > 0) {\n      groupsToRender.push({ label: group.label, items })\n    }\n    if (flatIndex >= maxResults) break\n  }\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"variable-autocomplete\"\n      className={cn(\n        \"absolute z-50 bg-popover border border-border rounded-lg shadow-lg w-64 overflow-hidden\",\n        className\n      )}\n      {...rest}\n    >\n      <div data-slot=\"variable-autocomplete-header\" className=\"px-3 py-1.5 border-b border-border\">\n        <span className=\"text-[10px] font-medium text-muted-foreground uppercase tracking-wider\">\n          Insert variable\n        </span>\n      </div>\n      <div role=\"listbox\" aria-label=\"Variables\" className=\"overflow-y-auto\" style={{ maxHeight: \"312px\" }}>\n        {groupsToRender.map((group) => (\n          <div key={group.label} role=\"group\" aria-label={group.label}>\n            <div data-slot=\"variable-autocomplete-group-label\" className=\"px-3 py-1 text-[10px] font-medium text-muted-foreground/60 uppercase tracking-wider\">\n              {group.label}\n            </div>\n            {group.items.map(({ variable, flatIndex: idx }) => (\n              <button\n                type=\"button\"\n                key={`${group.label}:${variable.name}`}\n                role=\"option\"\n                aria-selected={idx === activeIndex}\n                data-slot=\"variable-autocomplete-item\"\n                onMouseDown={(e) => e.preventDefault()}\n                onClick={() => onSelect(variable)}\n                onMouseEnter={() => setActiveIndex(idx)}\n                className={cn(\n                  \"w-full text-left px-3 py-2 cursor-pointer transition-colors flex items-start justify-between gap-2\",\n                  idx === activeIndex ? \"bg-muted/50\" : \"hover:bg-muted/30\"\n                )}\n              >\n                <div className=\"min-w-0\">\n                  <div className=\"text-xs font-mono text-blue-600\">{`{{${variable.name}}}`}</div>\n                  {variable.description && (\n                    <div className=\"text-[10px] text-muted-foreground\">{variable.description}</div>\n                  )}\n                </div>\n                {variable.source && (\n                  <span className=\"text-[9px] px-1.5 py-0.5 rounded bg-muted/30 text-muted-foreground shrink-0 mt-0.5 capitalize\">\n                    {variable.source}\n                  </span>\n                )}\n              </button>\n            ))}\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport { VariableAutocomplete, type VariableAutocompleteProps, type VariableDef, type VariableGroup }\n"],"mappings":"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","names":[]}

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, Ava
 export { Badge, badgeVariants } from './components/badge.js';
 export { Button, buttonVariants } from './components/button.js';
 export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export { ComplianceBadge, ComplianceBadgeProps, ComplianceStatus } from './components/compliance-badge.js';
+export { ContactChip, ContactChipProps } from './components/contact-chip.js';
 export { ContactChannel, ContactItem, ContactList, ContactListProps } from './components/contact-list.js';
 export { CheckInsCard, RecentlyCompletedCard, TopTasksCard, UpcomingMeetingsCard } from './components/dashboard-cards.js';
 export { DataRow, DataTable, DataTableProps } from './components/data-table.js';
@@ -19,15 +21,19 @@ export { DataTableToolbar } from './components/data-table-toolbar.js';
 export { Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, SourceDef, SourceList, ThreadMessage } from './components/detail-view.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
+export { EmptyState, EmptyStateProps } from './components/empty-state.js';
 export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PotentialContacts, RecentActivity, SystemActivity } from './components/entity-panel.js';
+export { FilterChip, FilterChipProps } from './components/filter-chip.js';
 export { InboxGroupHeader, InboxRow, InboxRowProps } from './components/inbox-row.js';
 export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps } from './components/inbox-toolbar.js';
+export { InlineBanner, InlineBannerProps } from './components/inline-banner.js';
 export { Input } from './components/input.js';
 export { FilterDefinition, InsightsFilterBar, InsightsFilterBarProps } from './components/insights-filter-bar.js';
 export { GroupedListGroup, GroupedListView, GroupedListViewProps, ItemList } from './components/item-list.js';
 export { ItemListDisplay, ItemListDisplayState, ItemListGrouping, ItemListViewMode } from './components/item-list-display.js';
 export { ItemListFilter, ItemListFilterCategory } from './components/item-list-filter.js';
 export { ItemListQuickView, ItemListToolbar } from './components/item-list-toolbar.js';
+export { KbdHint } from './components/kbd-hint.js';
 export { Label } from './components/label.js';
 export { Message, MessageAvatar, MessageAvatarProps, MessageContent, MessageContentProps, MessageProps } from './components/message.js';
 export { MetricCard, MetricCardProps, MetricDataPoint } from './components/metric-card.js';
@@ -39,6 +45,7 @@ export { QuickActionModal, QuickActionPriority, QuickActionTaskDraft, QuickActio
 export { ActiveVariant, QuickActionSidebarNav, SidebarNavItem, SidebarNavSection, SidebarUserProfile, UserMenuItem } from './components/quick-action-sidebar-nav.js';
 export { RecommendedAction, RecommendedActionsSection } from './components/recommended-actions-section.js';
 export { ReportCard, ReportCardProps } from './components/report-card.js';
+export { RichTextAction, RichTextToolbar, RichTextToolbarProps } from './components/rich-text-toolbar.js';
 export { ScoreAnalysisModal, ScoreAnalysisModalProps, ScoreAnalysisPanel } from './components/score-analysis-modal.js';
 export { ScoreBreakdown, ScoreBreakdownProps, ScoreFactor } from './components/score-breakdown.js';
 export { ScoreFeedback, useScoreFeedback } from './components/score-feedback.js';
@@ -50,17 +57,21 @@ export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHe
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/sidebar.js';
 export { ApprovalState, SignalApproval, SignalApprovalActions, SignalApprovalContextValue, SignalApprovalGate, SignalApprovalLabels, SignalApprovalRoot, SignalApprovalRootProps, useSignalApproval } from './components/signal-feedback-inline.js';
 export { SimpleDataTable, SimpleDataTableProps } from './components/simple-data-table.js';
-export { VirtualizedDataTable, VirtualizedDataTableProps } from './components/virtualized-data-table.js';
 export { Skeleton } from './components/skeleton.js';
 export { StatusBadge, StatusBadgeProps, StatusType } from './components/status-badge.js';
+export { StepTimeline, StepTimelineProps, StepType, TimelineStep } from './components/step-timeline.js';
+export { StickyActionBar, StickyActionBarProps } from './components/sticky-action-bar.js';
 export { StyledBarItem, StyledBarList, StyledBarListProps } from './components/styled-bar-list.js';
 export { SuggestedAction, SuggestedActionBrowserMeta, SuggestedActionCallMeta, SuggestedActionEmailMeta, SuggestedActionFollowUp, SuggestedActionManualMeta, SuggestedActionReplyTo, SuggestedActionThreadMessage, SuggestedActionTicket, SuggestedActions, SuggestedActionsIconMap, SuggestedActionsProps, SuggestedContact } from './components/suggested-actions.js';
+export { Switch } from './components/switch.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './components/tabs.js';
 export { Textarea } from './components/textarea.js';
 export { TimelineActivity, TimelineActivityProps, TimelineEvent } from './components/timeline-activity.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/tooltip.js';
+export { VariableAutocomplete, VariableAutocompleteProps, VariableDef, VariableGroup } from './components/variable-autocomplete.js';
 export { ViewMode, ViewModeToggle, ViewModeToggleProps } from './components/view-mode-toggle.js';
+export { VirtualizedDataTable, VirtualizedDataTableProps } from './components/virtualized-data-table.js';
 export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './charts/chart.js';
 export { CHART_CURSOR_STYLE, CHART_TOOLTIP_STYLE, ChartTooltipEntry, SimpleChartTooltip, SimpleChartTooltipProps } from './charts/chart-tooltip.js';
 export { BarChartComponent, BarChartComponentProps, BarSeries } from './charts/bar-chart-component.js';

package/dist/index.js

@@ -9,6 +9,8 @@ export * from "./components/avatar.js";
 export * from "./components/badge.js";
 export * from "./components/button.js";
 export * from "./components/card.js";
+export * from "./components/compliance-badge.js";
+export * from "./components/contact-chip.js";
 export * from "./components/contact-list.js";
 export * from "./components/dashboard-cards.js";
 export * from "./components/data-table.js";
@@ -19,15 +21,19 @@ export * from "./components/data-table-toolbar.js";
 export * from "./components/detail-view.js";
 export * from "./components/dialog.js";
 export * from "./components/dropdown-menu.js";
+export * from "./components/empty-state.js";
 export * from "./components/entity-panel.js";
+export * from "./components/filter-chip.js";
 export * from "./components/inbox-row.js";
 export * from "./components/inbox-toolbar.js";
+export * from "./components/inline-banner.js";
 export * from "./components/input.js";
 export * from "./components/insights-filter-bar.js";
 export * from "./components/item-list.js";
 export * from "./components/item-list-display.js";
 export * from "./components/item-list-filter.js";
 export * from "./components/item-list-toolbar.js";
+export * from "./components/kbd-hint.js";
 export * from "./components/label.js";
 export * from "./components/message.js";
 export * from "./components/metric-card.js";
@@ -41,6 +47,7 @@ import {
 export * from "./components/quick-action-sidebar-nav.js";
 export * from "./components/recommended-actions-section.js";
 export * from "./components/report-card.js";
+export * from "./components/rich-text-toolbar.js";
 export * from "./components/score-analysis-modal.js";
 export * from "./components/score-breakdown.js";
 export * from "./components/score-feedback.js";
@@ -52,17 +59,21 @@ export * from "./components/sheet.js";
 export * from "./components/sidebar.js";
 export * from "./components/signal-feedback-inline.js";
 export * from "./components/simple-data-table.js";
-export * from "./components/virtualized-data-table.js";
 export * from "./components/skeleton.js";
 export * from "./components/status-badge.js";
+export * from "./components/step-timeline.js";
+export * from "./components/sticky-action-bar.js";
 export * from "./components/styled-bar-list.js";
 export * from "./components/suggested-actions.js";
+export * from "./components/switch.js";
 export * from "./components/table.js";
 export * from "./components/tabs.js";
 export * from "./components/textarea.js";
 export * from "./components/timeline-activity.js";
 export * from "./components/tooltip.js";
+export * from "./components/variable-autocomplete.js";
 export * from "./components/view-mode-toggle.js";
+export * from "./components/virtualized-data-table.js";
 export * from "./charts/index.js";
 export * from "./prototype/prototype-config.js";
 export * from "./prototype/prototype-shell.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/virtualized-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/styled-bar-list\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/view-mode-toggle\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAG5B,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * @handled-ai/design-system\n * UI components and utilities (shadcn-style, New York)\n */\n\n// Utilities\nexport { cn } from \"./lib/utils\"\nexport { BRAND_ICONS } from \"./lib/icons\"\n\n// Hooks\nexport { useIsMobile } from \"./hooks/use-mobile\"\n\n// Components (light — no recharts/nivo/three transitive deps)\nexport * from \"./components/activity-detail\"\nexport * from \"./components/activity-log\"\nexport * from \"./components/agent-popover\"\nexport * from \"./components/agent-widget\"\nexport * from \"./components/avatar\"\nexport * from \"./components/badge\"\nexport * from \"./components/button\"\nexport * from \"./components/card\"\nexport * from \"./components/compliance-badge\"\nexport * from \"./components/contact-chip\"\nexport * from \"./components/contact-list\"\nexport * from \"./components/dashboard-cards\"\nexport * from \"./components/data-table\"\nexport * from \"./components/data-table-display\"\nexport * from \"./components/data-table-filter\"\nexport * from \"./components/data-table-quick-views\"\nexport * from \"./components/data-table-toolbar\"\nexport * from \"./components/detail-view\"\nexport * from \"./components/dialog\"\nexport * from \"./components/dropdown-menu\"\nexport * from \"./components/empty-state\"\nexport * from \"./components/entity-panel\"\nexport * from \"./components/filter-chip\"\nexport * from \"./components/inbox-row\"\nexport * from \"./components/inbox-toolbar\"\nexport * from \"./components/inline-banner\"\nexport * from \"./components/input\"\nexport * from \"./components/insights-filter-bar\"\nexport * from \"./components/item-list\"\nexport * from \"./components/item-list-display\"\nexport * from \"./components/item-list-filter\"\nexport * from \"./components/item-list-toolbar\"\nexport * from \"./components/kbd-hint\"\nexport * from \"./components/label\"\nexport * from \"./components/message\"\nexport * from \"./components/metric-card\"\nexport * from \"./components/performance-metrics-table\"\nexport * from \"./components/preview-list\"\nexport * from \"./components/progress\"\nexport * from \"./components/quick-action-chat-area\"\nexport {\n  QuickActionModal,\n  type QuickActionPriority,\n  type QuickActionTaskDraft,\n  type QuickActionTemplate,\n} from \"./components/quick-action-modal\"\nexport * from \"./components/quick-action-sidebar-nav\"\nexport * from \"./components/recommended-actions-section\"\nexport * from \"./components/report-card\"\nexport * from \"./components/rich-text-toolbar\"\nexport * from \"./components/score-analysis-modal\"\nexport * from \"./components/score-breakdown\"\nexport * from \"./components/score-feedback\"\nexport * from \"./components/score-ring\"\nexport * from \"./components/scroll-area\"\nexport * from \"./components/select\"\nexport * from \"./components/separator\"\nexport * from \"./components/sheet\"\nexport * from \"./components/sidebar\"\nexport * from \"./components/signal-feedback-inline\"\nexport * from \"./components/simple-data-table\"\nexport * from \"./components/skeleton\"\nexport * from \"./components/status-badge\"\nexport * from \"./components/step-timeline\"\nexport * from \"./components/sticky-action-bar\"\nexport * from \"./components/styled-bar-list\"\nexport * from \"./components/suggested-actions\"\nexport * from \"./components/switch\"\nexport * from \"./components/table\"\nexport * from \"./components/tabs\"\nexport * from \"./components/textarea\"\nexport * from \"./components/timeline-activity\"\nexport * from \"./components/tooltip\"\nexport * from \"./components/variable-autocomplete\"\nexport * from \"./components/view-mode-toggle\"\nexport * from \"./components/virtualized-data-table\"\n\n// Charts (re-exported for backward compatibility with root imports)\nexport * from \"./charts/index\"\n\n// Prototype template system (re-exported for backward compatibility)\nexport * from \"./prototype/prototype-config\"\nexport * from \"./prototype/prototype-shell\"\nexport * from \"./prototype/prototype-inbox-view\"\nexport * from \"./prototype/prototype-insights-view\"\nexport * from \"./prototype/prototype-accounts-view\"\nexport * from \"./prototype/prototype-admin-view\"\nexport * from \"./prototype/prototype-work-queue-view\"\n"],"mappings":"AAMA,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAG5B,SAAS,mBAAmB;AAG5B,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd;AAAA,EACE;AAAA,OAIK;AACP,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.9.28",
+  "version": "0.10.0",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",
@@ -103,6 +103,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "next lint",
     "registry:build": "shadcn build",
+    "test": "vitest run",
     "prepublishOnly": "npm run build:lib"
   },
   "peerDependencies": {

package/src/components/__tests__/compliance-badge.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { ComplianceBadge } from "../compliance-badge";
+
+describe("ComplianceBadge", () => {
+  it("renders with data-slot='compliance-badge'", () => {
+    const { container } = render(<ComplianceBadge status="verified" />);
+    const el = container.querySelector('[data-slot="compliance-badge"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("defaults to variant='line'", () => {
+    const { container } = render(<ComplianceBadge status="verified" />);
+    const el = container.querySelector('[data-slot="compliance-badge"]')!;
+    expect(el.getAttribute("data-variant")).toBe("line");
+  });
+
+  it("verified line variant shows 'Compliance verified' text", () => {
+    render(<ComplianceBadge status="verified" variant="line" />);
+    expect(screen.getByText("Compliance verified")).not.toBeNull();
+  });
+
+  it("verified pill variant shows 'Verified' text", () => {
+    render(<ComplianceBadge status="verified" variant="pill" />);
+    expect(screen.getByText("Verified")).not.toBeNull();
+  });
+
+  it("pending line variant shows 'Pending compliance review'", () => {
+    render(<ComplianceBadge status="pending" variant="line" />);
+    expect(screen.getByText("Pending compliance review")).not.toBeNull();
+  });
+
+  it("pending pill variant shows 'Pending review'", () => {
+    render(<ComplianceBadge status="pending" variant="pill" />);
+    expect(screen.getByText("Pending review")).not.toBeNull();
+  });
+
+  it("changed_since_verified line variant shows 'Changed since last verification'", () => {
+    render(<ComplianceBadge status="changed_since_verified" variant="line" />);
+    expect(screen.getByText("Changed since last verification")).not.toBeNull();
+  });
+
+  it("changed_since_verified pill variant shows 'Changed'", () => {
+    render(<ComplianceBadge status="changed_since_verified" variant="pill" />);
+    expect(screen.getByText("Changed")).not.toBeNull();
+  });
+
+  it("never_verified shows 'Never verified' for both variants", () => {
+    const { unmount } = render(<ComplianceBadge status="never_verified" variant="line" />);
+    expect(screen.getByText("Never verified")).not.toBeNull();
+    unmount();
+
+    render(<ComplianceBadge status="never_verified" variant="pill" />);
+    expect(screen.getByText("Never verified")).not.toBeNull();
+  });
+
+  it("sets data-status attribute correctly for each status", () => {
+    const statuses = ["verified", "pending", "changed_since_verified", "never_verified"] as const;
+    for (const status of statuses) {
+      const { container, unmount } = render(<ComplianceBadge status={status} />);
+      const el = container.querySelector('[data-slot="compliance-badge"]')!;
+      expect(el.getAttribute("data-status")).toBe(status);
+      unmount();
+    }
+  });
+
+  it("sets data-variant attribute correctly", () => {
+    const { container: c1, unmount: u1 } = render(
+      <ComplianceBadge status="verified" variant="line" />
+    );
+    expect(c1.querySelector('[data-slot="compliance-badge"]')!.getAttribute("data-variant")).toBe("line");
+    u1();
+
+    const { container: c2 } = render(
+      <ComplianceBadge status="verified" variant="pill" />
+    );
+    expect(c2.querySelector('[data-slot="compliance-badge"]')!.getAttribute("data-variant")).toBe("pill");
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <ComplianceBadge status="verified" className="my-custom-class" />
+    );
+    const el = container.querySelector('[data-slot="compliance-badge"]')!;
+    expect(el.classList.contains("my-custom-class")).toBe(true);
+  });
+});

package/src/components/__tests__/contact-chip.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { ContactChip } from "../contact-chip";
+
+describe("ContactChip", () => {
+  it("renders with data-slot='contact-chip'", () => {
+    const { container } = render(<ContactChip name="Alice" />);
+    const el = container.querySelector('[data-slot="contact-chip"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders name text", () => {
+    render(<ContactChip name="Alice" />);
+    expect(screen.getByText("Alice")).toBeDefined();
+  });
+
+  it("renders email when provided", () => {
+    render(<ContactChip name="Alice" email="alice@example.com" />);
+    expect(screen.getByText("alice@example.com")).toBeDefined();
+  });
+
+  it("does not render email when not provided", () => {
+    const { container } = render(<ContactChip name="Alice" />);
+    const spans = container.querySelectorAll("span.text-muted-foreground");
+    expect(spans.length).toBe(0);
+  });
+
+  it("verified state (default) has data-verified='true'", () => {
+    const { container } = render(<ContactChip name="Alice" />);
+    const el = container.querySelector('[data-slot="contact-chip"]')!;
+    expect(el.getAttribute("data-verified")).toBe("true");
+  });
+
+  it("unverified state has data-verified='false'", () => {
+    const { container } = render(<ContactChip name="Alice" verified={false} />);
+    const el = container.querySelector('[data-slot="contact-chip"]')!;
+    expect(el.getAttribute("data-verified")).toBe("false");
+  });
+
+  it("shows Confirm button when verified=false and onConfirm provided", () => {
+    render(<ContactChip name="Alice" verified={false} onConfirm={() => {}} />);
+    expect(screen.getByText("Confirm")).toBeDefined();
+  });
+
+  it("does not show Confirm button when verified=true", () => {
+    const { container } = render(<ContactChip name="Alice" verified={true} onConfirm={() => {}} />);
+    const confirmBtn = container.querySelector('[data-slot="contact-chip-confirm"]');
+    expect(confirmBtn).toBeNull();
+  });
+
+  it("Confirm button fires onConfirm on click", () => {
+    const handler = vi.fn();
+    render(<ContactChip name="Alice" verified={false} onConfirm={handler} />);
+    fireEvent.click(screen.getByText("Confirm"));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("Confirm button has aria-label='Confirm Alice' and type='button'", () => {
+    const { container } = render(
+      <ContactChip name="Alice" verified={false} onConfirm={() => {}} />
+    );
+    const btn = container.querySelector('[data-slot="contact-chip-confirm"]') as HTMLButtonElement;
+    expect(btn.getAttribute("aria-label")).toBe("Confirm Alice");
+    expect(btn.type).toBe("button");
+  });
+
+  it("shows remove button when onRemove provided", () => {
+    const { container } = render(<ContactChip name="Alice" onRemove={() => {}} />);
+    const removeBtn = container.querySelector('[data-slot="contact-chip-remove"]');
+    expect(removeBtn).not.toBeNull();
+  });
+
+  it("remove button fires onRemove on click", () => {
+    const handler = vi.fn();
+    const { container } = render(<ContactChip name="Alice" onRemove={handler} />);
+    const removeBtn = container.querySelector('[data-slot="contact-chip-remove"]')!;
+    fireEvent.click(removeBtn);
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("remove button has aria-label='Remove Alice' and type='button'", () => {
+    const { container } = render(<ContactChip name="Alice" onRemove={() => {}} />);
+    const btn = container.querySelector('[data-slot="contact-chip-remove"]') as HTMLButtonElement;
+    expect(btn.getAttribute("aria-label")).toBe("Remove Alice");
+    expect(btn.type).toBe("button");
+  });
+});

package/src/components/__tests__/empty-state.test.tsx

@@ -0,0 +1,76 @@
+import { describe, it, expect } from "vitest";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { EmptyState } from "../empty-state";
+
+describe("EmptyState", () => {
+  it("renders with data-slot='empty-state'", () => {
+    const { container } = render(<EmptyState description="No items" />);
+    const el = container.querySelector('[data-slot="empty-state"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders description text", () => {
+    render(<EmptyState description="Nothing to show here" />);
+    expect(screen.getByText("Nothing to show here")).not.toBeNull();
+  });
+
+  it("renders icon when provided", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        icon={<span data-testid="test-icon">★</span>}
+      />
+    );
+    const iconWrapper = container.querySelector('[data-slot="empty-state-icon"]');
+    expect(iconWrapper).not.toBeNull();
+    expect(screen.getByTestId("test-icon")).not.toBeNull();
+  });
+
+  it("renders title when provided", () => {
+    const { container } = render(
+      <EmptyState description="No items" title="Empty" />
+    );
+    const titleEl = container.querySelector('[data-slot="empty-state-title"]');
+    expect(titleEl).not.toBeNull();
+    expect(screen.getByText("Empty")).not.toBeNull();
+  });
+
+  it("renders action when provided", () => {
+    const { container } = render(
+      <EmptyState
+        description="No items"
+        action={<button type="button">Add item</button>}
+      />
+    );
+    const actionWrapper = container.querySelector('[data-slot="empty-state-action"]');
+    expect(actionWrapper).not.toBeNull();
+    expect(screen.getByText("Add item")).not.toBeNull();
+  });
+
+  it("omits icon wrapper when icon not provided", () => {
+    const { container } = render(<EmptyState description="No items" />);
+    const iconWrapper = container.querySelector('[data-slot="empty-state-icon"]');
+    expect(iconWrapper).toBeNull();
+  });
+
+  it("omits title when not provided", () => {
+    const { container } = render(<EmptyState description="No items" />);
+    const titleEl = container.querySelector('[data-slot="empty-state-title"]');
+    expect(titleEl).toBeNull();
+  });
+
+  it("omits action wrapper when action not provided", () => {
+    const { container } = render(<EmptyState description="No items" />);
+    const actionWrapper = container.querySelector('[data-slot="empty-state-action"]');
+    expect(actionWrapper).toBeNull();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <EmptyState description="No items" className="my-custom-class" />
+    );
+    const el = container.querySelector('[data-slot="empty-state"]')!;
+    expect(el.classList.contains("my-custom-class")).toBe(true);
+  });
+});

package/src/components/__tests__/filter-chip.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { FilterChip } from "../filter-chip";
+
+describe("FilterChip", () => {
+  it("renders with data-slot='filter-chip'", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("renders children as label text", () => {
+    render(<FilterChip>Status</FilterChip>);
+    expect(screen.getByText("Status")).toBeDefined();
+  });
+
+  it("renders default Filter icon (svg present)", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("renders ChevronDown icon", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    // Filter + ChevronDown = at least 2 svgs
+    const svgs = container.querySelectorAll("svg");
+    expect(svgs.length).toBe(2);
+  });
+
+  it("fires onClick when clicked", () => {
+    const handler = vi.fn();
+    render(<FilterChip onClick={handler}>Status</FilterChip>);
+    fireEvent.click(screen.getByText("Status"));
+    expect(handler).toHaveBeenCalledTimes(1);
+  });
+
+  it("has type='button'", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const btn = container.querySelector('[data-slot="filter-chip"]') as HTMLButtonElement;
+    expect(btn.type).toBe("button");
+  });
+
+  it("applies data-active attribute when active=true", () => {
+    const { container } = render(<FilterChip active>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("data-active")).toBe("");
+  });
+
+  it("does not have data-active when active is false/undefined", () => {
+    const { container } = render(<FilterChip>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.hasAttribute("data-active")).toBe(false);
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(<FilterChip className="my-custom">Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.classList.contains("my-custom")).toBe(true);
+  });
+
+  it("sets aria-pressed when active", () => {
+    const { container } = render(<FilterChip active>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("aria-pressed")).toBe("true");
+  });
+
+  it("sets aria-pressed=false when not active", () => {
+    const { container } = render(<FilterChip active={false}>Status</FilterChip>);
+    const el = container.querySelector('[data-slot="filter-chip"]')!;
+    expect(el.getAttribute("aria-pressed")).toBe("false");
+  });
+});

package/src/components/__tests__/inline-banner.test.tsx

@@ -0,0 +1,110 @@
+import { describe, it, expect, vi } from "vitest";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { InlineBanner } from "../inline-banner";
+
+describe("InlineBanner", () => {
+  it("renders with data-slot='inline-banner'", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]');
+    expect(el).not.toBeNull();
+  });
+
+  it("defaults to variant='warning'", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("data-variant")).toBe("warning");
+  });
+
+  it("renders children content", () => {
+    render(<InlineBanner>Important message</InlineBanner>);
+    expect(screen.getByText("Important message")).not.toBeNull();
+  });
+
+  it("shows dismiss button when onDismiss provided", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]');
+    expect(dismissBtn).not.toBeNull();
+  });
+
+  it("dismiss button fires onDismiss on click", () => {
+    const onDismiss = vi.fn();
+    const { container } = render(
+      <InlineBanner onDismiss={onDismiss}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    fireEvent.click(dismissBtn);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismiss button has aria-label='Dismiss'", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    expect(dismissBtn.getAttribute("aria-label")).toBe("Dismiss");
+  });
+
+  it("dismiss button has type='button'", () => {
+    const { container } = render(
+      <InlineBanner onDismiss={() => {}}>Test</InlineBanner>
+    );
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]')!;
+    expect(dismissBtn.getAttribute("type")).toBe("button");
+  });
+
+  it("hides dismiss button when onDismiss not provided", () => {
+    const { container } = render(<InlineBanner>Test</InlineBanner>);
+    const dismissBtn = container.querySelector('[data-slot="inline-banner-dismiss"]');
+    expect(dismissBtn).toBeNull();
+  });
+
+  it("sets data-variant attribute correctly", () => {
+    const variants = ["info", "warning", "destructive"] as const;
+    for (const variant of variants) {
+      const { container, unmount } = render(
+        <InlineBanner variant={variant}>Test</InlineBanner>
+      );
+      const el = container.querySelector('[data-slot="inline-banner"]')!;
+      expect(el.getAttribute("data-variant")).toBe(variant);
+      unmount();
+    }
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <InlineBanner className="my-custom-class">Test</InlineBanner>
+    );
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.classList.contains("my-custom-class")).toBe(true);
+  });
+
+  it("has role='alert' for warning variant", () => {
+    const { container } = render(<InlineBanner variant="warning">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("alert");
+  });
+
+  it("has role='alert' for destructive variant", () => {
+    const { container } = render(<InlineBanner variant="destructive">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("alert");
+  });
+
+  it("has role='status' for info variant", () => {
+    const { container } = render(<InlineBanner variant="info">Test</InlineBanner>);
+    const el = container.querySelector('[data-slot="inline-banner"]')!;
+    expect(el.getAttribute("role")).toBe("status");
+  });
+
+  it("renders custom icon when provided", () => {
+    const { container } = render(
+      <InlineBanner icon={<span data-testid="custom-icon">!</span>}>Test</InlineBanner>
+    );
+    expect(screen.getByTestId("custom-icon")).not.toBeNull();
+    const iconSlot = container.querySelector('[data-slot="inline-banner-icon"]');
+    expect(iconSlot).not.toBeNull();
+  });
+});