@windmorph/react 0.1.2 → 0.2.0

package/dist/components/time-picker/TimeField.d.ts

@@ -0,0 +1,118 @@
+import { Density } from "../../tokens/density.js";
+import { WrapperRootDOMProps } from "../../utils/root-props.js";
+import { TextFieldClassNames } from "../text-field/TextField.js";
+import { PickerDialogLabels } from "../date-picker/PickerDialog.js";
+import { TimePickerLabels } from "./TimePicker.js";
+import { AriaAttributes, CSSProperties, ReactElement, ReactNode, Ref } from "react";
+import { Time } from "@internationalized/date";
+//#region src/components/time-picker/TimeField.d.ts
+/** Words of a {@link TimeField} and its picker, for localisation. */
+export interface TimeFieldLabels extends TimePickerLabels, PickerDialogLabels {
+  /** The field's placeholder. @default the clock's format, "HH:MM" or "H:MM AM" */
+  timeFormatHint: string;
+  /** Error when the text isn't a time. @default "Enter a time such as {hint}" */
+  invalidTime: string;
+  /** Error for a time before `min` or after `max`. @default "Time out of range" */
+  timeOutOfRange: string;
+  /** The clock icon button. @default "Open time picker" */
+  openPicker: string;
+  /** The picker's title and name. @default "Select time" */
+  title: string;
+  /** The picker's dismissing action. @default "Cancel" */
+  cancel: string;
+  /** The picker's confirming action. @default "OK" */
+  ok: string;
+}
+/** Classes for each part of a {@link TimeField}. */
+export interface TimeFieldClassNames extends Omit<TextFieldClassNames, 'leadingIcon' | 'prefix' | 'suffix' | 'counter'> {
+  /** The text field's root; `className` goes here too. */
+  root?: string;
+  /** The clock icon button. */
+  button?: string;
+  /** The picker dialog's surface. */
+  picker?: string;
+}
+export interface TimeFieldProps extends WrapperRootDOMProps {
+  /** The field's label, e.g. "Opens at". */
+  label: ReactNode;
+  /** The time (controlled); `null` for none. */
+  value?: Time | null;
+  /** Initial time when uncontrolled. @default null */
+  defaultValue?: Time | null;
+  /** A time was typed and committed, or picked and confirmed; `null` when cleared. */
+  onChange?: (value: Time | null) => void;
+  /** Earliest time allowed. */
+  min?: Time;
+  /** Latest time allowed. */
+  max?: Time;
+  /** 12- or 24-hour clock, for the field and the picker. Left out, the locale's. @default the locale's */
+  hourCycle?: 12 | 24;
+  /** The field's style. @default "outlined" */
+  variant?: 'outlined' | 'filled';
+  /** Whether the picker is open (controlled). */
+  open?: boolean;
+  /** Whether the picker starts open when uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called when the picker opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Helper text below the field. */
+  supportingText?: ReactNode;
+  /** Marks the field invalid, with `errorMessage` below it. */
+  invalid?: boolean;
+  /** Error text shown below the field while it's invalid, in place of `supportingText`. */
+  errorMessage?: ReactNode;
+  /** The field must have a time. @default false */
+  required?: boolean;
+  /** The field and its clock button can't be used. @default false */
+  disabled?: boolean;
+  /** The time can be read and focused but not changed. @default false */
+  readOnly?: boolean;
+  /** More description for the `<input>`, after the supporting or error text. */
+  'aria-describedby'?: string;
+  /** The id of an element with more details about the `<input>`. */
+  'aria-details'?: string;
+  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */
+  'aria-invalid'?: AriaAttributes['aria-invalid'];
+  /** Read as `required` when that's left out, for a form library that sets the attribute. */
+  'aria-required'?: AriaAttributes['aria-required'];
+  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */
+  'aria-readonly'?: AriaAttributes['aria-readonly'];
+  /** Form field name; the input submits the time as shown. */
+  name?: string;
+  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */
+  id?: string;
+  /** Icon of the button that opens the picker. */
+  clockIcon?: ReactElement;
+  /**
+   * Web density of the field, `0` to `-3`: each step takes 4px off it (56px at 0, 48px at -2).
+   * The picker keeps its size. Left out, the field takes the nearest theme's.
+   * @default 0
+   */
+  density?: Density;
+  /** Words the field and its picker show and announce, with English defaults. */
+  labels?: Partial<TimeFieldLabels>;
+  /** The text field's root. */
+  ref?: Ref<HTMLDivElement>;
+  /** The `<input>`. */
+  inputRef?: Ref<HTMLInputElement>;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+  /** Classes for each part, by slot. */
+  classNames?: TimeFieldClassNames;
+  /** `data-*` attributes go to the root. */
+  [data: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact
+ * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,
+ * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens
+ * the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.
+ *
+ * @example
+ * <TimeField label="Opens at" value={time} onChange={setTime} />
+ */
+export declare function TimeField(props: TimeFieldProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=TimeField.d.ts.map

package/dist/components/time-picker/TimeField.js

@@ -0,0 +1,183 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { onDemand, usePreloadOnIntent } from "../../utils/load-on-demand.js";
+import { IconButton } from "../icon-button/IconButton.js";
+import { DomDirectionLocale } from "../../primitives/DomDirectionLocale.js";
+import { ariaFlag, pickDescriptionAria, splitRootProps } from "../../utils/root-props.js";
+import { TextField } from "../text-field/TextField.js";
+import { ScheduleIcon } from "../date-picker/picker-icons.js";
+import { localeHourCycle } from "./hour-cycle.js";
+import { formatTime, parseTimeText } from "./time-format.js";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useLocale, useObjectRef } from "react-aria";
+import { useOverlayTriggerState } from "react-stately";
+import { useControlledState } from "react-stately/useControlledState";
+//#region src/components/time-picker/TimeField.tsx
+const pickerDialog = onDemand(() => import("./TimeFieldDialog.js").then((module) => module.TimeFieldDialog));
+const DEFAULT_LABELS = {
+	timeOutOfRange: "Time out of range",
+	openPicker: "Open time picker",
+	title: "Select time",
+	cancel: "Cancel",
+	ok: "OK",
+	close: "Close",
+	save: "Save",
+	hour: "Hour",
+	minute: "Minute",
+	am: "AM",
+	pm: "PM",
+	period: "AM or PM",
+	dial: "Clock",
+	inputMode: "Toggle input picker",
+	dialMode: "Toggle dial picker",
+	dialValue: (value, total, unit) => `${value} ${unit} of ${total}`
+};
+/**
+* A time in a form, for pages that hold many of them, such as a weekly schedule. One compact
+* field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,
+* `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens
+* the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.
+*
+* @example
+* <TimeField label="Opens at" value={time} onChange={setTime} />
+*/
+function TimeField(props) {
+	return /* @__PURE__ */ jsx(DomDirectionLocale, { children: (directionRef) => /* @__PURE__ */ jsx(TimeFieldInner, {
+		...props,
+		directionRef
+	}) });
+}
+function TimeFieldInner({ label, value: valueProp, defaultValue, onChange, min, max, hourCycle: hourCycleProp, variant = "outlined", open, defaultOpen, onOpenChange, supportingText, invalid: invalidProp, errorMessage, required: requiredProp, disabled, readOnly: readOnlyProp, "aria-describedby": describedBy, "aria-details": details, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, "aria-readonly": ariaReadonly, name, id, clockIcon, density, labels: labelsProp, ref, inputRef, className, style, classNames, directionRef, ...rest }) {
+	const { root, rest: aria } = splitRootProps(rest, { wrapper: true });
+	const invalid = invalidProp ?? ariaFlag(ariaInvalid);
+	const required = requiredProp ?? ariaFlag(ariaRequired);
+	const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);
+	const { locale } = useLocale();
+	const hourCycle = hourCycleProp ?? localeHourCycle(locale);
+	const hint = labelsProp?.timeFormatHint ?? (hourCycle === 24 ? "HH:MM" : "H:MM AM");
+	const labels = {
+		...DEFAULT_LABELS,
+		timeFormatHint: hint,
+		invalidTime: `Enter a time such as ${hint}`,
+		...labelsProp
+	};
+	const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);
+	const show = (time) => time ? formatTime(time, locale, hourCycle) : "";
+	const [text, setText] = useState(() => show(value));
+	const [error, setError] = useState(null);
+	const key = `${value?.toString() ?? ""}|${hourCycle}|${locale}`;
+	const [shown, setShown] = useState(key);
+	if (key !== shown) {
+		setShown(key);
+		setText(show(value));
+		setError(null);
+	}
+	const overlay = useOverlayTriggerState({
+		...open !== void 0 && { isOpen: open },
+		...defaultOpen !== void 0 && { defaultOpen },
+		...onOpenChange && { onOpenChange }
+	});
+	const fieldRef = useRef(null);
+	const domInputRef = useObjectRef(inputRef);
+	usePreloadOnIntent(fieldRef, pickerDialog.preload, true);
+	const [opened, setOpened] = useState(overlay.isOpen);
+	if (overlay.isOpen && !opened) setOpened(true);
+	const outOfRange = (time) => min !== void 0 && time.compare(min) < 0 || max !== void 0 && time.compare(max) > 0;
+	const accept = (time) => {
+		if (outOfRange(time)) {
+			setText(show(time));
+			setError(labels.timeOutOfRange);
+			return;
+		}
+		setError(null);
+		setText(show(time));
+		if (time.toString() !== value?.toString()) setValue(time);
+	};
+	const commit = () => {
+		if (text.trim() === "") {
+			setError(null);
+			if (value) setValue(null);
+			return;
+		}
+		if (value && text === show(value)) {
+			setError(null);
+			return;
+		}
+		const time = parseTimeText(text, locale);
+		if (!time) {
+			setError(labels.invalidTime);
+			return;
+		}
+		accept(time);
+	};
+	const { root: rootClassName, button, picker, ...fieldClassNames } = classNames ?? {};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TextField, {
+		...root,
+		...pickDescriptionAria(aria),
+		...describedBy !== void 0 && { "aria-describedby": describedBy },
+		...details !== void 0 && { "aria-details": details },
+		...id !== void 0 && { id },
+		ref: (element) => {
+			fieldRef.current = element;
+			directionRef(element);
+			if (typeof ref === "function") ref(element);
+			else if (ref) ref.current = element;
+		},
+		style,
+		inputRef: domInputRef,
+		variant,
+		...density !== void 0 && { density },
+		label,
+		value: text,
+		onChange: (next) => {
+			setText(next);
+			if (error) setError(null);
+		},
+		onBlur: commit,
+		onKeyDown: (event) => {
+			if (event.key !== "Enter") {
+				event.continuePropagation();
+				return;
+			}
+			commit();
+		},
+		placeholder: hint,
+		supportingText,
+		invalid: invalid || error !== null,
+		errorMessage: error ?? errorMessage,
+		inputMode: hourCycle === 24 ? "decimal" : "text",
+		autoComplete: "off",
+		required,
+		disabled,
+		readOnly,
+		name,
+		className: cn("w-[9.25rem] max-w-full", rootClassName, className),
+		classNames: fieldClassNames,
+		trailingIcon: /* @__PURE__ */ jsx(IconButton, {
+			variant: "standard",
+			icon: clockIcon ?? /* @__PURE__ */ jsx(ScheduleIcon, {}),
+			"aria-label": labels.openPicker,
+			"aria-haspopup": "dialog",
+			"aria-expanded": overlay.isOpen,
+			disabled: disabled || readOnly,
+			className: button,
+			onPress: (event) => {
+				if (event.pointerType !== "touch") domInputRef.current?.focus({ preventScroll: true });
+				overlay.open();
+			}
+		})
+	}), opened ? /* @__PURE__ */ jsx(pickerDialog.Component, {
+		open: overlay.isOpen,
+		onOpenChange: overlay.setOpen,
+		value,
+		onCommit: accept,
+		hourCycle,
+		labels,
+		className: picker
+	}) : null] });
+}
+//#endregion
+export { TimeField };
+
+//# sourceMappingURL=TimeField.js.map

package/dist/components/time-picker/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","names":[],"sources":["../../../src/components/time-picker/TimeField.tsx"],"sourcesContent":["'use client';\n\nimport type { Time } from '@internationalized/date';\nimport {\n  useRef,\n  useState,\n  type AriaAttributes,\n  type CSSProperties,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { useLocale, useObjectRef } from 'react-aria';\nimport { useOverlayTriggerState } from 'react-stately';\nimport { useControlledState } from 'react-stately/useControlledState';\nimport { DomDirectionLocale } from '../../primitives/DomDirectionLocale';\nimport type { Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { onDemand, usePreloadOnIntent } from '../../utils/load-on-demand';\nimport {\n  ariaFlag,\n  pickDescriptionAria,\n  splitRootProps,\n  type WrapperRootDOMProps,\n} from '../../utils/root-props';\nimport { ScheduleIcon } from '../date-picker/picker-icons';\nimport type { PickerDialogLabels } from '../date-picker/PickerDialog';\nimport { IconButton } from '../icon-button/IconButton';\nimport { TextField, type TextFieldClassNames } from '../text-field/TextField';\nimport { localeHourCycle } from './hour-cycle';\nimport { formatTime, parseTimeText } from './time-format';\nimport type { TimeFieldDialogProps } from './TimeFieldDialog';\nimport type { TimePickerLabels } from './TimePicker';\n\n/** Words of a {@link TimeField} and its picker, for localisation. */\nexport interface TimeFieldLabels extends TimePickerLabels, PickerDialogLabels {\n  /** The field's placeholder. @default the clock's format, \"HH:MM\" or \"H:MM AM\" */\n  timeFormatHint: string;\n  /** Error when the text isn't a time. @default \"Enter a time such as {hint}\" */\n  invalidTime: string;\n  /** Error for a time before `min` or after `max`. @default \"Time out of range\" */\n  timeOutOfRange: string;\n  /** The clock icon button. @default \"Open time picker\" */\n  openPicker: string;\n  /** The picker's title and name. @default \"Select time\" */\n  title: string;\n  /** The picker's dismissing action. @default \"Cancel\" */\n  cancel: string;\n  /** The picker's confirming action. @default \"OK\" */\n  ok: string;\n}\n\n/** Classes for each part of a {@link TimeField}. */\nexport interface TimeFieldClassNames extends Omit<\n  TextFieldClassNames,\n  'leadingIcon' | 'prefix' | 'suffix' | 'counter'\n> {\n  /** The text field's root; `className` goes here too. */\n  root?: string;\n  /** The clock icon button. */\n  button?: string;\n  /** The picker dialog's surface. */\n  picker?: string;\n}\n\nexport interface TimeFieldProps extends WrapperRootDOMProps {\n  /** The field's label, e.g. \"Opens at\". */\n  label: ReactNode;\n  /** The time (controlled); `null` for none. */\n  value?: Time | null;\n  /** Initial time when uncontrolled. @default null */\n  defaultValue?: Time | null;\n  /** A time was typed and committed, or picked and confirmed; `null` when cleared. */\n  onChange?: (value: Time | null) => void;\n  /** Earliest time allowed. */\n  min?: Time;\n  /** Latest time allowed. */\n  max?: Time;\n  /** 12- or 24-hour clock, for the field and the picker. Left out, the locale's. @default the locale's */\n  hourCycle?: 12 | 24;\n  /** The field's style. @default \"outlined\" */\n  variant?: 'outlined' | 'filled';\n  /** Whether the picker is open (controlled). */\n  open?: boolean;\n  /** Whether the picker starts open when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Called when the picker opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Helper text below the field. */\n  supportingText?: ReactNode;\n  /** Marks the field invalid, with `errorMessage` below it. */\n  invalid?: boolean;\n  /** Error text shown below the field while it's invalid, in place of `supportingText`. */\n  errorMessage?: ReactNode;\n  /** The field must have a time. @default false */\n  required?: boolean;\n  /** The field and its clock button can't be used. @default false */\n  disabled?: boolean;\n  /** The time can be read and focused but not changed. @default false */\n  readOnly?: boolean;\n  /** More description for the `<input>`, after the supporting or error text. */\n  'aria-describedby'?: string;\n  /** The id of an element with more details about the `<input>`. */\n  'aria-details'?: string;\n  /** Read as `invalid` when that's left out, for a form library that sets the attribute. */\n  'aria-invalid'?: AriaAttributes['aria-invalid'];\n  /** Read as `required` when that's left out, for a form library that sets the attribute. */\n  'aria-required'?: AriaAttributes['aria-required'];\n  /** Read as `readOnly` when that's left out, for a form library that sets the attribute. */\n  'aria-readonly'?: AriaAttributes['aria-readonly'];\n  /** Form field name; the input submits the time as shown. */\n  name?: string;\n  /** The `<input>`'s id, for a `<label for>` or an error summary's link. */\n  id?: string;\n  /** Icon of the button that opens the picker. */\n  clockIcon?: ReactElement;\n  /**\n   * Web density of the field, `0` to `-3`: each step takes 4px off it (56px at 0, 48px at -2).\n   * The picker keeps its size. Left out, the field takes the nearest theme's.\n   * @default 0\n   */\n  density?: Density;\n  /** Words the field and its picker show and announce, with English defaults. */\n  labels?: Partial<TimeFieldLabels>;\n  /** The text field's root. */\n  ref?: Ref<HTMLDivElement>;\n  /** The `<input>`. */\n  inputRef?: Ref<HTMLInputElement>;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /** Classes for each part, by slot. */\n  classNames?: TimeFieldClassNames;\n  /** `data-*` attributes go to the root. */\n  [data: `data-${string}`]: string | number | boolean | undefined;\n}\n\nconst pickerDialog = onDemand<TimeFieldDialogProps>(() =>\n  import('./TimeFieldDialog').then((module) => module.TimeFieldDialog),\n);\n\nconst DEFAULT_LABELS: Omit<TimeFieldLabels, 'timeFormatHint' | 'invalidTime'> = {\n  timeOutOfRange: 'Time out of range',\n  openPicker: 'Open time picker',\n  title: 'Select time',\n  cancel: 'Cancel',\n  ok: 'OK',\n  close: 'Close',\n  save: 'Save',\n  hour: 'Hour',\n  minute: 'Minute',\n  am: 'AM',\n  pm: 'PM',\n  period: 'AM or PM',\n  dial: 'Clock',\n  inputMode: 'Toggle input picker',\n  dialMode: 'Toggle dial picker',\n  dialValue: (value, total, unit) => `${value} ${unit} of ${total}`,\n};\n\n/**\n * A time in a form, for pages that hold many of them, such as a weekly schedule. One compact\n * field with no input mask that reads what people type or paste (`9`, `930`, `9:30`, `9h30`,\n * `21:30`, `9pm`) and shows it in the active format once they leave it; a clock button opens\n * the {@link TimePicker} in a dialog, typed first. The time sibling of `DateField`.\n *\n * @example\n * <TimeField label=\"Opens at\" value={time} onChange={setTime} />\n */\nexport function TimeField(props: TimeFieldProps) {\n  return (\n    <DomDirectionLocale>\n      {(directionRef) => <TimeFieldInner {...props} directionRef={directionRef} />}\n    </DomDirectionLocale>\n  );\n}\n\nfunction TimeFieldInner({\n  label,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  hourCycle: hourCycleProp,\n  variant = 'outlined',\n  open,\n  defaultOpen,\n  onOpenChange,\n  supportingText,\n  invalid: invalidProp,\n  errorMessage,\n  required: requiredProp,\n  disabled,\n  readOnly: readOnlyProp,\n  'aria-describedby': describedBy,\n  'aria-details': details,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  'aria-readonly': ariaReadonly,\n  name,\n  id,\n  clockIcon,\n  density,\n  labels: labelsProp,\n  ref,\n  inputRef,\n  className,\n  style,\n  classNames,\n  directionRef,\n  ...rest\n}: TimeFieldProps & { directionRef: (element: HTMLElement | null) => void }) {\n  const { root, rest: aria } = splitRootProps(rest, { wrapper: true });\n  const invalid = invalidProp ?? ariaFlag(ariaInvalid);\n  const required = requiredProp ?? ariaFlag(ariaRequired);\n  const readOnly = readOnlyProp ?? ariaFlag(ariaReadonly);\n  const { locale } = useLocale();\n  const hourCycle = hourCycleProp ?? localeHourCycle(locale);\n  const hint = labelsProp?.timeFormatHint ?? (hourCycle === 24 ? 'HH:MM' : 'H:MM AM');\n  const labels: TimeFieldLabels = {\n    ...DEFAULT_LABELS,\n    timeFormatHint: hint,\n    invalidTime: `Enter a time such as ${hint}`,\n    ...labelsProp,\n  };\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue ?? null, onChange);\n  const show = (time: Time | null) => (time ? formatTime(time, locale, hourCycle) : '');\n  const [text, setText] = useState(() => show(value));\n  const [error, setError] = useState<string | null>(null);\n  // A new value or clock from outside replaces what is typed.\n  const key = `${value?.toString() ?? ''}|${hourCycle}|${locale}`;\n  const [shown, setShown] = useState(key);\n  if (key !== shown) {\n    setShown(key);\n    setText(show(value));\n    setError(null);\n  }\n\n  const overlay = useOverlayTriggerState({\n    ...(open !== undefined && { isOpen: open }),\n    ...(defaultOpen !== undefined && { defaultOpen }),\n    ...(onOpenChange && { onOpenChange }),\n  });\n  const fieldRef = useRef<HTMLDivElement | null>(null);\n  const domInputRef = useObjectRef(inputRef);\n  usePreloadOnIntent(fieldRef, pickerDialog.preload, true);\n  const [opened, setOpened] = useState(overlay.isOpen);\n  if (overlay.isOpen && !opened) setOpened(true);\n\n  const outOfRange = (time: Time) =>\n    (min !== undefined && time.compare(min) < 0) || (max !== undefined && time.compare(max) > 0);\n\n  const accept = (time: Time) => {\n    if (outOfRange(time)) {\n      setText(show(time));\n      setError(labels.timeOutOfRange);\n      return;\n    }\n    setError(null);\n    setText(show(time));\n    if (time.toString() !== value?.toString()) setValue(time);\n  };\n\n  const commit = () => {\n    if (text.trim() === '') {\n      setError(null);\n      if (value) setValue(null);\n      return;\n    }\n    // Unchanged text needs no reading: it is already this value's format.\n    if (value && text === show(value)) {\n      setError(null);\n      return;\n    }\n    const time = parseTimeText(text, locale);\n    if (!time) {\n      setError(labels.invalidTime);\n      return;\n    }\n    accept(time);\n  };\n\n  const { root: rootClassName, button, picker, ...fieldClassNames } = classNames ?? {};\n  return (\n    <>\n      <TextField\n        {...root}\n        {...pickDescriptionAria(aria)}\n        {...(describedBy !== undefined && { 'aria-describedby': describedBy })}\n        {...(details !== undefined && { 'aria-details': details })}\n        {...(id !== undefined && { id })}\n        ref={(element: HTMLDivElement | null) => {\n          fieldRef.current = element;\n          directionRef(element);\n          if (typeof ref === 'function') ref(element);\n          else if (ref) ref.current = element;\n        }}\n        style={style}\n        inputRef={domInputRef}\n        variant={variant}\n        {...(density !== undefined && { density })}\n        label={label}\n        value={text}\n        onChange={(next: string) => {\n          setText(next);\n          if (error) setError(null);\n        }}\n        onBlur={commit}\n        onKeyDown={(event) => {\n          if (event.key !== 'Enter') {\n            event.continuePropagation();\n            return;\n          }\n          commit();\n        }}\n        placeholder={hint}\n        supportingText={supportingText}\n        invalid={invalid || error !== null}\n        errorMessage={error ?? errorMessage}\n        // A 24-hour time needs only digits and a separator; \"pm\" needs letters.\n        inputMode={hourCycle === 24 ? 'decimal' : 'text'}\n        autoComplete=\"off\"\n        required={required}\n        disabled={disabled}\n        readOnly={readOnly}\n        name={name}\n        className={cn('w-[9.25rem] max-w-full', rootClassName, className)}\n        classNames={fieldClassNames}\n        trailingIcon={\n          <IconButton\n            variant=\"standard\"\n            icon={clockIcon ?? <ScheduleIcon />}\n            aria-label={labels.openPicker}\n            aria-haspopup=\"dialog\"\n            aria-expanded={overlay.isOpen}\n            disabled={disabled || readOnly}\n            className={button}\n            onPress={(event) => {\n              // Focus returns to where it was when the dialog opened: the text box, except\n              // after a touch, where focusing it would raise the on-screen keyboard.\n              if (event.pointerType !== 'touch') {\n                domInputRef.current?.focus({ preventScroll: true });\n              }\n              overlay.open();\n            }}\n          />\n        }\n      />\n      {opened ? (\n        <pickerDialog.Component\n          open={overlay.isOpen}\n          onOpenChange={overlay.setOpen}\n          value={value}\n          onCommit={accept}\n          hourCycle={hourCycle}\n          labels={labels}\n          className={picker}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/time-picker/TimeFieldDialog.js

@@ -0,0 +1,70 @@
+"use client";
+import { Button } from "../button/Button.js";
+import { PickerDialog } from "../date-picker/PickerDialog.js";
+import { TimePicker, TimePickerModeToggle } from "./TimePicker.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Time } from "@internationalized/date";
+//#region src/components/time-picker/TimeFieldDialog.tsx
+/**
+* A {@link TimeField}'s picker: the time picker in its typed form first, in a dialog, editing a
+* draft that OK keeps and Cancel drops. `TimeField` loads this module with `import()` as it is
+* first needed, so a form of many fields carries none of it.
+*/
+function TimeFieldDialog({ open, onOpenChange, value, onCommit, hourCycle, labels, className }) {
+	const [draft, setDraft] = useState(value ?? new Time(12));
+	const [mode, setMode] = useState("input");
+	const [wasOpen, setWasOpen] = useState(open);
+	if (open !== wasOpen) {
+		setWasOpen(open);
+		if (open) {
+			setDraft(value ?? new Time(12));
+			setMode("input");
+		}
+	}
+	const confirm = () => {
+		onCommit(draft);
+		onOpenChange(false);
+	};
+	return /* @__PURE__ */ jsx(PickerDialog, {
+		"aria-label": labels.title,
+		variant: "time",
+		title: labels.title,
+		open,
+		onOpenChange,
+		onConfirm: confirm,
+		fullScreen: "compact",
+		labels: {
+			close: labels.close,
+			save: labels.save
+		},
+		classNames: className === void 0 ? {} : { panel: className },
+		modeToggleButton: /* @__PURE__ */ jsx(TimePickerModeToggle, {
+			mode,
+			onModeChange: setMode,
+			labels
+		}),
+		dismissButton: /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			onPress: () => onOpenChange(false),
+			children: labels.cancel
+		}),
+		confirmButton: /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			onPress: confirm,
+			children: labels.ok
+		}),
+		children: /* @__PURE__ */ jsx(TimePicker, {
+			value: draft,
+			onChange: setDraft,
+			mode,
+			onModeChange: setMode,
+			hourCycle,
+			labels
+		})
+	});
+}
+//#endregion
+export { TimeFieldDialog };
+
+//# sourceMappingURL=TimeFieldDialog.js.map

package/dist/components/time-picker/TimeFieldDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldDialog.js","names":[],"sources":["../../../src/components/time-picker/TimeFieldDialog.tsx"],"sourcesContent":["'use client';\n\nimport { Time } from '@internationalized/date';\nimport { useState } from 'react';\nimport { Button } from '../button/Button';\nimport { PickerDialog } from '../date-picker/PickerDialog';\nimport type { TimeFieldLabels } from './TimeField';\nimport { TimePicker, TimePickerModeToggle, type TimePickerMode } from './TimePicker';\n\n/** Props of a {@link TimeFieldDialog}. */\nexport interface TimeFieldDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  value: Time | null;\n  onCommit: (time: Time) => void;\n  hourCycle: 12 | 24;\n  labels: TimeFieldLabels;\n  className: string | undefined;\n}\n\n/**\n * A {@link TimeField}'s picker: the time picker in its typed form first, in a dialog, editing a\n * draft that OK keeps and Cancel drops. `TimeField` loads this module with `import()` as it is\n * first needed, so a form of many fields carries none of it.\n */\nexport function TimeFieldDialog({\n  open,\n  onOpenChange,\n  value,\n  onCommit,\n  hourCycle,\n  labels,\n  className,\n}: TimeFieldDialogProps) {\n  const [draft, setDraft] = useState(value ?? new Time(12));\n  const [mode, setMode] = useState<TimePickerMode>('input');\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (open) {\n      setDraft(value ?? new Time(12));\n      setMode('input');\n    }\n  }\n  const confirm = () => {\n    onCommit(draft);\n    onOpenChange(false);\n  };\n  return (\n    <PickerDialog\n      aria-label={labels.title}\n      variant=\"time\"\n      title={labels.title}\n      open={open}\n      onOpenChange={onOpenChange}\n      onConfirm={confirm}\n      fullScreen=\"compact\"\n      labels={{ close: labels.close, save: labels.save }}\n      classNames={className === undefined ? {} : { panel: className }}\n      modeToggleButton={<TimePickerModeToggle mode={mode} onModeChange={setMode} labels={labels} />}\n      dismissButton={\n        <Button variant=\"text\" onPress={() => onOpenChange(false)}>\n          {labels.cancel}\n        </Button>\n      }\n      confirmButton={\n        <Button variant=\"text\" onPress={confirm}>\n          {labels.ok}\n        </Button>\n      }\n    >\n      <TimePicker\n        value={draft}\n        onChange={setDraft}\n        mode={mode}\n        onModeChange={setMode}\n        hourCycle={hourCycle}\n        labels={labels}\n      />\n    </PickerDialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,gBAAgB,EAC9B,MACA,cACA,OACA,UACA,WACA,QACA,aACuB;CACvB,MAAM,CAAC,OAAO,YAAY,SAAS,SAAS,IAAI,KAAK,EAAE,CAAC;CACxD,MAAM,CAAC,MAAM,WAAW,SAAyB,OAAO;CACxD,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,IAAI,SAAS,SAAS;EACpB,WAAW,IAAI;EACf,IAAI,MAAM;GACR,SAAS,SAAS,IAAI,KAAK,EAAE,CAAC;GAC9B,QAAQ,OAAO;EACjB;CACF;CACA,MAAM,gBAAgB;EACpB,SAAS,KAAK;EACd,aAAa,KAAK;CACpB;CACA,OACE,oBAAC,cAAD;EACE,cAAY,OAAO;EACnB,SAAQ;EACR,OAAO,OAAO;EACR;EACQ;EACd,WAAW;EACX,YAAW;EACX,QAAQ;GAAE,OAAO,OAAO;GAAO,MAAM,OAAO;EAAK;EACjD,YAAY,cAAc,KAAA,IAAY,CAAC,IAAI,EAAE,OAAO,UAAU;EAC9D,kBAAkB,oBAAC,sBAAD;GAA4B;GAAM,cAAc;GAAiB;EAAS,CAAA;EAC5F,eACE,oBAAC,QAAD;GAAQ,SAAQ;GAAO,eAAe,aAAa,KAAK;GACrD,UAAA,OAAO;EACF,CAAA;EAEV,eACE,oBAAC,QAAD;GAAQ,SAAQ;GAAO,SAAS;GAC7B,UAAA,OAAO;EACF,CAAA;EAGV,UAAA,oBAAC,YAAD;GACE,OAAO;GACP,UAAU;GACJ;GACN,cAAc;GACH;GACH;EACT,CAAA;CACW,CAAA;AAElB"}

package/dist/components/time-picker/TimePicker.js

@@ -8,6 +8,7 @@ import { IconButton } from "../icon-button/IconButton.js";
 import { splitRootProps } from "../../utils/root-props.js";
 import { useMediaQuery } from "../date-picker/use-media-query.js";
 import { KeyboardIcon, ScheduleIcon } from "../date-picker/picker-icons.js";
+import { localeHourCycle } from "./hour-cycle.js";
 import { timePickerStyles } from "./time-picker-styles.js";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -33,10 +34,6 @@ function useTimePickerRoom() {
 	const short = useMediaQuery(SHORT_WINDOW);
 	return useMediaQuery(NO_ROOM_FOR_DIAL) ? "none" : short ? "horizontal" : "vertical";
 }
-function localeHourCycle(locale) {
-	const cycle = new Intl.DateTimeFormat(locale, { hour: "numeric" }).resolvedOptions().hourCycle;
-	return cycle === "h11" || cycle === "h12" ? 12 : 24;
-}
 const defaultDialValue = (value, total, unit) => `${value} ${unit} of ${total}`;
 /**
 * M3 time picker (Compose's `TimePicker` and `TimeInput`): hour and minute selectors you