minka-ds 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [
@@ -26,5 +26,8 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "culori": "^4.0.2"
   }
 }

package/src/components/ui/cell.tsx

@@ -55,16 +55,20 @@ interface AmountCellProps {
 }
 
 function AmountCell({ children, className }: AmountCellProps) {
-  return (
-    <span
-      className={cn(
-        "text-body-sm text-[var(--color-text-default)] tabular-nums tracking-tight",
-        className
-      )}
-    >
-      {children}
-    </span>
-  )
+  const base = cn("text-body-sm text-[var(--color-text-default)] tabular-nums", className)
+
+  // PP Neue Montreal's $ glyph has a wide right sidebearing that creates a
+  // visible gap before digits. Split it into its own box with a negative
+  // margin so we can close just that gap without touching digit spacing.
+  if (typeof children === "string" && children.startsWith("$")) {
+    return (
+      <span className={base}>
+        <span className="inline-block -mr-[0.05em]">$</span>{children.slice(1)}
+      </span>
+    )
+  }
+
+  return <span className={base}>{children}</span>
 }
 
 // ── BadgeCell ─────────────────────────────────────────────────────────────────

package/src/components/ui/dialog.tsx

@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 [z-index:var(--z-modal)] bg-[var(--color-bg-backdrop)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        "fixed inset-0 [z-index:var(--z-modal)] bg-[var(--color-bg-backdrop-blur)] backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}

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

@@ -8,7 +8,7 @@ type FilterChipProps =
   | {
       variant?: "filter"
       label: string
-      values: { label: string; onRemove: () => void }[]
+      values: { label: string; onRemove?: () => void }[]
       onLabelClick?: () => void
       className?: string
     }
@@ -49,22 +49,33 @@ function FilterChip(props: FilterChipProps) {
       >
         {label}:
       </button>
-      {values.map((value, i) => (
-        <span
-          key={i}
-          className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] bg-[var(--color-bg-base)] px-2 py-0.5 text-caption text-[var(--color-text-default)]"
-        >
-          {value.label}
+      {values.map((value, i) =>
+        value.onRemove ? (
+          <span
+            key={i}
+            className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] bg-[var(--color-bg-base)] 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>
+        ) : (
           <button
+            key={i}
             type="button"
-            onClick={value.onRemove}
-            className="text-[var(--color-text-muted)] hover:text-[var(--color-text-default)] transition-colors"
-            aria-label={`Remove ${value.label}`}
+            onClick={onLabelClick}
+            className="inline-flex items-center gap-1 rounded-full border border-[var(--color-border-default)] bg-[var(--color-bg-base)] px-2 py-0.5 text-caption text-[var(--color-text-default)] hover:border-[var(--color-border-strong)] transition-colors"
           >
-            <XIcon className="size-3" />
+            {value.label}
           </button>
-        </span>
-      ))}
+        )
+      )}
     </div>
   )
 }

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

@@ -15,20 +15,22 @@ import { Button } from "./button"
 import { Calendar } from "./calendar"
 import { Input } from "./input"
 import { Tabs, TabsList, TabsTrigger } from "./tabs"
+import { DateTimeRangePicker, type DateTimeRange } from "./date-time-range-picker"
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
 interface FilterCategory {
   id: string
   label: string
-  type?: "list" | "date" | "amount" | "hours"
+  type?: "list" | "date" | "amount" | "hours" | "datetime"
   values?: string[]
+  maxRangeDays?: number
   renderValue?: (value: string) => React.ReactNode
 }
 
 type AmountValue   = { exact: number } | { min?: number; max?: number }
 type HoursValue    = { from: string; to: string }
-type CategoryValue = string | DateRange | AmountValue | HoursValue
+type CategoryValue = string | DateRange | AmountValue | HoursValue | DateTimeRange
 
 
 type Step = 1 | 2 | 3
@@ -63,6 +65,7 @@ function FilterCombobox({
   const [amountMax, setAmountMax]               = React.useState("")
   const [hoursInput, setHoursInput]             = React.useState("")
   const [hoursInputTo, setHoursInputTo]         = React.useState("")
+  const [datetimeValue, setDatetimeValue]       = React.useState<DateTimeRange | null>(null)
   const [search, setSearch]                     = React.useState("")
 
   const containerRef = React.useRef<HTMLDivElement>(null)
@@ -97,6 +100,7 @@ function FilterCombobox({
     setAmountMax("")
     setHoursInput("")
     setHoursInputTo("")
+    setDatetimeValue(null)
   }
 
   function handleToggle() {
@@ -134,6 +138,18 @@ function FilterCombobox({
       return
     }
 
+    if (cat.type === "datetime") {
+      const custom = existing.find((v): v is DateTimeRange =>
+        typeof v === "object" && "startTime" in v
+      ) ?? null
+      setSelectedCategory(cat)
+      setDatetimeValue(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)
@@ -177,6 +193,12 @@ function FilterCombobox({
     handleClose()
   }
 
+  function applyDatetime() {
+    if (!selectedCategory || !datetimeValue?.from || !datetimeValue?.to) return
+    onApply(selectedCategory.id, [datetimeValue])
+    handleClose()
+  }
+
   function applyCustomHours() {
     if (!selectedCategory || !hoursInput || !hoursInputTo) return
     onApply(selectedCategory.id, [{ from: hoursInput, to: hoursInputTo }])
@@ -211,9 +233,10 @@ function FilterCombobox({
 
   // ── Derived values ───────────────────────────────────────────────────────────
 
-  const isDate   = selectedCategory?.type === "date"
-  const isAmount = selectedCategory?.type === "amount"
-  const isHours  = selectedCategory?.type === "hours"
+  const isDate     = selectedCategory?.type === "date"
+  const isAmount   = selectedCategory?.type === "amount"
+  const isHours    = selectedCategory?.type === "hours"
+  const isDatetime = selectedCategory?.type === "datetime"
 
   const step2AllValues = selectedCategory?.values ?? []
 
@@ -242,7 +265,7 @@ function FilterCombobox({
           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-floating)]",
-          step === 3 && isDate ? "w-auto" : step === 3 && isHours ? "w-80" : "w-56"
+          step === 3 && (isDate || isDatetime) ? "w-auto" : step === 3 && isHours ? "w-80" : "w-56"
         )}>
 
           {/* Step 1 — category list (multi-category mode only) */}
@@ -365,6 +388,35 @@ function FilterCombobox({
             </>
           )}
 
+          {/* Step 3 — datetime range */}
+          {step === 3 && isDatetime && (
+            <>
+              {!isSingle && (
+                <StepHeader
+                  title={selectedCategory?.label ?? "Date range"}
+                  onBack={() => setStep(1)}
+                />
+              )}
+              <div className="p-1">
+                <DateTimeRangePicker
+                  value={datetimeValue}
+                  onChange={setDatetimeValue}
+                  maxRangeDays={selectedCategory?.maxRangeDays}
+                />
+              </div>
+              <div className="p-1">
+                <Button
+                  size="sm"
+                  className="w-full"
+                  disabled={!datetimeValue?.from || !datetimeValue?.to}
+                  onClick={applyDatetime}
+                >
+                  Apply
+                </Button>
+              </div>
+            </>
+          )}
+
           {/* Step 3 — custom amount */}
           {step === 3 && isAmount && (
             <>
@@ -520,3 +572,4 @@ function EmptyRow() {
 
 export { FilterCombobox }
 export type { FilterCategory, CategoryValue, AmountValue, HoursValue }
+export type { DateTimeRange } from "./date-time-range-picker"

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

@@ -5,6 +5,7 @@ import { PlusIcon, SearchIcon, XIcon } from "lucide-react"
 import type { DateRange } from "react-day-picker"
 
 import { cn } from "../../lib/utils"
+import type { DateTimeRange } from "./date-time-range-picker"
 import { Button } from "./button"
 import { FilterChip } from "./filter-chip"
 import { FilterCombobox } from "./filter-combobox"
@@ -14,8 +15,17 @@ import { Kbd } from "./kbd"
 
 // ── Default label formatter ────────────────────────────────────────────────────
 
+function formatTime(t: string): string {
+  return t || "00:00"
+}
+
 function defaultFilterValueLabel(_categoryId: string, value: CategoryValue): string {
   if (typeof value === "string") return value
+  if (typeof value === "object" && "startTime" in value) {
+    const v = value as DateTimeRange
+    const fmtDate = (d: Date) => d.toLocaleDateString("default", { month: "short", day: "numeric" })
+    return `${fmtDate(v.from)} ${formatTime(v.startTime)} – ${fmtDate(v.to)} ${formatTime(v.endTime)}`
+  }
   if (typeof value === "object" && "from" in value) {
     const v = value as DateRange
     if (!v.from) return ""
@@ -158,7 +168,7 @@ function SearchBar({
                           label={cat.label}
                           values={activeVals.map(v => ({
                             label: filterValueLabel(cat.id, v),
-                            onRemove: () => onRemoveFilter?.(cat.id, v),
+                            onRemove: cat.type === "datetime" ? undefined : () => onRemoveFilter?.(cat.id, v),
                           }))}
                           onLabelClick={onClick}
                         />

package/src/components/ui/tab-count.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import { cn } from "../../lib/utils"
+
+interface TabCountProps {
+  count: number
+  className?: string
+}
+
+function TabCount({ count, className }: TabCountProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded-full bg-[var(--color-bg-disabled)] text-[var(--color-text-default)] text-[10px] font-semibold leading-none size-4 shrink-0",
+        className
+      )}
+    >
+      {count}
+    </span>
+  )
+}
+
+export { TabCount }
+export type { TabCountProps }

package/src/components/ui/table.tsx

@@ -73,7 +73,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "border-b border-[var(--color-border-subtle)] transition-colors hover:bg-[var(--color-bg-table-hover)] has-aria-expanded:bg-[var(--color-bg-table-hover)] data-[state=selected]:bg-[var(--color-action-ghost-hover)]",
+        "border-b border-[var(--color-border-subtle)] transition-colors hover:bg-[var(--color-bg-table-hover)] has-aria-expanded:bg-[var(--color-bg-table-hover)] data-[state=selected]:bg-[var(--color-bg-table-selected)]",
         className
       )}
       {...props}

package/src/index.ts

@@ -36,6 +36,7 @@ export * from "./components/ui/sheet"
 export * from "./components/ui/sidebar"
 export * from "./components/ui/skeleton"
 export * from "./components/ui/table"
+export * from "./components/ui/tab-count"
 export * from "./components/ui/tabs"
 export * from "./components/ui/textarea"
 export * from "./components/ui/tooltip"