@takeoff-ui/react-spar 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -6,8 +6,10 @@ var spar = require('@turkish-technology/spar');
 var clsx = require('clsx');
 var chevronBottom = require('@takeoff-icons/react/chevron-bottom');
 var chevronTop = require('@takeoff-icons/react/chevron-top');
-var reactTable = require('@tanstack/react-table');
 var chevronRight = require('@takeoff-icons/react/chevron-right');
+var check = require('@takeoff-icons/react/check');
+var close = require('@takeoff-icons/react/close');
+var reactTable = require('@tanstack/react-table');
 var swap = require('@takeoff-icons/react/swap');
 var search = require('@takeoff-icons/react/search');
 var arrowLeft = require('@takeoff-icons/react/arrow-left');
@@ -146,6 +148,10 @@ var resolveDisclosureIndicator = (children, isOpen) => {
   if (typeof children === "function") return children({ isOpen });
   return children ?? (isOpen ? DEFAULT_DISCLOSURE_COLLAPSE_ICON : DEFAULT_DISCLOSURE_EXPAND_ICON);
 };
+var renderPointerArrow = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "tk-arrow-border", points: "0,0 5,5 10,0" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { className: "tk-arrow-fill", points: "-0.086,-1.5 5,3.586 10.086,-1.5" })
+] });
 
 // src/components/accordion/base.ts
 var AccordionBase = createComponentBase({
@@ -196,6 +202,37 @@ function createSafeContext(displayName) {
   };
   return [Provider, useSafeContext];
 }
+var resolveStaticWidth = (mode) => {
+  if (mode === "trigger" || mode === "content") return void 0;
+  return typeof mode === "number" ? `${mode}px` : mode;
+};
+var useContentWidthStyle = (mode, triggerRef) => {
+  const [triggerWidth, setTriggerWidth] = react.useState(null);
+  react.useEffect(() => {
+    if (mode !== "trigger") return;
+    const node = triggerRef.current;
+    if (!node) return;
+    const measure = () => setTriggerWidth(Math.round(node.getBoundingClientRect().width));
+    measure();
+    let frame = 0;
+    const observer = new ResizeObserver(() => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    });
+    observer.observe(node);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+    };
+  }, [mode, triggerRef]);
+  return react.useMemo(() => {
+    if (mode === "trigger") {
+      return triggerWidth != null ? { width: triggerWidth } : void 0;
+    }
+    const staticWidth = resolveStaticWidth(mode);
+    return staticWidth != null ? { width: staticWidth } : void 0;
+  }, [mode, triggerWidth]);
+};
 function useControllableState(controlledValue, defaultValue, onChange) {
   const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
   const { current: isControlled } = react.useRef(controlledValue !== void 0);
@@ -569,7 +606,6 @@ var [BreadcrumbProvider] = createSafeContext("BreadcrumbProvider");
 // src/components/breadcrumb/defaults.ts
 var DEFAULT_SIZE3 = "base";
 var DEFAULT_TYPE2 = "basic";
-var DEFAULT_SEPARATOR_VARIANT = "chevron";
 var Breadcrumb = (props) => {
   const theme = useComponentTheme("Breadcrumb");
   const { rootAttrs, rest } = composeRootAttrs(BreadcrumbBase, props, theme, {
@@ -611,17 +647,11 @@ var BreadcrumbPage = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbPage, { ...spar$1, ref, ...rootAttrs, children });
 };
 BreadcrumbPage.displayName = "Breadcrumb.Page";
-var DEFAULT_SEPARATOR_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var BreadcrumbSeparator = (props) => {
   const theme = useComponentTheme("BreadcrumbSeparator");
-  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme, {
-    stateAttrs: ({ variant: variant2 = DEFAULT_SEPARATOR_VARIANT }) => ({
-      "data-variant": variant2
-    })
-  });
-  const { variant = DEFAULT_SEPARATOR_VARIANT, children, ref, ...spar$1 } = rest;
-  const fallback = variant === "chevron" ? DEFAULT_SEPARATOR_ICON : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbSeparator, { ...spar$1, ref, ...rootAttrs, children: children ?? fallback });
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbSeparator, { ...spar$1, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRightIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }) });
 };
 BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
 
@@ -850,56 +880,47 @@ var Checkbox = (props) => {
     // Visual props are consumed via `stateAttrs`; destructured to keep them
     // off the rendered DOM where they would leak as raw HTML attributes.
     size: _size,
-    // `invalid` is forwarded to Spar as `invalid` (same name).
-    invalid = false,
     // takeoff-spar tri-state vocabulary; mapped to Spar's `CheckedState` below.
     checked,
     defaultChecked,
     indeterminate = false,
     onChange,
-    // Behavior props owned by Spar — defaults are restated here so they also
-    // flow into the context for compound sub-components (asterisk on Label).
-    disabled = false,
-    readOnly = false,
-    required = false,
     children,
     ref,
+    // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
+    // destructured (so no eager `= false` default is applied) — they flow to
+    // Spar via `...sparProps` untouched. Defaulting them here would turn an
+    // omitted prop into an explicit `false`, defeating Spar's
+    // `prop ?? fieldCtx?.x` inheritance and silently overriding a wrapping
+    // `<Field disabled>`. Their resolved values are read back off Spar's
+    // render-prop `state` below for the compound context. See Radio/Input/
+    // Select wrappers for the same pass-through pattern.
     ...sparProps
   } = rest;
   const sparChecked = indeterminate ? "indeterminate" : checked;
   const sparDefaultChecked = indeterminate ? "indeterminate" : defaultChecked;
   const handleSparChange = onChange ? (next) => onChange(next === true) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    spar.Checkbox,
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Checkbox, { ...sparProps, checked: sparChecked, defaultChecked: sparDefaultChecked, onChange: handleSparChange, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxProvider,
     {
-      ...sparProps,
-      checked: sparChecked,
-      defaultChecked: sparDefaultChecked,
-      onChange: handleSparChange,
-      disabled,
-      readOnly,
-      required,
-      invalid,
-      ref,
-      ...rootAttrs,
-      children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
-        CheckboxProvider,
-        {
-          value: {
-            classNames,
-            slotProps,
-            required,
-            invalid,
-            disabled: state.disabled,
-            readOnly: state.readOnly,
-            checked: state.checked === true,
-            indeterminate: state.checked === "indeterminate"
-          },
-          children: typeof children === "function" ? children(state) : children
-        }
-      )
+      value: {
+        classNames,
+        slotProps,
+        // Read the *resolved* behavior state off Spar's render-prop so the
+        // compound context reflects Field-inherited values, not the raw
+        // props. `state.required` / `state.invalid` already fold in
+        // `fieldCtx`, so `<Field disabled>` / `<Field invalid>` reach the
+        // Label asterisk and slotted styling correctly.
+        required: state.required,
+        invalid: state.invalid,
+        disabled: state.disabled,
+        readOnly: state.readOnly,
+        checked: state.checked === true,
+        indeterminate: state.checked === "indeterminate"
+      },
+      children: typeof children === "function" ? children(state) : children
     }
-  );
+  ) });
 };
 Checkbox.displayName = "Checkbox";
 var CheckboxIndicator = (props) => {
@@ -1400,6 +1421,182 @@ var Dialog2 = Object.assign(Dialog, {
   Close: DialogClose
 });
 
+// src/components/divider/base.ts
+var DividerBase = createComponentBase({
+  name: "Divider",
+  slots: ["root", "label"],
+  classes: {
+    root: "tk-divider",
+    label: "tk-divider-label"
+  }
+});
+
+// src/components/divider/defaults.ts
+var DEFAULT_ORIENTATION = "horizontal";
+var DEFAULT_APPEARANCE5 = "solid";
+var DEFAULT_ALIGN = "center";
+var hasRenderableDividerLabel = (node) => Array.isArray(node) ? node.some(hasRenderableDividerLabel) : isRenderableNode(node);
+var Divider = (props) => {
+  const theme = useComponentTheme("Divider");
+  const { rootAttrs, rest } = composeRootAttrs(DividerBase, props, theme, {
+    // role/aria-orientation live here alongside the data-* hooks so consumer
+    // slotProps cannot silently strip the separator semantics.
+    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION, appearance = DEFAULT_APPEARANCE5, align = DEFAULT_ALIGN, decorative: decorative2 = false }) => ({
+      "role": decorative2 ? "none" : "separator",
+      "data-orientation": orientation2,
+      "data-type": appearance,
+      "data-align": align
+    })
+  });
+  const { orientation = DEFAULT_ORIENTATION, appearance: _appearance, align: _align, decorative = false, children, ref, ...nativeProps } = rest;
+  const labelSlotAttrs = buildSlotAttrs(DividerBase.getSlotProps("label"), "label", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, "aria-orientation": decorative ? void 0 : orientation, ref, children: hasRenderableDividerLabel(children) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }) });
+};
+Divider.displayName = "Divider";
+
+// src/components/dropdown/context.ts
+var [DropdownProvider, useDropdownOwnContext] = createSafeContext("DropdownProvider");
+
+// src/components/dropdown/defaults.ts
+var DEFAULT_SIZE7 = "base";
+var DEFAULT_CONTENT_WIDTH = "content";
+var Dropdown = (props) => {
+  const theme = useComponentTheme("Dropdown");
+  const merged = { ...theme?.defaultProps, ...props };
+  const { size = DEFAULT_SIZE7, contentWidth = DEFAULT_CONTENT_WIDTH, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenu, { ...sparProps, children }) });
+};
+Dropdown.displayName = "Dropdown";
+
+// src/components/dropdown/base.ts
+var DropdownTriggerBase = createComponentBase({
+  name: "DropdownTrigger",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-trigger" }
+});
+var DropdownContentBase = createComponentBase({
+  name: "DropdownContent",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-content" }
+});
+var DropdownViewportBase = createComponentBase({
+  name: "DropdownViewport",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-viewport" }
+});
+var DropdownItemBase = createComponentBase({
+  name: "DropdownItem",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-item" }
+});
+var DropdownGroupBase = createComponentBase({
+  name: "DropdownGroup",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-group" }
+});
+var DropdownLabelBase = createComponentBase({
+  name: "DropdownLabel",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-label" }
+});
+var DropdownSeparatorBase = createComponentBase({
+  name: "DropdownSeparator",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-separator" }
+});
+var DropdownArrowBase = createComponentBase({
+  name: "DropdownArrow",
+  slots: ["root"],
+  classes: { root: "tk-dropdown-arrow" }
+});
+var DropdownArrow = (props) => {
+  const theme = useComponentTheme("DropdownArrow");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownArrowBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
+};
+DropdownArrow.displayName = "Dropdown.Arrow";
+var DropdownContent = (props) => {
+  const theme = useComponentTheme("DropdownContent");
+  const { size, contentWidth } = useDropdownOwnContext("Dropdown.Content");
+  const { triggerRef } = spar.useDropdownMenuContext();
+  const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
+  const { rootAttrs, rest } = composeRootAttrs(DropdownContentBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { children, ref, style: userStyle, ...sparProps } = rest;
+  const { style: rootStyle, ...rootRest } = rootAttrs;
+  const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuContent, { ...sparProps, ...rootRest, ref, style: mergedStyle, children });
+};
+DropdownContent.displayName = "Dropdown.Content";
+var DropdownGroup = (props) => {
+  const theme = useComponentTheme("DropdownGroup");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownGroupBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuGroup, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownGroup.displayName = "Dropdown.Group";
+var DropdownItem = (props) => {
+  const theme = useComponentTheme("DropdownItem");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownItemBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuItem, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownItem.displayName = "Dropdown.Item";
+var DropdownLabel = (props) => {
+  const theme = useComponentTheme("DropdownLabel");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownLabelBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuLabel, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownLabel.displayName = "Dropdown.Label";
+var DropdownSeparator = (props) => {
+  const theme = useComponentTheme("DropdownSeparator");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownSeparatorBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuSeparator, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownSeparator.displayName = "Dropdown.Separator";
+var DropdownTrigger = (props) => {
+  const theme = useComponentTheme("DropdownTrigger");
+  const { size } = useDropdownOwnContext("Dropdown.Trigger");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownTriggerBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownTrigger.displayName = "Dropdown.Trigger";
+var DropdownViewport = (props) => {
+  const theme = useComponentTheme("DropdownViewport");
+  const { rootAttrs, rest } = composeRootAttrs(DropdownViewportBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DropdownMenuViewport, { ...sparProps, ...rootAttrs, ref, children });
+};
+DropdownViewport.displayName = "Dropdown.Viewport";
+
+// src/components/dropdown/index.ts
+var Dropdown2 = Object.assign(Dropdown, {
+  Trigger: DropdownTrigger,
+  Content: DropdownContent,
+  Viewport: DropdownViewport,
+  Item: DropdownItem,
+  Group: DropdownGroup,
+  Label: DropdownLabel,
+  Separator: DropdownSeparator,
+  Arrow: DropdownArrow
+});
+
 // src/components/field/base.ts
 var FieldBase = createComponentBase({
   name: "Field",
@@ -1563,7 +1760,7 @@ var InputChipsBase = createComponentBase({
 var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
 
 // src/components/input/defaults.ts
-var DEFAULT_SIZE7 = "base";
+var DEFAULT_SIZE8 = "base";
 var SEGMENT_COUNT = 4;
 var computeStrength = (value) => {
   let strength = 0;
@@ -1615,11 +1812,11 @@ var Input = (props) => {
     for (const value of clearablesRef.current.values()) value.clear();
   }, []);
   const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE7 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE7, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
   const contextValue = react.useMemo(
     () => ({
       size,
@@ -2075,19 +2272,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
 var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
 
 // src/components/radio/defaults.ts
-var DEFAULT_SIZE8 = "base";
+var DEFAULT_SIZE9 = "base";
 var DEFAULT_POSITION = "left";
 var Radio = (props) => {
   const theme = useComponentTheme("Radio");
   const { rootAttrs, rest } = composeRootAttrs(RadioBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE8, position: position2 = DEFAULT_POSITION, spread }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
       "data-size": size2,
       "data-position": position2,
       "data-spread": spread ? "" : void 0
     })
   });
   const {
-    size = DEFAULT_SIZE8,
+    size = DEFAULT_SIZE9,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -2234,8 +2431,8 @@ PopoverDescription.displayName = "Popover.Description";
 var PopoverArrow = (props) => {
   const theme = useComponentTheme("PopoverArrow");
   const { rootAttrs, rest } = composeRootAttrs(PopoverArrowBase, props, theme);
-  const { ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverArrow, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 PopoverArrow.displayName = "Popover.Arrow";
 var PopoverClose = (props) => {
@@ -2256,6 +2453,193 @@ var Popover2 = Object.assign(Popover, {
   Close: PopoverClose
 });
 
+// src/components/progress/base.ts
+var ProgressBase = createComponentBase({
+  name: "Progress",
+  slots: ["root"],
+  classes: { root: "tk-progress" }
+});
+var ProgressTrackBase = createComponentBase({
+  name: "ProgressTrack",
+  slots: ["root", "rail"],
+  classes: { root: "tk-progress-track", rail: "tk-progress-rail" }
+});
+var ProgressIndicatorBase = createComponentBase({
+  name: "ProgressIndicator",
+  slots: ["root"],
+  classes: { root: "tk-progress-indicator" }
+});
+var ProgressValueBase = createComponentBase({
+  name: "ProgressValue",
+  slots: ["root"],
+  classes: { root: "tk-progress-value" }
+});
+
+// src/components/progress/context.ts
+var [ProgressProvider, useProgressContext] = createSafeContext("ProgressProvider");
+
+// src/components/progress/defaults.ts
+var DEFAULT_APPEARANCE6 = "linear";
+var DEFAULT_SIZE10 = "base";
+var DEFAULT_VARIANT6 = "primary";
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_RANGE = 100;
+var DEFAULT_ARIA_LABEL = "Progress";
+var RING_VIEWBOX = "0 0 40 40";
+var RING_CENTER = 20;
+var RING_RADIUS = 18;
+var ProgressIndicator = (props) => {
+  const theme = useComponentTheme("ProgressIndicator");
+  const { value, min, max, appearance, indeterminate } = useProgressContext("Progress.Indicator");
+  const percent = Math.min(100, Math.max(0, (value - min) * 100 / (max - min)));
+  const { rootAttrs, rest } = composeRootAttrs(ProgressIndicatorBase, props, theme, {
+    stateAttrs: () => ({
+      "data-type": appearance,
+      "data-indeterminate": indeterminate ? "" : void 0
+    })
+  });
+  const { ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  if (appearance === "circular") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: RING_CENTER,
+        cy: RING_CENTER,
+        r: RING_RADIUS,
+        ...nativeProps,
+        ...slotAttrs,
+        pathLength: "100",
+        style: { ...style, ...slotStyle, strokeDasharray: 100, strokeDashoffset: indeterminate ? void 0 : 100 - percent },
+        ref
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, width: indeterminate ? void 0 : `${percent}%` }, ref });
+};
+ProgressIndicator.displayName = "Progress.Indicator";
+var ProgressTrack = (props) => {
+  const theme = useComponentTheme("ProgressTrack");
+  const { appearance } = useProgressContext("Progress.Track");
+  const { rootAttrs, rest } = composeRootAttrs(ProgressTrackBase, props, theme, {
+    stateAttrs: () => ({ "data-type": appearance })
+  });
+  const { children, ref, ...nativeProps } = rest;
+  const content = children ?? /* @__PURE__ */ jsxRuntime.jsx(ProgressIndicator, {});
+  if (appearance === "circular") {
+    const railAttrs = buildSlotAttrs(ProgressTrackBase.getSlotProps("rail"), "rail", {
+      themeSlotProps: theme?.slotProps,
+      themeClassNames: theme?.classNames,
+      instanceSlotProps: props.slotProps,
+      instanceClassNames: props.classNames
+    });
+    return (
+      // The decorative role and the ring geometry are design-system
+      // invariants (the value is announced by the root; the viewBox must
+      // agree with the rail/arc circles) — layered after the spreads so
+      // neither instance nor slot props can override them.
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", focusable: "false", viewBox: RING_VIEWBOX, ref, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { ...railAttrs, cx: RING_CENTER, cy: RING_CENTER, r: RING_RADIUS }),
+        content
+      ] })
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, ref, children: content });
+};
+ProgressTrack.displayName = "Progress.Track";
+var resolveRange = ({ value: rawValue, min: rawMin = DEFAULT_MIN, max: rawMax = DEFAULT_MAX }) => {
+  const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN;
+  const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_RANGE;
+  const value = typeof rawValue === "number" && Number.isFinite(rawValue) ? Math.min(Math.max(rawValue, min), max) : min;
+  return { min, max, value };
+};
+var warnedRanges = /* @__PURE__ */ new Set();
+var Progress = (props) => {
+  const theme = useComponentTheme("Progress");
+  const field = spar.useOptionalFieldContext();
+  const resolveState = ({
+    indeterminate: indeterminate2 = false,
+    appearance: appearance2 = DEFAULT_APPEARANCE6,
+    size: size2 = DEFAULT_SIZE10,
+    variant: variant2 = DEFAULT_VARIANT6,
+    disabled: disabled2 = field?.disabled ?? false
+  }) => ({ indeterminate: indeterminate2, appearance: appearance2, size: size2, variant: variant2, disabled: disabled2 });
+  const { rootAttrs, rest } = composeRootAttrs(ProgressBase, props, theme);
+  const {
+    // Consumed through resolveState/resolveRange (and as the root data-* hooks
+    // below); destructured so the <div> doesn't receive unknown DOM
+    // attributes.
+    value: _value,
+    min: _min,
+    max: rawMax,
+    indeterminate: _indeterminate,
+    appearance: _appearance,
+    disabled: _disabled,
+    size: _size,
+    variant: _variant,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const { indeterminate, appearance, size, variant, disabled } = resolveState(rest);
+  const { min, max, value } = resolveRange(rest);
+  const dataAttrs = {
+    "data-type": appearance,
+    "data-size": size,
+    "data-variant": variant,
+    "data-disabled": disabled ? "" : void 0,
+    "data-indeterminate": indeterminate ? "" : void 0,
+    // Styling hook for the finished state (e.g. a success fill at 100%);
+    // meaningless while indeterminate, so dropped alongside the value.
+    "data-complete": !indeterminate && value === max ? "" : void 0
+  };
+  if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= min) {
+    const message = `[Progress] \`max\` (${rawMax}) must be greater than \`min\` (${min}); falling back to ${max}.`;
+    if (!warnedRanges.has(message)) {
+      warnedRanges.add(message);
+      console.warn(message);
+    }
+  }
+  const consumerLabelledBy = nativeProps["aria-labelledby"];
+  const accessibilityAttrs = {
+    "role": nativeProps.role ?? "progressbar",
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    // Per the progressbar pattern, an indeterminate bar exposes no
+    // aria-valuenow — assistive tech then announces it as busy rather than
+    // stuck at a bogus percentage.
+    "aria-valuenow": indeterminate ? void 0 : value,
+    // aria-valuetext accompanies aria-valuenow; drop it while indeterminate so
+    // a consumer-formatted value can't linger next to a busy bar.
+    "aria-valuetext": indeterminate ? void 0 : nativeProps["aria-valuetext"],
+    "aria-labelledby": consumerLabelledBy ?? field?.labelId,
+    "aria-label": nativeProps["aria-label"] ?? (consumerLabelledBy ? void 0 : DEFAULT_ARIA_LABEL),
+    "aria-disabled": disabled || void 0
+  };
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(ProgressProvider, { value: { value, min, max, appearance, indeterminate }, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...accessibilityAttrs, ...rootAttrs, ...dataAttrs, ref, children: children ?? /* @__PURE__ */ jsxRuntime.jsx(ProgressTrack, {}) }) });
+};
+Progress.displayName = "Progress";
+var ProgressValue = (props) => {
+  const theme = useComponentTheme("ProgressValue");
+  const { appearance } = useProgressContext("Progress.Value");
+  const { rootAttrs, rest } = composeRootAttrs(ProgressValueBase, props, theme, {
+    stateAttrs: () => ({ "data-type": appearance })
+  });
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children });
+};
+ProgressValue.displayName = "Progress.Value";
+
+// src/components/progress/index.ts
+var Progress2 = Object.assign(Progress, {
+  Track: ProgressTrack,
+  Indicator: ProgressIndicator,
+  Value: ProgressValue
+});
+
 // src/components/select/base.ts
 var SelectBase = createComponentBase({
   name: "Select",
@@ -2286,6 +2670,11 @@ var SelectContentBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-content" }
 });
+var SelectViewportBase = createComponentBase({
+  name: "SelectViewport",
+  slots: ["root"],
+  classes: { root: "tk-select-viewport" }
+});
 var SelectItemBase = createComponentBase({
   name: "SelectItem",
   slots: ["root"],
@@ -2306,22 +2695,27 @@ var SelectSeparatorBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-select-separator" }
 });
+var SelectArrowBase = createComponentBase({
+  name: "SelectArrow",
+  slots: ["root"],
+  classes: { root: "tk-select-arrow" }
+});
 
 // src/components/select/context.ts
 var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
-var DEFAULT_SIZE9 = "base";
-var DEFAULT_CONTENT_WIDTH = "trigger";
+var DEFAULT_SIZE11 = "base";
+var DEFAULT_CONTENT_WIDTH2 = "trigger";
 var Select = (props) => {
   const theme = useComponentTheme("Select");
   const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, invalid: invalid2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
       "data-size": size2,
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE9, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE11, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH2, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2372,44 +2766,29 @@ var SelectIndicator = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
 };
 SelectIndicator.displayName = "Select.Indicator";
-var resolveStaticWidth = (mode) => {
-  if (mode === "trigger" || mode === "content") return void 0;
-  return typeof mode === "number" ? `${mode}px` : mode;
-};
 var SelectContent = (props) => {
   const theme = useComponentTheme("SelectContent");
   const { size, contentWidth } = useSelectOwnContext("Select.Content");
   const { triggerRef } = spar.useSelectContext();
-  const [triggerWidth, setTriggerWidth] = react.useState(null);
-  react.useEffect(() => {
-    if (contentWidth !== "trigger") return;
-    const node = triggerRef.current;
-    if (!node) return;
-    setTriggerWidth(node.offsetWidth);
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (entry) setTriggerWidth(Math.round(entry.contentRect.width + 2));
-    });
-    observer.observe(node);
-    return () => observer.disconnect();
-  }, [contentWidth, triggerRef]);
+  const widthStyle = useContentWidthStyle(contentWidth, triggerRef);
   const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
     stateAttrs: () => ({
       "data-size": size
     })
   });
   const { children, ref, style: userStyle, ...spar$1 } = rest;
-  const widthStyle = react.useMemo(() => {
-    if (contentWidth === "trigger") {
-      return triggerWidth != null ? { width: triggerWidth } : void 0;
-    }
-    const staticWidth = resolveStaticWidth(contentWidth);
-    return staticWidth != null ? { width: staticWidth } : void 0;
-  }, [contentWidth, triggerWidth]);
-  const mergedStyle = widthStyle || userStyle ? { ...widthStyle, ...userStyle } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ref, style: mergedStyle, ...rootAttrs, children });
+  const { style: rootStyle, ...rootRest } = rootAttrs;
+  const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ...rootRest, ref, style: mergedStyle, children });
 };
 SelectContent.displayName = "Select.Content";
+var SelectViewport = (props) => {
+  const theme = useComponentTheme("SelectViewport");
+  const { rootAttrs, rest } = composeRootAttrs(SelectViewportBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectViewport, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectViewport.displayName = "Select.Viewport";
 var SelectItem = (props) => {
   const theme = useComponentTheme("SelectItem");
   const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
@@ -2438,16 +2817,638 @@ var SelectSeparator = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectSeparator, { ...spar$1, ref, ...rootAttrs, children });
 };
 SelectSeparator.displayName = "Select.Separator";
+var SelectArrow = (props) => {
+  const theme = useComponentTheme("SelectArrow");
+  const { rootAttrs, rest } = composeRootAttrs(SelectArrowBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
+};
+SelectArrow.displayName = "Select.Arrow";
 
 // src/components/select/index.ts
 var Select2 = Object.assign(Select, {
   Trigger: SelectTrigger,
   Indicator: SelectIndicator,
   Content: SelectContent,
+  Viewport: SelectViewport,
   Item: SelectItem,
   Group: SelectGroup,
   Label: SelectLabel,
-  Separator: SelectSeparator
+  Separator: SelectSeparator,
+  Arrow: SelectArrow
+});
+
+// src/components/slider/base.ts
+var SliderBase = createComponentBase({
+  name: "Slider",
+  slots: ["root"],
+  classes: { root: "tk-slider" }
+});
+var SliderTrackBase = createComponentBase({
+  name: "SliderTrack",
+  slots: ["root"],
+  classes: { root: "tk-slider-track" }
+});
+var SliderRangeBase = createComponentBase({
+  name: "SliderRange",
+  slots: ["root"],
+  classes: { root: "tk-slider-range" }
+});
+var SliderThumbBase = createComponentBase({
+  name: "SliderThumb",
+  slots: ["root", "tooltip", "arrow"],
+  classes: { root: "tk-slider-thumb", tooltip: "tk-slider-tooltip", arrow: "tk-slider-arrow" }
+});
+var SliderTicksBase = createComponentBase({
+  name: "SliderTicks",
+  slots: ["root", "tick"],
+  classes: { root: "tk-slider-ticks", tick: "tk-slider-tick" }
+});
+var SliderValueBase = createComponentBase({
+  name: "SliderValue",
+  slots: ["root"],
+  classes: { root: "tk-slider-value" }
+});
+
+// src/components/slider/context.ts
+var [SliderProvider, useSliderContext] = createSafeContext("SliderProvider");
+
+// src/components/slider/defaults.ts
+var DEFAULT_ORIENTATION2 = "horizontal";
+var DEFAULT_SIZE12 = "base";
+var DEFAULT_VARIANT7 = "primary";
+var DEFAULT_TOOLTIP = "auto";
+var DEFAULT_TRACK = "normal";
+var DEFAULT_MIN_DISTANCE = 0;
+var DEFAULT_MIN2 = 0;
+var DEFAULT_MAX2 = 100;
+var DEFAULT_STEP = 1;
+var DEFAULT_SPAN = 100;
+var PAGE_STEP_MULTIPLIER = 10;
+var MAX_TICKS = 100;
+var RANGE_VALUE_SEPARATOR = " \u2013 ";
+var RANGE_THUMB_LABELS = ["Minimum", "Maximum"];
+
+// src/components/slider/helpers.ts
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+var decimalsOf = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  const text = String(value);
+  const exponent = text.indexOf("e-");
+  if (exponent !== -1) {
+    const fraction = text.slice(0, exponent).split(".")[1]?.length ?? 0;
+    return fraction + Number(text.slice(exponent + 2));
+  }
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+};
+var roundTo = (value, decimals) => decimals > 0 ? Number(value.toFixed(Math.min(decimals, 15))) : Math.round(value);
+var resolveBounds = (rawMin = DEFAULT_MIN2, rawMax = DEFAULT_MAX2, rawStep = DEFAULT_STEP) => {
+  const min = Number.isFinite(rawMin) ? rawMin : DEFAULT_MIN2;
+  const max = Number.isFinite(rawMax) && rawMax > min ? rawMax : min + DEFAULT_SPAN;
+  const step = Number.isFinite(rawStep) && rawStep > 0 ? rawStep : DEFAULT_STEP;
+  return { min, max, step };
+};
+var snap = (value, { min, max, step }) => {
+  if (!Number.isFinite(value)) return min;
+  const steps = Math.round((value - min) / step);
+  const snapped = min + steps * step;
+  return clamp(roundTo(snapped, Math.max(decimalsOf(step), decimalsOf(min))), min, max);
+};
+var toPercent = (value, { min, max }) => clamp((value - min) * 100 / (max - min), 0, 100);
+var fromRatio = (ratio, { min, max }) => min + ratio * (max - min);
+var pointerCoord = (event, orientation) => orientation === "vertical" ? event.clientY : event.clientX;
+var valueFromPointer = (rect, point, bounds, orientation) => {
+  const ratio = orientation === "vertical" ? rect.height === 0 ? 0 : (rect.bottom - point) / rect.height : rect.width === 0 ? 0 : (point - rect.left) / rect.width;
+  return snap(fromRatio(clamp(ratio, 0, 1), bounds), bounds);
+};
+var offsetStyle = (percent, orientation) => orientation === "vertical" ? { insetBlockEnd: `${percent}%` } : { insetInlineStart: `${percent}%` };
+var bandStyle = (start, end, orientation) => orientation === "vertical" ? { insetBlockEnd: `${start}%`, height: `${end - start}%` } : { insetInlineStart: `${start}%`, width: `${end - start}%` };
+var normalizeValues = (value, range, bounds) => {
+  if (range) {
+    const seeded = Array.isArray(value) && value.length >= 2 ? value : [bounds.min, bounds.max];
+    return seeded.map((entry) => snap(entry, bounds)).sort((a, b) => a - b);
+  }
+  return [snap(Array.isArray(value) ? value[0] : value ?? bounds.min, bounds)];
+};
+var toCommittedValue = (values, range) => range ? [...values] : values[0];
+var rangeInputName = (name, index, count) => count === 2 ? index === 0 ? `${name}-min` : `${name}-max` : `${name}-${index + 1}`;
+var valuesEqual = (a, b) => a.length === b.length && a.every((entry, index) => entry === b[index]);
+var thumbLabel = (index, count) => {
+  if (count < 2) return void 0;
+  if (count === 2) return RANGE_THUMB_LABELS[index];
+  return `Value ${index + 1}`;
+};
+var closestThumbIndex = (values, target, disabled = []) => {
+  let index = 0;
+  let best = Infinity;
+  let found = false;
+  values.forEach((entry, current) => {
+    if (disabled[current]) return;
+    const distance = Math.abs(entry - target);
+    if (distance <= best) {
+      best = distance;
+      index = current;
+      found = true;
+    }
+  });
+  if (found) return index;
+  values.forEach((entry, current) => {
+    const distance = Math.abs(entry - target);
+    if (distance <= best) {
+      best = distance;
+      index = current;
+    }
+  });
+  return index;
+};
+var thumbBounds = (values, index, bounds, minDistance = 0) => {
+  const hardLower = index > 0 ? values[index - 1] : bounds.min;
+  const hardUpper = index < values.length - 1 ? values[index + 1] : bounds.max;
+  const lower = index > 0 ? hardLower + minDistance : bounds.min;
+  const upper = index < values.length - 1 ? hardUpper - minDistance : bounds.max;
+  return lower <= upper ? { min: lower, max: upper } : { min: hardLower, max: hardUpper };
+};
+var withThumbClamped = (values, index, next, bounds, minDistance = 0) => {
+  const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
+  const updated = [...values];
+  updated[index] = clamp(snap(next, bounds), lower, upper);
+  return updated;
+};
+var withThumbSwapped = (values, index, next, bounds, minDistance = 0, disabled = []) => {
+  const lowerBlocked = index > 0 && disabled[index - 1];
+  const upperBlocked = index < values.length - 1 && disabled[index + 1];
+  if (minDistance > 0 || lowerBlocked || upperBlocked) {
+    const { min: lower, max: upper } = thumbBounds(values, index, bounds, minDistance);
+    const updated2 = [...values];
+    updated2[index] = clamp(snap(next, bounds), lower, upper);
+    return { values: updated2, index };
+  }
+  const updated = [...values];
+  updated[index] = snap(next, bounds);
+  let active = index;
+  while (active > 0 && updated[active] < updated[active - 1]) {
+    [updated[active], updated[active - 1]] = [updated[active - 1], updated[active]];
+    active -= 1;
+  }
+  while (active < updated.length - 1 && updated[active] > updated[active + 1]) {
+    [updated[active], updated[active + 1]] = [updated[active + 1], updated[active]];
+    active += 1;
+  }
+  return { values: updated, index: active };
+};
+var formatValueText = (value, formatValue) => formatValue?.(value) ?? String(value);
+var tickPercents = ({ min, max, step }, limit) => {
+  const raw = (max - min) / step;
+  const steps = Math.abs(raw - Math.round(raw)) < 1e-9 ? Math.round(raw) : Math.floor(raw);
+  const count = steps + 1;
+  if (count > limit) return null;
+  return Array.from({ length: count }, (_, index) => toPercent(min + index * step, { min, max}));
+};
+var SliderRange = (props) => {
+  const theme = useComponentTheme("SliderRange");
+  const { values, bounds, range, orientation } = useSliderContext("Slider.Range");
+  const start = range ? toPercent(values[0], bounds) : 0;
+  const end = toPercent(range ? values[values.length - 1] : values[0], bounds);
+  const { rootAttrs, rest } = composeRootAttrs(SliderRangeBase, props, theme);
+  const { ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...slotAttrs, "aria-hidden": "true", style: { ...style, ...slotStyle, ...bandStyle(start, end, orientation) }, ref });
+};
+SliderRange.displayName = "Slider.Range";
+var SliderThumb = (props) => {
+  const theme = useComponentTheme("SliderThumb");
+  const {
+    values,
+    bounds,
+    range,
+    minDistance,
+    orientation,
+    disabled,
+    readOnly,
+    invalid,
+    required,
+    draggingIndex,
+    formatValue,
+    setThumbValue,
+    startDrag,
+    thumbRefs,
+    thumbDisabledRef,
+    fieldId,
+    labelId,
+    describedBy,
+    rootAriaLabel,
+    rootAriaLabelledby
+  } = useSliderContext("Slider.Thumb");
+  const [isFocused, setIsFocused] = react.useState(false);
+  const { rootAttrs, rest } = composeRootAttrs(SliderThumbBase, props, theme);
+  const { index = 0, disabled: ownDisabled, children, ref, style, onKeyDown, onPointerDown, onFocus, onBlur, ...nativeProps } = rest;
+  const value = values[index] ?? bounds.min;
+  const isDragging = draggingIndex === index;
+  const isDisabled = disabled || Boolean(ownDisabled);
+  thumbDisabledRef.current[index] = isDisabled;
+  const { min: lowerBound, max: upperBound } = thumbBounds(values, index, bounds, minDistance);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (isDisabled || readOnly || event.defaultPrevented) return;
+    const page = bounds.step * PAGE_STEP_MULTIPLIER;
+    const next = {
+      ArrowRight: value + bounds.step,
+      ArrowUp: value + bounds.step,
+      ArrowLeft: value - bounds.step,
+      ArrowDown: value - bounds.step,
+      PageUp: value + page,
+      PageDown: value - page,
+      Home: bounds.min,
+      End: bounds.max
+    }[event.key];
+    if (next === void 0) return;
+    event.preventDefault();
+    setThumbValue(index, next);
+  };
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    if (isDisabled || readOnly || event.defaultPrevented || event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    startDrag(index, pointerCoord(event, orientation), false, event.pointerId);
+  };
+  const tooltipAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("tooltip"), "tooltip", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const arrowAttrs = buildSlotAttrs(SliderThumbBase.getSlotProps("arrow"), "arrow", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const formattedText = formatValueText(value, formatValue);
+  const formatted = formatValue ? formattedText : void 0;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  const bubbleContent = children === void 0 ? formattedText : typeof children === "function" ? children({ value, formatted: formattedText, index, isDragging, isFocused }) : children;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...nativeProps,
+      ...slotAttrs,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": lowerBound,
+      "aria-valuemax": upperBound,
+      "aria-valuenow": value,
+      "aria-valuetext": formatted,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled || void 0,
+      "aria-readonly": readOnly || void 0,
+      "aria-invalid": invalid || void 0,
+      "aria-required": required || void 0,
+      "aria-label": nativeProps["aria-label"] ?? thumbLabel(index, values.length) ?? rootAriaLabel,
+      "aria-labelledby": nativeProps["aria-labelledby"] ?? (range ? void 0 : rootAriaLabelledby ?? labelId),
+      "aria-describedby": nativeProps["aria-describedby"] ?? describedBy,
+      id: nativeProps.id ?? (index === 0 ? fieldId : void 0),
+      "data-thumb": range ? index === 0 ? "min" : index === values.length - 1 ? "max" : void 0 : void 0,
+      "data-dragging": isDragging ? "" : void 0,
+      "data-focus": isFocused ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      onFocus: (event) => {
+        onFocus?.(event);
+        setIsFocused(true);
+      },
+      onBlur: (event) => {
+        onBlur?.(event);
+        setIsFocused(false);
+      },
+      style: { ...style, ...slotStyle, ...offsetStyle(toPercent(value, bounds), orientation) },
+      ref: (node) => {
+        thumbRefs.current[index] = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { ...tooltipAttrs, "aria-hidden": "true", children: [
+        bubbleContent,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ...arrowAttrs, "aria-hidden": "true" })
+      ] })
+    }
+  );
+};
+SliderThumb.displayName = "Slider.Thumb";
+var SliderTrack = (props) => {
+  const theme = useComponentTheme("SliderTrack");
+  const { values, disabled, readOnly, orientation, valueFromPoint, startDrag, trackRef, thumbDisabledRef } = useSliderContext("Slider.Track");
+  const { rootAttrs, rest } = composeRootAttrs(SliderTrackBase, props, theme);
+  const { children, ref, onPointerDown, ...nativeProps } = rest;
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    if (disabled || readOnly || event.defaultPrevented || event.button !== 0) return;
+    event.preventDefault();
+    const point = pointerCoord(event, orientation);
+    startDrag(closestThumbIndex(values, valueFromPoint(point), thumbDisabledRef.current), point, true, event.pointerId);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...nativeProps,
+      ...rootAttrs,
+      onPointerDown: handlePointerDown,
+      ref: (node) => {
+        trackRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SliderRange, {}),
+        values.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(SliderThumb, { index }, index))
+      ] })
+    }
+  );
+};
+SliderTrack.displayName = "Slider.Track";
+var warnedRanges2 = /* @__PURE__ */ new Set();
+var Slider = (props) => {
+  const theme = useComponentTheme("Slider");
+  const field = spar.useOptionalFieldContext();
+  const { rootAttrs, rest } = composeRootAttrs(SliderBase, props, theme, {
+    stateAttrs: (merged) => {
+      const {
+        size = DEFAULT_SIZE12,
+        variant = DEFAULT_VARIANT7,
+        orientation: orientation2 = DEFAULT_ORIENTATION2,
+        tooltip = DEFAULT_TOOLTIP,
+        track = DEFAULT_TRACK,
+        range: range2,
+        disabled: disabled2,
+        readOnly: readOnly2,
+        invalid: invalid2,
+        required: required2
+      } = merged;
+      return {
+        "data-size": size,
+        "data-variant": variant,
+        "data-orientation": orientation2,
+        "data-tooltip": tooltip,
+        "data-track": track,
+        "data-range": range2 ? "" : void 0,
+        "data-disabled": disabled2 ?? field?.disabled ? "" : void 0,
+        "data-readonly": readOnly2 ?? field?.readOnly ? "" : void 0,
+        "data-invalid": invalid2 ?? field?.invalid ? "" : void 0,
+        "data-required": required2 ?? field?.required ? "" : void 0
+      };
+    }
+  });
+  const {
+    // Consumed through the resolved state below (and as the root data-* hooks);
+    // destructured so the <div> doesn't receive unknown DOM attributes.
+    min: rawMin,
+    max: rawMax,
+    step: rawStep,
+    range = false,
+    value,
+    defaultValue,
+    onValueChange,
+    onValueChangeEnd,
+    disabled: ownDisabled,
+    readOnly: ownReadOnly,
+    invalid: ownInvalid,
+    required: ownRequired,
+    minDistance = DEFAULT_MIN_DISTANCE,
+    orientation = DEFAULT_ORIENTATION2,
+    size: _size,
+    variant: _variant,
+    // Consumed as the `data-tooltip` / `data-track` root hooks above (the recipe
+    // drives the value bubble and the inverted/none fill off them); pulled out
+    // so they never land on the <div> as unknown attributes.
+    tooltip: _tooltip,
+    track: _track,
+    formatValue,
+    name,
+    form,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const disabled = ownDisabled ?? field?.disabled ?? false;
+  const readOnly = ownReadOnly ?? field?.readOnly ?? false;
+  const invalid = ownInvalid ?? field?.invalid ?? false;
+  const required = ownRequired ?? field?.required ?? false;
+  const bounds = resolveBounds(rawMin, rawMax, rawStep);
+  if (isDevelopment() && typeof rawMax === "number" && Number.isFinite(rawMax) && rawMax <= bounds.min) {
+    const message = `[Slider] \`max\` (${rawMax}) must be greater than \`min\` (${bounds.min}); falling back to ${bounds.max}.`;
+    if (!warnedRanges2.has("inverted-range")) {
+      warnedRanges2.add("inverted-range");
+      console.warn(message);
+    }
+  }
+  const controlledValues = value === void 0 ? void 0 : normalizeValues(value, range, bounds);
+  const initialValues = normalizeValues(defaultValue, range, bounds);
+  const onValueChangeRef = react.useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const handleCommit = react.useCallback((next) => onValueChangeRef.current?.(toCommittedValue(next, range)), [range]);
+  const [rawValues = initialValues, setValues] = useControllableState(controlledValues, initialValues, handleCommit);
+  const values = react.useMemo(() => normalizeValues(toCommittedValue(rawValues, range), range, bounds), [rawValues, range, bounds.min, bounds.max, bounds.step]);
+  const onValueChangeEndRef = react.useRef(onValueChangeEnd);
+  onValueChangeEndRef.current = onValueChangeEnd;
+  const emitChangeEnd = react.useCallback((vals) => onValueChangeEndRef.current?.(toCommittedValue(vals, range)), [range]);
+  const emitChangeEndRef = react.useRef(emitChangeEnd);
+  emitChangeEndRef.current = emitChangeEnd;
+  const [draggingIndex, setDraggingIndex] = react.useState(null);
+  const trackRef = react.useRef(null);
+  const thumbRefs = react.useRef([]);
+  const thumbDisabledRef = react.useRef([]);
+  const gestureStartRef = react.useRef(null);
+  const dragPointerRef = react.useRef(null);
+  const valuesRef = react.useRef(values);
+  valuesRef.current = values;
+  thumbDisabledRef.current.length = values.length;
+  const valueFromPoint = react.useCallback(
+    (point) => {
+      const track = trackRef.current;
+      if (!track) return bounds.min;
+      return valueFromPointer(track.getBoundingClientRect(), point, bounds, orientation);
+    },
+    [bounds.min, bounds.max, bounds.step, orientation]
+  );
+  const commit = react.useCallback(
+    (next) => {
+      if (!valuesEqual(next, valuesRef.current)) setValues(next);
+    },
+    [setValues]
+  );
+  const setThumbValue = react.useCallback(
+    (index, next) => {
+      if (disabled || readOnly || thumbDisabledRef.current[index]) return;
+      const before = valuesRef.current;
+      const updated = withThumbClamped(before, index, next, bounds, minDistance);
+      commit(updated);
+      if (!valuesEqual(updated, before)) emitChangeEnd(updated);
+    },
+    [disabled, readOnly, commit, emitChangeEnd, minDistance, bounds.min, bounds.max, bounds.step]
+  );
+  const startDrag = react.useCallback(
+    (index, point, seek, pointerId) => {
+      if (disabled || readOnly || thumbDisabledRef.current[index]) return;
+      gestureStartRef.current = valuesRef.current;
+      dragPointerRef.current = pointerId;
+      if (!seek) {
+        setDraggingIndex(index);
+        thumbRefs.current[index]?.focus();
+        return;
+      }
+      const { values: next, index: active } = withThumbSwapped(valuesRef.current, index, valueFromPoint(point), bounds, minDistance, thumbDisabledRef.current);
+      setDraggingIndex(active);
+      thumbRefs.current[active]?.focus();
+      commit(next);
+    },
+    [disabled, readOnly, commit, valueFromPoint, minDistance, bounds.min, bounds.max, bounds.step]
+  );
+  react.useEffect(() => {
+    if (draggingIndex === null) return;
+    const ownerId = dragPointerRef.current;
+    const isOwner = (event) => ownerId === null || event.pointerId === ownerId;
+    const settle = () => {
+      setDraggingIndex(null);
+      if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEnd(valuesRef.current);
+      gestureStartRef.current = null;
+      dragPointerRef.current = null;
+    };
+    const handleMove = (event) => {
+      if (!isOwner(event)) return;
+      if (event.buttons === 0) {
+        settle();
+        return;
+      }
+      const { values: next, index: active } = withThumbSwapped(
+        valuesRef.current,
+        draggingIndex,
+        valueFromPoint(pointerCoord(event, orientation)),
+        bounds,
+        minDistance,
+        thumbDisabledRef.current
+      );
+      if (active !== draggingIndex) {
+        setDraggingIndex(active);
+        thumbRefs.current[active]?.focus();
+      }
+      commit(next);
+    };
+    const handleEnd = (event) => {
+      if (!isOwner(event)) return;
+      settle();
+    };
+    document.addEventListener("pointermove", handleMove);
+    document.addEventListener("pointerup", handleEnd);
+    document.addEventListener("pointercancel", handleEnd);
+    return () => {
+      document.removeEventListener("pointermove", handleMove);
+      document.removeEventListener("pointerup", handleEnd);
+      document.removeEventListener("pointercancel", handleEnd);
+    };
+  }, [draggingIndex, valueFromPoint, commit, emitChangeEnd, minDistance, orientation, bounds.min, bounds.max, bounds.step]);
+  react.useEffect(
+    () => () => {
+      if (gestureStartRef.current && !valuesEqual(valuesRef.current, gestureStartRef.current)) emitChangeEndRef.current(valuesRef.current);
+      gestureStartRef.current = null;
+    },
+    []
+  );
+  const Component = as ?? "div";
+  const htmlProps = nativeProps;
+  const groupAttrs = range ? {
+    "role": htmlProps.role ?? "group",
+    "aria-labelledby": htmlProps["aria-labelledby"] ?? field?.labelId
+  } : {};
+  const { "aria-label": rootAriaLabel, "aria-labelledby": rootAriaLabelledby, ...singleWrapperProps } = htmlProps;
+  const wrapperProps = range ? nativeProps : singleWrapperProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SliderProvider,
+    {
+      value: {
+        values,
+        bounds,
+        range,
+        minDistance,
+        orientation,
+        disabled,
+        readOnly,
+        invalid,
+        required,
+        draggingIndex,
+        trackRef,
+        thumbRefs,
+        thumbDisabledRef,
+        formatValue,
+        setThumbValue,
+        startDrag,
+        valueFromPoint,
+        fieldId: field?.fieldId,
+        labelId: field?.labelId,
+        describedBy: invalid ? field?.errorId : field?.descriptionId,
+        // Only a single slider forwards the root name to its thumb; a range
+        // carries it on the group wrapper above.
+        rootAriaLabel: range ? void 0 : rootAriaLabel,
+        rootAriaLabelledby: range ? void 0 : rootAriaLabelledby
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...wrapperProps, ...groupAttrs, ...rootAttrs, ref, children: [
+        children ?? /* @__PURE__ */ jsxRuntime.jsx(SliderTrack, {}),
+        name && !disabled && (range ? (
+          // One input per handle so a 3+ thumb range submits every value; a
+          // two-handle range keeps the conventional `-min` / `-max` pair.
+          values.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
+        ) : /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: values[0], form }))
+      ] })
+    }
+  );
+};
+Slider.displayName = "Slider";
+var warnedGrids = /* @__PURE__ */ new Set();
+var SliderTicks = (props) => {
+  const theme = useComponentTheme("SliderTicks");
+  const { bounds, orientation } = useSliderContext("Slider.Ticks");
+  const { rootAttrs, rest } = composeRootAttrs(SliderTicksBase, props, theme);
+  const { ref, ...nativeProps } = rest;
+  const percents = tickPercents(bounds, MAX_TICKS);
+  if (percents === null) {
+    if (isDevelopment()) {
+      const message = `[Slider.Ticks] needs at most ${MAX_TICKS} marks, but min ${bounds.min} / max ${bounds.max} / step ${bounds.step} produces more; the ticks are not rendered.`;
+      if (!warnedGrids.has("ticks-too-dense")) {
+        warnedGrids.add("ticks-too-dense");
+        console.warn(message);
+      }
+    }
+    return null;
+  }
+  const tickAttrs = buildSlotAttrs(SliderTicksBase.getSlotProps("tick"), "tick", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: percents.map((percent, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...tickAttrs, style: offsetStyle(percent, orientation) }, index)) });
+};
+SliderTicks.displayName = "Slider.Ticks";
+var SliderValue = (props) => {
+  const theme = useComponentTheme("SliderValue");
+  const { values, range, formatValue } = useSliderContext("Slider.Value");
+  const { rootAttrs, rest } = composeRootAttrs(SliderValueBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  const formatted = values.map((value) => formatValueText(value, formatValue));
+  const state = { values, formatted, range };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: typeof children === "function" ? children(state) : children ?? formatted.join(RANGE_VALUE_SEPARATOR) });
+};
+SliderValue.displayName = "Slider.Value";
+
+// src/components/slider/index.ts
+var Slider2 = Object.assign(Slider, {
+  Track: SliderTrack,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+  Ticks: SliderTicks,
+  Value: SliderValue
 });
 
 // src/components/spinner/base.ts
@@ -2461,10 +3462,10 @@ var SpinnerBase = createComponentBase({
 });
 
 // src/components/spinner/defaults.ts
-var DEFAULT_APPEARANCE5 = "rounded";
-var DEFAULT_SIZE10 = "base";
-var DEFAULT_VARIANT6 = "neutral";
-var DEFAULT_ARIA_LABEL = "Loading";
+var DEFAULT_APPEARANCE7 = "rounded";
+var DEFAULT_SIZE13 = "base";
+var DEFAULT_VARIANT8 = "neutral";
+var DEFAULT_ARIA_LABEL2 = "Loading";
 var SPINNER_RADIAL_PARTS = 8;
 var SPINNER_THREE_DOT_PARTS = 3;
 var renderIndicatorContent = (appearance) => {
@@ -2501,13 +3502,13 @@ var renderIndicatorContent = (appearance) => {
 var Spinner = (props) => {
   const theme = useComponentTheme("Spinner");
   const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT6, size = DEFAULT_SIZE10, appearance: appearance2 = DEFAULT_APPEARANCE5 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT8, size = DEFAULT_SIZE13, appearance: appearance2 = DEFAULT_APPEARANCE7 }) => ({
       "data-variant": variant,
       "data-size": size,
       "data-type": appearance2
     })
   });
-  const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE5, ref, ...nativeProps } = rest;
+  const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE7, ref, ...nativeProps } = rest;
   const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
     themeSlotProps: theme?.slotProps,
     themeClassNames: theme?.classNames,
@@ -2517,12 +3518,307 @@ var Spinner = (props) => {
   const isDecorative = nativeProps["aria-hidden"] === true || nativeProps["aria-hidden"] === "true";
   const accessibilityAttrs = isDecorative ? {} : {
     "role": nativeProps.role ?? "status",
-    "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL)
+    "aria-label": nativeProps["aria-label"] ?? (nativeProps["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL2)
   };
   return /* @__PURE__ */ jsxRuntime.jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
 };
 Spinner.displayName = "Spinner";
 
+// src/components/stepper/base.ts
+var StepperBase = createComponentBase({
+  name: "Stepper",
+  slots: ["root"],
+  classes: { root: "tk-stepper" }
+});
+var StepperItemBase = createComponentBase({
+  name: "StepperItem",
+  slots: ["root", "trigger", "rail", "indicator", "content"],
+  classes: {
+    root: "tk-stepper-item",
+    trigger: "tk-stepper-trigger",
+    rail: "tk-stepper-rail",
+    indicator: "tk-stepper-indicator",
+    content: "tk-stepper-content"
+  }
+});
+var StepperTitleBase = createComponentBase({
+  name: "StepperTitle",
+  slots: ["root"],
+  classes: { root: "tk-stepper-title" }
+});
+var StepperDescriptionBase = createComponentBase({
+  name: "StepperDescription",
+  slots: ["root"],
+  classes: { root: "tk-stepper-description" }
+});
+
+// src/components/stepper/context.ts
+var [StepperProvider, useStepperContext] = createSafeContext("StepperProvider");
+var [StepperItemIndexProvider, useStepperItemIndex] = createSafeContext("StepperItemIndexProvider");
+var [StepperItemProvider, useStepperItem] = createSafeContext("Stepper.Item");
+
+// src/components/stepper/defaults.ts
+var DEFAULT_ORIENTATION3 = "horizontal";
+var DEFAULT_MODE2 = "default";
+var DEFAULT_SIZE14 = "base";
+var DEFAULT_ACTIVE = 0;
+var DEFAULT_COMPLETED_LABEL = "completed";
+var DEFAULT_ERROR_LABEL = "error";
+var FOCUSABLE_TRIGGER_SELECTOR = '.tk-stepper-trigger:not(:disabled):not([tabindex="-1"])';
+var Stepper = (props) => {
+  const theme = useComponentTheme("Stepper");
+  const { rootAttrs, rest } = composeRootAttrs(StepperBase, props, theme, {
+    stateAttrs: ({ orientation: orientation2 = DEFAULT_ORIENTATION3, mode: mode2 = DEFAULT_MODE2, size = DEFAULT_SIZE14, linear: linear2 = false, reverse = false }) => ({
+      "data-orientation": orientation2,
+      "data-mode": mode2,
+      "data-size": size,
+      "data-linear": linear2 ? "" : void 0,
+      "data-reverse": reverse ? "" : void 0
+    })
+  });
+  const {
+    active: controlledActive,
+    defaultActive = DEFAULT_ACTIVE,
+    onActiveChange,
+    onStepClick,
+    orientation = DEFAULT_ORIENTATION3,
+    mode = DEFAULT_MODE2,
+    // Consumed only as root data-* hooks above; destructured so the <ol>
+    // doesn't receive unknown DOM attributes.
+    size: _size,
+    linear = false,
+    reverse: _reverse,
+    completedLabel = DEFAULT_COMPLETED_LABEL,
+    errorLabel = DEFAULT_ERROR_LABEL,
+    onKeyDown: nativeOnKeyDown,
+    as,
+    children,
+    ref,
+    ...nativeProps
+  } = rest;
+  const onActiveChangeRef = react.useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  const stableOnActiveChange = react.useCallback((index) => {
+    onActiveChangeRef.current?.(index);
+  }, []);
+  const onStepClickRef = react.useRef(onStepClick);
+  onStepClickRef.current = onStepClick;
+  const stableOnStepClick = react.useCallback((detail) => {
+    onStepClickRef.current?.(detail);
+  }, []);
+  const [activeValue, setActive] = useControllableState(controlledActive, defaultActive, stableOnActiveChange);
+  const active = activeValue ?? DEFAULT_ACTIVE;
+  const [stepsMeta, setStepsMeta] = react.useState(/* @__PURE__ */ new Map());
+  const { items, renderStepsMeta } = react.useMemo(() => {
+    const meta = /* @__PURE__ */ new Map();
+    let stepIndex = 0;
+    const items2 = react.Children.toArray(children).map((child) => {
+      if (!react.isValidElement(child)) return child;
+      const index = stepIndex++;
+      const { error = false, disabled = false, isClickable = true } = child.props;
+      meta.set(index, { error, disabled, isClickable });
+      return /* @__PURE__ */ jsxRuntime.jsx(StepperItemIndexProvider, { value: { index }, children: child }, child.key ?? index);
+    });
+    return { items: items2, renderStepsMeta: meta };
+  }, [children]);
+  const registerStep = react.useCallback((index, meta) => {
+    setStepsMeta((previous) => new Map(previous).set(index, meta));
+    return () => {
+      setStepsMeta((previous) => {
+        const next = new Map(previous);
+        next.delete(index);
+        return next;
+      });
+    };
+  }, []);
+  const contextValue = react.useMemo(() => {
+    const canSelectStep = (index, selfMeta) => {
+      const target = stepsMeta.get(index) ?? selfMeta ?? renderStepsMeta.get(index);
+      if (!target || target.disabled || !target.isClickable) return false;
+      if (!linear) return true;
+      if (index < active) return true;
+      if (index === active + 1) {
+        const current = stepsMeta.get(active) ?? renderStepsMeta.get(active);
+        return !current?.error && !current?.disabled;
+      }
+      return false;
+    };
+    const getStepStatus = (options) => {
+      const { index } = options;
+      if (index < active) return "completed";
+      if (index === active) return "active";
+      return "inactive";
+    };
+    return {
+      active,
+      mode,
+      completedLabel,
+      errorLabel,
+      getStepStatus,
+      registerStep,
+      canSelectStep,
+      selectStep: (index) => {
+        if (index !== active && canSelectStep(index)) {
+          setActive(index);
+        }
+      },
+      emitStepClick: (detail) => {
+        stableOnStepClick(detail);
+      }
+    };
+  }, [active, mode, completedLabel, errorLabel, linear, stepsMeta, renderStepsMeta, registerStep, setActive, stableOnStepClick]);
+  const { onKeyDown: slotOnKeyDown, ...restRootAttrs } = rootAttrs;
+  const userOnKeyDown = slotOnKeyDown ?? nativeOnKeyDown;
+  const handleKeyDown = (event) => {
+    userOnKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const forwardKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const backwardKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    if (event.key !== forwardKey && event.key !== backwardKey && event.key !== "Home" && event.key !== "End") return;
+    const pressedTrigger = event.target instanceof HTMLElement ? event.target.closest(".tk-stepper-trigger") : null;
+    if (!pressedTrigger || pressedTrigger.closest(".tk-stepper") !== event.currentTarget) return;
+    event.preventDefault();
+    const triggers = Array.from(event.currentTarget.querySelectorAll(FOCUSABLE_TRIGGER_SELECTOR)).filter(
+      (trigger) => trigger.closest(".tk-stepper") === event.currentTarget
+    );
+    const currentIndex = triggers.indexOf(pressedTrigger);
+    if (triggers.length === 0 || currentIndex === -1 && event.key !== "Home" && event.key !== "End") return;
+    const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? triggers.length - 1 : event.key === forwardKey ? currentIndex + 1 : currentIndex - 1;
+    triggers[nextIndex]?.focus();
+  };
+  const Component = as ?? "ol";
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...restRootAttrs, ref, onKeyDown: handleKeyDown, children: items }) });
+};
+Stepper.displayName = "Stepper";
+var StepperTitle = (props) => {
+  const theme = useComponentTheme("StepperTitle");
+  useStepperContext("Stepper.Title");
+  const { rootAttrs, rest } = composeRootAttrs(StepperTitleBase, props, theme);
+  const { as, children, ref, ...nativeProps } = rest;
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, children });
+};
+StepperTitle.displayName = "Stepper.Title";
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var StepperItem = (props) => {
+  const theme = useComponentTheme("StepperItem");
+  const { active, mode, completedLabel, errorLabel, getStepStatus, registerStep, canSelectStep, selectStep, emitStepClick } = useStepperContext("Stepper.Item");
+  const { index } = useStepperItemIndex("Stepper.Item");
+  const { rootAttrs, rest } = composeRootAttrs(StepperItemBase, props, theme, {
+    stateAttrs: ({ error: error2 = false, disabled: disabled2 = false, isClickable: isClickable2 = true }) => ({
+      "data-state": getStepStatus({ index }),
+      "data-error": error2 ? "" : void 0,
+      "data-disabled": disabled2 ? "" : void 0,
+      // The active step is excluded: pressing it re-emits `onStepClick` but
+      // can never change the selection, which is what this hook advertises.
+      "data-clickable": index !== active && canSelectStep(index, { error: error2, disabled: disabled2, isClickable: isClickable2 }) ? "" : void 0
+    })
+  });
+  const { error = false, disabled = false, isClickable = true, indicator, as, children, ref, ...nativeProps } = rest;
+  react.useEffect(() => registerStep(index, { error, disabled, isClickable }), [registerStep, index, error, disabled, isClickable]);
+  const status = getStepStatus({ index });
+  const selectable = canSelectStep(index, { error, disabled, isClickable });
+  const isActive = index === active;
+  const ariaDisabled = selectable || isActive ? void 0 : true;
+  const statusLabel = error ? errorLabel : status === "completed" ? completedLabel : void 0;
+  const [descriptionId, setDescriptionId] = react.useState();
+  const registerDescription = react.useCallback((id) => {
+    setDescriptionId(id);
+    return () => {
+      setDescriptionId((current) => current === id ? void 0 : current);
+    };
+  }, []);
+  const itemContextValue = react.useMemo(() => ({ registerDescription }), [registerDescription]);
+  const slotLayering = {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  };
+  const triggerSlotAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("trigger"), "trigger", slotLayering);
+  const { onClick: triggerSlotOnClick, ...triggerAttrs } = triggerSlotAttrs;
+  const railAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("rail"), "rail", slotLayering);
+  const indicatorAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("indicator"), "indicator", slotLayering);
+  const contentAttrs = buildSlotAttrs(StepperItemBase.getSlotProps("content"), "content", slotLayering);
+  const resolvedIndicator = typeof indicator === "function" ? indicator({ status, index }) : indicator;
+  let indicatorContent = null;
+  if (!disabled) {
+    if (resolvedIndicator != null) {
+      indicatorContent = resolvedIndicator;
+    } else if (error) {
+      indicatorContent = /* @__PURE__ */ jsxRuntime.jsx(close.CloseIconOutlinedRounded, {});
+    } else if (status === "completed") {
+      indicatorContent = /* @__PURE__ */ jsxRuntime.jsx(check.CheckIconOutlinedRounded, {});
+    }
+  }
+  const handleTriggerClick = (event) => {
+    triggerSlotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    if (!selectable && !(isActive && isClickable)) return;
+    emitStepClick({ index, status });
+    selectStep(index);
+  };
+  const Component = as ?? "li";
+  return /* @__PURE__ */ jsxRuntime.jsx(StepperItemProvider, { value: itemContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...nativeProps, ...rootAttrs, ref, children: [
+    mode !== "compact" && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...railAttrs }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ...triggerAttrs,
+        type: "button",
+        disabled,
+        onClick: handleTriggerClick,
+        "aria-current": isActive ? "step" : void 0,
+        "aria-disabled": ariaDisabled,
+        "aria-describedby": descriptionId,
+        tabIndex: isClickable ? void 0 : -1,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentAttrs, children }),
+          statusLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: visuallyHidden, children: `, ${statusLabel}` }) : null
+        ]
+      }
+    )
+  ] }) });
+};
+StepperItem.displayName = "Stepper.Item";
+var StepperDescription = (props) => {
+  const theme = useComponentTheme("StepperDescription");
+  const { registerDescription } = useStepperItem("Stepper.Description");
+  const { rootAttrs, rest } = composeRootAttrs(StepperDescriptionBase, props, theme);
+  const { as, children, ref, id: idProp, ...nativeProps } = rest;
+  const autoId = react.useId();
+  const id = idProp ?? autoId;
+  react.useEffect(() => registerDescription(id), [registerDescription, id]);
+  const Component = as ?? "span";
+  return (
+    // Locked after the spread: the id must match the trigger's
+    // `aria-describedby` registration, and `aria-hidden` keeps the description
+    // out of the trigger's accessible NAME — it still reaches assistive
+    // technology as the trigger's description, since `aria-describedby` may
+    // reference hidden elements.
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ...nativeProps, ...rootAttrs, ref, id, "aria-hidden": "true", children })
+  );
+};
+StepperDescription.displayName = "Stepper.Description";
+
+// src/components/stepper/index.ts
+var Stepper2 = Object.assign(Stepper, {
+  Item: StepperItem,
+  Title: StepperTitle,
+  Description: StepperDescription
+});
+
 // src/components/switch/base.ts
 var SwitchBase = createComponentBase({
   name: "Switch",
@@ -2540,12 +3836,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE11 = "base";
-var DEFAULT_VARIANT7 = "info";
+var DEFAULT_SIZE15 = "base";
+var DEFAULT_VARIANT9 = "info";
 var Switch = (props) => {
   const theme = useComponentTheme("Switch");
   const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE11, variant = DEFAULT_VARIANT7 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -2556,13 +3852,17 @@ var Switch = (props) => {
     // off the rendered DOM where they would leak as raw HTML attributes.
     size: _size,
     variant: _variant,
-    // `invalid` is forwarded to Spar as `invalid` (same name).
-    invalid = false,
     children,
     ref,
+    // `invalid`, `disabled`, `readOnly` and `required` are intentionally NOT
+    // destructured (so no eager `= false` default is applied) — they flow to
+    // Spar via `...sparProps` untouched. Defaulting `invalid` here would turn
+    // an omitted prop into an explicit `false`, defeating Spar's
+    // `invalid ?? fieldCtx?.invalid` inheritance and silently overriding a
+    // wrapping `<Field invalid>`. Mirrors the Radio/Input/Select pass-through.
     ...sparProps
   } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.Switch, { ...sparProps, invalid, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Switch, { ...sparProps, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
     SwitchProvider,
     {
       value: {
@@ -2668,7 +3968,7 @@ var TableBase = createComponentBase({
 var [TableProvider, useTableContext] = createSafeContext("Table");
 
 // src/components/table/defaults.ts
-var DEFAULT_SIZE12 = "base";
+var DEFAULT_SIZE16 = "base";
 var DEFAULT_PAGE_SIZE = 10;
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
 var DEFAULT_COLUMN_WIDTH = 150;
@@ -3194,7 +4494,7 @@ var Table = (props) => {
     // Visual vocabulary lives on the root so recipes cascade
     // to the portal-free table descendants. `data-loading` mirrors the
     // boolean-presence convention (rule 5).
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE12, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
       "data-size": size2,
       "data-striped": striped2 ? "" : void 0,
       "data-bordered": bordered2 ? "" : void 0,
@@ -3208,7 +4508,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE12,
+    size = DEFAULT_SIZE16,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -3408,19 +4708,19 @@ var TabsContentBase = createComponentBase({
 var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
 
 // src/components/tabs/defaults.ts
-var DEFAULT_SIZE13 = "base";
-var DEFAULT_VARIANT8 = "primary";
-var DEFAULT_APPEARANCE6 = "basic";
+var DEFAULT_SIZE17 = "base";
+var DEFAULT_VARIANT10 = "primary";
+var DEFAULT_APPEARANCE8 = "basic";
 var Tabs = (props) => {
   const theme = useComponentTheme("Tabs");
   const { rootAttrs, rest } = composeRootAttrs(TabsBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE13, variant: variant2 = DEFAULT_VARIANT8, appearance: appearance2 = DEFAULT_APPEARANCE6 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
       "data-size": size2,
       "data-variant": variant2,
       "data-type": appearance2
     })
   });
-  const { size = DEFAULT_SIZE13, variant = DEFAULT_VARIANT8, appearance = DEFAULT_APPEARANCE6, children, ref, ...sparProps } = rest;
+  const { size = DEFAULT_SIZE17, variant = DEFAULT_VARIANT10, appearance = DEFAULT_APPEARANCE8, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Tabs, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -3520,11 +4820,11 @@ var TooltipTrigger = (props) => {
 TooltipTrigger.displayName = "Tooltip.Trigger";
 
 // src/components/tooltip/defaults.ts
-var DEFAULT_VARIANT9 = "white";
+var DEFAULT_VARIANT11 = "white";
 var TooltipContent = (props) => {
   const theme = useComponentTheme("TooltipContent");
   const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT9 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT11 }) => ({
       "data-variant": variant
     })
   });
@@ -3549,8 +4849,8 @@ TooltipDescription.displayName = "Tooltip.Description";
 var TooltipArrow = (props) => {
   const theme = useComponentTheme("TooltipArrow");
   const { rootAttrs, rest } = composeRootAttrs(TooltipArrowBase, props, theme);
-  const { ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipArrow, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipArrow, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 TooltipArrow.displayName = "Tooltip.Arrow";
 
@@ -3634,6 +4934,44 @@ var Toaster = (props) => {
 };
 Toaster.displayName = "Toaster";
 
+// src/components/skeleton/base.ts
+var SkeletonBase = createComponentBase({
+  name: "Skeleton",
+  slots: ["root", "shimmer"],
+  classes: {
+    root: "tk-skeleton",
+    shimmer: "tk-skeleton-shimmer"
+  }
+});
+
+// src/components/skeleton/defaults.ts
+var DEFAULT_SHAPE = "rectangle";
+var DEFAULT_ANIMATION = "shimmer";
+var toCssSize = (value) => typeof value === "number" ? `${value}px` : value;
+var Skeleton = (props) => {
+  const theme = useComponentTheme("Skeleton");
+  const { rootAttrs, rest } = composeRootAttrs(SkeletonBase, props, theme, {
+    stateAttrs: ({ shape = DEFAULT_SHAPE, animation = DEFAULT_ANIMATION }) => ({
+      "data-type": shape,
+      "data-animation": animation
+    })
+  });
+  const { shape: _shape, animation: _animation, width, height, ref, style, ...nativeProps } = rest;
+  const { style: slotStyle, ...slotAttrs } = rootAttrs;
+  const shimmerSlotAttrs = buildSlotAttrs(SkeletonBase.getSlotProps("shimmer"), "shimmer", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const sizeVars = {
+    ...width !== void 0 && { "--tk-skeleton-width": toCssSize(width) },
+    ...height !== void 0 && { "--tk-skeleton-height": toCssSize(height) }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...nativeProps, ...slotAttrs, style: { ...style, ...slotStyle, ...sizeVars }, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { ...shimmerSlotAttrs, "aria-hidden": "true" }) });
+};
+Skeleton.displayName = "Skeleton";
+
 Object.defineProperty(exports, "createToaster", {
   enumerable: true,
   get: function () { return spar.createToaster; }
@@ -3647,14 +4985,20 @@ exports.Card = Card2;
 exports.Checkbox = Checkbox2;
 exports.Chip = Chip;
 exports.Dialog = Dialog2;
+exports.Divider = Divider;
 exports.Drawer = Drawer2;
+exports.Dropdown = Dropdown2;
 exports.Field = Field2;
 exports.Input = Input2;
 exports.Label = Label;
 exports.Popover = Popover2;
+exports.Progress = Progress2;
 exports.Radio = Radio2;
 exports.Select = Select2;
+exports.Skeleton = Skeleton;
+exports.Slider = Slider2;
 exports.Spinner = Spinner;
+exports.Stepper = Stepper2;
 exports.Switch = Switch2;
 exports.Table = Table;
 exports.Tabs = Tabs2;