minka-ds 0.1.8 → 0.2.0

package/package.json

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

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

@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import type { DateRange } from "react-day-picker"
+import { Calendar } from "./calendar"
+import { Input } from "./input"
+import { cn } from "../../lib/utils"
+
+export interface DateTimeRange {
+  from: Date
+  to: Date
+  startTime: string
+  endTime: string
+}
+
+interface DateTimeRangePickerProps {
+  value?: DateTimeRange | null
+  onChange: (value: DateTimeRange | null) => void
+  maxRangeDays?: number
+  className?: string
+}
+
+export function DateTimeRangePicker({
+  value,
+  onChange,
+  maxRangeDays,
+  className,
+}: DateTimeRangePickerProps) {
+  const range: DateRange | undefined =
+    value?.from ? { from: value.from, to: value.to } : undefined
+
+  function handleRangeSelect(selected: DateRange | undefined) {
+    if (!selected?.from) { onChange(null); return }
+    onChange({
+      from: selected.from,
+      to: selected.to ?? selected.from,
+      startTime: value?.startTime ?? "",
+      endTime:   value?.endTime   ?? "",
+    })
+  }
+
+  function handleStartTime(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!value?.from) return
+    onChange({ ...value, startTime: e.target.value })
+  }
+
+  function handleEndTime(e: React.ChangeEvent<HTMLInputElement>) {
+    if (!value?.from) return
+    onChange({ ...value, endTime: e.target.value })
+  }
+
+  const disabledAfter =
+    maxRangeDays && range?.from
+      ? { after: new Date(range.from.getTime() + maxRangeDays * 86_400_000) }
+      : undefined
+
+  return (
+    <div className={cn(
+      "[border-radius:var(--radius-card)] border border-[var(--color-border-default)] bg-[var(--color-bg-raised)] overflow-hidden w-fit",
+      className
+    )}>
+      <Calendar
+        mode="range"
+        numberOfMonths={1}
+        captionLayout="label"
+        selected={range}
+        onSelect={handleRangeSelect}
+        disabled={disabledAfter}
+      />
+      <div className="border-t border-[var(--color-border-default)] px-4 py-3 flex flex-col gap-3">
+        <div className="flex flex-col gap-1.5">
+          <label className="text-body-sm">Start time</label>
+          <Input
+            type="time"
+            value={value?.startTime ?? ""}
+            onChange={handleStartTime}
+            disabled={!value?.from}
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label className="text-body-sm">End time</label>
+          <Input
+            type="time"
+            value={value?.endTime ?? ""}
+            onChange={handleEndTime}
+            disabled={!value?.from}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -215,7 +215,7 @@ function FilterCombobox({
 
   const step2AllValues = selectedCategory?.values ?? []
 
-  const showSearch    = step2AllValues.length > 4
+  const showSearch    = step2AllValues.length > 4 && selectedCategory?.type !== "hours"
   const step2Filtered = showSearch
     ? step2AllValues.filter(v => v.toLowerCase().includes(search.toLowerCase()))
     : step2AllValues

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./components/ui/alert"
 export * from "./components/ui/badge"
 export * from "./components/ui/breadcrumb"
 export * from "./components/ui/calendar"
+export * from "./components/ui/date-time-range-picker"
 export * from "./components/ui/cell"
 export * from "./components/ui/button"
 export * from "./components/ui/button-group"