@takeoff-ui/react-spar 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,12 +1,14 @@
-import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, createElement, useContext, Fragment as Fragment$1 } from 'react';
+import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, useId, createElement, useContext, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
+import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, DropdownMenu, DropdownMenuArrow, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuItem, DropdownMenuViewport, useDropdownMenuContext, DropdownMenuContent, DropdownMenuTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, useOptionalFieldContext, Select as Select$1, SelectArrow as SelectArrow$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, SelectViewport as SelectViewport$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
 export { createToaster } from '@turkish-technology/spar';
 import { clsx } from 'clsx';
 import { ChevronBottomIconOutlinedRounded } from '@takeoff-icons/react/chevron-bottom';
 import { ChevronTopIconOutlinedRounded } from '@takeoff-icons/react/chevron-top';
-import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
 import { ChevronRightIconOutlinedRounded } from '@takeoff-icons/react/chevron-right';
+import { CheckIconOutlinedRounded } from '@takeoff-icons/react/check';
+import { CloseIconOutlinedRounded } from '@takeoff-icons/react/close';
+import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
 import { SwapIconOutlinedRounded } from '@takeoff-icons/react/swap';
 import { SearchIconOutlinedRounded } from '@takeoff-icons/react/search';
 import { ArrowLeftIconOutlinedRounded } from '@takeoff-icons/react/arrow-left';
@@ -145,6 +147,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__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("polygon", { className: "tk-arrow-border", points: "0,0 5,5 10,0" }),
+  /* @__PURE__ */ 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({
@@ -195,6 +201,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] = useState(null);
+  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 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] = useState(defaultValue);
   const { current: isControlled } = useRef(controlledValue !== void 0);
@@ -568,7 +605,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, {
@@ -610,17 +646,11 @@ var BreadcrumbPage = (props) => {
   return /* @__PURE__ */ jsx(BreadcrumbPage$1, { ...spar, ref, ...rootAttrs, children });
 };
 BreadcrumbPage.displayName = "Breadcrumb.Page";
-var DEFAULT_SEPARATOR_ICON = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ 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 } = rest;
-  const fallback = variant === "chevron" ? DEFAULT_SEPARATOR_ICON : null;
-  return /* @__PURE__ */ jsx(BreadcrumbSeparator$1, { ...spar, ref, ...rootAttrs, children: children ?? fallback });
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme);
+  const { children, ref, ...spar } = rest;
+  return /* @__PURE__ */ jsx(BreadcrumbSeparator$1, { ...spar, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ jsx(ChevronRightIconOutlinedRounded, { "aria-hidden": "true", focusable: "false" }) });
 };
 BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
 
@@ -849,56 +879,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__ */ jsx(
-    Checkbox$1,
+  return /* @__PURE__ */ jsx(Checkbox$1, { ...sparProps, checked: sparChecked, defaultChecked: sparDefaultChecked, onChange: handleSparChange, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
+    CheckboxProvider,
     {
-      ...sparProps,
-      checked: sparChecked,
-      defaultChecked: sparDefaultChecked,
-      onChange: handleSparChange,
-      disabled,
-      readOnly,
-      required,
-      invalid,
-      ref,
-      ...rootAttrs,
-      children: (state) => /* @__PURE__ */ 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) => {
@@ -1399,6 +1420,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__ */ jsx("div", { ...nativeProps, ...rootAttrs, "aria-orientation": decorative ? void 0 : orientation, ref, children: hasRenderableDividerLabel(children) && /* @__PURE__ */ 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__ */ jsx(DropdownProvider, { value: { size, contentWidth }, children: /* @__PURE__ */ jsx(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__ */ jsx(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 } = 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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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",
@@ -1562,7 +1759,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;
@@ -1614,11 +1811,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 = useMemo(
     () => ({
       size,
@@ -2074,19 +2271,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
@@ -2233,8 +2430,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__ */ jsx(PopoverArrow$1, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsx(PopoverArrow$1, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 PopoverArrow.displayName = "Popover.Arrow";
 var PopoverClose = (props) => {
@@ -2255,6 +2452,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__ */ 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__ */ 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__ */ 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__ */ jsxs("svg", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", focusable: "false", viewBox: RING_VIEWBOX, ref, children: [
+        /* @__PURE__ */ jsx("circle", { ...railAttrs, cx: RING_CENTER, cy: RING_CENTER, r: RING_RADIUS }),
+        content
+      ] })
+    );
+  }
+  return /* @__PURE__ */ 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 = 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__ */ jsx(ProgressProvider, { value: { value, min, max, appearance, indeterminate }, children: /* @__PURE__ */ jsx(Component, { ...nativeProps, ...accessibilityAttrs, ...rootAttrs, ...dataAttrs, ref, children: children ?? /* @__PURE__ */ 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__ */ 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",
@@ -2285,6 +2669,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"],
@@ -2305,22 +2694,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__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -2371,44 +2765,29 @@ var SelectIndicator = (props) => {
   return /* @__PURE__ */ 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 } = useSelectContext();
-  const [triggerWidth, setTriggerWidth] = useState(null);
-  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 } = rest;
-  const widthStyle = 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__ */ jsx(SelectContent$1, { ...spar, ref, style: mergedStyle, ...rootAttrs, children });
+  const { style: rootStyle, ...rootRest } = rootAttrs;
+  const mergedStyle = widthStyle || rootStyle || userStyle ? { ...widthStyle, ...rootStyle, ...userStyle } : void 0;
+  return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, ...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 } = rest;
+  return /* @__PURE__ */ jsx(SelectViewport$1, { ...spar, ref, ...rootAttrs, children });
+};
+SelectViewport.displayName = "Select.Viewport";
 var SelectItem = (props) => {
   const theme = useComponentTheme("SelectItem");
   const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
@@ -2437,16 +2816,638 @@ var SelectSeparator = (props) => {
   return /* @__PURE__ */ jsx(SelectSeparator$1, { ...spar, 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__ */ jsx(SelectArrow$1, { ...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__ */ 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] = 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__ */ 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__ */ jsxs("span", { ...tooltipAttrs, "aria-hidden": "true", children: [
+        bubbleContent,
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SliderRange, {}),
+        values.map((_, index) => /* @__PURE__ */ jsx(SliderThumb, { index }, index))
+      ] })
+    }
+  );
+};
+SliderTrack.displayName = "Slider.Track";
+var warnedRanges2 = /* @__PURE__ */ new Set();
+var Slider = (props) => {
+  const theme = useComponentTheme("Slider");
+  const field = 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 = useRef(onValueChange);
+  onValueChangeRef.current = onValueChange;
+  const handleCommit = useCallback((next) => onValueChangeRef.current?.(toCommittedValue(next, range)), [range]);
+  const [rawValues = initialValues, setValues] = useControllableState(controlledValues, initialValues, handleCommit);
+  const values = useMemo(() => normalizeValues(toCommittedValue(rawValues, range), range, bounds), [rawValues, range, bounds.min, bounds.max, bounds.step]);
+  const onValueChangeEndRef = useRef(onValueChangeEnd);
+  onValueChangeEndRef.current = onValueChangeEnd;
+  const emitChangeEnd = useCallback((vals) => onValueChangeEndRef.current?.(toCommittedValue(vals, range)), [range]);
+  const emitChangeEndRef = useRef(emitChangeEnd);
+  emitChangeEndRef.current = emitChangeEnd;
+  const [draggingIndex, setDraggingIndex] = useState(null);
+  const trackRef = useRef(null);
+  const thumbRefs = useRef([]);
+  const thumbDisabledRef = useRef([]);
+  const gestureStartRef = useRef(null);
+  const dragPointerRef = useRef(null);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  thumbDisabledRef.current.length = values.length;
+  const valueFromPoint = 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 = useCallback(
+    (next) => {
+      if (!valuesEqual(next, valuesRef.current)) setValues(next);
+    },
+    [setValues]
+  );
+  const setThumbValue = 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 = 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]
+  );
+  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]);
+  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__ */ 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__ */ jsxs(Component, { ...wrapperProps, ...groupAttrs, ...rootAttrs, ref, children: [
+        children ?? /* @__PURE__ */ 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__ */ jsx("input", { type: "hidden", name: rangeInputName(name, index, values.length), value: entry, form }, index))
+        ) : /* @__PURE__ */ 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__ */ jsx("div", { ...nativeProps, ...rootAttrs, "aria-hidden": "true", ref, children: percents.map((percent, index) => /* @__PURE__ */ 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__ */ 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
@@ -2460,10 +3461,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) => {
@@ -2500,13 +3501,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,
@@ -2516,12 +3517,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__ */ jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ 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 = useRef(onActiveChange);
+  onActiveChangeRef.current = onActiveChange;
+  const stableOnActiveChange = useCallback((index) => {
+    onActiveChangeRef.current?.(index);
+  }, []);
+  const onStepClickRef = useRef(onStepClick);
+  onStepClickRef.current = onStepClick;
+  const stableOnStepClick = useCallback((detail) => {
+    onStepClickRef.current?.(detail);
+  }, []);
+  const [activeValue, setActive] = useControllableState(controlledActive, defaultActive, stableOnActiveChange);
+  const active = activeValue ?? DEFAULT_ACTIVE;
+  const [stepsMeta, setStepsMeta] = useState(/* @__PURE__ */ new Map());
+  const { items, renderStepsMeta } = useMemo(() => {
+    const meta = /* @__PURE__ */ new Map();
+    let stepIndex = 0;
+    const items2 = Children.toArray(children).map((child) => {
+      if (!isValidElement(child)) return child;
+      const index = stepIndex++;
+      const { error = false, disabled = false, isClickable = true } = child.props;
+      meta.set(index, { error, disabled, isClickable });
+      return /* @__PURE__ */ jsx(StepperItemIndexProvider, { value: { index }, children: child }, child.key ?? index);
+    });
+    return { items: items2, renderStepsMeta: meta };
+  }, [children]);
+  const registerStep = 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 = 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__ */ jsx(StepperProvider, { value: contextValue, children: /* @__PURE__ */ 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__ */ 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;
+  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] = useState();
+  const registerDescription = useCallback((id) => {
+    setDescriptionId(id);
+    return () => {
+      setDescriptionId((current) => current === id ? void 0 : current);
+    };
+  }, []);
+  const itemContextValue = 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__ */ jsx(CloseIconOutlinedRounded, {});
+    } else if (status === "completed") {
+      indicatorContent = /* @__PURE__ */ jsx(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__ */ jsx(StepperItemProvider, { value: itemContextValue, children: /* @__PURE__ */ jsxs(Component, { ...nativeProps, ...rootAttrs, ref, children: [
+    mode !== "compact" && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...railAttrs }),
+    /* @__PURE__ */ 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__ */ jsx("span", { "aria-hidden": "true", ...indicatorAttrs, children: indicatorContent }),
+          /* @__PURE__ */ jsx("span", { ...contentAttrs, children }),
+          statusLabel ? /* @__PURE__ */ 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 = useId();
+  const id = idProp ?? autoId;
+  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__ */ 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",
@@ -2539,12 +3835,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
     })
@@ -2555,13 +3851,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__ */ jsx(Switch$1, { ...sparProps, invalid, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Switch$1, { ...sparProps, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
     SwitchProvider,
     {
       value: {
@@ -2667,7 +3967,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;
@@ -3193,7 +4493,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,
@@ -3207,7 +4507,7 @@ var Table = (props) => {
     getRowId,
     manual = false,
     loading = false,
-    size = DEFAULT_SIZE12,
+    size = DEFAULT_SIZE16,
     striped = false,
     bordered = false,
     stickyHeader = false,
@@ -3407,19 +4707,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__ */ jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsx(Tabs$1, { ...sparProps, ...rootAttrs, ref, children }) });
 };
 Tabs.displayName = "Tabs";
@@ -3519,11 +4819,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
     })
   });
@@ -3548,8 +4848,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__ */ jsx(TooltipArrow$1, { ...sparProps, ...rootAttrs, ref });
+  const { ref, children, ...sparProps } = rest;
+  return /* @__PURE__ */ jsx(TooltipArrow$1, { ...sparProps, ...rootAttrs, ref, children: children ?? renderPointerArrow() });
 };
 TooltipArrow.displayName = "Tooltip.Arrow";
 
@@ -3633,4 +4933,42 @@ var Toaster = (props) => {
 };
 Toaster.displayName = "Toaster";
 
-export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Drawer2 as Drawer, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Radio2 as Radio, Select2 as Select, Spinner, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, getExportRows, useComponentTheme, useTheme };
+// 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__ */ jsx("span", { "aria-hidden": "true", ...nativeProps, ...slotAttrs, style: { ...style, ...slotStyle, ...sizeVars }, ref, children: /* @__PURE__ */ jsx("span", { ...shimmerSlotAttrs, "aria-hidden": "true" }) });
+};
+Skeleton.displayName = "Skeleton";
+
+export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Divider, Drawer2 as Drawer, Dropdown2 as Dropdown, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Progress2 as Progress, Radio2 as Radio, Select2 as Select, Skeleton, Slider2 as Slider, Spinner, Stepper2 as Stepper, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, getExportRows, useComponentTheme, useTheme };