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

package/dist/components/popover/popover.module.js

@@ -0,0 +1,34 @@
+import './popover.css';// src/components/popover/popover.module.scss
+var positioner = "_positioner_1oo44_3";
+var visuallyHidden = "_visuallyHidden_1oo44_18";
+var popup = "_popup_1oo44_26";
+var arrow = "_arrow_1oo44_47";
+var arrowFill = "_arrowFill_1oo44_65";
+var heading = "_heading_1oo44_68";
+var rows = "_rows_1oo44_73";
+var row = "_row_1oo44_73";
+var rowLabel = "_rowLabel_1oo44_86";
+var rowValue = "_rowValue_1oo44_87";
+var skeletonText = "_skeletonText_1oo44_101";
+var skeletonTextContent = "_skeletonTextContent_1oo44_105";
+var skeletonTextOverlay = "_skeletonTextOverlay_1oo44_108";
+var headingSkeleton = "_headingSkeleton_1oo44_114";
+var valueSkeleton = "_valueSkeleton_1oo44_117";
+var popover_module_default = {
+	positioner,
+	visuallyHidden,
+	popup,
+	arrow,
+	arrowFill,
+	heading,
+	rows,
+	row,
+	rowLabel,
+	rowValue,
+	skeletonText,
+	skeletonTextContent,
+	skeletonTextOverlay,
+	headingSkeleton,
+	valueSkeleton
+};
+export { arrow, arrowFill, popover_module_default as default, heading, headingSkeleton, popup, positioner, row, rowLabel, rowValue, rows, skeletonText, skeletonTextContent, skeletonTextOverlay, valueSkeleton, visuallyHidden };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC"}

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

@@ -0,0 +1,4 @@
+import { RadioGroup } from "./radio-group.js";
+import { RadioGroupField } from "./radio-group-field.js";
+import { TSFRadioGroupField } from "./tsf-radio-group-field.js";
+export { RadioGroup, RadioGroupField, TSFRadioGroupField };

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

@@ -0,0 +1,26 @@
+import type { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+import { type FieldProps, type ChoiceOption } from "../field/index.ts";
+export type RadioGroupFieldProps = FieldProps & Pick<BaseRadioGroup.Props<string | null>, "value" | "defaultValue" | "onValueChange" | "onBlur" | "disabled" | "readOnly"> & Readonly<{
+    /** The mutually exclusive choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    /** The form field's name. */
+    name?: string;
+    /** Applied to the fieldset, so callers can size the group. */
+    className?: string;
+}>;
+/**
+ * The assembled radio group: a fieldset named by its label, holding one radio
+ * per option, then the description and the error.
+ *
+ * @example
+ * <RadioGroupField
+ * 	label="Kind"
+ * 	optionalLabel="optional"
+ * 	options={[{ label: "Direct", value: "direct" }]}
+ * 	value={kind}
+ * 	onValueChange={setKind}
+ * />
+ */
+export declare const RadioGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, className, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly, }: RadioGroupFieldProps) => ReactNode;
+//# sourceMappingURL=radio-group-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group-field/radio-group-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,UAAU,EAEf,KAAK,YAAY,EACjB,MAAM,mBAAmB,CAAC;AAG3B,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAC5C,IAAI,CACH,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,EACjC,OAAO,GACP,cAAc,GACd,eAAe,GACf,QAAQ,GACR,UAAU,GACV,UAAU,CACZ,GACD,QAAQ,CAAC;IACR,8DAA8D;IAC9D,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,oLAkBzB,oBAAoB,KAAG,SAoDzB,CAAC"}

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

@@ -0,0 +1,128 @@
+import { detachHiddenInput } from "../field/hidden-input.js";
+import { RadioGroup } from "./radio-group.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/radio-group-field/radio-group-field.tsx
+/**
+* The assembled radio group: a fieldset named by its label, holding one radio
+* per option, then the description and the error.
+*
+* @example
+* <RadioGroupField
+* 	label="Kind"
+* 	optionalLabel="optional"
+* 	options={[{ label: "Direct", value: "direct" }]}
+* 	value={kind}
+* 	onValueChange={setKind}
+* />
+*/
+var RadioGroupField = (t0) => {
+	const $ = c(36);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, className, value, defaultValue, onValueChange, onBlur, name, disabled, readOnly } = t0;
+	const ids = RadioGroup.useIds();
+	const t1 = value !== void 0 && value !== null && value !== "";
+	let t2;
+	if ($[0] !== label || $[1] !== optionalLabel || $[2] !== requiredness) {
+		t2 = /* @__PURE__ */ jsx(RadioGroup.Legend, {
+			requiredness,
+			optionalLabel,
+			children: label
+		});
+		$[0] = label;
+		$[1] = optionalLabel;
+		$[2] = requiredness;
+		$[3] = t2;
+	} else t2 = $[3];
+	const t3 = name ?? ids.controlId;
+	const t4 = ids.controlId;
+	const t5 = requiredness === "required";
+	let t6;
+	if ($[4] !== options) {
+		t6 = options.map(_temp);
+		$[4] = options;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== defaultValue || $[7] !== disabled || $[8] !== ids.controlId || $[9] !== onBlur || $[10] !== onValueChange || $[11] !== readOnly || $[12] !== t3 || $[13] !== t5 || $[14] !== t6 || $[15] !== value) {
+		t7 = /* @__PURE__ */ jsx(RadioGroup.Group, {
+			value,
+			defaultValue,
+			onValueChange,
+			onBlur,
+			name: t3,
+			inputRef: detachHiddenInput,
+			id: t4,
+			disabled,
+			readOnly,
+			required: t5,
+			children: t6
+		});
+		$[6] = defaultValue;
+		$[7] = disabled;
+		$[8] = ids.controlId;
+		$[9] = onBlur;
+		$[10] = onValueChange;
+		$[11] = readOnly;
+		$[12] = t3;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = value;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== description) {
+		t8 = /* @__PURE__ */ jsx(RadioGroup.Description, { children: description });
+		$[17] = description;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== errors) {
+		t9 = /* @__PURE__ */ jsx(RadioGroup.Error, { children: errors });
+		$[19] = errors;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== className || $[22] !== dirty || $[23] !== disabled || $[24] !== errors || $[25] !== name || $[26] !== pending || $[27] !== readOnly || $[28] !== requiredness || $[29] !== t1 || $[30] !== t2 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== touched) {
+		t10 = /* @__PURE__ */ jsxs(RadioGroup.Root, {
+			name,
+			className,
+			disabled,
+			readOnly,
+			errors,
+			requiredness,
+			dirty,
+			touched,
+			pending,
+			filled: t1,
+			children: [
+				t2,
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[21] = className;
+		$[22] = dirty;
+		$[23] = disabled;
+		$[24] = errors;
+		$[25] = name;
+		$[26] = pending;
+		$[27] = readOnly;
+		$[28] = requiredness;
+		$[29] = t1;
+		$[30] = t2;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+		$[34] = touched;
+		$[35] = t10;
+	} else t10 = $[35];
+	return t10;
+};
+function _temp(option) {
+	return /* @__PURE__ */ jsxs(RadioGroup.Item, {
+		disabled: option.disabled,
+		children: [/* @__PURE__ */ jsx(RadioGroup.Radio, { value: option.value }), option.label]
+	}, option.value);
+}
+export { RadioGroupField };

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

@@ -0,0 +1,114 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_hqlv0_3 {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--radio-group-gap, var(--sys-unit-2));
+  }
+  ._item_hqlv0_9 {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--radio-group-item-gap, var(--sys-unit-6));
+    min-block-size: var(--sys-unit-20);
+    cursor: pointer;
+  }
+  ._item_hqlv0_9:hover ._radio_hqlv0_17 {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._item_hqlv0_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._item_hqlv0_9:hover ._radio_hqlv0_17:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._radio_hqlv0_17 {
+    --box-border: var(--sys-color-border);
+    --box-bg: var(--sys-color-surface);
+    --box-fg: var(--sys-color-on-primary);
+    --box-checked-bg: var(--sys-color-primary);
+    display: grid;
+    flex: 0 0 auto;
+    place-items: center;
+    box-sizing: border-box;
+    inline-size: var(--checkbox-size, var(--sys-unit-16));
+    block-size: var(--checkbox-size, var(--sys-unit-16));
+    border: 1px solid var(--box-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--box-bg);
+    color: var(--box-fg);
+  }
+  @media not (prefers-reduced-motion) {
+    ._radio_hqlv0_17 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._radio_hqlv0_17:focus-visible {
+    border-color: var(--sys-color-primary);
+  }
+  ._radio_hqlv0_17 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._radio_hqlv0_17[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._radio_hqlv0_17 {
+    position: relative;
+    border-radius: var(--sys-radius-circle);
+  }
+  ._radio_hqlv0_17[data-invalid] {
+    --box-border: var(--sys-color-error-fg);
+    --box-bg: var(--sys-color-error-bg);
+    --box-checked-bg: var(--sys-color-error-fg);
+    --box-fg: var(--sys-color-error-bg);
+  }
+  ._radio_hqlv0_17[data-readonly] {
+    --box-border: var(--sys-color-outline);
+    --box-bg: var(--sys-color-surface-high);
+    --box-checked-bg: var(--sys-color-primary-container);
+    --box-fg: var(--sys-color-on-primary-container);
+    border-style: dashed;
+  }
+  ._radio_hqlv0_17[data-checked] {
+    --box-border: var(--box-checked-bg);
+    --box-bg: var(--box-checked-bg);
+  }
+  ._radio_hqlv0_17[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._indicator_hqlv0_82 {
+    display: grid;
+    place-items: center;
+  }
+  ._indicator_hqlv0_82 svg {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.7);
+  }
+  ._indicator_hqlv0_82 {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_hqlv0_82 {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_hqlv0_82 {
+    inline-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
+    block-size: calc(var(--checkbox-size, var(--sys-unit-16)) * 0.4);
+    border-radius: var(--sys-radius-circle);
+    background: currentcolor;
+  }
+  ._indicator_hqlv0_82[data-checked] {
+    opacity: 1;
+    scale: 1;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_hqlv0_82[data-checked] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+import { Field } from "../field/index.ts";
+import { FieldsetLegend, FieldsetRoot, type FieldsetRootProps } from "../field/fieldset.tsx";
+export type RadioGroupRootProps = FieldsetRootProps;
+declare const RadioGroupGroup: <TValue>({ className, ...props }: BaseRadioGroup.Props<TValue>) => ReactNode;
+declare const RadioGroupItem: ({ className, ...props }: BaseField.Item.Props) => ReactNode;
+declare const RadioGroupRadio: ({ className, ...props }: BaseRadio.Root.Props) => ReactNode;
+/** The parts of a radio group. */
+export type RadioGroupParts = Readonly<{
+    Root: typeof FieldsetRoot;
+    Legend: typeof FieldsetLegend;
+    Group: typeof RadioGroupGroup;
+    Item: typeof RadioGroupItem;
+    Radio: typeof RadioGroupRadio;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+    useIds: typeof Field.useIds;
+}>;
+/**
+ * The styled parts of a base-ui radio group. The `Root` is a fieldset named by
+ * its `Legend`. For the ordinary case, use `RadioGroupField`.
+ *
+ * @example
+ * <RadioGroup.Root filled={kind !== null}>
+ * 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+ * 	<RadioGroup.Group value={kind} onValueChange={setKind}>
+ * 		<RadioGroup.Item>
+ * 			<RadioGroup.Radio value="direct" />
+ * 			Direct
+ * 		</RadioGroup.Item>
+ * 	</RadioGroup.Group>
+ * </RadioGroup.Root>
+ */
+export declare const RadioGroup: RadioGroupParts;
+export {};
+//# sourceMappingURL=radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group-field/radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE1E,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,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,QAAA,MAAM,eAAe,GAAI,MAAM,2BAG5B,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAG,SAKjC,CAAC;AAEF,QAAA,MAAM,cAAc,4BAGjB,SAAS,CAAC,IAAI,CAAC,KAAK,KAAG,SAMzB,CAAC;AAEF,QAAA,MAAM,eAAe,4BAGlB,SAAS,CAAC,IAAI,CAAC,KAAK,KAAG,SAezB,CAAC;AAEF,kCAAkC;AAClC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B,IAAI,EAAE,OAAO,cAAc,CAAC;IAC5B,KAAK,EAAE,OAAO,eAAe,CAAC;IAC9B,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;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,eASxB,CAAC"}

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

@@ -0,0 +1,158 @@
+import { Field as Field$1 } 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 radio_group_module_default from "./radio-group.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+// src/components/radio-group-field/radio-group.tsx
+var RadioGroupGroup = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.group, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(RadioGroup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var RadioGroupItem = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.item, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, {});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Field.Item, {
+			className: t1,
+			render: t2,
+			...props
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var RadioGroupRadio = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(radio_group_module_default.radio, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[5] = focus;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Radio.Indicator, {
+			keepMounted: true,
+			className: radio_group_module_default.indicator
+		});
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Radio.Root, {
+			className: t1,
+			"aria-readonly": void 0,
+			...t2,
+			...props,
+			...focus.props,
+			children: t3
+		});
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* The styled parts of a base-ui radio group. The `Root` is a fieldset named by
+* its `Legend`. For the ordinary case, use `RadioGroupField`.
+*
+* @example
+* <RadioGroup.Root filled={kind !== null}>
+* 	<RadioGroup.Legend optionalLabel="optional">Kind</RadioGroup.Legend>
+* 	<RadioGroup.Group value={kind} onValueChange={setKind}>
+* 		<RadioGroup.Item>
+* 			<RadioGroup.Radio value="direct" />
+* 			Direct
+* 		</RadioGroup.Item>
+* 	</RadioGroup.Group>
+* </RadioGroup.Root>
+*/
+var RadioGroup$1 = {
+	Root: FieldsetRoot,
+	Legend: FieldsetLegend,
+	Group: RadioGroupGroup,
+	Item: RadioGroupItem,
+	Radio: RadioGroupRadio,
+	Description: Field$1.Description,
+	Error: Field$1.Error,
+	useIds: Field$1.useIds
+};
+export { RadioGroup$1 as RadioGroup };

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

@@ -0,0 +1,12 @@
+import './radio-group.css';// src/components/radio-group-field/radio-group.module.scss
+var group = "_group_hqlv0_3";
+var item = "_item_hqlv0_9";
+var radio = "_radio_hqlv0_17";
+var indicator = "_indicator_hqlv0_82";
+var radio_group_module_default = {
+	group,
+	item,
+	radio,
+	indicator
+};
+export { radio_group_module_default as default, group, indicator, item, radio };

package/dist/components/radio-group-field/tsf-radio-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 RadioGroupFieldProps } from "./radio-group-field.tsx";
+export type TSFRadioGroupFieldProps = Omit<RadioGroupFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `RadioGroupField` bound to the TanStack Form field it renders in, whose value
+ * is the chosen option's value or `null`. Reach it as `field.RadioGroupField`
+ * inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="kind">
+ * 	{field => <field.RadioGroupField label="Kind" options={kinds} optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFRadioGroupField: (props: TSFRadioGroupFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-radio-group-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-radio-group-field.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group-field/tsf-radio-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,oBAAoB,EACzB,MAAM,yBAAyB,CAAC;AAEjC,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACzC,oBAAoB,EAClB,MAAM,mBAAmB,GACzB,OAAO,GACP,cAAc,GACd,eAAe,CACjB,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,UACvB,uBAAuB,KAC5B,SAaF,CAAC"}

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

@@ -0,0 +1,41 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { RadioGroupField } from "./radio-group-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/radio-group-field/tsf-radio-group-field.tsx
+/**
+* `RadioGroupField` bound to the TanStack Form field it renders in, whose value
+* is the chosen option's value or `null`. Reach it as `field.RadioGroupField`
+* inside `form.AppField`.
+*
+* @example
+* <form.AppField name="kind">
+* 	{field => <field.RadioGroupField label="Kind" options={kinds} optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFRadioGroupField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(RadioGroupField, {
+			...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 { TSFRadioGroupField };

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

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

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

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

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

@@ -0,0 +1,3 @@
+import { SearchField } from "./search-field.js";
+import { TSFSearchField } from "./tsf-search-field.js";
+export { SearchField, TSFSearchField };

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { type TextFieldBaseProps, type TextPresetProps } from "../text-field/index.ts";
+/** What a search field takes beside the preset props. */
+export type SearchFieldExtraProps = Pick<TextFieldBaseProps, "labelHidden" | "placeholder"> & Readonly<{
+    /** The clear button's accessible name and tooltip, such as "Clear search". */
+    clearLabel: string;
+}>;
+export type SearchFieldProps = TextPresetProps & SearchFieldExtraProps;
+/**
+ * A search box: a `TextField` with a leading search glyph and the clear button.
+ * `labelHidden` keeps the name for screen readers where the layout carries no
+ * room for a visible label.
+ *
+ * @example
+ * <SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" value={search} onValueChange={setSearch} />
+ */
+export declare const SearchField: ({ enterKeyHint, ...props }: SearchFieldProps) => ReactNode;
+//# sourceMappingURL=search-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/components/search-field/search-field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,MAAM,wBAAwB,CAAC;AAEhC,yDAAyD;AACzD,MAAM,MAAM,qBAAqB,GAAG,IAAI,CACvC,kBAAkB,EAClB,aAAa,GAAG,aAAa,CAC7B,GACA,QAAQ,CAAC;IACR,8EAA8E;IAC9E,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEJ,MAAM,MAAM,gBAAgB,GAAG,eAAe,GAC7C,qBAAqB,CAAC;AAEvB;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,+BAGrB,gBAAgB,KAAG,SAUrB,CAAC"}