@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/textarea-field/textarea-field.css

@@ -1,10 +1,15 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._group_1h5or_3 {
+  ._group_80en2_3 {
     flex-direction: column;
     align-items: stretch;
+    min-block-size: var(--textarea-min-block-size, var(--field-min-block-size, calc(1lh + 2 * var(--field-pad-y, var(--sys-unit-6)) + 2 * var(--field-border-width, 1px))));
+    border-radius: var(--textarea-radius, var(--field-radius, var(--sys-radius-sm)));
+    padding-block: var(--textarea-pad-y, var(--field-pad-y, var(--sys-unit-6)));
+    padding-inline: var(--textarea-pad-x, var(--field-pad-start, var(--field-pad-x, var(--sys-unit-6)))) var(--textarea-pad-x, var(--field-pad-end, var(--field-pad-x, var(--sys-unit-6))));
+    font: var(--textarea-font, var(--field-font, var(--sys-font-body-medium)));
   }
-  ._textarea_1h5or_7 {
+  ._textarea_80en2_12 {
     resize: none;
     overflow-y: auto;
     line-height: inherit;

package/dist/components/textarea-field/textarea-field.js

@@ -1,6 +1,8 @@
+import { Field } from "../field/field.js";
 import { TextInput } from "../text-field/text-input.js";
 import { Textarea } from "./textarea.js";
 import textarea_field_module_default from "./textarea-field.module.js";
+import { Spinner } from "../spinner/spinner.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/textarea-field/textarea-field.tsx
@@ -19,7 +21,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var TextareaField = (t0) => {
-	const $ = c(48);
+	const $ = c(51);
 	let className;
 	let controlProps;
 	let description;
@@ -80,57 +82,72 @@ var TextareaField = (t0) => {
 		value = $[18];
 	}
 	let t1;
-	if ($[19] !== label) {
-		t1 = /* @__PURE__ */ jsx(TextInput.Label, { children: label });
-		$[19] = label;
+	if ($[19] !== optionalLabel) {
+		t1 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[19] = optionalLabel;
 		$[20] = t1;
 	} else t1 = $[20];
 	let t2;
-	if ($[21] !== controlProps || $[22] !== maxRows || $[23] !== rows) {
-		t2 = /* @__PURE__ */ jsx(Textarea, {
+	if ($[21] !== label || $[22] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(TextInput.Label, { children: [
+			label,
+			" ",
+			t1
+		] });
+		$[21] = label;
+		$[22] = t1;
+		$[23] = t2;
+	} else t2 = $[23];
+	let t3;
+	if ($[24] !== controlProps || $[25] !== maxRows || $[26] !== rows) {
+		t3 = /* @__PURE__ */ jsx(Textarea, {
 			rows,
 			maxRows,
 			...controlProps
 		});
-		$[21] = controlProps;
-		$[22] = maxRows;
-		$[23] = rows;
-		$[24] = t2;
-	} else t2 = $[24];
-	let t3;
-	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsxs(TextInput.Bar, { children: [/* @__PURE__ */ jsx(TextInput.Counter, {}), /* @__PURE__ */ jsx(TextInput.Pending, {})] });
-		$[25] = t3;
-	} else t3 = $[25];
+		$[24] = controlProps;
+		$[25] = maxRows;
+		$[26] = rows;
+		$[27] = t3;
+	} else t3 = $[27];
 	let t4;
-	if ($[26] !== t2) {
-		t4 = /* @__PURE__ */ jsxs(TextInput.Group, {
-			className: textarea_field_module_default.group,
-			children: [t2, t3]
-		});
-		$[26] = t2;
-		$[27] = t4;
-	} else t4 = $[27];
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(TextInput.Counter, {});
+		$[28] = t4;
+	} else t4 = $[28];
 	let t5;
-	if ($[28] !== description) {
-		t5 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
-		$[28] = description;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsxs(TextInput.Bar, { children: [t4, /* @__PURE__ */ jsx(TextInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) })] });
 		$[29] = t5;
 	} else t5 = $[29];
 	let t6;
-	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(TextInput.Error, {});
-		$[30] = t6;
-	} else t6 = $[30];
+	if ($[30] !== t3) {
+		t6 = /* @__PURE__ */ jsxs(TextInput.Group, {
+			className: textarea_field_module_default.group,
+			children: [t3, t5]
+		});
+		$[30] = t3;
+		$[31] = t6;
+	} else t6 = $[31];
 	let t7;
-	if ($[31] !== className || $[32] !== dirty || $[33] !== disabled || $[34] !== errors || $[35] !== maxLength || $[36] !== onValueChange || $[37] !== optionalLabel || $[38] !== pending || $[39] !== readOnly || $[40] !== requiredness || $[41] !== state || $[42] !== t1 || $[43] !== t4 || $[44] !== t5 || $[45] !== touched || $[46] !== value) {
-		t7 = /* @__PURE__ */ jsxs(TextInput.Root, {
+	if ($[32] !== description) {
+		t7 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[32] = description;
+		$[33] = t7;
+	} else t7 = $[33];
+	let t8;
+	if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[34] = t8;
+	} else t8 = $[34];
+	let t9;
+	if ($[35] !== className || $[36] !== dirty || $[37] !== disabled || $[38] !== errors || $[39] !== maxLength || $[40] !== onValueChange || $[41] !== pending || $[42] !== readOnly || $[43] !== requiredness || $[44] !== state || $[45] !== t2 || $[46] !== t6 || $[47] !== t7 || $[48] !== touched || $[49] !== value) {
+		t9 = /* @__PURE__ */ jsxs(TextInput.Root, {
 			value,
 			onValueChange,
 			disabled,
 			readOnly,
 			requiredness,
-			optionalLabel,
 			errors,
 			dirty,
 			touched,
@@ -139,30 +156,29 @@ var TextareaField = (t0) => {
 			state,
 			className,
 			children: [
-				t1,
-				t4,
-				t5,
-				t6
+				t2,
+				t6,
+				t7,
+				t8
 			]
 		});
-		$[31] = className;
-		$[32] = dirty;
-		$[33] = disabled;
-		$[34] = errors;
-		$[35] = maxLength;
-		$[36] = onValueChange;
-		$[37] = optionalLabel;
-		$[38] = pending;
-		$[39] = readOnly;
-		$[40] = requiredness;
-		$[41] = state;
-		$[42] = t1;
-		$[43] = t4;
-		$[44] = t5;
-		$[45] = touched;
-		$[46] = value;
+		$[35] = className;
+		$[36] = dirty;
+		$[37] = disabled;
+		$[38] = errors;
+		$[39] = maxLength;
+		$[40] = onValueChange;
+		$[41] = pending;
+		$[42] = readOnly;
+		$[43] = requiredness;
+		$[44] = state;
+		$[45] = t2;
+		$[46] = t6;
 		$[47] = t7;
-	} else t7 = $[47];
-	return t7;
+		$[48] = touched;
+		$[49] = value;
+		$[50] = t9;
+	} else t9 = $[50];
+	return t9;
 };
 export { TextareaField };

package/dist/components/textarea-field/textarea-field.module.js

@@ -1,6 +1,6 @@
 import './textarea-field.css';// src/components/textarea-field/textarea-field.module.scss
-var group = "_group_1h5or_3";
-var textarea = "_textarea_1h5or_7";
+var group = "_group_80en2_3";
+var textarea = "_textarea_80en2_12";
 var textarea_field_module_default = {
 	group,
 	textarea

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

@@ -1,4 +1,6 @@
+import { Spinner } from "../spinner/spinner.js";
 import { isoToTimeOfDay, timeOfDayToIso } from "../../lib/calendar/temporal-value.js";
+import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { TimeInput } from "./time-input.js";
 import { c } from "react/compiler-runtime";
@@ -13,7 +15,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * <TimeField label="Start time" optionalLabel="optional" value={startTime} onValueChange={setStartTime} />
 */
 var TimeField = (t0) => {
-	const $ = c(34);
+	const $ = c(62);
 	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly, className } = t0;
 	let t1;
 	if ($[0] !== value) {
@@ -48,68 +50,159 @@ var TimeField = (t0) => {
 	const field = useFieldState(t3);
 	const { phase } = field;
 	const fieldState = field.state;
-	let t4;
-	if ($[11] !== defaultValue || $[12] !== field.disabled || $[13] !== field.invalid || $[14] !== fieldState || $[15] !== name || $[16] !== onBlur || $[17] !== onValueChange || $[18] !== phase || $[19] !== readOnly || $[20] !== requiredness || $[21] !== time || $[22] !== value) {
-		t4 = (t5) => {
-			const { labelId, describedBy, controlId } = t5;
-			return /* @__PURE__ */ jsx(TimeInput.Root, {
-				state: fieldState,
-				"aria-labelledby": labelId,
-				"aria-describedby": describedBy,
-				value: value === void 0 ? void 0 : time,
-				defaultValue: isoToTimeOfDay(defaultValue) ?? void 0,
-				onChange: (next) => onValueChange?.(timeOfDayToIso(next)),
-				onBlur,
-				name: name ?? controlId,
-				isDisabled: field.disabled,
-				isReadOnly: readOnly,
-				isRequired: requiredness === "required",
-				isInvalid: field.invalid,
-				children: /* @__PURE__ */ jsxs(TimeInput.Group, {
-					role: "presentation",
-					state: fieldState,
-					children: [/* @__PURE__ */ jsx(TimeInput.Input, {}), phase !== "fresh" && /* @__PURE__ */ jsx(TimeInput.Pending, {})]
-				})
-			});
-		};
-		$[11] = defaultValue;
-		$[12] = field.disabled;
-		$[13] = field.invalid;
-		$[14] = fieldState;
-		$[15] = name;
-		$[16] = onBlur;
-		$[17] = onValueChange;
-		$[18] = phase;
-		$[19] = readOnly;
-		$[20] = requiredness;
-		$[21] = time;
-		$[22] = value;
-		$[23] = t4;
-	} else t4 = $[23];
-	let t5;
-	if ($[24] !== className || $[25] !== description || $[26] !== dirty || $[27] !== errors || $[28] !== label || $[29] !== optionalLabel || $[30] !== requiredness || $[31] !== t4 || $[32] !== touched) {
-		t5 = /* @__PURE__ */ jsx(TimeInput.Frame, {
-			label,
-			description,
-			errors,
+	const ids = TimeInput.useIds();
+	const t4 = field.invalid;
+	const t5 = field.disabled;
+	let t6;
+	if ($[11] !== optionalLabel) {
+		t6 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[11] = optionalLabel;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== ids.labelId || $[14] !== label || $[15] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(TimeInput.Label, {
+			id: ids.labelId,
+			children: [
+				label,
+				" ",
+				t6
+			]
+		});
+		$[13] = ids.labelId;
+		$[14] = label;
+		$[15] = t6;
+		$[16] = t7;
+	} else t7 = $[16];
+	const t8 = ids.labelId;
+	let t9;
+	if ($[17] !== description || $[18] !== field.invalid || $[19] !== ids) {
+		t9 = ids.describedBy(description !== void 0, field.invalid);
+		$[17] = description;
+		$[18] = field.invalid;
+		$[19] = ids;
+		$[20] = t9;
+	} else t9 = $[20];
+	const t10 = value === void 0 ? void 0 : time;
+	let t11;
+	if ($[21] !== defaultValue) {
+		t11 = isoToTimeOfDay(defaultValue) ?? void 0;
+		$[21] = defaultValue;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== onValueChange) {
+		t12 = (next) => onValueChange?.(timeOfDayToIso(next));
+		$[23] = onValueChange;
+		$[24] = t12;
+	} else t12 = $[24];
+	const t13 = name ?? ids.controlId;
+	const t14 = requiredness === "required";
+	let t15;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(TimeInput.Input, { children: _temp });
+		$[25] = t15;
+	} else t15 = $[25];
+	let t16;
+	if ($[26] !== phase) {
+		t16 = phase !== "fresh" && /* @__PURE__ */ jsx(TimeInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[26] = phase;
+		$[27] = t16;
+	} else t16 = $[27];
+	let t17;
+	if ($[28] !== fieldState || $[29] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(TimeInput.Group, {
+			role: "presentation",
+			state: fieldState,
+			children: [t15, t16]
+		});
+		$[28] = fieldState;
+		$[29] = t16;
+		$[30] = t17;
+	} else t17 = $[30];
+	let t18;
+	if ($[31] !== field.disabled || $[32] !== field.invalid || $[33] !== fieldState || $[34] !== ids.labelId || $[35] !== onBlur || $[36] !== readOnly || $[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t13 || $[41] !== t14 || $[42] !== t17 || $[43] !== t9) {
+		t18 = /* @__PURE__ */ jsx(TimeInput.Root, {
+			state: fieldState,
+			"aria-labelledby": t8,
+			"aria-describedby": t9,
+			value: t10,
+			defaultValue: t11,
+			onChange: t12,
+			onBlur,
+			name: t13,
+			isDisabled: field.disabled,
+			isReadOnly: readOnly,
+			isRequired: t14,
+			isInvalid: field.invalid,
+			children: t17
+		});
+		$[31] = field.disabled;
+		$[32] = field.invalid;
+		$[33] = fieldState;
+		$[34] = ids.labelId;
+		$[35] = onBlur;
+		$[36] = readOnly;
+		$[37] = t10;
+		$[38] = t11;
+		$[39] = t12;
+		$[40] = t13;
+		$[41] = t14;
+		$[42] = t17;
+		$[43] = t9;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== description || $[46] !== ids.descriptionId) {
+		t19 = /* @__PURE__ */ jsx(TimeInput.Description, {
+			id: ids.descriptionId,
+			children: description
+		});
+		$[45] = description;
+		$[46] = ids.descriptionId;
+		$[47] = t19;
+	} else t19 = $[47];
+	let t20;
+	if ($[48] !== errors || $[49] !== ids.errorId) {
+		t20 = /* @__PURE__ */ jsx(TimeInput.Error, {
+			id: ids.errorId,
+			children: errors
+		});
+		$[48] = errors;
+		$[49] = ids.errorId;
+		$[50] = t20;
+	} else t20 = $[50];
+	let t21;
+	if ($[51] !== className || $[52] !== dirty || $[53] !== field.disabled || $[54] !== field.invalid || $[55] !== requiredness || $[56] !== t18 || $[57] !== t19 || $[58] !== t20 || $[59] !== t7 || $[60] !== touched) {
+		t21 = /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			invalid: t4,
+			disabled: t5,
 			requiredness,
-			optionalLabel,
 			dirty,
 			touched,
-			className,
-			children: t4
+			children: [
+				t7,
+				t18,
+				t19,
+				t20
+			]
 		});
-		$[24] = className;
-		$[25] = description;
-		$[26] = dirty;
-		$[27] = errors;
-		$[28] = label;
-		$[29] = optionalLabel;
-		$[30] = requiredness;
-		$[31] = t4;
-		$[32] = touched;
-		$[33] = t5;
-	} else t5 = $[33];
-	return t5;
+		$[51] = className;
+		$[52] = dirty;
+		$[53] = field.disabled;
+		$[54] = field.invalid;
+		$[55] = requiredness;
+		$[56] = t18;
+		$[57] = t19;
+		$[58] = t20;
+		$[59] = t7;
+		$[60] = touched;
+		$[61] = t21;
+	} else t21 = $[61];
+	return t21;
 };
+function _temp(segment) {
+	return /* @__PURE__ */ jsx(TimeInput.Segment, { segment });
+}
 export { TimeField };

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

@@ -1,7 +1,7 @@
 import type { Time } from "@internationalized/date";
 import type { ReactNode } from "react";
 import { type TimeFieldProps as AriaTimeFieldProps } from "react-aria-components";
-import { TemporalFrame, TemporalGroup, TemporalInput, TemporalSegment, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
+import { TemporalGroup, TemporalInput, TemporalLabel, TemporalSegment, type TemporalStateProps } from "../../lib/calendar/temporal.tsx";
 import { Field } from "../field/index.ts";
 export type TimeInputRootProps = AriaTimeFieldProps<Time> & TemporalStateProps;
 /**
@@ -13,24 +13,35 @@ export type TimeInputRootProps = AriaTimeFieldProps<Time> & TemporalStateProps;
 declare const TimeInputRoot: ({ state, ...props }: TimeInputRootProps) => ReactNode;
 /** The parts of a time input. */
 export type TimeInputParts = Readonly<{
-    Frame: typeof TemporalFrame;
     Root: typeof TimeInputRoot;
+    Label: typeof TemporalLabel;
     Group: typeof TemporalGroup;
     Input: typeof TemporalInput;
     Segment: typeof TemporalSegment;
     Pending: typeof Field.Pending;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
 }>;
 /**
- * The styled parts of a react-aria `TimeField`, carrying the field frame's ids
- * rather than a label of their own. Its `Group` is the bordered box the
- * segments and any inlay share. For the ordinary case, use `TimeField`.
+ * The styled parts of a react-aria `TimeField`, following react-aria's own
+ * anatomy. It sits in a `Field.Root` and names itself through `Label`'s id.
+ * Its `Group` is the bordered box the segments and any inlay share. For the
+ * ordinary case, use `TimeField`, which is assembled from exactly these parts.
  *
  * @example
- * <TimeInput.Root aria-labelledby={labelId}>
- * 	<TimeInput.Group state={{ requiredness: "optional" }}>
- * 		<TimeInput.Input />
- * 	</TimeInput.Group>
- * </TimeInput.Root>
+ * const ids = TimeInput.useIds();
+ *
+ * <Field.Root>
+ * 	<TimeInput.Label id={ids.labelId}>Start time</TimeInput.Label>
+ * 	<TimeInput.Root aria-labelledby={ids.labelId}>
+ * 		<TimeInput.Group role="presentation">
+ * 			<TimeInput.Input>
+ * 				{segment => <TimeInput.Segment segment={segment} />}
+ * 			</TimeInput.Input>
+ * 		</TimeInput.Group>
+ * 	</TimeInput.Root>
+ * </Field.Root>
  */
 export declare const TimeInput: TimeInputParts;
 export {};

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

@@ -1,4 +1,4 @@
-import { TemporalFrame, TemporalGroup, TemporalInput, TemporalSegment } from "../../lib/calendar/temporal.js";
+import { TemporalGroup, TemporalInput, TemporalLabel, TemporalSegment } from "../../lib/calendar/temporal.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
 import { c } from "react/compiler-runtime";
@@ -50,23 +50,34 @@ var TimeInputRoot = (t0) => {
 	return t3;
 };
 /**
-* The styled parts of a react-aria `TimeField`, carrying the field frame's ids
-* rather than a label of their own. Its `Group` is the bordered box the
-* segments and any inlay share. For the ordinary case, use `TimeField`.
+* The styled parts of a react-aria `TimeField`, following react-aria's own
+* anatomy. It sits in a `Field.Root` and names itself through `Label`'s id.
+* Its `Group` is the bordered box the segments and any inlay share. For the
+* ordinary case, use `TimeField`, which is assembled from exactly these parts.
 *
 * @example
-* <TimeInput.Root aria-labelledby={labelId}>
-* 	<TimeInput.Group state={{ requiredness: "optional" }}>
-* 		<TimeInput.Input />
-* 	</TimeInput.Group>
-* </TimeInput.Root>
+* const ids = TimeInput.useIds();
+*
+* <Field.Root>
+* 	<TimeInput.Label id={ids.labelId}>Start time</TimeInput.Label>
+* 	<TimeInput.Root aria-labelledby={ids.labelId}>
+* 		<TimeInput.Group role="presentation">
+* 			<TimeInput.Input>
+* 				{segment => <TimeInput.Segment segment={segment} />}
+* 			</TimeInput.Input>
+* 		</TimeInput.Group>
+* 	</TimeInput.Root>
+* </Field.Root>
 */
 var TimeInput = {
-	Frame: TemporalFrame,
 	Root: TimeInputRoot,
+	Label: TemporalLabel,
 	Group: TemporalGroup,
 	Input: TemporalInput,
 	Segment: TemporalSegment,
-	Pending: Field.Pending
+	Pending: Field.Pending,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
 };
 export { TimeInput };