@takeoff-ui/react-spar 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -4,6 +4,17 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 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 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');
+var arrowRight = require('@takeoff-icons/react/arrow-right');
+var chevronLeft = require('@takeoff-icons/react/chevron-left');
 
 // src/provider.tsx
 
@@ -54,6 +65,12 @@ var useComponentTheme = (componentName) => {
   const context = react.useContext(TakeoffSparContext);
   return context?.components?.[componentName];
 };
+
+// src/core/blockDismiss.ts
+var blockDismiss = (handler) => (event) => {
+  event.preventDefault();
+  handler?.(event);
+};
 var buildSlotAttrs = (canonicalAttrs, slotKey, layers = {}) => {
   const { themeSlotProps, themeClassNames, themeClassName, instanceSlotProps, instanceClassNames } = layers;
   const themeForSlot = themeSlotProps?.[slotKey];
@@ -96,6 +113,9 @@ var composeRootAttrs = (base, props, theme, options) => {
     rest
   };
 };
+
+// src/core/isRenderableNode.ts
+var isRenderableNode = (node) => node !== null && node !== void 0 && node !== "" && typeof node !== "boolean";
 var toDataSlotName = (slot) => slot.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 var createComponentBase = (config) => {
   const { name, slots, classes, defaultProps = {} } = config;
@@ -122,6 +142,16 @@ var createComponentBase = (config) => {
     resolveProps
   };
 };
+var DEFAULT_DISCLOSURE_EXPAND_ICON = /* @__PURE__ */ jsxRuntime.jsx(chevronBottom.ChevronBottomIconOutlinedRounded, {});
+var DEFAULT_DISCLOSURE_COLLAPSE_ICON = /* @__PURE__ */ jsxRuntime.jsx(chevronTop.ChevronTopIconOutlinedRounded, {});
+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({
@@ -172,6 +202,52 @@ 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);
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = react.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
 
 // src/components/accordion/context.ts
 var [AccordionProvider, useAccordionOwnContext] = createSafeContext("AccordionProvider");
@@ -224,15 +300,13 @@ var AccordionHeader = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.AccordionHeader, { ...spar$1, level, ...rootAttrs, ref, children });
 };
 AccordionHeader.displayName = "Accordion.Header";
-var DEFAULT_EXPAND_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", 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: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var DEFAULT_COLLAPSE_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", 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: "M4 10L8 6L12 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 var AccordionIndicator = (props) => {
   const theme = useComponentTheme("AccordionIndicator");
   const { isOpen } = spar.useAccordionItemContext();
   const Component = props.as ?? "span";
   const { rootAttrs, rest } = composeRootAttrs(AccordionIndicatorBase, props, theme);
   const { as: _as, children, ref, ...rendered } = rest;
-  const resolved = typeof children === "function" ? children({ isOpen }) : children ?? (isOpen ? DEFAULT_COLLAPSE_ICON : DEFAULT_EXPAND_ICON);
+  const resolved = resolveDisclosureIndicator(children, isOpen);
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
 };
 AccordionIndicator.displayName = "Accordion.Indicator";
@@ -289,6 +363,161 @@ var Accordion2 = Object.assign(Accordion, {
   Content: AccordionContent
 });
 
+// src/components/alert/base.ts
+var AlertBase = createComponentBase({
+  name: "Alert",
+  slots: ["root"],
+  classes: { root: "tk-alert" }
+});
+var AlertContentBase = createComponentBase({
+  name: "AlertContent",
+  slots: ["root"],
+  classes: { root: "tk-alert-content" }
+});
+var AlertTitleBase = createComponentBase({
+  name: "AlertTitle",
+  slots: ["root"],
+  classes: { root: "tk-alert-title" }
+});
+var AlertDescriptionBase = createComponentBase({
+  name: "AlertDescription",
+  slots: ["root"],
+  classes: { root: "tk-alert-description" }
+});
+var AlertActionsBase = createComponentBase({
+  name: "AlertActions",
+  slots: ["root"],
+  classes: { root: "tk-alert-actions" }
+});
+var AlertCloseBase = createComponentBase({
+  name: "AlertClose",
+  slots: ["root"],
+  classes: { root: "tk-alert-close" }
+});
+
+// src/components/alert/context.ts
+var [AlertProvider, useAlertContext] = createSafeContext("AlertProvider");
+
+// src/components/alert/defaults.ts
+var DEFAULT_VARIANT = "neutral";
+var DEFAULT_APPEARANCE = "filled";
+var DEFAULT_CLOSE_LABEL = "Close";
+var Alert = (props) => {
+  const theme = useComponentTheme("Alert");
+  const { rootAttrs, rest } = composeRootAttrs(AlertBase, props, theme, {
+    stateAttrs: ({ variant = DEFAULT_VARIANT, appearance = DEFAULT_APPEARANCE }) => ({
+      "data-variant": variant,
+      "data-type": appearance
+    })
+  });
+  const { as, variant: _variant, appearance: _appearance, onClose, children, ref, role = "status", ...alertProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(AlertProvider, { value: { onClose }, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...alertProps, ref, role, ...rootAttrs, children }) });
+};
+Alert.displayName = "Alert";
+var AlertActions = (props) => {
+  const theme = useComponentTheme("AlertActions");
+  const { rootAttrs, rest } = composeRootAttrs(AlertActionsBase, props, theme);
+  const { as, children, ref, ...actionsProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...actionsProps, ref, ...rootAttrs, children });
+};
+AlertActions.displayName = "Alert.Actions";
+var baseSvgProps = {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "1em",
+  "height": "1em",
+  "viewBox": "0 0 24 24",
+  "fill": "none",
+  "stroke": "currentColor",
+  "strokeWidth": 2,
+  "strokeLinecap": "round",
+  "strokeLinejoin": "round",
+  "focusable": false,
+  "aria-hidden": true
+};
+var filledSvgProps = {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "1em",
+  "height": "1em",
+  "viewBox": "0 0 24 24",
+  "fill": "currentColor",
+  "focusable": false,
+  "aria-hidden": true
+};
+var PlaceholderChevronDown = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-down", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
+var PlaceholderChevronUp = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-up", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }) });
+var PlaceholderClose = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseSvgProps, "data-placeholder-icon": "close", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var PlaceholderInfo = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "info", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(2 2) scale(1.714)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 8.75C5.5125 8.75 5.25 8.4875 5.25 8.16667V5.83333C5.25 5.5125 5.5125 5.25 5.83333 5.25C6.15417 5.25 6.41667 5.5125 6.41667 5.83333V8.16667C6.41667 8.4875 6.15417 8.75 5.83333 8.75ZM6.41667 4.08333H5.25V2.91667H6.41667V4.08333Z" }) }) });
+var PlaceholderError = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "error", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(2 2) scale(1.714)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.83333 0C2.61333 0 0 2.61333 0 5.83333C0 9.05333 2.61333 11.6667 5.83333 11.6667C9.05333 11.6667 11.6667 9.05333 11.6667 5.83333C11.6667 2.61333 9.05333 0 5.83333 0ZM5.83333 2.91667C6.15417 2.91667 6.41667 3.17917 6.41667 3.5V5.83333C6.41667 6.15417 6.15417 6.41667 5.83333 6.41667C5.5125 6.41667 5.25 6.15417 5.25 5.83333V3.5C5.25 3.17917 5.5125 2.91667 5.83333 2.91667ZM5.25 7.58333H6.41667V8.75H5.25V7.58333Z" }) }) });
+var PlaceholderCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
+var PlaceholderRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
+var PlaceholderEye = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(1 4.5) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.16667 1.66667C12.325 1.66667 15.1417 3.44167 16.5167 6.25C15.1417 9.05833 12.325 10.8333 9.16667 10.8333C6.00833 10.8333 3.19167 9.05833 1.81667 6.25C3.19167 3.44167 6.00833 1.66667 9.16667 1.66667ZM9.16667 0C5 0 1.44167 2.59167 0 6.25C1.44167 9.90833 5 12.5 9.16667 12.5C13.3333 12.5 16.8917 9.90833 18.3333 6.25C16.8917 2.59167 13.3333 0 9.16667 0ZM9.16667 4.16667C10.3167 4.16667 11.25 5.1 11.25 6.25C11.25 7.4 10.3167 8.33333 9.16667 8.33333C8.01667 8.33333 7.08333 7.4 7.08333 6.25C7.08333 5.1 8.01667 4.16667 9.16667 4.16667ZM9.16667 2.5C7.1 2.5 5.41667 4.18333 5.41667 6.25C5.41667 8.31667 7.1 10 9.16667 10C11.2333 10 12.9167 8.31667 12.9167 6.25C12.9167 4.18333 11.2333 2.5 9.16667 2.5Z" }) }) });
+var PlaceholderEyeOff = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye-off", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "translate(1 2.42) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.16667 2.95833C12.325 2.95833 15.1417 4.73333 16.5167 7.54167C16.025 8.55833 15.3333 9.43333 14.5083 10.1417L15.6833 11.3167C16.8417 10.2917 17.7583 9.00833 18.3333 7.54167C16.8917 3.88333 13.3333 1.29167 9.16667 1.29167C8.10833 1.29167 7.09167 1.45833 6.13333 1.76667L7.50833 3.14167C8.05 3.03333 8.6 2.95833 9.16667 2.95833ZM8.275 3.90833L10 5.63333C10.475 5.84167 10.8583 6.225 11.0667 6.7L12.7917 8.425C12.8583 8.14167 12.9083 7.84167 12.9083 7.53333C12.9167 5.46667 11.2333 3.79167 9.16667 3.79167C8.85833 3.79167 8.56667 3.83333 8.275 3.90833ZM0.841667 1.18333L3.075 3.41667C1.71667 4.48333 0.641667 5.9 0 7.54167C1.44167 11.2 5 13.7917 9.16667 13.7917C10.4333 13.7917 11.65 13.55 12.7667 13.1083L15.6167 15.9583L16.7917 14.7833L2.01667 0L0.841667 1.18333ZM7.09167 7.43333L9.26667 9.60833C9.23333 9.61667 9.2 9.625 9.16667 9.625C8.01667 9.625 7.08333 8.69167 7.08333 7.54167C7.08333 7.5 7.09167 7.475 7.09167 7.43333ZM4.25833 4.6L5.71667 6.05833C5.525 6.51667 5.41667 7.01667 5.41667 7.54167C5.41667 9.60833 7.1 11.2917 9.16667 11.2917C9.69167 11.2917 10.1917 11.1833 10.6417 10.9917L11.4583 11.8083C10.725 12.0083 9.95833 12.125 9.16667 12.125C6.00833 12.125 3.19167 10.35 1.81667 7.54167C2.4 6.35 3.25 5.36667 4.25833 4.6Z" }) }) });
+var AlertClose = (props) => {
+  const theme = useComponentTheme("AlertClose");
+  const { onClose } = useAlertContext("Alert.Close");
+  const { rootAttrs, rest } = composeRootAttrs(AlertCloseBase, props, theme);
+  const { as, children, onClick, ref, type, "aria-label": ariaLabel, ...closeProps } = rest;
+  const { onClick: slotOnClick, ...closeRootAttrs } = rootAttrs;
+  const Component = as ?? "button";
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+    onClose?.();
+  };
+  const hasCustomChildren = isRenderableNode(children);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...closeProps,
+      ref,
+      type: as ? type : type ?? "button",
+      "aria-label": ariaLabel ?? (hasCustomChildren ? void 0 : DEFAULT_CLOSE_LABEL),
+      onClick: handleClick,
+      ...closeRootAttrs,
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {})
+    }
+  );
+};
+AlertClose.displayName = "Alert.Close";
+var AlertContent = (props) => {
+  const theme = useComponentTheme("AlertContent");
+  const { rootAttrs, rest } = composeRootAttrs(AlertContentBase, props, theme);
+  const { as, children, ref, ...contentProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...contentProps, ref, ...rootAttrs, children });
+};
+AlertContent.displayName = "Alert.Content";
+var AlertDescription = (props) => {
+  const theme = useComponentTheme("AlertDescription");
+  const { rootAttrs, rest } = composeRootAttrs(AlertDescriptionBase, props, theme);
+  const { as, children, ref, ...descriptionProps } = rest;
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...descriptionProps, ref, ...rootAttrs, children });
+};
+AlertDescription.displayName = "Alert.Description";
+var AlertTitle = (props) => {
+  const theme = useComponentTheme("AlertTitle");
+  const { rootAttrs, rest } = composeRootAttrs(AlertTitleBase, props, theme);
+  const { as, level = 5, children, ref, ...titleProps } = rest;
+  const Component = as ?? `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...titleProps, ref, ...rootAttrs, children });
+};
+AlertTitle.displayName = "Alert.Title";
+
+// src/components/alert/index.ts
+var Alert2 = Object.assign(Alert, {
+  Content: AlertContent,
+  Title: AlertTitle,
+  Description: AlertDescription,
+  Actions: AlertActions,
+  Close: AlertClose
+});
+
 // src/components/badge/base.ts
 var BadgeBase = createComponentBase({
   name: "Badge",
@@ -301,13 +530,13 @@ var BadgeBase = createComponentBase({
 });
 
 // src/components/badge/defaults.ts
-var DEFAULT_VARIANT = "primary";
-var DEFAULT_APPEARANCE = "filled";
+var DEFAULT_VARIANT2 = "primary";
+var DEFAULT_APPEARANCE2 = "filled";
 var DEFAULT_SIZE2 = "base";
 var Badge = (props) => {
   const theme = useComponentTheme("Badge");
   const { rootAttrs, rest } = composeRootAttrs(BadgeBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT, appearance = DEFAULT_APPEARANCE, size = DEFAULT_SIZE2, rounded, dot: dot2 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT2, appearance = DEFAULT_APPEARANCE2, size = DEFAULT_SIZE2, rounded, dot: dot2 }) => ({
       "data-variant": variant,
       "data-type": appearance,
       "data-size": dot2 ? void 0 : size,
@@ -332,13 +561,109 @@ var Badge = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, ref });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...nativeProps, ...rootAttrs, ref, children: [
-    startContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: startContent }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
-    endContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: endContent })
+    isRenderableNode(startContent) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: startContent }),
+    isRenderableNode(children) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
+    isRenderableNode(endContent) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: endContent })
   ] });
 };
 Badge.displayName = "Badge";
 
+// src/components/breadcrumb/base.ts
+var BreadcrumbBase = createComponentBase({
+  name: "Breadcrumb",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb" }
+});
+var BreadcrumbListBase = createComponentBase({
+  name: "BreadcrumbList",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb-list" }
+});
+var BreadcrumbItemBase = createComponentBase({
+  name: "BreadcrumbItem",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb-item" }
+});
+var BreadcrumbLinkBase = createComponentBase({
+  name: "BreadcrumbLink",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb-link" }
+});
+var BreadcrumbPageBase = createComponentBase({
+  name: "BreadcrumbPage",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb-page" }
+});
+var BreadcrumbSeparatorBase = createComponentBase({
+  name: "BreadcrumbSeparator",
+  slots: ["root"],
+  classes: { root: "tk-breadcrumb-separator" }
+});
+
+// src/components/breadcrumb/context.ts
+var [BreadcrumbProvider] = createSafeContext("BreadcrumbProvider");
+
+// src/components/breadcrumb/defaults.ts
+var DEFAULT_SIZE3 = "base";
+var DEFAULT_TYPE2 = "basic";
+var Breadcrumb = (props) => {
+  const theme = useComponentTheme("Breadcrumb");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbBase, props, theme, {
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE3, type: type2 = DEFAULT_TYPE2 }) => ({
+      "data-size": size2,
+      "data-type": type2
+    })
+  });
+  const { size = DEFAULT_SIZE3, type = DEFAULT_TYPE2, children, ref, ...sparProps } = rest;
+  const contextValue = react.useMemo(() => ({ size, type }), [size, type]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Breadcrumb, { ...sparProps, ref, ...rootAttrs, children }) });
+};
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = (props) => {
+  const theme = useComponentTheme("BreadcrumbList");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbListBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbList, { ...spar$1, ref, ...rootAttrs, children });
+};
+BreadcrumbList.displayName = "Breadcrumb.List";
+var BreadcrumbItem = (props) => {
+  const theme = useComponentTheme("BreadcrumbItem");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbItemBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbItem, { ...spar$1, ref, ...rootAttrs, children });
+};
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+var BreadcrumbLink = (props) => {
+  const theme = useComponentTheme("BreadcrumbLink");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbLinkBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbLink, { ...spar$1, ref, ...rootAttrs, children });
+};
+BreadcrumbLink.displayName = "Breadcrumb.Link";
+var BreadcrumbPage = (props) => {
+  const theme = useComponentTheme("BreadcrumbPage");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbPageBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.BreadcrumbPage, { ...spar$1, ref, ...rootAttrs, children });
+};
+BreadcrumbPage.displayName = "Breadcrumb.Page";
+var BreadcrumbSeparator = (props) => {
+  const theme = useComponentTheme("BreadcrumbSeparator");
+  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";
+
+// src/components/breadcrumb/index.ts
+var Breadcrumb2 = Object.assign(Breadcrumb, {
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator
+});
+
 // src/components/button/base.ts
 var ButtonBase = createComponentBase({
   name: "Button",
@@ -352,9 +677,9 @@ var ButtonBase = createComponentBase({
 });
 
 // src/components/button/defaults.ts
-var DEFAULT_VARIANT2 = "primary";
-var DEFAULT_APPEARANCE2 = "filled";
-var DEFAULT_SIZE3 = "base";
+var DEFAULT_VARIANT3 = "primary";
+var DEFAULT_APPEARANCE3 = "filled";
+var DEFAULT_SIZE4 = "base";
 var Button = (props) => {
   const theme = useComponentTheme("Button");
   const { rootAttrs, rest } = composeRootAttrs(ButtonBase, props, theme, {
@@ -362,9 +687,9 @@ var Button = (props) => {
     // Spar's Button already emits them (see SparButton dataAttributes), so
     // setting them again would create two sources of truth that drift the
     // moment Spar renames or extends its vocabulary.
-    stateAttrs: ({ variant = DEFAULT_VARIANT2, appearance = DEFAULT_APPEARANCE2, size = DEFAULT_SIZE3, rounded, startContent: startContent2, endContent: endContent2, children: children2 }) => {
-      const hasIcon = !!(startContent2 || endContent2);
-      const isIconOnly = hasIcon && !children2;
+    stateAttrs: ({ variant = DEFAULT_VARIANT3, appearance = DEFAULT_APPEARANCE3, size = DEFAULT_SIZE4, rounded, startContent: startContent2, endContent: endContent2, children: children2 }) => {
+      const hasIcon = isRenderableNode(startContent2) || isRenderableNode(endContent2);
+      const isIconOnly = hasIcon && !isRenderableNode(children2);
       return {
         "data-variant": variant,
         "data-type": appearance,
@@ -382,7 +707,8 @@ var Button = (props) => {
     appearance: _appearance,
     size: _size,
     rounded: _rounded,
-    isLoading = false,
+    loading = false,
+    pressed,
     startContent,
     endContent,
     disabled = false,
@@ -408,15 +734,122 @@ var Button = (props) => {
     instanceSlotProps: props.slotProps,
     instanceClassNames: props.classNames
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs(spar.Button, { ...sparProps, disabled, isLoading, ref, ...rootAttrs, children: [
-    isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...spinnerSlotAttrs }),
-    startContent && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: startContent }),
-    children && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
-    endContent && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: endContent })
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.Button, { ...sparProps, disabled, isLoading: loading, isPressed: pressed, ref, ...rootAttrs, children: [
+    loading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...spinnerSlotAttrs }),
+    isRenderableNode(startContent) && !loading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: startContent }),
+    isRenderableNode(children) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
+    isRenderableNode(endContent) && !loading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: endContent })
   ] });
 };
 Button.displayName = "Button";
 
+// src/components/card/base.ts
+var CardBase = createComponentBase({
+  name: "Card",
+  slots: ["root"],
+  classes: { root: "tk-card" }
+});
+var CardHeaderBase = createComponentBase({
+  name: "CardHeader",
+  slots: ["root"],
+  classes: { root: "tk-card-header" }
+});
+var CardTitleBase = createComponentBase({
+  name: "CardTitle",
+  slots: ["root"],
+  classes: { root: "tk-card-title" }
+});
+var CardDescriptionBase = createComponentBase({
+  name: "CardDescription",
+  slots: ["root"],
+  classes: { root: "tk-card-description" }
+});
+var CardBodyBase = createComponentBase({
+  name: "CardBody",
+  slots: ["root"],
+  classes: { root: "tk-card-body" }
+});
+var CardFooterBase = createComponentBase({
+  name: "CardFooter",
+  slots: ["root"],
+  classes: { root: "tk-card-footer" }
+});
+var Card = (props) => {
+  const theme = useComponentTheme("Card");
+  const { rootAttrs, rest } = composeRootAttrs(CardBase, props, theme);
+  const { as, children, ref, ...cardProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...cardProps, ref, ...rootAttrs, children });
+};
+Card.displayName = "Card";
+
+// src/components/card/defaults.ts
+var DEFAULT_HEADER_TYPE = "basic";
+var DEFAULT_FOOTER_TYPE = "basic";
+var CardHeader = (props) => {
+  const theme = useComponentTheme("CardHeader");
+  const { rootAttrs, rest } = composeRootAttrs(CardHeaderBase, props, theme, {
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE }) => ({
+      "data-header-type": headerType
+    })
+  });
+  const { as, headerType: _headerType, children, ref, ...headerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...headerProps, ref, ...rootAttrs, children });
+};
+CardHeader.displayName = "CardHeader";
+var CardTitle = (props) => {
+  const theme = useComponentTheme("CardTitle");
+  const { rootAttrs, rest } = composeRootAttrs(CardTitleBase, props, theme, {
+    // `data-level` reflects the rendered heading element, so emit it only when
+    // `level` actually drives the element — i.e. when `as` is not overriding it.
+    stateAttrs: ({ as: as2, level: level2 = 5 }) => ({
+      "data-level": as2 ? void 0 : String(level2)
+    })
+  });
+  const { as, level = 5, children, ref, ...titleProps } = rest;
+  const Component = as ?? `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...titleProps, ref, ...rootAttrs, children });
+};
+CardTitle.displayName = "CardTitle";
+var CardDescription = (props) => {
+  const theme = useComponentTheme("CardDescription");
+  const { rootAttrs, rest } = composeRootAttrs(CardDescriptionBase, props, theme);
+  const { as, children, ref, ...descriptionProps } = rest;
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...descriptionProps, ref, ...rootAttrs, children });
+};
+CardDescription.displayName = "CardDescription";
+var CardBody = (props) => {
+  const theme = useComponentTheme("CardBody");
+  const { rootAttrs, rest } = composeRootAttrs(CardBodyBase, props, theme);
+  const { as, children, ref, ...bodyProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...bodyProps, ref, ...rootAttrs, children });
+};
+CardBody.displayName = "CardBody";
+var CardFooter = (props) => {
+  const theme = useComponentTheme("CardFooter");
+  const { rootAttrs, rest } = composeRootAttrs(CardFooterBase, props, theme, {
+    stateAttrs: ({ footerType = DEFAULT_FOOTER_TYPE }) => ({
+      "data-footer-type": footerType
+    })
+  });
+  const { as, footerType: _footerType, children, ref, ...footerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...footerProps, ref, ...rootAttrs, children });
+};
+CardFooter.displayName = "CardFooter";
+
+// src/components/card/index.ts
+var Card2 = Object.assign(Card, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Body: CardBody,
+  Footer: CardFooter
+});
+
 // src/components/checkbox/base.ts
 var CheckboxBase = createComponentBase({
   name: "Checkbox",
@@ -434,14 +867,12 @@ var CheckboxBase = createComponentBase({
 var [CheckboxProvider, useCheckboxOwnContext] = createSafeContext("CheckboxProvider");
 
 // src/components/checkbox/defaults.ts
-var DEFAULT_SIZE4 = "base";
-var DEFAULT_TYPE2 = "default";
+var DEFAULT_SIZE5 = "base";
 var Checkbox = (props) => {
   const theme = useComponentTheme("Checkbox");
   const { rootAttrs, rest } = composeRootAttrs(CheckboxBase, props, theme, {
-    stateAttrs: ({ size = DEFAULT_SIZE4, type = DEFAULT_TYPE2 }) => ({
-      "data-size": size,
-      "data-type": type
+    stateAttrs: ({ size = DEFAULT_SIZE5 }) => ({
+      "data-size": size
     })
   });
   const { classNames, slotProps } = props;
@@ -449,74 +880,49 @@ 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,
-    type: _type,
-    // `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 baseSvgProps = {
-  "xmlns": "http://www.w3.org/2000/svg",
-  "width": "1em",
-  "height": "1em",
-  "viewBox": "0 0 24 24",
-  "fill": "none",
-  "stroke": "currentColor",
-  "strokeWidth": 2,
-  "strokeLinecap": "round",
-  "strokeLinejoin": "round",
-  "focusable": false,
-  "aria-hidden": true
-};
-var PlaceholderCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
-var PlaceholderRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
 var CheckboxIndicator = (props) => {
   const theme = useComponentTheme("Checkbox");
   const { classNames, slotProps, checked, indeterminate } = useCheckboxOwnContext("Checkbox.Indicator");
@@ -543,19 +949,141 @@ var Checkbox2 = Object.assign(Checkbox, {
   Indicator: CheckboxIndicator
 });
 
+// src/components/chip/base.ts
+var ChipBase = createComponentBase({
+  name: "Chip",
+  slots: ["root", "label", "remove"],
+  classes: {
+    root: "tk-chip",
+    label: "tk-chip-label",
+    remove: "tk-chip-remove"
+  }
+});
+
+// src/components/chip/defaults.ts
+var DEFAULT_VARIANT4 = "primary";
+var DEFAULT_APPEARANCE4 = "filled";
+var DEFAULT_SIZE6 = "base";
+var DEFAULT_REMOVE_LABEL = "Remove";
+var Chip = (props) => {
+  const theme = useComponentTheme("Chip");
+  const [dismissed, setDismissed] = react.useState(false);
+  const { rootAttrs, rest } = composeRootAttrs(ChipBase, props, theme, {
+    stateAttrs: ({ variant = DEFAULT_VARIANT4, appearance = DEFAULT_APPEARANCE4, size = DEFAULT_SIZE6, clickable: clickable2 = false, disabled: disabled2 = false, removable: removable2 = false }) => ({
+      "data-variant": variant,
+      "data-type": appearance,
+      "data-size": size,
+      "data-clickable": clickable2 ? "" : void 0,
+      "data-disabled": disabled2 ? "" : void 0,
+      "data-removable": removable2 ? "" : void 0
+    })
+  });
+  const {
+    onClick: rootSlotOnClick,
+    onKeyDown: rootSlotOnKeyDown,
+    ...chipRootAttrs
+  } = rootAttrs;
+  const {
+    variant: _variant,
+    appearance: _appearance,
+    size: _size,
+    autoDismiss = true,
+    clickable = false,
+    disabled = false,
+    removable = false,
+    onRemove,
+    children,
+    ref,
+    role,
+    tabIndex,
+    onClick,
+    ...nativeProps
+  } = rest;
+  const labelSlotAttrs = buildSlotAttrs(ChipBase.getSlotProps("label"), "label", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const removeSlotAttrs = buildSlotAttrs(ChipBase.getSlotProps("remove"), "remove", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const { onClick: removeSlotOnClick, ...removeButtonAttrs } = removeSlotAttrs;
+  const resolvedTabIndex = clickable ? disabled ? -1 : tabIndex ?? 0 : tabIndex;
+  const resolvedRole = role ?? (clickable ? "button" : void 0);
+  if (dismissed) {
+    return null;
+  }
+  const remove = () => {
+    if (disabled || !removable) return;
+    onRemove?.();
+    if (!autoDismiss) return;
+    setDismissed(true);
+  };
+  const handleRemoveClick = (event) => {
+    if (clickable) event.stopPropagation();
+    removeSlotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    remove();
+  };
+  const handleRootClick = (event) => {
+    if (disabled) return;
+    onClick?.(event);
+    rootSlotOnClick?.(event);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    nativeProps.onKeyDown?.(event);
+    rootSlotOnKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    if (clickable && removable && (event.key === "Backspace" || event.key === "Delete")) {
+      event.preventDefault();
+      remove();
+      return;
+    }
+    if (clickable && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ...nativeProps,
+      ...chipRootAttrs,
+      "aria-disabled": disabled || void 0,
+      onClick: handleRootClick,
+      onKeyDown: handleKeyDown,
+      ref,
+      role: resolvedRole,
+      tabIndex: resolvedTabIndex,
+      children: [
+        isRenderableNode(children) && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
+        removable && // The icon-only remove control needs an accessible name. Default it,
+        // but let `slotProps.remove` (spread after) override via `aria-label`.
+        /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {}) })
+      ]
+    }
+  );
+};
+Chip.displayName = "Chip";
+
 // src/components/drawer/context.ts
 var [DrawerProvider, useDrawerOwnContext] = createSafeContext("DrawerProvider");
 
 // src/components/drawer/defaults.ts
 var DEFAULT_PLACEMENT = "right";
-var DEFAULT_HEADER_TYPE = "basic";
-var DEFAULT_FOOTER_TYPE = "basic";
+var DEFAULT_HEADER_TYPE2 = "basic";
+var DEFAULT_FOOTER_TYPE2 = "basic";
 var DEFAULT_INTENSITY = "base";
 var Drawer = (props) => {
   const theme = useComponentTheme("Drawer");
   const merged = { ...theme?.defaultProps, ...props };
-  const { placement = DEFAULT_PLACEMENT, dismissable = true, disabled = false, children, ...sparProps } = merged;
-  return /* @__PURE__ */ jsxRuntime.jsx(DrawerProvider, { value: { placement, dismissable }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, disabled, forceMount: true, children }) });
+  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, disabled, forceMount: true, children }) });
 };
 Drawer.displayName = "Drawer";
 
@@ -600,10 +1128,10 @@ var DrawerFooterBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-drawer-footer" }
 });
-var DrawerCloseButtonBase = createComponentBase({
-  name: "DrawerCloseButton",
+var DrawerCloseBase = createComponentBase({
+  name: "DrawerClose",
   slots: ["root"],
-  classes: { root: "tk-drawer-close-button" }
+  classes: { root: "tk-drawer-close" }
 });
 var DrawerTriggerBase = createComponentBase({
   name: "DrawerTrigger",
@@ -616,40 +1144,41 @@ var DrawerTrigger = (props) => {
   const { children, ref, ...triggerProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTrigger, { ...triggerProps, ref, ...rootAttrs, children });
 };
-DrawerTrigger.displayName = "DrawerTrigger";
+DrawerTrigger.displayName = "Drawer.Trigger";
 var DrawerOverlay = (props) => {
   const theme = useComponentTheme("DrawerOverlay");
   const { rootAttrs, rest } = composeRootAttrs(DrawerOverlayBase, props, theme, {
-    stateAttrs: ({ intensity = DEFAULT_INTENSITY, invisible }) => ({
+    stateAttrs: ({ intensity = DEFAULT_INTENSITY, invisible, blur }) => ({
       "data-intensity": intensity,
-      "data-invisible": invisible ? "" : void 0
+      "data-invisible": invisible ? "" : void 0,
+      "data-blur": blur ? "" : void 0
     })
   });
-  const { intensity: _intensity, invisible: _invisible, children, ref, ...overlayProps } = rest;
+  const { intensity: _intensity, invisible: _invisible, blur: _blur, children, ref, ...overlayProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogOverlay, { ...overlayProps, ref, ...rootAttrs, children });
 };
-DrawerOverlay.displayName = "DrawerOverlay";
-var preventDefault = (e) => e.preventDefault();
+DrawerOverlay.displayName = "Drawer.Overlay";
 var DrawerPanel = (props) => {
   const theme = useComponentTheme("DrawerPanel");
-  const { placement, dismissable } = useDrawerOwnContext();
+  const { placement, dismissible } = useDrawerOwnContext();
   const { rootAttrs, rest } = composeRootAttrs(DrawerPanelBase, props, theme, {
     stateAttrs: () => ({
       "data-placement": placement
     })
   });
   const { container, children, ref, ...panelProps } = rest;
-  const dismissHandlers = !dismissable && {
-    onEscapeKeyDown: preventDefault,
-    onPointerDownOutside: preventDefault
+  const dismissHandlers = !dismissible && {
+    onEscapeKeyDown: blockDismiss(panelProps.onEscapeKeyDown),
+    onPointerDownOutside: blockDismiss(panelProps.onPointerDownOutside),
+    onInteractOutside: blockDismiss(panelProps.onInteractOutside)
   };
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogContent, { ...panelProps, container, ref, ...rootAttrs, ...dismissHandlers, children });
 };
-DrawerPanel.displayName = "DrawerPanel";
+DrawerPanel.displayName = "Drawer.Panel";
 var DrawerHeader = (props) => {
   const theme = useComponentTheme("DrawerHeader");
   const { rootAttrs, rest } = composeRootAttrs(DrawerHeaderBase, props, theme, {
-    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE }) => ({
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE2 }) => ({
       "data-header-type": headerType
     })
   });
@@ -657,21 +1186,21 @@ var DrawerHeader = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...headerProps, ref, ...rootAttrs, children });
 };
-DrawerHeader.displayName = "DrawerHeader";
+DrawerHeader.displayName = "Drawer.Header";
 var DrawerTitle = (props) => {
   const theme = useComponentTheme("DrawerTitle");
   const { rootAttrs, rest } = composeRootAttrs(DrawerTitleBase, props, theme);
   const { level = 5, children, ref, ...titleProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTitle, { ...titleProps, level, ref, ...rootAttrs, children });
 };
-DrawerTitle.displayName = "DrawerTitle";
+DrawerTitle.displayName = "Drawer.Title";
 var DrawerDescription = (props) => {
   const theme = useComponentTheme("DrawerDescription");
   const { rootAttrs, rest } = composeRootAttrs(DrawerDescriptionBase, props, theme);
   const { children, ref, ...descProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogDescription, { ...descProps, ref, ...rootAttrs, children });
 };
-DrawerDescription.displayName = "DrawerDescription";
+DrawerDescription.displayName = "Drawer.Description";
 var DrawerBody = (props) => {
   const theme = useComponentTheme("DrawerBody");
   const { rootAttrs, rest } = composeRootAttrs(DrawerBodyBase, props, theme);
@@ -679,11 +1208,11 @@ var DrawerBody = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...bodyProps, ref, ...rootAttrs, children });
 };
-DrawerBody.displayName = "DrawerBody";
+DrawerBody.displayName = "Drawer.Body";
 var DrawerFooter = (props) => {
   const theme = useComponentTheme("DrawerFooter");
   const { rootAttrs, rest } = composeRootAttrs(DrawerFooterBase, props, theme, {
-    stateAttrs: ({ footerType = DEFAULT_FOOTER_TYPE }) => ({
+    stateAttrs: ({ footerType = DEFAULT_FOOTER_TYPE2 }) => ({
       "data-footer-type": footerType
     })
   });
@@ -691,14 +1220,14 @@ var DrawerFooter = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...footerProps, ref, ...rootAttrs, children });
 };
-DrawerFooter.displayName = "DrawerFooter";
-var DrawerCloseButton = (props) => {
-  const theme = useComponentTheme("DrawerCloseButton");
-  const { rootAttrs, rest } = composeRootAttrs(DrawerCloseButtonBase, props, theme);
+DrawerFooter.displayName = "Drawer.Footer";
+var DrawerClose = (props) => {
+  const theme = useComponentTheme("DrawerClose");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerCloseBase, props, theme);
   const { children, ref, ...closeProps } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogClose, { ...closeProps, ref, ...rootAttrs, children });
 };
-DrawerCloseButton.displayName = "DrawerCloseButton";
+DrawerClose.displayName = "Drawer.Close";
 
 // src/components/drawer/index.ts
 var Drawer2 = Object.assign(Drawer, {
@@ -710,29 +1239,384 @@ var Drawer2 = Object.assign(Drawer, {
   Description: DrawerDescription,
   Body: DrawerBody,
   Footer: DrawerFooter,
-  CloseButton: DrawerCloseButton
+  Close: DrawerClose
 });
 
-// src/components/field/base.ts
-var FieldBase = createComponentBase({
-  name: "Field",
+// src/components/dialog/context.ts
+var [DialogProvider, useDialogOwnContext] = createSafeContext("DialogProvider");
+var Dialog = (props) => {
+  const theme = useComponentTheme("Dialog");
+  const merged = { ...theme?.defaultProps, ...props };
+  const { dismissible = true, forceMount = true, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogProvider, { value: { dismissible }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, forceMount, children }) });
+};
+Dialog.displayName = "Dialog";
+
+// src/components/dialog/base.ts
+var DialogTriggerBase = createComponentBase({
+  name: "DialogTrigger",
   slots: ["root"],
-  classes: { root: "tk-field" }
-});
-var FieldLabelBase = createComponentBase({
-  name: "FieldLabel",
-  slots: ["root", "asterisk"],
-  classes: { root: "tk-field-label", asterisk: "tk-field-asterisk" }
+  classes: {
+    root: "tk-dialog-trigger"
+  }
 });
-var FieldDescriptionBase = createComponentBase({
-  name: "FieldDescription",
+var DialogOverlayBase = createComponentBase({
+  name: "DialogOverlay",
   slots: ["root"],
-  classes: { root: "tk-field-description" }
+  classes: {
+    root: "tk-dialog-overlay"
+  }
+});
+var DialogPanelBase = createComponentBase({
+  name: "DialogPanel",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-panel"
+  }
+});
+var DialogHeaderBase = createComponentBase({
+  name: "DialogHeader",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-header"
+  }
+});
+var DialogTitleBase = createComponentBase({
+  name: "DialogTitle",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-title"
+  }
+});
+var DialogDescriptionBase = createComponentBase({
+  name: "DialogDescription",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-description"
+  }
+});
+var DialogBodyBase = createComponentBase({
+  name: "DialogBody",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-body"
+  }
+});
+var DialogFooterBase = createComponentBase({
+  name: "DialogFooter",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-footer"
+  }
+});
+var DialogCloseBase = createComponentBase({
+  name: "DialogClose",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-close"
+  }
+});
+var DialogTrigger = (props) => {
+  const theme = useComponentTheme("DialogTrigger");
+  const { rootAttrs, rest } = composeRootAttrs(DialogTriggerBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+DialogTrigger.displayName = "Dialog.Trigger";
+
+// src/components/dialog/defaults.ts
+var DEFAULT_INTENSITY2 = "base";
+var DEFAULT_HEADER_TYPE3 = "basic";
+var DEFAULT_FOOTER_TYPE3 = "basic";
+var DialogOverlay = (props) => {
+  const theme = useComponentTheme("DialogOverlay");
+  const { rootAttrs, rest } = composeRootAttrs(DialogOverlayBase, props, theme, {
+    stateAttrs: ({ intensity = DEFAULT_INTENSITY2, invisible, blur }) => ({
+      "data-intensity": intensity,
+      "data-invisible": invisible ? "" : void 0,
+      "data-blur": blur ? "" : void 0
+    })
+  });
+  const { intensity: _intensity, invisible: _invisible, blur: _blur, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogOverlay, { ...sparProps, ...rootAttrs, ref, children });
+};
+DialogOverlay.displayName = "Dialog.Overlay";
+var DialogPanel = (props) => {
+  const theme = useComponentTheme("DialogPanel");
+  const { dismissible } = useDialogOwnContext();
+  const { rootAttrs, rest } = composeRootAttrs(DialogPanelBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  const dismissHandlers = !dismissible && {
+    onEscapeKeyDown: blockDismiss(sparProps.onEscapeKeyDown),
+    onPointerDownOutside: blockDismiss(sparProps.onPointerDownOutside),
+    onInteractOutside: blockDismiss(sparProps.onInteractOutside)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogContent, { ...sparProps, ...rootAttrs, ref, ...dismissHandlers, children });
+};
+DialogPanel.displayName = "Dialog.Panel";
+var DialogHeader = (props) => {
+  const theme = useComponentTheme("DialogHeader");
+  const { rootAttrs, rest } = composeRootAttrs(DialogHeaderBase, props, theme, {
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE3 }) => ({
+      "data-header-type": headerType
+    })
+  });
+  const { as, headerType: _headerType, children, ref, ...headerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...headerProps, ref, ...rootAttrs, children });
+};
+DialogHeader.displayName = "Dialog.Header";
+var DialogTitle = (props) => {
+  const theme = useComponentTheme("DialogTitle");
+  const { rootAttrs, rest } = composeRootAttrs(DialogTitleBase, props, theme);
+  const { level = 5, children, ref, ...titleProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTitle, { ...titleProps, level, ref, ...rootAttrs, children });
+};
+DialogTitle.displayName = "Dialog.Title";
+var DialogDescription = (props) => {
+  const theme = useComponentTheme("DialogDescription");
+  const { rootAttrs, rest } = composeRootAttrs(DialogDescriptionBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogDescription, { ...sparProps, ...rootAttrs, ref, children });
+};
+DialogDescription.displayName = "Dialog.Description";
+var DialogBody = (props) => {
+  const theme = useComponentTheme("DialogBody");
+  const { rootAttrs, rest } = composeRootAttrs(DialogBodyBase, props, theme);
+  const { as, children, ref, ...bodyProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...bodyProps, ref, ...rootAttrs, children });
+};
+DialogBody.displayName = "Dialog.Body";
+var DialogFooter = (props) => {
+  const theme = useComponentTheme("DialogFooter");
+  const { rootAttrs, rest } = composeRootAttrs(DialogFooterBase, props, theme, {
+    stateAttrs: ({ footerType = DEFAULT_FOOTER_TYPE3 }) => ({
+      "data-footer-type": footerType
+    })
+  });
+  const { as, footerType: _footerType, children, ref, ...footerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...footerProps, ref, ...rootAttrs, children });
+};
+DialogFooter.displayName = "Dialog.Footer";
+var DialogClose = (props) => {
+  const theme = useComponentTheme("DialogClose");
+  const { rootAttrs, rest } = composeRootAttrs(DialogCloseBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogClose, { ...sparProps, ...rootAttrs, ref, children });
+};
+DialogClose.displayName = "Dialog.Close";
+
+// src/components/dialog/index.ts
+var Dialog2 = Object.assign(Dialog, {
+  Trigger: DialogTrigger,
+  Overlay: DialogOverlay,
+  Panel: DialogPanel,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  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",
+  slots: ["root"],
+  classes: { root: "tk-field" }
+});
+var FieldLabelBase = createComponentBase({
+  name: "FieldLabel",
+  slots: ["root", "asterisk"],
+  classes: { root: "tk-field-label", asterisk: "tk-field-asterisk" }
+});
+var FieldDescriptionBase = createComponentBase({
+  name: "FieldDescription",
+  slots: ["root", "icon"],
+  classes: { root: "tk-field-description", icon: "tk-field-description-icon" }
 });
 var FieldErrorMessageBase = createComponentBase({
   name: "FieldErrorMessage",
-  slots: ["root"],
-  classes: { root: "tk-field-error-message" }
+  slots: ["root", "icon"],
+  classes: { root: "tk-field-error-message", icon: "tk-field-error-message-icon" }
 });
 var Field = (props) => {
   const theme = useComponentTheme("Field");
@@ -762,14 +1646,34 @@ var FieldDescription = (props) => {
   const theme = useComponentTheme("FieldDescription");
   const { rootAttrs, rest } = composeRootAttrs(FieldDescriptionBase, props, theme);
   const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.FieldDescription, { ...spar$1, ref, ...rootAttrs, children });
+  const iconAttrs = buildSlotAttrs(FieldDescriptionBase.getSlotProps("icon"), "icon", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const hasContent = children != null && children !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.FieldDescription, { ...spar$1, ref, ...rootAttrs, children: [
+    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderInfo, {}) }),
+    children
+  ] });
 };
 FieldDescription.displayName = "Field.Description";
 var FieldErrorMessage = (props) => {
   const theme = useComponentTheme("FieldErrorMessage");
   const { rootAttrs, rest } = composeRootAttrs(FieldErrorMessageBase, props, theme);
   const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.FieldErrorMessage, { ...spar$1, ref, ...rootAttrs, children });
+  const iconAttrs = buildSlotAttrs(FieldErrorMessageBase.getSlotProps("icon"), "icon", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const hasContent = children != null && children !== "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.FieldErrorMessage, { ...spar$1, ref, ...rootAttrs, children: [
+    hasContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderError, {}) }),
+    children
+  ] });
 };
 FieldErrorMessage.displayName = "Field.ErrorMessage";
 
@@ -786,15 +1690,6 @@ var InputBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-input" }
 });
-var InputContainerBase = createComponentBase({
-  name: "InputContainer",
-  slots: ["root", "startContent", "endContent"],
-  classes: {
-    root: "tk-input-container",
-    startContent: "tk-input-start-content",
-    endContent: "tk-input-end-content"
-  }
-});
 var InputFieldBase = createComponentBase({
   name: "InputField",
   slots: ["root"],
@@ -810,85 +1705,542 @@ var InputSuffixBase = createComponentBase({
   slots: ["root"],
   classes: { root: "tk-input-suffix" }
 });
+var InputLeadingIconBase = createComponentBase({
+  name: "InputLeadingIcon",
+  slots: ["root"],
+  classes: { root: "tk-input-leading-icon" }
+});
+var InputTrailingIconBase = createComponentBase({
+  name: "InputTrailingIcon",
+  slots: ["root"],
+  classes: { root: "tk-input-trailing-icon" }
+});
+var InputClearButtonBase = createComponentBase({
+  name: "InputClearButton",
+  slots: ["root"],
+  classes: { root: "tk-input-clear-button" }
+});
+var InputSpinnerBase = createComponentBase({
+  name: "InputSpinner",
+  slots: ["root"],
+  classes: { root: "tk-input-spinner" }
+});
+var InputRevealButtonBase = createComponentBase({
+  name: "InputRevealButton",
+  slots: ["root"],
+  classes: { root: "tk-input-reveal-button" }
+});
+var InputStrengthBase = createComponentBase({
+  name: "InputStrength",
+  slots: ["root"],
+  classes: { root: "tk-input-strength" }
+});
+var InputStepperBase = createComponentBase({
+  name: "InputStepper",
+  slots: ["root"],
+  classes: { root: "tk-input-stepper" }
+});
+var InputDecrementBase = createComponentBase({
+  name: "InputDecrement",
+  slots: ["root"],
+  classes: { root: "tk-input-decrement" }
+});
+var InputIncrementBase = createComponentBase({
+  name: "InputIncrement",
+  slots: ["root"],
+  classes: { root: "tk-input-increment" }
+});
+var InputChipsBase = createComponentBase({
+  name: "InputChips",
+  slots: ["root"],
+  classes: { root: "tk-input-chips" }
+});
 
 // src/components/input/context.ts
 var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
 
 // src/components/input/defaults.ts
-var DEFAULT_SIZE5 = "base";
+var DEFAULT_SIZE8 = "base";
+var SEGMENT_COUNT = 4;
+var computeStrength = (value) => {
+  let strength = 0;
+  if (value.length >= 8) strength += 1;
+  if (/[A-Z]/.test(value)) strength += 1;
+  if (/[a-z]/.test(value)) strength += 1;
+  if (/[0-9]/.test(value)) strength += 1;
+  if (/[^A-Za-z0-9]/.test(value)) strength += 1;
+  return strength;
+};
+var levelFor = (strength) => strength < 3 ? "weak" : strength < 4 ? "medium" : "strong";
+var InputStrength = (props) => {
+  const theme = useComponentTheme("InputStrength");
+  const { fieldValue } = useInputOwnContext("Input.Strength");
+  const Component = props.as ?? "div";
+  const { rootAttrs, rest } = composeRootAttrs(InputStrengthBase, props, theme);
+  const { as: _as, children: _children, ref, ...rendered } = rest;
+  const strength = computeStrength(fieldValue);
+  const filled = Math.min(strength, SEGMENT_COUNT);
+  const level = levelFor(strength);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children: Array.from({ length: SEGMENT_COUNT }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-input-strength-segment", "data-level": index < filled ? level : void 0 }, index)) });
+};
+InputStrength.displayName = "Input.Strength";
 var Input = (props) => {
   const theme = useComponentTheme("Input");
+  const fieldRef = react.useRef(null);
+  const [fieldNode, setFieldNode] = react.useState(null);
+  const [fieldValue, setFieldValue] = react.useState("");
+  const [revealed, setRevealed] = react.useState(false);
+  const toggleReveal = react.useCallback(() => setRevealed((value) => !value), []);
+  const clearablesRef = react.useRef(/* @__PURE__ */ new Map());
+  const [hasAuxContent, setHasAuxContent] = react.useState(false);
+  const setClearable = react.useCallback((id, entry) => {
+    if (entry) {
+      clearablesRef.current.set(id, entry);
+    } else {
+      clearablesRef.current.delete(id);
+    }
+    let any = false;
+    for (const value of clearablesRef.current.values()) {
+      if (value.hasContent) {
+        any = true;
+        break;
+      }
+    }
+    setHasAuxContent(any);
+  }, []);
+  const clearAux = react.useCallback(() => {
+    for (const value of clearablesRef.current.values()) value.clear();
+  }, []);
   const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
-    stateAttrs: ({ size: size2 = DEFAULT_SIZE5 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE8 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE5, children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(InputProvider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Input, { ...sparProps, ref, ...rootAttrs, children }) });
+  const { size = DEFAULT_SIZE8, children, ref, ...sparProps } = rest;
+  const contextValue = react.useMemo(
+    () => ({
+      size,
+      fieldRef,
+      fieldNode,
+      setFieldNode,
+      fieldValue,
+      setFieldValue,
+      revealed,
+      setRevealed,
+      toggleReveal,
+      setClearable,
+      hasAuxContent,
+      clearAux
+    }),
+    [size, fieldNode, fieldValue, revealed, setFieldValue, setRevealed, toggleReveal, setClearable, hasAuxContent, clearAux]
+  );
+  const rowChildren = [];
+  const belowChildren = [];
+  react.Children.forEach(children, (child) => {
+    if (react.isValidElement(child) && child.type === InputStrength) {
+      belowChildren.push(child);
+    } else {
+      rowChildren.push(child);
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(InputProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(spar.Input, { ...sparProps, ref, ...rootAttrs, children: rowChildren }),
+    belowChildren
+  ] });
 };
 Input.displayName = "Input";
-var InputContainer = (props) => {
-  const theme = useComponentTheme("InputContainer");
-  const { invalid, disabled, readOnly } = spar.useInputContext();
-  const Component = props.as ?? "div";
-  const { rootAttrs, rest } = composeRootAttrs(InputContainerBase, props, theme, {
-    stateAttrs: () => ({
-      "data-invalid": invalid ? "" : void 0,
-      "data-disabled": disabled ? "" : void 0,
-      "data-readonly": readOnly ? "" : void 0
-    })
-  });
-  const { as: _as, children, startContent, endContent, ref, ...rendered } = rest;
-  const slotAttrs = (slot) => buildSlotAttrs(InputContainerBase.getSlotProps(slot), slot, {
-    themeSlotProps: theme?.slotProps,
-    themeClassNames: theme?.classNames,
-    instanceSlotProps: props.slotProps,
-    instanceClassNames: props.classNames
-  });
+
+// src/components/input/dom.ts
+var setNativeValue = (field, value) => {
+  const prototype = field instanceof HTMLTextAreaElement ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+  const valueSetter = Object.getOwnPropertyDescriptor(prototype, "value")?.set;
+  valueSetter?.call(field, value);
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+};
+var stepField = (field, direction) => {
+  if (!(field instanceof HTMLInputElement)) return;
+  try {
+    if (direction === "up") {
+      field.stepUp();
+    } else {
+      field.stepDown();
+    }
+  } catch {
+    return;
+  }
+  field.dispatchEvent(new Event("input", { bubbles: true }));
+  field.focus();
+};
+var InputChips = (props) => {
+  const theme = useComponentTheme("InputChips");
+  const { disabled, readOnly } = spar.useInputContext();
+  const { size, fieldNode, setClearable } = useInputOwnContext("Input.Chips");
+  const { rootAttrs, rest } = composeRootAttrs(InputChipsBase, props, theme);
+  const { as, value, defaultValue, onValueChange, separator, max, allowDuplicates = false, children, ref, ...rendered } = rest;
+  const Component = as ?? "div";
+  const [chips = [], setChips] = useControllableState(value, defaultValue ?? [], onValueChange);
+  const addChip = react.useCallback(
+    (raw) => {
+      if (disabled || readOnly) return;
+      const label = raw.trim();
+      if (!label) return;
+      if (max !== void 0 && chips.length >= max) return;
+      if (!allowDuplicates && chips.includes(label)) return;
+      setChips([...chips, label]);
+    },
+    [chips, disabled, readOnly, max, allowDuplicates, setChips]
+  );
+  const removeChip = react.useCallback(
+    (index) => {
+      if (disabled || readOnly) return;
+      setChips(chips.filter((_, i) => i !== index));
+    },
+    [chips, disabled, readOnly, setChips]
+  );
+  const removeLast = react.useCallback(() => {
+    if (disabled || readOnly || chips.length === 0) return;
+    setChips(chips.slice(0, -1));
+  }, [chips, disabled, readOnly, setChips]);
+  const clearId = react.useRef(/* @__PURE__ */ Symbol("input-chips")).current;
+  const clearAll = react.useCallback(() => {
+    if (disabled || readOnly) return;
+    setChips([]);
+  }, [disabled, readOnly, setChips]);
+  react.useEffect(() => {
+    setClearable(clearId, { hasContent: chips.length > 0, clear: clearAll });
+    return () => setClearable(clearId, null);
+  }, [clearId, chips.length, clearAll, setClearable]);
+  react.useEffect(() => {
+    const field = fieldNode;
+    if (!field) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      if (event.key === "Enter" || separator && event.key === separator) {
+        if (!field.value.trim()) return;
+        event.preventDefault();
+        addChip(field.value);
+        setNativeValue(field, "");
+      } else if (event.key === "Backspace" && field.value === "") {
+        removeLast();
+      }
+    };
+    field.addEventListener("keydown", handleKeyDown);
+    return () => field.removeEventListener("keydown", handleKeyDown);
+  }, [fieldNode, addChip, removeLast, separator]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...rendered, ref, ...rootAttrs, children: [
-    startContent != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...slotAttrs("startContent"), children: startContent }),
-    children,
-    endContent != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...slotAttrs("endContent"), children: endContent })
+    chips.map((chip, index) => (
+      // Render the shared Chip token in the input's neutral/outlined parity
+      // look. `autoDismiss={false}` because Input.Chips owns the tag array —
+      // removal must flow through onRemove into our state, not the chip's own.
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Chip,
+        {
+          appearance: "outlined",
+          variant: "neutral",
+          size,
+          removable: !disabled && !readOnly,
+          disabled: disabled || readOnly,
+          autoDismiss: false,
+          slotProps: { remove: { "aria-label": `Remove ${chip}` } },
+          onRemove: () => removeChip(index),
+          children: chip
+        },
+        `${chip}-${index}`
+      )
+    )),
+    children
   ] });
 };
-InputContainer.displayName = "Input.Container";
+InputChips.displayName = "Input.Chips";
+var InputClearButton = (props) => {
+  const theme = useComponentTheme("InputClearButton");
+  const { disabled, readOnly } = spar.useInputContext();
+  const { size, fieldRef, fieldValue, setFieldValue, hasAuxContent, clearAux } = useInputOwnContext("Input.ClearButton");
+  const { rootAttrs, rest } = composeRootAttrs(InputClearButtonBase, props, theme);
+  const {
+    onClick: slotOnClick,
+    onKeyDown: slotOnKeyDown,
+    ...clearRootAttrs
+  } = rootAttrs;
+  const { children, onClear, onClick, onKeyDown, ref, "type": _type, "aria-label": ariaLabel = "Clear input", ...buttonProps } = rest;
+  if (disabled || readOnly || fieldValue === "" && !hasAuxContent) return null;
+  const clear = () => {
+    clearAux();
+    const field = fieldRef.current;
+    if (field) {
+      setNativeValue(field, "");
+      setFieldValue("");
+    }
+    onClear?.();
+    field?.focus();
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    clear();
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    slotOnKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Escape") return;
+    event.preventDefault();
+    clear();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...clearRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderClose, {})
+    }
+  );
+};
+InputClearButton.displayName = "Input.ClearButton";
+var InputDecrement = (props) => {
+  const theme = useComponentTheme("InputDecrement");
+  const { disabled, readOnly } = spar.useInputContext();
+  const { size, fieldRef } = useInputOwnContext("Input.Decrement");
+  const { rootAttrs, rest } = composeRootAttrs(InputDecrementBase, props, theme);
+  const { onClick: slotOnClick, ...decrementRootAttrs } = rootAttrs;
+  const { children, onClick, ref, "type": _type, "disabled": _disabled, "aria-label": ariaLabel = "Decrement value", ...buttonProps } = rest;
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    stepField(fieldRef.current, "down");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...decrementRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      disabled: disabled || readOnly,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderChevronDown, {})
+    }
+  );
+};
+InputDecrement.displayName = "Input.Decrement";
 var InputField = (props) => {
   const theme = useComponentTheme("InputField");
-  const { size } = useInputOwnContext("Input.Field");
-  const { rootAttrs, rest } = composeRootAttrs(InputFieldBase, props, theme, {
-    stateAttrs: () => ({
-      "data-size": size
-    })
-  });
-  const { ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.InputField, { ...spar$1, ref, ...rootAttrs });
+  const { fieldRef, setFieldNode, setFieldValue, revealed, setRevealed } = useInputOwnContext("Input.Field");
+  const { rootAttrs, rest } = composeRootAttrs(InputFieldBase, props, theme);
+  const { as, ref, type, onInput, onChange, ...spar$1 } = rest;
+  const effectiveType = type === "password" && revealed ? "text" : type;
+  const renderedType = as === "textarea" ? void 0 : effectiveType;
+  const setFieldRef = react.useCallback(
+    (node) => {
+      fieldRef.current = node;
+      setFieldNode(node);
+      if (node) setFieldValue(node.value);
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [fieldRef, ref, setFieldNode, setFieldValue]
+  );
+  react.useEffect(() => {
+    const node = fieldRef.current;
+    if (node) setFieldValue(node.value);
+  }, [fieldRef, setFieldValue, spar$1.value, spar$1.defaultValue]);
+  react.useEffect(() => () => setRevealed(false), [setRevealed]);
+  const handleInput = (event) => {
+    onInput?.(event);
+    setFieldValue(event.currentTarget.value);
+  };
+  const handleChange = (event) => {
+    onChange?.(event);
+    setFieldValue(event.currentTarget.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    spar.InputField,
+    {
+      ...spar$1,
+      as,
+      type: renderedType,
+      onInput: handleInput,
+      onChange: handleChange,
+      ref: setFieldRef,
+      ...rootAttrs
+    }
+  );
 };
 InputField.displayName = "Input.Field";
-var InputPrefix = (props) => {
-  const theme = useComponentTheme("InputPrefix");
-  const Component = props.as ?? "span";
-  const { rootAttrs, rest } = composeRootAttrs(InputPrefixBase, props, theme);
-  const { as: _as, children, ref, ...rendered } = rest;
+var InputIncrement = (props) => {
+  const theme = useComponentTheme("InputIncrement");
+  const { disabled, readOnly } = spar.useInputContext();
+  const { size, fieldRef } = useInputOwnContext("Input.Increment");
+  const { rootAttrs, rest } = composeRootAttrs(InputIncrementBase, props, theme);
+  const { onClick: slotOnClick, ...incrementRootAttrs } = rootAttrs;
+  const { children, onClick, ref, "type": _type, "disabled": _disabled, "aria-label": ariaLabel = "Increment value", ...buttonProps } = rest;
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    stepField(fieldRef.current, "up");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...incrementRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      disabled: disabled || readOnly,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      startContent: children ?? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderChevronUp, {})
+    }
+  );
+};
+InputIncrement.displayName = "Input.Increment";
+var InputLeadingIcon = (props) => {
+  const theme = useComponentTheme("InputLeadingIcon");
+  useInputOwnContext("Input.LeadingIcon");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputLeadingIconBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children });
+};
+InputLeadingIcon.displayName = "Input.LeadingIcon";
+var InputPrefix = (props) => {
+  const theme = useComponentTheme("InputPrefix");
+  useInputOwnContext("Input.Prefix");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputPrefixBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children });
 };
 InputPrefix.displayName = "Input.Prefix";
+var InputRevealButton = (props) => {
+  const theme = useComponentTheme("InputRevealButton");
+  const { disabled, readOnly } = spar.useInputContext();
+  const { size, fieldRef, revealed, setRevealed, toggleReveal } = useInputOwnContext("Input.RevealButton");
+  const { rootAttrs, rest } = composeRootAttrs(InputRevealButtonBase, props, theme);
+  const { onClick: slotOnClick, ...revealRootAttrs } = rootAttrs;
+  const { children, onClick, ref, "type": _type, "aria-label": _ariaLabel, "aria-pressed": _ariaPressed, ...buttonProps } = rest;
+  react.useEffect(() => {
+    if (!revealed) return;
+    const form = fieldRef.current?.form;
+    if (!form) return;
+    const handleSubmit = () => setRevealed(false);
+    form.addEventListener("submit", handleSubmit);
+    return () => form.removeEventListener("submit", handleSubmit);
+  }, [revealed, fieldRef, setRevealed]);
+  const handleClick = (event) => {
+    onClick?.(event);
+    slotOnClick?.(event);
+    if (event.defaultPrevented) return;
+    toggleReveal();
+    fieldRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...revealRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      disabled: disabled || readOnly,
+      "aria-label": "Toggle password visibility",
+      "aria-pressed": revealed,
+      onClick: handleClick,
+      startContent: children ?? (revealed ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderEyeOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderEye, {}))
+    }
+  );
+};
+InputRevealButton.displayName = "Input.RevealButton";
+var InputSpinner = (props) => {
+  const theme = useComponentTheme("InputSpinner");
+  useInputOwnContext("Input.Spinner");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputSpinnerBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-input-default-spinner" }) });
+};
+InputSpinner.displayName = "Input.Spinner";
+var InputStepper = (props) => {
+  const theme = useComponentTheme("InputStepper");
+  useInputOwnContext("Input.Stepper");
+  const Component = props.as ?? "div";
+  const { rootAttrs, rest } = composeRootAttrs(InputStepperBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children });
+};
+InputStepper.displayName = "Input.Stepper";
 var InputSuffix = (props) => {
   const theme = useComponentTheme("InputSuffix");
+  useInputOwnContext("Input.Suffix");
   const Component = props.as ?? "span";
   const { rootAttrs, rest } = composeRootAttrs(InputSuffixBase, props, theme);
   const { as: _as, children, ref, ...rendered } = rest;
   return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children });
 };
 InputSuffix.displayName = "Input.Suffix";
+var InputTrailingIcon = (props) => {
+  const theme = useComponentTheme("InputTrailingIcon");
+  useInputOwnContext("Input.TrailingIcon");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputTrailingIconBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children });
+};
+InputTrailingIcon.displayName = "Input.TrailingIcon";
 
 // src/components/input/index.ts
 var Input2 = Object.assign(Input, {
-  Container: InputContainer,
   Field: InputField,
   Prefix: InputPrefix,
-  Suffix: InputSuffix
+  Suffix: InputSuffix,
+  LeadingIcon: InputLeadingIcon,
+  TrailingIcon: InputTrailingIcon,
+  ClearButton: InputClearButton,
+  Spinner: InputSpinner,
+  RevealButton: InputRevealButton,
+  Strength: InputStrength,
+  Stepper: InputStepper,
+  Decrement: InputDecrement,
+  Increment: InputIncrement,
+  Chips: InputChips
 });
 
+// src/components/label/base.ts
+var LabelBase = createComponentBase({
+  name: "Label",
+  slots: ["root"],
+  classes: { root: "tk-label" }
+});
+var Label = (props) => {
+  const theme = useComponentTheme("Label");
+  const { rootAttrs, rest } = composeRootAttrs(LabelBase, props, theme);
+  const { as, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Label, { ...sparProps, as, ref, ...rootAttrs, children });
+};
+Label.displayName = "Label";
+
 // src/components/radio/base.ts
 var RadioBase = createComponentBase({
   name: "Radio",
@@ -920,22 +2272,19 @@ var RADIO_ITEM_CONTEXT_VALUE = { inside: true };
 var [RadioItemProvider, useRadioItemOwnContext] = createSafeContext("RadioItemProvider");
 
 // src/components/radio/defaults.ts
-var DEFAULT_SIZE6 = "base";
-var DEFAULT_TYPE3 = "default";
+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_SIZE6, type: type2 = DEFAULT_TYPE3, position: position2 = DEFAULT_POSITION, spread }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE9, position: position2 = DEFAULT_POSITION, spread }) => ({
       "data-size": size2,
-      "data-type": type2,
       "data-position": position2,
       "data-spread": spread ? "" : void 0
     })
   });
   const {
-    size = DEFAULT_SIZE6,
-    type = DEFAULT_TYPE3,
+    size = DEFAULT_SIZE9,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -946,7 +2295,7 @@ var Radio = (props) => {
     ref,
     ...sparProps
   } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { value: { size, type, position }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Radio, { ...sparProps, invalid, ...rootAttrs, ref, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { value: { size, position }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Radio, { ...sparProps, invalid, ...rootAttrs, ref, children }) });
 };
 Radio.displayName = "Radio";
 var RadioIndicator = (props) => {
@@ -970,7 +2319,6 @@ var RadioItem = (props) => {
   const { rootAttrs, rest } = composeRootAttrs(RadioItemBase, props, theme, {
     stateAttrs: ({ position }) => ({
       "data-size": group.size,
-      "data-type": group.type,
       "data-position": position ?? group.position
     })
   });
@@ -1054,11 +2402,11 @@ var PopoverTrigger = (props) => {
 PopoverTrigger.displayName = "Popover.Trigger";
 
 // src/components/popover/defaults.ts
-var DEFAULT_VARIANT3 = "dark";
+var DEFAULT_VARIANT5 = "white";
 var PopoverContent = (props) => {
   const theme = useComponentTheme("PopoverContent");
   const { rootAttrs, rest } = composeRootAttrs(PopoverContentBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT3 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT5 }) => ({
       "data-variant": variant
     })
   });
@@ -1083,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) => {
@@ -1105,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",
@@ -1113,14 +2648,33 @@ var SelectBase = createComponentBase({
 });
 var SelectTriggerBase = createComponentBase({
   name: "SelectTrigger",
+  slots: ["root", "value", "indicator"],
+  classes: {
+    root: "tk-select-trigger",
+    // Truncating value region wrapping the selected label/placeholder; pins the
+    // indicator to the trailing edge of the `space-between` trigger.
+    value: "tk-select-value",
+    // Wrapper around the built-in trigger indicator. Shares the
+    // `tk-select-indicator` recipe with the standalone Select.Indicator so both
+    // entry points style identically.
+    indicator: "tk-select-indicator"
+  }
+});
+var SelectIndicatorBase = createComponentBase({
+  name: "SelectIndicator",
   slots: ["root"],
-  classes: { root: "tk-select-trigger" }
+  classes: { root: "tk-select-indicator" }
 });
 var SelectContentBase = createComponentBase({
   name: "SelectContent",
   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"],
@@ -1141,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_SIZE7 = "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_SIZE7, invalid: invalid2 }) => ({
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE11, invalid: invalid2 }) => ({
       "data-size": size2,
       "data-invalid": invalid2 ? "" : void 0
     })
   });
-  const { size = DEFAULT_SIZE7, 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";
@@ -1169,85 +2728,1095 @@ var SelectTrigger = (props) => {
       "data-invalid": invalid ? "" : void 0
     })
   });
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectTrigger, { ...spar$1, ref, ...rootAttrs, children });
+  const { children, indicator, ref, ...spar$1 } = rest;
+  const showIndicator = indicator !== false && indicator !== null;
+  const consumerOwnsLayout = typeof children === "function";
+  if (!showIndicator || consumerOwnsLayout) {
+    return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectTrigger, { ...spar$1, ref, ...rootAttrs, children });
+  }
+  const resolveIndicatorNode = (state) => {
+    if (indicator === void 0 || indicator === true) return state.isOpen ? DEFAULT_DISCLOSURE_COLLAPSE_ICON : DEFAULT_DISCLOSURE_EXPAND_ICON;
+    if (typeof indicator === "function") return indicator(state);
+    return indicator;
+  };
+  const slotLayers = {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  };
+  const valueAttrs = buildSlotAttrs(SelectTriggerBase.getSlotProps("value"), "value", slotLayers);
+  const indicatorAttrs = buildSlotAttrs(SelectTriggerBase.getSlotProps("indicator"), "indicator", slotLayers);
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectTrigger, { ...spar$1, ref, ...rootAttrs, children: (state) => {
+    const value = children ?? (state.label || spar$1.placeholder);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ...valueAttrs, children: value }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ...indicatorAttrs, "aria-hidden": "true", children: resolveIndicatorNode({ isOpen: state.isOpen }) })
+    ] });
+  } });
 };
 SelectTrigger.displayName = "Select.Trigger";
-var resolveStaticWidth = (mode) => {
-  if (mode === "trigger" || mode === "content") return void 0;
-  return typeof mode === "number" ? `${mode}px` : mode;
+var SelectIndicator = (props) => {
+  const theme = useComponentTheme("SelectIndicator");
+  const { isOpen } = spar.useSelectContext();
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(SelectIndicatorBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  const resolved = resolveDisclosureIndicator(children, isOpen);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
+};
+SelectIndicator.displayName = "Select.Indicator";
+var SelectContent = (props) => {
+  const theme = useComponentTheme("SelectContent");
+  const { size, contentWidth } = useSelectOwnContext("Select.Content");
+  const { triggerRef } = spar.useSelectContext();
+  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 { 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);
+  const { value, disabled, label, children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItem, { ...spar$1, value, disabled, label, ref, ...rootAttrs, children });
+};
+SelectItem.displayName = "Select.Item";
+var SelectGroup = (props) => {
+  const theme = useComponentTheme("SelectGroup");
+  const { rootAttrs, rest } = composeRootAttrs(SelectGroupBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectGroup, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectGroup.displayName = "Select.Group";
+var SelectLabel = (props) => {
+  const theme = useComponentTheme("SelectLabel");
+  const { rootAttrs, rest } = composeRootAttrs(SelectLabelBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectLabel, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectLabel.displayName = "Select.Label";
+var SelectSeparator = (props) => {
+  const theme = useComponentTheme("SelectSeparator");
+  const { rootAttrs, rest } = composeRootAttrs(SelectSeparatorBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  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,
+  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
+var SpinnerBase = createComponentBase({
+  name: "Spinner",
+  slots: ["root", "indicator"],
+  classes: {
+    root: "tk-spinner",
+    indicator: "tk-spinner-indicator"
+  }
+});
+
+// src/components/spinner/defaults.ts
+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) => {
+  if (appearance === "rounded") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
+    ] });
+  }
+  if (appearance === "loader") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 31.7851 8.2149" }) });
+  }
+  if (appearance === "dots") {
+    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "lines") {
+    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-line" }, index));
+  }
+  if (appearance === "threeDots") {
+    return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "logo") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        clipRule: "evenodd",
+        d: "M24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48C37.2548 48 48 37.2548 48 24V4C48 1.79086 46.2091 0 44 0H24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z",
+        fillRule: "evenodd"
+      }
+    ) });
+  }
+  return null;
+};
+var Spinner = (props) => {
+  const theme = useComponentTheme("Spinner");
+  const { rootAttrs, rest } = composeRootAttrs(SpinnerBase, props, theme, {
+    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_APPEARANCE7, ref, ...nativeProps } = rest;
+  const indicatorSlotAttrs = buildSlotAttrs(SpinnerBase.getSlotProps("indicator"), "indicator", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  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_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 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 { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
-    stateAttrs: () => ({
-      "data-size": size
+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 { children, ref, style: userStyle, ...spar$1 } = rest;
-  const widthStyle = react.useMemo(() => {
-    if (contentWidth === "trigger") {
-      return triggerWidth != null ? { width: triggerWidth } : 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 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 });
-};
-SelectContent.displayName = "Select.Content";
-var SelectItem = (props) => {
-  const theme = useComponentTheme("SelectItem");
-  const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
-  const { value, disabled, label, children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItem, { ...spar$1, value, disabled, label, ref, ...rootAttrs, children });
-};
-SelectItem.displayName = "Select.Item";
-var SelectGroup = (props) => {
-  const theme = useComponentTheme("SelectGroup");
-  const { rootAttrs, rest } = composeRootAttrs(SelectGroupBase, props, theme);
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectGroup, { ...spar$1, ref, ...rootAttrs, children });
-};
-SelectGroup.displayName = "Select.Group";
-var SelectLabel = (props) => {
-  const theme = useComponentTheme("SelectLabel");
-  const { rootAttrs, rest } = composeRootAttrs(SelectLabelBase, props, theme);
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectLabel, { ...spar$1, ref, ...rootAttrs, children });
+  }
+  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
+        ]
+      }
+    )
+  ] }) });
 };
-SelectLabel.displayName = "Select.Label";
-var SelectSeparator = (props) => {
-  const theme = useComponentTheme("SelectSeparator");
-  const { rootAttrs, rest } = composeRootAttrs(SelectSeparatorBase, props, theme);
-  const { children, ref, ...spar$1 } = rest;
-  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectSeparator, { ...spar$1, ref, ...rootAttrs, children });
+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 })
+  );
 };
-SelectSeparator.displayName = "Select.Separator";
+StepperDescription.displayName = "Stepper.Description";
 
-// src/components/select/index.ts
-var Select2 = Object.assign(Select, {
-  Trigger: SelectTrigger,
-  Content: SelectContent,
-  Item: SelectItem,
-  Group: SelectGroup,
-  Label: SelectLabel,
-  Separator: SelectSeparator
+// src/components/stepper/index.ts
+var Stepper2 = Object.assign(Stepper, {
+  Item: StepperItem,
+  Title: StepperTitle,
+  Description: StepperDescription
 });
 
 // src/components/switch/base.ts
@@ -1267,12 +3836,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE8 = "base";
-var DEFAULT_VARIANT4 = "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_SIZE8, variant = DEFAULT_VARIANT4 }) => ({
+    stateAttrs: ({ size = DEFAULT_SIZE15, variant = DEFAULT_VARIANT9 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -1283,34 +3852,29 @@ 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,
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Switch, { ...sparProps, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchProvider,
     {
-      ...sparProps,
-      invalid,
-      ref,
-      ...rootAttrs,
-      children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchProvider,
-        {
-          value: {
-            classNames,
-            slotProps,
-            checked: state.checked,
-            disabled: state.disabled,
-            readOnly: state.readOnly
-          },
-          children: typeof children === "function" ? children(state) : children
-        }
-      )
+      value: {
+        classNames,
+        slotProps,
+        checked: state.checked,
+        disabled: state.disabled,
+        readOnly: state.readOnly
+      },
+      children: typeof children === "function" ? children(state) : children
     }
-  );
+  ) });
 };
 Switch.displayName = "Switch";
 var SwitchIndicator = (props) => {
@@ -1338,6 +3902,870 @@ SwitchIndicator.displayName = "Switch.Indicator";
 var Switch2 = Object.assign(Switch, {
   Indicator: SwitchIndicator
 });
+
+// src/components/table/base.ts
+var TableBase = createComponentBase({
+  name: "Table",
+  slots: [
+    "root",
+    "tableViewport",
+    "table",
+    "header",
+    "headerRow",
+    "headerCell",
+    "headerContent",
+    "sortTrigger",
+    "sortIcon",
+    "body",
+    "row",
+    "cell",
+    "selectionCell",
+    "expandCell",
+    "expandButton",
+    "expandedRow",
+    "filterButton",
+    "filterPanel",
+    "pagination",
+    "paginationInfo",
+    "paginationNav",
+    "paginationActions",
+    "paginationSize",
+    "paginationGoToPage",
+    "empty",
+    "loading"
+  ],
+  classes: {
+    root: "tk-table",
+    tableViewport: "tk-table-viewport",
+    table: "tk-table-table",
+    header: "tk-table-header",
+    headerRow: "tk-table-header-row",
+    headerCell: "tk-table-header-cell",
+    headerContent: "tk-table-header-content",
+    sortTrigger: "tk-table-sort-trigger",
+    sortIcon: "tk-table-sort-icon",
+    body: "tk-table-body",
+    row: "tk-table-row",
+    cell: "tk-table-cell",
+    selectionCell: "tk-table-selection-cell",
+    expandCell: "tk-table-expand-cell",
+    expandButton: "tk-table-expand-button",
+    expandedRow: "tk-table-expanded-row",
+    filterButton: "tk-table-filter-button",
+    filterPanel: "tk-table-filter-panel-body",
+    pagination: "tk-table-pagination",
+    paginationInfo: "tk-table-pagination-info",
+    paginationNav: "tk-table-pagination-nav",
+    paginationActions: "tk-table-pagination-actions",
+    paginationSize: "tk-table-pagination-size",
+    paginationGoToPage: "tk-table-pagination-go-to-page",
+    empty: "tk-table-empty",
+    loading: "tk-table-loading"
+  }
+});
+
+// src/components/table/context.ts
+var [TableProvider, useTableContext] = createSafeContext("Table");
+
+// src/components/table/defaults.ts
+var DEFAULT_SIZE16 = "base";
+var DEFAULT_PAGE_SIZE = 10;
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];
+var DEFAULT_COLUMN_WIDTH = 150;
+var UTILITY_COLUMN_WIDTH = 48;
+var SELECTION_COLUMN_KEY = "__tk_selection__";
+var EXPAND_COLUMN_KEY = "__tk_expand__";
+var toRenderableValue = (value, columnId) => {
+  if (value == null || typeof value !== "object" || react.isValidElement(value)) return value;
+  if (isDevelopment()) {
+    console.error(
+      `[Table] Column "${columnId}" resolved to a non-renderable object value. Provide a \`cell\` render-prop (or an accessor that returns a primitive/element) \u2014 falling back to JSON.stringify.`
+    );
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+var defaultCell = (ctx) => toRenderableValue(ctx.getValue(), ctx.column.id);
+var isEmptyFilterValue = (value) => value == null || value === "" || Array.isArray(value) && value.length === 0;
+var substringFilterFn = (row, columnId, filterValue) => {
+  if (isEmptyFilterValue(filterValue)) return true;
+  return String(row.getValue(columnId)).toLowerCase().includes(String(filterValue).toLowerCase());
+};
+substringFilterFn.autoRemove = isEmptyFilterValue;
+var equalsFilterFn = (row, columnId, filterValue) => {
+  if (isEmptyFilterValue(filterValue)) return true;
+  return String(row.getValue(columnId)) === String(filterValue);
+};
+equalsFilterFn.autoRemove = isEmptyFilterValue;
+var membershipFilterFn = (row, columnId, filterValue) => {
+  if (!Array.isArray(filterValue) || filterValue.length === 0) return true;
+  return filterValue.map(String).includes(String(row.getValue(columnId)));
+};
+membershipFilterFn.autoRemove = (value) => !Array.isArray(value) || value.length === 0;
+var PRESET_FILTER_FN = {
+  "text": substringFilterFn,
+  "select": equalsFilterFn,
+  "radio": equalsFilterFn,
+  "multi-select": membershipFilterFn,
+  "checkbox": membershipFilterFn
+};
+var defaultFilterFn = (row, columnId, filterValue) => {
+  if (isEmptyFilterValue(filterValue)) return true;
+  const cell = row.getValue(columnId);
+  if (typeof filterValue === "string") return String(cell).toLowerCase().includes(filterValue.toLowerCase());
+  if (Array.isArray(filterValue)) return filterValue.map(String).includes(String(cell));
+  return String(cell) === String(filterValue);
+};
+defaultFilterFn.autoRemove = isEmptyFilterValue;
+var normalizeColumnFilter = (filter) => {
+  if (filter == null) return void 0;
+  return typeof filter === "string" ? { type: filter } : filter;
+};
+var resolveFilterFn = (filter) => {
+  if (filter.filterFn) return filter.filterFn;
+  if (filter.render == null && filter.type) return PRESET_FILTER_FN[filter.type];
+  return defaultFilterFn;
+};
+var toTanStackColumns = (columns) => columns.map((col) => {
+  const { id, header, accessor, cell, sortable, filter, sticky, width, align, meta } = col;
+  const normalizedFilter = normalizeColumnFilter(filter);
+  const def = {
+    id,
+    header,
+    enableSorting: sortable ?? false,
+    enableColumnFilter: normalizedFilter != null,
+    meta: {
+      align,
+      sticky,
+      width,
+      className: meta?.className,
+      headerClassName: meta?.headerClassName,
+      headerAlign: meta?.headerAlign,
+      filter: normalizedFilter
+    }
+  };
+  def.cell = cell ?? defaultCell;
+  if (width != null) def.size = width;
+  if (typeof accessor === "function") {
+    def.accessorFn = accessor;
+  } else if (accessor != null) {
+    def.accessorKey = accessor;
+  }
+  if (normalizedFilter) {
+    def.filterFn = resolveFilterFn(normalizedFilter);
+  }
+  return def;
+});
+var computeStickyLayout = (ordered) => {
+  const layout = /* @__PURE__ */ new Map();
+  if (isDevelopment()) warnNonContiguousPinning(ordered);
+  let leftOffset = 0;
+  for (const column of ordered) {
+    if (column.side === "left") {
+      layout.set(column.key, { side: "left", offset: leftOffset });
+      leftOffset += column.width;
+    }
+  }
+  let rightOffset = 0;
+  for (let i = ordered.length - 1; i >= 0; i -= 1) {
+    const column = ordered[i];
+    if (column?.side === "right") {
+      layout.set(column.key, { side: "right", offset: rightOffset });
+      rightOffset += column.width;
+    }
+  }
+  return layout;
+};
+var warnNonContiguousPinning = (ordered) => {
+  let seenNonLeft = false;
+  for (const column of ordered) {
+    if (column.side === "left") {
+      if (seenNonLeft) return warnPinning("left");
+    } else {
+      seenNonLeft = true;
+    }
+  }
+  let seenNonRight = false;
+  for (let i = ordered.length - 1; i >= 0; i -= 1) {
+    const column = ordered[i];
+    if (column?.side === "right") {
+      if (seenNonRight) return warnPinning("right");
+    } else {
+      seenNonRight = true;
+    }
+  }
+};
+var warnPinning = (side) => {
+  console.error(
+    `[Table] Non-contiguous ${side} column pinning detected. Pinned columns must be contiguous against the ${side} edge (no unpinned column between them); otherwise the sticky offset math overlaps the unpinned column. Move the pinned columns together or unpin the gap.`
+  );
+};
+var buildOrderedColumns = (table, options) => {
+  const leaf = table.getVisibleLeafColumns();
+  const hasLeftPinned = leaf.some((column) => column.columnDef.meta?.sticky === "left");
+  const utilitySide = hasLeftPinned ? "left" : void 0;
+  const ordered = [];
+  if (options.hasSelection) ordered.push({ key: SELECTION_COLUMN_KEY, side: utilitySide, width: UTILITY_COLUMN_WIDTH });
+  if (options.hasExpansion) ordered.push({ key: EXPAND_COLUMN_KEY, side: utilitySide, width: UTILITY_COLUMN_WIDTH });
+  for (const column of leaf) {
+    ordered.push({
+      key: column.id,
+      side: column.columnDef.meta?.sticky,
+      width: column.getSize() || DEFAULT_COLUMN_WIDTH
+    });
+  }
+  return ordered;
+};
+var getExportRows = (table) => {
+  if (!table) return [];
+  const columns = table.getAllLeafColumns();
+  return table.getSortedRowModel().rows.map((row) => {
+    const record = {};
+    for (const column of columns) {
+      if (column.accessorFn || column.columnDef.accessorKey != null) {
+        record[column.id] = row.getValue(column.id);
+      }
+    }
+    return record;
+  });
+};
+var resolveStickyCell = (layout, key, options) => {
+  const placement = layout.get(key);
+  const isStickyColumn = !!placement;
+  const stickyHeaderActive = options.isHeader && options.stickyHeader;
+  if (!isStickyColumn && !stickyHeaderActive) return {};
+  const style = { position: "sticky" };
+  if (placement) {
+    if (placement.side === "left") style.left = placement.offset;
+    else style.right = placement.offset;
+  }
+  if (stickyHeaderActive) style.top = 0;
+  style.zIndex = isStickyColumn && stickyHeaderActive ? 3 : stickyHeaderActive ? 2 : 1;
+  return { style, dataSticky: placement?.side };
+};
+var resolveCellWidth = (column, stickyLayout) => {
+  const hasWidth = column.columnDef.meta?.width != null || stickyLayout.has(column.id);
+  return hasWidth ? { width: column.getSize() } : void 0;
+};
+var TableCell = ({ cell }) => {
+  const { slotAttrs, stickyLayout, stickyHeader } = useTableContext("Table.Cell");
+  const column = cell.column;
+  const meta = column.columnDef.meta;
+  const sticky = resolveStickyCell(stickyLayout, column.id, { isHeader: false, stickyHeader });
+  const attrs = slotAttrs("cell", { className: meta?.className });
+  const content = reactTable.flexRender(column.columnDef.cell, cell.getContext());
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...attrs, "data-align": meta?.align, "data-sticky": sticky.dataSticky, style: { ...attrs.style, ...sticky.style, ...resolveCellWidth(column, stickyLayout) }, children: content });
+};
+TableCell.displayName = "Table.Cell";
+var mergeStyle = (...styles) => Object.assign({}, ...styles);
+var SelectionHeaderCell = () => {
+  const { table, slotAttrs, selectionMode, stickyLayout, stickyHeader } = useTableContext("Table.SelectionHeaderCell");
+  const sticky = resolveStickyCell(stickyLayout, SELECTION_COLUMN_KEY, { isHeader: true, stickyHeader });
+  const attrs = slotAttrs("selectionCell");
+  const allSelected = table.getIsAllPageRowsSelected();
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { ...attrs, scope: "col", "data-sticky": sticky.dataSticky, "data-selection-mode": selectionMode, style: mergeStyle(attrs.style, sticky.style, { width: UTILITY_COLUMN_WIDTH }), children: selectionMode === "multiple" && /* @__PURE__ */ jsxRuntime.jsx(
+    Checkbox2,
+    {
+      "aria-label": "Select all rows",
+      checked: allSelected,
+      indeterminate: table.getIsSomePageRowsSelected() && !allSelected,
+      onChange: (checked) => table.toggleAllPageRowsSelected(checked),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2.Indicator, {})
+    }
+  ) });
+};
+SelectionHeaderCell.displayName = "Table.SelectionHeaderCell";
+var SelectionBodyCell = ({ row }) => {
+  const { slotAttrs, selectionMode, stickyLayout, stickyHeader } = useTableContext("Table.SelectionBodyCell");
+  const sticky = resolveStickyCell(stickyLayout, SELECTION_COLUMN_KEY, { isHeader: false, stickyHeader });
+  const attrs = slotAttrs("selectionCell");
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...attrs, "data-sticky": sticky.dataSticky, "data-selection-mode": selectionMode, style: mergeStyle(attrs.style, sticky.style, { width: UTILITY_COLUMN_WIDTH }), children: selectionMode === "single" ? /* @__PURE__ */ jsxRuntime.jsx(Radio2, { "aria-label": "Select row", value: row.getIsSelected() ? row.id : "", onChange: () => row.toggleSelected(true), children: /* @__PURE__ */ jsxRuntime.jsx(Radio2.Item, { value: row.id, disabled: !row.getCanSelect(), children: /* @__PURE__ */ jsxRuntime.jsx(Radio2.Indicator, {}) }) }) : /* @__PURE__ */ jsxRuntime.jsx(Checkbox2, { "aria-label": "Select row", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: (checked) => row.toggleSelected(checked), children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox2.Indicator, {}) }) });
+};
+SelectionBodyCell.displayName = "Table.SelectionBodyCell";
+var ExpandHeaderCell = () => {
+  const { slotAttrs, stickyLayout, stickyHeader } = useTableContext("Table.ExpandHeaderCell");
+  const sticky = resolveStickyCell(stickyLayout, EXPAND_COLUMN_KEY, { isHeader: true, stickyHeader });
+  const attrs = slotAttrs("expandCell");
+  return /* @__PURE__ */ jsxRuntime.jsx("th", { ...attrs, scope: "col", "data-sticky": sticky.dataSticky, style: mergeStyle(attrs.style, sticky.style, { width: UTILITY_COLUMN_WIDTH }) });
+};
+ExpandHeaderCell.displayName = "Table.ExpandHeaderCell";
+var ExpandBodyCell = ({ row }) => {
+  const { slotAttrs, stickyLayout, stickyHeader } = useTableContext("Table.ExpandBodyCell");
+  const sticky = resolveStickyCell(stickyLayout, EXPAND_COLUMN_KEY, { isHeader: false, stickyHeader });
+  const attrs = slotAttrs("expandCell");
+  const expanded = row.getIsExpanded();
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { ...attrs, "data-sticky": sticky.dataSticky, style: mergeStyle(attrs.style, sticky.style, { width: UTILITY_COLUMN_WIDTH }), children: row.getCanExpand() && /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...slotAttrs("expandButton"),
+      type: "button",
+      "aria-label": expanded ? "Collapse row" : "Expand row",
+      "aria-expanded": expanded,
+      onClick: row.getToggleExpandedHandler(),
+      children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(chevronBottom.ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRightIconOutlinedRounded, {})
+    }
+  ) });
+};
+ExpandBodyCell.displayName = "Table.ExpandBodyCell";
+var TableRow = ({ row }) => {
+  const { slotAttrs, hasSelection, hasExpansion, treeMode, expansionRender, totalColumnCount } = useTableContext("Table.Row");
+  const selected = row.getIsSelected();
+  const showDetailPanel = hasExpansion && !treeMode && !!expansionRender && row.getIsExpanded();
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { ...slotAttrs("row"), "data-selected": selected ? "" : void 0, children: [
+      hasSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectionBodyCell, { row }),
+      hasExpansion && /* @__PURE__ */ jsxRuntime.jsx(ExpandBodyCell, { row }),
+      row.getVisibleCells().map((cell) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { cell }, cell.id))
+    ] }),
+    showDetailPanel && /* @__PURE__ */ jsxRuntime.jsx("tr", { ...slotAttrs("expandedRow"), children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: totalColumnCount, children: expansionRender(row.original) }) })
+  ] });
+};
+TableRow.displayName = "Table.Row";
+var TableBody = () => {
+  const { table, slotAttrs, totalColumnCount, emptyState, loading } = useTableContext("Table.Body");
+  const rows = table.getRowModel().rows;
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...slotAttrs("body"), children: rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { ...slotAttrs("row"), children: /* @__PURE__ */ jsxRuntime.jsx("td", { ...slotAttrs("empty"), colSpan: totalColumnCount, children: loading ? null : emptyState ?? "No data" }) }) : rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { row }, row.id)) });
+};
+TableBody.displayName = "Table.Body";
+var FILTER_BUTTON_CLASS = TableBase.getSlotProps("filterButton").className;
+var defaultIsActive = (value) => !isEmptyFilterValue(value);
+var TableColumnFilter = ({ header }) => {
+  const { slotAttrs } = useTableContext("Table.ColumnFilter");
+  const [open, setOpen] = react.useState(false);
+  const column = header.column;
+  const filter = column.columnDef.meta?.filter;
+  if (!filter) return null;
+  const value = column.getFilterValue();
+  const active = (filter.isActive ?? defaultIsActive)(value);
+  const ctx = {
+    value,
+    setValue: (next) => column.setFilterValue(next),
+    clear: () => column.setFilterValue(void 0),
+    column,
+    close: () => setOpen(false)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover2.Trigger, { className: FILTER_BUTTON_CLASS, "aria-label": "Filter column", "data-active": active ? "" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(search.SearchIconOutlinedRounded, { "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover2.Content, { className: "tk-table-filter-panel", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ...slotAttrs("filterPanel"), children: filter.render ? filter.render(ctx) : /* @__PURE__ */ jsxRuntime.jsx(PresetFilterControl, { filter, ctx }) }),
+      active && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "small", appearance: "text", onClick: ctx.clear, children: "Clear" })
+    ] })
+  ] });
+};
+TableColumnFilter.displayName = "Table.ColumnFilter";
+var PresetFilterControl = ({ filter, ctx }) => {
+  const { type, options = [], placeholder } = filter;
+  const { value, setValue } = ctx;
+  if (type === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Input2, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Input2.Field,
+      {
+        type: "search",
+        placeholder,
+        value: typeof value === "string" ? value : "",
+        onChange: (event) => setValue(event.target.value || void 0)
+      }
+    ) });
+  }
+  if (type === "select") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectFilter, { options, placeholder, value: typeof value === "string" ? value : "", onChange: (next) => setValue(next || void 0) });
+  }
+  if (type === "radio") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Radio2, { value: typeof value === "string" ? value : "", onChange: (next) => setValue(next || void 0), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Radio2.Item, { value: option.value, children: /* @__PURE__ */ jsxRuntime.jsx(Radio2.Label, { children: option.label }) }, option.value)) });
+  }
+  if (type === "checkbox" || type === "multi-select") {
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckboxListFilter, { options, value: Array.isArray(value) ? value : [], onChange: setValue });
+  }
+  return null;
+};
+PresetFilterControl.displayName = "Table.PresetFilterControl";
+var SelectFilter = ({
+  options,
+  placeholder,
+  value,
+  onChange
+}) => {
+  const selected = options.find((option) => option.value === value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Select2, { value, onChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Select2.Trigger, { children: selected ? selected.label : placeholder ?? "Select" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Select2.Content, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select2.Item, { value: option.value, children: option.label }, option.value)) })
+  ] });
+};
+var CheckboxListFilter = ({ options, value, onChange }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: options.map((option) => {
+  const checked = value.includes(option.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Checkbox2,
+    {
+      checked,
+      onChange: (next) => {
+        const updated = next ? [...value, option.value] : value.filter((item) => item !== option.value);
+        onChange(updated.length ? updated : void 0);
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Checkbox2.Indicator, {}),
+        option.label
+      ]
+    },
+    option.value
+  );
+}) });
+var TableHeaderCell = ({ header }) => {
+  const { slotAttrs, stickyLayout, stickyHeader } = useTableContext("Table.HeaderCell");
+  const column = header.column;
+  const meta = column.columnDef.meta;
+  const align = meta?.headerAlign ?? meta?.align;
+  const canSort = column.getCanSort();
+  const canFilter = column.getCanFilter() && !!meta?.filter;
+  const sorted = column.getIsSorted();
+  const sticky = resolveStickyCell(stickyLayout, column.id, { isHeader: true, stickyHeader });
+  const attrs = slotAttrs("headerCell", { className: meta?.headerClassName });
+  const ariaSort = canSort ? sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none" : void 0;
+  const content = header.isPlaceholder ? null : reactTable.flexRender(column.columnDef.header, header.getContext());
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "th",
+    {
+      ...attrs,
+      scope: "col",
+      colSpan: header.colSpan,
+      "aria-sort": ariaSort,
+      "data-align": align,
+      "data-sticky": sticky.dataSticky,
+      "data-sortable": canSort ? "" : void 0,
+      style: { ...attrs.style, ...sticky.style, ...resolveCellWidth(column, stickyLayout) },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("headerContent"), children: [
+        canSort ? /* @__PURE__ */ jsxRuntime.jsxs("button", { ...slotAttrs("sortTrigger"), type: "button", onClick: column.getToggleSortingHandler(), children: [
+          content,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronTop.ChevronTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(chevronBottom.ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsxRuntime.jsx(swap.SwapIconOutlinedRounded, {}) })
+        ] }) : content,
+        canFilter && /* @__PURE__ */ jsxRuntime.jsx(TableColumnFilter, { header })
+      ] })
+    }
+  );
+};
+TableHeaderCell.displayName = "Table.HeaderCell";
+var TableHeader = () => {
+  const { table, slotAttrs, hasSelection, hasExpansion } = useTableContext("Table.Header");
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { ...slotAttrs("header"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { ...slotAttrs("headerRow"), children: [
+    hasSelection && /* @__PURE__ */ jsxRuntime.jsx(SelectionHeaderCell, {}),
+    hasExpansion && /* @__PURE__ */ jsxRuntime.jsx(ExpandHeaderCell, {}),
+    headerGroup.headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(TableHeaderCell, { header }, header.id))
+  ] }, headerGroup.id)) });
+};
+TableHeader.displayName = "Table.Header";
+var getPaginationItems = (pageIndex, pageCount) => {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index);
+  if (pageIndex <= 3) return [0, 1, 2, 3, 4, "end-ellipsis", pageCount - 1];
+  if (pageIndex >= pageCount - 4) return [0, "start-ellipsis", pageCount - 5, pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1];
+  return [0, "start-ellipsis", pageIndex - 1, pageIndex, pageIndex + 1, "end-ellipsis", pageCount - 1];
+};
+var TablePagination = () => {
+  const { table, slotAttrs, pageSizeOptions } = useTableContext("Table.Pagination");
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const paginationItems = getPaginationItems(pageIndex, pageCount);
+  const [pageInput, setPageInput] = react.useState("");
+  const totalRows = table.getRowCount();
+  const startItem = pageIndex * pageSize + 1;
+  const endItem = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const itemsLabel = totalRows === 0 ? "0 items" : `Items ${startItem}-${endItem} of ${totalRows}`;
+  const sizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+  const goToPage = () => {
+    const requestedPage = Number(pageInput);
+    if (!Number.isFinite(requestedPage) || pageCount <= 0 || pageInput === "") return;
+    const targetPage = Math.min(Math.max(Math.trunc(requestedPage), 1), pageCount);
+    table.setPageIndex(targetPage - 1);
+    setPageInput("");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("pagination"), role: "navigation", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("paginationInfo"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", children: pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : `Page ${pageIndex + 1}` }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-live": "polite", children: itemsLabel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("paginationNav"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "First page",
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(arrowLeft.ArrowLeftIconOutlinedRounded, {}),
+          disabled: !table.getCanPreviousPage(),
+          onClick: () => table.setPageIndex(0)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Previous page",
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(chevronLeft.ChevronLeftIconOutlinedRounded, {}),
+          disabled: !table.getCanPreviousPage(),
+          onClick: () => table.previousPage()
+        }
+      ),
+      paginationItems.map((item) => {
+        if (typeof item !== "number") {
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2026" }, item);
+        }
+        const pageNumber = item + 1;
+        const current = item === pageIndex;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "small",
+            variant: "neutral",
+            appearance: current ? "outlined" : "text",
+            "aria-label": current ? `Page ${pageNumber}, current page` : `Go to page ${pageNumber}`,
+            "aria-current": current ? "page" : void 0,
+            onClick: () => table.setPageIndex(item),
+            children: pageNumber
+          },
+          item
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Next page",
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRightIconOutlinedRounded, {}),
+          disabled: !table.getCanNextPage() || pageCount <= 0,
+          onClick: () => table.nextPage()
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Last page",
+          startContent: /* @__PURE__ */ jsxRuntime.jsx(arrowRight.ArrowRightIconOutlinedRounded, {}),
+          disabled: !table.getCanNextPage() || pageCount <= 0,
+          onClick: () => table.setPageIndex(pageCount - 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ...slotAttrs("paginationActions"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ...slotAttrs("paginationSize"), children: /* @__PURE__ */ jsxRuntime.jsxs(Select2, { size: "small", value: String(pageSize), onChange: (value) => table.setPageSize(Number(value)), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Select2.Trigger, { "aria-label": "Rows per page", children: pageSize }),
+        /* @__PURE__ */ jsxRuntime.jsx(Select2.Content, { children: sizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select2.Item, { value: String(option), children: option }, option)) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ...slotAttrs("paginationGoToPage"), children: /* @__PURE__ */ jsxRuntime.jsxs(Input2, { size: "small", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Input2.Field,
+          {
+            type: "number",
+            min: 1,
+            max: Math.max(pageCount, 1),
+            inputMode: "numeric",
+            "aria-label": "Go to page",
+            placeholder: String(pageIndex + 1),
+            value: pageInput,
+            disabled: pageCount <= 0,
+            onChange: (event) => setPageInput(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter") goToPage();
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(Input2.TrailingIcon, { as: "button", type: "button", "aria-label": "Go to page", disabled: pageCount <= 0, onClick: goToPage, children: /* @__PURE__ */ jsxRuntime.jsx(chevronRight.ChevronRightIconOutlinedRounded, {}) })
+      ] }) })
+    ] })
+  ] });
+};
+TablePagination.displayName = "Table.Pagination";
+var EMPTY_SORTING = [];
+var EMPTY_FILTERS = [];
+var EMPTY_SELECTION = {};
+var EMPTY_EXPANDED = {};
+var Table = (props) => {
+  const theme = useComponentTheme("Table");
+  const { rootAttrs, rest } = composeRootAttrs(TableBase, props, theme, {
+    // 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_SIZE16, striped: striped2, bordered: bordered2, stickyHeader: stickyHeader2, loading: loading2 }) => ({
+      "data-size": size2,
+      "data-striped": striped2 ? "" : void 0,
+      "data-bordered": bordered2 ? "" : void 0,
+      "data-sticky-header": stickyHeader2 ? "" : void 0,
+      "data-loading": loading2 ? "" : void 0
+    })
+  });
+  const {
+    data,
+    columns,
+    getRowId,
+    manual = false,
+    loading = false,
+    size = DEFAULT_SIZE16,
+    striped = false,
+    bordered = false,
+    stickyHeader = false,
+    selection,
+    sorting: sortingConfig,
+    filtering,
+    expansion,
+    pagination,
+    onDataRequest,
+    emptyState,
+    getSubRows,
+    tableRef,
+    ref
+  } = rest;
+  const { classNames, slotProps } = props;
+  const tanstackColumns = react.useMemo(() => toTanStackColumns(columns), [columns]);
+  const hasSelection = !!selection;
+  const selectionMode = selection?.mode;
+  const hasExpansion = !!expansion;
+  const treeMode = !!getSubRows;
+  const hasColumnFilters = !!filtering || columns.some((column) => !!column.filter);
+  const hasSortableColumn = columns.some((column) => !!column.sortable);
+  const paginationConfig = typeof pagination === "object" ? pagination : void 0;
+  const paginationEnabled = pagination === true || !!paginationConfig;
+  const pageSizeOptions = paginationConfig?.pageSizeOptions ?? DEFAULT_PAGE_SIZE_OPTIONS;
+  const [tableViewportScrolled, setTableViewportScrolled] = react.useState(false);
+  const [sortingState, setSorting] = useControllableState(sortingConfig?.value, sortingConfig?.defaultValue ?? EMPTY_SORTING, sortingConfig?.onChange);
+  const [filtersState, setFilters] = useControllableState(filtering?.value, filtering?.defaultValue ?? EMPTY_FILTERS, filtering?.onChange);
+  const [selectionState, setSelection] = useControllableState(selection?.value, selection?.defaultValue ?? EMPTY_SELECTION, selection?.onChange);
+  const [expandedState, setExpanded] = useControllableState(expansion?.value, expansion?.defaultValue ?? EMPTY_EXPANDED, expansion?.onChange);
+  const readPaginationSlice = () => ({ pageIndex: paginationConfig?.pageIndex ?? 0, pageSize: paginationConfig?.pageSize ?? DEFAULT_PAGE_SIZE });
+  const initialPagination = react.useMemo(readPaginationSlice, []);
+  const paginationControlled = manual && !!paginationConfig;
+  const controlledPagination = react.useMemo(
+    () => paginationControlled ? readPaginationSlice() : void 0,
+    [paginationControlled, paginationConfig?.pageIndex, paginationConfig?.pageSize]
+  );
+  const [paginationStateRaw, setPagination] = useControllableState(controlledPagination, initialPagination, paginationConfig?.onChange);
+  const sorting = sortingState ?? EMPTY_SORTING;
+  const columnFilters = filtersState ?? EMPTY_FILTERS;
+  const rowSelection = selectionState ?? EMPTY_SELECTION;
+  const expanded = expandedState ?? EMPTY_EXPANDED;
+  const paginationValue = paginationStateRaw ?? initialPagination;
+  const resetPageOnManual = () => {
+    if (manual && paginationValue.pageIndex !== 0) setPagination({ ...paginationValue, pageIndex: 0 });
+  };
+  const onSortingChange = (updater) => {
+    setSorting(reactTable.functionalUpdate(updater, sorting));
+    resetPageOnManual();
+  };
+  const onColumnFiltersChange = (updater) => {
+    setFilters(reactTable.functionalUpdate(updater, columnFilters));
+    resetPageOnManual();
+  };
+  const onRowSelectionChange = (updater) => setSelection(reactTable.functionalUpdate(updater, rowSelection));
+  const onExpandedChange = (updater) => setExpanded(reactTable.functionalUpdate(updater, expanded));
+  const onPaginationChange = (updater) => setPagination(reactTable.functionalUpdate(updater, paginationValue));
+  const table = reactTable.useReactTable({
+    data,
+    columns: tanstackColumns,
+    getRowId: (row, index) => getRowId(row, index),
+    state: {
+      sorting,
+      columnFilters,
+      rowSelection,
+      expanded,
+      pagination: paginationValue
+    },
+    onSortingChange,
+    onColumnFiltersChange,
+    onRowSelectionChange,
+    onExpandedChange,
+    onPaginationChange,
+    // Table-level sort switch. Per-column `sortable` is the real gate
+    // (`column.getCanSort()` ANDs both), so a `sorting` config without any
+    // `sortable` column makes no header interactive — keying off the columns
+    // alone is sufficient and avoids implying otherwise.
+    enableSorting: hasSortableColumn,
+    enableMultiSort: sortingConfig?.multi ?? false,
+    enableRowSelection: hasSelection,
+    enableMultiRowSelection: selectionMode === "multiple",
+    enableColumnFilters: hasColumnFilters,
+    manualSorting: manual,
+    manualFiltering: manual,
+    manualPagination: manual,
+    autoResetPageIndex: !manual,
+    rowCount: manual ? paginationConfig?.rowCount : void 0,
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getSortedRowModel: manual ? void 0 : reactTable.getSortedRowModel(),
+    getFilteredRowModel: manual ? void 0 : reactTable.getFilteredRowModel(),
+    getExpandedRowModel: hasExpansion ? reactTable.getExpandedRowModel() : void 0,
+    getPaginationRowModel: paginationEnabled && !manual ? reactTable.getPaginationRowModel() : void 0,
+    getSubRows,
+    getRowCanExpand: hasExpansion && !getSubRows ? () => true : void 0
+  });
+  react.useEffect(() => {
+    if (!tableRef) return;
+    if (typeof tableRef === "function") tableRef(table);
+    else tableRef.current = table;
+    return () => {
+      if (typeof tableRef === "function") tableRef(null);
+      else tableRef.current = null;
+    };
+  }, [tableRef, table]);
+  const onDataRequestRef = react.useRef(onDataRequest);
+  onDataRequestRef.current = onDataRequest;
+  const dataRequestKey = react.useMemo(() => JSON.stringify({ pagination: paginationValue, sorting, filters: columnFilters }), [paginationValue, sorting, columnFilters]);
+  react.useEffect(() => {
+    if (!manual) return;
+    onDataRequestRef.current?.({ pagination: paginationValue, sorting, filters: columnFilters });
+  }, [manual, dataRequestKey]);
+  react.useEffect(() => {
+    if (paginationControlled || paginationConfig?.pageSize == null) return;
+    if (table.getState().pagination.pageSize === paginationConfig.pageSize) return;
+    table.setPageSize(paginationConfig.pageSize);
+  }, [paginationControlled, paginationConfig?.pageSize, table]);
+  react.useEffect(() => {
+    if (paginationControlled || paginationConfig?.pageIndex == null) return;
+    if (table.getState().pagination.pageIndex === paginationConfig.pageIndex) return;
+    table.setPageIndex(paginationConfig.pageIndex);
+  }, [paginationControlled, paginationConfig?.pageIndex, table]);
+  const slotAttrs = react.useCallback(
+    (slot, attrs) => buildSlotAttrs(TableBase.getSlotProps(slot, attrs), slot, {
+      themeSlotProps: theme?.slotProps,
+      themeClassNames: theme?.classNames,
+      themeClassName: theme?.className,
+      instanceSlotProps: slotProps,
+      instanceClassNames: classNames
+    }),
+    [theme, slotProps, classNames]
+  );
+  const stickyLayout = react.useMemo(() => computeStickyLayout(buildOrderedColumns(table, { hasSelection, hasExpansion })), [table, tanstackColumns, hasSelection, hasExpansion]);
+  const totalColumnCount = tanstackColumns.length + (hasSelection ? 1 : 0) + (hasExpansion ? 1 : 0);
+  const contextValue = {
+    table,
+    size,
+    striped,
+    bordered,
+    stickyHeader,
+    loading,
+    hasSelection,
+    selectionMode,
+    hasExpansion,
+    treeMode,
+    expansionRender: expansion?.render,
+    hasColumnFilters,
+    stickyLayout,
+    totalColumnCount,
+    emptyState,
+    paginationEnabled,
+    pageSizeOptions,
+    slotAttrs
+  };
+  const tableViewportAttrs = slotAttrs("tableViewport");
+  const handleTableViewportScroll = (event) => {
+    tableViewportAttrs.onScroll?.(event);
+    const nextScrolled = event.currentTarget.scrollTop > 0;
+    setTableViewportScrolled((current) => current === nextScrolled ? current : nextScrolled);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...rootAttrs, ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ...tableViewportAttrs, "data-scrolled": tableViewportScrolled ? "" : void 0, onScroll: handleTableViewportScroll, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { ...slotAttrs("table"), "aria-busy": loading || void 0, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(TableBody, {})
+    ] }) }),
+    paginationEnabled && /* @__PURE__ */ jsxRuntime.jsx(TablePagination, {}),
+    loading && // No `aria-hidden`: the Spar Spinner ships `role="status"` +
+    // `aria-label="Loading"`, so the overlay politely announces the
+    // loading transition (the table also carries `aria-busy`).
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ...slotAttrs("loading"), children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) })
+  ] }) });
+};
+Table.displayName = "Table";
+
+// src/components/tabs/base.ts
+var TabsBase = createComponentBase({
+  name: "Tabs",
+  slots: ["root"],
+  classes: { root: "tk-tabs" }
+});
+var TabsListBase = createComponentBase({
+  name: "TabsList",
+  slots: ["root"],
+  classes: { root: "tk-tabs-list" }
+});
+var TabsTriggerBase = createComponentBase({
+  name: "TabsTrigger",
+  slots: ["root"],
+  classes: { root: "tk-tabs-trigger" }
+});
+var TabsContentBase = createComponentBase({
+  name: "TabsContent",
+  slots: ["root"],
+  classes: { root: "tk-tabs-content" }
+});
+
+// src/components/tabs/context.ts
+var [TabsOwnProvider, useTabsOwnContext] = createSafeContext("Tabs");
+
+// src/components/tabs/defaults.ts
+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_SIZE17, variant: variant2 = DEFAULT_VARIANT10, appearance: appearance2 = DEFAULT_APPEARANCE8 }) => ({
+      "data-size": size2,
+      "data-variant": variant2,
+      "data-type": appearance2
+    })
+  });
+  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";
+var TabsList = (props) => {
+  const theme = useComponentTheme("TabsList");
+  const { size, variant, appearance } = useTabsOwnContext("Tabs.List");
+  const { rootAttrs, rest } = composeRootAttrs(TabsListBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size,
+      "data-variant": variant,
+      "data-type": appearance
+    })
+  });
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TabsList, { ...sparProps, ...rootAttrs, ref, children });
+};
+TabsList.displayName = "Tabs.List";
+var TabsTrigger = (props) => {
+  const theme = useComponentTheme("TabsTrigger");
+  const { size, variant, appearance } = useTabsOwnContext("Tabs.Trigger");
+  const { rootAttrs, rest } = composeRootAttrs(TabsTriggerBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size,
+      "data-variant": variant,
+      "data-type": appearance
+    })
+  });
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TabsTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+TabsTrigger.displayName = "Tabs.Trigger";
+var TabsContent = (props) => {
+  const theme = useComponentTheme("TabsContent");
+  const { rootAttrs, rest } = composeRootAttrs(TabsContentBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TabsContent, { ...sparProps, ...rootAttrs, ref, children });
+};
+TabsContent.displayName = "Tabs.Content";
+
+// src/components/tabs/index.ts
+var Tabs2 = Object.assign(Tabs, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});
 var Tooltip = ({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(spar.Tooltip, { id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled, children });
 };
@@ -1392,11 +4820,11 @@ var TooltipTrigger = (props) => {
 TooltipTrigger.displayName = "Tooltip.Trigger";
 
 // src/components/tooltip/defaults.ts
-var DEFAULT_VARIANT5 = "dark";
+var DEFAULT_VARIANT11 = "white";
 var TooltipContent = (props) => {
   const theme = useComponentTheme("TooltipContent");
   const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT5 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT11 }) => ({
       "data-variant": variant
     })
   });
@@ -1421,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";
 
@@ -1436,18 +4864,148 @@ var Tooltip2 = Object.assign(Tooltip, {
   Arrow: TooltipArrow
 });
 
+// src/components/toast/base.ts
+var ToasterBase = createComponentBase({
+  name: "Toaster",
+  slots: ["root"],
+  classes: {
+    root: "tk-toaster"
+  }
+});
+var ToastBase = createComponentBase({
+  name: "Toast",
+  slots: ["root"],
+  classes: {
+    root: "tk-toast"
+  }
+});
+
+// src/components/toast/defaults.ts
+var DEFAULT_TOAST_APPEARANCE = "filled";
+var DEFAULT_CLOSE_LABEL2 = "Dismiss notification";
+
+// src/components/toast/utils.ts
+var toastTypeToVariant = (type) => {
+  switch (type) {
+    case "success":
+      return "success";
+    case "error":
+      return "danger";
+    case "warning":
+      return "warning";
+    case "info":
+      return "info";
+    // 'default' and 'loading' have no dedicated Alert variant.
+    default:
+      return "neutral";
+  }
+};
+var Toast = (props) => {
+  const theme = useComponentTheme("Toast");
+  const { rootAttrs, rest } = composeRootAttrs(ToastBase, props, theme);
+  const { as, toast, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, children, ref, ...toastProps } = rest;
+  const Component = as ?? "div";
+  const variant = toastTypeToVariant(toast.type);
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Toast.Root, { ...toastProps, as: Component, ref, toast, toaster, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(Alert2, { variant, appearance, role: "presentation", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Alert2.Content, { children: [
+      toast.title != null && /* @__PURE__ */ jsxRuntime.jsx(spar.Toast.Title, { as: Alert2.Title, children: toast.title }),
+      toast.description != null && /* @__PURE__ */ jsxRuntime.jsx(spar.Toast.Description, { as: Alert2.Description, children: toast.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(spar.Toast.Close, { as: Alert2.Close, "aria-label": closeLabel }),
+    toast.action && /* @__PURE__ */ jsxRuntime.jsx(Alert2.Actions, { children: /* @__PURE__ */ jsxRuntime.jsx(spar.Toast.Action, { as: Button, className: "tk-alert-action", variant, appearance: "text", size: "small" }) })
+  ] }) });
+};
+Toast.displayName = "Toast";
+var Toaster = (props) => {
+  const theme = useComponentTheme("Toaster");
+  const { rootAttrs, rest } = composeRootAttrs(ToasterBase, props, theme, {
+    stateAttrs: ({ toaster: toaster2 }) => ({
+      "data-placement": toaster2.placement
+    })
+  });
+  const { as, toaster, appearance = DEFAULT_TOAST_APPEARANCE, closeLabel = DEFAULT_CLOSE_LABEL2, overlap = false, children, ref, ...toasterProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Toaster, { ...toasterProps, as: Component, ref, toaster, overlap, ...rootAttrs, children: (toast) => (
+    // Spar renders each item directly into a mapped array, so the key must
+    // live on the element this render prop returns. The default branch keys
+    // <Toast>; a consumer `children` result is keyed via Fragment here.
+    children ? /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: children(toast) }, toast.id) : /* @__PURE__ */ jsxRuntime.jsx(Toast, { toast, toaster, appearance, closeLabel }, toast.id)
+  ) });
+};
+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; }
+});
 exports.Accordion = Accordion2;
+exports.Alert = Alert2;
 exports.Badge = Badge;
+exports.Breadcrumb = Breadcrumb2;
 exports.Button = Button;
+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;
 exports.TakeoffSparProvider = TakeoffSparProvider;
+exports.Toast = Toast;
+exports.Toaster = Toaster;
 exports.Tooltip = Tooltip2;
+exports.getExportRows = getExportRows;
 exports.useComponentTheme = useComponentTheme;
 exports.useTheme = useTheme;