@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

package/dist/components/error-text/error-cascade.js

@@ -0,0 +1,49 @@
+import { createContext, useContext } from "react";
+// src/components/error-text/error-cascade.ts
+/**
+* A cascade whose waves end at the next `schedule` callback, by default the
+* next animation frame, so blocks that appear together drop in one after
+* another.
+*
+* @example
+* const cascade = createErrorCascade();
+* cascade.claim(firstBlock, 2); // 0
+* cascade.claim(secondBlock, 1); // 2
+*/
+var createErrorCascade = (schedule = (endWave) => {
+	requestAnimationFrame(endWave);
+}) => {
+	const claimed = /* @__PURE__ */ new WeakMap();
+	const wave = {
+		ahead: 0,
+		open: false
+	};
+	return { claim: (block, count) => {
+		const known = claimed.get(block);
+		if (known !== void 0) return known;
+		if (!wave.open) {
+			wave.open = true;
+			schedule(() => {
+				wave.ahead = 0;
+				wave.open = false;
+			});
+		}
+		const index = wave.ahead;
+		wave.ahead += count;
+		claimed.set(block, index);
+		return index;
+	} };
+};
+var ErrorCascadeContext = createContext(void 0);
+/** Provides the cascade the error texts inside it share. */
+var ErrorCascadeProvider = ErrorCascadeContext.Provider;
+/**
+* The cascade of the enclosing `Form.Root`, if any.
+*
+* @example
+* const cascade = useErrorCascade();
+*/
+var useErrorCascade = () => {
+	return useContext(ErrorCascadeContext);
+};
+export { ErrorCascadeProvider, createErrorCascade, useErrorCascade };

package/dist/components/error-text/error-text.css

@@ -0,0 +1,27 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  @keyframes _error-pop-in_1lbz2_1 {
+    from {
+      translate: 0 calc(-1 * var(--sys-unit-4));
+      opacity: 0;
+    }
+  }
+  ._text_1lbz2_9 {
+    color: var(--error-text-fg, var(--sys-color-error-fg));
+    font: var(--error-text-font, var(--sys-font-body-medium));
+  }
+  ._message_1lbz2_13 {
+    display: block;
+  }
+  @media not (prefers-reduced-motion) {
+    ._message_1lbz2_13 {
+      animation: _error-pop-in_1lbz2_1 var(--sys-motion-short) var(--sys-motion-emphasized) both;
+      animation-delay: calc(var(--error-index, 0) * 20ms);
+    }
+    @supports (animation-delay: calc(sibling-index() * 1ms)) {
+      ._message_1lbz2_13 {
+        animation-delay: calc((var(--error-index, 0) + sibling-index() - 1) * 20ms);
+      }
+    }
+  }
+}

package/dist/components/error-text/error-text.d.ts

@@ -0,0 +1,22 @@
+import { type HTMLAttributes, type ReactNode, type Ref } from "react";
+export type ErrorTextProps = Readonly<Omit<HTMLAttributes<HTMLElement>, "children"> & Readonly<{
+    ref?: Ref<HTMLElement>;
+    /** One message, or a list of them; empty entries are skipped. */
+    children?: ReactNode;
+}> & (Readonly<{
+    el?: "p" | "span";
+    htmlFor?: never;
+}> | Readonly<{
+    el: "label";
+    htmlFor: string;
+}>)>;
+/**
+ * Renders one or more error messages, one per line, or nothing at all when there
+ * are none. The text is there from the first frame; each message drops in after
+ * the ones that arrived with it in the same `Form.Root`, unless the reader
+ * prefers reduced motion. Every other prop is forwarded to the element.
+ *
+ * @example
+ * <ErrorText role="alert">{["Enter a name.", "Use letters only."]}</ErrorText>
+ */
+export declare const ErrorText: ({ el, className, children, ref, ...rest }: ErrorTextProps) => ReactNode;

package/dist/components/error-text/error-text.js

@@ -0,0 +1,139 @@
+import { useErrorCascade } from "./error-cascade.js";
+import error_text_module_default from "./error-text.module.js";
+import { c } from "react/compiler-runtime";
+import { Children } from "react";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/error-text/error-text.tsx
+var messagesOf = (children) => (Array.isArray(children) ? children : [children]).filter((message) => message !== null && message !== void 0 && message !== false && message !== "");
+/**
+* Renders one or more error messages, one per line, or nothing at all when there
+* are none. The text is there from the first frame; each message drops in after
+* the ones that arrived with it in the same `Form.Root`, unless the reader
+* prefers reduced motion. Every other prop is forwarded to the element.
+*
+* @example
+* <ErrorText role="alert">{["Enter a name.", "Use letters only."]}</ErrorText>
+*/
+var ErrorText = (t0) => {
+	const $ = c(37);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	let t1;
+	if ($[0] !== t0) {
+		({el: t1, className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+		$[5] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+		t1 = $[5];
+	}
+	const el = t1 === void 0 ? "p" : t1;
+	const cascade = useErrorCascade();
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[6] !== cascade || $[7] !== children || $[8] !== className || $[9] !== el || $[10] !== ref || $[11] !== rest) {
+		const messages = messagesOf(children);
+		t9 = useRender;
+		t6 = messages.length > 0;
+		t7 = el;
+		const t10 = ref ?? null;
+		let t11;
+		if ($[20] !== cascade) {
+			t11 = (node) => {
+				if (node !== null) node.style.setProperty("--error-index", String(cascade?.claim(node, node.childElementCount) ?? 0));
+			};
+			$[20] = cascade;
+			$[21] = t11;
+		} else t11 = $[21];
+		if ($[22] !== t10 || $[23] !== t11) {
+			t8 = [t10, t11];
+			$[22] = t10;
+			$[23] = t11;
+			$[24] = t8;
+		} else t8 = $[24];
+		t2 = rest;
+		t3 = "";
+		if ($[25] !== className) {
+			t4 = clsx(error_text_module_default.text, className);
+			$[25] = className;
+			$[26] = t4;
+		} else t4 = $[26];
+		t5 = Children.map(messages, _temp);
+		$[6] = cascade;
+		$[7] = children;
+		$[8] = className;
+		$[9] = el;
+		$[10] = ref;
+		$[11] = rest;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t2 = $[12];
+		t3 = $[13];
+		t4 = $[14];
+		t5 = $[15];
+		t6 = $[16];
+		t7 = $[17];
+		t8 = $[18];
+		t9 = $[19];
+	}
+	let t10;
+	if ($[27] !== t2 || $[28] !== t3 || $[29] !== t4 || $[30] !== t5) {
+		t10 = {
+			...t2,
+			"data-error-text": t3,
+			className: t4,
+			children: t5
+		};
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== t10 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8) {
+		t11 = {
+			enabled: t6,
+			defaultTagName: t7,
+			ref: t8,
+			props: t10
+		};
+		$[32] = t10;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t11;
+	} else t11 = $[36];
+	return t9(t11);
+};
+function _temp(message) {
+	return /* @__PURE__ */ jsx("span", {
+		className: error_text_module_default.message,
+		children: message
+	});
+}
+export { ErrorText };

package/dist/components/error-text/error-text.module.js

@@ -0,0 +1,11 @@
+import './error-text.css';// src/components/error-text/error-text.module.scss
+var text = "_text_1lbz2_9";
+var message = "_message_1lbz2_13";
+var errorPopIn = "_error-pop-in_1lbz2_1";
+var error_text_module_default = {
+	text,
+	message,
+	"error-pop-in": "_error-pop-in_1lbz2_1",
+	errorPopIn
+};
+export { error_text_module_default as default, errorPopIn, message, text };

package/dist/components/error-text/index.d.ts

@@ -0,0 +1 @@
+export * from "./error-text.tsx";

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

@@ -0,0 +1 @@
+export { ErrorText } from "./error-text.js";

package/dist/components/field/choice-option.d.ts

@@ -0,0 +1,11 @@
+/**
+ * One choice of a radio group, toggle group or segmented control.
+ *
+ * @example
+ * const views: readonly ChoiceOption[] = [{ value: "list", label: "List" }];
+ */
+export type ChoiceOption = Readonly<{
+    label: string;
+    value: string;
+    disabled?: boolean;
+}>;

package/dist/components/field/field-state.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Whether a field asserts anything about being required. Absent means it makes no
+ * assertion, which is the case for anything outside a form.
+ */
+export type Requiredness = "required" | "optional";
+/** What the validator says of a field's value. */
+export type FieldValidity = "valid" | "invalid";
+/** The states a form control projects onto its markup. */
+export type FieldState = Readonly<{
+    disabled?: boolean;
+    readonly?: boolean;
+    requiredness?: Requiredness;
+    /** Absent while the validator has said nothing. */
+    validity?: FieldValidity;
+    dirty?: boolean;
+    touched?: boolean;
+    filled?: boolean;
+    /** Focus is here, however it got here: warms the field's border. */
+    focused?: boolean;
+    /** That focus is the keyboard's: shows the ring. */
+    focusVisible?: boolean;
+    pending?: boolean;
+}>;
+/**
+ * Presence-style `data-*` props, matching Base UI's own convention, plus the one
+ * state a screen reader reads as a property rather than a treatment.
+ */
+export type FieldStateAttributes = Readonly<{
+    "aria-busy"?: true;
+    "data-disabled"?: "";
+    "data-readonly"?: "";
+    "data-required"?: "";
+    "data-optional"?: "";
+    "data-invalid"?: "";
+    "data-valid"?: "";
+    "data-dirty"?: "";
+    "data-touched"?: "";
+    "data-filled"?: "";
+    "data-focused"?: "";
+    "data-focus-visible"?: "";
+    "data-pending"?: "";
+}>;
+/**
+ * Turns field state into `data-*` props: a true flag emits an empty attribute,
+ * anything else is left out.
+ *
+ * @example
+ * <div {...fieldStateAttributes({ validity: "invalid", disabled: false })} />
+ * // <div data-invalid="" />
+ */
+export declare const fieldStateAttributes: (state: FieldState) => FieldStateAttributes;

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

@@ -0,0 +1,28 @@
+// src/components/field/field-state.ts
+var flagged = "";
+/**
+* Turns field state into `data-*` props: a true flag emits an empty attribute,
+* anything else is left out.
+*
+* @example
+* <div {...fieldStateAttributes({ validity: "invalid", disabled: false })} />
+* // <div data-invalid="" />
+*/
+var fieldStateAttributes = (state) => ({
+	...state.disabled === true && { "data-disabled": flagged },
+	...state.readonly === true && { "data-readonly": flagged },
+	...state.requiredness === "required" && { "data-required": flagged },
+	...state.requiredness === "optional" && { "data-optional": flagged },
+	...state.validity === "invalid" && { "data-invalid": flagged },
+	...state.validity === "valid" && { "data-valid": flagged },
+	...state.dirty === true && { "data-dirty": flagged },
+	...state.touched === true && { "data-touched": flagged },
+	...state.filled === true && { "data-filled": flagged },
+	...state.focused === true && { "data-focused": flagged },
+	...state.focusVisible === true && { "data-focus-visible": flagged },
+	...state.pending === true && {
+		"data-pending": flagged,
+		"aria-busy": true
+	}
+});
+export { fieldStateAttributes };

package/dist/components/field/field.css

@@ -0,0 +1,50 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._field_14ydh_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, var(--sys-unit-4));
+    inline-size: 100%;
+  }
+  ._label_14ydh_9 {
+    color: var(--sys-color-text);
+    font: var(--sys-font-label-medium);
+    cursor: default;
+  }
+  ._optional_14ydh_14 {
+    vertical-align: middle;
+    color: var(--sys-color-text-muted);
+    font: var(--sys-font-body-small);
+    font-size: 0.75rem;
+  }
+  ._inlineText_14ydh_20 {
+    grid-area: text;
+  }
+  ._inlineOptional_14ydh_23 {
+    grid-area: optional;
+  }
+  ._required_14ydh_26 {
+    display: inline-block;
+    vertical-align: middle;
+    translate: 0 -1px;
+    inline-size: 0.625rem;
+    block-size: 0.625rem;
+    background-color: var(--field-required-fg, var(--sys-color-primary));
+    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='16%2016%2032%2032'%20fill='currentColor'%3e%3cpath%20d='M45.475%2036.291c.377.162.549.477.523.943-.027.469-.35%201.223-.967%202.264-.617%201.072-1.121%201.725-1.51%201.967-.389.24-.744.24-1.066%200l-8.574-6.215%201.129%2010.508c.078.398-.096.707-.525.92-.428.215-1.262.322-2.495.322-1.236%200-2.066-.107-2.496-.322-.43-.213-.604-.521-.523-.92l1.127-10.508-8.533%206.215c-.322.24-.686.24-1.088%200-.402-.242-.912-.895-1.529-1.967-.617-1.041-.934-1.795-.945-2.264-.016-.467.168-.781.543-.943l9.701-4.29-9.701-4.252c-.375-.188-.559-.516-.543-.984.012-.467.328-1.223.945-2.264.617-1.045%201.127-1.686%201.529-1.926s.766-.24%201.088%200l8.533%206.176-1.127-10.467c-.08-.428.094-.748.523-.963s1.26-.321%202.496-.321c1.232%200%202.066.107%202.494.322.43.215.604.535.525.963l-1.129%2010.467%208.574-6.176c.322-.24.678-.24%201.066%200s.893.896%201.51%201.965c.617%201.018.939%201.758.967%202.225.025.469-.146.797-.523.984l-9.701%204.252%209.702%204.289'/%3e%3c/svg%3e") center/contain no-repeat;
+  }
+  ._description_14ydh_35 {
+    color: var(--field-description-fg, var(--sys-color-text-muted));
+    font: var(--field-description-font, var(--sys-font-body-medium));
+  }
+  ._pending_14ydh_39 {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    color: var(--field-muted-fg);
+    font: var(--sys-font-body-medium);
+    cursor: default;
+    pointer-events: none;
+    line-height: normal;
+  }
+}

package/dist/components/field/field.d.ts

@@ -0,0 +1,183 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { type ComponentProps, type ReactNode } from "react";
+import type { Requiredness } from "./field-state.ts";
+/**
+ * The props every field takes, on every tier: the raw compound's root, the
+ * `<Control>Field` shorthand and the `TSF<Control>Field` bridge.
+ */
+export type FieldProps = Readonly<{
+    /** The visible label; never only a placeholder. */
+    label: string;
+    /** Help shown under the control, before any error. */
+    description?: ReactNode;
+    /** Errors in any shape `normalizeFieldErrors` accepts. Any line makes the field invalid. */
+    errors?: unknown;
+    /** What the label asserts. Left out, it shows neither mark. */
+    requiredness?: Requiredness;
+    /** The word an optional field's label trails, such as "optional". */
+    optionalLabel: string;
+    /** The value differs from the one the form started with. */
+    dirty?: boolean;
+    /** The user has left the control at least once. */
+    touched?: boolean;
+    /** Background work, such as an async validator, is in flight. */
+    pending?: boolean;
+}>;
+/**
+ * What a field calls once focus has left it, such as a form library's blur
+ * handler. Every `<Control>Field` and its bridge take this one type.
+ */
+export type FieldBlurHandler = () => void;
+/** The copy and assertion a label carries about requiredness. */
+export type RequirednessProps = Readonly<{
+    requiredness?: Requiredness;
+    /** The word an optional field's label trails, such as "optional". */
+    optionalLabel: string;
+}>;
+/**
+ * The mark a label carries when its field is required. Decoration only: the
+ * control's own `required` tells assistive tech.
+ *
+ * @example
+ * <Field.RequiredMark requiredness="required" />
+ */
+declare const RequiredMark: ({ requiredness, }: Readonly<{
+    requiredness?: Requiredness;
+}>) => ReactNode;
+/**
+ * The suffix a label trails: the required mark, or the optional word.
+ *
+ * @example
+ * <Field.Requiredness requiredness="optional" optionalLabel="optional" />
+ */
+declare const FieldRequiredness: ({ requiredness, optionalLabel, }: RequirednessProps) => ReactNode;
+export type InlineLabelTextProps = RequirednessProps & Readonly<{
+    label: string;
+    /** The label of the field the row sits in, which carries the suffix instead. */
+    fieldLabel?: string;
+}>;
+/**
+ * The text beside a control that shares its label, carrying the suffix a
+ * `fieldLabel` above the row would otherwise carry.
+ *
+ * @example
+ * <BaseField.Label>
+ * 	<Checkbox />
+ * 	<Field.InlineLabelText label={label} requiredness="optional" optionalLabel="optional" />
+ * </BaseField.Label>
+ */
+declare const InlineLabelText: ({ label, fieldLabel, requiredness, optionalLabel, }: InlineLabelTextProps) => ReactNode;
+export type FieldRootProps = BaseField.Root.Props & Readonly<{
+    className?: string;
+}>;
+/**
+ * The field frame: label, control, description and error stacked full width.
+ *
+ * @example
+ * <Field.Root name="email" invalid={invalid}>…</Field.Root>
+ */
+declare const FieldRoot: ({ className, ...props }: FieldRootProps) => ReactNode;
+export type FieldLabelProps = Omit<BaseField.Label.Props, "className"> & RequirednessProps & Readonly<{
+    className?: string;
+}>;
+/**
+ * The label above a control, trailing its requiredness. Renders nothing without
+ * children.
+ *
+ * @example
+ * <Field.Label requiredness="optional" optionalLabel="optional">Notes</Field.Label>
+ */
+declare const FieldLabel: ({ children, requiredness, optionalLabel, className, ...props }: FieldLabelProps) => ReactNode;
+export type FieldCaptionProps = ComponentProps<"p"> & RequirednessProps;
+/**
+ * A caption styled like a field label, which names nothing: a paragraph, with
+ * no `for` and no `aria-labelledby` of its own. Use it for standing text above
+ * a control that already carries its own name. To name something, use `Label`.
+ *
+ * @example
+ * <Field.Caption optionalLabel="optional">Theme</Field.Caption>
+ */
+declare const FieldCaption: ({ children, requiredness, optionalLabel, className, ...props }: FieldCaptionProps) => ReactNode;
+/**
+ * The help under a control. Renders nothing without children.
+ *
+ * @example
+ * <Field.Description>We only use it to send the receipt.</Field.Description>
+ */
+declare const FieldDescription: ({ children, className, ...props }: BaseField.Description.Props) => ReactNode;
+export type FieldErrorProps = Omit<BaseField.Error.Props, "match" | "render" | "children"> & Readonly<{
+    /** Errors in any shape `normalizeFieldErrors` accepts. */
+    children?: unknown;
+}>;
+/**
+ * The one error part every control renders, after the description. Normalises
+ * its errors to lines with `normalizeFieldErrors` and renders nothing when
+ * there are none. It is the field's only live region, so a control must not
+ * announce the same message a second time.
+ *
+ * @example
+ * <Field.Error>{errors}</Field.Error>
+ */
+declare const FieldError: ({ children: errors, ...props }: FieldErrorProps) => ReactNode;
+export type FieldPendingProps = Readonly<{
+    className?: string;
+}>;
+/**
+ * The spinner a field shows while background work is in flight, sized to sit
+ * in the box beside the control. The control decides when it is mounted, once
+ * the wait is worth showing. It is decoration: the wait reaches assistive tech
+ * as the `aria-busy` that `fieldStateAttributes` projects.
+ *
+ * @example
+ * {phase !== "fresh" && <Field.Pending />}
+ */
+declare const FieldPending: ({ className, }: FieldPendingProps) => ReactNode;
+/** Stable ids for the parts of one field. */
+export type FieldIds = Readonly<{
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    /** A stable id and name for the control. */
+    controlId: string;
+    /** The control's `aria-describedby`: the description and the error that are shown. */
+    describedBy: (hasDescription: boolean, invalid: boolean) => string | undefined;
+}>;
+/**
+ * Stable ids for a field's label, description and error, for controls that
+ * wire `aria-labelledby` and `aria-describedby` themselves.
+ *
+ * @example
+ * const { labelId, errorId } = useFieldIds();
+ */
+export declare const useFieldIds: () => FieldIds;
+/** The parts of a field. */
+export type FieldParts = Readonly<{
+    Root: typeof FieldRoot;
+    Label: typeof FieldLabel;
+    Caption: typeof FieldCaption;
+    Control: typeof BaseField.Control;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+    Pending: typeof FieldPending;
+    Item: typeof BaseField.Item;
+    Validity: typeof BaseField.Validity;
+    Requiredness: typeof FieldRequiredness;
+    RequiredMark: typeof RequiredMark;
+    InlineLabelText: typeof InlineLabelText;
+    useIds: typeof useFieldIds;
+}>;
+/**
+ * The field frame and its parts, over base-ui's `Field`. A control's raw tier
+ * renders inside `Root` and names itself through `Label`; `Description` comes
+ * before `Error`, the field's only live region.
+ *
+ * @example
+ * <Field.Root name="email" invalid={invalid}>
+ * 	<Field.Label requiredness="required" optionalLabel="optional">Email</Field.Label>
+ * 	<Field.Control />
+ * 	<Field.Description>We send the receipt here.</Field.Description>
+ * 	<Field.Error>{errors}</Field.Error>
+ * </Field.Root>
+ */
+export declare const Field: FieldParts;
+export {};