minka-ds 0.3.10 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minka-ds",
-  "version": "0.3.10",
+  "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,32 +29,37 @@ export function DateTimeRangePicker({
   const range: DateRange | undefined =
     value?.from ? { from: value.from, to: value.to } : 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())
+  // `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 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   ?? "",
-      })
+  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
     }
-    if (!selected?.from) { onChange(null); return }
-    onChange({
-      from: selected.from,
-      to: selected.to ?? selected.from,
-      startTime: value?.startTime ?? "",
-      endTime:   value?.endTime   ?? "",
-    })
+
+    // 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>) {
@@ -67,14 +72,6 @@ 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 && !isComplete
-      ? { 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",
@@ -85,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">