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

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

@@ -0,0 +1,182 @@
+import { Icon } from "../icon/icon.js";
+import status_message_module_default from "./status-message.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/status-message/status-message.tsx
+var Root = (t0) => {
+	const $ = c(6);
+	const { live, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(status_message_module_default.root, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== live || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			role: live,
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = live;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+var StatusIcon = (t0) => {
+	const $ = c(8);
+	const { svg, tone: t1, className } = t0;
+	const tone = t1 === void 0 ? "neutral" : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = clsx(status_message_module_default.disc, className);
+		$[0] = className;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== svg) {
+		t3 = /* @__PURE__ */ jsx(Icon, {
+			svg,
+			label: "",
+			size: 2
+		});
+		$[2] = svg;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== t2 || $[5] !== t3 || $[6] !== tone) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			"data-tone": tone,
+			"data-variant": "subtle",
+			className: t2,
+			children: t3
+		});
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = tone;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+var Illustration = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(status_message_module_default.illustration, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			"aria-hidden": "true",
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+var Title = (t0) => {
+	const $ = c(8);
+	const { render, className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(status_message_module_default.title, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = {
+			className: t1,
+			children
+		};
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== render || $[6] !== t2) {
+		t3 = {
+			defaultTagName: "p",
+			render,
+			props: t2
+		};
+		$[5] = render;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return useRender(t3);
+};
+var Description = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(status_message_module_default.description, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("p", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+var Action = (t0) => {
+	const $ = c(5);
+	const { className, children } = t0;
+	let t1;
+	if ($[0] !== className) {
+		t1 = clsx(status_message_module_default.action, className);
+		$[0] = className;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== children || $[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children
+		});
+		$[2] = children;
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+};
+/**
+* The message a region shows in place of its content, as parts: an icon on a
+* tinted disc or an illustration, a title, a description and an action. `Root`
+* is the live region. Where it sits is the caller's.
+*
+* @example
+* <StatusMessage.Root live="status">
+* 	<StatusMessage.Icon svg={InboxIcon} />
+* 	<StatusMessage.Title>Your inbox is empty</StatusMessage.Title>
+* 	<StatusMessage.Description>New messages show up here.</StatusMessage.Description>
+* </StatusMessage.Root>
+*/
+var StatusMessage = {
+	Root,
+	Icon: StatusIcon,
+	Illustration,
+	Title,
+	Description,
+	Action
+};
+export { StatusMessage };

package/dist/components/status-message/status-message.module.js

@@ -0,0 +1,16 @@
+import './status-message.css';// src/components/status-message/status-message.module.scss
+var root = "_root_6woix_3";
+var disc = "_disc_6woix_12";
+var illustration = "_illustration_6woix_104";
+var title = "_title_6woix_109";
+var description = "_description_6woix_112";
+var action = "_action_6woix_116";
+var status_message_module_default = {
+	root,
+	disc,
+	illustration,
+	title,
+	description,
+	action
+};
+export { action, status_message_module_default as default, description, disc, illustration, root, title };

package/dist/components/status-message/status-preset.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { Tone } from "../../lib/tone.ts";
+import type { SvgComponent } from "../icon/icon.tsx";
+import { type StatusMessageLive } from "./status-message.tsx";
+/** What a status preset such as `EmptyMessage` or `ErrorMessage` shows. */
+export type StatusPresetProps = Readonly<{
+    /** What the region says, such as "No declarations yet". */
+    title: string;
+    /** What would change it, or who can help. */
+    description?: string;
+    /** A glyph on a disc in the preset's tone. */
+    icon?: SvgComponent;
+    /** A way on, such as a button to add one or a retry. */
+    action?: ReactNode;
+    className?: string;
+}>;
+/**
+ * A status message announced as `live`, with its icon on a `tone` disc.
+ *
+ * @example
+ * <StatusPreset live="status" tone="neutral" title="No declarations yet" />
+ */
+export declare const StatusPreset: ({ live, tone, title, description, icon, action, className, }: StatusPresetProps & Readonly<{
+    live: StatusMessageLive;
+    tone: Tone;
+}>) => ReactNode;

package/dist/components/status-message/status-preset.js

@@ -0,0 +1,64 @@
+import { StatusMessage } from "./status-message.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/status-message/status-preset.tsx
+/**
+* A status message announced as `live`, with its icon on a `tone` disc.
+*
+* @example
+* <StatusPreset live="status" tone="neutral" title="No declarations yet" />
+*/
+var StatusPreset = (t0) => {
+	const $ = c(16);
+	const { live, tone, title, description, icon, action, className } = t0;
+	let t1;
+	if ($[0] !== icon || $[1] !== tone) {
+		t1 = icon === void 0 ? null : /* @__PURE__ */ jsx(StatusMessage.Icon, {
+			svg: icon,
+			tone
+		});
+		$[0] = icon;
+		$[1] = tone;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== title) {
+		t2 = /* @__PURE__ */ jsx(StatusMessage.Title, { children: title });
+		$[3] = title;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== description) {
+		t3 = description === void 0 ? null : /* @__PURE__ */ jsx(StatusMessage.Description, { children: description });
+		$[5] = description;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== action) {
+		t4 = action === void 0 ? null : /* @__PURE__ */ jsx(StatusMessage.Action, { children: action });
+		$[7] = action;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== className || $[10] !== live || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(StatusMessage.Root, {
+			live,
+			className,
+			children: [
+				t1,
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[9] = className;
+		$[10] = live;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+};
+export { StatusPreset };

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

@@ -0,0 +1,3 @@
+export * from "./switch.tsx";
+export * from "./switch-field.tsx";
+export * from "./tsf-switch-field.tsx";

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

@@ -0,0 +1,4 @@
+import { Switch } from "./switch.js";
+import { SwitchField } from "./switch-field.js";
+import { TSFSwitchField } from "./tsf-switch-field.js";
+export { Switch, SwitchField, TSFSwitchField };

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

@@ -0,0 +1,23 @@
+import type { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ReactNode } from "react";
+import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
+export type SwitchFieldProps = FieldProps & Pick<BaseSwitch.Root.Props, "checked" | "defaultChecked" | "onCheckedChange" | "id" | "value" | "disabled" | "readOnly"> & Readonly<{
+    onBlur?: FieldBlurHandler;
+    /** The form field's name. */
+    name?: string;
+    /** Applied to the field wrapper, so callers can place the row. */
+    className?: string;
+}>;
+/**
+ * The assembled switch: the label beside the track, which also toggles it, then
+ * the description and the error.
+ *
+ * @example
+ * <SwitchField
+ * 	label="Email me about new messages"
+ * 	optionalLabel="optional"
+ * 	checked={enabled}
+ * 	onCheckedChange={setEnabled}
+ * />
+ */
+export declare const SwitchField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props }: SwitchFieldProps) => ReactNode;

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

@@ -0,0 +1,142 @@
+import { Field } from "../field/field.js";
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { Switch } from "./switch.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/switch-field/switch-field.tsx
+/**
+* The assembled switch: the label beside the track, which also toggles it, then
+* the description and the error.
+*
+* @example
+* <SwitchField
+* 	label="Email me about new messages"
+* 	optionalLabel="optional"
+* 	checked={enabled}
+* 	onCheckedChange={setEnabled}
+* />
+*/
+var SwitchField = (t0) => {
+	const $ = c(41);
+	let className;
+	let description;
+	let dirty;
+	let errors;
+	let label;
+	let name;
+	let optionalLabel;
+	let pending;
+	let props;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = description;
+		$[3] = dirty;
+		$[4] = errors;
+		$[5] = label;
+		$[6] = name;
+		$[7] = optionalLabel;
+		$[8] = pending;
+		$[9] = props;
+		$[10] = requiredness;
+		$[11] = touched;
+	} else {
+		className = $[1];
+		description = $[2];
+		dirty = $[3];
+		errors = $[4];
+		label = $[5];
+		name = $[6];
+		optionalLabel = $[7];
+		pending = $[8];
+		props = $[9];
+		requiredness = $[10];
+		touched = $[11];
+	}
+	const ids = Field.useIds();
+	const t1 = props.checked === true;
+	const t2 = requiredness === "required";
+	let t3;
+	if ($[12] !== ids.controlId || $[13] !== props || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Switch.Control, {
+			name: ids.controlId,
+			inputRef: detachHiddenInput,
+			required: t2,
+			...props
+		});
+		$[12] = ids.controlId;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	let t4;
+	if ($[16] !== label || $[17] !== optionalLabel || $[18] !== requiredness) {
+		t4 = /* @__PURE__ */ jsx(Field.InlineLabelText, {
+			label,
+			requiredness,
+			optionalLabel
+		});
+		$[16] = label;
+		$[17] = optionalLabel;
+		$[18] = requiredness;
+		$[19] = t4;
+	} else t4 = $[19];
+	let t5;
+	if ($[20] !== t3 || $[21] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Switch.Label, { children: [t3, t4] });
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+	} else t5 = $[22];
+	let t6;
+	if ($[23] !== description) {
+		t6 = /* @__PURE__ */ jsx(Switch.Description, { children: description });
+		$[23] = description;
+		$[24] = t6;
+	} else t6 = $[24];
+	let t7;
+	if ($[25] !== errors) {
+		t7 = /* @__PURE__ */ jsx(Switch.Error, { children: errors });
+		$[25] = errors;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== className || $[28] !== dirty || $[29] !== errors || $[30] !== name || $[31] !== pending || $[32] !== props.disabled || $[33] !== props.readOnly || $[34] !== requiredness || $[35] !== t1 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== touched) {
+		t8 = /* @__PURE__ */ jsxs(Switch.Root, {
+			name,
+			className,
+			disabled: props.disabled,
+			readOnly: props.readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t1,
+			children: [
+				t5,
+				t6,
+				t7
+			]
+		});
+		$[27] = className;
+		$[28] = dirty;
+		$[29] = errors;
+		$[30] = name;
+		$[31] = pending;
+		$[32] = props.disabled;
+		$[33] = props.readOnly;
+		$[34] = requiredness;
+		$[35] = t1;
+		$[36] = t5;
+		$[37] = t6;
+		$[38] = t7;
+		$[39] = touched;
+		$[40] = t8;
+	} else t8 = $[40];
+	return t8;
+};
+export { SwitchField };

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

@@ -0,0 +1,145 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_1ietq_3 {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--switch-gap, var(--sys-unit-8));
+  }
+  ._label_1ietq_9 {
+    cursor: pointer;
+  }
+  ._label_1ietq_9:hover ._control_1ietq_12 {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._label_1ietq_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._label_1ietq_9:hover ._control_1ietq_12:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._label_1ietq_9 {
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "control text";
+    align-items: center;
+    gap: var(--sys-unit-1) var(--sys-unit-6);
+  }
+  ._label_1ietq_9:has(> [data-optional-suffix]) {
+    grid-template-areas: "control text" "control optional";
+  }
+  ._label_1ietq_9 {
+    min-block-size: var(--sys-unit-20);
+  }
+  ._control_1ietq_12 {
+    --_switch-track-inline-size: var(
+    	--switch-track-inline-size,
+    	var(--sys-unit-26)
+    );
+    --_switch-track-block-size: var(
+    	--switch-track-block-size,
+    	var(--sys-unit-16)
+    );
+    --_switch-track-inset: calc(1px + var(--sys-unit-2));
+    --_switch-thumb-size: calc(
+    	var(--_switch-track-block-size) - 2 *
+    		var(--_switch-track-inset)
+    );
+    --_switch-travel: calc(
+    	var(--_switch-track-inline-size) - 2 *
+    		var(--_switch-track-inset) -
+    		var(--_switch-thumb-size)
+    );
+    --_switch-thumb-bg: var(
+    	--switch-thumb-bg,
+    	var(--sys-color-outline)
+    );
+    --_switch-on-bg: var(
+    	--switch-on-bg,
+    	var(--sys-color-primary)
+    );
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    grid-area: control;
+    align-self: center;
+    justify-self: center;
+    box-sizing: border-box;
+    inline-size: var(--_switch-track-inline-size);
+    block-size: var(--_switch-track-block-size);
+    border: 1px solid var(--switch-border, var(--sys-color-border));
+    border-radius: var(--sys-radius-full);
+    background: var(--switch-track-bg, var(--sys-color-surface));
+    padding: var(--sys-unit-2);
+    color: var(--switch-on-thumb-bg, var(--sys-color-on-primary));
+  }
+  ._control_1ietq_12 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._control_1ietq_12[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._control_1ietq_12 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._control_1ietq_12[data-focused] {
+    border-color: var(--_switch-on-bg);
+  }
+  ._control_1ietq_12[data-checked] {
+    border-color: var(--_switch-on-bg);
+    background: var(--_switch-on-bg);
+  }
+  ._control_1ietq_12[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    --field-placeholder-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+    --_switch-thumb-bg: var(--sys-color-error-outline);
+  }
+  ._control_1ietq_12[data-invalid][data-checked] {
+    background: var(--sys-color-error-fg);
+    color: var(--sys-color-error-bg);
+  }
+  ._control_1ietq_12[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._control_1ietq_12[data-readonly][data-checked] {
+    background: var(--sys-color-primary-container);
+  }
+  ._control_1ietq_12[data-disabled], ._control_1ietq_12[data-disabled][data-checked] {
+    --field-fg: var(--sys-color-disabled-fg);
+    --field-muted-fg: var(--sys-color-disabled-fg);
+    --field-placeholder-fg: var(--sys-color-disabled-fg);
+    color: var(--sys-color-disabled-fg);
+    cursor: not-allowed;
+    --_switch-on-bg: var(--sys-color-disabled-bg);
+    --_switch-thumb-bg: var(--sys-color-disabled-fg);
+    background: var(--sys-color-disabled-bg);
+  }
+  ._thumb_1ietq_129 {
+    inline-size: var(--_switch-thumb-size);
+    block-size: var(--_switch-thumb-size);
+    border-radius: var(--sys-radius-circle);
+    background: var(--_switch-thumb-bg);
+    translate: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._thumb_1ietq_129 {
+      transition: translate var(--sys-motion-short) var(--sys-motion-emphasized), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._thumb_1ietq_129[data-checked] {
+    background: currentcolor;
+    translate: var(--_switch-travel);
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ReactNode } from "react";
+import { Field, type FieldProps, type FieldRootProps } from "../field/index.ts";
+export type SwitchRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** The switch is on. */
+    filled?: boolean;
+    readOnly?: boolean;
+}>;
+declare const SwitchRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props }: SwitchRootProps) => ReactNode;
+declare const SwitchLabel: ({ className, ...props }: BaseField.Label.Props) => ReactNode;
+declare const SwitchControl: ({ className, ...props }: BaseSwitch.Root.Props) => ReactNode;
+/** The parts of a switch. */
+export type SwitchParts = Readonly<{
+    Root: typeof SwitchRoot;
+    Label: typeof SwitchLabel;
+    Control: typeof SwitchControl;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+}>;
+/**
+ * The styled parts of a base-ui Switch: a track with a sliding thumb that
+ * announces as a switch. `Label` wraps the control and its text, so the two
+ * share one hit area. For the ordinary case, use `SwitchField`.
+ *
+ * @example
+ * <Switch.Root filled={enabled}>
+ * 	<Switch.Label>
+ * 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
+ * 		Email me about new messages
+ * 	</Switch.Label>
+ * </Switch.Root>
+ */
+export declare const Switch: SwitchParts;
+export {};