@takeoff-ui/react-spar 0.1.2 → 0.2.0

package/dist/index.mjs

@@ -1,7 +1,17 @@
-import { createContext, Children, isValidElement, useState, useEffect, useMemo, createElement, useContext } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Checkbox as Checkbox$1, Dialog, DialogClose, DialogDescription, DialogTitle, DialogContent, DialogOverlay, DialogTrigger, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, InputField as InputField$1, useInputContext, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1 } from '@turkish-technology/spar';
+import { createContext, Children, isValidElement, useMemo, useRef, useState, useCallback, useEffect, createElement, useContext, Fragment as Fragment$1 } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Accordion as Accordion$1, AccordionContent as AccordionContent$1, useAccordionItemContext, AccordionTrigger as AccordionTrigger$1, AccordionHeader as AccordionHeader$1, AccordionItem as AccordionItem$1, Breadcrumb as Breadcrumb$1, BreadcrumbSeparator as BreadcrumbSeparator$1, BreadcrumbPage as BreadcrumbPage$1, BreadcrumbLink as BreadcrumbLink$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbList as BreadcrumbList$1, Checkbox as Checkbox$1, Dialog as Dialog$1, DialogClose as DialogClose$1, DialogDescription as DialogDescription$1, DialogTitle as DialogTitle$1, DialogContent, DialogOverlay as DialogOverlay$1, DialogTrigger as DialogTrigger$1, Field as Field$1, FieldErrorMessage as FieldErrorMessage$1, FieldDescription as FieldDescription$1, useFieldContext, FieldLabel as FieldLabel$1, Input as Input$1, useInputContext, InputField as InputField$1, Radio as Radio$1, RadioItem as RadioItem$1, Popover as Popover$1, PopoverClose as PopoverClose$1, PopoverArrow as PopoverArrow$1, PopoverContent as PopoverContent$1, PopoverTrigger as PopoverTrigger$1, Select as Select$1, SelectSeparator as SelectSeparator$1, SelectLabel as SelectLabel$1, SelectGroup as SelectGroup$1, SelectItem as SelectItem$1, useSelectContext, SelectContent as SelectContent$1, SelectTrigger as SelectTrigger$1, Switch as Switch$1, Tabs as Tabs$1, TabsContent as TabsContent$1, TabsTrigger as TabsTrigger$1, TabsList as TabsList$1, Tooltip as Tooltip$1, TooltipArrow as TooltipArrow$1, TooltipContent as TooltipContent$1, TooltipTrigger as TooltipTrigger$1, TooltipProvider as TooltipProvider$1, Button as Button$1, Label as Label$1, Toast as Toast$1, Toaster as Toaster$1 } from '@turkish-technology/spar';
+export { createToaster } from '@turkish-technology/spar';
 import { clsx } from 'clsx';
+import { ChevronBottomIconOutlinedRounded } from '@takeoff-icons/react/chevron-bottom';
+import { ChevronTopIconOutlinedRounded } from '@takeoff-icons/react/chevron-top';
+import { useReactTable, getPaginationRowModel, getExpandedRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, functionalUpdate, flexRender } from '@tanstack/react-table';
+import { ChevronRightIconOutlinedRounded } from '@takeoff-icons/react/chevron-right';
+import { SwapIconOutlinedRounded } from '@takeoff-icons/react/swap';
+import { SearchIconOutlinedRounded } from '@takeoff-icons/react/search';
+import { ArrowLeftIconOutlinedRounded } from '@takeoff-icons/react/arrow-left';
+import { ArrowRightIconOutlinedRounded } from '@takeoff-icons/react/arrow-right';
+import { ChevronLeftIconOutlinedRounded } from '@takeoff-icons/react/chevron-left';
 
 // src/provider.tsx
 
@@ -52,6 +62,12 @@ var useComponentTheme = (componentName) => {
   const context = 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];
@@ -94,6 +110,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;
@@ -120,6 +139,12 @@ var createComponentBase = (config) => {
     resolveProps
   };
 };
+var DEFAULT_DISCLOSURE_EXPAND_ICON = /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {});
+var DEFAULT_DISCLOSURE_COLLAPSE_ICON = /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {});
+var resolveDisclosureIndicator = (children, isOpen) => {
+  if (typeof children === "function") return children({ isOpen });
+  return children ?? (isOpen ? DEFAULT_DISCLOSURE_COLLAPSE_ICON : DEFAULT_DISCLOSURE_EXPAND_ICON);
+};
 
 // src/components/accordion/base.ts
 var AccordionBase = createComponentBase({
@@ -170,6 +195,21 @@ function createSafeContext(displayName) {
   };
   return [Provider, useSafeContext];
 }
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const { current: isControlled } = useRef(controlledValue !== void 0);
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const setValue = useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onChange?.(newValue);
+    },
+    [isControlled, onChange]
+  );
+  return [value, setValue];
+}
 
 // src/components/accordion/context.ts
 var [AccordionProvider, useAccordionOwnContext] = createSafeContext("AccordionProvider");
@@ -222,15 +262,13 @@ var AccordionHeader = (props) => {
   return /* @__PURE__ */ jsx(AccordionHeader$1, { ...spar, level, ...rootAttrs, ref, children });
 };
 AccordionHeader.displayName = "Accordion.Header";
-var DEFAULT_EXPAND_ICON = /* @__PURE__ */ 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__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-var DEFAULT_COLLAPSE_ICON = /* @__PURE__ */ 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__ */ 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 } = 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__ */ jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
 };
 AccordionIndicator.displayName = "Accordion.Indicator";
@@ -287,6 +325,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__ */ jsx(AlertProvider, { value: { onClose }, children: /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-down", ...props, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+var PlaceholderChevronUp = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "chevron-up", ...props, children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
+var PlaceholderClose = (props) => /* @__PURE__ */ jsxs("svg", { ...baseSvgProps, "data-placeholder-icon": "close", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+] });
+var PlaceholderInfo = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "info", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", children: /* @__PURE__ */ 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__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "error", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(2 2) scale(1.714)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ 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__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) });
+var PlaceholderRemove = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
+var PlaceholderEye = (props) => /* @__PURE__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 4.5) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ 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__ */ jsx("svg", { ...filledSvgProps, "data-placeholder-icon": "eye-off", ...props, children: /* @__PURE__ */ jsx("g", { transform: "translate(1 2.42) scale(1.2)", fillRule: "evenodd", clipRule: "evenodd", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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",
@@ -299,13 +492,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,
@@ -330,13 +523,116 @@ var Badge = (props) => {
     return /* @__PURE__ */ jsx("span", { ...nativeProps, ...rootAttrs, ref });
   }
   return /* @__PURE__ */ jsxs("span", { ...nativeProps, ...rootAttrs, ref, children: [
-    startContent && /* @__PURE__ */ jsx("span", { ...iconSlotAttrs, children: startContent }),
-    children && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
-    endContent && /* @__PURE__ */ jsx("span", { ...iconSlotAttrs, children: endContent })
+    isRenderableNode(startContent) && /* @__PURE__ */ jsx("span", { ...iconSlotAttrs, children: startContent }),
+    isRenderableNode(children) && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
+    isRenderableNode(endContent) && /* @__PURE__ */ 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 DEFAULT_SEPARATOR_VARIANT = "chevron";
+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 = useMemo(() => ({ size, type }), [size, type]);
+  return /* @__PURE__ */ jsx(BreadcrumbProvider, { value: contextValue, children: /* @__PURE__ */ jsx(Breadcrumb$1, { ...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 } = rest;
+  return /* @__PURE__ */ jsx(BreadcrumbList$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(BreadcrumbItem$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(BreadcrumbLink$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(BreadcrumbPage$1, { ...spar, ref, ...rootAttrs, children });
+};
+BreadcrumbPage.displayName = "Breadcrumb.Page";
+var DEFAULT_SEPARATOR_ICON = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6 4L10 8L6 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var BreadcrumbSeparator = (props) => {
+  const theme = useComponentTheme("BreadcrumbSeparator");
+  const { rootAttrs, rest } = composeRootAttrs(BreadcrumbSeparatorBase, props, theme, {
+    stateAttrs: ({ variant: variant2 = DEFAULT_SEPARATOR_VARIANT }) => ({
+      "data-variant": variant2
+    })
+  });
+  const { variant = DEFAULT_SEPARATOR_VARIANT, children, ref, ...spar } = rest;
+  const fallback = variant === "chevron" ? DEFAULT_SEPARATOR_ICON : null;
+  return /* @__PURE__ */ jsx(BreadcrumbSeparator$1, { ...spar, ref, ...rootAttrs, children: children ?? fallback });
+};
+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",
@@ -350,9 +646,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, {
@@ -360,9 +656,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,
@@ -380,7 +676,8 @@ var Button = (props) => {
     appearance: _appearance,
     size: _size,
     rounded: _rounded,
-    isLoading = false,
+    loading = false,
+    pressed,
     startContent,
     endContent,
     disabled = false,
@@ -406,15 +703,122 @@ var Button = (props) => {
     instanceSlotProps: props.slotProps,
     instanceClassNames: props.classNames
   });
-  return /* @__PURE__ */ jsxs(Button$1, { ...sparProps, disabled, isLoading, ref, ...rootAttrs, children: [
-    isLoading && /* @__PURE__ */ jsx("span", { ...spinnerSlotAttrs }),
-    startContent && !isLoading && /* @__PURE__ */ jsx("span", { ...contentSlotAttrs, children: startContent }),
-    children && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
-    endContent && !isLoading && /* @__PURE__ */ jsx("span", { ...contentSlotAttrs, children: endContent })
+  return /* @__PURE__ */ jsxs(Button$1, { ...sparProps, disabled, isLoading: loading, isPressed: pressed, ref, ...rootAttrs, children: [
+    loading && /* @__PURE__ */ jsx("span", { ...spinnerSlotAttrs }),
+    isRenderableNode(startContent) && !loading && /* @__PURE__ */ jsx("span", { ...contentSlotAttrs, children: startContent }),
+    isRenderableNode(children) && /* @__PURE__ */ jsx("span", { ...labelSlotAttrs, children }),
+    isRenderableNode(endContent) && !loading && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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",
@@ -432,14 +836,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;
@@ -447,7 +849,6 @@ 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.
@@ -500,21 +901,6 @@ var Checkbox = (props) => {
   );
 };
 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__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5L20 7" }) });
-var PlaceholderRemove = (props) => /* @__PURE__ */ jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
 var CheckboxIndicator = (props) => {
   const theme = useComponentTheme("Checkbox");
   const { classNames, slotProps, checked, indeterminate } = useCheckboxOwnContext("Checkbox.Indicator");
@@ -541,19 +927,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] = 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__ */ jsxs(
+    "span",
+    {
+      ...nativeProps,
+      ...chipRootAttrs,
+      "aria-disabled": disabled || void 0,
+      onClick: handleRootClick,
+      onKeyDown: handleKeyDown,
+      ref,
+      role: resolvedRole,
+      tabIndex: resolvedTabIndex,
+      children: [
+        isRenderableNode(children) && /* @__PURE__ */ 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__ */ jsx("button", { "aria-label": DEFAULT_REMOVE_LABEL, ...removeButtonAttrs, disabled, onClick: handleRemoveClick, type: "button", children: /* @__PURE__ */ 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__ */ jsx(DrawerProvider, { value: { placement, dismissable }, children: /* @__PURE__ */ jsx(Dialog, { ...sparProps, disabled, forceMount: true, children }) });
+  const { placement = DEFAULT_PLACEMENT, dismissible = true, disabled = false, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsx(DrawerProvider, { value: { placement, dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, disabled, forceMount: true, children }) });
 };
 Drawer.displayName = "Drawer";
 
@@ -598,10 +1106,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",
@@ -612,42 +1120,43 @@ var DrawerTrigger = (props) => {
   const theme = useComponentTheme("DrawerTrigger");
   const { rootAttrs, rest } = composeRootAttrs(DrawerTriggerBase, props, theme);
   const { children, ref, ...triggerProps } = rest;
-  return /* @__PURE__ */ jsx(DialogTrigger, { ...triggerProps, ref, ...rootAttrs, children });
+  return /* @__PURE__ */ jsx(DialogTrigger$1, { ...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;
-  return /* @__PURE__ */ jsx(DialogOverlay, { ...overlayProps, ref, ...rootAttrs, children });
+  const { intensity: _intensity, invisible: _invisible, blur: _blur, children, ref, ...overlayProps } = rest;
+  return /* @__PURE__ */ jsx(DialogOverlay$1, { ...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__ */ jsx(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
     })
   });
@@ -655,21 +1164,21 @@ var DrawerHeader = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ 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__ */ jsx(DialogTitle, { ...titleProps, level, ref, ...rootAttrs, children });
+  return /* @__PURE__ */ jsx(DialogTitle$1, { ...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__ */ jsx(DialogDescription, { ...descProps, ref, ...rootAttrs, children });
+  return /* @__PURE__ */ jsx(DialogDescription$1, { ...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);
@@ -677,11 +1186,11 @@ var DrawerBody = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ 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
     })
   });
@@ -689,14 +1198,14 @@ var DrawerFooter = (props) => {
   const Component = as ?? "div";
   return /* @__PURE__ */ 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__ */ jsx(DialogClose, { ...closeProps, ref, ...rootAttrs, children });
+  return /* @__PURE__ */ jsx(DialogClose$1, { ...closeProps, ref, ...rootAttrs, children });
 };
-DrawerCloseButton.displayName = "DrawerCloseButton";
+DrawerClose.displayName = "Drawer.Close";
 
 // src/components/drawer/index.ts
 var Drawer2 = Object.assign(Drawer, {
@@ -708,37 +1217,216 @@ 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__ */ jsx(DialogProvider, { value: { dismissible }, children: /* @__PURE__ */ jsx(Dialog$1, { ...sparProps, forceMount, children }) });
+};
+Dialog.displayName = "Dialog";
+
+// src/components/dialog/base.ts
+var DialogTriggerBase = createComponentBase({
+  name: "DialogTrigger",
   slots: ["root"],
-  classes: { root: "tk-field" }
+  classes: {
+    root: "tk-dialog-trigger"
+  }
 });
-var FieldLabelBase = createComponentBase({
-  name: "FieldLabel",
-  slots: ["root", "asterisk"],
-  classes: { root: "tk-field-label", asterisk: "tk-field-asterisk" }
+var DialogOverlayBase = createComponentBase({
+  name: "DialogOverlay",
+  slots: ["root"],
+  classes: {
+    root: "tk-dialog-overlay"
+  }
 });
-var FieldDescriptionBase = createComponentBase({
-  name: "FieldDescription",
+var DialogPanelBase = createComponentBase({
+  name: "DialogPanel",
   slots: ["root"],
-  classes: { root: "tk-field-description" }
+  classes: {
+    root: "tk-dialog-panel"
+  }
 });
-var FieldErrorMessageBase = createComponentBase({
-  name: "FieldErrorMessage",
+var DialogHeaderBase = createComponentBase({
+  name: "DialogHeader",
   slots: ["root"],
-  classes: { root: "tk-field-error-message" }
+  classes: {
+    root: "tk-dialog-header"
+  }
 });
-var Field = (props) => {
-  const theme = useComponentTheme("Field");
-  const { rootAttrs, rest } = composeRootAttrs(FieldBase, props, theme);
+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__ */ jsx(Field$1, { ...sparProps, ref, ...rootAttrs, children });
+  return /* @__PURE__ */ jsx(DialogTrigger$1, { ...sparProps, ...rootAttrs, ref, children });
 };
-Field.displayName = "Field";
+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__ */ jsx(DialogOverlay$1, { ...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__ */ jsx(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__ */ 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__ */ jsx(DialogTitle$1, { ...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__ */ jsx(DialogDescription$1, { ...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__ */ 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__ */ 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__ */ jsx(DialogClose$1, { ...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/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", "icon"],
+  classes: { root: "tk-field-error-message", icon: "tk-field-error-message-icon" }
+});
+var Field = (props) => {
+  const theme = useComponentTheme("Field");
+  const { rootAttrs, rest } = composeRootAttrs(FieldBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsx(Field$1, { ...sparProps, ref, ...rootAttrs, children });
+};
+Field.displayName = "Field";
 var FieldLabel = (props) => {
   const theme = useComponentTheme("FieldLabel");
   const { required } = useFieldContext();
@@ -760,14 +1448,34 @@ var FieldDescription = (props) => {
   const theme = useComponentTheme("FieldDescription");
   const { rootAttrs, rest } = composeRootAttrs(FieldDescriptionBase, props, theme);
   const { children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(FieldDescription$1, { ...spar, 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__ */ jsxs(FieldDescription$1, { ...spar, ref, ...rootAttrs, children: [
+    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ 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 } = rest;
-  return /* @__PURE__ */ jsx(FieldErrorMessage$1, { ...spar, 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__ */ jsxs(FieldErrorMessage$1, { ...spar, ref, ...rootAttrs, children: [
+    hasContent && /* @__PURE__ */ jsx("span", { ...iconAttrs, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PlaceholderError, {}) }),
+    children
+  ] });
 };
 FieldErrorMessage.displayName = "Field.ErrorMessage";
 
@@ -784,15 +1492,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"],
@@ -808,84 +1507,541 @@ 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_SIZE7 = "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__ */ jsx(Component, { ...rendered, ref, ...rootAttrs, children: Array.from({ length: SEGMENT_COUNT }, (_, index) => /* @__PURE__ */ 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 = useRef(null);
+  const [fieldNode, setFieldNode] = useState(null);
+  const [fieldValue, setFieldValue] = useState("");
+  const [revealed, setRevealed] = useState(false);
+  const toggleReveal = useCallback(() => setRevealed((value) => !value), []);
+  const clearablesRef = useRef(/* @__PURE__ */ new Map());
+  const [hasAuxContent, setHasAuxContent] = useState(false);
+  const setClearable = 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 = 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_SIZE7 }) => ({
       "data-size": size2
     })
   });
-  const { size = DEFAULT_SIZE5, children, ref, ...sparProps } = rest;
-  return /* @__PURE__ */ jsx(InputProvider, { value: { size }, children: /* @__PURE__ */ jsx(Input$1, { ...sparProps, ref, ...rootAttrs, children }) });
+  const { size = DEFAULT_SIZE7, children, ref, ...sparProps } = rest;
+  const contextValue = 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 = [];
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === InputStrength) {
+      belowChildren.push(child);
+    } else {
+      rowChildren.push(child);
+    }
+  });
+  return /* @__PURE__ */ jsxs(InputProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(Input$1, { ...sparProps, ref, ...rootAttrs, children: rowChildren }),
+    belowChildren
+  ] });
 };
 Input.displayName = "Input";
-var InputContainer = (props) => {
-  const theme = useComponentTheme("InputContainer");
-  const { invalid, disabled, readOnly } = 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 } = 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 = 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 = useCallback(
+    (index) => {
+      if (disabled || readOnly) return;
+      setChips(chips.filter((_, i) => i !== index));
+    },
+    [chips, disabled, readOnly, setChips]
+  );
+  const removeLast = useCallback(() => {
+    if (disabled || readOnly || chips.length === 0) return;
+    setChips(chips.slice(0, -1));
+  }, [chips, disabled, readOnly, setChips]);
+  const clearId = useRef(/* @__PURE__ */ Symbol("input-chips")).current;
+  const clearAll = useCallback(() => {
+    if (disabled || readOnly) return;
+    setChips([]);
+  }, [disabled, readOnly, setChips]);
+  useEffect(() => {
+    setClearable(clearId, { hasContent: chips.length > 0, clear: clearAll });
+    return () => setClearable(clearId, null);
+  }, [clearId, chips.length, clearAll, setClearable]);
+  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__ */ jsxs(Component, { ...rendered, ref, ...rootAttrs, children: [
-    startContent != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", ...slotAttrs("startContent"), children: startContent }),
-    children,
-    endContent != null && /* @__PURE__ */ 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__ */ 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 } = 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__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...clearRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      startContent: children ?? /* @__PURE__ */ jsx(PlaceholderClose, {})
+    }
+  );
+};
+InputClearButton.displayName = "Input.ClearButton";
+var InputDecrement = (props) => {
+  const theme = useComponentTheme("InputDecrement");
+  const { disabled, readOnly } = 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__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...decrementRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      disabled: disabled || readOnly,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      startContent: children ?? /* @__PURE__ */ 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 } = rest;
-  return /* @__PURE__ */ jsx(InputField$1, { ...spar, 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 } = rest;
+  const effectiveType = type === "password" && revealed ? "text" : type;
+  const renderedType = as === "textarea" ? void 0 : effectiveType;
+  const setFieldRef = 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]
+  );
+  useEffect(() => {
+    const node = fieldRef.current;
+    if (node) setFieldValue(node.value);
+  }, [fieldRef, setFieldValue, spar.value, spar.defaultValue]);
+  useEffect(() => () => setRevealed(false), [setRevealed]);
+  const handleInput = (event) => {
+    onInput?.(event);
+    setFieldValue(event.currentTarget.value);
+  };
+  const handleChange = (event) => {
+    onChange?.(event);
+    setFieldValue(event.currentTarget.value);
+  };
+  return /* @__PURE__ */ jsx(
+    InputField$1,
+    {
+      ...spar,
+      as,
+      type: renderedType,
+      onInput: handleInput,
+      onChange: handleChange,
+      ref: setFieldRef,
+      ...rootAttrs
+    }
+  );
 };
 InputField.displayName = "Input.Field";
+var InputIncrement = (props) => {
+  const theme = useComponentTheme("InputIncrement");
+  const { disabled, readOnly } = 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__ */ jsx(
+    Button,
+    {
+      ...buttonProps,
+      ...incrementRootAttrs,
+      ref,
+      type: "button",
+      appearance: "text",
+      rounded: true,
+      size,
+      disabled: disabled || readOnly,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      startContent: children ?? /* @__PURE__ */ 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__ */ 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__ */ jsx(Component, { ...rendered, ref, ...rootAttrs, children });
 };
 InputPrefix.displayName = "Input.Prefix";
+var InputRevealButton = (props) => {
+  const theme = useComponentTheme("InputRevealButton");
+  const { disabled, readOnly } = 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;
+  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__ */ 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__ */ jsx(PlaceholderEyeOff, {}) : /* @__PURE__ */ 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__ */ jsx(Component, { "aria-hidden": "true", ...rendered, ref, ...rootAttrs, children: children ?? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(Label$1, { ...sparProps, as, ref, ...rootAttrs, children });
+};
+Label.displayName = "Label";
 
 // src/components/radio/base.ts
 var RadioBase = createComponentBase({
@@ -918,22 +2074,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_SIZE8 = "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_SIZE8, 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_SIZE8,
     position = DEFAULT_POSITION,
     invalid,
     // `spread` is consumed only as a data-attr above; destructure to keep it
@@ -944,7 +2097,7 @@ var Radio = (props) => {
     ref,
     ...sparProps
   } = rest;
-  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: { size, type, position }, children: /* @__PURE__ */ jsx(Radio$1, { ...sparProps, invalid, ...rootAttrs, ref, children }) });
+  return /* @__PURE__ */ jsx(RadioGroupProvider, { value: { size, position }, children: /* @__PURE__ */ jsx(Radio$1, { ...sparProps, invalid, ...rootAttrs, ref, children }) });
 };
 Radio.displayName = "Radio";
 var RadioIndicator = (props) => {
@@ -968,7 +2121,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
     })
   });
@@ -1052,11 +2204,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
     })
   });
@@ -1111,8 +2263,22 @@ 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",
@@ -1144,17 +2310,17 @@ var SelectSeparatorBase = createComponentBase({
 var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
 
 // src/components/select/defaults.ts
-var DEFAULT_SIZE7 = "base";
+var DEFAULT_SIZE9 = "base";
 var DEFAULT_CONTENT_WIDTH = "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_SIZE9, 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_SIZE9, invalid = false, contentWidth = DEFAULT_CONTENT_WIDTH, children, ref, ...sparProps } = rest;
   return /* @__PURE__ */ jsx(SelectProvider, { value: { size, invalid, contentWidth }, children: /* @__PURE__ */ jsx(Select$1, { ...sparProps, ref, ...rootAttrs, children }) });
 };
 Select.displayName = "Select";
@@ -1167,10 +2333,44 @@ var SelectTrigger = (props) => {
       "data-invalid": invalid ? "" : void 0
     })
   });
-  const { children, ref, ...spar } = rest;
-  return /* @__PURE__ */ jsx(SelectTrigger$1, { ...spar, ref, ...rootAttrs, children });
+  const { children, indicator, ref, ...spar } = rest;
+  const showIndicator = indicator !== false && indicator !== null;
+  const consumerOwnsLayout = typeof children === "function";
+  if (!showIndicator || consumerOwnsLayout) {
+    return /* @__PURE__ */ jsx(SelectTrigger$1, { ...spar, 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__ */ jsx(SelectTrigger$1, { ...spar, ref, ...rootAttrs, children: (state) => {
+    const value = children ?? (state.label || spar.placeholder);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { ...valueAttrs, children: value }),
+      /* @__PURE__ */ jsx("span", { ...indicatorAttrs, "aria-hidden": "true", children: resolveIndicatorNode({ isOpen: state.isOpen }) })
+    ] });
+  } });
 };
 SelectTrigger.displayName = "Select.Trigger";
+var SelectIndicator = (props) => {
+  const theme = useComponentTheme("SelectIndicator");
+  const { isOpen } = 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__ */ jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
+};
+SelectIndicator.displayName = "Select.Indicator";
 var resolveStaticWidth = (mode) => {
   if (mode === "trigger" || mode === "content") return void 0;
   return typeof mode === "number" ? `${mode}px` : mode;
@@ -1241,6 +2441,7 @@ SelectSeparator.displayName = "Select.Separator";
 // src/components/select/index.ts
 var Select2 = Object.assign(Select, {
   Trigger: SelectTrigger,
+  Indicator: SelectIndicator,
   Content: SelectContent,
   Item: SelectItem,
   Group: SelectGroup,
@@ -1248,6 +2449,79 @@ var Select2 = Object.assign(Select, {
   Separator: SelectSeparator
 });
 
+// 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_APPEARANCE5 = "rounded";
+var DEFAULT_SIZE10 = "base";
+var DEFAULT_VARIANT6 = "neutral";
+var DEFAULT_ARIA_LABEL = "Loading";
+var SPINNER_RADIAL_PARTS = 8;
+var SPINNER_THREE_DOT_PARTS = 3;
+var renderIndicatorContent = (appearance) => {
+  if (appearance === "rounded") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("circle", { cx: "20", cy: "20", r: "16.6667" }) }),
+      /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ jsx("path", { d: "M20 3.3333A16.6667 16.6667 0 0 1 36.6667 20" }) })
+    ] });
+  }
+  if (appearance === "loader") {
+    return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "lines") {
+    return Array.from({ length: SPINNER_RADIAL_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-line" }, index));
+  }
+  if (appearance === "threeDots") {
+    return Array.from({ length: SPINNER_THREE_DOT_PARTS }, (_, index) => /* @__PURE__ */ jsx("span", { className: "tk-spinner-dot" }, index));
+  }
+  if (appearance === "logo") {
+    return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 48 48", children: /* @__PURE__ */ 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_VARIANT6, size = DEFAULT_SIZE10, appearance: appearance2 = DEFAULT_APPEARANCE5 }) => ({
+      "data-variant": variant,
+      "data-size": size,
+      "data-type": appearance2
+    })
+  });
+  const { variant: _variant, size: _size, appearance = DEFAULT_APPEARANCE5, 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_LABEL)
+  };
+  return /* @__PURE__ */ jsx("span", { ...accessibilityAttrs, ...nativeProps, ...rootAttrs, ref, children: /* @__PURE__ */ jsx("span", { ...indicatorSlotAttrs, "aria-hidden": "true", children: renderIndicatorContent(appearance) }) });
+};
+Spinner.displayName = "Spinner";
+
 // src/components/switch/base.ts
 var SwitchBase = createComponentBase({
   name: "Switch",
@@ -1265,12 +2539,12 @@ var SwitchBase = createComponentBase({
 var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
 
 // src/components/switch/defaults.ts
-var DEFAULT_SIZE8 = "base";
-var DEFAULT_VARIANT4 = "info";
+var DEFAULT_SIZE11 = "base";
+var DEFAULT_VARIANT7 = "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_SIZE11, variant = DEFAULT_VARIANT7 }) => ({
       "data-size": size,
       "data-variant": variant
     })
@@ -1287,28 +2561,19 @@ var Switch = (props) => {
     ref,
     ...sparProps
   } = rest;
-  return /* @__PURE__ */ jsx(
-    Switch$1,
+  return /* @__PURE__ */ jsx(Switch$1, { ...sparProps, invalid, ref, ...rootAttrs, children: (state) => /* @__PURE__ */ jsx(
+    SwitchProvider,
     {
-      ...sparProps,
-      invalid,
-      ref,
-      ...rootAttrs,
-      children: (state) => /* @__PURE__ */ 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) => {
@@ -1336,6 +2601,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_SIZE12 = "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" || 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 = flexRender(column.columnDef.cell, cell.getContext());
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
+    Checkbox2,
+    {
+      "aria-label": "Select all rows",
+      checked: allSelected,
+      indeterminate: table.getIsSomePageRowsSelected() && !allSelected,
+      onChange: (checked) => table.toggleAllPageRowsSelected(checked),
+      children: /* @__PURE__ */ 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__ */ 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__ */ jsx(Radio2, { "aria-label": "Select row", value: row.getIsSelected() ? row.id : "", onChange: () => row.toggleSelected(true), children: /* @__PURE__ */ jsx(Radio2.Item, { value: row.id, disabled: !row.getCanSelect(), children: /* @__PURE__ */ jsx(Radio2.Indicator, {}) }) }) : /* @__PURE__ */ jsx(Checkbox2, { "aria-label": "Select row", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: (checked) => row.toggleSelected(checked), children: /* @__PURE__ */ 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__ */ 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__ */ jsx("td", { ...attrs, "data-sticky": sticky.dataSticky, style: mergeStyle(attrs.style, sticky.style, { width: UTILITY_COLUMN_WIDTH }), children: row.getCanExpand() && /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...slotAttrs("expandButton"),
+      type: "button",
+      "aria-label": expanded ? "Collapse row" : "Expand row",
+      "aria-expanded": expanded,
+      onClick: row.getToggleExpandedHandler(),
+      children: expanded ? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(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__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs("tr", { ...slotAttrs("row"), "data-selected": selected ? "" : void 0, children: [
+      hasSelection && /* @__PURE__ */ jsx(SelectionBodyCell, { row }),
+      hasExpansion && /* @__PURE__ */ jsx(ExpandBodyCell, { row }),
+      row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { cell }, cell.id))
+    ] }),
+    showDetailPanel && /* @__PURE__ */ jsx("tr", { ...slotAttrs("expandedRow"), children: /* @__PURE__ */ 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__ */ jsx("tbody", { ...slotAttrs("body"), children: rows.length === 0 ? /* @__PURE__ */ jsx("tr", { ...slotAttrs("row"), children: /* @__PURE__ */ jsx("td", { ...slotAttrs("empty"), colSpan: totalColumnCount, children: loading ? null : emptyState ?? "No data" }) }) : rows.map((row) => /* @__PURE__ */ 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] = 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__ */ jsxs(Popover2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover2.Trigger, { className: FILTER_BUTTON_CLASS, "aria-label": "Filter column", "data-active": active ? "" : void 0, children: /* @__PURE__ */ jsx(SearchIconOutlinedRounded, { "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs(Popover2.Content, { className: "tk-table-filter-panel", children: [
+      /* @__PURE__ */ jsx("div", { ...slotAttrs("filterPanel"), children: filter.render ? filter.render(ctx) : /* @__PURE__ */ jsx(PresetFilterControl, { filter, ctx }) }),
+      active && /* @__PURE__ */ 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__ */ jsx(Input2, { children: /* @__PURE__ */ jsx(
+      Input2.Field,
+      {
+        type: "search",
+        placeholder,
+        value: typeof value === "string" ? value : "",
+        onChange: (event) => setValue(event.target.value || void 0)
+      }
+    ) });
+  }
+  if (type === "select") {
+    return /* @__PURE__ */ jsx(SelectFilter, { options, placeholder, value: typeof value === "string" ? value : "", onChange: (next) => setValue(next || void 0) });
+  }
+  if (type === "radio") {
+    return /* @__PURE__ */ jsx(Radio2, { value: typeof value === "string" ? value : "", onChange: (next) => setValue(next || void 0), children: options.map((option) => /* @__PURE__ */ jsx(Radio2.Item, { value: option.value, children: /* @__PURE__ */ jsx(Radio2.Label, { children: option.label }) }, option.value)) });
+  }
+  if (type === "checkbox" || type === "multi-select") {
+    return /* @__PURE__ */ 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__ */ jsxs(Select2, { value, onChange, children: [
+    /* @__PURE__ */ jsx(Select2.Trigger, { children: selected ? selected.label : placeholder ?? "Select" }),
+    /* @__PURE__ */ jsx(Select2.Content, { children: options.map((option) => /* @__PURE__ */ jsx(Select2.Item, { value: option.value, children: option.label }, option.value)) })
+  ] });
+};
+var CheckboxListFilter = ({ options, value, onChange }) => /* @__PURE__ */ jsx(Fragment, { children: options.map((option) => {
+  const checked = value.includes(option.value);
+  return /* @__PURE__ */ 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__ */ 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 : flexRender(column.columnDef.header, header.getContext());
+  return /* @__PURE__ */ 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__ */ jsxs("div", { ...slotAttrs("headerContent"), children: [
+        canSort ? /* @__PURE__ */ jsxs("button", { ...slotAttrs("sortTrigger"), type: "button", onClick: column.getToggleSortingHandler(), children: [
+          content,
+          /* @__PURE__ */ jsx("span", { ...slotAttrs("sortIcon"), "data-direction": sorted || "none", "aria-hidden": "true", children: sorted === "asc" ? /* @__PURE__ */ jsx(ChevronTopIconOutlinedRounded, {}) : sorted === "desc" ? /* @__PURE__ */ jsx(ChevronBottomIconOutlinedRounded, {}) : /* @__PURE__ */ jsx(SwapIconOutlinedRounded, {}) })
+        ] }) : content,
+        canFilter && /* @__PURE__ */ jsx(TableColumnFilter, { header })
+      ] })
+    }
+  );
+};
+TableHeaderCell.displayName = "Table.HeaderCell";
+var TableHeader = () => {
+  const { table, slotAttrs, hasSelection, hasExpansion } = useTableContext("Table.Header");
+  return /* @__PURE__ */ jsx("thead", { ...slotAttrs("header"), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsxs("tr", { ...slotAttrs("headerRow"), children: [
+    hasSelection && /* @__PURE__ */ jsx(SelectionHeaderCell, {}),
+    hasExpansion && /* @__PURE__ */ jsx(ExpandHeaderCell, {}),
+    headerGroup.headers.map((header) => /* @__PURE__ */ 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] = 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__ */ jsxs("div", { ...slotAttrs("pagination"), role: "navigation", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsxs("div", { ...slotAttrs("paginationInfo"), children: [
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: pageCount > 0 ? `Page ${pageIndex + 1} of ${pageCount}` : `Page ${pageIndex + 1}` }),
+      /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: itemsLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ...slotAttrs("paginationNav"), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "First page",
+          startContent: /* @__PURE__ */ jsx(ArrowLeftIconOutlinedRounded, {}),
+          disabled: !table.getCanPreviousPage(),
+          onClick: () => table.setPageIndex(0)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Previous page",
+          startContent: /* @__PURE__ */ jsx(ChevronLeftIconOutlinedRounded, {}),
+          disabled: !table.getCanPreviousPage(),
+          onClick: () => table.previousPage()
+        }
+      ),
+      paginationItems.map((item) => {
+        if (typeof item !== "number") {
+          return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2026" }, item);
+        }
+        const pageNumber = item + 1;
+        const current = item === pageIndex;
+        return /* @__PURE__ */ 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__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Next page",
+          startContent: /* @__PURE__ */ jsx(ChevronRightIconOutlinedRounded, {}),
+          disabled: !table.getCanNextPage() || pageCount <= 0,
+          onClick: () => table.nextPage()
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "neutral",
+          appearance: "text",
+          "aria-label": "Last page",
+          startContent: /* @__PURE__ */ jsx(ArrowRightIconOutlinedRounded, {}),
+          disabled: !table.getCanNextPage() || pageCount <= 0,
+          onClick: () => table.setPageIndex(pageCount - 1)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { ...slotAttrs("paginationActions"), children: [
+      /* @__PURE__ */ jsx("div", { ...slotAttrs("paginationSize"), children: /* @__PURE__ */ jsxs(Select2, { size: "small", value: String(pageSize), onChange: (value) => table.setPageSize(Number(value)), children: [
+        /* @__PURE__ */ jsx(Select2.Trigger, { "aria-label": "Rows per page", children: pageSize }),
+        /* @__PURE__ */ jsx(Select2.Content, { children: sizeOptions.map((option) => /* @__PURE__ */ jsx(Select2.Item, { value: String(option), children: option }, option)) })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { ...slotAttrs("paginationGoToPage"), children: /* @__PURE__ */ jsxs(Input2, { size: "small", children: [
+        /* @__PURE__ */ 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__ */ jsx(Input2.TrailingIcon, { as: "button", type: "button", "aria-label": "Go to page", disabled: pageCount <= 0, onClick: goToPage, children: /* @__PURE__ */ jsx(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_SIZE12, 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_SIZE12,
+    striped = false,
+    bordered = false,
+    stickyHeader = false,
+    selection,
+    sorting: sortingConfig,
+    filtering,
+    expansion,
+    pagination,
+    onDataRequest,
+    emptyState,
+    getSubRows,
+    tableRef,
+    ref
+  } = rest;
+  const { classNames, slotProps } = props;
+  const tanstackColumns = 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] = 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 = useMemo(readPaginationSlice, []);
+  const paginationControlled = manual && !!paginationConfig;
+  const controlledPagination = 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(functionalUpdate(updater, sorting));
+    resetPageOnManual();
+  };
+  const onColumnFiltersChange = (updater) => {
+    setFilters(functionalUpdate(updater, columnFilters));
+    resetPageOnManual();
+  };
+  const onRowSelectionChange = (updater) => setSelection(functionalUpdate(updater, rowSelection));
+  const onExpandedChange = (updater) => setExpanded(functionalUpdate(updater, expanded));
+  const onPaginationChange = (updater) => setPagination(functionalUpdate(updater, paginationValue));
+  const table = 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: getCoreRowModel(),
+    getSortedRowModel: manual ? void 0 : getSortedRowModel(),
+    getFilteredRowModel: manual ? void 0 : getFilteredRowModel(),
+    getExpandedRowModel: hasExpansion ? getExpandedRowModel() : void 0,
+    getPaginationRowModel: paginationEnabled && !manual ? getPaginationRowModel() : void 0,
+    getSubRows,
+    getRowCanExpand: hasExpansion && !getSubRows ? () => true : void 0
+  });
+  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 = useRef(onDataRequest);
+  onDataRequestRef.current = onDataRequest;
+  const dataRequestKey = useMemo(() => JSON.stringify({ pagination: paginationValue, sorting, filters: columnFilters }), [paginationValue, sorting, columnFilters]);
+  useEffect(() => {
+    if (!manual) return;
+    onDataRequestRef.current?.({ pagination: paginationValue, sorting, filters: columnFilters });
+  }, [manual, dataRequestKey]);
+  useEffect(() => {
+    if (paginationControlled || paginationConfig?.pageSize == null) return;
+    if (table.getState().pagination.pageSize === paginationConfig.pageSize) return;
+    table.setPageSize(paginationConfig.pageSize);
+  }, [paginationControlled, paginationConfig?.pageSize, table]);
+  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 = 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 = 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__ */ jsx(TableProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...rootAttrs, ref, children: [
+    /* @__PURE__ */ jsx("div", { ...tableViewportAttrs, "data-scrolled": tableViewportScrolled ? "" : void 0, onScroll: handleTableViewportScroll, children: /* @__PURE__ */ jsxs("table", { ...slotAttrs("table"), "aria-busy": loading || void 0, children: [
+      /* @__PURE__ */ jsx(TableHeader, {}),
+      /* @__PURE__ */ jsx(TableBody, {})
+    ] }) }),
+    paginationEnabled && /* @__PURE__ */ 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__ */ jsx("div", { ...slotAttrs("loading"), children: /* @__PURE__ */ 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_SIZE13 = "base";
+var DEFAULT_VARIANT8 = "primary";
+var DEFAULT_APPEARANCE6 = "basic";
+var Tabs = (props) => {
+  const theme = useComponentTheme("Tabs");
+  const { rootAttrs, rest } = composeRootAttrs(TabsBase, props, theme, {
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE13, variant: variant2 = DEFAULT_VARIANT8, appearance: appearance2 = DEFAULT_APPEARANCE6 }) => ({
+      "data-size": size2,
+      "data-variant": variant2,
+      "data-type": appearance2
+    })
+  });
+  const { size = DEFAULT_SIZE13, variant = DEFAULT_VARIANT8, appearance = DEFAULT_APPEARANCE6, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsx(TabsOwnProvider, { value: { size, variant, appearance }, children: /* @__PURE__ */ jsx(Tabs$1, { ...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__ */ jsx(TabsList$1, { ...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__ */ jsx(TabsTrigger$1, { ...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__ */ jsx(TabsContent$1, { ...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__ */ jsx(Tooltip$1, { id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled, children });
 };
@@ -1390,11 +3519,11 @@ var TooltipTrigger = (props) => {
 TooltipTrigger.displayName = "Tooltip.Trigger";
 
 // src/components/tooltip/defaults.ts
-var DEFAULT_VARIANT5 = "dark";
+var DEFAULT_VARIANT9 = "white";
 var TooltipContent = (props) => {
   const theme = useComponentTheme("TooltipContent");
   const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
-    stateAttrs: ({ variant = DEFAULT_VARIANT5 }) => ({
+    stateAttrs: ({ variant = DEFAULT_VARIANT9 }) => ({
       "data-variant": variant
     })
   });
@@ -1434,4 +3563,74 @@ var Tooltip2 = Object.assign(Tooltip, {
   Arrow: TooltipArrow
 });
 
-export { Accordion2 as Accordion, Badge, Button, Checkbox2 as Checkbox, Drawer2 as Drawer, Field2 as Field, Input2 as Input, Popover2 as Popover, Radio2 as Radio, Select2 as Select, Switch2 as Switch, TakeoffSparProvider, Tooltip2 as Tooltip, useComponentTheme, useTheme };
+// 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__ */ jsx(Toast$1.Root, { ...toastProps, as: Component, ref, toast, toaster, ...rootAttrs, children: children ?? /* @__PURE__ */ jsxs(Alert2, { variant, appearance, role: "presentation", children: [
+    /* @__PURE__ */ jsxs(Alert2.Content, { children: [
+      toast.title != null && /* @__PURE__ */ jsx(Toast$1.Title, { as: Alert2.Title, children: toast.title }),
+      toast.description != null && /* @__PURE__ */ jsx(Toast$1.Description, { as: Alert2.Description, children: toast.description })
+    ] }),
+    /* @__PURE__ */ jsx(Toast$1.Close, { as: Alert2.Close, "aria-label": closeLabel }),
+    toast.action && /* @__PURE__ */ jsx(Alert2.Actions, { children: /* @__PURE__ */ jsx(Toast$1.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__ */ jsx(Toaster$1, { ...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__ */ jsx(Fragment$1, { children: children(toast) }, toast.id) : /* @__PURE__ */ jsx(Toast, { toast, toaster, appearance, closeLabel }, toast.id)
+  ) });
+};
+Toaster.displayName = "Toaster";
+
+export { Accordion2 as Accordion, Alert2 as Alert, Badge, Breadcrumb2 as Breadcrumb, Button, Card2 as Card, Checkbox2 as Checkbox, Chip, Dialog2 as Dialog, Drawer2 as Drawer, Field2 as Field, Input2 as Input, Label, Popover2 as Popover, Radio2 as Radio, Select2 as Select, Spinner, Switch2 as Switch, Table, Tabs2 as Tabs, TakeoffSparProvider, Toast, Toaster, Tooltip2 as Tooltip, getExportRows, useComponentTheme, useTheme };