@sixthshift/design-system 0.2.1 → 0.4.0

package/src/components/DatePicker/datepicker.types.ts

@@ -1,11 +1,13 @@
 /**
- * DatePicker types
+ * DatePicker types.
  *
- * All date values use Temporal.PlainDate at the component boundary.
- * This provides type safety and semantic clarity about what kind of date is expected.
+ * All date values at the public boundary are canonical ISO 8601 strings
+ * (`"2026-08-26"`). Temporal is an implementation detail of the calendar grid;
+ * the `*Internal` types below describe that layer and are not exported from
+ * `./index.ts`.
  */
 
-import type { Temporal, WeekStartsOn } from "../../date-time";
+import type { DisabledDates, ISODate, ISODateRange, Temporal, TemporalDisabledMatcher, WeekStartsOn } from "../../date-time";
 import type { PresetOption as CalendarPresetOption } from "../Calendar/calendar.types";
 
 // =============================================================================
@@ -13,32 +15,39 @@ import type { PresetOption as CalendarPresetOption } from "../Calendar/calendar.
 // =============================================================================
 
 /**
- * Date range value for range mode
+ * Selection mode for the DatePicker
  */
-export type DateRangeValue = {
-  from: Temporal.PlainDate | undefined;
-  to: Temporal.PlainDate | undefined;
-};
+export type DatePickerMode = "single" | "range" | "multiple";
 
 /**
- * Selection mode for the DatePicker
+ * Which order the typeable segments read in.
+ *
+ * Explicit rather than inferred from the runtime locale: `08/09` is a different
+ * date under `mdy` than under `dmy`, and a component that guesses is wrong for
+ * half its users. Defaults to `mdy`, matching the `en-US` formatting the rest
+ * of the library's display helpers use.
  */
-export type DatePickerMode = "single" | "range" | "multiple";
+export type DateSegmentOrder = "mdy" | "dmy" | "ymd";
 
 // =============================================================================
-// Disabled Date Matching
+// Internal (Temporal) types
 // =============================================================================
 
 /**
- * Matchers for disabling dates
+ * Date range value in Temporal terms, used by `datepicker.hooks`.
+ *
+ * The public equivalent is `ISODateRange`.
  */
-export type DisabledDateMatcher =
-  | Temporal.PlainDate // Single date
-  | Temporal.PlainDate[] // Array of dates
-  | ((date: Temporal.PlainDate) => boolean) // Custom function
-  | { before: Temporal.PlainDate } // All dates before
-  | { after: Temporal.PlainDate } // All dates after
-  | { from: Temporal.PlainDate; to: Temporal.PlainDate }; // Date range
+export type DateRangeValue = {
+  from: Temporal.PlainDate | undefined;
+  to: Temporal.PlainDate | undefined;
+};
+
+/**
+ * Temporal-shaped disabled matchers, produced from the public
+ * {@link DisabledDates} by `adaptDisabledDates`.
+ */
+export type DisabledDateMatcher = TemporalDisabledMatcher;
 
 // =============================================================================
 // Props (discriminated union by mode)
@@ -48,16 +57,20 @@ type DatePickerBaseProps = {
   /** First day of week (0 = Sunday, 1 = Monday) */
   weekStartsOn?: WeekStartsOn;
 
-  /** Minimum selectable date */
-  minDate?: Temporal.PlainDate;
+  /** Earliest selectable date, inclusive */
+  minDate?: ISODate;
 
-  /** Maximum selectable date */
-  maxDate?: Temporal.PlainDate;
+  /** Latest selectable date, inclusive */
+  maxDate?: ISODate;
 
-  /** Disabled dates */
-  disabled?: DisabledDateMatcher | DisabledDateMatcher[];
+  /** Which dates to refuse. See `DisabledDates`. */
+  disabled?: DisabledDates | DisabledDates[];
 
-  /** Placeholder text */
+  /**
+   * Placeholder for the read-only text trigger, which only `multiple` mode
+   * still uses. `single` and `range` are typeable fields whose segments show
+   * their own placeholders (`mm/dd/yyyy`).
+   */
   placeholder?: string;
 
   /** Input name for form submission */
@@ -77,44 +90,50 @@ type DatePickerBaseProps = {
 
   /** Whether the clear button is shown when a value is present (default: true) */
   clearable?: boolean;
+
+  /**
+   * Segment order for the typeable field (`single` mode only; default `mdy`).
+   * See {@link DateSegmentOrder}.
+   */
+  segmentOrder?: DateSegmentOrder;
 };
 
 export type DatePickerSingleProps = DatePickerBaseProps & {
   mode?: "single";
   /** Controlled value */
-  value?: Temporal.PlainDate | undefined;
+  value?: ISODate | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: Temporal.PlainDate | undefined;
+  defaultValue?: ISODate | undefined;
   /** Called when date changes */
-  onChange?: (date: Temporal.PlainDate | undefined) => void;
+  onChange?: (date: ISODate | undefined) => void;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<Temporal.PlainDate>[];
+  presets?: CalendarPresetOption<ISODate>[];
 };
 
 export type DatePickerRangeProps = DatePickerBaseProps & {
   mode: "range";
   /** Controlled value */
-  value?: DateRangeValue | undefined;
+  value?: ISODateRange | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: DateRangeValue | undefined;
+  defaultValue?: ISODateRange | undefined;
   /** Called when range changes */
-  onChange?: (range: DateRangeValue | undefined) => void;
+  onChange?: (range: ISODateRange | undefined) => void;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<DateRangeValue>[];
+  presets?: CalendarPresetOption<ISODateRange>[];
 };
 
 export type DatePickerMultipleProps = DatePickerBaseProps & {
   mode: "multiple";
   /** Controlled value (array of dates) */
-  value?: Temporal.PlainDate[] | undefined;
+  value?: ISODate[] | undefined;
   /** Default value for uncontrolled mode */
-  defaultValue?: Temporal.PlainDate[] | undefined;
+  defaultValue?: ISODate[] | undefined;
   /** Called when selection changes */
-  onChange?: (dates: Temporal.PlainDate[]) => void;
+  onChange?: (dates: ISODate[]) => void;
   /** Maximum number of dates that can be selected */
   max?: number | undefined;
   /** Preset options (shown in left sidebar) */
-  presets?: CalendarPresetOption<Temporal.PlainDate[]>[];
+  presets?: CalendarPresetOption<ISODate[]>[];
 };
 
 /**

package/src/components/DatePicker/index.ts

@@ -1,4 +1,13 @@
-// Note: PresetOption is now exported from Calendar types
+/**
+ * Public surface of `@sixthshift/design-system/date-picker`.
+ *
+ * `DateRangeValue` and `DisabledDateMatcher` used to be exported from here as
+ * Temporal-shaped types. They are now internal; the public equivalents are
+ * `ISODateRange` and `DisabledDates`, re-exported below so a consumer typing
+ * their own range state does not need a second import.
+ */
+
+export type { DisabledDates, ISODate, ISODateRange } from "../../date-time";
 export type { PresetOption } from "../Calendar/calendar.types";
 export { DatePicker } from "./DatePicker";
 export type {
@@ -7,6 +16,5 @@ export type {
   DatePickerProps,
   DatePickerRangeProps,
   DatePickerSingleProps,
-  DateRangeValue,
-  DisabledDateMatcher,
+  DateSegmentOrder,
 } from "./datepicker.types";

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -1,5 +1,6 @@
+import * as React from "react";
 import { useMemo } from "react";
-import { today } from "../../date-time";
+import { addDaysISO, startOfMonthISO, todayISO } from "../../date-time";
 
 import { DatePicker } from "../DatePicker";
 import type { DatePickerRangeProps } from "../DatePicker/datepicker.types";
@@ -14,49 +15,43 @@ function getDefaultPresets(): PresetOption[] {
     {
       label: "Today",
       value: () => {
-        const t = today();
+        const t = todayISO();
         return { from: t, to: t };
       },
     },
     {
       label: "Yesterday",
       value: () => {
-        const yesterday = today().subtract({ days: 1 });
+        const yesterday = addDaysISO(todayISO(), -1);
         return { from: yesterday, to: yesterday };
       },
     },
     {
       label: "Last 7 days",
       value: () => {
-        const t = today();
-        const weekAgo = t.subtract({ days: 6 });
-        return { from: weekAgo, to: t };
+        const t = todayISO();
+        return { from: addDaysISO(t, -6), to: t };
       },
     },
     {
       label: "Last 30 days",
       value: () => {
-        const t = today();
-        const monthAgo = t.subtract({ days: 29 });
-        return { from: monthAgo, to: t };
+        const t = todayISO();
+        return { from: addDaysISO(t, -29), to: t };
       },
     },
     {
       label: "This month",
       value: () => {
-        const t = today();
-        const firstDay = t.with({ day: 1 });
-        return { from: firstDay, to: t };
+        const t = todayISO();
+        return { from: startOfMonthISO(t), to: t };
       },
     },
     {
       label: "Last month",
       value: () => {
-        const t = today();
-        const firstDayThisMonth = t.with({ day: 1 });
-        const lastDayLastMonth = firstDayThisMonth.subtract({ days: 1 });
-        const firstDayLastMonth = lastDayLastMonth.with({ day: 1 });
-        return { from: firstDayLastMonth, to: lastDayLastMonth };
+        const lastDayLastMonth = addDaysISO(startOfMonthISO(todayISO()), -1);
+        return { from: startOfMonthISO(lastDayLastMonth), to: lastDayLastMonth };
       },
     },
   ];
@@ -65,10 +60,28 @@ function getDefaultPresets(): PresetOption[] {
 /**
  * DateRangePicker - A specialized date range picker component
  *
- * Wraps DatePicker with mode="range" and adds common range presets.
- * Uses Temporal.PlainDate for all date values.
+ * Wraps `DatePicker` with `mode="range"` and adds common range presets
+ * ("Today", "Last 7 days", "This month", …). Anything `DatePicker` does in
+ * range mode — two typeable fields, draft/commit via Apply/Cancel, keyboard
+ * navigation, form submission via hidden `name.from`/`name.to` inputs — carries
+ * over unchanged.
+ *
+ * Range mode renders the two ends as separate segmented fields rather than one
+ * field holding both: each end is typed and cleared on its own, and the shared
+ * popover anchors to whichever half you are editing.
+ *
+ * The value is an `ISODateRange` (`{ from?: ISODate, to?: ISODate }`), both
+ * ends canonical ISO 8601 date strings ("2026-08-26"). Supports controlled
+ * (`value`/`onChange`) and uncontrolled (`defaultValue`) use.
+ *
+ * `presets` (a `PresetOption[]` whose `value` is a zero-arg function) replaces
+ * the built-in list; the function form lets relative ranges like "Last 7 days"
+ * compute from the current date on every render rather than being frozen when
+ * the preset list is defined. Set `showPresets={false}` to hide the sidebar
+ * entirely. `minDate`/`maxDate`/`disabled` bound and exclude dates exactly as
+ * in `DatePicker`.
  */
-export const DateRangePicker = (props: DateRangePickerProps) => {
+export const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>((props, ref) => {
   const {
     value,
     defaultValue,
@@ -78,8 +91,8 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     disabled,
     presets: customPresets,
     showPresets = true,
-    placeholder = "Select date range...",
     weekStartsOn,
+    segmentOrder,
     name,
     isDisabled,
     isInvalid,
@@ -106,7 +119,6 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
   // Build props for DatePicker (only include defined values)
   const datePickerProps: Record<string, unknown> = {
     mode: "range",
-    placeholder,
     ...(value !== undefined && { value }),
     ...(defaultValue !== undefined && { defaultValue }),
     ...(onChange !== undefined && { onChange }),
@@ -115,6 +127,7 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     ...(disabled && { disabled }),
     ...(datePickerPresets && { presets: datePickerPresets }),
     ...(weekStartsOn !== undefined && { weekStartsOn }),
+    ...(segmentOrder !== undefined && { segmentOrder }),
     ...(name && { name }),
     ...(isDisabled && { isDisabled }),
     ...(isInvalid && { isInvalid }),
@@ -123,5 +136,6 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     ...(clearable !== undefined && { clearable }),
   };
 
-  return <DatePicker {...(datePickerProps as DatePickerRangeProps)} />;
-};
+  return <DatePicker ref={ref} {...(datePickerProps as DatePickerRangeProps)} />;
+});
+DateRangePicker.displayName = "DateRangePicker";

package/src/components/DateRangePicker/daterangepicker.types.ts

@@ -1,42 +1,48 @@
-import type { Temporal, WeekStartsOn } from "../../date-time";
-
-export type DateRangeValue = {
-  from: Temporal.PlainDate | undefined;
-  to: Temporal.PlainDate | undefined;
-};
-
+/**
+ * DateRangePicker types.
+ *
+ * All values at the public boundary are canonical ISO 8601 date strings
+ * (`"2026-08-26"`).
+ */
+
+import type { DisabledDates, ISODate, ISODateRange, WeekStartsOn } from "../../date-time";
+import type { DateSegmentOrder } from "../DatePicker/datepicker.types";
+
+/**
+ * A preset range.
+ *
+ * The value is a function so that relative ranges ("Last 7 days") are computed
+ * when the picker renders rather than when the preset list is defined.
+ */
 export type PresetOption = {
   label: string;
-  value: () => DateRangeValue;
+  value: () => ISODateRange;
 };
 
-export type DisabledDateMatcher =
-  | Temporal.PlainDate
-  | Temporal.PlainDate[]
-  | ((date: Temporal.PlainDate) => boolean)
-  | { before: Temporal.PlainDate }
-  | { after: Temporal.PlainDate }
-  | { from: Temporal.PlainDate; to: Temporal.PlainDate };
-
 export type DateRangePickerProps = {
   // Value (controlled/uncontrolled)
-  value?: DateRangeValue;
-  defaultValue?: DateRangeValue;
-  onChange?: (range: DateRangeValue | undefined) => void;
+  value?: ISODateRange;
+  defaultValue?: ISODateRange;
+  onChange?: (range: ISODateRange | undefined) => void;
 
   // Constraints
-  minDate?: Temporal.PlainDate;
-  maxDate?: Temporal.PlainDate;
-  disabled?: DisabledDateMatcher | DisabledDateMatcher[];
+  minDate?: ISODate;
+  maxDate?: ISODate;
+  disabled?: DisabledDates | DisabledDates[];
 
   // Presets
   presets?: PresetOption[];
   showPresets?: boolean; // Default: true
 
   // Display
-  placeholder?: string;
   weekStartsOn?: WeekStartsOn;
 
+  /**
+   * Segment order for both typeable fields (default `mdy`). Never inferred from
+   * the locale — `08/09` is a different date under each.
+   */
+  segmentOrder?: DateSegmentOrder;
+
   // Form
   name?: string;
 

package/src/components/DateRangePicker/index.ts

@@ -1,2 +1,10 @@
+/**
+ * Public surface of `@sixthshift/design-system/date-range-picker`.
+ *
+ * `DateRangeValue` and `DisabledDateMatcher` were Temporal-shaped and are gone;
+ * the ISO equivalents `ISODateRange` and `DisabledDates` are re-exported here.
+ */
+
+export type { DisabledDates, ISODate, ISODateRange } from "../../date-time";
 export { DateRangePicker } from "./DateRangePicker";
-export type { DateRangePickerProps, DateRangeValue, DisabledDateMatcher, PresetOption } from "./daterangepicker.types";
+export type { DateRangePickerProps, PresetOption } from "./daterangepicker.types";