@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,247 @@
+import { Icon } from "../icon/icon.js";
+import { TextInput } from "./text-input.js";
+import text_field_module_default from "./text-field.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/text-field/text-field.tsx
+/**
+* A labelled text field: label, a bordered group holding the control with its
+* optional icon, affixes, pending spinner, clear and copy buttons, then the
+* counter, description and error. Assembled from `TextInput`'s parts.
+*
+* @example
+* <TextField
+* 	label="Name"
+* 	optionalLabel="optional"
+* 	value={name}
+* 	onValueChange={setName}
+* />
+*/
+var TextField = (t0) => {
+	const $ = c(75);
+	let className;
+	let clearLabel;
+	let clearable;
+	let copiedLabel;
+	let copyFailedLabel;
+	let copyLabel;
+	let copyable;
+	let description;
+	let dirty;
+	let disabled;
+	let errors;
+	let icon;
+	let inputProps;
+	let label;
+	let maxLength;
+	let onValueChange;
+	let optionalLabel;
+	let pending;
+	let prefix;
+	let readOnly;
+	let requiredness;
+	let state;
+	let suffix;
+	let t1;
+	let touched;
+	let value;
+	if ($[0] !== t0) {
+		({label, labelHidden: t1, description, errors, requiredness, optionalLabel, icon, prefix, suffix, clearable, clearLabel, copyable, copyLabel, copiedLabel, copyFailedLabel, value, onValueChange, disabled, readOnly, dirty, touched, pending, maxLength, state, className, ...inputProps} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = clearLabel;
+		$[3] = clearable;
+		$[4] = copiedLabel;
+		$[5] = copyFailedLabel;
+		$[6] = copyLabel;
+		$[7] = copyable;
+		$[8] = description;
+		$[9] = dirty;
+		$[10] = disabled;
+		$[11] = errors;
+		$[12] = icon;
+		$[13] = inputProps;
+		$[14] = label;
+		$[15] = maxLength;
+		$[16] = onValueChange;
+		$[17] = optionalLabel;
+		$[18] = pending;
+		$[19] = prefix;
+		$[20] = readOnly;
+		$[21] = requiredness;
+		$[22] = state;
+		$[23] = suffix;
+		$[24] = t1;
+		$[25] = touched;
+		$[26] = value;
+	} else {
+		className = $[1];
+		clearLabel = $[2];
+		clearable = $[3];
+		copiedLabel = $[4];
+		copyFailedLabel = $[5];
+		copyLabel = $[6];
+		copyable = $[7];
+		description = $[8];
+		dirty = $[9];
+		disabled = $[10];
+		errors = $[11];
+		icon = $[12];
+		inputProps = $[13];
+		label = $[14];
+		maxLength = $[15];
+		onValueChange = $[16];
+		optionalLabel = $[17];
+		pending = $[18];
+		prefix = $[19];
+		readOnly = $[20];
+		requiredness = $[21];
+		state = $[22];
+		suffix = $[23];
+		t1 = $[24];
+		touched = $[25];
+		value = $[26];
+	}
+	const t2 = (t1 === void 0 ? false : t1) ? text_field_module_default.visuallyHidden : void 0;
+	let t3;
+	if ($[27] !== label || $[28] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TextInput.Label, {
+			className: t2,
+			children: label
+		});
+		$[27] = label;
+		$[28] = t2;
+		$[29] = t3;
+	} else t3 = $[29];
+	let t4;
+	if ($[30] !== icon) {
+		t4 = icon !== void 0 && /* @__PURE__ */ jsx(TextInput.Inlay, { children: /* @__PURE__ */ jsx(Icon, {
+			svg: icon,
+			label: ""
+		}) });
+		$[30] = icon;
+		$[31] = t4;
+	} else t4 = $[31];
+	let t5;
+	if ($[32] !== prefix) {
+		t5 = prefix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: prefix });
+		$[32] = prefix;
+		$[33] = t5;
+	} else t5 = $[33];
+	let t6;
+	if ($[34] !== inputProps) {
+		t6 = /* @__PURE__ */ jsx(TextInput.Input, { ...inputProps });
+		$[34] = inputProps;
+		$[35] = t6;
+	} else t6 = $[35];
+	let t7;
+	if ($[36] !== suffix) {
+		t7 = suffix !== void 0 && /* @__PURE__ */ jsx(TextInput.Affix, { children: suffix });
+		$[36] = suffix;
+		$[37] = t7;
+	} else t7 = $[37];
+	let t8;
+	if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(TextInput.Pending, {});
+		$[38] = t8;
+	} else t8 = $[38];
+	let t9;
+	if ($[39] !== clearLabel || $[40] !== clearable) {
+		t9 = clearable === true && /* @__PURE__ */ jsx(TextInput.Clear, { label: clearLabel });
+		$[39] = clearLabel;
+		$[40] = clearable;
+		$[41] = t9;
+	} else t9 = $[41];
+	let t10;
+	if ($[42] !== copiedLabel || $[43] !== copyFailedLabel || $[44] !== copyLabel || $[45] !== copyable) {
+		t10 = copyable === true && /* @__PURE__ */ jsx(TextInput.Copy, {
+			label: copyLabel,
+			copiedLabel,
+			failedLabel: copyFailedLabel
+		});
+		$[42] = copiedLabel;
+		$[43] = copyFailedLabel;
+		$[44] = copyLabel;
+		$[45] = copyable;
+		$[46] = t10;
+	} else t10 = $[46];
+	let t11;
+	if ($[47] !== t10 || $[48] !== t4 || $[49] !== t5 || $[50] !== t6 || $[51] !== t7 || $[52] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
+			t4,
+			t5,
+			t6,
+			t7,
+			t8,
+			t9,
+			t10
+		] });
+		$[47] = t10;
+		$[48] = t4;
+		$[49] = t5;
+		$[50] = t6;
+		$[51] = t7;
+		$[52] = t9;
+		$[53] = t11;
+	} else t11 = $[53];
+	let t12;
+	if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(TextInput.Counter, {});
+		$[54] = t12;
+	} else t12 = $[54];
+	let t13;
+	if ($[55] !== description) {
+		t13 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[55] = description;
+		$[56] = t13;
+	} else t13 = $[56];
+	let t14;
+	if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[57] = t14;
+	} else t14 = $[57];
+	let t15;
+	if ($[58] !== className || $[59] !== dirty || $[60] !== disabled || $[61] !== errors || $[62] !== maxLength || $[63] !== onValueChange || $[64] !== optionalLabel || $[65] !== pending || $[66] !== readOnly || $[67] !== requiredness || $[68] !== state || $[69] !== t11 || $[70] !== t13 || $[71] !== t3 || $[72] !== touched || $[73] !== value) {
+		t15 = /* @__PURE__ */ jsxs(TextInput.Root, {
+			value,
+			onValueChange,
+			disabled,
+			readOnly,
+			requiredness,
+			optionalLabel,
+			errors,
+			dirty,
+			touched,
+			pending,
+			maxLength,
+			state,
+			className,
+			children: [
+				t3,
+				t11,
+				t12,
+				t13,
+				t14
+			]
+		});
+		$[58] = className;
+		$[59] = dirty;
+		$[60] = disabled;
+		$[61] = errors;
+		$[62] = maxLength;
+		$[63] = onValueChange;
+		$[64] = optionalLabel;
+		$[65] = pending;
+		$[66] = readOnly;
+		$[67] = requiredness;
+		$[68] = state;
+		$[69] = t11;
+		$[70] = t13;
+		$[71] = t3;
+		$[72] = touched;
+		$[73] = value;
+		$[74] = t15;
+	} else t15 = $[74];
+	return t15;
+};
+export { TextField };

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

@@ -0,0 +1,22 @@
+import './text-field.css';// src/components/text-field/text-field.module.scss
+var root = "_root_15bd7_3";
+var group = "_group_15bd7_6";
+var control = "_control_15bd7_65";
+var bar = "_bar_15bd7_88";
+var inlay = "_inlay_15bd7_98";
+var action = "_action_15bd7_109";
+var copyStatus = "_copyStatus_15bd7_125";
+var counter = "_counter_15bd7_133";
+var visuallyHidden = "_visuallyHidden_15bd7_156";
+var text_field_module_default = {
+	root,
+	group,
+	control,
+	bar,
+	inlay,
+	action,
+	copyStatus,
+	counter,
+	visuallyHidden
+};
+export { action, bar, control, copyStatus, counter, text_field_module_default as default, group, inlay, root, visuallyHidden };

package/dist/components/text-field/text-input-context.d.ts

@@ -0,0 +1,35 @@
+import { type Context } from "react";
+import type { FieldState } from "../field/index.ts";
+import type { BusyPhase } from "../../lib/hooks/index.ts";
+/** The element a text input's parts read from and return focus to. */
+export type TextInputControl = HTMLInputElement | HTMLTextAreaElement;
+/** What a text input's `Root` hands its parts. */
+export type TextInputContextValue = Readonly<{
+    /** Projected by `Root`; every part reads it, none of them own it. */
+    state: FieldState;
+    value: string;
+    setValue: (value: string) => void;
+    /** The errors `Root` was given, which `Error` renders. */
+    errors: unknown;
+    /** The word an optional field's label trails. */
+    optionalLabel: string;
+    /** Ref callback the control part hands its element to. */
+    setControl: (control: TextInputControl | null) => void;
+    /** Returns focus to the control, after a part such as `Clear` acts. */
+    focusControl: () => void;
+    /** Focuses the control and selects its text, for the user to copy by hand. */
+    selectControl: () => void;
+    maxLength: number | undefined;
+    phase: BusyPhase;
+}>;
+/** The context a text input's `Root` provides. */
+export declare const TextInputContext: Context<TextInputContextValue | null>;
+/**
+ * The surrounding text input's projected state and value, for a part of its own
+ * such as `Textarea`.
+ *
+ * @example
+ * const { value, setValue } = useTextInputContext();
+ */
+export declare const useTextInputContext: () => TextInputContextValue;
+//# sourceMappingURL=text-input-context.d.ts.map

package/dist/components/text-field/text-input-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input-context.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-input-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE1D,sEAAsE;AACtE,MAAM,MAAM,gBAAgB,GACzB,gBAAgB,GAChB,mBAAmB,CAAC;AAEvB,kDAAkD;AAClD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,qEAAqE;IACrE,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,0DAA0D;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,uEAAuE;IACvE,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,8EAA8E;IAC9E,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,SAAS,CAAC;CACjB,CAAC,CAAC;AAEH,kDAAkD;AAClD,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,GAAG,IAAI,CACjB,CAAC;AAEnD;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,QAC3B,qBAIF,CAAC"}

package/dist/components/text-field/text-input-context.js

@@ -0,0 +1,16 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/text-field/text-input-context.ts
+/** The context a text input's `Root` provides. */
+var TextInputContext = createContext(null);
+/**
+* The surrounding text input's projected state and value, for a part of its own
+* such as `Textarea`.
+*
+* @example
+* const { value, setValue } = useTextInputContext();
+*/
+var useTextInputContext = () => {
+	return useRequiredContext(TextInputContext, "Text input parts must be rendered within <TextInput.Root>.");
+};
+export { TextInputContext, useTextInputContext };

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

@@ -0,0 +1,84 @@
+import { type InputProps as BaseInputProps } from "@base-ui/react/input";
+import { type ComponentProps, type ReactNode } from "react";
+import { Field, type FieldErrorProps, type FieldLabelProps, type FieldProps, type FieldState } from "../field/index.ts";
+export type TextInputRootProps = Omit<FieldProps, "label" | "description"> & Readonly<{
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Advisory maximum, shown by `Counter`. The control does not truncate. */
+    maxLength?: number;
+    /** States no prop here owns, projected over the ones that do. */
+    state?: FieldState;
+    className?: string;
+    children?: ReactNode;
+}>;
+declare const TextInputRoot: ({ value, onValueChange, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending, maxLength, state, className, children, }: TextInputRootProps) => ReactNode;
+export type TextInputLabelProps = Omit<FieldLabelProps, "requiredness" | "optionalLabel">;
+declare const TextInputLabel: ({ children, ...props }: TextInputLabelProps) => ReactNode;
+declare const TextInputGroup: ({ className, children, ...props }: ComponentProps<"div">) => ReactNode;
+declare const TextInputBar: ({ className, ...props }: ComponentProps<"div">) => ReactNode;
+declare const TextInputInlay: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+declare const TextInputAffix: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type TextInputInputProps = Omit<BaseInputProps, "value" | "defaultValue" | "onValueChange">;
+declare const TextInputInput: ({ type, className, ...props }: TextInputInputProps) => ReactNode;
+export type TextInputClearProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Clear". */
+    label: string;
+    className?: string;
+}>;
+declare const TextInputClear: ({ label, className, }: TextInputClearProps) => ReactNode;
+export type TextInputCopyProps = Readonly<{
+    /** Accessible name and tooltip hint, such as "Copy". */
+    label: string;
+    /** Accessible name and announcement while the confirmation shows, such as "Copied". */
+    copiedLabel: string;
+    /** Accessible name and announcement once copying failed and the text is selected instead. */
+    failedLabel: string;
+    className?: string;
+}>;
+declare const TextInputCopy: ({ label, copiedLabel, failedLabel, className, }: TextInputCopyProps) => ReactNode;
+declare const TextInputCounter: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type TextInputPendingProps = Readonly<{
+    className?: string;
+}>;
+declare const TextInputPending: ({ className, }: TextInputPendingProps) => ReactNode;
+export type TextInputErrorProps = Omit<FieldErrorProps, "children">;
+declare const TextInputError: (props: TextInputErrorProps) => ReactNode;
+/** The parts of a text input. */
+export type TextInputParts = Readonly<{
+    Root: typeof TextInputRoot;
+    Label: typeof TextInputLabel;
+    Group: typeof TextInputGroup;
+    Bar: typeof TextInputBar;
+    Inlay: typeof TextInputInlay;
+    Affix: typeof TextInputAffix;
+    Input: typeof TextInputInput;
+    Clear: typeof TextInputClear;
+    Copy: typeof TextInputCopy;
+    Counter: typeof TextInputCounter;
+    Pending: typeof TextInputPending;
+    Description: typeof Field.Description;
+    Error: typeof TextInputError;
+}>;
+/**
+ * The parts of a text input: the field frame, a group carrying the border and
+ * its inlays, and the bare control inside it. A `Bar` is a strip of inlays along
+ * the bottom edge of the group, for a control the inlays cannot sit beside. For
+ * the ordinary case, use the `TextField` shorthand, which is assembled from
+ * exactly these parts. An `Affix` is decoration, so its meaning belongs in the
+ * label or description too. `Error` renders the errors `Root` was given.
+ *
+ * @example
+ * <TextInput.Root value={value} onValueChange={setValue} errors={errors} optionalLabel="optional">
+ * 	<TextInput.Label>Email</TextInput.Label>
+ * 	<TextInput.Group>
+ * 		<TextInput.Input type="email" />
+ * 		<TextInput.Clear label="Clear" />
+ * 	</TextInput.Group>
+ * 	<TextInput.Error />
+ * </TextInput.Root>
+ */
+export declare const TextInput: TextInputParts;
+export {};
+//# sourceMappingURL=text-input.d.ts.map

package/dist/components/text-field/text-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-input.d.ts","sourceRoot":"","sources":["../../../src/components/text-field/text-input.tsx"],"names":[],"mappings":"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"}