@handled-ai/design-system 0.9.28 → 0.10.0

package/src/components/empty-state.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode
+  title?: string
+  description: string
+  action?: React.ReactNode
+}
+
+function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {
+  return (
+    <div data-slot="empty-state" className={cn("flex flex-col items-center justify-center py-24 gap-3", className)} {...rest}>
+      {icon && (
+        <div data-slot="empty-state-icon" className="text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12">
+          {icon}
+        </div>
+      )}
+      {title && (
+        <p data-slot="empty-state-title" className="text-sm font-medium text-muted-foreground">
+          {title}
+        </p>
+      )}
+      <p data-slot="empty-state-description" className="text-xs text-muted-foreground">
+        {description}
+      </p>
+      {action && (
+        <div data-slot="empty-state-action" className="mt-3">
+          {action}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { EmptyState, type EmptyStateProps }

package/src/components/filter-chip.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from "react"
+import { Filter, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon?: React.ReactNode
+  active?: boolean
+}
+
+function FilterChip({ icon, children, onClick, active, className, ...rest }: FilterChipProps) {
+  return (
+    <button
+      type="button"
+      data-slot="filter-chip"
+      data-active={active ? "" : undefined}
+      aria-pressed={active}
+      onClick={onClick}
+      className={cn(
+        "text-[11px] px-2.5 py-1 rounded-md border border-border",
+        "text-muted-foreground hover:bg-muted/30 cursor-pointer",
+        "inline-flex items-center gap-1.5 transition-colors",
+        "data-[active]:border-foreground/20 data-[active]:text-foreground",
+        className
+      )}
+      {...rest}
+    >
+      {icon ?? <Filter size={10} />}
+      {children}
+      <ChevronDown size={10} />
+    </button>
+  )
+}
+
+export { FilterChip, type FilterChipProps }

package/src/components/inline-banner.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { Info, AlertTriangle, ShieldAlert, X } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+interface InlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: "info" | "warning" | "destructive"
+  icon?: React.ReactNode
+  onDismiss?: () => void
+}
+
+const variantConfig = {
+  info: {
+    icon: Info,
+    classes: "bg-status-info-bg border-status-info-border text-status-info-fg",
+  },
+  warning: {
+    icon: AlertTriangle,
+    classes: "bg-status-warning-bg border-status-warning-border text-status-warning-fg",
+  },
+  destructive: {
+    icon: ShieldAlert,
+    classes: "bg-status-destructive-bg border-status-destructive-border text-status-destructive-fg",
+  },
+}
+
+function InlineBanner({
+  variant = "warning",
+  icon,
+  children,
+  onDismiss,
+  className,
+  ...rest
+}: InlineBannerProps) {
+  const config = variantConfig[variant]
+  const DefaultIcon = config.icon
+
+  return (
+    <div
+      data-slot="inline-banner"
+      data-variant={variant}
+      role={variant === "destructive" || variant === "warning" ? "alert" : "status"}
+      className={cn("rounded-lg border px-3 py-2 flex items-center gap-2", config.classes, className)}
+      {...rest}
+    >
+      <span data-slot="inline-banner-icon" className="shrink-0">
+        {icon ?? <DefaultIcon size={14} />}
+      </span>
+      <div data-slot="inline-banner-content" className="flex-1 min-w-0">
+        {children}
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          data-slot="inline-banner-dismiss"
+          onClick={onDismiss}
+          className="shrink-0 p-0.5 rounded hover:bg-black/5 transition-colors"
+        >
+          <X size={14} className="opacity-60" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+export { InlineBanner, type InlineBannerProps }

package/src/components/kbd-hint.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+function KbdHint({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd-hint"
+      className={cn(
+        "inline-block text-[10px] leading-none text-muted-foreground/40 font-sans",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { KbdHint }

package/src/components/rich-text-toolbar.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type RichTextAction =
+  | "undo" | "redo"
+  | "font"
+  | "bold" | "italic" | "underline"
+  | "align" | "list"
+  | "delete"
+
+interface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onAction?: (action: RichTextAction) => void
+}
+
+function ToolbarButton({
+  action,
+  icon: Icon,
+  label,
+  extraClassName,
+  onAction,
+}: {
+  action: RichTextAction
+  icon: LucideIcon
+  label: string
+  extraClassName?: string
+  onAction?: (action: RichTextAction) => void
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="rich-text-toolbar-button"
+      onClick={() => onAction?.(action)}
+      aria-label={label}
+      className={cn("p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground", extraClassName)}
+    >
+      <Icon size={14} />
+    </button>
+  )
+}
+
+function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {
+  return (
+    <div
+      data-slot="rich-text-toolbar"
+      role="toolbar"
+      aria-label="Rich text formatting"
+      className={cn("px-3 py-1.5 flex items-center justify-between", className)}
+      {...rest}
+    >
+      <div className="flex items-center gap-0.5">
+        <ToolbarButton action="undo" icon={Undo2} label="Undo" onAction={onAction} />
+        <ToolbarButton action="redo" icon={Redo2} label="Redo" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <button
+          type="button"
+          data-slot="rich-text-toolbar-button"
+          onClick={() => onAction?.("font")}
+          aria-label="Font family"
+          aria-haspopup="true"
+          className="text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1"
+        >
+          Sans Serif
+          <ChevronDown size={10} />
+        </button>
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="bold" icon={Bold} label="Bold" onAction={onAction} />
+        <ToolbarButton action="italic" icon={Italic} label="Italic" onAction={onAction} />
+        <ToolbarButton action="underline" icon={Underline} label="Underline" onAction={onAction} />
+
+        <div className="w-px h-4 bg-border mx-1" aria-hidden="true" />
+
+        <ToolbarButton action="align" icon={AlignLeft} label="Align left" onAction={onAction} />
+        <ToolbarButton action="list" icon={List} label="List" onAction={onAction} />
+      </div>
+
+      <ToolbarButton action="delete" icon={Trash2} label="Delete" extraClassName="hover:text-destructive" onAction={onAction} />
+    </div>
+  )
+}
+
+export { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }

package/src/components/step-timeline.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import type { LucideIcon } from "lucide-react"
+import { Mail, Phone, CheckSquare, Clock, Circle, ChevronUp, ChevronDown } from "lucide-react"
+
+import { cn } from "../lib/utils"
+
+type StepType = "email" | "call" | "task" | "wait" | (string & {})
+
+interface TimelineStep {
+  id: string
+  type: StepType
+  label: string
+}
+
+interface StepTimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: TimelineStep[]
+  expandedStepId?: string
+  onStepClick?: (stepId: string) => void
+  onInsert?: (index: number) => void
+  renderStepBody?: (step: TimelineStep) => React.ReactNode
+  renderStepAccessory?: (step: TimelineStep) => React.ReactNode
+}
+
+const stepTypeConfig: Record<string, { icon: LucideIcon; classes: string }> = {
+  email: { icon: Mail, classes: "bg-blue-500/10 text-blue-600" },
+  call: { icon: Phone, classes: "bg-emerald-500/10 text-emerald-600" },
+  task: { icon: CheckSquare, classes: "bg-purple-500/10 text-purple-600" },
+  wait: { icon: Clock, classes: "bg-muted text-muted-foreground" },
+}
+
+const defaultStepConfig: { icon: LucideIcon; classes: string } = { icon: Circle, classes: "bg-muted text-muted-foreground" }
+
+function StepTimeline({
+  steps,
+  expandedStepId,
+  onStepClick,
+  onInsert,
+  renderStepBody,
+  renderStepAccessory,
+  className,
+  ...rest
+}: StepTimelineProps) {
+  return (
+    <div data-slot="step-timeline" className={cn("relative ml-5", className)} {...rest}>
+      <div className="absolute left-0 top-0 bottom-0 border-l-2 border-border" />
+
+      {steps.map((step, index) => {
+        const expanded = step.id === expandedStepId
+        const config = stepTypeConfig[step.type] ?? defaultStepConfig
+        const TypeIcon = config.icon
+        const isInteractive = !!(onStepClick || renderStepBody)
+        const bodyId = `step-timeline-body-${step.id}`
+
+        const headerContent = (
+          <>
+            <div className={cn("w-8 h-8 rounded-full flex items-center justify-center shrink-0", config.classes)}>
+              <TypeIcon size={16} />
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider">
+                {step.type}
+              </span>
+              <span className="text-sm font-medium">{step.label}</span>
+            </div>
+          </>
+        )
+
+        return (
+          <React.Fragment key={step.id}>
+            {index > 0 && onInsert && (
+              <div className="relative pl-8 py-1">
+                <button
+                  type="button"
+                  data-slot="step-timeline-insert"
+                  onClick={() => onInsert(index)}
+                  className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+                >
+                  + Add Step
+                </button>
+              </div>
+            )}
+
+            <div data-slot="step-timeline-step" className="relative pl-8 py-2">
+              <div className="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full border-2 border-border bg-background z-10" />
+
+              <div data-slot="step-timeline-card" className="border border-border rounded-lg overflow-hidden">
+                {isInteractive ? (
+                  <div className="flex items-center w-full px-4 py-3 gap-3">
+                    <button
+                      type="button"
+                      aria-expanded={expanded}
+                      aria-controls={bodyId}
+                      onClick={() => onStepClick?.(step.id)}
+                      className="flex items-center gap-3 flex-1 min-w-0 cursor-pointer hover:opacity-80 transition-opacity text-left"
+                    >
+                      {headerContent}
+                    </button>
+                    <div className="ml-auto flex items-center gap-2 shrink-0">
+                      {renderStepAccessory && (
+                        <div className="shrink-0">
+                          {renderStepAccessory(step)}
+                        </div>
+                      )}
+                      <div className="shrink-0 text-muted-foreground">
+                        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="w-full px-4 py-3 flex items-center gap-3">
+                    {headerContent}
+                    {renderStepAccessory && (
+                      <div className="ml-auto shrink-0">
+                        {renderStepAccessory(step)}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {expanded && renderStepBody && (
+                  <div id={bodyId} data-slot="step-timeline-body">
+                    {renderStepBody(step)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </React.Fragment>
+        )
+      })}
+
+      {onInsert && (
+        <div className="relative pl-8 py-1">
+          <button
+            type="button"
+            data-slot="step-timeline-insert"
+            onClick={() => onInsert(steps.length)}
+            className="border border-dashed border-border/50 rounded-lg py-2 text-center text-xs text-muted-foreground/50 hover:text-muted-foreground hover:border-border cursor-pointer transition-colors w-full"
+          >
+            + Add Step
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StepTimeline, type StepTimelineProps, type TimelineStep, type StepType }

package/src/components/sticky-action-bar.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+interface StickyActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  left?: React.ReactNode
+  right?: React.ReactNode
+  bordered?: boolean
+}
+
+function StickyActionBar({ left, right, bordered = true, className, ...rest }: StickyActionBarProps) {
+  return (
+    <div
+      data-slot="sticky-action-bar"
+      className={cn(
+        "flex items-center justify-between sticky bottom-0 bg-background",
+        bordered && "pt-3 border-t border-border/50",
+        className
+      )}
+      {...rest}
+    >
+      {left && (
+        <div data-slot="sticky-action-bar-left" className="flex items-center gap-1">
+          {left}
+        </div>
+      )}
+      {right && (
+        <div data-slot="sticky-action-bar-right" className="ml-auto flex items-center gap-2">
+          {right}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { StickyActionBar, type StickyActionBarProps }

package/src/components/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "../lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/variable-autocomplete.tsx

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