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

package/dist/components/segmented-control-field/segmented-control-field.js

@@ -0,0 +1,166 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/segmented-control-field/segmented-control-field.tsx
+/**
+* The assembled segmented control: a labelled track of options, one pressed at
+* a time, with a pill that slides to it, then the description and the error.
+*
+* @example
+* <SegmentedControlField
+* 	label="View"
+* 	optionalLabel="optional"
+* 	options={[{ label: "List", value: "list" }, { label: "Board", value: "board" }]}
+* 	value={view}
+* 	onValueChange={setView}
+* />
+*/
+var SegmentedControlField = (t0) => {
+	const $ = c(50);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className } = t0;
+	const { descriptionId, errorId, describedBy } = SegmentedControl.useIds();
+	let t1;
+	if ($[0] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[0] = errors;
+		$[1] = t1;
+	} else t1 = $[1];
+	const invalid = t1.length > 0;
+	const t2 = value !== null;
+	let t3;
+	if ($[2] !== label || $[3] !== optionalLabel || $[4] !== requiredness) {
+		t3 = /* @__PURE__ */ jsx(SegmentedControl.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] !== value) {
+		t6 = value === null ? [] : [value];
+		$[10] = value;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== onValueChange) {
+		t7 = (next) => onValueChange(next[0] ?? null);
+		$[12] = onValueChange;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	if ($[14] !== options) {
+		t8 = options.map(_temp);
+		$[14] = options;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== options) {
+		t9 = /* @__PURE__ */ jsx(SegmentedControl.Indicator, { options });
+		$[16] = options;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== disabled || $[19] !== invalid || $[20] !== onBlur || $[21] !== orientation || $[22] !== readOnly || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(SegmentedControl.Group, {
+			"aria-describedby": t5,
+			readOnly,
+			invalid,
+			orientation,
+			disabled,
+			value: t6,
+			onValueChange: t7,
+			onBlur,
+			children: [t8, t9]
+		});
+		$[18] = disabled;
+		$[19] = invalid;
+		$[20] = onBlur;
+		$[21] = orientation;
+		$[22] = readOnly;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== description || $[30] !== descriptionId) {
+		t11 = /* @__PURE__ */ jsx(SegmentedControl.Description, {
+			id: descriptionId,
+			children: description
+		});
+		$[29] = description;
+		$[30] = descriptionId;
+		$[31] = t11;
+	} else t11 = $[31];
+	let t12;
+	if ($[32] !== errorId || $[33] !== errors) {
+		t12 = /* @__PURE__ */ jsx(SegmentedControl.Error, {
+			id: errorId,
+			children: errors
+		});
+		$[32] = errorId;
+		$[33] = errors;
+		$[34] = t12;
+	} else t12 = $[34];
+	let t13;
+	if ($[35] !== className || $[36] !== dirty || $[37] !== disabled || $[38] !== errors || $[39] !== name || $[40] !== pending || $[41] !== readOnly || $[42] !== requiredness || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t2 || $[47] !== t3 || $[48] !== touched) {
+		t13 = /* @__PURE__ */ jsxs(SegmentedControl.Root, {
+			name,
+			className,
+			disabled,
+			readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t2,
+			children: [
+				t3,
+				t10,
+				t11,
+				t12
+			]
+		});
+		$[35] = className;
+		$[36] = dirty;
+		$[37] = disabled;
+		$[38] = errors;
+		$[39] = name;
+		$[40] = pending;
+		$[41] = readOnly;
+		$[42] = requiredness;
+		$[43] = t10;
+		$[44] = t11;
+		$[45] = t12;
+		$[46] = t2;
+		$[47] = t3;
+		$[48] = touched;
+		$[49] = t13;
+	} else t13 = $[49];
+	return t13;
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsx(SegmentedControl.Option, {
+		value: option.value,
+		disabled: option.disabled,
+		children: option.label
+	}, option.value);
+}
+export { SegmentedControlField };

package/dist/components/segmented-control-field/segmented-control.css

@@ -0,0 +1,203 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_1tamn_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    --field-placeholder-fg: var(--sys-color-text-placeholder);
+    --field-fg: var(
+    	--segmented-control-fg,
+    	var(--sys-color-on-primary-container)
+    );
+    --_segmented-control-fill: var(
+    	--segmented-control-fill,
+    	var(--sys-color-primary)
+    );
+    --_segmented-control-on-fill: var(
+    	--segmented-control-on-fill,
+    	var(--sys-color-on-primary)
+    );
+    position: relative;
+    display: inline-flex;
+    align-self: flex-start;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    gap: 0;
+    border: 1px solid transparent;
+    border-radius: var(--sys-radius-full);
+    background: var(--segmented-control-track-bg, var(--sys-color-primary-container));
+  }
+  ._group_1tamn_3[data-orientation=vertical] {
+    flex-direction: column;
+  }
+  ._group_1tamn_3[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);
+    --_segmented-control-fill: var(
+    	--sys-color-primary-container
+    );
+    --_segmented-control-on-fill: var(
+    	--sys-color-on-primary-container
+    );
+    pointer-events: none;
+  }
+  ._group_1tamn_3[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);
+    --_segmented-control-fill: var(--sys-color-error-fg);
+    --_segmented-control-on-fill: var(
+    	--sys-color-error-bg
+    );
+  }
+  ._group_1tamn_3[data-disabled] {
+    --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;
+    --_segmented-control-fill: var(
+    	--sys-color-disabled-fg
+    );
+    --_segmented-control-on-fill: var(
+    	--sys-color-disabled-bg
+    );
+    background: var(--sys-color-disabled-bg);
+  }
+  ._option_1tamn_72 {
+    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(--segmented-control-option-block-size, var(--sys-unit-20));
+    border: 0;
+    border-radius: var(--sys-radius-full);
+    background: none;
+    padding-inline: var(--segmented-control-option-padding-inline, var(--sys-unit-10));
+    color: var(--field-fg);
+    font: var(--segmented-control-font, var(--sys-font-label-medium));
+    cursor: pointer;
+  }
+  ._option_1tamn_72 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._option_1tamn_72[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._option_1tamn_72 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._option_1tamn_72::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1tamn_72::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_1tamn_72:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._option_1tamn_72:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._option_1tamn_72 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1tamn_72 {
+      transition: color var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._option_1tamn_72[data-disabled] {
+    --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;
+  }
+  ._indicator_1tamn_135 {
+    --_indicator-slack: var(
+    	--sliding-indicator-slack,
+    	0.5px
+    );
+    --_indicator-slide: var(--sys-motion-short)
+    	var(--sys-motion-emphasized);
+    position: absolute;
+    inset-inline-start: calc(var(--active-item-left, 0) - var(--_indicator-slack));
+    inset-block-start: calc(var(--active-item-top, 0) - var(--_indicator-slack));
+    overflow: hidden;
+    inline-size: calc(var(--active-item-width, 0) + 2 * var(--_indicator-slack));
+    block-size: calc(var(--active-item-height, 0) + 2 * var(--_indicator-slack));
+    opacity: 1;
+    scale: 1;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1tamn_135 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._indicator_1tamn_135[data-jump] {
+    --_indicator-slide: 0s;
+  }
+  ._indicator_1tamn_135[data-empty] {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1tamn_135[data-empty] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_1tamn_135 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._indicator_1tamn_135 {
+    border-radius: var(--sys-radius-full);
+    background: var(--_segmented-control-fill);
+  }
+  ._option_1tamn_72[data-pressed][data-focus-visible] ~ ._indicator_1tamn_135 {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._indicatorLabels_1tamn_180 {
+    position: absolute;
+    inset-inline-start: calc(var(--_indicator-slack) - var(--active-item-left, 0));
+    inset-block-start: calc(var(--_indicator-slack) - var(--active-item-top, 0));
+    display: flex;
+    inline-size: max-content;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicatorLabels_1tamn_180 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
+    }
+  }
+  ._group_1tamn_3[data-orientation=vertical] ._indicatorLabels_1tamn_180 {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  ._indicatorLabels_1tamn_180 ._option_1tamn_72 {
+    color: var(--_segmented-control-on-fill);
+    cursor: default;
+  }
+  ._indicatorLabels_1tamn_180 ._option_1tamn_72::after {
+    content: none;
+  }
+}

package/dist/components/segmented-control-field/segmented-control.d.ts

@@ -0,0 +1,58 @@
+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, type ChoiceOption } from "../field/index.ts";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+export type SegmentedControlRootProps = FieldsetRootProps;
+export type SegmentedControlGroupProps = Omit<BaseToggleGroup.Props, "multiple"> & Readonly<{
+    /** Read-only groups still read, but no longer answer a press. */
+    readOnly?: boolean;
+    /** Paints the track with the error treatment. */
+    invalid?: boolean;
+}>;
+declare const SegmentedControlGroup: ({ className, readOnly, invalid, disabled, onValueChange, children, ...props }: SegmentedControlGroupProps) => ReactNode;
+export type SegmentedControlOptionProps = BaseToggle.Props;
+declare const SegmentedControlOption: ({ className, children, ...props }: SegmentedControlOptionProps) => ReactNode;
+export type SegmentedControlIndicatorProps = Readonly<{
+    /** The choices, in the order the group renders them. */
+    options: readonly ChoiceOption[];
+}>;
+/**
+ * The pill that slides to the pressed option. It holds a second copy of every
+ * label, offset so that only the pressed one falls inside the pill, so the ink
+ * changes colour as the pill arrives rather than the instant the value does.
+ * Arriving from an empty group it lands in place and pops.
+ *
+ * @example
+ * <SegmentedControl.Indicator options={options} />
+ */
+declare const SegmentedControlIndicator: ({ options, }: SegmentedControlIndicatorProps) => ReactNode;
+/** The parts of a segmented control. */
+export type SegmentedControlParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Group: typeof SegmentedControlGroup;
+    Option: typeof SegmentedControlOption;
+    Indicator: typeof SegmentedControlIndicator;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a single-choice base-ui ToggleGroup: a track of options,
+ * one pressed at a time, with a pill that slides to it. The `Root` is a
+ * fieldset named by its `Legend`. For the ordinary case, use
+ * `SegmentedControlField`.
+ *
+ * @example
+ * <SegmentedControl.Root filled={view !== null}>
+ * 	<SegmentedControl.Legend optionalLabel="optional">View</SegmentedControl.Legend>
+ * 	<SegmentedControl.Group value={view === null ? [] : [view]} onValueChange={next => setView(next[0] ?? null)}>
+ * 		<SegmentedControl.Option value="list">List</SegmentedControl.Option>
+ * 		<SegmentedControl.Option value="board">Board</SegmentedControl.Option>
+ * 		<SegmentedControl.Indicator options={views} />
+ * 	</SegmentedControl.Group>
+ * </SegmentedControl.Root>
+ */
+export declare const SegmentedControl: SegmentedControlParts;
+export {};

package/dist/components/segmented-control-field/segmented-control.js

@@ -0,0 +1,209 @@
+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 { useFormDisabled } from "../form/form-context.js";
+import { useSlidingIndicator } from "../../lib/sliding-indicator/use-sliding-indicator.js";
+import segmented_control_module_default from "./segmented-control.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/segmented-control-field/segmented-control.tsx
+var SegmentedControlGroup = (t0) => {
+	const $ = c(20);
+	let children;
+	let className;
+	let invalid;
+	let onValueChange;
+	let props;
+	let readOnly;
+	let t1;
+	if ($[0] !== t0) {
+		({className, readOnly, invalid, disabled: t1, onValueChange, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = invalid;
+		$[4] = onValueChange;
+		$[5] = props;
+		$[6] = readOnly;
+		$[7] = t1;
+	} else {
+		children = $[1];
+		className = $[2];
+		invalid = $[3];
+		onValueChange = $[4];
+		props = $[5];
+		readOnly = $[6];
+		t1 = $[7];
+	}
+	const disabled = t1 === void 0 ? false : t1;
+	const formDisabled = useFormDisabled();
+	let t2;
+	if ($[8] !== className) {
+		t2 = clsx(segmented_control_module_default.group, className);
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
+	const t3 = readOnly === true ? void 0 : onValueChange;
+	const t4 = disabled || formDisabled;
+	const t5 = invalid === true ? "invalid" : void 0;
+	let t6;
+	if ($[10] !== readOnly || $[11] !== t5) {
+		t6 = fieldStateAttributes({
+			readonly: readOnly,
+			validity: t5
+		});
+		$[10] = readOnly;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== children || $[14] !== props || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(ToggleGroup, {
+			className: t2,
+			onValueChange: t3,
+			disabled: t4,
+			...t6,
+			...props,
+			children
+		});
+		$[13] = children;
+		$[14] = props;
+		$[15] = t2;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+};
+var SegmentedControlOption = (t0) => {
+	const $ = c(14);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[4] !== className) {
+		t1 = clsx(segmented_control_module_default.option, className);
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[6] = focus;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== focus.props || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Toggle, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props,
+			children
+		});
+		$[8] = children;
+		$[9] = focus.props;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+};
+/**
+* The pill that slides to the pressed option. It holds a second copy of every
+* label, offset so that only the pressed one falls inside the pill, so the ink
+* changes colour as the pill arrives rather than the instant the value does.
+* Arriving from an empty group it lands in place and pops.
+*
+* @example
+* <SegmentedControl.Indicator options={options} />
+*/
+var SegmentedControlIndicator = (t0) => {
+	const $ = c(8);
+	const { options } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = { active: "[data-pressed]" };
+		$[0] = t1;
+	} else t1 = $[0];
+	const ref = useSlidingIndicator(t1);
+	let t2;
+	if ($[1] !== options) {
+		t2 = options.map(_temp);
+		$[1] = options;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: segmented_control_module_default.indicatorLabels,
+			children: t2
+		});
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== ref || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
+			ref,
+			"aria-hidden": "true",
+			className: segmented_control_module_default.indicator,
+			children: t3
+		});
+		$[5] = ref;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+};
+/**
+* The styled parts of a single-choice base-ui ToggleGroup: a track of options,
+* one pressed at a time, with a pill that slides to it. The `Root` is a
+* fieldset named by its `Legend`. For the ordinary case, use
+* `SegmentedControlField`.
+*
+* @example
+* <SegmentedControl.Root filled={view !== null}>
+* 	<SegmentedControl.Legend optionalLabel="optional">View</SegmentedControl.Legend>
+* 	<SegmentedControl.Group value={view === null ? [] : [view]} onValueChange={next => setView(next[0] ?? null)}>
+* 		<SegmentedControl.Option value="list">List</SegmentedControl.Option>
+* 		<SegmentedControl.Option value="board">Board</SegmentedControl.Option>
+* 		<SegmentedControl.Indicator options={views} />
+* 	</SegmentedControl.Group>
+* </SegmentedControl.Root>
+*/
+var SegmentedControl = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: SegmentedControlGroup,
+	Option: SegmentedControlOption,
+	Indicator: SegmentedControlIndicator,
+	Description: Field.Description,
+	Error: Field.Error,
+	useIds: Field.useIds
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsx("span", {
+		className: segmented_control_module_default.option,
+		children: option.label
+	}, option.value);
+}
+export { SegmentedControl };

package/dist/components/segmented-control-field/segmented-control.module.js

@@ -0,0 +1,12 @@
+import './segmented-control.css';// src/components/segmented-control-field/segmented-control.module.scss
+var group = "_group_1tamn_3";
+var option = "_option_1tamn_72";
+var indicator = "_indicator_1tamn_135";
+var indicatorLabels = "_indicatorLabels_1tamn_180";
+var segmented_control_module_default = {
+	group,
+	option,
+	indicator,
+	indicatorLabels
+};
+export { segmented_control_module_default as default, group, indicator, indicatorLabels, option };

package/dist/components/segmented-control-field/tsf-segmented-control-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type SegmentedControlFieldProps } from "./segmented-control-field.tsx";
+export type TSFSegmentedControlFieldProps = Omit<SegmentedControlFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `SegmentedControlField` bound to the TanStack Form field it renders in, whose
+ * value is the chosen option's value or `null`. Reach it as
+ * `field.SegmentedControlField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="view">
+ * 	{field => <field.SegmentedControlField label="View" optionalLabel="optional" options={views} />}
+ * </form.AppField>
+ */
+export declare const TSFSegmentedControlField: (props: TSFSegmentedControlFieldProps) => ReactNode;

package/dist/components/segmented-control-field/tsf-segmented-control-field.js

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { SegmentedControlField } from "./segmented-control-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/segmented-control-field/tsf-segmented-control-field.tsx
+/**
+* `SegmentedControlField` bound to the TanStack Form field it renders in, whose
+* value is the chosen option's value or `null`. Reach it as
+* `field.SegmentedControlField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="view">
+* 	{field => <field.SegmentedControlField label="View" optionalLabel="optional" options={views} />}
+* </form.AppField>
+*/
+var TSFSegmentedControlField = (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(SegmentedControlField, {
+			...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 { TSFSegmentedControlField };