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

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

@@ -0,0 +1,73 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Tone } from "../../lib/tone.ts";
+import { type SvgComponent } from "../icon/icon.tsx";
+/**
+ * How a message is announced: `status` waits for a pause in what a screen
+ * reader is saying, `alert` interrupts it.
+ */
+export type StatusMessageLive = "status" | "alert";
+export type StatusMessageRootProps = Readonly<{
+    /**
+     * Makes the message a live region, announced when it appears or changes.
+     * Leave it out for a message that is not news.
+     */
+    live?: StatusMessageLive;
+    className?: string;
+    children?: ReactNode;
+}>;
+export type StatusMessageIconProps = Readonly<{
+    /** The glyph, from a SVGR `?react` import. */
+    svg: SvgComponent;
+    /** The disc's colour. @default "neutral" */
+    tone?: Tone;
+    className?: string;
+}>;
+export type StatusMessageIllustrationProps = Readonly<{
+    /** A picture, a logo or an indicator, hidden from assistive technology. */
+    children: ReactNode;
+    className?: string;
+}>;
+export type StatusMessageTitleProps = Readonly<{
+    /** A heading to render as, such as `<h2 />`, where the page's outline needs one. */
+    render?: ReactElement;
+    className?: string;
+    children: ReactNode;
+}>;
+export type StatusMessageDescriptionProps = Readonly<{
+    className?: string;
+    children: ReactNode;
+}>;
+export type StatusMessageActionProps = Readonly<{
+    className?: string;
+    /** The buttons or links that lead on from the message. */
+    children: ReactNode;
+}>;
+declare const Root: ({ live, className, children, }: StatusMessageRootProps) => ReactNode;
+declare const StatusIcon: ({ svg, tone, className, }: StatusMessageIconProps) => ReactNode;
+declare const Illustration: ({ className, children, }: StatusMessageIllustrationProps) => ReactNode;
+declare const Title: ({ render, className, children, }: StatusMessageTitleProps) => ReactElement;
+declare const Description: ({ className, children, }: StatusMessageDescriptionProps) => ReactNode;
+declare const Action: ({ className, children, }: StatusMessageActionProps) => ReactNode;
+type StatusMessageNamespace = Readonly<{
+    Root: typeof Root;
+    Icon: typeof StatusIcon;
+    Illustration: typeof Illustration;
+    Title: typeof Title;
+    Description: typeof Description;
+    Action: typeof Action;
+}>;
+/**
+ * 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>
+ */
+export declare const StatusMessage: StatusMessageNamespace;
+export {};
+//# sourceMappingURL=status-message.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-message.d.ts","sourceRoot":"","sources":["../../../src/components/status-message/status-message.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAG3D;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC7C,8CAA8C;IAC9C,GAAG,EAAE,YAAY,CAAC;IAClB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,8BAA8B,GAAG,QAAQ,CAAC;IACrD,2EAA2E;IAC3E,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC9C,oFAAoF;IACpF,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,6BAA6B,GAAG,QAAQ,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,QAAA,MAAM,IAAI,mCAIP,sBAAsB,KAAG,SAI3B,CAAC;AAEF,QAAA,MAAM,UAAU,8BAIb,sBAAsB,KAAG,SAO3B,CAAC;AAEF,QAAA,MAAM,YAAY,6BAGf,8BAA8B,KAAG,SAMnC,CAAC;AAEF,QAAA,MAAM,KAAK,qCAIR,uBAAuB,KAAG,YAQ1B,CAAC;AAEJ,QAAA,MAAM,WAAW,6BAGd,6BAA6B,KAAG,SAIlC,CAAC;AAEF,QAAA,MAAM,MAAM,6BAGT,wBAAwB,KAAG,SAI7B,CAAC;AAEF,KAAK,sBAAsB,GAAG,QAAQ,CAAC;IACtC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,YAAY,EAAE,OAAO,YAAY,CAAC;IAClC,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,WAAW,EAAE,OAAO,WAAW,CAAC;IAChC,MAAM,EAAE,OAAO,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,sBAO3B,CAAC"}

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,27 @@
+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;
+//# sourceMappingURL=status-preset.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"status-preset.d.ts","sourceRoot":"","sources":["../../../src/components/status-message/status-preset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAEN,KAAK,iBAAiB,EACtB,MAAM,sBAAsB,CAAC;AAE9B,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACxC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wDAAwD;IACxD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;;;GAKG;AACH,eAAO,MAAM,YAAY,iEAQtB,iBAAiB,GACnB,QAAQ,CAAC;IACR,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,IAAI,CAAC;CACX,CAAC,KAAG,SAeL,CAAC"}

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,4 @@
+export * from "./switch.tsx";
+export * from "./switch-field.tsx";
+export * from "./tsf-switch-field.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC"}

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 FieldProps } from "../field/index.ts";
+export type SwitchFieldProps = FieldProps & Pick<BaseSwitch.Root.Props, "checked" | "defaultChecked" | "onCheckedChange" | "onBlur" | "id" | "value" | "disabled" | "readOnly"> & Readonly<{
+    /** 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;
+//# sourceMappingURL=switch-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.d.ts","sourceRoot":"","sources":["../../../src/components/switch-field/switch-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,UAAU,EAEf,MAAM,mBAAmB,CAAC;AAG3B,MAAM,MAAM,gBAAgB,GAAG,UAAU,GACxC,IAAI,CACH,UAAU,CAAC,IAAI,CAAC,KAAK,EACnB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,GACjB,QAAQ,GACR,IAAI,GACJ,OAAO,GACP,UAAU,GACV,UAAU,CACZ,GACD,QAAQ,CAAC;IACR,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,oHAYrB,gBAAgB,KAAG,SAgCrB,CAAC"}

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 };