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

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

@@ -0,0 +1,45 @@
+import SvgSearch from "../../vendor/@material-design-icons/svg/outlined/search.js";
+import { TextField } from "../text-field/text-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/search-field/search-field.tsx
+/**
+* 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} />
+*/
+var SearchField = (t0) => {
+	const $ = c(6);
+	let props;
+	let t1;
+	if ($[0] !== t0) {
+		({enterKeyHint: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
+	} else {
+		props = $[1];
+		t1 = $[2];
+	}
+	const enterKeyHint = t1 === void 0 ? "search" : t1;
+	let t2;
+	if ($[3] !== enterKeyHint || $[4] !== props) {
+		t2 = /* @__PURE__ */ jsx(TextField, {
+			...props,
+			enterKeyHint,
+			type: "search",
+			icon: SvgSearch,
+			clearable: true,
+			autoComplete: "off",
+			spellCheck: false
+		});
+		$[3] = enterKeyHint;
+		$[4] = props;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { SearchField };

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type TSFTextPresetProps } from "../text-field/index.ts";
+import { type SearchFieldExtraProps } from "./search-field.tsx";
+export type TSFSearchFieldProps = TSFTextPresetProps<SearchFieldExtraProps>;
+/**
+ * `SearchField` bound to the TanStack Form field it renders in. Registered as
+ * `field.SearchField`.
+ *
+ * @example
+ * <form.AppField name="query">
+ * 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+ * </form.AppField>
+ */
+export declare const TSFSearchField: (props: TSFSearchFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-search-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-search-field.d.ts","sourceRoot":"","sources":["../../../src/components/search-field/tsf-search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAEN,KAAK,kBAAkB,EACvB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAEN,KAAK,qBAAqB,EAC1B,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,mBAAmB,GAC9B,kBAAkB,CAAC,qBAAqB,CAAC,CAAC;AAE3C;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,EAAE,CAC5B,KAAK,EAAE,mBAAmB,KACtB,SACiD,CAAC"}

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

@@ -0,0 +1,14 @@
+import { connectTextPreset } from "../text-field/connect-text-preset.js";
+import { SearchField } from "./search-field.js";
+// src/components/search-field/tsf-search-field.tsx
+/**
+* `SearchField` bound to the TanStack Form field it renders in. Registered as
+* `field.SearchField`.
+*
+* @example
+* <form.AppField name="query">
+* 	{field => <field.SearchField label="Search clients" optionalLabel="optional" clearLabel="Clear search" />}
+* </form.AppField>
+*/
+var TSFSearchField = connectTextPreset(SearchField);
+export { TSFSearchField };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control-field/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC"}

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

@@ -0,0 +1,4 @@
+import { SegmentedControl } from "./segmented-control.js";
+import { SegmentedControlField } from "./segmented-control-field.js";
+import { TSFSegmentedControlField } from "./tsf-segmented-control-field.js";
+export { SegmentedControl, SegmentedControlField, TSFSegmentedControlField };

package/dist/components/segmented-control-field/segmented-control-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 SegmentedControlFieldProps = FieldProps & Readonly<{
+    /** The choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    /** The chosen value, or `null` while nothing is chosen. */
+    value: string | null;
+    onValueChange: (value: string | null) => 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 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}
+ * />
+ */
+export declare const SegmentedControlField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className, }: SegmentedControlFieldProps) => ReactNode;
+//# sourceMappingURL=segmented-control-field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control-field.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control-field/segmented-control-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,0BAA0B,GAAG,UAAU,GAClD,QAAQ,CAAC;IACR,2CAA2C;IAC3C,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,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,qBAAqB,mLAkB/B,0BAA0B,KAAG,SAwD/B,CAAC"}

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,188 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._group_1umzz_3 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    --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_1umzz_3[data-orientation=vertical] {
+    flex-direction: column;
+  }
+  ._group_1umzz_3[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._group_1umzz_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_1umzz_3[data-invalid] {
+    --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);
+    --_segmented-control-fill: var(--sys-color-error-fg);
+    --_segmented-control-on-fill: var(
+    	--sys-color-error-bg
+    );
+  }
+  ._option_1umzz_60 {
+    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_1umzz_60 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._option_1umzz_60[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._option_1umzz_60 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._option_1umzz_60::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_1umzz_60::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._option_1umzz_60:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._option_1umzz_60:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  ._option_1umzz_60 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  @media not (prefers-reduced-motion) {
+    ._option_1umzz_60 {
+      transition: color var(--sys-motion-short) var(--sys-motion-standard);
+    }
+  }
+  ._option_1umzz_60[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._indicator_1umzz_120 {
+    --_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_1umzz_120 {
+      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_1umzz_120[data-jump] {
+    --_indicator-slide: 0s;
+  }
+  ._indicator_1umzz_120[data-empty] {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_1umzz_120[data-empty] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_1umzz_120 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._indicator_1umzz_120 {
+    border-radius: var(--sys-radius-full);
+    background: var(--_segmented-control-fill);
+  }
+  ._option_1umzz_60[data-pressed][data-focus-visible] ~ ._indicator_1umzz_120 {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._indicatorLabels_1umzz_165 {
+    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_1umzz_165 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
+    }
+  }
+  ._group_1umzz_3[data-orientation=vertical] ._indicatorLabels_1umzz_165 {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  ._indicatorLabels_1umzz_165 ._option_1umzz_60 {
+    color: var(--_segmented-control-on-fill);
+    cursor: default;
+  }
+  ._indicatorLabels_1umzz_165 ._option_1umzz_60::after {
+    content: none;
+  }
+}

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

@@ -0,0 +1,59 @@
+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, 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 {};
+//# sourceMappingURL=segmented-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control-field/segmented-control.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,KAAK,YAAY,EACjB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACN,cAAc,EACd,YAAY,EACZ,KAAK,iBAAiB,EACtB,MAAM,uBAAuB,CAAC;AAI/B,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CAAC;AAE1D,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC5C,eAAe,CAAC,KAAK,EACrB,UAAU,CACV,GACA,QAAQ,CAAC;IACR,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC,CAAC;AAEJ,QAAA,MAAM,qBAAqB,wEAOxB,0BAA0B,KAAG,SAa/B,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,KAAK,CAAC;AAE3D,QAAA,MAAM,sBAAsB,sCAIzB,2BAA2B,KAAG,SAWhC,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,QAAQ,CAAC;IACrD,wDAAwD;IACxD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC,CAAC,CAAC;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,yBAAyB,iBAE5B,8BAA8B,KAAG,SAmBnC,CAAC;AAEF,wCAAwC;AACxC,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IAC5C,IAAI,EAAE,OAAO,YAAY,CAAC;IAC1B,MAAM,EAAE,OAAO,cAAc,CAAC;IAC9B,KAAK,EAAE,OAAO,qBAAqB,CAAC;IACpC,MAAM,EAAE,OAAO,sBAAsB,CAAC;IACtC,SAAS,EAAE,OAAO,yBAAyB,CAAC;IAC5C,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;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,EAAE,qBAS9B,CAAC"}