@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/date-picker/date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.js","names":["AriaDialogTrigger","AriaButton","Popover","AriaDialog","Calendar"],"sources":["../../src/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DateValue } from \"@internationalized/date\";\nimport { forwardRef, useEffect, useId, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  DialogTrigger as AriaDialogTrigger,\n  useLocale,\n} from \"react-aria-components\";\n\nimport { Calendar } from \"../calendar/calendar.js\";\nimport { cn } from \"../lib/cn.js\";\nimport { useFlip } from \"../lib/flip.js\";\nimport { prefersReducedMotion } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Popover } from \"../popover/popover.js\";\nimport {\n  CalendarGlyph,\n  Chevron,\n  TypedDate,\n  datePickerLabelVariants,\n  datePickerTriggerVariants,\n  datePickerVariants,\n  descriptionClass,\n  errorClass,\n  hintClass,\n  pickerFooterButtonVariants,\n  useDayFormat,\n  useValue,\n  type PickerSharedProps,\n} from \"./picker-parts.js\";\n\nexport {\n  datePickerInputVariants,\n  datePickerLabelVariants,\n  datePickerSegmentVariants,\n  datePickerTriggerVariants,\n  datePickerVariants,\n  pickerFooterButtonVariants,\n} from \"./picker-parts.js\";\nexport {\n  DateRangePicker,\n  defaultDateRangePresets,\n  type DateRangePickerMessages,\n  type DateRangePickerProps,\n  type DateRangePickerValue,\n  type DateRangePreset,\n} from \"./date-range-picker.js\";\n\n/**\n * DatePicker and DateRangePicker: a field-sized trigger that shows the chosen\n * value as words, opening a Popover with the Calendar in it and a typed date\n * field above the calendar.\n *\n * WHY A TRIGGER AND NOT React Aria's segmented DatePicker. The segmented field\n * shows `dd/mm/yyyy` digits in the field itself, which is exactly what a\n * native `<input type=\"date\">` shows; a product that prints dates as\n * \"1 Sep 2026\" everywhere else wants the field to say that too. The typed\n * field is still there, inside the popover, because a calendar alone makes a\n * date years away a long walk of \"previous month\" presses.\n *\n * Values are `DateValue` objects (ADR 0006), the type Calendar already takes,\n * and the import stays `import type`: the default display formats with\n * `Intl.DateTimeFormat` over `value.toDate(\"UTC\")`, an instance method, so the\n * package still contributes zero bytes.\n *\n * Every class string below is a STATIC literal, for the same reason as every\n * other component here: Tailwind scans source text.\n */\n/** Props for {@link DatePicker}. */\nexport interface DatePickerProps extends PickerSharedProps {\n  /**\n   * The footer's status line when a day is chosen, followed by the day.\n   *\n   * @default \"Selected\"\n   */\n  selectedStatusLabel?: string;\n  /**\n   * The footer's status line while no day is chosen.\n   *\n   * @default \"Choose a day\"\n   */\n  emptyStatusLabel?: string;\n  /** The chosen day (controlled). `null` is none. */\n  value?: DateValue | null;\n  /** The day chosen at first (uncontrolled). */\n  defaultValue?: DateValue | null;\n  /** Told the new day, or `null` when cleared. */\n  onChange?: (value: DateValue | null) => void;\n  /** Label of the typed date field inside the popover. @default \"Type a date\" */\n  typedLabel?: string;\n}\n\n/** The shell both pickers share: label, trigger, popover, description and error. */\nfunction PickerShell({\n  slot,\n  shown,\n  valueNode,\n  props,\n  triggerRef,\n  children,\n}: {\n  slot: string;\n  shown: string | null;\n  /** The animated copy of the value the eye sees. Without it the plain text shows. */\n  valueNode?: ReactNode;\n  props: PickerSharedProps;\n  triggerRef: React.ForwardedRef<HTMLButtonElement>;\n  children: (close: () => void) => ReactNode;\n}) {\n  const id = useId();\n  const labelId = `${id}-label`;\n  const valueId = `${id}-value`;\n  const descriptionId = `${id}-description`;\n  const errorId = `${id}-error`;\n  const invalid = props.errorMessage != null;\n  const describedBy = [props.description != null && descriptionId, invalid && errorId]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <div\n      data-slot={slot}\n      data-invalid={invalid || undefined}\n      className={cn(datePickerVariants(), props.className)}\n    >\n      <span id={labelId} className={cn(datePickerLabelVariants(), props.labelHidden && \"sr-only\")}>\n        {props.label}\n      </span>\n      <AriaDialogTrigger>\n        <AriaButton\n          ref={triggerRef}\n          data-slot=\"date-picker-trigger\"\n          aria-labelledby={`${labelId} ${valueId}`}\n          aria-describedby={describedBy || undefined}\n          isDisabled={props.isDisabled}\n          className={datePickerTriggerVariants({ size: props.size })}\n        >\n          <CalendarGlyph />\n          {valueNode ? (\n            <>\n              {/* The text a screen reader reads; the copy beside it is what animates. */}\n              <span id={valueId} data-slot=\"date-picker-value\" className=\"sr-only\">\n                {shown ?? props.placeholder ?? \"Choose a date\"}\n              </span>\n              {valueNode}\n            </>\n          ) : (\n            <span\n              id={valueId}\n              data-slot=\"date-picker-value\"\n              className={cn(\"min-w-0 flex-1 truncate\", shown === null && \"text-muted-foreground\")}\n            >\n              {shown ?? props.placeholder ?? \"Choose a date\"}\n            </span>\n          )}\n          <Chevron />\n        </AriaButton>\n        <Popover\n          entrance=\"none\"\n          placement=\"bottom start\"\n          className=\"picker-pop w-auto origin-[22px_-4px] overflow-y-auto\"\n        >\n          <AriaDialog\n            aria-label={props.label}\n            data-slot=\"date-picker-dialog\"\n            className=\"flex flex-col gap-3 outline-none\"\n          >\n            {({ close }) => children(close)}\n          </AriaDialog>\n        </Popover>\n      </AriaDialogTrigger>\n      {props.description == null ? null : (\n        <span\n          id={descriptionId}\n          data-slot=\"date-picker-description\"\n          className={cn(descriptionClass, hintClass)}\n        >\n          {props.description}\n        </span>\n      )}\n      {invalid ? (\n        <span id={errorId} data-slot=\"date-picker-error\" className={errorClass}>\n          {props.errorMessage}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * A field for one date: the trigger shows the chosen day in words, and opens\n * the Calendar with a typed date field above it.\n *\n * Maturity: **experimental**, as Calendar.\n *\n * Picking a day closes the popover and returns focus to the trigger; a typed\n * date is reported as soon as it is whole. Escape or a click outside closes\n * without a change.\n *\n * @example\n * <DatePicker label=\"Invoice date\" value={date} onChange={setDate} clearable />\n */\ninterface ValuePart {\n  type: string;\n  value: string;\n}\n\n/** The pieces of a formatted day, so each can roll on its own: a later date rises, an earlier one drops. */\nfunction useDayParts(): (value: DateValue) => ValuePart[] {\n  const { locale } = useLocale();\n  return useMemo(() => {\n    const format = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: \"UTC\" });\n    return (value: DateValue) => format.formatToParts(value.toDate(\"UTC\"));\n  }, [locale]);\n}\n\n/** Which way a value moved in time, so its text rolls in that direction. */\nfunction useDirection(value: DateValue | null) {\n  const key = value ? String(value) : null;\n  const [previous, setPrevious] = useState<DateValue | null>(value);\n  const [direction, setDirection] = useState(1);\n  if ((previous ? String(previous) : null) !== key) {\n    setPrevious(value);\n    setDirection(value && previous && value.compare(previous) < 0 ? -1 : 1);\n  }\n  return direction;\n}\n\n/**\n * The value the eye sees, in a trigger. Each part of a date rolls on its own\n * (a part that did not change holds still), parts after a wider or narrower one\n * slide along instead of jumping, and a value and the placeholder swap as wholes.\n * Nothing animates on first mount. The caller keeps the plain text for screen\n * readers; this copy is `aria-hidden`.\n */\nfunction AnimatedValue({\n  parts,\n  placeholder,\n  direction,\n}: {\n  parts: ValuePart[] | null;\n  placeholder: string;\n  direction: number;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const text = parts ? parts.map((part) => part.value).join(\"\") : \"\";\n  useFlip(ref, text);\n  return (\n    <span ref={ref} aria-hidden=\"true\" className=\"flex min-w-0 flex-1 overflow-hidden\">\n      <SwapText\n        swapKey={parts ? \"value\" : \"placeholder\"}\n        dir={parts ? 1 : -1}\n        motion=\"roll\"\n        className=\"inline-flex min-w-0 max-w-full\"\n      >\n        {parts ? (\n          <span className=\"inline-flex whitespace-pre tabular-nums\">\n            {parts.map((part, index) => (\n              <span key={`${index}-${part.type}`} data-flip=\"\" className=\"inline-flex whitespace-pre\">\n                {part.type === \"literal\" ? (\n                  // In its own box: a flex item of only whitespace is dropped.\n                  <span className=\"whitespace-pre\">{part.value}</span>\n                ) : (\n                  <SwapText\n                    swapKey={part.value}\n                    dir={direction}\n                    motion=\"roll\"\n                    className=\"inline-block whitespace-pre\"\n                  >\n                    {part.value}\n                  </SwapText>\n                )}\n              </span>\n            ))}\n          </span>\n        ) : (\n          <span data-slot=\"date-picker-placeholder\" className=\"truncate text-muted-foreground\">\n            {placeholder}\n          </span>\n        )}\n      </SwapText>\n    </span>\n  );\n}\n\n/**\n * The footer of a picker's calendar: Clear on one side and a status line on the\n * other, which confirms a pick (the new line rises in while the old one lifts\n * away).\n */\nfunction PickerFooter({\n  status,\n  statusKey,\n  clearable,\n  clearLabel,\n  canClear,\n  onClear,\n}: {\n  status: string;\n  statusKey: string;\n  clearable: boolean;\n  clearLabel: string;\n  canClear: boolean;\n  onClear: () => void;\n}) {\n  return (\n    <div\n      data-slot=\"date-picker-footer\"\n      className=\"flex items-center justify-between gap-2 border-t-(length:--border-width) border-border pt-3 text-xs text-muted-foreground\"\n    >\n      {clearable ? (\n        <AriaButton\n          slot={null}\n          data-slot=\"date-picker-clear\"\n          isDisabled={!canClear}\n          onPress={onClear}\n          className={pickerFooterButtonVariants()}\n        >\n          {clearLabel}\n        </AriaButton>\n      ) : (\n        <span />\n      )}\n      <span aria-live=\"polite\" className=\"grid min-w-0 justify-items-end\">\n        <SwapText swapKey={statusKey} className=\"block max-w-full truncate\">\n          {status}\n        </SwapText>\n      </span>\n    </div>\n  );\n}\n\nexport const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(\n  {\n    value,\n    defaultValue = null,\n    onChange,\n    typedLabel = \"Type a date\",\n    selectedStatusLabel = \"Selected\",\n    emptyStatusLabel = \"Choose a day\",\n    ...props\n  },\n  ref,\n) {\n  const [current, setCurrent] = useValue(value, defaultValue, onChange);\n  const defaultFormat = useDayFormat();\n  const dayParts = useDayParts();\n  const format = props.formatValue ?? defaultFormat;\n  const direction = useDirection(current);\n  const closeTimer = useRef<number | undefined>(undefined);\n  useEffect(() => () => window.clearTimeout(closeTimer.current), []);\n  // A custom format is one string, so it rolls as one part.\n  const parts = current\n    ? props.formatValue\n      ? [{ type: \"value\", value: format(current) }]\n      : dayParts(current)\n    : null;\n  return (\n    <PickerShell\n      slot=\"date-picker\"\n      shown={current ? format(current) : null}\n      valueNode={\n        <AnimatedValue\n          parts={parts}\n          placeholder={props.placeholder ?? \"Choose a date\"}\n          direction={direction}\n        />\n      }\n      props={props}\n      triggerRef={ref}\n    >\n      {(close) => {\n        /** A picked day lets the disc glide onto it and the footer confirm it, then the calendar returns to the field. */\n        const pick = (next: DateValue | null) => {\n          setCurrent(next);\n          window.clearTimeout(closeTimer.current);\n          if (!next || prefersReducedMotion()) close();\n          else closeTimer.current = window.setTimeout(close, 300);\n        };\n        return (\n          <>\n            <TypedDate\n              label={typedLabel}\n              value={current}\n              minValue={props.minValue}\n              maxValue={props.maxValue}\n              onChange={(next) => {\n                // A half-typed date is not a value; only a whole one, or all parts cleared, reports.\n                if (next || props.clearable) setCurrent(next);\n              }}\n            />\n            <Calendar\n              label={props.label}\n              labelHidden\n              autoFocus\n              value={current}\n              minValue={props.minValue}\n              maxValue={props.maxValue}\n              onChange={(next: DateValue | null) => pick(next)}\n            />\n            <PickerFooter\n              status={current ? `${selectedStatusLabel} ${format(current)}` : emptyStatusLabel}\n              statusKey={current ? String(current) : \"none\"}\n              clearable={Boolean(props.clearable)}\n              clearLabel={props.clearLabel ?? \"Clear\"}\n              canClear={current !== null}\n              onClear={() => {\n                window.clearTimeout(closeTimer.current);\n                pick(null);\n              }}\n            />\n          </>\n        );\n      }}\n    </PickerShell>\n  );\n});\n"],"mappings":"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"}

package/dist/date-picker/date-range-picker.d.ts

@@ -0,0 +1,78 @@
+import { PickerSharedProps } from "./picker-parts.js";
+import { DateValue } from "@internationalized/date";
+//#region src/date-picker/date-range-picker.d.ts
+/**
+ * DateRangePicker: a trigger that grows into the panel it opens.
+ *
+ * The trigger's box springs to the panel's box and back: one surface, whose width,
+ * height, corners and offset ride springs while the panel's content arrives just
+ * behind it and leaves just ahead of it. The panel holds a rail of presets, the
+ * typed start and end, and two months side by side (one month under a scrolling row
+ * of presets when there is no room). The highlight stretches across each week as
+ * the range is chosen, its ends glide between days, the months slide in the
+ * direction you travel, and on Apply the formatted range flies back into the
+ * trigger as the surface shrinks around it.
+ *
+ * Nothing is applied until Apply: the panel edits a draft. Values are `DateValue`
+ * objects (ADR 0006); either end may be `null`, as before.
+ *
+ * The calendar is React Aria's `RangeCalendar`, so keyboard, locale and
+ * calendar-system behaviour are its own; the motion is measured from the cells it
+ * renders. Every class string is a static literal: Tailwind scans source text.
+ */
+export interface DateRangePickerValue {
+  start: DateValue | null;
+  end: DateValue | null;
+}
+/** A shortcut in the preset rail. `range` receives the viewer's local today. */
+export interface DateRangePreset {
+  label: string;
+  range: (today: DateValue) => {
+    start: DateValue;
+    end: DateValue;
+  };
+}
+/** Every string the panel shows, so a product can translate them. */
+export interface DateRangePickerMessages {
+  /** The preset rail's name. */
+  presets: string;
+  apply: string;
+  cancel: string;
+  clear: string;
+  previousMonth: string;
+  nextMonth: string;
+  /** The summary while nothing is chosen. */
+  noDates: string;
+  /** Under the summary while only the start is chosen. */
+  pickEnd: string;
+  /** The count under the summary, `1 day` or `7 days`. */
+  days: (count: number) => string;
+  /** What a screen reader is told while only the start is chosen. */
+  startChosen: (start: string) => string;
+}
+/** Shortcuts for the rail: today back to the start of the year. */
+export declare const defaultDateRangePresets: DateRangePreset[];
+/** Props for {@link DateRangePicker}. */
+export interface DateRangePickerProps extends PickerSharedProps {
+  /** The applied range (controlled). Either end may be `null`. */
+  value?: DateRangePickerValue;
+  /** The range applied at first (uncontrolled). */
+  defaultValue?: DateRangePickerValue;
+  /** Told the range when Apply is pressed; both ends `null` when cleared. */
+  onChange?: (value: DateRangePickerValue) => void;
+  /** Label of the typed start, and the trigger's word for a range with no end. @default "From" */
+  startLabel?: string;
+  /** Label of the typed end, and the trigger's word for a range with no start. @default "To" */
+  endLabel?: string;
+  /** The shortcuts in the rail. @default {@link defaultDateRangePresets} */
+  presets?: DateRangePreset[];
+  /** Two months side by side, one, or whichever fits. @default "auto" */
+  months?: "auto" | 1 | 2;
+  /** The element the panel must stay inside (a function, so it is read when it opens). Defaults to the viewport. */
+  boundary?: () => HTMLElement | null;
+  /** Renames any of the panel's strings. */
+  messages?: Partial<DateRangePickerMessages>;
+}
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<DateRangePickerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion
+//# sourceMappingURL=date-range-picker.d.ts.map