@vjdesigns/vjdesigns-ui 0.0.0-stage → 1.5.0

package/dist/components/forms/SegmentedControl/SegmentedControl.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../Field/FieldContext.cjs.js"),i=require("./SegmentedControl.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={sm:i.default.sm,md:i.default.md,lg:i.default.lg},c={neutral:i.default.toneNeutral,primary:i.default.tonePrimary},l={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},u={horizontal:i.default.horizontal,vertical:i.default.vertical},d=(0,a.createContext)(null);function f({value:e,icon:t,disabled:r,className:s,style:c,children:l,onChange:u,required:f,id:p,...m}){let h=(0,a.useContext)(d),g=(0,a.useId)(),_=p??g,v=!!(r||h?.disabled),y=h?h.value===e:!1,b=l!=null,x=t!=null;return(0,o.jsxs)(`label`,{htmlFor:_,style:c,"data-segment":``,"data-checked":y||void 0,"data-disabled":v||void 0,className:n.cx(i.default.segment,!b&&i.default.iconOnly,s),children:[(0,o.jsx)(`input`,{...m,id:_,type:`radio`,className:i.default.input,name:h?.name,value:e,checked:y,disabled:v,required:f??h?.required,"aria-invalid":m[`aria-invalid`]??(h?.itemInvalid?!0:void 0),"aria-describedby":[m[`aria-describedby`],h?.itemDescribedBy].filter(Boolean).join(` `)||void 0,onChange:t=>{u?.(t),!t.defaultPrevented&&t.target.checked&&h?.setValue(e)}}),(0,o.jsxs)(`span`,{className:i.default.content,children:[x&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:t}),b&&(0,o.jsxs)(`span`,{className:i.default.labelStack,children:[(0,o.jsx)(`span`,{className:i.default.labelText,children:l}),(0,o.jsx)(`span`,{className:i.default.labelSizer,"aria-hidden":`true`,children:l})]})]})]})}function p({options:p,children:m,value:h,defaultValue:g,onValueChange:_,name:v,size:y,tone:b=`neutral`,radius:x=`pill`,fullWidth:S=!1,orientation:C=`horizontal`,disabled:w,invalid:T,required:E,label:D,className:O,id:k,"aria-describedby":A,"aria-labelledby":j,...M}){let N=r.useFieldContext(),P=(0,a.useId)(),F=`${P}-label`,I=N!==null,L=!I&&D!=null,R=r.useFieldControl({id:k,invalid:T,required:E,disabled:w,size:y,"aria-describedby":A}),[z,B]=e.useControllableState({value:h,defaultValue:g,onChange:_});t.useFormReset(()=>R.id?document.getElementById(R.id):null,()=>B(g),h===void 0);let V=R.size??`md`,H=(0,a.useRef)(null),U=(0,a.useRef)(null),W=(0,a.useRef)(!1),G=(0,a.useCallback)(e=>{let t=H.current,n=U.current;if(!t||!n)return;let r=t.querySelector(`:scope > [data-segment][data-checked]`);if(!r){n.dataset.hidden=``,W.current=!1;return}let i=e||!W.current||n.dataset.hidden!==void 0;i&&(n.dataset.instant=``),n.style.setProperty(`--sc-thumb-x`,`${r.offsetLeft}px`),n.style.setProperty(`--sc-thumb-y`,`${r.offsetTop}px`),n.style.setProperty(`--sc-thumb-w`,`${r.offsetWidth}px`),n.style.setProperty(`--sc-thumb-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,i&&(n.offsetWidth,delete n.dataset.instant),W.current=!0},[]);(0,a.useLayoutEffect)(()=>{G(!1)});let K=(0,a.useRef)(null),q=(0,a.useRef)(new WeakSet);(0,a.useEffect)(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>G(!0));return K.current=e,()=>{e.disconnect(),K.current=null,q.current=new WeakSet}},[G]),(0,a.useEffect)(()=>{let e=K.current,t=H.current;if(e&&t)for(let n of[t,...t.querySelectorAll(`:scope > [data-segment]`)])q.current.has(n)||(q.current.add(n),e.observe(n))});let J={name:v??`segmented-${P}`,value:z,setValue:B,disabled:R.disabled,required:R.required},Y=N?.isGroup===!0&&j===void 0;Y&&(J.itemInvalid=R.invalid,J.itemDescribedBy=A);let X=j??(I?N.labelId:L?F:void 0),Z=Y?{"aria-describedby":A}:{role:`radiogroup`,"aria-labelledby":X,...R.ariaProps,"aria-disabled":R.disabled||void 0,"aria-required":R.required||void 0},Q=p?p.map(({value:e,label:t,icon:n,disabled:r,"aria-label":i})=>t===void 0?(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i},e):(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i,children:t},e)):m;return(0,o.jsx)(d.Provider,{value:J,children:(0,o.jsxs)(`div`,{id:R.id,...Z,...M,"data-disabled":R.disabled||void 0,"data-invalid":R.invalid||void 0,className:n.cx(i.default.root,s[V],c[b],l[x],u[C],S&&i.default.fullWidth,O),children:[L&&(0,o.jsxs)(`span`,{id:F,className:i.default.groupLabel,children:[D,R.required&&(0,o.jsxs)(`span`,{className:i.default.requiredMark,"aria-hidden":`true`,children:[` `,`*`]})]}),(0,o.jsxs)(`div`,{ref:H,className:i.default.track,children:[(0,o.jsx)(`span`,{ref:U,className:i.default.thumb,"data-hidden":``,"data-instant":``,"aria-hidden":`true`}),Q]})]})})}var m=Object.assign(p,{Item:f});exports.SegmentedControl=m,exports.SegmentedControlItem=f;

package/dist/components/forms/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,120 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation, Radius, Size } from '../../../types/common';
+/**
+ * Thumb color. `neutral` is a raised surface thumb on the sunken track;
+ * `primary` is a solid brand thumb with on-primary text. Other tones are not
+ * offered: their solid fills are for status, not for a selection indicator.
+ */
+export type SegmentedControlTone = "neutral" | "primary";
+/** A segment with a visible label; `aria-label` optionally overrides its name. */
+interface LabelledOption {
+    /** Visible segment text. */
+    label: NonNullable<ReactNode>;
+    /** Overrides the accessible name (rarely needed when `label` is text). */
+    "aria-label"?: string;
+}
+/** An icon-only segment: `aria-label` is required so it has an accessible name. */
+interface IconOnlyOption {
+    label?: undefined;
+    /** The icon that stands in for the label. */
+    icon: NonNullable<ReactNode>;
+    /** Accessible name for the icon-only segment (required). */
+    "aria-label": string;
+}
+/** One entry of `SegmentedControl`'s `options`. */
+export type SegmentedControlOption = {
+    /** Value submitted with the form and reported by `onValueChange`. */
+    value: string;
+    /** Decorative icon before the label (e.g. `<Icon name="calendar" />`). */
+    icon?: ReactNode;
+    /** Disables this segment. Arrow keys skip it. */
+    disabled?: boolean;
+} & (LabelledOption | IconOnlyOption);
+type NativeRadioProps = Omit<ComponentPropsWithRef<"input">, "type" | "size" | "value" | "children" | "checked" | "defaultChecked" | "name" | "aria-label">;
+interface SegmentedControlItemBaseProps extends NativeRadioProps {
+    /** Value submitted with the form and reported by `onValueChange`. */
+    value: string;
+    /** Decorative icon before the label (e.g. `<Icon name="calendar" />`). */
+    icon?: ReactNode;
+    /** Disables this segment (the control's `disabled` also applies). Arrow keys skip it. */
+    disabled?: boolean;
+    /** Class for the segment (label) element. The `ref` and other native props go to the input. */
+    className?: string;
+}
+/**
+ * Props for `SegmentedControl.Item`. Pass the visible label as `children`,
+ * or, for an icon-only segment, pass `icon` and a required `aria-label`.
+ */
+export type SegmentedControlItemProps = SegmentedControlItemBaseProps & ({
+    /** Visible segment label. */
+    children: NonNullable<ReactNode>;
+    /** Overrides the accessible name (rarely needed). */
+    "aria-label"?: string;
+} | {
+    children?: undefined;
+    /** The icon that stands in for the label. */
+    icon: NonNullable<ReactNode>;
+    /** Accessible name for the icon-only segment (required). */
+    "aria-label": string;
+});
+/**
+ * One segment of a `SegmentedControl`: a native radio (invisible but
+ * focusable, covering the segment) inside a `<label>`. `ref` points at the
+ * `<input>`. Must be a direct child of `SegmentedControl`.
+ */
+declare function SegmentedControlItem({ value, icon, disabled: disabledProp, className, style, children, onChange, required, id: idProp, ...rest }: SegmentedControlItemProps): import("react").JSX.Element;
+export interface SegmentedControlProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children" | "dir"> {
+    /** Segments as data. Use this or `SegmentedControl.Item` children. */
+    options?: SegmentedControlOption[];
+    /** `SegmentedControl.Item` segments, as direct children. Ignored when `options` is set. */
+    children?: ReactNode;
+    /** Selected value (controlled). Use with `onValueChange`. */
+    value?: string;
+    /** Initially selected value (uncontrolled). Leave unset for no initial selection (no thumb). */
+    defaultValue?: string;
+    /** Called with the newly selected segment's `value`. */
+    onValueChange?: (value: string) => void;
+    /** Shared `name` for the native radios (used in form submission). Generated with `useId` when omitted. */
+    name?: string;
+    /** Height and text size. Falls back to a surrounding Field's size. @default "md" */
+    size?: Size;
+    /** Thumb color: raised neutral surface, or solid primary with on-primary text. @default "neutral" */
+    tone?: SegmentedControlTone;
+    /** Corner rounding of the track; the thumb and segments follow it. @default "pill" */
+    radius?: Radius;
+    /** Stretch to the container's width with equal-width segments. */
+    fullWidth?: boolean;
+    /** Lay segments out in a row or a column. Arrow keys work in both directions either way. @default "horizontal" */
+    orientation?: Orientation;
+    /** Disables every segment. Falls back to a surrounding Field's state. */
+    disabled?: boolean;
+    /** Invalid styling and `aria-invalid`. Falls back to a surrounding Field's state. */
+    invalid?: boolean;
+    /** A selection is required: native `required` on the radios, `aria-required` on the group. */
+    required?: boolean;
+    /**
+     * Visible group label, shown above the track when the control stands alone.
+     * Ignored inside a `Field`/`Fieldset`, whose label or legend already names
+     * the group. Without a label, pass `aria-label` or `aria-labelledby`.
+     */
+    label?: ReactNode;
+}
+/**
+ * A single-choice control drawn as a pill track with a thumb that slides
+ * behind the selected segment (Day / Week / Month, Offense / Defense).
+ *
+ * Semantically a radio group: `role="radiogroup"` around native
+ * `<input type="radio">` elements that share a `name`, so Tab lands on the
+ * selected segment, arrow keys move and select, and the value submits with a
+ * form. Inside a `Fieldset` the fieldset and legend name the group instead.
+ *
+ * Use `Tabs` when the choice switches between panels of content, and
+ * `ToggleGroup` for pressed-state buttons or multi-select.
+ */
+declare function SegmentedControlRoot({ options, children, value: valueProp, defaultValue, onValueChange, name, size: sizeProp, tone, radius, fullWidth, orientation, disabled: disabledProp, invalid: invalidProp, required: requiredProp, label, className, id: idProp, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, ...rest }: SegmentedControlProps): import("react").JSX.Element;
+/** Single-choice segmented control. See `SegmentedControlProps`; segments via `options` or `SegmentedControl.Item`. */
+export declare const SegmentedControl: typeof SegmentedControlRoot & {
+    /** One segment (a native radio). */
+    Item: typeof SegmentedControlItem;
+};
+export { SegmentedControlItem };

package/dist/components/forms/SegmentedControl/SegmentedControl.mjs

@@ -0,0 +1,171 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { useFieldContext as r, useFieldControl as i } from "../Field/FieldContext.mjs";
+import a from "./SegmentedControl.module.css.mjs";
+import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/forms/SegmentedControl/SegmentedControl.tsx
+var h = {
+	sm: a.sm,
+	md: a.md,
+	lg: a.lg
+}, g = {
+	neutral: a.toneNeutral,
+	primary: a.tonePrimary
+}, _ = {
+	none: a.radiusNone,
+	xs: a.radiusXs,
+	sm: a.radiusSm,
+	md: a.radiusMd,
+	lg: a.radiusLg,
+	xl: a.radiusXl,
+	"2xl": a.radius2xl,
+	pill: a.radiusPill
+}, v = {
+	horizontal: a.horizontal,
+	vertical: a.vertical
+}, y = o(null);
+function b({ value: e, icon: t, disabled: r, className: i, style: o, children: s, onChange: l, required: d, id: f, ...h }) {
+	let g = c(y), _ = u(), v = f ?? _, b = !!(r || g?.disabled), x = g ? g.value === e : !1, S = s != null, C = t != null;
+	return /* @__PURE__ */ m("label", {
+		htmlFor: v,
+		style: o,
+		"data-segment": "",
+		"data-checked": x || void 0,
+		"data-disabled": b || void 0,
+		className: n(a.segment, !S && a.iconOnly, i),
+		children: [/* @__PURE__ */ p("input", {
+			...h,
+			id: v,
+			type: "radio",
+			className: a.input,
+			name: g?.name,
+			value: e,
+			checked: x,
+			disabled: b,
+			required: d ?? g?.required,
+			"aria-invalid": h["aria-invalid"] ?? (g?.itemInvalid ? !0 : void 0),
+			"aria-describedby": [h["aria-describedby"], g?.itemDescribedBy].filter(Boolean).join(" ") || void 0,
+			onChange: (t) => {
+				l?.(t), !t.defaultPrevented && t.target.checked && g?.setValue(e);
+			}
+		}), /* @__PURE__ */ m("span", {
+			className: a.content,
+			children: [C && /* @__PURE__ */ p("span", {
+				className: a.icon,
+				"aria-hidden": "true",
+				children: t
+			}), S && /* @__PURE__ */ m("span", {
+				className: a.labelStack,
+				children: [/* @__PURE__ */ p("span", {
+					className: a.labelText,
+					children: s
+				}), /* @__PURE__ */ p("span", {
+					className: a.labelSizer,
+					"aria-hidden": "true",
+					children: s
+				})]
+			})]
+		})]
+	});
+}
+function x({ options: o, children: c, value: x, defaultValue: S, onValueChange: C, name: w, size: T, tone: ee = "neutral", radius: te = "pill", fullWidth: E = !1, orientation: D = "horizontal", disabled: O, invalid: k, required: A, label: j, className: M, id: N, "aria-describedby": P, "aria-labelledby": F, ...I }) {
+	let L = r(), R = u(), z = `${R}-label`, B = L !== null, V = !B && j != null, H = i({
+		id: N,
+		invalid: k,
+		required: A,
+		disabled: O,
+		size: T,
+		"aria-describedby": P
+	}), [U, W] = e({
+		value: x,
+		defaultValue: S,
+		onChange: C
+	});
+	t(() => H.id ? document.getElementById(H.id) : null, () => W(S), x === void 0);
+	let G = H.size ?? "md", K = f(null), q = f(null), J = f(!1), Y = s((e) => {
+		let t = K.current, n = q.current;
+		if (!t || !n) return;
+		let r = t.querySelector(":scope > [data-segment][data-checked]");
+		if (!r) {
+			n.dataset.hidden = "", J.current = !1;
+			return;
+		}
+		let i = e || !J.current || n.dataset.hidden !== void 0;
+		i && (n.dataset.instant = ""), n.style.setProperty("--sc-thumb-x", `${r.offsetLeft}px`), n.style.setProperty("--sc-thumb-y", `${r.offsetTop}px`), n.style.setProperty("--sc-thumb-w", `${r.offsetWidth}px`), n.style.setProperty("--sc-thumb-h", `${r.offsetHeight}px`), delete n.dataset.hidden, i && (n.offsetWidth, delete n.dataset.instant), J.current = !0;
+	}, []);
+	d(() => {
+		Y(!1);
+	});
+	let X = f(null), Z = f(/* @__PURE__ */ new WeakSet());
+	l(() => {
+		if (typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(() => Y(!0));
+		return X.current = e, () => {
+			e.disconnect(), X.current = null, Z.current = /* @__PURE__ */ new WeakSet();
+		};
+	}, [Y]), l(() => {
+		let e = X.current, t = K.current;
+		if (e && t) for (let n of [t, ...t.querySelectorAll(":scope > [data-segment]")]) Z.current.has(n) || (Z.current.add(n), e.observe(n));
+	});
+	let Q = {
+		name: w ?? `segmented-${R}`,
+		value: U,
+		setValue: W,
+		disabled: H.disabled,
+		required: H.required
+	}, $ = L?.isGroup === !0 && F === void 0;
+	$ && (Q.itemInvalid = H.invalid, Q.itemDescribedBy = P);
+	let ne = F ?? (B ? L.labelId : V ? z : void 0), re = $ ? { "aria-describedby": P } : {
+		role: "radiogroup",
+		"aria-labelledby": ne,
+		...H.ariaProps,
+		"aria-disabled": H.disabled || void 0,
+		"aria-required": H.required || void 0
+	}, ie = o ? o.map(({ value: e, label: t, icon: n, disabled: r, "aria-label": i }) => t === void 0 ? /* @__PURE__ */ p(b, {
+		value: e,
+		icon: n,
+		disabled: r,
+		"aria-label": i
+	}, e) : /* @__PURE__ */ p(b, {
+		value: e,
+		icon: n,
+		disabled: r,
+		"aria-label": i,
+		children: t
+	}, e)) : c;
+	return /* @__PURE__ */ p(y.Provider, {
+		value: Q,
+		children: /* @__PURE__ */ m("div", {
+			id: H.id,
+			...re,
+			...I,
+			"data-disabled": H.disabled || void 0,
+			"data-invalid": H.invalid || void 0,
+			className: n(a.root, h[G], g[ee], _[te], v[D], E && a.fullWidth, M),
+			children: [V && /* @__PURE__ */ m("span", {
+				id: z,
+				className: a.groupLabel,
+				children: [j, H.required && /* @__PURE__ */ m("span", {
+					className: a.requiredMark,
+					"aria-hidden": "true",
+					children: [" ", "*"]
+				})]
+			}), /* @__PURE__ */ m("div", {
+				ref: K,
+				className: a.track,
+				children: [/* @__PURE__ */ p("span", {
+					ref: q,
+					className: a.thumb,
+					"data-hidden": "",
+					"data-instant": "",
+					"aria-hidden": "true"
+				}), ie]
+			})]
+		})
+	});
+}
+var S = Object.assign(x, { Item: b });
+//#endregion
+export { S as SegmentedControl, b as SegmentedControlItem };

package/dist/components/forms/SegmentedControl/SegmentedControl.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_sm_11itl_45`,t=`_md_11itl_61`,n=`_lg_11itl_77`,r=`_radiusNone_11itl_97`,i=`_radiusXs_11itl_103`,a=`_radiusSm_11itl_109`,o=`_radiusMd_11itl_115`,s=`_radiusLg_11itl_121`,c=`_radiusXl_11itl_127`,l=`_radius2xl_11itl_133`,u=`_radiusPill_11itl_139`,d=`_toneNeutral_11itl_149`,f=`_tonePrimary_11itl_159`,p=`_root_11itl_179`,m=`_fullWidth_11itl_197`,h=`_groupLabel_11itl_207`,g=`_requiredMark_11itl_223`,_=`_track_11itl_247`,v=`_horizontal_11itl_277`,y=`_vertical_11itl_287`,b=`_segment_11itl_311`,x=`_thumb_11itl_343`,S=`_iconOnly_11itl_485`,C=`_input_11itl_513`,w=`_content_11itl_537`,T=`_icon_11itl_485`,E=`_labelStack_11itl_577`,D=`_labelSizer_11itl_591`,O={sm:e,md:t,lg:n,radiusNone:r,radiusXs:i,radiusSm:a,radiusMd:o,radiusLg:s,radiusXl:c,radius2xl:l,radiusPill:u,toneNeutral:d,tonePrimary:f,root:p,fullWidth:m,groupLabel:h,requiredMark:g,track:_,horizontal:v,vertical:y,segment:b,thumb:x,iconOnly:S,input:C,content:w,icon:T,labelStack:E,labelSizer:D};exports.content=w,exports.default=O,exports.fullWidth=m,exports.groupLabel=h,exports.horizontal=v,exports.icon=T,exports.iconOnly=S,exports.input=C,exports.labelSizer=D,exports.labelStack=E,exports.lg=n,exports.md=t,exports.radius2xl=l,exports.radiusLg=s,exports.radiusMd=o,exports.radiusNone=r,exports.radiusPill=u,exports.radiusSm=a,exports.radiusXl=c,exports.radiusXs=i,exports.requiredMark=g,exports.root=p,exports.segment=b,exports.sm=e,exports.thumb=x,exports.toneNeutral=d,exports.tonePrimary=f,exports.track=_,exports.vertical=y;

package/dist/components/forms/SegmentedControl/SegmentedControl.module.css.mjs

@@ -0,0 +1,33 @@
+//#region src/components/forms/SegmentedControl/SegmentedControl.module.css
+var e = "_sm_11itl_45", t = "_md_11itl_61", n = "_lg_11itl_77", r = "_radiusNone_11itl_97", i = "_radiusXs_11itl_103", a = "_radiusSm_11itl_109", o = "_radiusMd_11itl_115", s = "_radiusLg_11itl_121", c = "_radiusXl_11itl_127", l = "_radius2xl_11itl_133", u = "_radiusPill_11itl_139", d = "_toneNeutral_11itl_149", f = "_tonePrimary_11itl_159", p = "_root_11itl_179", m = "_fullWidth_11itl_197", h = "_groupLabel_11itl_207", g = "_requiredMark_11itl_223", _ = "_track_11itl_247", v = "_horizontal_11itl_277", y = "_vertical_11itl_287", b = "_segment_11itl_311", x = "_thumb_11itl_343", S = "_iconOnly_11itl_485", C = "_input_11itl_513", w = "_content_11itl_537", T = "_icon_11itl_485", E = "_labelStack_11itl_577", D = "_labelSizer_11itl_591", O = {
+	sm: e,
+	md: t,
+	lg: n,
+	radiusNone: r,
+	radiusXs: i,
+	radiusSm: a,
+	radiusMd: o,
+	radiusLg: s,
+	radiusXl: c,
+	radius2xl: l,
+	radiusPill: u,
+	toneNeutral: d,
+	tonePrimary: f,
+	root: p,
+	fullWidth: m,
+	groupLabel: h,
+	requiredMark: g,
+	track: _,
+	horizontal: v,
+	vertical: y,
+	segment: b,
+	thumb: x,
+	iconOnly: S,
+	input: C,
+	content: w,
+	icon: T,
+	labelStack: E,
+	labelSizer: D
+};
+//#endregion
+export { w as content, O as default, m as fullWidth, h as groupLabel, v as horizontal, T as icon, S as iconOnly, C as input, D as labelSizer, E as labelStack, n as lg, t as md, l as radius2xl, s as radiusLg, o as radiusMd, r as radiusNone, u as radiusPill, a as radiusSm, c as radiusXl, i as radiusXs, g as requiredMark, p as root, b as segment, e as sm, x as thumb, d as toneNeutral, f as tonePrimary, _ as track, y as vertical };

package/dist/components/forms/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/dist/components/forms/Select/Select.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("./Select.module.css.cjs.js");let o=require("react/jsx-runtime");var s={sm:a.default.sm,md:a.default.md,lg:a.default.lg},c={outline:a.default.outline,filled:a.default.filled},l={none:a.default.radiusNone,xs:a.default.radiusXs,sm:a.default.radiusSm,md:a.default.radiusMd,lg:a.default.radiusLg,xl:a.default.radiusXl,"2xl":a.default.radius2xl,pill:a.default.radiusPill},u=e=>`options`in e;function d(e){for(let t of e??[])if(u(t)){if(t.disabled)continue;let e=d(t.options);if(e!==void 0)return e}else if(!t.disabled)return t.value}var f=e=>(0,o.jsx)(`option`,{value:e.value,disabled:e.disabled,children:e.label},e.value);function p({size:p,variant:m=`outline`,radius:h,invalid:g,readOnly:_,placeholder:v,options:y,children:b,startIcon:x,multiple:S=!1,htmlSize:C,value:w,defaultValue:T,onValueChange:E,fullWidth:D=!0,className:O,selectClassName:k,style:A,id:j,required:M,disabled:N,onChange:P,"aria-describedby":F,...I}){let L=i.useFieldControl({id:j,invalid:g,required:M,disabled:N,readOnly:_,size:p,"aria-describedby":F}),R=L.size??`md`,[z,B]=e.useControllableState({value:w,defaultValue:T??(S?[]:v===void 0?d(y)??``:``),onChange:E});t.useFormReset(()=>L.id?document.getElementById(L.id):null,()=>B(T??(S?[]:``)),w===void 0);let V=S||C!==void 0&&C>1,H=v!==void 0&&!S,U=H&&(z===``||z===void 0),W=x!=null&&!V,G=e=>{if(L.readOnly)return;P?.(e);let t=e.currentTarget;B(S?Array.from(t.selectedOptions,e=>e.value):t.value)};return(0,o.jsxs)(`div`,{className:n.cx(a.default.root,s[R],c[m],h&&l[h],D&&a.default.fullWidth,V&&a.default.list,W&&a.default.hasStartIcon,L.invalid&&a.default.invalid,L.disabled&&a.default.disabled,O),style:A,children:[W&&(0,o.jsx)(`span`,{className:a.default.startIcon,"aria-hidden":`true`,children:x}),(0,o.jsxs)(`select`,{...L.ariaProps,...I,id:L.id,required:L.required,disabled:L.disabled,multiple:S,size:C,value:z,onChange:G,"aria-readonly":L.readOnly||void 0,"data-readonly":L.readOnly||void 0,onMouseDown:e=>{I.onMouseDown?.(e),L.readOnly&&e.preventDefault()},onKeyDown:e=>{I.onKeyDown?.(e),L.readOnly&&e.key!==`Tab`&&e.preventDefault()},"data-placeholder-shown":U||void 0,className:n.cx(a.default.select,k),children:[H&&(0,o.jsx)(`option`,{value:``,disabled:!0,hidden:!0,children:v}),y?y.map(e=>u(e)?(0,o.jsx)(`optgroup`,{label:e.label,disabled:e.disabled,children:e.options.map(f)},`group:${e.label}`):f(e)):b]}),!V&&(0,o.jsx)(r.ChevronDownIcon,{className:a.default.chevron,size:R===`sm`?`sm`:`md`})]})}exports.Select=p;

package/dist/components/forms/Select/Select.d.ts

@@ -0,0 +1,86 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Radius, Size } from '../../../types/common';
+/** Visual style of a Select. `filled` uses a sunken background with no border until hover or focus. */
+export type SelectVariant = "outline" | "filled";
+/** A single choice in the `options` shortcut. */
+export interface SelectOption {
+    /** Submitted value. */
+    value: string;
+    /** Visible text. Native `<option>` elements can only render plain text. */
+    label: string;
+    /** Show the option but prevent choosing it. */
+    disabled?: boolean;
+}
+/** A labeled group of choices in the `options` shortcut (renders an `<optgroup>`). */
+export interface SelectOptionGroup {
+    /** Group heading, announced by screen readers with each option in the group. */
+    label: string;
+    /** Choices in the group. */
+    options: SelectOption[];
+    /** Disable every option in the group. */
+    disabled?: boolean;
+}
+/** One entry in the `options` shortcut: an option or an option group. */
+export type SelectItem = SelectOption | SelectOptionGroup;
+/** Value of a Select: a string, or an array of strings when `multiple`. */
+export type SelectValue = string | string[];
+interface SelectOwnProps {
+    /** Control height and text size. Defaults to the surrounding Field's size, then `md`. */
+    size?: Size;
+    /** Visual style. */
+    variant?: SelectVariant;
+    /** Corner rounding. Defaults to the shared text-field radius (`--field-radius`). */
+    radius?: Radius;
+    /** Show danger styling and set `aria-invalid`. Inherited from a surrounding Field. Pair with visible error text, since color alone is not enough. */
+    invalid?: boolean;
+    /**
+     * Shows the value without allowing changes (`<select>` has no native
+     * read-only): the list doesn't open and `aria-readonly` is set. Inherited
+     * from a surrounding Field.
+     */
+    readOnly?: boolean;
+    /**
+     * Prompt shown while no value is chosen. Renders a disabled first option
+     * with an empty value that is hidden from the open list. Combine with
+     * `required` to make native validation reject the empty choice.
+     * Ignored when `multiple` is set.
+     */
+    placeholder?: string;
+    /** Shortcut for the choices. Takes precedence over `children`. Entries with `options` render as `<optgroup>`. */
+    options?: SelectItem[];
+    /** `<option>` and `<optgroup>` elements, used when `options` is not set. */
+    children?: ReactNode;
+    /** Decorative icon at the inline start (hidden from assistive technology). Not shown in list mode (`multiple` or `htmlSize` > 1). */
+    startIcon?: ReactNode;
+    /** Allow choosing several options. Renders an always-open list box with no chevron. */
+    multiple?: boolean;
+    /** Native `size` attribute: the number of visible rows in list mode. Named `htmlSize` so it doesn't clash with `size`. */
+    htmlSize?: number;
+    /** Controlled value (`string[]` when `multiple`). */
+    value?: SelectValue;
+    /** Initial value when uncontrolled. Defaults to `""` (or `[]` when `multiple`). */
+    defaultValue?: SelectValue;
+    /** Called with the new value (`string[]` when `multiple`) whenever the choice changes. */
+    onValueChange?: (value: SelectValue) => void;
+    /** Stretch to the full inline size of the container. */
+    fullWidth?: boolean;
+    /** Class for the outer wrapper. Use `selectClassName` to target the `<select>` itself. */
+    className?: string;
+    /** Class for the native `<select>` element. */
+    selectClassName?: string;
+}
+/**
+ * Props for `Select`. All native `<select>` props are supported and spread
+ * onto the `<select>` (which also receives `ref`), except `className` and
+ * `style`, which go on the wrapper.
+ */
+export interface SelectProps extends SelectOwnProps, Omit<ComponentPropsWithRef<"select">, keyof SelectOwnProps> {
+}
+/**
+ * Styled native `<select>`. Keeps the browser's keyboard model, mobile
+ * pickers, autofill, and form submission, and matches the Input and Textarea
+ * look. Works standalone or inside a `Field`, which wires its id, label,
+ * description, error, required, disabled, and size.
+ */
+export declare function Select({ size: sizeProp, variant, radius, invalid: invalidProp, readOnly: readOnlyProp, placeholder, options, children, startIcon, multiple, htmlSize, value: valueProp, defaultValue, onValueChange, fullWidth, className, selectClassName, style, id: idProp, required: requiredProp, disabled: disabledProp, onChange, "aria-describedby": describedBy, ...rest }: SelectProps): import("react").JSX.Element;
+export {};

package/dist/components/forms/Select/Select.mjs

@@ -0,0 +1,107 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { ChevronDownIcon as r } from "../../primitives/Icon/icons.mjs";
+import { useFieldControl as i } from "../Field/FieldContext.mjs";
+import a from "./Select.module.css.mjs";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/forms/Select/Select.tsx
+var c = {
+	sm: a.sm,
+	md: a.md,
+	lg: a.lg
+}, l = {
+	outline: a.outline,
+	filled: a.filled
+}, u = {
+	none: a.radiusNone,
+	xs: a.radiusXs,
+	sm: a.radiusSm,
+	md: a.radiusMd,
+	lg: a.radiusLg,
+	xl: a.radiusXl,
+	"2xl": a.radius2xl,
+	pill: a.radiusPill
+}, d = (e) => "options" in e;
+function f(e) {
+	for (let t of e ?? []) if (d(t)) {
+		if (t.disabled) continue;
+		let e = f(t.options);
+		if (e !== void 0) return e;
+	} else if (!t.disabled) return t.value;
+}
+var p = (e) => /* @__PURE__ */ o("option", {
+	value: e.value,
+	disabled: e.disabled,
+	children: e.label
+}, e.value);
+function m({ size: m, variant: h = "outline", radius: g, invalid: _, readOnly: v, placeholder: y, options: b, children: x, startIcon: S, multiple: C = !1, htmlSize: w, value: T, defaultValue: E, onValueChange: D, fullWidth: O = !0, className: k, selectClassName: A, style: j, id: M, required: N, disabled: P, onChange: F, "aria-describedby": I, ...L }) {
+	let R = i({
+		id: M,
+		invalid: _,
+		required: N,
+		disabled: P,
+		readOnly: v,
+		size: m,
+		"aria-describedby": I
+	}), z = R.size ?? "md", [B, V] = e({
+		value: T,
+		defaultValue: E ?? (C ? [] : y === void 0 ? f(b) ?? "" : ""),
+		onChange: D
+	});
+	t(() => R.id ? document.getElementById(R.id) : null, () => V(E ?? (C ? [] : "")), T === void 0);
+	let H = C || w !== void 0 && w > 1, U = y !== void 0 && !C, W = U && (B === "" || B === void 0), G = S != null && !H, K = (e) => {
+		if (R.readOnly) return;
+		F?.(e);
+		let t = e.currentTarget;
+		V(C ? Array.from(t.selectedOptions, (e) => e.value) : t.value);
+	};
+	return /* @__PURE__ */ s("div", {
+		className: n(a.root, c[z], l[h], g && u[g], O && a.fullWidth, H && a.list, G && a.hasStartIcon, R.invalid && a.invalid, R.disabled && a.disabled, k),
+		style: j,
+		children: [
+			G && /* @__PURE__ */ o("span", {
+				className: a.startIcon,
+				"aria-hidden": "true",
+				children: S
+			}),
+			/* @__PURE__ */ s("select", {
+				...R.ariaProps,
+				...L,
+				id: R.id,
+				required: R.required,
+				disabled: R.disabled,
+				multiple: C,
+				size: w,
+				value: B,
+				onChange: K,
+				"aria-readonly": R.readOnly || void 0,
+				"data-readonly": R.readOnly || void 0,
+				onMouseDown: (e) => {
+					L.onMouseDown?.(e), R.readOnly && e.preventDefault();
+				},
+				onKeyDown: (e) => {
+					L.onKeyDown?.(e), R.readOnly && e.key !== "Tab" && e.preventDefault();
+				},
+				"data-placeholder-shown": W || void 0,
+				className: n(a.select, A),
+				children: [U && /* @__PURE__ */ o("option", {
+					value: "",
+					disabled: !0,
+					hidden: !0,
+					children: y
+				}), b ? b.map((e) => d(e) ? /* @__PURE__ */ o("optgroup", {
+					label: e.label,
+					disabled: e.disabled,
+					children: e.options.map(p)
+				}, `group:${e.label}`) : p(e)) : x]
+			}),
+			!H && /* @__PURE__ */ o(r, {
+				className: a.chevron,
+				size: z === "sm" ? "sm" : "md"
+			})
+		]
+	});
+}
+//#endregion
+export { m as Select };

package/dist/components/forms/Select/Select.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_18qoz_5`,t=`_fullWidth_18qoz_39`,n=`_sm_18qoz_51`,r=`_md_18qoz_65`,i=`_lg_18qoz_75`,a=`_radiusNone_18qoz_87`,o=`_radiusXs_18qoz_89`,s=`_radiusSm_18qoz_91`,c=`_radiusMd_18qoz_93`,l=`_radiusLg_18qoz_95`,u=`_radiusXl_18qoz_97`,d=`_radius2xl_18qoz_99`,f=`_radiusPill_18qoz_101`,p=`_select_18qoz_107`,m=`_outline_18qoz_231`,h=`_filled_18qoz_241`,g=`_invalid_18qoz_291`,_=`_disabled_18qoz_309`,v=`_chevron_18qoz_335`,y=`_startIcon_18qoz_337`,b=`_hasStartIcon_18qoz_391`,x=`_list_18qoz_419`,S={root:e,fullWidth:t,sm:n,md:r,lg:i,radiusNone:a,radiusXs:o,radiusSm:s,radiusMd:c,radiusLg:l,radiusXl:u,radius2xl:d,radiusPill:f,select:p,outline:m,filled:h,invalid:g,disabled:_,chevron:v,startIcon:y,hasStartIcon:b,list:x};exports.chevron=v,exports.default=S,exports.disabled=_,exports.filled=h,exports.fullWidth=t,exports.hasStartIcon=b,exports.invalid=g,exports.lg=i,exports.list=x,exports.md=r,exports.outline=m,exports.radius2xl=d,exports.radiusLg=l,exports.radiusMd=c,exports.radiusNone=a,exports.radiusPill=f,exports.radiusSm=s,exports.radiusXl=u,exports.radiusXs=o,exports.root=e,exports.select=p,exports.sm=n,exports.startIcon=y;

package/dist/components/forms/Select/Select.module.css.mjs

@@ -0,0 +1,27 @@
+//#region src/components/forms/Select/Select.module.css
+var e = "_root_18qoz_5", t = "_fullWidth_18qoz_39", n = "_sm_18qoz_51", r = "_md_18qoz_65", i = "_lg_18qoz_75", a = "_radiusNone_18qoz_87", o = "_radiusXs_18qoz_89", s = "_radiusSm_18qoz_91", c = "_radiusMd_18qoz_93", l = "_radiusLg_18qoz_95", u = "_radiusXl_18qoz_97", d = "_radius2xl_18qoz_99", f = "_radiusPill_18qoz_101", p = "_select_18qoz_107", m = "_outline_18qoz_231", h = "_filled_18qoz_241", g = "_invalid_18qoz_291", _ = "_disabled_18qoz_309", v = "_chevron_18qoz_335", y = "_startIcon_18qoz_337", b = "_hasStartIcon_18qoz_391", x = "_list_18qoz_419", S = {
+	root: e,
+	fullWidth: t,
+	sm: n,
+	md: r,
+	lg: i,
+	radiusNone: a,
+	radiusXs: o,
+	radiusSm: s,
+	radiusMd: c,
+	radiusLg: l,
+	radiusXl: u,
+	radius2xl: d,
+	radiusPill: f,
+	select: p,
+	outline: m,
+	filled: h,
+	invalid: g,
+	disabled: _,
+	chevron: v,
+	startIcon: y,
+	hasStartIcon: b,
+	list: x
+};
+//#endregion
+export { v as chevron, S as default, _ as disabled, h as filled, t as fullWidth, b as hasStartIcon, g as invalid, i as lg, x as list, r as md, m as outline, d as radius2xl, l as radiusLg, c as radiusMd, a as radiusNone, f as radiusPill, s as radiusSm, u as radiusXl, o as radiusXs, e as root, p as select, n as sm, y as startIcon };

package/dist/components/forms/Select/index.d.ts

@@ -0,0 +1 @@
+export * from './Select';

package/dist/components/forms/Slider/Slider.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../Field/FieldContext.cjs.js"),i=require("./Slider.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var ee={sm:i.default.sizeSm,md:i.default.sizeMd,lg:i.default.sizeLg},te={neutral:i.default.toneNeutral,primary:i.default.tonePrimary,accent:i.default.toneAccent,success:i.default.toneSuccess,warning:i.default.toneWarning,danger:i.default.toneDanger,info:i.default.toneInfo},ne=100,s=(e,t,n)=>Math.min(n,Math.max(t,e)),c=e=>{let t=String(e);if(t.includes(`e-`))return Number(t.split(`e-`)[1]);let n=t.indexOf(`.`);return n===-1?0:t.length-n-1};function re(e,t,n,r){let i=t+Math.round((e-t)/n)*n;return Number(i.toFixed(r))}var ie=(e,t,n)=>n>t?(s(e,t,n)-t)/(n-t)*100:0;function l(l){let{value:u,defaultValue:d,onValueChange:ae,onValueCommit:f,min:p=0,max:m=100,step:h=1,largeStep:g,orientation:_=`horizontal`,size:oe,tone:se=`primary`,disabled:ce,readOnly:le,invalid:ue,inverted:v=!1,minStepsBetweenThumbs:de=0,marks:y,showValue:b=`never`,formatValue:x,getAriaValueText:S,name:C,thumbLabels:fe,"aria-label":pe,"aria-labelledby":me,"aria-describedby":he,id:ge,className:_e,style:ve,onPointerEnter:ye,...be}=l,xe=r.useFieldContext(),w=r.useFieldControl({id:ge,invalid:ue,disabled:ce,readOnly:le,size:oe,"aria-describedby":he},{nativeRequired:!1}),{disabled:T,readOnly:E,invalid:D}=w,Se=w.size??`md`,O=!T&&!E,k=h>0?h:1,A=g&&g>0?g:k*10,j=c(k)+Math.max(0,c(p)-c(k)),M=Math.max(0,de)*k,[N,P]=e.useControllableState({value:u,defaultValue:d??p,onChange:ae});t.useFormReset(()=>R.current,()=>P(d??p),u===void 0);let F=Array.isArray(N),I=F?[s(N[0],p,m),s(N[1],p,m)]:[s(N,p,m)],L=(0,a.useRef)(I);L.current=I;let R=(0,a.useRef)(null),Ce=(0,a.useRef)(null),we=(0,a.useRef)([]),[z,B]=(0,a.useState)(null),[V,Te]=(0,a.useState)(!1),[Ee,H]=(0,a.useState)(!1),U=(0,a.useRef)(!1),De=(0,a.useId)(),Oe=e=>e===0&&w.id?w.id:`${De}-thumb-${e}`,W=(0,a.useCallback)((e,t)=>t.length<2?[p,m]:e===0?[p,Math.max(p,t[1]-M)]:[Math.min(m,t[0]+M),m],[p,m,M]),G=e=>e.length===2?[e[0],e[1]]:e[0],K=(0,a.useCallback)((e,t)=>{let n=L.current,[r,i]=W(e,n),a=s(re(s(t,p,m),p,k,j),r,i);if(a===n[e])return;let o=[...n];o[e]=a,L.current=o,H(!1),P(G(o))},[W,p,m,k,j,P]),ke=()=>_===`horizontal`&&!!R.current&&getComputedStyle(R.current).direction===`rtl`,Ae=(e,t)=>{let n=Ce.current;if(!n)return p;let r=n.getBoundingClientRect(),i=_===`horizontal`?r.width>0?(e-r.left)/r.width:0:r.height>0?(r.bottom-t)/r.height:0;return ke()&&(i=1-i),v&&(i=1-i),p+s(i,0,1)*(m-p)},je=e=>{let t=L.current;if(t.length<2)return 0;let n=Math.abs(e-t[0]),r=Math.abs(e-t[1]);return n===r?+(e>t[0]):n<r?0:1},Me=e=>{if(!O||e.button!==0)return;e.preventDefault();let t=e.target.closest(`[data-mark-value]`)?.dataset.markValue,n=t===void 0?Ae(e.clientX,e.clientY):Number(t),r=je(n);B(r),Te(!0),e.currentTarget.setPointerCapture(e.pointerId),we.current[r]?.focus({preventScroll:!0}),K(r,n)},Ne=e=>{V&&z!==null&&K(z,Ae(e.clientX,e.clientY))},q=e=>{V&&(e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),Te(!1),B(null),f?.(G(L.current)))},Pe=e=>t=>{if(t.key===`Escape`&&b===`hover`){H(!0);return}if(!O)return;let n=L.current[e],r=t.shiftKey?A:k,i=_===`horizontal`&&ke()!==v,a=_===`vertical`&&v,o=null;switch(t.key){case`ArrowRight`:o=n+(i?-r:r);break;case`ArrowLeft`:o=n-(i?-r:r);break;case`ArrowUp`:o=n+(a?-r:r);break;case`ArrowDown`:o=n-(a?-r:r);break;case`PageUp`:o=n+A;break;case`PageDown`:o=n-A;break;case`Home`:o=p;break;case`End`:o=m;break;default:return}t.preventDefault(),U.current=!0,K(e,o)},Fe=()=>{U.current&&(U.current=!1,f?.(G(L.current)))},J=(0,a.useMemo)(()=>{if(!y)return[];if(Array.isArray(y))return y.filter(e=>e.value>=p&&e.value<=m);let e=Math.floor((m-p)/k);return e>ne?[]:Array.from({length:e+1},(e,t)=>({value:Number((p+t*k).toFixed(j))}))},[y,p,m,k,j]),Ie=J.some(e=>e.label),Y=e=>{let t=ie(e,p,m);return v?100-t:t},X=_===`horizontal`?`insetInlineStart`:`insetBlockEnd`,Le=_===`horizontal`?`inlineSize`:`blockSize`,Re=Y(F?I[0]:p),ze=Y(F?I[1]:I[0]),Z=Math.min(Re,ze),Q=Math.max(Re,ze),Be=e=>{let t=Y(e);return t>=Z&&t<=Q},Ve={[X]:`${Z}%`,[Le]:`${Q-Z}%`},$=me??xe?.labelId,He=e=>x?x(e):String(e),Ue=(e,t)=>S?S(e,t):x?x(e):void 0,We=D?`danger`:se;return(0,o.jsxs)(`div`,{...be,ref:e=>{R.current=e;let{ref:t}=l;if(typeof t==`function`)return t(e);t&&(t.current=e)},role:F?`group`:void 0,"aria-labelledby":F?$:void 0,"aria-label":F&&!$?pe:void 0,className:n.cx(i.default.root,ee[Se],te[We],_===`vertical`?i.default.vertical:i.default.horizontal,_e),style:ve,"data-orientation":_,"data-disabled":T||void 0,"aria-disabled":T||void 0,"data-readonly":E||void 0,"data-invalid":D||void 0,"data-dragging":V||void 0,"data-show-value":b,"data-bubble-dismissed":Ee||void 0,onPointerEnter:e=>{H(!1),ye?.(e)},children:[(0,o.jsxs)(`div`,{className:i.default.control,onPointerDown:Me,onPointerMove:Ne,onPointerUp:q,onPointerCancel:q,onLostPointerCapture:e=>{V&&q(e)},children:[(0,o.jsxs)(`div`,{ref:Ce,className:i.default.rail,children:[(0,o.jsx)(`div`,{className:i.default.track,"aria-hidden":`true`,children:(0,o.jsx)(`div`,{className:i.default.range,style:Ve})}),J.map(e=>(0,o.jsx)(`span`,{className:i.default.tick,"data-in-range":Be(e.value)||void 0,style:{[X]:`${Y(e.value)}%`},"aria-hidden":`true`},`tick-${e.value}`)),I.map((e,t)=>{let[n,r]=W(t,I),a=fe?.[t];return(0,o.jsxs)(`span`,{ref:e=>{we.current[t]=e},id:Oe(t),role:`slider`,tabIndex:T?-1:0,className:i.default.thumb,style:{[X]:`${Y(e)}%`},"data-active":z===t||void 0,"aria-valuemin":n,"aria-valuemax":r,"aria-valuenow":e,"aria-valuetext":Ue(e,t),"aria-orientation":_,"aria-disabled":T||void 0,"aria-readonly":E||void 0,"aria-label":a??($?void 0:pe),"aria-labelledby":a?void 0:$,...w.ariaProps,"aria-required":void 0,onKeyDown:Pe(t),onKeyUp:Fe,onFocus:()=>H(!1),children:[(0,o.jsx)(`span`,{className:i.default.knob,"aria-hidden":`true`}),b!==`never`&&(0,o.jsx)(`span`,{className:i.default.bubble,"aria-hidden":`true`,children:He(e)})]},t)})]}),Ie&&(0,o.jsx)(`div`,{className:i.default.marks,"aria-hidden":`true`,children:J.filter(e=>e.label).map(e=>(0,o.jsx)(`span`,{className:i.default.markAnchor,style:{[X]:`${Y(e.value)}%`},children:(0,o.jsx)(`span`,{className:i.default.markLabel,"data-mark-value":e.value,children:e.label})},`label-${e.value}`))})]}),C&&I.map((e,t)=>(0,o.jsx)(`input`,{type:`hidden`,name:C,value:e,disabled:T},t))]})}exports.Slider=l;