@linyao.tw/ui 1.0.0 → 1.2.0

package/dist/components/selection/controls.js

@@ -1,171 +1,194 @@
-import e from "./selection.module.js";
-import { cx as t, mergeStateClassName as n } from "./classnames.js";
-import { forwardRef as r, useState as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { MinusIcon as c } from "@phosphor-icons/react/dist/csr/Minus";
-import { CheckIcon as l } from "@phosphor-icons/react/dist/csr/Check";
-import { Checkbox as u } from "@base-ui/react/checkbox";
-import { CheckboxGroup as d } from "@base-ui/react/checkbox-group";
-import { Radio as f } from "@base-ui/react/radio";
-import { RadioGroup as p } from "@base-ui/react/radio-group";
-import { Slider as m } from "@base-ui/react/slider";
-import { Switch as h } from "@base-ui/react/switch";
-import { Toggle as g } from "@base-ui/react/toggle";
-import { ToggleGroup as _ } from "@base-ui/react/toggle-group";
+"use client";
+import { cx as e, withStateClassName as t } from "../../internal/class-names.js";
+import { forwardRef as n, useCallback as r, useId as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { MinusIcon as l } from "@phosphor-icons/react/dist/csr/Minus";
+import { CheckIcon as u } from "@phosphor-icons/react/dist/csr/Check";
+import { Checkbox as d } from "@base-ui/react/checkbox";
+import { CheckboxGroup as f } from "@base-ui/react/checkbox-group";
+import { Radio as p } from "@base-ui/react/radio";
+import { RadioGroup as m } from "@base-ui/react/radio-group";
+import { Slider as h } from "@base-ui/react/slider";
+import { Switch as g } from "@base-ui/react/switch";
+import { Toggle as _ } from "@base-ui/react/toggle";
+import { ToggleGroup as v } from "@base-ui/react/toggle-group";
 //#region src/components/selection/controls.tsx
-function v({ indeterminate: e = !1 }) {
-	return o(e ? c : l, {
+function y({ indeterminate: e = !1 }) {
+	return s(e ? l : u, {
 		"aria-hidden": "true",
 		weight: "bold"
 	});
 }
-var y = r(function({ children: t, className: r, indicator: i, indeterminate: a, ...c }, l) {
-	return /* @__PURE__ */ s(u.Root, {
-		...c,
-		className: n(e.checkbox, r),
-		indeterminate: a,
-		ref: l,
-		children: [/* @__PURE__ */ o(u.Indicator, {
-			className: e.checkboxIndicator,
+var b = n(function({ children: e, className: n, indicator: r, indeterminate: i, ...a }, o) {
+	return /* @__PURE__ */ c(d.Root, {
+		...a,
+		className: t("lyds-checkbox", n),
+		indeterminate: i,
+		ref: o,
+		children: [/* @__PURE__ */ s(d.Indicator, {
+			className: "lyds-checkbox__indicator",
 			keepMounted: !0,
-			children: i ?? /* @__PURE__ */ o(v, { indeterminate: a ?? !1 })
-		}), t]
+			children: r ?? /* @__PURE__ */ s(y, { indeterminate: i ?? !1 })
+		}), e]
 	});
-}), b = r(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ o(d, {
-		...r,
-		className: n(e.choiceGroup, t),
-		ref: i
+}), x = n(function({ className: e, ...n }, r) {
+	return /* @__PURE__ */ s(f, {
+		...n,
+		className: t("lyds-choice-group", e),
+		ref: r
 	});
-}), x = r(function({ description: n, label: r, wrapperClassName: i, ...a }, c) {
-	return /* @__PURE__ */ s("label", {
-		className: t(e.choiceLabel, i),
-		children: [/* @__PURE__ */ o(y, {
-			...a,
-			ref: c
-		}), /* @__PURE__ */ s("span", {
-			className: e.choiceCopy,
-			children: [/* @__PURE__ */ o("span", {
-				className: e.choiceTitle,
-				children: r
-			}), n ? /* @__PURE__ */ o("span", {
-				className: e.choiceDescription,
+});
+function S(e) {
+	let t = i();
+	return {
+		titleId: `${t}-title`,
+		descriptionId: e ? `${t}-description` : void 0
+	};
+}
+var C = n(function({ description: t, label: n, wrapperClassName: r, ...i }, a) {
+	let { titleId: o, descriptionId: l } = S(t);
+	return /* @__PURE__ */ c("label", {
+		className: e("lyds-choice", r),
+		children: [/* @__PURE__ */ s(b, {
+			...i,
+			ref: a,
+			"aria-labelledby": i["aria-labelledby"] ?? o,
+			"aria-describedby": i["aria-describedby"] ?? l
+		}), /* @__PURE__ */ c("span", {
+			className: "lyds-choice__copy",
+			children: [/* @__PURE__ */ s("span", {
+				className: "lyds-choice__title",
+				id: o,
 				children: n
+			}), t ? /* @__PURE__ */ s("span", {
+				className: "lyds-choice__description",
+				id: l,
+				children: t
 			}) : null]
 		})]
 	});
-}), S = r(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ o(p, {
-		...r,
-		className: n(e.choiceGroup, t),
-		ref: i
+}), w = n(function({ className: e, ...n }, r) {
+	return /* @__PURE__ */ s(m, {
+		...n,
+		className: t("lyds-choice-group", e),
+		ref: r
 	});
-}), C = r(function({ children: t, className: r, ...i }, a) {
-	return /* @__PURE__ */ s(f.Root, {
-		...i,
-		className: n(e.radio, r),
-		ref: a,
-		children: [/* @__PURE__ */ o(f.Indicator, {
-			className: e.radioIndicator,
+}), T = n(function({ children: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ c(p.Root, {
+		...r,
+		className: t("lyds-radio", n),
+		ref: i,
+		children: [/* @__PURE__ */ s(p.Indicator, {
+			className: "lyds-radio__indicator",
 			keepMounted: !0
-		}), t]
+		}), e]
 	});
-}), w = r(function({ description: n, label: r, wrapperClassName: i, ...a }, c) {
-	return /* @__PURE__ */ s("label", {
-		className: t(e.choiceLabel, i),
-		children: [/* @__PURE__ */ o(C, {
-			...a,
-			ref: c
-		}), /* @__PURE__ */ s("span", {
-			className: e.choiceCopy,
-			children: [/* @__PURE__ */ o("span", {
-				className: e.choiceTitle,
-				children: r
-			}), n ? /* @__PURE__ */ o("span", {
-				className: e.choiceDescription,
+}), E = n(function({ description: t, label: n, wrapperClassName: r, ...i }, a) {
+	let { titleId: o, descriptionId: l } = S(t);
+	return /* @__PURE__ */ c("label", {
+		className: e("lyds-choice", r),
+		children: [/* @__PURE__ */ s(T, {
+			...i,
+			ref: a,
+			"aria-labelledby": i["aria-labelledby"] ?? o,
+			"aria-describedby": i["aria-describedby"] ?? l
+		}), /* @__PURE__ */ c("span", {
+			className: "lyds-choice__copy",
+			children: [/* @__PURE__ */ s("span", {
+				className: "lyds-choice__title",
+				id: o,
 				children: n
+			}), t ? /* @__PURE__ */ s("span", {
+				className: "lyds-choice__description",
+				id: l,
+				children: t
 			}) : null]
 		})]
 	});
-}), T = r(function({ children: t, className: r, ...i }, a) {
-	return /* @__PURE__ */ s(h.Root, {
-		...i,
-		className: n(e.switch, r),
-		ref: a,
+}), D = n(function({ children: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ c(g.Root, {
+		...r,
+		className: t("lyds-switch", n),
+		ref: i,
 		children: [
-			/* @__PURE__ */ o("span", {
+			/* @__PURE__ */ s("span", {
 				"aria-hidden": "true",
-				className: e.switchSignal
+				className: "lyds-switch__signal"
 			}),
-			/* @__PURE__ */ o(h.Thumb, { className: e.switchThumb }),
-			t
+			/* @__PURE__ */ s(g.Thumb, { className: "lyds-switch__thumb" }),
+			e
 		]
 	});
 });
-function E(e) {
+function O(e) {
 	return Array.isArray(e) ? Math.max(e.length, 1) : 1;
 }
-var D = r(function({ "aria-describedby": t, "aria-label": r, "aria-labelledby": i, className: a, defaultValue: c, getAriaLabel: l, getAriaValueText: u, showValue: d = !1, value: f, ...p }, h) {
-	let g = E(f ?? c), _ = r ? (e) => g === 1 ? r : `${r} ${e + 1}` : void 0;
-	return /* @__PURE__ */ s(m.Root, {
+var k = n(function({ "aria-describedby": e, "aria-label": n, "aria-labelledby": i, className: a, defaultValue: o, getAriaLabel: l, getAriaValueText: u, showValue: d = !1, value: f, ...p }, m) {
+	let g = O(f ?? o), _ = n ? (e) => g === 1 ? n : `${n} ${e + 1}` : void 0, v = r((t) => {
+		t && (e ? t.setAttribute("aria-describedby", e) : t.removeAttribute("aria-describedby"), i && !l && t.setAttribute("aria-labelledby", i));
+	}, [
+		e,
+		i,
+		l
+	]);
+	return /* @__PURE__ */ c(h.Root, {
 		...p,
-		"aria-label": r,
+		"aria-label": n,
 		"aria-labelledby": i,
-		className: n(e.slider, a),
-		defaultValue: c,
-		ref: h,
+		className: t("lyds-slider", a),
+		defaultValue: o,
+		ref: m,
 		value: f,
-		children: [d ? /* @__PURE__ */ o(m.Value, { className: e.sliderValue }) : null, /* @__PURE__ */ o(m.Control, {
-			className: e.sliderControl,
-			children: /* @__PURE__ */ s(m.Track, {
-				className: e.sliderTrack,
-				children: [/* @__PURE__ */ o(m.Indicator, { className: e.sliderIndicator }), Array.from({ length: g }, (n, r) => /* @__PURE__ */ o(m.Thumb, {
-					className: e.sliderThumb,
+		children: [d ? /* @__PURE__ */ s(h.Value, { className: "lyds-slider__value" }) : null, /* @__PURE__ */ s(h.Control, {
+			className: "lyds-slider__control",
+			children: /* @__PURE__ */ c(h.Track, {
+				className: "lyds-slider__track",
+				children: [/* @__PURE__ */ s(h.Indicator, { className: "lyds-slider__indicator" }), Array.from({ length: g }, (e, t) => /* @__PURE__ */ s(h.Thumb, {
+					className: "lyds-slider__thumb",
 					getAriaLabel: l ?? _,
 					getAriaValueText: u,
-					inputRef: (e) => {
-						e && (t && e.setAttribute("aria-describedby", t), i && !l && e.setAttribute("aria-labelledby", i));
-					},
-					index: r
-				}, r))]
+					inputRef: v,
+					index: t
+				}, t))]
 			})
 		})]
 	});
-}), O = r(function({ className: n, variant: r = "standard", ...i }, a) {
-	return /* @__PURE__ */ o(g, {
-		...i,
-		className: (i) => t(e.toggle, r === "quiet" && e.toggleQuiet, typeof n == "function" ? n(i) : n),
-		ref: a
-	});
-}), k = r(function({ className: t, ...r }, i) {
-	return /* @__PURE__ */ o(_, {
+}), A = n(function({ className: t, variant: n = "standard", ...r }, i) {
+	return /* @__PURE__ */ s(_, {
 		...r,
-		className: n(e.toggleGroup, t),
+		className: (r) => e("lyds-toggle", n === "quiet" && "lyds-toggle--quiet", typeof t == "function" ? t(r) : t),
 		ref: i
 	});
-}), A = r(function({ allowEmpty: t = !1, "aria-label": r, className: c, defaultValue: l = null, disabled: u = !1, name: d, onValueChange: f, size: p = "md", value: m, ...h }, g) {
-	let v = m !== void 0, [y, b] = i(l), x = v ? m : y;
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(_, {
+}), j = n(function({ className: e, ...n }, r) {
+	return /* @__PURE__ */ s(v, {
+		...n,
+		className: t("lyds-toggle-group", e),
+		ref: r
+	});
+}), M = n(function({ allowEmpty: e = !1, "aria-label": n, "aria-labelledby": r, className: i, defaultValue: l = null, disabled: u = !1, name: d, onValueChange: f, size: p = "md", value: m, ...h }, g) {
+	let _ = m !== void 0, [y, b] = a(l), x = _ ? m : y;
+	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(v, {
 		...h,
-		"aria-label": r,
-		className: n(e.segmentedControl, c),
+		"aria-label": n,
+		"aria-labelledby": r,
+		className: t("lyds-segmented-control", i),
 		"data-size": p,
 		disabled: u,
 		multiple: !1,
-		onValueChange: (e, n) => {
-			let r = e[0] ?? null;
-			(t || r !== null) && (f?.(r, n), !n.isCanceled && (v || b(r)));
+		onValueChange: (t, n) => {
+			let r = t[0] ?? null;
+			(e || r !== null) && (f?.(r, n), !n.isCanceled && (_ || b(r)));
 		},
 		ref: g,
 		value: x === null ? [] : [x]
-	}), d ? /* @__PURE__ */ o("input", {
+	}), d ? /* @__PURE__ */ s("input", {
 		disabled: u,
 		name: d,
 		type: "hidden",
 		value: x ?? ""
 	}) : null] });
-}), j = O;
+}), N = A;
 //#endregion
-export { y as Checkbox, b as CheckboxGroup, x as CheckboxItem, C as Radio, S as RadioGroup, w as RadioItem, A as SegmentedControl, j as SegmentedControlItem, D as Slider, T as Switch, O as Toggle, k as ToggleGroup };
+export { b as Checkbox, x as CheckboxGroup, C as CheckboxItem, T as Radio, w as RadioGroup, E as RadioItem, M as SegmentedControl, N as SegmentedControlItem, k as Slider, D as Switch, A as Toggle, j as ToggleGroup };
 
 //# sourceMappingURL=controls.js.map

package/dist/components/selection/controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"controls.js","names":[],"sources":["../../../src/components/selection/controls.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox, type CheckboxRootProps } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup, type CheckboxGroupProps as BaseCheckboxGroupProps } from \"@base-ui/react/checkbox-group\";\nimport { Radio as BaseRadio, type RadioRootProps } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup, type RadioGroupProps as BaseRadioGroupProps } from \"@base-ui/react/radio-group\";\nimport { Slider as BaseSlider, type SliderRootProps } from \"@base-ui/react/slider\";\nimport { Switch as BaseSwitch, type SwitchRootProps } from \"@base-ui/react/switch\";\nimport { Toggle as BaseToggle, type ToggleProps as BaseToggleProps } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as BaseToggleGroup, type ToggleGroupProps as BaseToggleGroupProps } from \"@base-ui/react/toggle-group\";\nimport { CheckIcon } from \"@phosphor-icons/react/dist/csr/Check\";\nimport { MinusIcon } from \"@phosphor-icons/react/dist/csr/Minus\";\nimport { forwardRef, useState, type ForwardedRef, type JSX, type ReactNode, type RefAttributes } from \"react\";\n\nimport { cx, mergeStateClassName } from \"./classnames\";\nimport styles from \"./selection.module.css\";\n\nfunction CheckGlyph({ indeterminate = false }: { indeterminate?: boolean }) {\n\treturn indeterminate ? <MinusIcon aria-hidden=\"true\" weight=\"bold\" /> : <CheckIcon aria-hidden=\"true\" weight=\"bold\" />;\n}\n\nexport interface CheckboxProps extends CheckboxRootProps {\n\tindicator?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLElement, CheckboxProps>(function Checkbox({ children, className, indicator, indeterminate, ...props }, ref) {\n\treturn (\n\t\t<BaseCheckbox.Root {...props} className={mergeStateClassName(styles.checkbox, className)} indeterminate={indeterminate} ref={ref}>\n\t\t\t<BaseCheckbox.Indicator className={styles.checkboxIndicator} keepMounted>\n\t\t\t\t{indicator ?? <CheckGlyph indeterminate={indeterminate ?? false} />}\n\t\t\t</BaseCheckbox.Indicator>\n\t\t\t{children}\n\t\t</BaseCheckbox.Root>\n\t);\n});\n\nexport type CheckboxGroupProps = BaseCheckboxGroupProps;\n\nexport const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(function CheckboxGroup({ className, ...props }, ref) {\n\treturn <BaseCheckboxGroup {...props} className={mergeStateClassName(styles.choiceGroup, className)} ref={ref} />;\n});\n\nexport interface CheckboxItemProps extends CheckboxProps {\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\twrapperClassName?: string;\n}\n\nexport const CheckboxItem = forwardRef<HTMLElement, CheckboxItemProps>(function CheckboxItem({ description, label, wrapperClassName, ...props }, ref) {\n\treturn (\n\t\t<label className={cx(styles.choiceLabel, wrapperClassName)}>\n\t\t\t<Checkbox {...props} ref={ref} />\n\t\t\t<span className={styles.choiceCopy}>\n\t\t\t\t<span className={styles.choiceTitle}>{label}</span>\n\t\t\t\t{description ? <span className={styles.choiceDescription}>{description}</span> : null}\n\t\t\t</span>\n\t\t</label>\n\t);\n});\n\nexport type RadioGroupProps<Value = string> = BaseRadioGroupProps<Value>;\n\ntype RadioGroupComponent = <Value = string>(props: RadioGroupProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const RadioGroup = forwardRef(function RadioGroup<Value = string>({ className, ...props }: RadioGroupProps<Value>, ref: ForwardedRef<HTMLDivElement>) {\n\treturn <BaseRadioGroup {...props} className={mergeStateClassName(styles.choiceGroup, className)} ref={ref} />;\n}) as RadioGroupComponent;\n\nexport type RadioProps<Value = string> = RadioRootProps<Value>;\n\ntype RadioComponent = <Value = string>(props: RadioProps<Value> & RefAttributes<HTMLElement>) => JSX.Element;\n\nexport const Radio = forwardRef(function Radio<Value = string>({ children, className, ...props }: RadioProps<Value>, ref: ForwardedRef<HTMLElement>) {\n\treturn (\n\t\t<BaseRadio.Root {...props} className={mergeStateClassName(styles.radio, className)} ref={ref}>\n\t\t\t<BaseRadio.Indicator className={styles.radioIndicator} keepMounted />\n\t\t\t{children}\n\t\t</BaseRadio.Root>\n\t);\n}) as RadioComponent;\n\nexport interface RadioItemProps<Value = string> extends RadioProps<Value> {\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\twrapperClassName?: string;\n}\n\ntype RadioItemComponent = <Value = string>(props: RadioItemProps<Value> & RefAttributes<HTMLElement>) => JSX.Element;\n\nexport const RadioItem = forwardRef(function RadioItem<Value = string>({ description, label, wrapperClassName, ...props }: RadioItemProps<Value>, ref: ForwardedRef<HTMLElement>) {\n\treturn (\n\t\t<label className={cx(styles.choiceLabel, wrapperClassName)}>\n\t\t\t<Radio {...props} ref={ref} />\n\t\t\t<span className={styles.choiceCopy}>\n\t\t\t\t<span className={styles.choiceTitle}>{label}</span>\n\t\t\t\t{description ? <span className={styles.choiceDescription}>{description}</span> : null}\n\t\t\t</span>\n\t\t</label>\n\t);\n}) as RadioItemComponent;\n\nexport interface SwitchProps extends SwitchRootProps {\n\tchildren?: ReactNode;\n}\n\nexport const Switch = forwardRef<HTMLElement, SwitchProps>(function Switch({ children, className, ...props }, ref) {\n\treturn (\n\t\t<BaseSwitch.Root {...props} className={mergeStateClassName(styles.switch, className)} ref={ref}>\n\t\t\t<span aria-hidden=\"true\" className={styles.switchSignal} />\n\t\t\t<BaseSwitch.Thumb className={styles.switchThumb} />\n\t\t\t{children}\n\t\t</BaseSwitch.Root>\n\t);\n});\n\nexport interface SliderProps<Value extends number | readonly number[] = number> extends SliderRootProps<Value> {\n\tgetAriaLabel?: (index: number) => string;\n\tgetAriaValueText?: (formattedValue: string, value: number, index: number) => string;\n\tshowValue?: boolean;\n}\n\ntype SliderComponent = <Value extends number | readonly number[] = number>(props: SliderProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nfunction getThumbCount(value: number | readonly number[] | undefined): number {\n\treturn Array.isArray(value) ? Math.max(value.length, 1) : 1;\n}\n\nexport const Slider = forwardRef(function Slider<Value extends number | readonly number[] = number>(\n\t{\n\t\t\"aria-describedby\": ariaDescribedby,\n\t\t\"aria-label\": ariaLabel,\n\t\t\"aria-labelledby\": ariaLabelledby,\n\t\tclassName,\n\t\tdefaultValue,\n\t\tgetAriaLabel,\n\t\tgetAriaValueText,\n\t\tshowValue = false,\n\t\tvalue,\n\t\t...props\n\t}: SliderProps<Value>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst thumbCount = getThumbCount(value ?? defaultValue);\n\tconst fallbackThumbLabel = ariaLabel ? (index: number) => (thumbCount === 1 ? ariaLabel : `${ariaLabel} ${index + 1}`) : undefined;\n\n\treturn (\n\t\t<BaseSlider.Root {...props} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} className={mergeStateClassName(styles.slider, className)} defaultValue={defaultValue} ref={ref} value={value}>\n\t\t\t{showValue ? <BaseSlider.Value className={styles.sliderValue} /> : null}\n\t\t\t<BaseSlider.Control className={styles.sliderControl}>\n\t\t\t\t<BaseSlider.Track className={styles.sliderTrack}>\n\t\t\t\t\t<BaseSlider.Indicator className={styles.sliderIndicator} />\n\t\t\t\t\t{Array.from({ length: thumbCount }, (_, index) => (\n\t\t\t\t\t\t<BaseSlider.Thumb\n\t\t\t\t\t\t\tclassName={styles.sliderThumb}\n\t\t\t\t\t\t\tgetAriaLabel={getAriaLabel ?? fallbackThumbLabel}\n\t\t\t\t\t\t\tgetAriaValueText={getAriaValueText}\n\t\t\t\t\t\t\tinputRef={input => {\n\t\t\t\t\t\t\t\tif (!input) return;\n\t\t\t\t\t\t\t\tif (ariaDescribedby) input.setAttribute(\"aria-describedby\", ariaDescribedby);\n\t\t\t\t\t\t\t\tif (ariaLabelledby && !getAriaLabel) input.setAttribute(\"aria-labelledby\", ariaLabelledby);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</BaseSlider.Track>\n\t\t\t</BaseSlider.Control>\n\t\t</BaseSlider.Root>\n\t);\n}) as SliderComponent;\n\nexport interface ToggleProps<Value extends string = string> extends BaseToggleProps<Value> {\n\tvariant?: \"standard\" | \"quiet\";\n}\n\ntype ToggleComponent = <Value extends string = string>(props: ToggleProps<Value> & RefAttributes<HTMLButtonElement>) => JSX.Element;\n\nexport const Toggle = forwardRef(function Toggle<Value extends string = string>({ className, variant = \"standard\", ...props }: ToggleProps<Value>, ref: ForwardedRef<HTMLButtonElement>) {\n\treturn <BaseToggle {...props} className={state => cx(styles.toggle, variant === \"quiet\" && styles.toggleQuiet, typeof className === \"function\" ? className(state) : className)} ref={ref} />;\n}) as ToggleComponent;\n\nexport type ToggleGroupProps<Value extends string = string> = BaseToggleGroupProps<Value>;\n\ntype ToggleGroupComponent = <Value extends string = string>(props: ToggleGroupProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const ToggleGroup = forwardRef(function ToggleGroup<Value extends string = string>({ className, ...props }: ToggleGroupProps<Value>, ref: ForwardedRef<HTMLDivElement>) {\n\treturn <BaseToggleGroup {...props} className={mergeStateClassName(styles.toggleGroup, className)} ref={ref} />;\n}) as ToggleGroupComponent;\n\nexport interface SegmentedControlProps<Value extends string = string> extends Omit<BaseToggleGroupProps<Value>, \"aria-readonly\" | \"defaultValue\" | \"multiple\" | \"onValueChange\" | \"value\"> {\n\tallowEmpty?: boolean;\n\tdefaultValue?: Value | null;\n\tname?: string;\n\tonValueChange?: (value: Value | null, details: BaseToggleGroup.ChangeEventDetails) => void;\n\tsize?: \"sm\" | \"md\";\n\tvalue?: Value | null;\n}\n\ntype SegmentedControlComponent = <Value extends string = string>(props: SegmentedControlProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const SegmentedControl = forwardRef(function SegmentedControl<Value extends string = string>(\n\t{ allowEmpty = false, \"aria-label\": ariaLabel, className, defaultValue = null, disabled = false, name, onValueChange, size = \"md\", value, ...props }: SegmentedControlProps<Value>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst controlled = value !== undefined;\n\tconst [internalValue, setInternalValue] = useState<Value | null>(defaultValue);\n\tconst currentValue = controlled ? value : internalValue;\n\n\treturn (\n\t\t<>\n\t\t\t<BaseToggleGroup\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tclassName={mergeStateClassName(styles.segmentedControl, className)}\n\t\t\t\tdata-size={size}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmultiple={false}\n\t\t\t\tonValueChange={(nextValues, details) => {\n\t\t\t\t\tconst nextValue = nextValues[0] ?? null;\n\t\t\t\t\tif (!allowEmpty && nextValue === null) return;\n\t\t\t\t\tonValueChange?.(nextValue, details);\n\t\t\t\t\tif (details.isCanceled) return;\n\t\t\t\t\tif (!controlled) setInternalValue(nextValue);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tvalue={currentValue === null ? [] : [currentValue]}\n\t\t\t/>\n\t\t\t{name ? <input disabled={disabled} name={name} type=\"hidden\" value={currentValue ?? \"\"} /> : null}\n\t\t</>\n\t);\n}) as SegmentedControlComponent;\n\nexport const SegmentedControlItem = Toggle;\n"],"mappings":"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"}
+{"version":3,"file":"controls.js","names":[],"sources":["../../../src/components/selection/controls.tsx"],"sourcesContent":["import { Checkbox as BaseCheckbox, type CheckboxRootProps } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup, type CheckboxGroupProps as BaseCheckboxGroupProps } from \"@base-ui/react/checkbox-group\";\nimport { Radio as BaseRadio, type RadioRootProps } from \"@base-ui/react/radio\";\nimport { RadioGroup as BaseRadioGroup, type RadioGroupProps as BaseRadioGroupProps } from \"@base-ui/react/radio-group\";\nimport { Slider as BaseSlider, type SliderRootProps } from \"@base-ui/react/slider\";\nimport { Switch as BaseSwitch, type SwitchRootProps } from \"@base-ui/react/switch\";\nimport { Toggle as BaseToggle, type ToggleProps as BaseToggleProps } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as BaseToggleGroup, type ToggleGroupProps as BaseToggleGroupProps } from \"@base-ui/react/toggle-group\";\nimport { CheckIcon } from \"@phosphor-icons/react/dist/csr/Check\";\nimport { MinusIcon } from \"@phosphor-icons/react/dist/csr/Minus\";\nimport { forwardRef, useCallback, useId, useState, type ForwardedRef, type JSX, type ReactNode, type RefAttributes } from \"react\";\n\nimport { cx, withStateClassName, type AccessibleName } from \"@/internal\";\n\nfunction CheckGlyph({ indeterminate = false }: { indeterminate?: boolean }) {\n\treturn indeterminate ? <MinusIcon aria-hidden=\"true\" weight=\"bold\" /> : <CheckIcon aria-hidden=\"true\" weight=\"bold\" />;\n}\n\nexport interface CheckboxProps extends CheckboxRootProps {\n\tindicator?: ReactNode;\n}\n\nexport const Checkbox = forwardRef<HTMLElement, CheckboxProps>(function Checkbox({ children, className, indicator, indeterminate, ...props }, ref) {\n\treturn (\n\t\t<BaseCheckbox.Root {...props} className={withStateClassName(\"lyds-checkbox\", className)} indeterminate={indeterminate} ref={ref}>\n\t\t\t<BaseCheckbox.Indicator className={\"lyds-checkbox__indicator\"} keepMounted>\n\t\t\t\t{indicator ?? <CheckGlyph indeterminate={indeterminate ?? false} />}\n\t\t\t</BaseCheckbox.Indicator>\n\t\t\t{children}\n\t\t</BaseCheckbox.Root>\n\t);\n});\n\nexport type CheckboxGroupProps = BaseCheckboxGroupProps;\n\nexport const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(function CheckboxGroup({ className, ...props }, ref) {\n\treturn <BaseCheckboxGroup {...props} className={withStateClassName(\"lyds-choice-group\", className)} ref={ref} />;\n});\n\n/**\n * The wrapping <label> makes the whole row a hit target, but it also makes every word inside it\n * part of the control's accessible name — including the description. Naming the control from the\n * title and describing it from the description keeps the row clickable without reading the\n * supporting copy out as part of the name. The visible title always wins over an `aria-label`,\n * which is what WCAG 2.5.3 asks for; pass `aria-labelledby` to point somewhere else entirely.\n */\nfunction useChoiceCopyIds(description: ReactNode) {\n\tconst id = useId();\n\treturn { titleId: `${id}-title`, descriptionId: description ? `${id}-description` : undefined };\n}\n\nexport interface CheckboxItemProps extends CheckboxProps {\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\twrapperClassName?: string;\n}\n\nexport const CheckboxItem = forwardRef<HTMLElement, CheckboxItemProps>(function CheckboxItem({ description, label, wrapperClassName, ...props }, ref) {\n\tconst { titleId, descriptionId } = useChoiceCopyIds(description);\n\n\treturn (\n\t\t<label className={cx(\"lyds-choice\", wrapperClassName)}>\n\t\t\t<Checkbox {...props} ref={ref} aria-labelledby={props[\"aria-labelledby\"] ?? titleId} aria-describedby={props[\"aria-describedby\"] ?? descriptionId} />\n\t\t\t<span className={\"lyds-choice__copy\"}>\n\t\t\t\t<span className={\"lyds-choice__title\"} id={titleId}>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t\t{description ? (\n\t\t\t\t\t<span className={\"lyds-choice__description\"} id={descriptionId}>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</label>\n\t);\n});\n\nexport type RadioGroupProps<Value = string> = BaseRadioGroupProps<Value>;\n\ntype RadioGroupComponent = <Value = string>(props: RadioGroupProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const RadioGroup = forwardRef(function RadioGroup<Value = string>({ className, ...props }: RadioGroupProps<Value>, ref: ForwardedRef<HTMLDivElement>) {\n\treturn <BaseRadioGroup {...props} className={withStateClassName(\"lyds-choice-group\", className)} ref={ref} />;\n}) as RadioGroupComponent;\n\nexport type RadioProps<Value = string> = RadioRootProps<Value>;\n\ntype RadioComponent = <Value = string>(props: RadioProps<Value> & RefAttributes<HTMLElement>) => JSX.Element;\n\nexport const Radio = forwardRef(function Radio<Value = string>({ children, className, ...props }: RadioProps<Value>, ref: ForwardedRef<HTMLElement>) {\n\treturn (\n\t\t<BaseRadio.Root {...props} className={withStateClassName(\"lyds-radio\", className)} ref={ref}>\n\t\t\t<BaseRadio.Indicator className={\"lyds-radio__indicator\"} keepMounted />\n\t\t\t{children}\n\t\t</BaseRadio.Root>\n\t);\n}) as RadioComponent;\n\nexport interface RadioItemProps<Value = string> extends RadioProps<Value> {\n\tlabel: ReactNode;\n\tdescription?: ReactNode;\n\twrapperClassName?: string;\n}\n\ntype RadioItemComponent = <Value = string>(props: RadioItemProps<Value> & RefAttributes<HTMLElement>) => JSX.Element;\n\nexport const RadioItem = forwardRef(function RadioItem<Value = string>({ description, label, wrapperClassName, ...props }: RadioItemProps<Value>, ref: ForwardedRef<HTMLElement>) {\n\tconst { titleId, descriptionId } = useChoiceCopyIds(description);\n\n\treturn (\n\t\t<label className={cx(\"lyds-choice\", wrapperClassName)}>\n\t\t\t<Radio {...props} ref={ref} aria-labelledby={props[\"aria-labelledby\"] ?? titleId} aria-describedby={props[\"aria-describedby\"] ?? descriptionId} />\n\t\t\t<span className={\"lyds-choice__copy\"}>\n\t\t\t\t<span className={\"lyds-choice__title\"} id={titleId}>\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t\t{description ? (\n\t\t\t\t\t<span className={\"lyds-choice__description\"} id={descriptionId}>\n\t\t\t\t\t\t{description}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t</span>\n\t\t</label>\n\t);\n}) as RadioItemComponent;\n\nexport interface SwitchProps extends SwitchRootProps {\n\tchildren?: ReactNode;\n}\n\nexport const Switch = forwardRef<HTMLElement, SwitchProps>(function Switch({ children, className, ...props }, ref) {\n\treturn (\n\t\t<BaseSwitch.Root {...props} className={withStateClassName(\"lyds-switch\", className)} ref={ref}>\n\t\t\t<span aria-hidden=\"true\" className={\"lyds-switch__signal\"} />\n\t\t\t<BaseSwitch.Thumb className={\"lyds-switch__thumb\"} />\n\t\t\t{children}\n\t\t</BaseSwitch.Root>\n\t);\n});\n\nexport interface SliderProps<Value extends number | readonly number[] = number> extends SliderRootProps<Value> {\n\tgetAriaLabel?: (index: number) => string;\n\tgetAriaValueText?: (formattedValue: string, value: number, index: number) => string;\n\tshowValue?: boolean;\n}\n\ntype SliderComponent = <Value extends number | readonly number[] = number>(props: SliderProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nfunction getThumbCount(value: number | readonly number[] | undefined): number {\n\treturn Array.isArray(value) ? Math.max(value.length, 1) : 1;\n}\n\nexport const Slider = forwardRef(function Slider<Value extends number | readonly number[] = number>(\n\t{\n\t\t\"aria-describedby\": ariaDescribedby,\n\t\t\"aria-label\": ariaLabel,\n\t\t\"aria-labelledby\": ariaLabelledby,\n\t\tclassName,\n\t\tdefaultValue,\n\t\tgetAriaLabel,\n\t\tgetAriaValueText,\n\t\tshowValue = false,\n\t\tvalue,\n\t\t...props\n\t}: SliderProps<Value>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst thumbCount = getThumbCount(value ?? defaultValue);\n\tconst fallbackThumbLabel = ariaLabel ? (index: number) => (thumbCount === 1 ? ariaLabel : `${ariaLabel} ${index + 1}`) : undefined;\n\t// Base UI owns the thumb inputs, so these two relationships have to be applied to the nodes it\n\t// renders. An inline callback would detach and reattach on every render; aria-labelledby is only\n\t// ever added because Base UI sets its own, while aria-describedby is ours to clear.\n\tconst applyThumbDescription = useCallback(\n\t\t(input: HTMLInputElement | null) => {\n\t\t\tif (!input) return;\n\t\t\tif (ariaDescribedby) input.setAttribute(\"aria-describedby\", ariaDescribedby);\n\t\t\telse input.removeAttribute(\"aria-describedby\");\n\t\t\tif (ariaLabelledby && !getAriaLabel) input.setAttribute(\"aria-labelledby\", ariaLabelledby);\n\t\t},\n\t\t[ariaDescribedby, ariaLabelledby, getAriaLabel]\n\t);\n\n\treturn (\n\t\t<BaseSlider.Root {...props} aria-label={ariaLabel} aria-labelledby={ariaLabelledby} className={withStateClassName(\"lyds-slider\", className)} defaultValue={defaultValue} ref={ref} value={value}>\n\t\t\t{showValue ? <BaseSlider.Value className={\"lyds-slider__value\"} /> : null}\n\t\t\t<BaseSlider.Control className={\"lyds-slider__control\"}>\n\t\t\t\t<BaseSlider.Track className={\"lyds-slider__track\"}>\n\t\t\t\t\t<BaseSlider.Indicator className={\"lyds-slider__indicator\"} />\n\t\t\t\t\t{Array.from({ length: thumbCount }, (_, index) => (\n\t\t\t\t\t\t<BaseSlider.Thumb\n\t\t\t\t\t\t\tclassName={\"lyds-slider__thumb\"}\n\t\t\t\t\t\t\tgetAriaLabel={getAriaLabel ?? fallbackThumbLabel}\n\t\t\t\t\t\t\tgetAriaValueText={getAriaValueText}\n\t\t\t\t\t\t\tinputRef={applyThumbDescription}\n\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</BaseSlider.Track>\n\t\t\t</BaseSlider.Control>\n\t\t</BaseSlider.Root>\n\t);\n}) as SliderComponent;\n\nexport interface ToggleProps<Value extends string = string> extends BaseToggleProps<Value> {\n\tvariant?: \"standard\" | \"quiet\";\n}\n\ntype ToggleComponent = <Value extends string = string>(props: ToggleProps<Value> & RefAttributes<HTMLButtonElement>) => JSX.Element;\n\nexport const Toggle = forwardRef(function Toggle<Value extends string = string>({ className, variant = \"standard\", ...props }: ToggleProps<Value>, ref: ForwardedRef<HTMLButtonElement>) {\n\treturn <BaseToggle {...props} className={state => cx(\"lyds-toggle\", variant === \"quiet\" && \"lyds-toggle--quiet\", typeof className === \"function\" ? className(state) : className)} ref={ref} />;\n}) as ToggleComponent;\n\nexport type ToggleGroupProps<Value extends string = string> = BaseToggleGroupProps<Value>;\n\ntype ToggleGroupComponent = <Value extends string = string>(props: ToggleGroupProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const ToggleGroup = forwardRef(function ToggleGroup<Value extends string = string>({ className, ...props }: ToggleGroupProps<Value>, ref: ForwardedRef<HTMLDivElement>) {\n\treturn <BaseToggleGroup {...props} className={withStateClassName(\"lyds-toggle-group\", className)} ref={ref} />;\n}) as ToggleGroupComponent;\n\ninterface SegmentedControlOwnProps<Value extends string = string> extends Omit<\n\tBaseToggleGroupProps<Value>,\n\t\"aria-label\" | \"aria-labelledby\" | \"aria-readonly\" | \"defaultValue\" | \"multiple\" | \"onValueChange\" | \"value\"\n> {\n\tallowEmpty?: boolean;\n\tdefaultValue?: Value | null;\n\tname?: string;\n\tonValueChange?: (value: Value | null, details: BaseToggleGroup.ChangeEventDetails) => void;\n\tsize?: \"sm\" | \"md\";\n\tvalue?: Value | null;\n}\n\n/** The segments name themselves; the group they belong to does not, so it has to be told. */\nexport type SegmentedControlProps<Value extends string = string> = SegmentedControlOwnProps<Value> & AccessibleName;\n\ntype SegmentedControlComponent = <Value extends string = string>(props: SegmentedControlProps<Value> & RefAttributes<HTMLDivElement>) => JSX.Element;\n\nexport const SegmentedControl = forwardRef(function SegmentedControl<Value extends string = string>(\n\t{\n\t\tallowEmpty = false,\n\t\t\"aria-label\": ariaLabel,\n\t\t\"aria-labelledby\": ariaLabelledby,\n\t\tclassName,\n\t\tdefaultValue = null,\n\t\tdisabled = false,\n\t\tname,\n\t\tonValueChange,\n\t\tsize = \"md\",\n\t\tvalue,\n\t\t...props\n\t}: SegmentedControlProps<Value>,\n\tref: ForwardedRef<HTMLDivElement>\n) {\n\tconst controlled = value !== undefined;\n\tconst [internalValue, setInternalValue] = useState<Value | null>(defaultValue);\n\tconst currentValue = controlled ? value : internalValue;\n\n\treturn (\n\t\t<>\n\t\t\t<BaseToggleGroup\n\t\t\t\t{...props}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\taria-labelledby={ariaLabelledby}\n\t\t\t\tclassName={withStateClassName(\"lyds-segmented-control\", className)}\n\t\t\t\tdata-size={size}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tmultiple={false}\n\t\t\t\tonValueChange={(nextValues, details) => {\n\t\t\t\t\tconst nextValue = nextValues[0] ?? null;\n\t\t\t\t\tif (!allowEmpty && nextValue === null) return;\n\t\t\t\t\tonValueChange?.(nextValue, details);\n\t\t\t\t\tif (details.isCanceled) return;\n\t\t\t\t\tif (!controlled) setInternalValue(nextValue);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tvalue={currentValue === null ? [] : [currentValue]}\n\t\t\t/>\n\t\t\t{name ? <input disabled={disabled} name={name} type=\"hidden\" value={currentValue ?? \"\"} /> : null}\n\t\t</>\n\t);\n}) as SegmentedControlComponent;\n\nexport const SegmentedControlItem = Toggle;\n"],"mappings":"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"}