@sixthshift/design-system 0.2.1 → 0.3.0

package/src/components/TimePicker/TimePicker.tsx

@@ -2,8 +2,9 @@ import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss,
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
 import { Clock, X } from "lucide-react";
-import type * as React from "react";
-import { useCallback, useId, useState } from "react";
+import * as React from "react";
+import { useCallback, useId, useMemo, useState } from "react";
+import { fromISOTime, fromISOTimeOrUndefined, type Temporal, toISOTimeOrUndefined } from "../../date-time";
 import { Button } from "../Button";
 import { Separator } from "../Separator";
 import { PeriodSelector } from "./PeriodSelector";
@@ -25,7 +26,7 @@ import type { ParsedTime, TimePeriod, TimePickerProps, TimePresetOption } from "
 
 export type { TimePickerProps };
 
-export const TimePicker = (props: TimePickerProps) => {
+export const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>((props, ref) => {
   const {
     value,
     defaultValue,
@@ -46,11 +47,27 @@ export const TimePicker = (props: TimePickerProps) => {
   // Open state
   const [open, setOpen] = useState(false);
 
+  // ---------------------------------------------------------------------------
+  // The ISO boundary.
+  //
+  // Props arrive as ISO time strings and onChange emits the canonical
+  // `HH:MM:SS` form; everything below works in Temporal.PlainTime as before.
+  // Each conversion is memoised on its source string, so the Temporal values
+  // handed to the hooks below stay referentially stable across renders.
+  // ---------------------------------------------------------------------------
+
+  const temporalValue = useMemo(() => fromISOTimeOrUndefined(value), [value]);
+  const temporalDefaultValue = useMemo(() => fromISOTimeOrUndefined(defaultValue), [defaultValue]);
+  const temporalMinTime = useMemo(() => fromISOTimeOrUndefined(minTime), [minTime]);
+  const temporalMaxTime = useMemo(() => fromISOTimeOrUndefined(maxTime), [maxTime]);
+
+  const handleChange = useCallback((next: Temporal.PlainTime | undefined) => onChange?.(toISOTimeOrUndefined(next)), [onChange]);
+
   // Controllable value state (external/committed value)
-  const [committedValue, setCommittedValue] = useControllableState({
-    value,
-    defaultValue,
-    onChange,
+  const [committedValue, setCommittedValue] = useControllableState<Temporal.PlainTime | undefined>({
+    value: temporalValue,
+    defaultValue: temporalDefaultValue,
+    onChange: handleChange,
   });
 
   // Parse committed value
@@ -108,13 +125,13 @@ export const TimePicker = (props: TimePickerProps) => {
     const temporalTime = parsedToTemporal(parsed);
 
     // Check if disabled
-    if (isTimeDisabled(temporalTime, minTime, maxTime)) {
+    if (isTimeDisabled(temporalTime, temporalMinTime, temporalMaxTime)) {
       return;
     }
 
     setCommittedValue(temporalTime);
     setOpen(false);
-  }, [getDraftTime, minTime, maxTime, setCommittedValue]);
+  }, [getDraftTime, temporalMinTime, temporalMaxTime, setCommittedValue]);
 
   // Cancel changes
   const handleCancel = useCallback(() => {
@@ -144,7 +161,7 @@ export const TimePicker = (props: TimePickerProps) => {
   // Preset selection
   const handlePresetClick = useCallback(
     (preset: TimePresetOption) => {
-      const parsed = temporalToParsed(preset.value);
+      const parsed = temporalToParsed(fromISOTime(preset.value));
       setDraftHour(clockFormat === "12h" ? to12Hour(parsed.hour).hour12 : parsed.hour);
       setDraftMinute(parsed.minute);
       setDraftSecond(parsed.second);
@@ -157,7 +174,7 @@ export const TimePicker = (props: TimePickerProps) => {
   const isPresetActive = useCallback(
     (preset: TimePresetOption): boolean => {
       const draftTime = getDraftTime();
-      const presetParsed = temporalToParsed(preset.value);
+      const presetParsed = temporalToParsed(fromISOTime(preset.value));
 
       return (
         draftTime.hour === presetParsed.hour && draftTime.minute === presetParsed.minute && (format === "HH:mm" || draftTime.second === presetParsed.second)
@@ -196,7 +213,7 @@ export const TimePicker = (props: TimePickerProps) => {
   return (
     <>
       {/* Trigger Input */}
-      <div className="relative flex items-center">
+      <div ref={ref} className="relative flex items-center">
         <Clock className="pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" />
         <input
           ref={refs.setReference as React.Ref<HTMLInputElement>}
@@ -320,4 +337,5 @@ export const TimePicker = (props: TimePickerProps) => {
       )}
     </>
   );
-};
+});
+TimePicker.displayName = "TimePicker";

package/src/components/TimePicker/timepicker.types.ts

@@ -1,11 +1,12 @@
 /**
- * TimePicker types
+ * TimePicker types.
  *
- * All time values use Temporal.PlainTime at the component boundary.
- * This provides type safety and semantic clarity about what kind of time is expected.
+ * All time values at the public boundary are ISO 8601 time strings. `"09:30"`
+ * and `"09:30:00"` are both accepted as input; `onChange` always emits the
+ * canonical `HH:MM:SS` form.
  */
 
-import type { Temporal } from "../../date-time";
+import type { ISOTime } from "../../date-time";
 
 // =============================================================================
 // Value Types
@@ -31,7 +32,7 @@ export type ClockFormat = "12h" | "24h";
 
 export type TimePresetOption = {
   label: string;
-  value: Temporal.PlainTime;
+  value: ISOTime;
 };
 
 // =============================================================================
@@ -40,13 +41,13 @@ export type TimePresetOption = {
 
 export type TimePickerProps = {
   /** Controlled value */
-  value?: Temporal.PlainTime | undefined;
+  value?: ISOTime | undefined;
 
   /** Default value for uncontrolled mode */
-  defaultValue?: Temporal.PlainTime | undefined;
+  defaultValue?: ISOTime | undefined;
 
-  /** Called when time changes */
-  onChange?: (time: Temporal.PlainTime | undefined) => void;
+  /** Called when time changes. Always canonical `HH:MM:SS`. */
+  onChange?: (time: ISOTime | undefined) => void;
 
   /** Time format for the value (affects seconds visibility) */
   format?: TimeFormat;
@@ -57,11 +58,11 @@ export type TimePickerProps = {
   /** Minute step interval (default: 1) */
   minuteStep?: 1 | 5 | 10 | 15 | 30;
 
-  /** Minimum selectable time */
-  minTime?: Temporal.PlainTime;
+  /** Earliest selectable time, inclusive */
+  minTime?: ISOTime;
 
-  /** Maximum selectable time */
-  maxTime?: Temporal.PlainTime;
+  /** Latest selectable time, inclusive */
+  maxTime?: ISOTime;
 
   /** Preset options (shown in sidebar) */
   presets?: TimePresetOption[];

package/src/date-time/index.ts

@@ -38,6 +38,67 @@
 export type { Temporal as TemporalNamespace } from "@js-temporal/polyfill";
 export { Temporal } from "@js-temporal/polyfill";
 
+// =============================================================================
+// ISO 8601 strings — the component boundary
+// =============================================================================
+//
+// Every date/time component accepts and emits these types, never Temporal. This
+// section is the only part of the module a consumer needs in order to use the
+// pickers; everything below it is for date arithmetic they choose to opt into.
+
+export type {
+  DisabledDates,
+  ISODate,
+  ISODateRange,
+  ISODateTime,
+  ISOInstant,
+  ISOInstantRange,
+  ISOTime,
+  TemporalDateRange,
+  TemporalDisabledMatcher,
+  TemporalInstantRange,
+  Weekday,
+} from "./iso";
+export {
+  adaptDisabledDates,
+  // ISO-native arithmetic (no Temporal needed at the call site)
+  addDaysISO,
+  addHoursISO,
+  addMinutesISO,
+  addMonthsISO,
+  compareISO,
+  endOfMonthISO,
+  endOfWeekISO,
+  endOfYearISO,
+  // Widening: ISO string -> Temporal
+  fromISODate,
+  fromISODateOrUndefined,
+  fromISODateRange,
+  fromISOInstant,
+  fromISOInstantOrUndefined,
+  fromISOInstantRange,
+  fromISOTime,
+  fromISOTimeOrUndefined,
+  // Strict boundary guards
+  isDateString,
+  isInstantString,
+  isTimeString,
+  isWeekendISO,
+  startOfMonthISO,
+  startOfWeekISO,
+  startOfYearISO,
+  // Narrowing: string | Temporal -> canonical ISO
+  toISODate,
+  toISODateOrUndefined,
+  toISODateRange,
+  toISOInstant,
+  toISOInstantOrUndefined,
+  toISOInstantRange,
+  toISOTime,
+  toISOTimeOrUndefined,
+  weekdayISO,
+} from "./iso";
+
 // =============================================================================
 // Parsing: ISO 8601 string → Temporal
 // =============================================================================