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

package/dist/components/toast/toast.js

@@ -0,0 +1,77 @@
+import { Toast } from "@base-ui/react/toast";
+// src/components/toast/toast.ts
+/** The global toast manager, living outside React so non-component code can push. */
+var toastManager = Toast.createToastManager();
+var DEFAULT_TIMEOUT_MS = 5e3;
+var activeKeys = /* @__PURE__ */ new Map();
+var viewportReady = false;
+var buffered = [];
+/**
+* Releases the toasts pushed before the viewport subscribed to the manager.
+* Called once by `ToastProvider`, whose own effect runs after base-ui's
+* subscription; the manager drops anything emitted before that.
+*
+* @example
+* useEffect(flushBufferedToasts, []);
+*/
+var flushBufferedToasts = () => {
+	viewportReady = true;
+	for (const add of buffered.splice(0)) add();
+};
+var push = (tone, body, options = {}) => {
+	const { key, title, actions, timeout } = options;
+	if (key !== void 0) {
+		const existing = activeKeys.get(key);
+		if (existing !== void 0) return existing;
+	}
+	const resolvedTimeout = timeout ?? (actions && actions.length > 0 ? 0 : DEFAULT_TIMEOUT_MS);
+	const id = crypto.randomUUID();
+	const add = () => {
+		toastManager.add({
+			id,
+			type: tone,
+			timeout: resolvedTimeout,
+			data: {
+				tone,
+				title,
+				body,
+				actions
+			},
+			onClose: key !== void 0 ? () => {
+				if (activeKeys.get(key) === id) activeKeys.delete(key);
+			} : void 0
+		});
+	};
+	if (viewportReady) add();
+	else buffered.push(add);
+	if (key !== void 0) activeKeys.set(key, id);
+	return id;
+};
+/**
+* Pushes toasts from anywhere, components or not, into the viewport
+* `ToastProvider` renders. `key` dedupes, so one failed item raises one toast.
+*
+* @example
+* toast.error("The comment failed to send.", {
+* 	key: `outbox-${item.id}`,
+* 	actions: [{ label: "Retry", onClick: () => retry(item.id) }],
+* });
+*/
+var toast = {
+	success: (body, options) => push("success", body, options),
+	error: (body, options) => push("error", body, options),
+	info: (body, options) => push("info", body, options),
+	warning: (body, options) => push("warning", body, options),
+	notify: (tone, body, options) => push(tone, body, options),
+	dismiss: (id) => toastManager.close(id)
+};
+/**
+* The stable toast push helpers, for components that prefer a hook over
+* importing {@link toast}.
+*
+* @example
+* const { success } = useToast();
+* success("Comment sent.");
+*/
+var useToast = () => toast;
+export { flushBufferedToasts, toast, toastManager, useToast };

package/dist/components/toggle-group-field/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./toggle-group.tsx";
+export * from "./toggle-group-field.tsx";
+export * from "./tsf-toggle-group-field.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/toggle-group-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/dist/components/toggle-group-field/index.js

@@ -0,0 +1,4 @@
+import { ToggleGroup } from "./toggle-group.js";
+import { ToggleGroupField } from "./toggle-group-field.js";
+import { TSFToggleGroupField } from "./tsf-toggle-group-field.js";
+export { TSFToggleGroupField, ToggleGroup, ToggleGroupField };

package/dist/components/toggle-group-field/toggle-group-field.d.ts

@@ -0,0 +1,33 @@
+import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import type { FocusEventHandler, ReactNode } from "react";
+import type { ChoiceOption, FieldProps } from "../field/index.ts";
+export type ToggleGroupFieldProps = FieldProps & Readonly<{
+    /** The choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    /** The chosen values. */
+    value: readonly string[];
+    onValueChange: (value: readonly string[]) => void;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /** The form field's name. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: BaseToggleGroup.Props["orientation"];
+    /** Applied to the field wrapper, so callers can place the group. */
+    className?: string;
+}>;
+/**
+ * The assembled toggle group: a labelled row of chips, any number of them
+ * pressed, then the description and the error.
+ *
+ * @example
+ * <ToggleGroupField
+ * 	label="Days"
+ * 	optionalLabel="optional"
+ * 	options={[{ label: "Monday", value: "mon" }, { label: "Tuesday", value: "tue" }]}
+ * 	value={days}
+ * 	onValueChange={setDays}
+ * />
+ */
+export declare const ToggleGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className, }: ToggleGroupFieldProps) => ReactNode;
+//# sourceMappingURL=toggle-group-field.d.ts.map

package/dist/components/toggle-group-field/toggle-group-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group-field/toggle-group-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EACX,YAAY,EACZ,UAAU,EACV,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,qBAAqB,GAAG,UAAU,GAC7C,QAAQ,CAAC;IACR,2CAA2C;IAC3C,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,yBAAyB;IACzB,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;IACzB,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC3C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;IACnD,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,mLAkB1B,qBAAqB,KAAG,SAsD1B,CAAC"}

package/dist/components/toggle-group-field/toggle-group-field.js

@@ -0,0 +1,158 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { ToggleGroup } from "./toggle-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/toggle-group-field/toggle-group-field.tsx
+/**
+* The assembled toggle group: a labelled row of chips, any number of them
+* pressed, then the description and the error.
+*
+* @example
+* <ToggleGroupField
+* 	label="Days"
+* 	optionalLabel="optional"
+* 	options={[{ label: "Monday", value: "mon" }, { label: "Tuesday", value: "tue" }]}
+* 	value={days}
+* 	onValueChange={setDays}
+* />
+*/
+var ToggleGroupField = (t0) => {
+	const $ = c(48);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className } = t0;
+	const { descriptionId, errorId, describedBy } = ToggleGroup.useIds();
+	let t1;
+	if ($[0] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[0] = errors;
+		$[1] = t1;
+	} else t1 = $[1];
+	const invalid = t1.length > 0;
+	const t2 = value.length > 0;
+	let t3;
+	if ($[2] !== label || $[3] !== optionalLabel || $[4] !== requiredness) {
+		t3 = /* @__PURE__ */ jsx(ToggleGroup.Legend, {
+			requiredness,
+			optionalLabel,
+			children: label
+		});
+		$[2] = label;
+		$[3] = optionalLabel;
+		$[4] = requiredness;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = description !== void 0;
+	let t5;
+	if ($[6] !== describedBy || $[7] !== invalid || $[8] !== t4) {
+		t5 = describedBy(t4, invalid);
+		$[6] = describedBy;
+		$[7] = invalid;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== onValueChange) {
+		t6 = (next) => onValueChange(next);
+		$[10] = onValueChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== options || $[13] !== readOnly) {
+		let t8;
+		if ($[15] !== readOnly) {
+			t8 = (option) => /* @__PURE__ */ jsx(ToggleGroup.Option, {
+				value: option.value,
+				readOnly,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value);
+			$[15] = readOnly;
+			$[16] = t8;
+		} else t8 = $[16];
+		t7 = options.map(t8);
+		$[12] = options;
+		$[13] = readOnly;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[17] !== disabled || $[18] !== invalid || $[19] !== onBlur || $[20] !== orientation || $[21] !== readOnly || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== value) {
+		t8 = /* @__PURE__ */ jsx(ToggleGroup.Group, {
+			"aria-describedby": t5,
+			readOnly,
+			invalid,
+			orientation,
+			disabled,
+			value,
+			onValueChange: t6,
+			onBlur,
+			children: t7
+		});
+		$[17] = disabled;
+		$[18] = invalid;
+		$[19] = onBlur;
+		$[20] = orientation;
+		$[21] = readOnly;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = t7;
+		$[25] = value;
+		$[26] = t8;
+	} else t8 = $[26];
+	let t9;
+	if ($[27] !== description || $[28] !== descriptionId) {
+		t9 = /* @__PURE__ */ jsx(ToggleGroup.Description, {
+			id: descriptionId,
+			children: description
+		});
+		$[27] = description;
+		$[28] = descriptionId;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== errorId || $[31] !== errors) {
+		t10 = /* @__PURE__ */ jsx(ToggleGroup.Error, {
+			id: errorId,
+			children: errors
+		});
+		$[30] = errorId;
+		$[31] = errors;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== className || $[34] !== dirty || $[35] !== disabled || $[36] !== errors || $[37] !== name || $[38] !== pending || $[39] !== readOnly || $[40] !== requiredness || $[41] !== t10 || $[42] !== t2 || $[43] !== t3 || $[44] !== t8 || $[45] !== t9 || $[46] !== touched) {
+		t11 = /* @__PURE__ */ jsxs(ToggleGroup.Root, {
+			name,
+			className,
+			disabled,
+			readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t2,
+			children: [
+				t3,
+				t8,
+				t9,
+				t10
+			]
+		});
+		$[33] = className;
+		$[34] = dirty;
+		$[35] = disabled;
+		$[36] = errors;
+		$[37] = name;
+		$[38] = pending;
+		$[39] = readOnly;
+		$[40] = requiredness;
+		$[41] = t10;
+		$[42] = t2;
+		$[43] = t3;
+		$[44] = t8;
+		$[45] = t9;
+		$[46] = touched;
+		$[47] = t11;
+	} else t11 = $[47];
+	return t11;
+};
+export { ToggleGroupField };

package/dist/components/toggle-group-field/toggle-group.css

@@ -0,0 +1,132 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_1f08p_3 {
+    --_toggle-group-fill: var(
+    	--toggle-group-fill,
+    	var(--sys-color-primary)
+    );
+    --_toggle-group-on-fill: var(
+    	--toggle-group-on-fill,
+    	var(--sys-color-on-primary)
+    );
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-self: flex-start;
+    gap: var(--toggle-group-gap, var(--sys-unit-4));
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    isolation: isolate;
+  }
+  ._group_1f08p_3[data-orientation=vertical] {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  ._group_1f08p_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._group_1f08p_3[data-invalid] {
+    --_toggle-group-fill: var(--sys-color-error-fg);
+    --_toggle-group-on-fill: var(--sys-color-error-bg);
+  }
+  ._option_1f08p_33 {
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sys-unit-3);
+    box-sizing: border-box;
+    min-block-size: var(--toggle-group-chip-block-size, var(--sys-unit-20));
+    border: 1px solid transparent;
+    border-radius: var(--sys-radius-full);
+    background: var(--toggle-group-chip-bg, var(--sys-color-surface-high));
+    padding-inline: var(--toggle-group-chip-padding-inline, var(--sys-unit-10));
+    color: var(--toggle-group-chip-fg, var(--sys-color-text));
+    font: var(--toggle-group-font, var(--sys-font-label-medium));
+    cursor: pointer;
+  }
+  ._option_1f08p_33 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._option_1f08p_33[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1f08p_33 {
+      transition: color var(--sys-motion-short) var(--sys-motion-standard), background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_1f08p_33::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: calc(-1 * 1px - 0.5px);
+    border-radius: inherit;
+    background: var(--_toggle-group-fill);
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1f08p_33::before {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_1f08p_33:hover:not([data-pressed],
+  [data-disabled],
+  [data-readonly]) {
+    background-color: var(--toggle-group-chip-hover-bg, var(--sys-color-surface-highest));
+  }
+  ._option_1f08p_33[data-pressed] {
+    background-color: var(--_toggle-group-fill);
+    color: var(--_toggle-group-on-fill);
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1f08p_33[data-pressed] {
+      transition: color var(--sys-motion-short) var(--sys-motion-standard), background-color 0s linear var(--sys-motion-short);
+    }
+  }
+  ._option_1f08p_33[data-pressed]::before {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1f08p_33[data-pressed]::before {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._group_1f08p_3[data-invalid] ._option_1f08p_33:not([data-pressed]) {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._option_1f08p_33[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);
+    pointer-events: none;
+  }
+  ._option_1f08p_33[data-readonly][data-pressed] {
+    --_toggle-group-fill: var(
+    	--sys-color-primary-container
+    );
+    --_toggle-group-on-fill: var(
+    	--sys-color-on-primary-container
+    );
+    background: var(--_toggle-group-fill);
+    color: var(--_toggle-group-on-fill);
+  }
+  ._option_1f08p_33[data-readonly][data-pressed]::before {
+    content: none;
+  }
+  ._option_1f08p_33[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/dist/components/toggle-group-field/toggle-group.d.ts

@@ -0,0 +1,45 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import type { ReactNode } from "react";
+import { Field } from "../field/index.ts";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+export type ToggleGroupRootProps = FieldsetRootProps;
+export type ToggleGroupGroupProps = Omit<BaseToggleGroup.Props, "multiple"> & Readonly<{
+    /** Read-only groups still read, but no longer answer a press. */
+    readOnly?: boolean;
+    /** Paints every chip with the error treatment. */
+    invalid?: boolean;
+}>;
+declare const ToggleGroupGroup: ({ className, readOnly, invalid, onValueChange, children, ...props }: ToggleGroupGroupProps) => ReactNode;
+export type ToggleGroupOptionProps = BaseToggle.Props & Readonly<{
+    /** Carries the read-only rim. */
+    readOnly?: boolean;
+}>;
+declare const ToggleGroupOption: ({ className, readOnly, children, ...props }: ToggleGroupOptionProps) => ReactNode;
+/** The parts of a toggle group. */
+export type ToggleGroupParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Group: typeof ToggleGroupGroup;
+    Option: typeof ToggleGroupOption;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a multiple-choice base-ui ToggleGroup: a wrapping row of
+ * chips, any number of them pressed. The `Root` is a fieldset named by its
+ * `Legend`. For the ordinary case, use `ToggleGroupField`.
+ *
+ * @example
+ * <ToggleGroup.Root filled={days.length > 0}>
+ * 	<ToggleGroup.Legend optionalLabel="optional">Days</ToggleGroup.Legend>
+ * 	<ToggleGroup.Group value={days} onValueChange={setDays}>
+ * 		<ToggleGroup.Option value="mon">Monday</ToggleGroup.Option>
+ * 		<ToggleGroup.Option value="tue">Tuesday</ToggleGroup.Option>
+ * 	</ToggleGroup.Group>
+ * </ToggleGroup.Root>
+ */
+export declare const ToggleGroup: ToggleGroupParts;
+export {};
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/components/toggle-group-field/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group-field/toggle-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAE7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,EAGL,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACN,cAAc,EACd,YAAY,EACZ,KAAK,iBAAiB,EACtB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;AAErD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,eAAe,CAAC,KAAK,EACrB,UAAU,CACV,GACA,QAAQ,CAAC;IACR,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEJ,QAAA,MAAM,gBAAgB,wEAOnB,qBAAqB,KAAG,SAW1B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,KAAK,GACpD,QAAQ,CAAC;IACR,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEJ,QAAA,MAAM,iBAAiB,gDAKpB,sBAAsB,KAAG,SAc3B,CAAC;AAEF,mCAAmC;AACnC,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,KAAK,EAAE,OAAO,gBAAgB,CAAC;IAC/B,MAAM,EAAE,OAAO,iBAAiB,CAAC;IACjC,WAAW,EAAE,OAAO,KAAK,CAAC,WAAW,CAAC;IACtC,KAAK,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC;IAC1B,MAAM,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,WAAW,EAAE,gBAQzB,CAAC"}

package/dist/components/toggle-group-field/toggle-group.js

@@ -0,0 +1,146 @@
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { FieldsetLegend, FieldsetRoot } from "../field/fieldset.js";
+import toggle_group_module_default from "./toggle-group.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+// src/components/toggle-group-field/toggle-group.tsx
+var ToggleGroupGroup = (t0) => {
+	const $ = c(17);
+	let children;
+	let className;
+	let invalid;
+	let onValueChange;
+	let props;
+	let readOnly;
+	if ($[0] !== t0) {
+		({className, readOnly, invalid, onValueChange, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = invalid;
+		$[4] = onValueChange;
+		$[5] = props;
+		$[6] = readOnly;
+	} else {
+		children = $[1];
+		className = $[2];
+		invalid = $[3];
+		onValueChange = $[4];
+		props = $[5];
+		readOnly = $[6];
+	}
+	let t1;
+	if ($[7] !== className) {
+		t1 = clsx(toggle_group_module_default.group, className);
+		$[7] = className;
+		$[8] = t1;
+	} else t1 = $[8];
+	const t2 = readOnly === true ? void 0 : onValueChange;
+	let t3;
+	if ($[9] !== invalid) {
+		t3 = fieldStateAttributes({ invalid });
+		$[9] = invalid;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== children || $[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t4 = /* @__PURE__ */ jsx(ToggleGroup, {
+			multiple: true,
+			className: t1,
+			onValueChange: t2,
+			...t3,
+			...props,
+			children
+		});
+		$[11] = children;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return t4;
+};
+var ToggleGroupOption = (t0) => {
+	const $ = c(16);
+	let children;
+	let className;
+	let props;
+	let readOnly;
+	if ($[0] !== t0) {
+		({className, readOnly, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = readOnly;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		readOnly = $[4];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(toggle_group_module_default.option, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== focus || $[8] !== readOnly) {
+		t2 = fieldStateAttributes({
+			readonly: readOnly,
+			...focus
+		});
+		$[7] = focus;
+		$[8] = readOnly;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== children || $[11] !== focus.props || $[12] !== props || $[13] !== t1 || $[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Toggle, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props,
+			children
+		});
+		$[10] = children;
+		$[11] = focus.props;
+		$[12] = props;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+/**
+* The styled parts of a multiple-choice base-ui ToggleGroup: a wrapping row of
+* chips, any number of them pressed. The `Root` is a fieldset named by its
+* `Legend`. For the ordinary case, use `ToggleGroupField`.
+*
+* @example
+* <ToggleGroup.Root filled={days.length > 0}>
+* 	<ToggleGroup.Legend optionalLabel="optional">Days</ToggleGroup.Legend>
+* 	<ToggleGroup.Group value={days} onValueChange={setDays}>
+* 		<ToggleGroup.Option value="mon">Monday</ToggleGroup.Option>
+* 		<ToggleGroup.Option value="tue">Tuesday</ToggleGroup.Option>
+* 	</ToggleGroup.Group>
+* </ToggleGroup.Root>
+*/
+var ToggleGroup$1 = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: ToggleGroupGroup,
+	Option: ToggleGroupOption,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
+};
+export { ToggleGroup$1 as ToggleGroup };

package/dist/components/toggle-group-field/toggle-group.module.js

@@ -0,0 +1,8 @@
+import './toggle-group.css';// src/components/toggle-group-field/toggle-group.module.scss
+var group = "_group_1f08p_3";
+var option = "_option_1f08p_33";
+var toggle_group_module_default = {
+	group,
+	option
+};
+export { toggle_group_module_default as default, group, option };

package/dist/components/toggle-group-field/tsf-toggle-group-field.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type ToggleGroupFieldProps } from "./toggle-group-field.tsx";
+export type TSFToggleGroupFieldProps = Omit<ToggleGroupFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `ToggleGroupField` bound to the TanStack Form field it renders in, whose value
+ * is the list of chosen values. Reach it as `field.ToggleGroupField` inside
+ * `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="days">
+ * 	{field => <field.ToggleGroupField label="Days" optionalLabel="optional" options={days} />}
+ * </form.AppField>
+ */
+export declare const TSFToggleGroupField: (props: TSFToggleGroupFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-toggle-group-field.d.ts.map

package/dist/components/toggle-group-field/tsf-toggle-group-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-toggle-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group-field/tsf-toggle-group-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,qBAAqB,EAC1B,MAAM,0BAA0B,CAAC;AAElC,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAC1C,qBAAqB,EACrB,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,UACxB,wBAAwB,KAC7B,SAYF,CAAC"}

package/dist/components/toggle-group-field/tsf-toggle-group-field.js

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { ToggleGroupField } from "./toggle-group-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/toggle-group-field/tsf-toggle-group-field.tsx
+/**
+* `ToggleGroupField` bound to the TanStack Form field it renders in, whose value
+* is the list of chosen values. Reach it as `field.ToggleGroupField` inside
+* `form.AppField`.
+*
+* @example
+* <form.AppField name="days">
+* 	{field => <field.ToggleGroupField label="Days" optionalLabel="optional" options={days} />}
+* </form.AppField>
+*/
+var TSFToggleGroupField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (value) => field.handleChange(value);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(ToggleGroupField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFToggleGroupField };