minka-ds 0.3.9 → 0.3.11

package/package.json

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

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

@@ -29,14 +29,37 @@ export function DateTimeRangePicker({
   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   ?? "",
-    })
+  // `anchor` is the source of truth for selection phase:
+  //   anchor === null → no active pick (nothing selected, or a complete range)
+  //   anchor !== null → first date is set, waiting for the second click
+  // This avoids the ambiguity of inferring phase from `from === to`.
+  const [anchor, setAnchor] = React.useState<Date | null>(null)
+
+  function handleDay(day: Date) {
+    const startTime = value?.startTime ?? ""
+    const endTime   = value?.endTime   ?? ""
+
+    // Picking the second date.
+    if (anchor) {
+      const spanMs    = Math.abs(day.getTime() - anchor.getTime())
+      const withinCap = maxRangeDays == null || spanMs <= maxRangeDays * 86_400_000
+      if (withinCap) {
+        // Complete the range (order endpoints; can extend backward or forward).
+        const from = day < anchor ? day : anchor
+        const to   = day < anchor ? anchor : day
+        setAnchor(null)
+        onChange({ from, to, startTime, endTime })
+      } else {
+        // Outside the cap → treat as a fresh start anchored on the clicked day.
+        setAnchor(day)
+        onChange({ from: day, to: day, startTime, endTime })
+      }
+      return
+    }
+
+    // No active pick (fresh, or restarting from a complete range).
+    setAnchor(day)
+    onChange({ from: day, to: day, startTime, endTime })
   }
 
   function handleStartTime(e: React.ChangeEvent<HTMLInputElement>) {
@@ -49,11 +72,6 @@ export function DateTimeRangePicker({
     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",
@@ -64,8 +82,17 @@ export function DateTimeRangePicker({
         numberOfMonths={1}
         captionLayout="label"
         selected={range}
-        onSelect={handleRangeSelect}
-        disabled={disabledAfter}
+        onSelect={(_, selectedDay) => handleDay(selectedDay)}
+        // While picking the second date, soften days outside the ±maxRangeDays
+        // window — a visual hint of the recommended span. They stay clickable
+        // (clicking one re-anchors) and hover still works; this is a hint, not
+        // a block.
+        modifiers={
+          anchor && maxRangeDays != null
+            ? { outOfRange: (d: Date) => Math.abs(d.getTime() - anchor.getTime()) > maxRangeDays * 86_400_000 }
+            : undefined
+        }
+        modifiersClassNames={{ outOfRange: "text-[var(--color-text-hint)]" }}
       />
       <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">