minka-ds 0.1.2 → 0.1.3

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "minka-ds",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
-  "files": ["src", "tokens"],
+  "files": [
+    "src",
+    "tokens"
+  ],
   "exports": {
     ".": "./src/index.ts",
     "./tokens/*": "./tokens/*"
@@ -19,6 +22,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.14.0",
     "radix-ui": "^1.4.3",
+    "react-day-picker": "^10.0.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
   }

package/src/components/ui/calendar.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type DayButton,
+} from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { Button, buttonVariants } from "./button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "dropdown",
+  numberOfMonths,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+  const resolvedMonths = numberOfMonths ?? (props.mode === "range" ? 2 : 1)
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      numberOfMonths={resolvedMonths}
+      className={cn(
+        "group/calendar bg-[var(--color-bg-raised)] rounded-[var(--radius-card)] p-3 [--cell-size:--spacing(9)]",
+        className
+      )}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root:              cn("w-fit", defaultClassNames.root),
+        months:            cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month:             cn("flex w-full flex-col gap-4", defaultClassNames.month),
+
+        // ── Nav ─────────────────────────────────────────────────────────────
+        nav:               cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous:   cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "size-(--cell-size) select-none aria-disabled:opacity-40",
+          defaultClassNames.button_previous
+        ),
+        button_next:       cn(
+          buttonVariants({ variant: "ghost", size: "icon-sm" }),
+          "size-(--cell-size) select-none aria-disabled:opacity-40",
+          defaultClassNames.button_next
+        ),
+
+        // ── Caption ──────────────────────────────────────────────────────────
+        month_caption:     cn(
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        caption_label:     cn(
+          "font-medium select-none",
+          captionLayout === "label"
+            ? "text-body-sm"
+            : "flex h-8 items-center gap-1 [border-radius:var(--radius-input)] pr-1 pl-2 text-body-sm hover:bg-[var(--color-action-ghost-hover)] transition-colors [&>svg]:size-3.5 [&>svg]:text-[var(--color-text-muted)]",
+          defaultClassNames.caption_label
+        ),
+
+        // ── Dropdowns ────────────────────────────────────────────────────────
+        dropdowns:         cn(
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root:     cn(
+          "relative [border-radius:var(--radius-button)] hover:bg-[var(--color-action-ghost-hover)] transition-colors",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown:          cn(
+          "absolute inset-0 opacity-0 cursor-pointer",
+          defaultClassNames.dropdown
+        ),
+
+        // ── Grid ─────────────────────────────────────────────────────────────
+        month_grid:        "w-full border-collapse",
+        weekdays:          cn("flex", defaultClassNames.weekdays),
+        weekday:           cn(
+          "flex-1 text-caption text-[var(--color-text-muted)] text-center select-none",
+          defaultClassNames.weekday
+        ),
+        week:              cn("mt-2 flex w-full", defaultClassNames.week),
+
+        // ── Day cells ────────────────────────────────────────────────────────
+        day:               cn(
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none",
+          "[&:last-child[data-selected=true]_button]:rounded-r-[var(--radius-input)]",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-[var(--radius-input)]"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-[var(--radius-input)]",
+          defaultClassNames.day
+        ),
+        range_start:       cn("rounded-l-[var(--radius-input)] bg-[var(--color-action-ghost-hover)]", defaultClassNames.range_start),
+        range_middle:      cn("rounded-none", defaultClassNames.range_middle),
+        range_end:         cn("rounded-r-[var(--radius-input)] bg-[var(--color-action-ghost-hover)]", defaultClassNames.range_end),
+        today:             cn(
+          "rounded-[var(--radius-input)] bg-[var(--color-action-ghost-hover)] text-[var(--color-text-default)] data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside:           cn("text-[var(--color-text-hint)] aria-selected:text-[var(--color-text-hint)]", defaultClassNames.outside),
+        disabled:          cn("text-[var(--color-text-disabled)] opacity-50", defaultClassNames.disabled),
+        hidden:            cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => (
+          <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
+        ),
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left")  return <ChevronLeftIcon  className={cn("size-4", className)} {...props} />
+          if (orientation === "right") return <ChevronRightIcon className={cn("size-4", className)} {...props} />
+          return <ChevronDownIcon className={cn("size-4", className)} {...props} />
+        },
+        DayButton: CalendarDayButton,
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+  const ref = React.useRef<HTMLButtonElement>(null)
+
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none",
+        modifiers.selected || modifiers.today ? "text-body-sm" : "text-body-sm-light",
+        modifiers.outside && "text-[var(--color-text-hint)] hover:text-[var(--color-text-hint)]",
+        "group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10",
+        "group-data-[focused=true]/day:border-[var(--color-border-focus)] group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-[var(--color-border-focus)]/50",
+        "data-[selected-single=true]:bg-[var(--color-action-primary-default)] data-[selected-single=true]:text-[var(--color-action-primary-foreground)]",
+        "data-[range-start=true]:rounded-l-[var(--radius-input)] data-[range-start=true]:bg-[var(--color-action-primary-default)] data-[range-start=true]:text-[var(--color-action-primary-foreground)]",
+        "data-[range-end=true]:rounded-r-[var(--radius-input)] data-[range-end=true]:bg-[var(--color-action-primary-default)] data-[range-end=true]:text-[var(--color-action-primary-foreground)]",
+        "data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-[var(--color-action-ghost-hover)] data-[range-middle=true]:text-[var(--color-text-default)]",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

package/src/components/ui/data-table.tsx

@@ -155,7 +155,7 @@ function DataTable<TData, TValue>({
       >
 
         <Table className="[&_th:first-child]:pl-4 [&_td:first-child]:pl-4">
-          <TableHeader className="sticky top-0 z-10 bg-[var(--color-bg-base)]">
+          <TableHeader className="sticky top-0 [z-index:var(--z-sticky)] bg-[var(--color-bg-base)]">
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header, index) => (

package/src/components/ui/filter-chip.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { XIcon } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+type FilterChipProps =
+  | {
+      variant?: "filter"
+      label: string
+      values: { label: string; onRemove: () => void }[]
+      onLabelClick?: () => void
+      className?: string
+    }
+  | {
+      variant: "clear-all"
+      onClear: () => void
+      className?: string
+    }
+
+function FilterChip(props: FilterChipProps) {
+  if (props.variant === "clear-all") {
+    const { onClear, className } = props
+    return (
+      <button
+        type="button"
+        onClick={onClear}
+        className={cn(
+          "text-caption text-[var(--color-text-muted)] underline-offset-2 hover:underline cursor-pointer",
+          className
+        )}
+      >
+        Clear all
+      </button>
+    )
+  }
+
+  const { label, values, onLabelClick, className } = props
+
+  return (
+    <div className={cn("flex items-center gap-1.5", className)}>
+      <button
+        type="button"
+        onClick={onLabelClick}
+        className={cn(
+          "text-caption text-[var(--color-text-muted)] underline-offset-2 hover:underline cursor-pointer",
+          !onLabelClick && "pointer-events-none"
+        )}
+      >
+        {label}:
+      </button>
+      {values.map((value, i) => (
+        <span
+          key={i}
+          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] px-2 py-0.5 text-caption text-[var(--color-text-default)]"
+        >
+          {value.label}
+          <button
+            type="button"
+            onClick={value.onRemove}
+            className="text-[var(--color-text-muted)] hover:text-[var(--color-text-default)] transition-colors"
+            aria-label={`Remove ${value.label}`}
+          >
+            <XIcon className="size-3" />
+          </button>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export { FilterChip }

package/src/components/ui/filter-combobox.tsx

@@ -0,0 +1,430 @@
+"use client"
+
+import * as React from "react"
+import {
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PlusIcon,
+  SearchIcon,
+} from "lucide-react"
+import type { DateRange } from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import { Input } from "./input"
+import { Tabs, TabsList, TabsTrigger } from "./tabs"
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+interface FilterCategory {
+  id: string
+  label: string
+  type?: "list" | "date" | "amount"
+  values?: string[]
+  renderValue?: (value: string) => React.ReactNode
+}
+
+type AmountValue   = { exact: number } | { min?: number; max?: number }
+type CategoryValue = string | DateRange | AmountValue
+
+
+type Step = 1 | 2 | 3
+
+// ── Main component ─────────────────────────────────────────────────────────────
+
+function FilterCombobox({
+  categories,
+  onApply,
+  activeFilters = {},
+  trigger,
+  dropdownAlign = "left",
+  className,
+}: {
+  categories: FilterCategory[]
+  onApply: (categoryId: string, values: CategoryValue[]) => void
+  activeFilters?: Record<string, CategoryValue[]>
+  trigger?: (props: { open: boolean; onClick: () => void }) => React.ReactNode
+  dropdownAlign?: "left" | "right"
+  className?: string
+}) {
+  const [open, setOpen]                         = React.useState(false)
+  const [step, setStep]                         = React.useState<Step>(1)
+  const [selectedCategory, setSelectedCategory] = React.useState<FilterCategory | null>(null)
+  const [selectedValues, setSelectedValues]     = React.useState<Set<string>>(new Set())
+  const [dateRange, setDateRange]               = React.useState<DateRange | undefined>()
+  const [amountMode, setAmountMode]             = React.useState<"exact" | "range">("exact")
+  const [amountExact, setAmountExact]           = React.useState("")
+  const [amountMin, setAmountMin]               = React.useState("")
+  const [amountMax, setAmountMax]               = React.useState("")
+  const [search, setSearch]                     = React.useState("")
+
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const searchRef    = React.useRef<HTMLInputElement>(null)
+
+  // Close on outside click
+  React.useEffect(() => {
+    if (!open) return
+    const handler = (e: MouseEvent) => {
+      if (!containerRef.current?.contains(e.target as Node)) handleClose()
+    }
+    document.addEventListener("mousedown", handler)
+    return () => document.removeEventListener("mousedown", handler)
+  }, [open])
+
+  // Auto-focus search when entering step 2
+  React.useEffect(() => {
+    if (open && step === 2) setTimeout(() => searchRef.current?.focus(), 30)
+  }, [open, step])
+
+  function handleClose() {
+    setOpen(false)
+    setStep(1)
+    setSelectedCategory(null)
+    setSelectedValues(new Set())
+    setDateRange(undefined)
+    setSearch("")
+    setAmountMode("exact")
+    setAmountExact("")
+    setAmountMin("")
+    setAmountMax("")
+  }
+
+  function openCategory(cat: FilterCategory) {
+    const existing = activeFilters[cat.id] ?? []
+
+    if (cat.type === "date") {
+      const custom = existing.find((v): v is DateRange => typeof v === "object" && "from" in v)
+      setSelectedCategory(cat)
+      setDateRange(custom)
+      setSelectedValues(new Set())
+      setSearch("")
+      setStep(3)
+      return
+    }
+
+    if (cat.type === "amount") {
+      const custom = existing.find((v): v is AmountValue =>
+        typeof v === "object" && ("exact" in v || "min" in v || "max" in v)
+      )
+      setSelectedCategory(cat)
+      setSelectedValues(new Set())
+      setSearch("")
+      if (custom) {
+        if ("exact" in custom) {
+          setAmountMode("exact")
+          setAmountExact(String(custom.exact))
+          setAmountMin("")
+          setAmountMax("")
+        } else {
+          const r = custom as { min?: number; max?: number }
+          setAmountMode("range")
+          setAmountExact("")
+          setAmountMin(r.min != null ? String(r.min) : "")
+          setAmountMax(r.max != null ? String(r.max) : "")
+        }
+      }
+      setStep(3)
+      return
+    }
+
+    setSelectedValues(new Set(existing.filter((v): v is string => typeof v === "string")))
+    setSelectedCategory(cat)
+    setSearch("")
+    setStep(2)
+  }
+
+  function applyValues() {
+    if (!selectedCategory) return
+    onApply(selectedCategory.id, Array.from(selectedValues))
+    handleClose()
+  }
+
+  function applyCustomDate() {
+    if (!selectedCategory || !dateRange?.from) return
+    onApply(selectedCategory.id, [dateRange])
+    handleClose()
+  }
+
+  function applyCustomAmount() {
+    if (!selectedCategory) return
+    let value: AmountValue
+    if (amountMode === "exact") {
+      const n = parseFloat(amountExact)
+      if (isNaN(n)) return
+      value = { exact: n }
+    } else {
+      const min = amountMin !== "" ? parseFloat(amountMin) : undefined
+      const max = amountMax !== "" ? parseFloat(amountMax) : undefined
+      if (min == null && max == null) return
+      value = { min, max }
+    }
+    onApply(selectedCategory.id, [value])
+    handleClose()
+  }
+
+  function toggleValue(value: string, singleSelect = false) {
+    setSelectedValues(prev => {
+      if (singleSelect) return prev.has(value) ? new Set() : new Set([value])
+      const next = new Set(prev)
+      next.has(value) ? next.delete(value) : next.add(value)
+      return next
+    })
+  }
+
+  // ── Derived values ───────────────────────────────────────────────────────────
+
+  const isDate   = selectedCategory?.type === "date"
+  const isAmount = selectedCategory?.type === "amount"
+
+  const step2AllValues = selectedCategory?.values ?? []
+
+  const showSearch    = step2AllValues.length > 4
+  const step2Filtered = showSearch
+    ? step2AllValues.filter(v => v.toLowerCase().includes(search.toLowerCase()))
+    : step2AllValues
+
+  const canApplyAmount = amountMode === "exact"
+    ? amountExact !== "" && !isNaN(parseFloat(amountExact))
+    : amountMin !== "" || amountMax !== ""
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+
+  return (
+    <div ref={containerRef} className={cn("relative inline-block", className)}>
+      {trigger ? trigger({ open, onClick: () => setOpen(v => !v) }) : (
+        <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={() => setOpen(v => !v)}>
+          <PlusIcon className="size-3.5" />
+          Add filter
+        </Button>
+      )}
+
+      {open && (
+        <div className={cn(
+          dropdownAlign === "right" ? "absolute right-0 top-full mt-1.5 overflow-hidden [border-radius:var(--radius-popover)]" : "absolute left-0 top-full mt-1.5 overflow-hidden [border-radius:var(--radius-popover)]",
+          "bg-[var(--color-bg-overlay)] shadow-[var(--shadow-popover)] ring-1 ring-[var(--color-border-subtle)]",
+          "[z-index:var(--z-dropdown)]",
+          step === 3 && isDate ? "w-auto" : "w-56"
+        )}>
+
+          {/* Step 1 — category list */}
+          {step === 1 && (
+            <ul className="p-1">
+              {categories.map(cat => (
+                <li key={cat.id}>
+                  <PickerRow onClick={() => openCategory(cat)}>{cat.label}</PickerRow>
+                </li>
+              ))}
+            </ul>
+          )}
+
+          {/* Step 2 — value list */}
+          {step === 2 && selectedCategory && (
+            <>
+              <StepHeader
+                title={selectedCategory.label}
+                onBack={() => { setStep(1); setSearch("") }}
+              />
+              {showSearch && (
+                <div className="px-1 pt-1">
+                  <SearchInput ref={searchRef} value={search} onChange={setSearch} />
+                </div>
+              )}
+              <ul className="max-h-52 overflow-y-auto p-1">
+                {step2Filtered.length === 0
+                  ? <EmptyRow />
+                  : step2Filtered.map(value => (
+                    <li key={value}>
+                      <CheckRow
+                        checked={selectedValues.has(value)}
+                        onToggle={() => toggleValue(value)}
+                      >
+                        {selectedCategory.renderValue?.(value) ?? value}
+                      </CheckRow>
+                    </li>
+                  ))
+                }
+              </ul>
+              {selectedValues.size > 0 && (
+                <div className="p-1">
+                  <Button size="sm" className="w-full" onClick={applyValues}>
+                    Apply
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Step 3 — custom date range */}
+          {step === 3 && isDate && (
+            <>
+              <StepHeader
+                title={selectedCategory?.label ?? "Date"}
+                onBack={() => setStep(1)}
+              />
+              <div className="p-1">
+                <Calendar mode="range" selected={dateRange} onSelect={setDateRange} numberOfMonths={1} />
+              </div>
+              {dateRange?.from && (
+                <div className="p-1">
+                  <Button size="sm" className="w-full" onClick={applyCustomDate}>
+                    Apply
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+
+          {/* Step 3 — custom amount (no step 2 for amount — opens here directly) */}
+          {step === 3 && isAmount && (
+            <>
+              <StepHeader
+                title="Amount"
+                onBack={() => { setStep(1) }}
+              />
+              <div className="px-2 pb-2 flex flex-col gap-2">
+                <Tabs
+                  value={amountMode}
+                  onValueChange={v => setAmountMode(v as "exact" | "range")}
+                  className="w-full"
+                >
+                  <TabsList className="w-full">
+                    <TabsTrigger value="exact" className="flex-1">Exact</TabsTrigger>
+                    <TabsTrigger value="range" className="flex-1">Range</TabsTrigger>
+                  </TabsList>
+                </Tabs>
+
+                {amountMode === "exact" ? (
+                  <div className="relative">
+                    <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-body-sm text-[var(--color-text-muted)]">$</span>
+                    <Input
+                      type="number"
+                      min="0"
+                      value={amountExact}
+                      onChange={e => setAmountExact(e.target.value)}
+                      placeholder="0"
+                      className="pl-6 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-2">
+                    <div className="relative flex-1">
+                      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-body-sm text-[var(--color-text-muted)]">$</span>
+                      <Input
+                        type="number"
+                        min="0"
+                        value={amountMin}
+                        onChange={e => setAmountMin(e.target.value)}
+                        placeholder="Min"
+                        className="pl-6 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                    </div>
+                    <span className="text-body-sm text-[var(--color-text-muted)] shrink-0">–</span>
+                    <div className="relative flex-1">
+                      <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-body-sm text-[var(--color-text-muted)]">$</span>
+                      <Input
+                        type="number"
+                        min="0"
+                        value={amountMax}
+                        onChange={e => setAmountMax(e.target.value)}
+                        placeholder="Max"
+                        className="pl-6 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                      />
+                    </div>
+                  </div>
+                )}
+
+                {canApplyAmount && (
+                  <Button size="sm" className="w-full" onClick={applyCustomAmount}>
+                    Apply
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Internal sub-components ────────────────────────────────────────────────────
+
+const SearchInput = React.forwardRef<
+  HTMLInputElement,
+  { value: string; onChange: (v: string) => void }
+>(({ value, onChange }, ref) => (
+  <div className="flex h-8 items-center gap-2 [border-radius:var(--radius-input)] border border-[var(--color-border-default)]/30 bg-[var(--color-bg-canvas)]/60 px-2">
+    <SearchIcon className="size-3.5 shrink-0 text-[var(--color-text-muted)]" />
+    <input
+      ref={ref}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      placeholder="Search…"
+      className="min-w-0 flex-1 bg-transparent text-body-sm outline-none placeholder:text-[var(--color-text-hint)]"
+    />
+  </div>
+))
+SearchInput.displayName = "SearchInput"
+
+function StepHeader({ title, onBack }: { title: string; onBack: () => void }) {
+  return (
+    <div className="flex items-center gap-1 px-1 pt-1">
+      <button
+        type="button"
+        onClick={onBack}
+        className="flex items-center justify-center [border-radius:var(--radius-tag)] p-1 text-[var(--color-text-muted)] hover:bg-[var(--color-action-ghost-hover)] transition-colors"
+      >
+        <ChevronLeftIcon className="size-4" />
+      </button>
+      <span className="text-body-sm font-medium text-[var(--color-text-default)]">{title}</span>
+    </div>
+  )
+}
+
+function PickerRow({ children, onClick }: { children: React.ReactNode; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="relative flex w-full items-center gap-2 [border-radius:var(--radius-tag)] py-1.5 pl-2 pr-8 text-body-sm text-[var(--color-text-default)] hover:bg-[var(--color-action-ghost-hover)] transition-colors"
+    >
+      {children}
+      <ChevronRightIcon className="pointer-events-none absolute right-2 size-3.5 text-[var(--color-text-muted)]" />
+    </button>
+  )
+}
+
+function CheckRow({
+  children,
+  checked,
+  onToggle,
+}: {
+  children: React.ReactNode
+  checked: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className="relative flex w-full items-center gap-2 [border-radius:var(--radius-tag)] py-1.5 pl-2 pr-8 text-body-sm text-[var(--color-text-default)] hover:bg-[var(--color-action-ghost-hover)] transition-colors"
+    >
+      {children}
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        {checked && <CheckIcon className="size-4 text-[var(--color-text-default)]" />}
+      </span>
+    </button>
+  )
+}
+
+function EmptyRow() {
+  return <li className="py-2 text-center text-body-sm text-[var(--color-text-muted)]">No results</li>
+}
+
+// ── Exports ────────────────────────────────────────────────────────────────────
+
+export { FilterCombobox }
+export type { FilterCategory, CategoryValue, AmountValue }

package/src/components/ui/search-bar.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+import * as React from "react"
+import { PlusIcon, SearchIcon, XIcon } from "lucide-react"
+import type { DateRange } from "react-day-picker"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { FilterChip } from "./filter-chip"
+import { FilterCombobox } from "./filter-combobox"
+import type { FilterCategory, CategoryValue } from "./filter-combobox"
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group"
+import { Kbd } from "./kbd"
+
+// ── Default label formatter ────────────────────────────────────────────────────
+
+function defaultFilterValueLabel(_categoryId: string, value: CategoryValue): string {
+  if (typeof value === "string") return value
+  if (typeof value === "object" && "from" in value) {
+    const v = value as DateRange
+    if (!v.from) return ""
+    const from = v.from.toLocaleDateString("default", { month: "short", day: "numeric" })
+    const to   = v.to?.toLocaleDateString("default", { month: "short", day: "numeric" })
+    return to ? `${from} – ${to}` : `From ${from}`
+  }
+  if (typeof value === "object" && "exact" in value) {
+    return (value as { exact: number }).exact.toLocaleString("en-US")
+  }
+  if (typeof value === "object") {
+    const { min, max } = value as { min?: number; max?: number }
+    if (min != null && max != null) return `${min.toLocaleString()} – ${max.toLocaleString()}`
+    if (min != null) return `> ${min.toLocaleString()}`
+    if (max != null) return `< ${max.toLocaleString()}`
+  }
+  return ""
+}
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+
+interface SearchBarProps {
+  placeholder?: string
+  value: string
+  onChange: (value: string) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onFocus?: () => void
+  inputRef?: React.RefObject<HTMLInputElement | null>
+  kbdHint?: React.ReactNode
+
+  filterCategories?: FilterCategory[]
+  activeFilters?: Record<string, CategoryValue[]>
+  onApplyFilter?: (categoryId: string, values: CategoryValue[]) => void
+  onRemoveFilter?: (categoryId: string, value: CategoryValue) => void
+  onClearFilters?: () => void
+  filterValueLabel?: (categoryId: string, value: CategoryValue) => string
+
+  children?: React.ReactNode
+  className?: string
+}
+
+// ── Component ──────────────────────────────────────────────────────────────────
+
+function SearchBar({
+  placeholder,
+  value,
+  onChange,
+  onKeyDown,
+  onFocus,
+  inputRef,
+  kbdHint,
+  filterCategories = [],
+  activeFilters = {},
+  onApplyFilter,
+  onRemoveFilter,
+  onClearFilters,
+  filterValueLabel = defaultFilterValueLabel,
+  children,
+  className,
+}: SearchBarProps) {
+  const hasActiveFilters    = Object.values(activeFilters).some(v => v.length > 0)
+  const hasFilterCategories = filterCategories.length > 0
+
+  return (
+    <div data-search-bar className={cn("relative flex flex-col", className)}>
+
+      {/* Search input row */}
+      <InputGroup
+        className={cn(
+          "h-12",
+          hasActiveFilters && "[border-bottom-left-radius:0] [border-bottom-right-radius:0]"
+        )}
+      >
+        <InputGroupAddon align="inline-start">
+          <SearchIcon className="size-4" />
+        </InputGroupAddon>
+        <InputGroupInput
+          ref={inputRef}
+          placeholder={placeholder}
+          value={value}
+          onChange={e => onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          onFocus={onFocus}
+          autoComplete="off"
+        />
+        {(!!value || (hasFilterCategories && !hasActiveFilters)) && (
+          <InputGroupAddon align="inline-end">
+            {value && (
+              <InputGroupButton size="sm" variant="ghost" onClick={() => onChange("")} className="text-[var(--color-text-muted)] hover:text-[var(--color-text-default)]">
+                <XIcon className="size-4" />
+              </InputGroupButton>
+            )}
+            {hasFilterCategories && !hasActiveFilters && (
+              <>
+                {!value && kbdHint && <Kbd>{kbdHint}</Kbd>}
+                <span className="h-4 w-px bg-[var(--color-border-default)]" />
+                <FilterCombobox
+                  categories={filterCategories}
+                  onApply={onApplyFilter ?? (() => {})}
+                  activeFilters={activeFilters}
+                  dropdownAlign="right"
+                  trigger={({ onClick }) => (
+                    <InputGroupButton size="sm" variant="ghost" onClick={onClick} className="text-[var(--color-text-muted)] hover:text-[var(--color-text-default)]">
+                      Advanced search
+                    </InputGroupButton>
+                  )}
+                />
+              </>
+            )}
+          </InputGroupAddon>
+        )}
+      </InputGroup>
+
+      {/* Filter bar — visible only when filters are active */}
+      {hasActiveFilters && (
+        <div className="flex flex-wrap items-center gap-3 [border-bottom-left-radius:var(--radius-card)] [border-bottom-right-radius:var(--radius-card)] border border-t-0 border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-3 py-2.5">
+          {Object.entries(activeFilters)
+            .filter(([, vals]) => vals.length > 0)
+            .map(([categoryId, values]) => {
+              const cat = filterCategories.find(c => c.id === categoryId)
+              return (
+                <FilterChip
+                  key={categoryId}
+                  label={cat?.label ?? categoryId}
+                  values={values.map(v => ({
+                    label: filterValueLabel(categoryId, v),
+                    onRemove: () => onRemoveFilter?.(categoryId, v),
+                  }))}
+                  onLabelClick={() => {}}
+                />
+              )
+            })}
+          <FilterCombobox
+            categories={filterCategories}
+            onApply={onApplyFilter ?? (() => {})}
+            activeFilters={activeFilters}
+            trigger={({ onClick }) => (
+              <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={onClick}>
+                <PlusIcon className="size-3.5" />
+                Add
+              </Button>
+            )}
+          />
+          <FilterChip
+            variant="clear-all"
+            className="ml-auto"
+            onClear={onClearFilters ?? (() => {})}
+          />
+        </div>
+      )}
+
+      {/* Results dropdown — consumer-provided slot */}
+      {children}
+    </div>
+  )
+}
+
+// ── Exports ────────────────────────────────────────────────────────────────────
+
+export { SearchBar }
+export type { SearchBarProps }

package/src/index.ts

@@ -6,8 +6,9 @@ export { usePlatform } from "./hooks/use-platform"
 
 // Components
 export * from "./components/ui/badge"
-export * from "./components/ui/cell"
 export * from "./components/ui/breadcrumb"
+export * from "./components/ui/calendar"
+export * from "./components/ui/cell"
 export * from "./components/ui/button"
 export * from "./components/ui/button-group"
 export * from "./components/ui/card"
@@ -16,6 +17,9 @@ export * from "./components/ui/combobox"
 export * from "./components/ui/data-table"
 export * from "./components/ui/dialog"
 export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/filter-chip"
+export * from "./components/ui/filter-combobox"
+export * from "./components/ui/search-bar"
 export * from "./components/ui/input"
 export * from "./components/ui/input-group"
 export * from "./components/ui/kbd"

package/tokens/primitives.css

@@ -218,9 +218,10 @@
   --primitive-shadow-xl: 0 20px 25px oklch(0 0 0 / 0.10), 0 8px 10px oklch(0 0 0 / 0.04);
 
   /* --- Z-index scale --- */
-  --primitive-z-base:    0;
-  --primitive-z-raised:  10;
-  --primitive-z-overlay: 100;
+  --primitive-z-base:      0;
+  --primitive-z-raised:    10;
+  --primitive-z-dropdown:  20;
+  --primitive-z-overlay:   100;
   --primitive-z-modal:   200;
   --primitive-z-toast:   300;
   --primitive-z-tooltip: 400;