@kanso-labs/react-native-kanso-ui 0.8.0 → 0.10.0

package/dist/components/text-area/index.js

@@ -0,0 +1,231 @@
+import { useLocaleOf } from "../../i18n/provider.js";
+import { useFieldValidation } from "../../form/index.js";
+import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/text-area/index.tsx
+function blurThen(onBlur, then) {
+	return (event) => {
+		onBlur();
+		then?.(event);
+	};
+}
+function editInto(setOwn, onChange, onEdit) {
+	return (text) => {
+		setOwn(text);
+		onEdit();
+		onChange?.(text);
+	};
+}
+/**
+* A labelled multi-line input, the text fields page's filled or outlined
+* field holding several lines. Pass `value` with `onChange` to control it, or
+* `defaultValue` to let it keep its own; `onChange` is handed the string.
+*
+* It shows `rows` lines at the least and grows with what it holds, or holds
+* at `rows` and scrolls with `autosize={false}`. The page's configurations
+* are props: `leadingIcon` and `trailingIcon` at the box's ends, and
+* `characterCount` opposite the supporting text, counting against
+* `maxLength`. React Native's own `TextInput` props reach the control;
+* `style` and `ref` are the field as a whole, and `inputRef` the control.
+*
+* ```tsx
+* <TextArea label="Label" description="Supporting line" />
+* ```
+*/
+function TextArea(t0) {
+	const $ = c(59);
+	const { autosize: t1, characterCount: t2, characterLimitLabel, defaultValue: t3, description, error, floatingLabel: t4, inputRef, isDisabled: t5, isReadOnly: t6, isRequired: t7, label, leadingIcon, name, onBlur, onChange, onFocus, ref, rows: t8, style, trailingIcon, validate, value, variant: t9, ...props } = t0;
+	const autosize = t1 === void 0 ? true : t1;
+	const characterCount = t2 === void 0 ? false : t2;
+	const defaultValue = t3 === void 0 ? "" : t3;
+	const floatingLabel = t4 === void 0 ? true : t4;
+	const isDisabled = t5 === void 0 ? false : t5;
+	const isReadOnly = t6 === void 0 ? false : t6;
+	const isRequired = t7 === void 0 ? false : t7;
+	const rows = t8 === void 0 ? 3 : t8;
+	const variant = t9 === void 0 ? "filled" : t9;
+	const id = useId();
+	const control = useRef(null);
+	const [own, setOwn] = useState(defaultValue);
+	const current = value ?? own;
+	const t10 = current === "";
+	let t11;
+	if ($[0] !== current || $[1] !== error || $[2] !== isDisabled || $[3] !== isReadOnly || $[4] !== isRequired || $[5] !== name || $[6] !== t10 || $[7] !== validate) {
+		t11 = {
+			control,
+			error,
+			isDisabled,
+			isEmpty: t10,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted: current,
+			validate,
+			value: current
+		};
+		$[0] = current;
+		$[1] = error;
+		$[2] = isDisabled;
+		$[3] = isReadOnly;
+		$[4] = isRequired;
+		$[5] = name;
+		$[6] = t10;
+		$[7] = validate;
+		$[8] = t11;
+	} else t11 = $[8];
+	const validation = useFieldValidation(t11);
+	let t12;
+	if ($[9] !== onBlur || $[10] !== validation.onBlur) {
+		t12 = blurThen(validation.onBlur, onBlur);
+		$[9] = onBlur;
+		$[10] = validation.onBlur;
+		$[11] = t12;
+	} else t12 = $[11];
+	let t13;
+	if ($[12] !== onFocus || $[13] !== t12) {
+		t13 = {
+			onBlur: t12,
+			onFocus
+		};
+		$[12] = onFocus;
+		$[13] = t12;
+		$[14] = t13;
+	} else t13 = $[14];
+	const focus = useFieldFocus(t13);
+	const shownError = validation.error;
+	const locale = useLocaleOf(void 0);
+	let t14;
+	let t15;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => control.current;
+		t15 = [];
+		$[15] = t14;
+		$[16] = t15;
+	} else {
+		t14 = $[15];
+		t15 = $[16];
+	}
+	useImperativeHandle(inputRef, t14, t15);
+	const T0 = View;
+	const T1 = FieldBox;
+	const t16 = focus.focused;
+	const t17 = shownError !== void 0;
+	const t18 = current !== "";
+	const T2 = FieldInput;
+	const t19 = focus.handlers;
+	const t20 = describedBy(id, {
+		characterLimitLabel,
+		description,
+		error: shownError,
+		locale,
+		maxLength: props.maxLength
+	});
+	const t21 = !isDisabled && !isReadOnly;
+	let t22;
+	if ($[17] !== onChange || $[18] !== setOwn || $[19] !== validation.onEdit) {
+		t22 = editInto(setOwn, onChange, validation.onEdit);
+		$[17] = onChange;
+		$[18] = setOwn;
+		$[19] = validation.onEdit;
+		$[20] = t22;
+	} else t22 = $[20];
+	let t23;
+	if ($[21] !== T2 || $[22] !== autosize || $[23] !== current || $[24] !== focus.handlers || $[25] !== label || $[26] !== props || $[27] !== rows || $[28] !== t20 || $[29] !== t21 || $[30] !== t22) {
+		t23 = /* @__PURE__ */ jsx(T2, {
+			...props,
+			...t19,
+			"aria-label": label,
+			autosize,
+			described: t20,
+			editable: t21,
+			multiline: true,
+			onChangeText: t22,
+			ref: control,
+			rows,
+			value: current
+		});
+		$[21] = T2;
+		$[22] = autosize;
+		$[23] = current;
+		$[24] = focus.handlers;
+		$[25] = label;
+		$[26] = props;
+		$[27] = rows;
+		$[28] = t20;
+		$[29] = t21;
+		$[30] = t22;
+		$[31] = t23;
+	} else t23 = $[31];
+	let t24;
+	if ($[32] !== T1 || $[33] !== floatingLabel || $[34] !== focus.focused || $[35] !== isDisabled || $[36] !== isRequired || $[37] !== label || $[38] !== leadingIcon || $[39] !== t17 || $[40] !== t18 || $[41] !== t23 || $[42] !== trailingIcon || $[43] !== variant) {
+		t24 = /* @__PURE__ */ jsx(T1, {
+			control,
+			floatingLabel,
+			isDisabled,
+			isFocused: t16,
+			isInvalid: t17,
+			isPopulated: t18,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: t23
+		});
+		$[32] = T1;
+		$[33] = floatingLabel;
+		$[34] = focus.focused;
+		$[35] = isDisabled;
+		$[36] = isRequired;
+		$[37] = label;
+		$[38] = leadingIcon;
+		$[39] = t17;
+		$[40] = t18;
+		$[41] = t23;
+		$[42] = trailingIcon;
+		$[43] = variant;
+		$[44] = t24;
+	} else t24 = $[44];
+	let t25;
+	if ($[45] !== characterCount || $[46] !== characterLimitLabel || $[47] !== current.length || $[48] !== description || $[49] !== id || $[50] !== props.maxLength || $[51] !== shownError) {
+		t25 = /* @__PURE__ */ jsx(FieldMessage, {
+			characterCount,
+			characterLimitLabel,
+			description,
+			error: shownError,
+			id,
+			length: current.length,
+			maxLength: props.maxLength
+		});
+		$[45] = characterCount;
+		$[46] = characterLimitLabel;
+		$[47] = current.length;
+		$[48] = description;
+		$[49] = id;
+		$[50] = props.maxLength;
+		$[51] = shownError;
+		$[52] = t25;
+	} else t25 = $[52];
+	let t26;
+	if ($[53] !== T0 || $[54] !== ref || $[55] !== style || $[56] !== t24 || $[57] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [t24, t25]
+		});
+		$[53] = T0;
+		$[54] = ref;
+		$[55] = style;
+		$[56] = t24;
+		$[57] = t25;
+		$[58] = t26;
+	} else t26 = $[58];
+	return t26;
+}
+//#endregion
+export { TextArea };
+
+//# sourceMappingURL=index.js.map

package/dist/components/text-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextInput","TextInputProps","ViewStyle","useId","useImperativeHandle","useRef","useState","View","FieldVariant","ValidationResult","describedBy","FieldBox","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","useLocaleOf","TextAreaProps","Omit","autosize","characterCount","characterLimitLabel","defaultValue","description","error","floatingLabel","inputRef","isDisabled","isReadOnly","isRequired","label","leadingIcon","name","onChange","value","ref","rows","style","trailingIcon","validate","variant","blurThen","onBlur","then","event","editInto","setOwn","onEdit","text","TextArea","t0","$","_c","t1","t2","t3","t4","t5","t6","t7","onFocus","t8","t9","props","undefined","id","control","own","current","t10","t11","isEmpty","submitted","validation","t12","t13","focus","shownError","locale","t14","t15","Symbol","for","T0","T1","t16","focused","t17","t18","T2","t19","handlers","t20","maxLength","t21","t22","t23","t24","t25","length","t26","_c"],"sources":["../../../src/components/text-area/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  StyleProp,\n  TextInput,\n  TextInputProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport { View } from 'react-native'\n\nimport type { FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\n\nimport {\n  describedBy,\n  FieldBox,\n  FieldInput,\n  FieldMessage,\n  useFieldFocus,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { useLocaleOf } from '../../i18n/provider'\n\n// kanso-ui's TextArea, the text fields page's multi-line configuration of the\n// field: the same box, floating label, icons, rule and supporting line as\n// TextField, drawn through the field chrome in src/field, around a control\n// that holds several lines. The page gives the box 56dp at the least, with\n// 8dp above and below the text and the label resting on its first line; a box\n// holding more grows a line at a time, which the chrome's height floor\n// already does, and its icons stay centred in its height, as web's do. The\n// page draws no resize handle, and React Native draws none.\n//\n// Its own component rather than a prop of TextField, as on web, so `rows` and\n// `autosize` stay off TextField's type and `numeric`, `prefix` and `suffix`\n// off this one.\n//\n// The value is the field's own or the call site's, as TextField's is, and\n// `onChange` is handed the string. The error shown is `error`, or what the\n// field's `validate` and the `Form` around it say, which src/form decides.\n\ntype TextAreaProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholder'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'rows'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * Whether the field grows with the text it holds, from `rows` up. `false`\n   * keeps it at `rows` and scrolls the text inside.\n   * @default true\n   */\n  readonly autosize?: boolean\n  /**\n   * Counts the characters the field holds at the end of the supporting line,\n   * against `maxLength` where there is one, as the text fields page's\n   * character counter does. The count is written in the digits of the\n   * `I18nProvider`'s locale, or the device's outside one.\n   * @default false\n   */\n  readonly characterCount?: boolean\n  /**\n   * How the limit is said to a screen reader, where there is a `maxLength`.\n   * Read with the field rather than as the value changes, so it names the\n   * limit and not what is left of it; the visible count is hidden from\n   * screen readers, which is what this replaces. Left out, it is the\n   * library's sentence in the `I18nProvider`'s locale, or the device's\n   * outside one, in the plural form the limit takes there: \"Up to 20\n   * characters\" in English, singular for a limit of one.\n   */\n  readonly characterLimitLabel?: string\n  /** The value the field opens with, when it keeps its own. */\n  readonly defaultValue?: string\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to, after a server's error, say. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a text area with no label is a box nobody can name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the text: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by.\n   */\n  readonly name?: string\n  /** Called with the new value as it is edited. */\n  readonly onChange?: (value: string) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * How many lines of text the field shows: the least it shows while it\n   * grows, or all it shows when it does not.\n   * @default 3\n   */\n  readonly rows?: number\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * An icon at the end of the box, after the text: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an\n   * error. The slot hands it that colour and size through `useIconStyle()`.\n   */\n  readonly trailingIcon?: ReactNode\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once the field loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: string) => ValidationResult\n  /** The value, when the call site keeps it. */\n  readonly value?: string\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats, the text fields page's two fields.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Keeps an edit as the field's own value and reports it, so a field the call\n// site controls is told and one it does not still shows what was typed, and\n// tells the field's validation it was edited.\nfunction editInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    setOwn(text)\n    onEdit()\n    onChange?.(text)\n  }\n}\n\n/**\n * A labelled multi-line input, the text fields page's filled or outlined\n * field holding several lines. Pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own; `onChange` is handed the string.\n *\n * It shows `rows` lines at the least and grows with what it holds, or holds\n * at `rows` and scrolls with `autosize={false}`. The page's configurations\n * are props: `leadingIcon` and `trailingIcon` at the box's ends, and\n * `characterCount` opposite the supporting text, counting against\n * `maxLength`. React Native's own `TextInput` props reach the control;\n * `style` and `ref` are the field as a whole, and `inputRef` the control.\n *\n * ```tsx\n * <TextArea label=\"Label\" description=\"Supporting line\" />\n * ```\n */\nfunction TextArea({\n  autosize = true,\n  characterCount = false,\n  characterLimitLabel,\n  defaultValue = '',\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  leadingIcon,\n  name,\n  onBlur,\n  onChange,\n  onFocus,\n  ref,\n  rows = 3,\n  style,\n  trailingIcon,\n  validate,\n  value,\n  variant = 'filled',\n  ...props\n}: TextAreaProps) {\n  const id = useId()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const [own, setOwn] = useState(defaultValue)\n  const current = value ?? own\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: current === '',\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: current,\n    validate,\n    value: current,\n  })\n  const focus = useFieldFocus({\n    onBlur: blurThen(validation.onBlur, onBlur),\n    onFocus,\n  })\n  const shownError = validation.error\n  const locale = useLocaleOf(undefined)\n\n  useImperativeHandle<\n    ComponentRef<typeof TextInput> | null,\n    ComponentRef<typeof TextInput> | null\n  >(inputRef, () => control.current, [])\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isPopulated={current !== ''}\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        trailing={trailingIcon}\n        variant={variant}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          autosize={autosize}\n          described={describedBy(id, {\n            characterLimitLabel,\n            description,\n            error: shownError,\n            locale,\n            maxLength: props.maxLength,\n          })}\n          editable={!isDisabled && !isReadOnly}\n          multiline\n          onChangeText={editInto(setOwn, onChange, validation.onEdit)}\n          ref={control}\n          rows={rows}\n          value={current}\n        />\n      </FieldBox>\n      <FieldMessage\n        characterCount={characterCount}\n        characterLimitLabel={characterLimitLabel}\n        description={description}\n        error={shownError}\n        id={id}\n        length={current.length}\n        maxLength={props.maxLength}\n      />\n    </View>\n  )\n}\n\nexport { TextArea }\nexport type { TextAreaProps }\n"],"mappings":"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"}

package/dist/components/time-field/index.d.ts

@@ -0,0 +1,43 @@
+import { DateFieldProps } from "../date-field/index.js";
+import { TimeFieldStateOptions, TimeValue } from "react-stately/useTimeFieldState";
+//#region src/components/time-field/index.d.ts
+type TimeFieldProps<T extends TimeValue = TimeValue> = Omit<DateFieldProps, 'defaultValue' | 'granularity' | 'hideTimeZone' | 'hourCycle' | 'isDateUnavailable' | 'locale' | 'maxValue' | 'minValue' | 'name' | 'onChange' | 'placeholderValue' | 'shouldForceLeadingZeros' | 'validate' | 'value'> & Pick<TimeFieldStateOptions<T>, 'defaultValue' | 'granularity' | 'hideTimeZone' | 'hourCycle' | 'maxValue' | 'minValue' | 'onChange' | 'placeholderValue' | 'shouldForceLeadingZeros' | 'validate' | 'value'> & {
+  /**
+   * The BCP 47 locale the time is written and typed in: whether it has a
+   * day period and what that is called, its placeholders and its digits.
+   * Defaults to the `I18nProvider`'s, or the device's outside one.
+   */
+  readonly locale?: string;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by. The form submits
+   * the time written out as ISO 8601, such as `09:30:00`, and `''` for an
+   * empty field.
+   */
+  readonly name?: string;
+};
+/**
+ * A time typed rather than picked: one segment per part, typed into a digit
+ * at a time. The value is an `@internationalized/date` `Time`, as on web:
+ * pass `value` with `onChange` to control it, or `defaultValue` to let it
+ * keep its own.
+ *
+ * ```tsx
+ * import { Time } from '@internationalized/date'
+ *
+ * <TimeField defaultValue={new Time(9, 30)} label="Label" />
+ * ```
+ *
+ * Whether it shows a twelve or twenty-four hour clock is the locale's,
+ * through the `I18nProvider`. `granularity` takes it down to seconds or up
+ * to hours, and `minValue` and `maxValue` bound what may be typed, an error
+ * under the field saying so in React Aria's words where a time is outside
+ * them.
+ *
+ * The segments, the box, the label and the message are DateField's.
+ * `style`, `ref` and `testID` land on the field as a whole.
+ */
+declare function TimeField<T extends TimeValue = TimeValue>({ isDisabled, isReadOnly, isRequired, locale, ...props }: TimeFieldProps<T>): import("react").JSX.Element;
+//#endregion
+export { TimeField, type TimeFieldProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.js

@@ -0,0 +1,107 @@
+import { useLocaleOf } from "../../i18n/provider.js";
+import { SegmentedField } from "../../segments/field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useTimeFieldState } from "react-stately/useTimeFieldState";
+//#region src/components/time-field/index.tsx
+/**
+* A time typed rather than picked: one segment per part, typed into a digit
+* at a time. The value is an `@internationalized/date` `Time`, as on web:
+* pass `value` with `onChange` to control it, or `defaultValue` to let it
+* keep its own.
+*
+* ```tsx
+* import { Time } from '@internationalized/date'
+*
+* <TimeField defaultValue={new Time(9, 30)} label="Label" />
+* ```
+*
+* Whether it shows a twelve or twenty-four hour clock is the locale's,
+* through the `I18nProvider`. `granularity` takes it down to seconds or up
+* to hours, and `minValue` and `maxValue` bound what may be typed, an error
+* under the field saying so in React Aria's words where a time is outside
+* them.
+*
+* The segments, the box, the label and the message are DateField's.
+* `style`, `ref` and `testID` land on the field as a whole.
+*/
+function TimeField(t0) {
+	const $ = c(24);
+	let locale;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({isDisabled: t1, isReadOnly: t2, isRequired: t3, locale, ...props} = t0);
+		$[0] = t0;
+		$[1] = locale;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		locale = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isReadOnly = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const writtenIn = useLocaleOf(locale);
+	let t4;
+	if ($[6] !== isDisabled || $[7] !== isReadOnly || $[8] !== isRequired || $[9] !== props || $[10] !== writtenIn) {
+		t4 = {
+			...props,
+			isDisabled,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn
+		};
+		$[6] = isDisabled;
+		$[7] = isReadOnly;
+		$[8] = isRequired;
+		$[9] = props;
+		$[10] = writtenIn;
+		$[11] = t4;
+	} else t4 = $[11];
+	const state = useTimeFieldState(t4);
+	const t5 = state.value === null;
+	let t6;
+	if ($[12] !== state.timeValue || $[13] !== state.value) {
+		t6 = state.value === null ? "" : state.timeValue.toString();
+		$[12] = state.timeValue;
+		$[13] = state.value;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== isDisabled || $[16] !== isReadOnly || $[17] !== isRequired || $[18] !== props || $[19] !== state || $[20] !== t5 || $[21] !== t6 || $[22] !== writtenIn) {
+		t7 = /* @__PURE__ */ jsx(SegmentedField, {
+			...props,
+			errors: state.realtimeValidation.validationErrors,
+			isDisabled,
+			isEmpty: t5,
+			isReadOnly,
+			isRequired,
+			locale: writtenIn,
+			state,
+			submitted: t6
+		});
+		$[15] = isDisabled;
+		$[16] = isReadOnly;
+		$[17] = isRequired;
+		$[18] = props;
+		$[19] = state;
+		$[20] = t5;
+		$[21] = t6;
+		$[22] = writtenIn;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+}
+//#endregion
+export { TimeField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/time-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TimeFieldStateOptions","TimeValue","useTimeFieldState","DateFieldProps","useLocaleOf","SegmentedField","TimeFieldProps","Omit","Pick","T","locale","name","TimeField","t0","$","_c","props","t1","t2","t3","isDisabled","isReadOnly","isRequired","undefined","writtenIn","t4","state","t5","value","t6","timeValue","toString","t7","realtimeValidation","validationErrors","_c"],"sources":["../../../src/components/time-field/index.tsx"],"sourcesContent":["import type {\n  TimeFieldStateOptions,\n  TimeValue,\n} from 'react-stately/useTimeFieldState'\n\nimport { useTimeFieldState } from 'react-stately/useTimeFieldState'\n\nimport type { DateFieldProps } from '../date-field'\n\nimport { useLocaleOf } from '../../i18n/provider'\nimport { SegmentedField } from '../../segments/field'\n\n// kanso-ui's TimeField: a time typed a segment at a time. Every part of it is\n// DateField's, from src/segments, the segments, the muted placeholders, the\n// filled focus and the punctuation between them, and the box around them, so\n// a time on a form and a date on the same form cannot come apart.\n//\n// What differs is the value it holds and nothing else. The time pickers page\n// gives its input the text field's own box, which is what the shared field\n// chrome already draws, so there is no measurement here that DateField's\n// comment does not already name.\n//\n// **Twelve or twenty-four hours is the locale's.** React Stately decides from\n// the locale whether there is a day-period segment at all, so a field under\n// `en-GB` shows a 24-hour clock and the same field under `en-US` shows AM and\n// PM, in the locale's own words for the two. `hourCycle` is React Stately's\n// own, for a screen that has to set the clock whatever the locale.\n\ntype TimeFieldProps<T extends TimeValue = TimeValue> = Omit<\n  DateFieldProps,\n  | 'defaultValue'\n  | 'granularity'\n  | 'hideTimeZone'\n  | 'hourCycle'\n  | 'isDateUnavailable'\n  | 'locale'\n  | 'maxValue'\n  | 'minValue'\n  | 'name'\n  | 'onChange'\n  | 'placeholderValue'\n  | 'shouldForceLeadingZeros'\n  | 'validate'\n  | 'value'\n> &\n  Pick<\n    TimeFieldStateOptions<T>,\n    | 'defaultValue'\n    | 'granularity'\n    | 'hideTimeZone'\n    | 'hourCycle'\n    | 'maxValue'\n    | 'minValue'\n    | 'onChange'\n    | 'placeholderValue'\n    | 'shouldForceLeadingZeros'\n    | 'validate'\n    | 'value'\n  > & {\n    /**\n     * The BCP 47 locale the time is written and typed in: whether it has a\n     * day period and what that is called, its placeholders and its digits.\n     * Defaults to the `I18nProvider`'s, or the device's outside one.\n     */\n    readonly locale?: string\n    /**\n     * The name the value is submitted under by the `Form` around the field,\n     * and the key its `validationErrors` reach the field by. The form submits\n     * the time written out as ISO 8601, such as `09:30:00`, and `''` for an\n     * empty field.\n     */\n    readonly name?: string\n  }\n\n/**\n * A time typed rather than picked: one segment per part, typed into a digit\n * at a time. The value is an `@internationalized/date` `Time`, as on web:\n * pass `value` with `onChange` to control it, or `defaultValue` to let it\n * keep its own.\n *\n * ```tsx\n * import { Time } from '@internationalized/date'\n *\n * <TimeField defaultValue={new Time(9, 30)} label=\"Label\" />\n * ```\n *\n * Whether it shows a twelve or twenty-four hour clock is the locale's,\n * through the `I18nProvider`. `granularity` takes it down to seconds or up\n * to hours, and `minValue` and `maxValue` bound what may be typed, an error\n * under the field saying so in React Aria's words where a time is outside\n * them.\n *\n * The segments, the box, the label and the message are DateField's.\n * `style`, `ref` and `testID` land on the field as a whole.\n */\nfunction TimeField<T extends TimeValue = TimeValue>({\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  locale,\n  ...props\n}: TimeFieldProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const state = useTimeFieldState<T>({\n    ...props,\n    isDisabled,\n    isReadOnly,\n    isRequired,\n    locale: writtenIn,\n  })\n\n  return (\n    <SegmentedField\n      {...props}\n      errors={state.realtimeValidation.validationErrors}\n      isDisabled={isDisabled}\n      isEmpty={state.value === null}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      locale={writtenIn}\n      state={state}\n      // The time alone, as web's field submits it, rather than the date and\n      // time React Stately keeps it as underneath.\n      submitted={state.value === null ? '' : state.timeValue.toString()}\n    />\n  )\n}\n\nexport type { TimeFieldProps }\n\nexport { TimeField }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA,SAAAY,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAL;CAAA,IAAAM;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAoD,CAAA,CAAAO,YAAAH,IAAAI,YAAAH,IAAAI,YAAAH,IAAAT,QAAA,GAAAM,SAAAH;EAMhCC,EAAA,KAAAD;EAAAC,EAAA,KAAAJ;EAAAI,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAT,SAAAI,EAAA;EAAAE,QAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CALlB,MAAAM,aAAAH,OAAAM,KAAAA,IAAA,QAAAN;CACA,MAAAI,aAAAH,OAAAK,KAAAA,IAAA,QAAAL;CACA,MAAAI,aAAAH,OAAAI,KAAAA,IAAA,QAAAJ;CAIA,MAAAK,YAAkBpB,YAAYM,MAAM;CAAC,IAAAe;CAAA,IAAAX,EAAA,OAAAM,cAAAN,EAAA,OAAAO,cAAAP,EAAA,OAAAQ,cAAAR,EAAA,OAAAE,SAAAF,EAAA,QAAAU,WAAA;EACFC,KAAA;GAAA,GAC9BT;GAAKI;GAAAC;GAAAC;GAAAZ,QAIAc;EACV;EAACV,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAE;EAAAF,EAAA,MAAAU;EAAAV,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAND,MAAAY,QAAcxB,kBAAqBuB,EAMlC;CAOY,MAAAE,KAAAD,MAAKE,UAAW;CAAI,IAAAC;CAAA,IAAAf,EAAA,QAAAY,MAAAI,aAAAhB,EAAA,QAAAY,MAAAE,OAAA;EAOlBC,KAAAH,MAAKE,UAAW,OAAhB,KAA4BF,MAAKI,UAAUC,SAAU;EAACjB,EAAA,MAAAY,MAAAI;EAAAhB,EAAA,MAAAY,MAAAE;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAAM,cAAAN,EAAA,QAAAO,cAAAP,EAAA,QAAAQ,cAAAR,EAAA,QAAAE,SAAAF,EAAA,QAAAY,SAAAZ,EAAA,QAAAa,MAAAb,EAAA,QAAAe,MAAAf,EAAA,QAAAU,WAAA;EAXnEQ,KAAA,oBAAC,gBAAD;GAAe,GACThB;GACI,QAAAU,MAAKO,mBAAmBC;GACpBd;GACH,SAAAO;GACGN;GACAC;GACJE,QAAAA;GACDE;GAGI,WAAAG;EAAsD,CAAA;EACjEf,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAAE;EAAAF,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;EAAAb,EAAA,MAAAe;EAAAf,EAAA,MAAAU;EAAAV,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OAZFkB;AAYE"}

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

@@ -0,0 +1,65 @@
+import { TimeFieldProps } from "../time-field/index.js";
+import { TimeValue } from "react-stately/useTimeFieldState";
+//#region src/components/time-picker/index.d.ts
+/** Which of the time pickers page's two variants the modal shows. */
+type TimePickerMode = 'dial' | 'input';
+type TimePickerProps<T extends TimeValue = TimeValue> = Omit<TimeFieldProps<T>, 'trailingIcon'> & {
+  /**
+   * What the modal's dismissing action says. Left out, it is the word for it
+   * in the locale, "Cancel" in English.
+   */
+  readonly cancelLabel?: string;
+  /**
+   * What the modal's confirming action says. Left out, it is the word for it
+   * in the locale, "OK" in English.
+   */
+  readonly confirmLabel?: string;
+  /**
+   * Which variant the modal opens on: the dial, or the boxes as text fields
+   * to type into. The button at the modal's start switches between them.
+   * @default 'dial'
+   */
+  readonly defaultMode?: TimePickerMode;
+  /** Whether the modal starts open, when it keeps its own state. */
+  readonly defaultOpen?: boolean;
+  /**
+   * The input variant's headline, which also names the button that switches
+   * the dial to it. Left out, it is the locale's, "Enter time" in English.
+   */
+  readonly enterTimeLabel?: string;
+  /** Whether the modal is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with the modal's new state as it opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * The dial's headline, which also names the clock button that opens the
+   * modal, before the field's label, and the button that switches the input
+   * variant back. Left out, it is the locale's, "Select time" in English.
+   */
+  readonly selectTimeLabel?: string;
+};
+/**
+ * A time typed into a field, or picked in a modal behind the clock button at
+ * the field's end: on a dial, or typed into the modal's larger boxes. The
+ * value is an `@internationalized/date` value, as on web: pass `value` with
+ * `onChange` to control it, or `defaultValue` to let it keep its own.
+ *
+ * ```tsx
+ * import { Time } from '@internationalized/date'
+ *
+ * <TimePicker defaultValue={new Time(9, 30)} label="Label" />
+ * ```
+ *
+ * The field is TimeField's, so `granularity`, `hourCycle`, `minValue` and
+ * `maxValue` behave as they do there. The modal sets hours and minutes and
+ * keeps the seconds a value already has; a time it writes back is checked
+ * against the bounds as a typed one is. Whether it shows a twelve or
+ * twenty-four hour clock is the locale's, through the `I18nProvider`, unless
+ * `hourCycle` says otherwise.
+ *
+ * `style`, `ref` and `testID` land on the field as a whole.
+ */
+declare function TimePicker<T extends TimeValue = TimeValue>({ cancelLabel, confirmLabel, defaultMode, defaultOpen, enterTimeLabel, isDisabled, isOpen, isReadOnly, isRequired, locale, onOpenChange, selectTimeLabel, ...props }: TimePickerProps<T>): import("react").JSX.Element;
+//#endregion
+export { TimePicker, type TimePickerMode, type TimePickerProps };
+//# sourceMappingURL=index.d.ts.map