minka-ds 0.3.8 → 0.3.10

package/package.json

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

package/src/components/ui/button-group.tsx

@@ -55,7 +55,7 @@ function ButtonGroupText({
   return (
     <Comp
       className={cn(
-        "flex items-center gap-2 [border-radius:var(--radius-button)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-4 text-label text-[var(--color-text-muted)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex h-9 items-center gap-2 [border-radius:var(--radius-button)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-4 text-label text-[var(--color-text-muted)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/ui/date-time-range-picker.tsx

@@ -29,7 +29,25 @@ export function DateTimeRangePicker({
   const range: DateRange | undefined =
     value?.from ? { from: value.from, to: value.to } : undefined
 
-  function handleRangeSelect(selected: DateRange | undefined) {
+  // A range is "complete" once from and to differ (or a real end was picked).
+  const isComplete = Boolean(value?.from && value?.to && value.from.getTime() !== value.to.getTime())
+
+  function handleRangeSelect(
+    selected: DateRange | undefined,
+    selectedDay: Date,
+  ) {
+    // If a complete range already exists, any click starts a brand-new range
+    // anchored on the clicked day — instead of extending the old one. This also
+    // frees the user from the max-range cap that was anchored on the old `from`.
+    if (isComplete) {
+      onChange({
+        from: selectedDay,
+        to: selectedDay,
+        startTime: value?.startTime ?? "",
+        endTime:   value?.endTime   ?? "",
+      })
+      return
+    }
     if (!selected?.from) { onChange(null); return }
     onChange({
       from: selected.from,
@@ -49,8 +67,11 @@ export function DateTimeRangePicker({
     onChange({ ...value, endTime: e.target.value })
   }
 
+  // Only cap the calendar while the user is picking the second date (from set,
+  // range not yet complete). Once complete, all dates stay clickable so a fresh
+  // click elsewhere can start a new range.
   const disabledAfter =
-    maxRangeDays && range?.from
+    maxRangeDays && range?.from && !isComplete
       ? { after: new Date(range.from.getTime() + maxRangeDays * 86_400_000) }
       : undefined
 

package/src/components/ui/input-group.tsx

@@ -120,7 +120,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-body-sm text-[var(--color-text-muted)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 px-3 text-body-sm text-[var(--color-text-muted)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}

package/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "h-9 w-full min-w-0 [border-radius:var(--radius-input)] border border-[var(--color-border-default)] bg-transparent px-3 py-1 text-body-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-[var(--color-action-primary-default)] selection:text-[var(--color-action-primary-foreground)] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-sm file:text-[var(--color-text-default)] placeholder:text-[var(--color-text-hint)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "h-9 w-full min-w-0 [border-radius:var(--radius-input)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] px-3 py-1 text-body-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-[var(--color-action-primary-default)] selection:text-[var(--color-action-primary-foreground)] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-label-sm file:text-[var(--color-text-default)] placeholder:text-[var(--color-text-hint)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "focus-visible:border-[var(--color-border-focus)] focus-visible:ring-[3px] focus-visible:ring-[var(--color-border-focus)]/50",
         "aria-invalid:border-[var(--color-border-error)] aria-invalid:ring-[3px] aria-invalid:ring-[var(--color-border-error)]/20",
         className

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

@@ -6,7 +6,6 @@ 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"
 import type { FilterCategory, CategoryValue } from "./filter-combobox"
@@ -90,9 +89,8 @@ function SearchBar({
   children,
   className,
 }: SearchBarProps) {
-  const hasActiveFilters    = Object.values(activeFilters).some(v => v.length > 0)
-  const hasFilterCategories = filterCategories.length > 0
-  const showFilterBar       = hasActiveFilters || alwaysShowFilterBar
+  const hasActiveFilters = Object.values(activeFilters).some(v => v.length > 0)
+  const showFilterBar    = hasActiveFilters || alwaysShowFilterBar
 
   return (
     <div data-search-bar className={cn("relative flex flex-col", className)}>
@@ -116,31 +114,14 @@ function SearchBar({
           onFocus={onFocus}
           autoComplete="off"
         />
-        {(!!value || (hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar) || (!value && !!kbdHint)) && (
+        {(!!value || (!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 || alwaysShowFilterBar) && <Kbd>{kbdHint}</Kbd>}
-            {hasFilterCategories && !hasActiveFilters && !alwaysShowFilterBar && (
-              <>
-                {!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>
-                  )}
-                />
-              </>
-            )}
+            {!value && kbdHint && <Kbd>{kbdHint}</Kbd>}
           </InputGroupAddon>
         )}
       </InputGroup>
@@ -148,98 +129,58 @@ function SearchBar({
       {/* 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">
-          {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: cat.type === "datetime" ? undefined : () => 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
-                  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 (
+          {/* 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
-                      key={categoryId}
-                      label={cat?.label ?? categoryId}
-                      values={values.map(v => ({
-                        label: filterValueLabel(categoryId, v),
-                        onRemove: () => onRemoveFilter?.(categoryId, v),
+                      label={cat.label}
+                      values={activeVals.map(v => ({
+                        label: filterValueLabel(cat.id, v),
+                        onRemove: cat.type === "datetime" ? undefined : () => onRemoveFilter?.(cat.id, v),
                       }))}
-                      onLabelClick={() => {}}
+                      onLabelClick={onClick}
                     />
-                  )
-                })}
+                  )}
+                />
+              )
+            }
+
+            return (
               <FilterCombobox
-                categories={filterCategories}
+                key={cat.id}
+                categories={[cat]}
                 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>
+                  <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>
                 )}
               />
-              <FilterChip
-                variant="clear-all"
-                className="ml-auto"
-                onClear={onClearFilters ?? (() => {})}
-              />
-            </>
+            )
+          })}
+          {hasActiveFilters && (
+            <FilterChip
+              variant="clear-all"
+              className="ml-auto"
+              onClear={onClearFilters ?? (() => {})}
+            />
           )}
         </div>
       )}

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

@@ -10,7 +10,7 @@ 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",
+        "inline-flex items-center justify-center rounded-full bg-[var(--color-bg-disabled)] text-[var(--color-text-default)] text-[10px] font-semibold leading-none min-w-4 h-4 px-1 shrink-0",
         className
       )}
     >

package/tokens/primitives.css

@@ -35,7 +35,7 @@
   --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-100: oklch(0.933859 0.034874 39.988);
   --primitive-red-200: oklch(0.89 0.07 28);
   --primitive-red-300: oklch(0.84 0.11 28);
   --primitive-red-400: oklch(0.79 0.16 28);
@@ -70,7 +70,7 @@
   --primitive-yellow-900: oklch(0.3 0.07 98);
   --primitive-yellow-950: oklch(0.25 0.06 98);
 
-  --primitive-lulo-50:  oklch(0.967 0.099 118);
+  --primitive-lulo-50:  oklch(0.9654 0.1157 112.05);
   --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);
@@ -99,12 +99,12 @@
   --primitive-aquamarine-200: oklch(0.85 0.24 167);
   --primitive-aquamarine-300: oklch(0.8 0.22 167);
   --primitive-aquamarine-400: oklch(0.74 0.21 167);
-  --primitive-aquamarine-500: oklch(0.68 0.19 167);
-  --primitive-aquamarine-600: oklch(0.59 0.16 167);
-  --primitive-aquamarine-700: oklch(0.52 0.14 167);
-  --primitive-aquamarine-800: oklch(0.39 0.11 167);
-  --primitive-aquamarine-900: oklch(0.29 0.08 167);
-  --primitive-aquamarine-950: oklch(0.23 0.07 167);
+  --primitive-aquamarine-500: oklch(0.642 0.165 167);
+  --primitive-aquamarine-600: oklch(0.544 0.120 167);
+  --primitive-aquamarine-700: oklch(0.446 0.075 168);
+  --primitive-aquamarine-800: oklch(0.3479 0.0291 167.95);
+  --primitive-aquamarine-900: oklch(0.268 0.022 168);
+  --primitive-aquamarine-950: oklch(0.218 0.016 168);
 
   --primitive-sea-50:  oklch(0.94 0.04 220);
   --primitive-sea-100: oklch(0.92 0.06 220);
@@ -118,17 +118,17 @@
   --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-slate-50:  oklch(0.965 0.010 225);
+  --primitive-slate-100: oklch(0.930 0.018 226);
+  --primitive-slate-200: oklch(0.880 0.030 228);
+  --primitive-slate-300: oklch(0.825 0.044 229);
+  --primitive-slate-400: oklch(0.762 0.055 231);
+  --primitive-slate-500: oklch(0.6916 0.0616 232.57);
+  --primitive-slate-600: oklch(0.580 0.045 243);
+  --primitive-slate-700: oklch(0.468 0.030 254);
+  --primitive-slate-800: oklch(0.3555 0.0149 264.37);
+  --primitive-slate-900: oklch(0.270 0.012 268);
+  --primitive-slate-950: oklch(0.215 0.010 270);
 
   --primitive-blue-50:  oklch(0.95 0.03 257);
   --primitive-blue-100: oklch(0.93 0.04 257);

package/tokens/semantic.css

@@ -154,8 +154,11 @@
   --color-brand-beige:  var(--primitive-beige-100);
   --color-brand-yellow: var(--primitive-lulo-50);
   --color-brand-rose:   var(--primitive-red-100);
-  --color-brand-red:    var(--primitive-red-500);
+  --color-brand-coral:  var(--primitive-red-500);
   --color-brand-blue:   var(--primitive-slate-500);
+  --color-brand-darkforest: var(--primitive-aquamarine-800);
+  --color-brand-navy:   var(--primitive-slate-800);
+  --color-brand-bronze: var(--primitive-bronze-900);
 
   /* z-index aliases */
   --z-sticky:   var(--primitive-z-raised);