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

package/dist/components/empty-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/empty-message/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/components/empty-message/index.js

@@ -0,0 +1 @@
+export { EmptyMessage } from "./empty-message.js";

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

@@ -0,0 +1,44 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { type ErrorBoundaryPropsWithRender, type FallbackProps } from "react-error-boundary";
+import type { SvgComponent } from "../icon/icon.tsx";
+type SharedProps = Readonly<{
+    children: ReactNode;
+    /** Called with what was thrown, such as to log it. */
+    onError?: (error: unknown, info: ErrorInfo) => void;
+    /** Called when the boundary resets, from a retry or a change in `resetKeys`. */
+    onReset?: ErrorBoundaryPropsWithRender["onReset"];
+    /** Values that reset the boundary when one of them changes. */
+    resetKeys?: ReadonlyArray<unknown>;
+}>;
+type DefaultFallbackProps = SharedProps & Readonly<{
+    /** The fallback's title: what happened. */
+    title: string;
+    /** The fallback's description: what to do next, or who can help. */
+    description?: string;
+    /** A glyph on the fallback's error disc. */
+    icon?: SvgComponent;
+    /** The retry button's label; without it, the fallback offers no retry. */
+    retryLabel?: string;
+    fallbackRender?: never;
+}>;
+type CustomFallbackProps = SharedProps & Readonly<{
+    /** Renders the fallback in place of `ErrorMessage`. */
+    fallbackRender: (props: FallbackProps) => ReactNode;
+    title?: never;
+    description?: never;
+    icon?: never;
+    retryLabel?: never;
+}>;
+export type ErrorBoundaryProps = DefaultFallbackProps | CustomFallbackProps;
+/**
+ * Renders a fallback in place of `children` once rendering them throws: an
+ * `ErrorMessage` with the given copy, or whatever `fallbackRender` returns.
+ *
+ * @example
+ * <ErrorBoundary title="This widget failed to load" retryLabel="Try again">
+ * 	<Widget />
+ * </ErrorBoundary>
+ */
+export declare const ErrorBoundary: (props: ErrorBoundaryProps) => ReactNode;
+export {};
+//# sourceMappingURL=error-boundary.d.ts.map

package/dist/components/error-boundary/error-boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/error-boundary.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EACN,KAAK,4BAA4B,EACjC,KAAK,aAAa,EAElB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,KAAK,WAAW,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACpD,gFAAgF;IAChF,OAAO,CAAC,EAAE,4BAA4B,CAAC,SAAS,CAAC,CAAC;IAClD,+DAA+D;IAC/D,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC,CAAC;AAEH,KAAK,oBAAoB,GAAG,WAAW,GACtC,QAAQ,CAAC;IACR,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,KAAK,CAAC;CACvB,CAAC,CAAC;AAEJ,KAAK,mBAAmB,GAAG,WAAW,GACrC,QAAQ,CAAC;IACR,uDAAuD;IACvD,cAAc,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC,CAAC;AAEJ,MAAM,MAAM,kBAAkB,GAC3B,oBAAoB,GACpB,mBAAmB,CAAC;AA2BvB;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,UAClB,kBAAkB,KACvB,SAgBF,CAAC"}

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

@@ -0,0 +1,60 @@
+import SvgRestartAlt from "../../vendor/@material-design-icons/svg/outlined/restart_alt.js";
+import { Button } from "../button/button.js";
+import { ErrorMessage } from "../error-message/error-message.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { ErrorBoundary } from "react-error-boundary";
+// src/components/error-boundary/error-boundary.tsx
+var defaultFallback = ({ title, description, icon, retryLabel }) => ({ resetErrorBoundary }) => /* @__PURE__ */ jsx(ErrorMessage, {
+	title,
+	description,
+	icon,
+	action: retryLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(Button, {
+		variant: "primary",
+		icon: SvgRestartAlt,
+		onClick: () => resetErrorBoundary(),
+		children: retryLabel
+	})
+});
+/**
+* Renders a fallback in place of `children` once rendering them throws: an
+* `ErrorMessage` with the given copy, or whatever `fallbackRender` returns.
+*
+* @example
+* <ErrorBoundary title="This widget failed to load" retryLabel="Try again">
+* 	<Widget />
+* </ErrorBoundary>
+*/
+var ErrorBoundary$1 = (props) => {
+	const $ = c(10);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.fallbackRender === void 0 ? defaultFallback(props) : props.fallbackRender;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== props.resetKeys) {
+		t1 = props.resetKeys === void 0 ? void 0 : [...props.resetKeys];
+		$[2] = props.resetKeys;
+		$[3] = t1;
+	} else t1 = $[3];
+	let t2;
+	if ($[4] !== props.children || $[5] !== props.onError || $[6] !== props.onReset || $[7] !== t0 || $[8] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ErrorBoundary, {
+			fallbackRender: t0,
+			onError: props.onError,
+			onReset: props.onReset,
+			resetKeys: t1,
+			children: props.children
+		});
+		$[4] = props.children;
+		$[5] = props.onError;
+		$[6] = props.onReset;
+		$[7] = t0;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	return t2;
+};
+export { ErrorBoundary$1 as ErrorBoundary };

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

@@ -0,0 +1,2 @@
+export * from "./error-boundary.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/error-boundary/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-boundary/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

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

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

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type StatusPresetProps } from "../status-message/status-preset.tsx";
+export type ErrorMessageProps = StatusPresetProps;
+/**
+ * What a region shows when its content failed to arrive: an icon on an error
+ * disc, a title, a description and a way on. Announced at once as an alert.
+ *
+ * @example
+ * <ErrorMessage
+ * 	title="The declarations could not be loaded"
+ * 	description="Check your connection and try again."
+ * 	action={<Button onClick={refetch}>Try again</Button>}
+ * />
+ */
+export declare const ErrorMessage: (props: ErrorMessageProps) => ReactNode;
+//# sourceMappingURL=error-message.d.ts.map

package/dist/components/error-message/error-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-message.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/error-message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,iBAAiB,EACtB,MAAM,qCAAqC,CAAC;AAE7C,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;AAElD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,UACjB,iBAAiB,KACtB,SAEF,CAAC"}

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

@@ -0,0 +1,30 @@
+import { StatusPreset } from "../status-message/status-preset.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/error-message/error-message.tsx
+/**
+* What a region shows when its content failed to arrive: an icon on an error
+* disc, a title, a description and a way on. Announced at once as an alert.
+*
+* @example
+* <ErrorMessage
+* 	title="The declarations could not be loaded"
+* 	description="Check your connection and try again."
+* 	action={<Button onClick={refetch}>Try again</Button>}
+* />
+*/
+var ErrorMessage = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(StatusPreset, {
+			live: "alert",
+			tone: "error",
+			...props
+		});
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+export { ErrorMessage };

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

@@ -0,0 +1,2 @@
+export * from "./error-message.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/error-message/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-message/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

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

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

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

@@ -0,0 +1,33 @@
+import { type Context } from "react";
+/** Hands each block of error messages its place in the wave it arrives with. */
+export type ErrorCascade = Readonly<{
+    /**
+     * The number of messages ahead of `block` in its wave. A block keeps the index
+     * it was first given; one that appears after the wave has ended starts the
+     * next one at zero.
+     */
+    claim: (block: object, count: number) => number;
+}>;
+/**
+ * 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
+ */
+export declare const createErrorCascade: (schedule?: (endWave: () => void) => void) => ErrorCascade;
+declare const ErrorCascadeContext: Context<ErrorCascade | undefined>;
+/** Provides the cascade the error texts inside it share. */
+export declare const ErrorCascadeProvider: typeof ErrorCascadeContext.Provider;
+/**
+ * The cascade of the enclosing `Form.Root`, if any.
+ *
+ * @example
+ * const cascade = useErrorCascade();
+ */
+export declare const useErrorCascade: () => ErrorCascade | undefined;
+export {};
+//# sourceMappingURL=error-cascade.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-cascade.d.ts","sourceRoot":"","sources":["../../../src/components/error-text/error-cascade.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,OAAO,EAGZ,MAAM,OAAO,CAAC;AAEf,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC;;;;OAIG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAChD,CAAC,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,cACpB,CAAC,OAAO,EAAE,MAAM,IAAI,KAAK,IAAI,KAGrC,YAuBF,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,OAAO,CACjC,YAAY,GAAG,SAAS,CAC6B,CAAC;AAEvD,4DAA4D;AAC5D,eAAO,MAAM,oBAAoB,EAAE,OAAO,mBAAmB,CAAC,QACjC,CAAC;AAE9B;;;;;GAKG;AACH,eAAO,MAAM,eAAe,QACzB,YAAY,GACZ,SAA4C,CAAC"}

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,23 @@
+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;
+//# sourceMappingURL=error-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../src/components/error-text/error-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEN,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,cAAc,GAAG,QAAQ,CACpC,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAC5C,QAAQ,CAAC;IACR,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC,GACF,CACG,QAAQ,CAAC;IAAE,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAChD,QAAQ,CAAC;IAAE,EAAE,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC5C,CACF,CAAC;AAaF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,8CAMnB,cAAc,KAAG,SAgCnB,CAAC"}

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,2 @@
+export * from "./error-text.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error-text/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

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,12 @@
+/**
+ * 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;
+}>;
+//# sourceMappingURL=choice-option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"choice-option.d.ts","sourceRoot":"","sources":["../../../src/components/field/choice-option.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC"}

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

@@ -0,0 +1,50 @@
+/**
+ * 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";
+/** The states a form control projects onto its markup. */
+export type FieldState = Readonly<{
+    disabled?: boolean;
+    readonly?: boolean;
+    requiredness?: Requiredness;
+    invalid?: boolean;
+    valid?: boolean;
+    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({ invalid: true, disabled: false })} />
+ * // <div data-invalid="" />
+ */
+export declare const fieldStateAttributes: (state: FieldState) => FieldStateAttributes;
+//# sourceMappingURL=field-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field-state.d.ts","sourceRoot":"","sources":["../../../src/components/field/field-state.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,EAAE,CAAC;IACrB,eAAe,CAAC,EAAE,EAAE,CAAC;IACrB,cAAc,CAAC,EAAE,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,EAAE,CAAC;IACpB,oBAAoB,CAAC,EAAE,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,EAAE,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,UACzB,UAAU,KACf,oBAkCD,CAAC"}

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({ invalid: true, 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.invalid === true && { "data-invalid": flagged },
+	...state.valid === true && { "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;
+  }
+}