minka-ds 0.1.5 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Minka product design system — tokenized component library",
   "license": "MIT",
   "files": [

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

@@ -52,7 +52,7 @@ function FilterChip(props: FilterChipProps) {
       {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)]"
+          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

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

@@ -21,13 +21,14 @@ import { Tabs, TabsList, TabsTrigger } from "./tabs"
 interface FilterCategory {
   id: string
   label: string
-  type?: "list" | "date" | "amount"
+  type?: "list" | "date" | "amount" | "hours"
   values?: string[]
   renderValue?: (value: string) => React.ReactNode
 }
 
 type AmountValue   = { exact: number } | { min?: number; max?: number }
-type CategoryValue = string | DateRange | AmountValue
+type HoursValue    = { from: string; to: string }
+type CategoryValue = string | DateRange | AmountValue | HoursValue
 
 
 type Step = 1 | 2 | 3
@@ -58,10 +59,13 @@ function FilterCombobox({
   const [amountExact, setAmountExact]           = React.useState("")
   const [amountMin, setAmountMin]               = React.useState("")
   const [amountMax, setAmountMax]               = React.useState("")
+  const [hoursInput, setHoursInput]             = React.useState("")
+  const [hoursInputTo, setHoursInputTo]         = React.useState("")
   const [search, setSearch]                     = React.useState("")
 
   const containerRef = React.useRef<HTMLDivElement>(null)
   const searchRef    = React.useRef<HTMLInputElement>(null)
+  const isSingle     = categories.length === 1
 
   // Close on outside click
   React.useEffect(() => {
@@ -89,6 +93,20 @@ function FilterCombobox({
     setAmountExact("")
     setAmountMin("")
     setAmountMax("")
+    setHoursInput("")
+    setHoursInputTo("")
+  }
+
+  function handleToggle() {
+    if (open) {
+      handleClose()
+      return
+    }
+    // Single-category: skip step 1 and jump straight to options
+    if (isSingle) {
+      openCategory(categories[0])
+    }
+    setOpen(true)
   }
 
   function openCategory(cat: FilterCategory) {
@@ -104,6 +122,16 @@ function FilterCombobox({
       return
     }
 
+    if (cat.type === "hours") {
+      setSelectedCategory(cat)
+      setSelectedValues(new Set())
+      setHoursInput("")
+      setHoursInputTo("")
+      setSearch("")
+      setStep(2)
+      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)
@@ -147,6 +175,12 @@ function FilterCombobox({
     handleClose()
   }
 
+  function applyCustomHours() {
+    if (!selectedCategory || !hoursInput || !hoursInputTo) return
+    onApply(selectedCategory.id, [{ from: hoursInput, to: hoursInputTo }])
+    handleClose()
+  }
+
   function applyCustomAmount() {
     if (!selectedCategory) return
     let value: AmountValue
@@ -177,6 +211,7 @@ function FilterCombobox({
 
   const isDate   = selectedCategory?.type === "date"
   const isAmount = selectedCategory?.type === "amount"
+  const isHours  = selectedCategory?.type === "hours"
 
   const step2AllValues = selectedCategory?.values ?? []
 
@@ -193,8 +228,8 @@ function FilterCombobox({
 
   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)}>
+      {trigger ? trigger({ open, onClick: handleToggle }) : (
+        <Button variant="default" size="sm" className="h-7 text-caption gap-1.5 px-2.5" onClick={handleToggle}>
           <PlusIcon className="size-3.5" />
           Add filter
         </Button>
@@ -204,11 +239,11 @@ function FilterCombobox({
         <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"
+          "[z-index:var(--z-floating)]",
+          step === 3 && isDate ? "w-auto" : step === 3 && isHours ? "w-80" : "w-56"
         )}>
 
-          {/* Step 1 — category list */}
+          {/* Step 1 — category list (multi-category mode only) */}
           {step === 1 && (
             <ul className="p-1">
               {categories.map(cat => (
@@ -222,10 +257,12 @@ function FilterCombobox({
           {/* Step 2 — value list */}
           {step === 2 && selectedCategory && (
             <>
-              <StepHeader
-                title={selectedCategory.label}
-                onBack={() => { setStep(1); setSearch("") }}
-              />
+              {!isSingle && (
+                <StepHeader
+                  title={selectedCategory.label}
+                  onBack={() => { setStep(1); setSearch("") }}
+                />
+              )}
               {showSearch && (
                 <div className="px-1 pt-1">
                   <SearchInput ref={searchRef} value={search} onChange={setSearch} />
@@ -236,17 +273,28 @@ function FilterCombobox({
                   ? <EmptyRow />
                   : step2Filtered.map(value => (
                     <li key={value}>
-                      <CheckRow
-                        checked={selectedValues.has(value)}
-                        onToggle={() => toggleValue(value)}
-                      >
-                        {selectedCategory.renderValue?.(value) ?? value}
-                      </CheckRow>
+                      {selectedCategory.type === "hours" ? (
+                        <PickerRow onClick={() => { onApply(selectedCategory.id, [value]); handleClose() }}>
+                          {selectedCategory.renderValue?.(value) ?? value}
+                        </PickerRow>
+                      ) : (
+                        <CheckRow
+                          checked={selectedValues.has(value)}
+                          onToggle={() => toggleValue(value)}
+                        >
+                          {selectedCategory.renderValue?.(value) ?? value}
+                        </CheckRow>
+                      )}
                     </li>
                   ))
                 }
+                {selectedCategory.type === "hours" && (
+                  <li>
+                    <PickerRow onClick={() => setStep(3)}>Custom range</PickerRow>
+                  </li>
+                )}
               </ul>
-              {selectedValues.size > 0 && (
+              {selectedValues.size > 0 && selectedCategory.type !== "hours" && (
                 <div className="p-1">
                   <Button size="sm" className="w-full" onClick={applyValues}>
                     Apply
@@ -259,10 +307,12 @@ function FilterCombobox({
           {/* Step 3 — custom date range */}
           {step === 3 && isDate && (
             <>
-              <StepHeader
-                title={selectedCategory?.label ?? "Date"}
-                onBack={() => setStep(1)}
-              />
+              {!isSingle && (
+                <StepHeader
+                  title={selectedCategory?.label ?? "Date"}
+                  onBack={() => setStep(1)}
+                />
+              )}
               <div className="p-1">
                 <Calendar mode="range" selected={dateRange} onSelect={setDateRange} numberOfMonths={1} />
               </div>
@@ -276,14 +326,49 @@ function FilterCombobox({
             </>
           )}
 
-          {/* Step 3 — custom amount (no step 2 for amount — opens here directly) */}
-          {step === 3 && isAmount && (
+          {/* Step 3 — hours custom range */}
+          {step === 3 && isHours && (
             <>
               <StepHeader
-                title="Amount"
-                onBack={() => { setStep(1) }}
+                title="Custom range"
+                onBack={() => setStep(2)}
               />
-              <div className="px-2 pb-2 flex flex-col gap-2">
+              <div className="p-2 flex flex-col gap-2">
+                <div className="flex items-center gap-2">
+                  <Input
+                    type="time"
+                    value={hoursInput}
+                    onChange={e => setHoursInput(e.target.value)}
+                    className="flex-1"
+                  />
+                  <span className="text-body-sm text-[var(--color-text-muted)] shrink-0">–</span>
+                  <Input
+                    type="time"
+                    value={hoursInputTo}
+                    onChange={e => setHoursInputTo(e.target.value)}
+                    className="flex-1"
+                  />
+                </div>
+                {hoursInput !== "" && hoursInputTo !== "" &&
+                  !isNaN(parseFloat(hoursInput)) && !isNaN(parseFloat(hoursInputTo)) && (
+                  <Button size="sm" className="w-full" onClick={applyCustomHours}>
+                    Apply
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
+
+          {/* Step 3 — custom amount */}
+          {step === 3 && isAmount && (
+            <>
+              {!isSingle && (
+                <StepHeader
+                  title="Amount"
+                  onBack={() => setStep(1)}
+                />
+              )}
+              <div className="p-2 flex flex-col gap-2">
                 <Tabs
                   value={amountMode}
                   onValueChange={v => setAmountMode(v as "exact" | "range")}
@@ -427,4 +512,4 @@ function EmptyRow() {
 // ── Exports ────────────────────────────────────────────────────────────────────
 
 export { FilterCombobox }
-export type { FilterCategory, CategoryValue, AmountValue }
+export type { FilterCategory, CategoryValue, AmountValue, HoursValue }

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

@@ -52,6 +52,7 @@ interface SearchBarProps {
   onRemoveFilter?: (categoryId: string, value: CategoryValue) => void
   onClearFilters?: () => void
   filterValueLabel?: (categoryId: string, value: CategoryValue) => string
+  alwaysShowFilterBar?: boolean
 
   children?: React.ReactNode
   className?: string
@@ -73,11 +74,13 @@ function SearchBar({
   onRemoveFilter,
   onClearFilters,
   filterValueLabel = defaultFilterValueLabel,
+  alwaysShowFilterBar = false,
   children,
   className,
 }: SearchBarProps) {
   const hasActiveFilters    = Object.values(activeFilters).some(v => v.length > 0)
   const hasFilterCategories = filterCategories.length > 0
+  const showFilterBar       = hasActiveFilters || alwaysShowFilterBar
 
   return (
     <div data-search-bar className={cn("relative flex flex-col", className)}>
@@ -86,7 +89,7 @@ function SearchBar({
       <InputGroup
         className={cn(
           "h-12",
-          hasActiveFilters && "[border-bottom-left-radius:0] [border-bottom-right-radius:0]"
+          showFilterBar && "[border-bottom-left-radius:0] [border-bottom-right-radius:0]"
         )}
       >
         <InputGroupAddon align="inline-start">
@@ -101,15 +104,15 @@ function SearchBar({
           onFocus={onFocus}
           autoComplete="off"
         />
-        {(!!value || (hasFilterCategories && !hasActiveFilters) || (!value && !!kbdHint)) && (
+        {(!!value || (hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar) || (!value && !!kbdHint)) && (
           <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>
             )}
-            {!value && kbdHint && !hasFilterCategories && <Kbd>{kbdHint}</Kbd>}
-            {hasFilterCategories && !hasActiveFilters && (
+            {!value && kbdHint && (!hasFilterCategories || alwaysShowFilterBar) && <Kbd>{kbdHint}</Kbd>}
+            {hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar && (
               <>
                 {!value && kbdHint && <Kbd>{kbdHint}</Kbd>}
                 <span className="h-4 w-px bg-[var(--color-border-default)]" />
@@ -130,41 +133,102 @@ function SearchBar({
         )}
       </InputGroup>
 
-      {/* Filter bar — visible only when filters are active */}
-      {hasActiveFilters && (
+      {/* Filter bar */}
+      {showFilterBar && (
         <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 (
+          {alwaysShowFilterBar ? (
+            // Always-open mode: one trigger per category, active ones show chips
+            <>
+              <span className="text-caption text-[var(--color-text-default)] shrink-0">Filters:</span>
+              {filterCategories.map(cat => {
+                const activeVals = activeFilters[cat.id] ?? []
+                const hasActive  = activeVals.length > 0
+
+                if (hasActive) {
+                  return (
+                    <FilterCombobox
+                      key={cat.id}
+                      categories={[cat]}
+                      onApply={onApplyFilter ?? (() => {})}
+                      activeFilters={activeFilters}
+                      trigger={({ onClick }) => (
+                        <FilterChip
+                          label={cat.label}
+                          values={activeVals.map(v => ({
+                            label: filterValueLabel(cat.id, v),
+                            onRemove: () => onRemoveFilter?.(cat.id, v),
+                          }))}
+                          onLabelClick={onClick}
+                        />
+                      )}
+                    />
+                  )
+                }
+
+                return (
+                  <FilterCombobox
+                    key={cat.id}
+                    categories={[cat]}
+                    onApply={onApplyFilter ?? (() => {})}
+                    activeFilters={activeFilters}
+                    trigger={({ onClick }) => (
+                      <button
+                        type="button"
+                        onClick={onClick}
+                        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-muted)] hover:text-[var(--color-text-default)] hover:border-[var(--color-border-hover,var(--color-border-default))] transition-colors"
+                      >
+                        {cat.label}
+                        <PlusIcon className="size-3 shrink-0" />
+                      </button>
+                    )}
+                  />
+                )
+              })}
+              {hasActiveFilters && (
                 <FilterChip
-                  key={categoryId}
-                  label={cat?.label ?? categoryId}
-                  values={values.map(v => ({
-                    label: filterValueLabel(categoryId, v),
-                    onRemove: () => onRemoveFilter?.(categoryId, v),
-                  }))}
-                  onLabelClick={() => {}}
+                  variant="clear-all"
+                  className="ml-auto"
+                  onClear={onClearFilters ?? (() => {})}
                 />
-              )
-            })}
-          <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 ?? (() => {})}
-          />
+              )}
+            </>
+          ) : (
+            // Legacy mode: active chips + generic Add button
+            <>
+              {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>
       )}
 

package/tokens/primitives.css

@@ -22,6 +22,18 @@
 
   /* --- Color scales --- */
 
+  --primitive-beige-50:  oklch(0.990 0.008 98);
+  --primitive-beige-100: oklch(0.982 0.030 98);
+  --primitive-beige-200: oklch(0.968 0.052 98);
+  --primitive-beige-300: oklch(0.948 0.072 98);
+  --primitive-beige-400: oklch(0.918 0.083 98);
+  --primitive-beige-500: oklch(0.876 0.085 98);
+  --primitive-beige-600: oklch(0.792 0.076 98);
+  --primitive-beige-700: oklch(0.680 0.062 98);
+  --primitive-beige-800: oklch(0.480 0.044 98);
+  --primitive-beige-900: oklch(0.310 0.028 98);
+  --primitive-beige-950: oklch(0.230 0.020 98);
+
   --primitive-red-50:  oklch(0.95 0.03 28);
   --primitive-red-100: oklch(0.93 0.05 28);
   --primitive-red-200: oklch(0.89 0.07 28);
@@ -58,9 +70,9 @@
   --primitive-yellow-900: oklch(0.3 0.07 98);
   --primitive-yellow-950: oklch(0.25 0.06 98);
 
-  --primitive-lulo-50:  oklch(0.94 0.24 112);
-  --primitive-lulo-100: oklch(0.92 0.23 112);
-  --primitive-lulo-200: oklch(0.87 0.22 112);
+  --primitive-lulo-50:  oklch(0.967 0.099 118);
+  --primitive-lulo-100: oklch(0.918 0.136 116);
+  --primitive-lulo-200: oklch(0.869 0.173 114);
   --primitive-lulo-300: oklch(0.82 0.21 112);
   --primitive-lulo-400: oklch(0.76 0.2 112);
   --primitive-lulo-500: oklch(0.7 0.18 112);
@@ -106,6 +118,18 @@
   --primitive-sea-900: oklch(0.29 0.07 220);
   --primitive-sea-950: oklch(0.24 0.06 220);
 
+  --primitive-slate-50:  oklch(0.950 0.012 218);
+  --primitive-slate-100: oklch(0.932 0.020 218);
+  --primitive-slate-200: oklch(0.898 0.032 218);
+  --primitive-slate-300: oklch(0.848 0.042 218);
+  --primitive-slate-400: oklch(0.762 0.054 218);
+  --primitive-slate-500: oklch(0.656 0.063 218);
+  --primitive-slate-600: oklch(0.560 0.054 218);
+  --primitive-slate-700: oklch(0.472 0.046 218);
+  --primitive-slate-800: oklch(0.352 0.034 218);
+  --primitive-slate-900: oklch(0.248 0.023 218);
+  --primitive-slate-950: oklch(0.198 0.017 218);
+
   --primitive-blue-50:  oklch(0.95 0.03 257);
   --primitive-blue-100: oklch(0.93 0.04 257);
   --primitive-blue-200: oklch(0.88 0.06 257);