@otfdashkit/ui 0.1.0

package/src/advanced/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface ToggleButtonProps {
+  value: string
+  pressed?: boolean
+  onClick?: () => void
+  disabled?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export function ToggleButton({ pressed, onClick, disabled, children, className }: ToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors border',
+        'disabled:pointer-events-none disabled:opacity-50',
+        pressed
+          ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]'
+          : 'bg-transparent text-[hsl(var(--foreground))] border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface ToggleButtonGroupSingle {
+  type?: 'single'
+  value: string
+  onChange: (v: string) => void
+}
+
+interface ToggleButtonGroupMultiple {
+  type: 'multiple'
+  value: string[]
+  onChange: (v: string[]) => void
+}
+
+type ToggleButtonGroupProps = (ToggleButtonGroupSingle | ToggleButtonGroupMultiple) & {
+  children: React.ReactNode
+  className?: string
+}
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
+  const { children, className } = props
+
+  const isPressed = (val: string) =>
+    props.type === 'multiple' ? (props.value as string[]).includes(val) : props.value === val
+
+  const handleClick = (val: string) => {
+    if (props.type === 'multiple') {
+      const current = props.value as string[]
+      props.onChange(current.includes(val) ? current.filter((v) => v !== val) : [...current, val])
+    } else {
+      ;(props as ToggleButtonGroupSingle).onChange(val)
+    }
+  }
+
+  return (
+    <div className={cn('inline-flex items-center gap-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.4)] p-0.5', className)}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const tb = child as React.ReactElement<ToggleButtonProps>
+        return React.cloneElement(tb, {
+          pressed: isPressed(tb.props.value),
+          onClick: () => handleClick(tb.props.value),
+        })
+      })}
+    </div>
+  )
+}

package/src/advanced/ToggleButton/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './ToggleButton'

package/src/advanced/bulk-actions.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+
+interface ActionDef {
+  label: string
+  icon?: React.ReactNode
+  onClick: () => void
+  variant?: 'default' | 'destructive'
+}
+
+interface BulkActionsProps {
+  count: number
+  actions: ActionDef[]
+  onClear: () => void
+  className?: string
+}
+
+export function BulkActions({ count, actions, onClear, className }: BulkActionsProps) {
+  if (count === 0) return null
+  return (
+    <div className={cn('fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-2 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--card))] px-4 py-2 shadow-lg', className)}>
+      <span className="text-sm font-medium text-[hsl(var(--foreground))] pr-2 border-r border-[hsl(var(--border))]">
+        {count} selected
+      </span>
+      <div className="flex items-center gap-1">
+        {actions.map((action, i) => (
+          <Button
+            key={i}
+            variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
+            size="sm"
+            className="h-7 gap-1.5 text-xs rounded-full px-3"
+            onClick={action.onClick}
+          >
+            {action.icon}
+            {action.label}
+          </Button>
+        ))}
+      </div>
+      <button onClick={onClear} className="ml-1 rounded-full p-0.5 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors">
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}

package/src/advanced/command-bar.tsx

@@ -0,0 +1,115 @@
+import React from 'react'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Dialog, DialogContent, DialogTitle } from '../primitives/dialog'
+
+interface UseCommandBarReturn { open: boolean; setOpen: (v: boolean) => void }
+
+export function useCommandBar(): UseCommandBarReturn {
+  const [open, setOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setOpen((o) => !o) }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  return { open, setOpen }
+}
+
+export function CommandBarEmpty({ children = 'No results found.' }: { children?: React.ReactNode }) {
+  return <div className="py-6 text-center text-sm text-[hsl(var(--muted-foreground))]">{children}</div>
+}
+
+export function CommandBarGroup({ heading, children }: { heading: string; children: React.ReactNode }) {
+  return (
+    <div className="px-2 py-1">
+      <p className="mb-1 px-2 text-xs font-semibold text-[hsl(var(--muted-foreground))]">{heading}</p>
+      {children}
+    </div>
+  )
+}
+
+interface CommandBarItemProps {
+  icon?: React.ReactNode
+  label: string
+  shortcut?: string
+  onSelect?: () => void
+  active?: boolean
+  className?: string
+}
+
+export function CommandBarItem({ icon, label, shortcut, onSelect, active, className }: CommandBarItemProps) {
+  return (
+    <button
+      onClick={onSelect}
+      className={cn(
+        'flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors',
+        active ? 'bg-[hsl(var(--accent))] text-[hsl(var(--accent-foreground))]' : 'hover:bg-[hsl(var(--accent)/0.6)]',
+        className
+      )}
+    >
+      {icon && <span className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]">{icon}</span>}
+      <span className="flex-1 text-left truncate">{label}</span>
+      {shortcut && (
+        <kbd className="pointer-events-none shrink-0 inline-flex h-5 items-center rounded border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-1.5 text-[10px] font-medium text-[hsl(var(--muted-foreground))]">
+          {shortcut}
+        </kbd>
+      )}
+    </button>
+  )
+}
+
+interface CommandBarProps {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  children: React.ReactNode
+  placeholder?: string
+  onSearch?: (q: string) => void
+}
+
+export function CommandBar({ open, onOpenChange, children, placeholder = 'Search commands...', onSearch }: CommandBarProps) {
+  const [query, setQuery] = React.useState('')
+
+  const handleSearch = (v: string) => { setQuery(v); onSearch?.(v) }
+
+  const items = React.useRef<HTMLDivElement>(null)
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') { onOpenChange(false); return }
+    const focusable = items.current?.querySelectorAll<HTMLButtonElement>('button')
+    if (!focusable?.length) return
+    const arr = Array.from(focusable)
+    const idx = arr.indexOf(document.activeElement as HTMLButtonElement)
+    if (e.key === 'ArrowDown') { e.preventDefault(); arr[(idx + 1) % arr.length]?.focus() }
+    if (e.key === 'ArrowUp')   { e.preventDefault(); arr[(idx - 1 + arr.length) % arr.length]?.focus() }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="p-0 gap-0 max-w-lg overflow-hidden" onKeyDown={handleKeyDown}>
+        <DialogTitle className="sr-only">Command Bar</DialogTitle>
+        <div className="flex items-center gap-2 border-b border-[hsl(var(--border))] px-4 py-3">
+          <Search className="h-4 w-4 shrink-0 text-[hsl(var(--muted-foreground))]" />
+          <input
+            autoFocus
+            className="flex-1 bg-transparent text-sm outline-none placeholder:text-[hsl(var(--muted-foreground))]"
+            placeholder={placeholder}
+            value={query}
+            onChange={(e) => handleSearch(e.target.value)}
+          />
+          {query && (
+            <button onClick={() => handleSearch('')} className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+        <div ref={items} className="max-h-80 overflow-y-auto py-2">
+          {children}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/advanced/filters.tsx

@@ -0,0 +1,103 @@
+import React from 'react'
+import { Plus, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { Button } from '../primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../primitives/popover'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../primitives/select'
+import { Input } from '../primitives/input'
+
+export interface FilterDef {
+  key: string
+  label: string
+  type: 'text' | 'select' | 'date' | 'number'
+  options?: { label: string; value: string }[]
+}
+
+export interface FilterValue {
+  key: string
+  operator: string
+  value: string
+}
+
+const textOps = ['contains', 'equals', 'starts with']
+const numOps = ['=', '>', '<', '>=', '<=']
+
+function AddFilterPopover({ filters, onAdd }: { filters: FilterDef[]; onAdd: (v: FilterValue) => void }) {
+  const [open, setOpen] = React.useState(false)
+  const [key, setKey] = React.useState('')
+  const [op, setOp] = React.useState('')
+  const [val, setVal] = React.useState('')
+
+  const def = filters.find((f) => f.key === key)
+  const ops = def?.type === 'number' ? numOps : textOps
+
+  const handleAdd = () => {
+    if (!key || !val) return
+    onAdd({ key, operator: op || ops[0], value: val })
+    setKey(''); setOp(''); setVal('')
+    setOpen(false)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-7 gap-1 text-xs"><Plus className="h-3.5 w-3.5" />Add Filter</Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-3 space-y-2">
+        <Select value={key} onValueChange={setKey}>
+          <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Field" /></SelectTrigger>
+          <SelectContent>{filters.map((f) => <SelectItem key={f.key} value={f.key}>{f.label}</SelectItem>)}</SelectContent>
+        </Select>
+        {key && (
+          <Select value={op || ops[0]} onValueChange={setOp}>
+            <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
+            <SelectContent>{ops.map((o) => <SelectItem key={o} value={o}>{o}</SelectItem>)}</SelectContent>
+          </Select>
+        )}
+        {key && def?.type === 'select' ? (
+          <Select value={val} onValueChange={setVal}>
+            <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="Value" /></SelectTrigger>
+            <SelectContent>{def.options?.map((o) => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}</SelectContent>
+          </Select>
+        ) : key && (
+          <Input type={def?.type === 'number' ? 'number' : def?.type === 'date' ? 'date' : 'text'} className="h-8 text-xs" value={val} onChange={(e) => setVal(e.target.value)} placeholder="Value" />
+        )}
+        <Button size="sm" className="w-full h-7 text-xs" onClick={handleAdd} disabled={!key || !val}>Apply</Button>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterBadge({ filter, def, onRemove }: { filter: FilterValue; def?: FilterDef; onRemove: () => void }) {
+  return (
+    <span className="inline-flex items-center gap-1 rounded-full border border-[hsl(var(--border))] bg-[hsl(var(--muted))] px-2.5 py-0.5 text-xs font-medium text-[hsl(var(--foreground))]">
+      <span className="text-[hsl(var(--muted-foreground))]">{def?.label ?? filter.key}</span>
+      <span>{filter.operator}</span>
+      <span className="font-semibold">{filter.value}</span>
+      <button onClick={onRemove} className="ml-0.5 rounded-full hover:text-[hsl(var(--destructive))]"><X className="h-3 w-3" /></button>
+    </span>
+  )
+}
+
+export function FilterItem({ children }: { children: React.ReactNode }) {
+  return <div className="flex items-center gap-1">{children}</div>
+}
+
+interface FiltersProps {
+  filters: FilterDef[]
+  value: FilterValue[]
+  onChange: (v: FilterValue[]) => void
+  className?: string
+}
+
+export function Filters({ filters, value, onChange, className }: FiltersProps) {
+  const remove = (i: number) => onChange(value.filter((_, idx) => idx !== i))
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      {value.map((fv, i) => (
+        <FilterBadge key={i} filter={fv} def={filters.find((f) => f.key === fv.key)} onRemove={() => remove(i)} />
+      ))}
+      <AddFilterPopover filters={filters} onAdd={(fv) => onChange([...value, fv])} />
+    </div>
+  )
+}