@takeoff-ui/react-spar 0.1.0-beta.0

package/dist/index.cjs

@@ -0,0 +1,1452 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var spar = require('@turkish-technology/spar');
+var clsx = require('clsx');
+
+// src/provider.tsx
+
+// src/utils/isDevelopment.ts
+var isDevelopment = () => typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
+var TakeoffSparContext = react.createContext(void 0);
+var TakeoffSparProvider = ({ children, colorMode = "light", locale, components }) => {
+  react.useEffect(() => {
+    const html = document.documentElement;
+    const previous = html.dataset.theme;
+    html.dataset.theme = colorMode;
+    return () => {
+      if (previous === void 0) {
+        delete html.dataset.theme;
+      } else {
+        html.dataset.theme = previous;
+      }
+    };
+  }, [colorMode]);
+  react.useEffect(() => {
+    if (!locale) return;
+    const html = document.documentElement;
+    const previous = html.lang;
+    html.lang = locale;
+    return () => {
+      html.lang = previous;
+    };
+  }, [locale]);
+  const value = react.useMemo(() => ({ colorMode, locale, components }), [colorMode, locale, components]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TakeoffSparContext.Provider, { value, children });
+};
+var DEFAULT_THEME = { colorMode: "light" };
+var useThemeWarningEmitted = false;
+var useTheme = () => {
+  const context = react.useContext(TakeoffSparContext);
+  if (context === void 0) {
+    if (isDevelopment() && !useThemeWarningEmitted) {
+      useThemeWarningEmitted = true;
+      console.warn(
+        '[TakeoffSparProvider] `useTheme` was called outside a provider; falling back to `{ colorMode: "light" }`. Wrap your app in <TakeoffSparProvider> to customize.'
+      );
+    }
+    return DEFAULT_THEME;
+  }
+  return { colorMode: context.colorMode };
+};
+var useComponentTheme = (componentName) => {
+  const context = react.useContext(TakeoffSparContext);
+  return context?.components?.[componentName];
+};
+var buildSlotAttrs = (canonicalAttrs, slotKey, layers = {}) => {
+  const { themeSlotProps, themeClassNames, themeClassName, instanceSlotProps, instanceClassNames } = layers;
+  const themeForSlot = themeSlotProps?.[slotKey];
+  const instanceForSlot = instanceSlotProps?.[slotKey];
+  const resolvedThemeClass = themeClassNames?.[slotKey] ?? (slotKey === "root" ? themeClassName : void 0);
+  const resolvedInstanceClass = instanceClassNames?.[slotKey];
+  const composedClassName = clsx.clsx(canonicalAttrs.className, resolvedThemeClass, resolvedInstanceClass) || void 0;
+  return {
+    ...themeForSlot,
+    ...instanceForSlot,
+    ...canonicalAttrs,
+    className: composedClassName
+  };
+};
+
+// src/core/composeRootAttrs.ts
+var dropUndefined = (attrs) => {
+  const out = {};
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value !== void 0) out[key] = value;
+  }
+  return out;
+};
+var composeRootAttrs = (base, props, theme, options) => {
+  const merged = base.resolveProps(props, theme?.defaultProps);
+  const { className, classNames, slotProps, ...rest } = merged;
+  const rootSlot = "root";
+  const rootAttrs = buildSlotAttrs(base.getSlotProps(rootSlot, { className }), rootSlot, {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    themeClassName: theme?.className,
+    instanceSlotProps: slotProps,
+    instanceClassNames: classNames
+  });
+  const stateAttrs = options?.stateAttrs ? dropUndefined(options.stateAttrs(merged)) : void 0;
+  const composed = stateAttrs ? { ...rootAttrs, ...stateAttrs } : rootAttrs;
+  return {
+    rootAttrs: composed,
+    rest
+  };
+};
+var toDataSlotName = (slot) => slot.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+var createComponentBase = (config) => {
+  const { name, slots, classes, defaultProps = {} } = config;
+  const getSlotProps = (slot, attrs) => {
+    const { className: instanceClassName, ...rest } = attrs ?? {};
+    const composed = clsx.clsx(classes[slot], instanceClassName);
+    return {
+      ...rest,
+      "data-slot": toDataSlotName(slot),
+      "className": composed || void 0
+    };
+  };
+  const resolveProps = (props, themeDefaults) => ({
+    ...defaultProps,
+    ...themeDefaults,
+    ...props
+  });
+  return {
+    name,
+    slots,
+    classes,
+    defaultProps,
+    getSlotProps,
+    resolveProps
+  };
+};
+
+// src/components/accordion/base.ts
+var AccordionBase = createComponentBase({
+  name: "Accordion",
+  slots: ["root"],
+  classes: { root: "tk-accordion" }
+});
+var AccordionItemBase = createComponentBase({
+  name: "AccordionItem",
+  slots: ["root"],
+  classes: { root: "tk-accordion-item" }
+});
+var AccordionHeaderBase = createComponentBase({
+  name: "AccordionHeader",
+  slots: ["root"],
+  classes: { root: "" }
+});
+var AccordionTriggerBase = createComponentBase({
+  name: "AccordionTrigger",
+  slots: ["root", "startContent", "title"],
+  classes: {
+    root: "tk-accordion-item-header",
+    startContent: "tk-accordion-item-start-content",
+    title: "tk-accordion-item-title"
+  }
+});
+var AccordionIndicatorBase = createComponentBase({
+  name: "AccordionIndicator",
+  slots: ["root"],
+  classes: { root: "tk-accordion-item-indicator" }
+});
+var AccordionContentBase = createComponentBase({
+  name: "AccordionContent",
+  slots: ["root"],
+  classes: { root: "tk-accordion-item-content" }
+});
+function createSafeContext(displayName) {
+  const Context = react.createContext(null);
+  Context.displayName = displayName;
+  const Provider = ({ value, children }) => react.createElement(Context.Provider, { value }, children);
+  Provider.displayName = `${displayName}.Provider`;
+  const useSafeContext = (consumerName) => {
+    const context = react.useContext(Context);
+    if (context === null) {
+      throw new Error(`${consumerName ?? "Hook"} must be used within ${displayName}`);
+    }
+    return context;
+  };
+  return [Provider, useSafeContext];
+}
+
+// src/components/accordion/context.ts
+var [AccordionProvider, useAccordionOwnContext] = createSafeContext("AccordionProvider");
+
+// src/components/accordion/defaults.ts
+var DEFAULT_TYPE = "grouped";
+var DEFAULT_MODE = "default";
+var DEFAULT_SIZE = "base";
+var Accordion = (props) => {
+  const theme = useComponentTheme("Accordion");
+  const { rootAttrs, rest } = composeRootAttrs(AccordionBase, props, theme, {
+    stateAttrs: ({ mode: mode2 = DEFAULT_MODE, size: size2 = DEFAULT_SIZE, disabled: disabled2 }) => ({
+      "data-mode": mode2,
+      "data-size": size2,
+      "data-disabled": disabled2 ? "" : void 0
+    })
+  });
+  const { type = DEFAULT_TYPE, mode = DEFAULT_MODE, size = DEFAULT_SIZE, multiple = false, collapsible = true, disabled = false, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionProvider,
+    {
+      value: {
+        type,
+        mode,
+        size
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(spar.Accordion, { ...sparProps, multiple, collapsible, disabled, ref, ...rootAttrs, children })
+    }
+  );
+};
+Accordion.displayName = "Accordion";
+var AccordionItem = (props) => {
+  const theme = useComponentTheme("AccordionItem");
+  const { type, mode, size } = useAccordionOwnContext("Accordion.Item");
+  const { rootAttrs, rest } = composeRootAttrs(AccordionItemBase, props, theme, {
+    stateAttrs: () => ({
+      "data-type": type,
+      "data-mode": mode,
+      "data-size": size
+    })
+  });
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.AccordionItem, { ...spar$1, ...rootAttrs, ref, children });
+};
+AccordionItem.displayName = "Accordion.Item";
+var AccordionHeader = (props) => {
+  const theme = useComponentTheme("AccordionHeader");
+  const { rootAttrs, rest } = composeRootAttrs(AccordionHeaderBase, props, theme);
+  const { children, level, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.AccordionHeader, { ...spar$1, level, ...rootAttrs, ref, children });
+};
+AccordionHeader.displayName = "Accordion.Header";
+var DEFAULT_EXPAND_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var DEFAULT_COLLAPSE_ICON = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10L8 6L12 10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var AccordionIndicator = (props) => {
+  const theme = useComponentTheme("AccordionIndicator");
+  const { isOpen } = spar.useAccordionItemContext();
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(AccordionIndicatorBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  const resolved = typeof children === "function" ? children({ isOpen }) : children ?? (isOpen ? DEFAULT_COLLAPSE_ICON : DEFAULT_EXPAND_ICON);
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, "aria-hidden": "true", ...rootAttrs, children: resolved });
+};
+AccordionIndicator.displayName = "Accordion.Indicator";
+var AccordionTrigger = (props) => {
+  const theme = useComponentTheme("AccordionTrigger");
+  const { rootAttrs, rest } = composeRootAttrs(AccordionTriggerBase, props, theme);
+  const { children, startContent, ref, ...spar$1 } = rest;
+  const slotLayers = {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  };
+  const startContentNode = startContent !== void 0 && startContent !== null && /* @__PURE__ */ jsxRuntime.jsx("span", { ...buildSlotAttrs(AccordionTriggerBase.getSlotProps("startContent"), "startContent", slotLayers), children: startContent });
+  const inlineNodes = [];
+  let titleBuffer = [];
+  let titleKey = 0;
+  const flushTitle = () => {
+    if (titleBuffer.length === 0) return;
+    inlineNodes.push(
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ...buildSlotAttrs(AccordionTriggerBase.getSlotProps("title"), "title", slotLayers), children: titleBuffer }, `title-${titleKey++}`)
+    );
+    titleBuffer = [];
+  };
+  react.Children.toArray(children).forEach((child) => {
+    if (react.isValidElement(child) && child.type === AccordionIndicator) {
+      flushTitle();
+      inlineNodes.push(child);
+    } else {
+      titleBuffer.push(child);
+    }
+  });
+  flushTitle();
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.AccordionTrigger, { ...spar$1, ...rootAttrs, ref, children: [
+    startContentNode,
+    inlineNodes
+  ] });
+};
+AccordionTrigger.displayName = "Accordion.Trigger";
+var AccordionContent = (props) => {
+  const theme = useComponentTheme("AccordionContent");
+  const { rootAttrs, rest } = composeRootAttrs(AccordionContentBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.AccordionContent, { ...spar$1, ...rootAttrs, ref, children });
+};
+AccordionContent.displayName = "Accordion.Content";
+
+// src/components/accordion/index.ts
+var Accordion2 = Object.assign(Accordion, {
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent
+});
+
+// src/components/badge/base.ts
+var BadgeBase = createComponentBase({
+  name: "Badge",
+  slots: ["root", "label", "icon"],
+  classes: {
+    root: "tk-badge",
+    label: "tk-badge-label",
+    icon: "tk-badge-icon"
+  }
+});
+
+// src/components/badge/defaults.ts
+var DEFAULT_VARIANT = "primary";
+var DEFAULT_APPEARANCE = "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 }) => ({
+      "data-variant": variant,
+      "data-type": appearance,
+      "data-size": dot2 ? void 0 : size,
+      "data-rounded": rounded ? "" : void 0,
+      "data-dot": dot2 ? "" : void 0
+    })
+  });
+  const { variant: _variant, appearance: _appearance, size: _size, rounded: _rounded, dot = false, startContent, endContent, children, ref, ...nativeProps } = rest;
+  const labelSlotAttrs = buildSlotAttrs(BadgeBase.getSlotProps("label"), "label", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const iconSlotAttrs = buildSlotAttrs(BadgeBase.getSlotProps("icon"), "icon", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  if (dot) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ...nativeProps, ...rootAttrs, ref });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { ...nativeProps, ...rootAttrs, ref, children: [
+    startContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: startContent }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
+    endContent && /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconSlotAttrs, children: endContent })
+  ] });
+};
+Badge.displayName = "Badge";
+
+// src/components/button/base.ts
+var ButtonBase = createComponentBase({
+  name: "Button",
+  slots: ["root", "content", "label", "spinner"],
+  classes: {
+    root: "tk-button",
+    content: "tk-button-content",
+    label: "tk-button-label",
+    spinner: "tk-button-spinner"
+  }
+});
+
+// src/components/button/defaults.ts
+var DEFAULT_VARIANT2 = "primary";
+var DEFAULT_APPEARANCE2 = "filled";
+var DEFAULT_SIZE3 = "base";
+var Button = (props) => {
+  const theme = useComponentTheme("Button");
+  const { rootAttrs, rest } = composeRootAttrs(ButtonBase, props, theme, {
+    // `data-disabled` and `data-loading` are intentionally NOT set here —
+    // 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;
+      return {
+        "data-variant": variant,
+        "data-type": appearance,
+        "data-size": size,
+        "data-rounded": rounded ? "" : void 0,
+        "data-icon-only": isIconOnly ? "" : void 0
+      };
+    }
+  });
+  const {
+    // Visual props are consumed by `stateAttrs` above; destructured here to
+    // keep them off the underlying button DOM (otherwise they would leak via
+    // `...sparProps` as raw HTML attributes).
+    variant: _variant,
+    appearance: _appearance,
+    size: _size,
+    rounded: _rounded,
+    isLoading = false,
+    startContent,
+    endContent,
+    disabled = false,
+    children,
+    ref,
+    ...sparProps
+  } = rest;
+  const contentSlotAttrs = buildSlotAttrs(ButtonBase.getSlotProps("content"), "content", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const labelSlotAttrs = buildSlotAttrs(ButtonBase.getSlotProps("label"), "label", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const spinnerSlotAttrs = buildSlotAttrs(ButtonBase.getSlotProps("spinner"), "spinner", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.Button, { ...sparProps, disabled, isLoading, ref, ...rootAttrs, children: [
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...spinnerSlotAttrs }),
+    startContent && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: startContent }),
+    children && /* @__PURE__ */ jsxRuntime.jsx("span", { ...labelSlotAttrs, children }),
+    endContent && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { ...contentSlotAttrs, children: endContent })
+  ] });
+};
+Button.displayName = "Button";
+
+// src/components/checkbox/base.ts
+var CheckboxBase = createComponentBase({
+  name: "Checkbox",
+  slots: ["root", "indicator", "icon"],
+  classes: {
+    root: "tk-checkbox",
+    // @archetype react-enhancement — visible box (Core's `.mask`).
+    indicator: "tk-checkbox-indicator",
+    // @archetype react-enhancement — check / dash glyph inside the indicator.
+    icon: "tk-checkbox-icon"
+  }
+});
+
+// src/components/checkbox/context.ts
+var [CheckboxProvider, useCheckboxOwnContext] = createSafeContext("CheckboxProvider");
+
+// src/components/checkbox/defaults.ts
+var DEFAULT_SIZE4 = "base";
+var DEFAULT_TYPE2 = "default";
+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
+    })
+  });
+  const { classNames, slotProps } = props;
+  const {
+    // Visual props are consumed via `stateAttrs`; destructured to keep them
+    // off the rendered DOM where they would leak as raw HTML attributes.
+    size: _size,
+    type: _type,
+    // `invalid` is forwarded to Spar as `invalid` (same name).
+    invalid = false,
+    // takeoff-spar tri-state vocabulary; mapped to Spar's `CheckedState` below.
+    checked,
+    defaultChecked,
+    indeterminate = false,
+    onChange,
+    // Behavior props owned by Spar — defaults are restated here so they also
+    // flow into the context for compound sub-components (asterisk on Label).
+    disabled = false,
+    readOnly = false,
+    required = false,
+    children,
+    ref,
+    ...sparProps
+  } = rest;
+  const sparChecked = indeterminate ? "indeterminate" : checked;
+  const sparDefaultChecked = indeterminate ? "indeterminate" : defaultChecked;
+  const handleSparChange = onChange ? (next) => onChange(next === true) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    spar.Checkbox,
+    {
+      ...sparProps,
+      checked: sparChecked,
+      defaultChecked: sparDefaultChecked,
+      onChange: handleSparChange,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      ref,
+      ...rootAttrs,
+      children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+        CheckboxProvider,
+        {
+          value: {
+            classNames,
+            slotProps,
+            required,
+            invalid,
+            disabled: state.disabled,
+            readOnly: state.readOnly,
+            checked: state.checked === true,
+            indeterminate: state.checked === "indeterminate"
+          },
+          children: typeof children === "function" ? children(state) : children
+        }
+      )
+    }
+  );
+};
+Checkbox.displayName = "Checkbox";
+var baseSvgProps = {
+  "xmlns": "http://www.w3.org/2000/svg",
+  "width": "1em",
+  "height": "1em",
+  "viewBox": "0 0 24 24",
+  "fill": "none",
+  "stroke": "currentColor",
+  "strokeWidth": 2,
+  "strokeLinecap": "round",
+  "strokeLinejoin": "round",
+  "focusable": false,
+  "aria-hidden": true
+};
+var PlaceholderCheck = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "check", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12l5 5L20 7" }) });
+var PlaceholderRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseSvgProps, "data-placeholder-icon": "remove", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) });
+var CheckboxIndicator = (props) => {
+  const theme = useComponentTheme("Checkbox");
+  const { classNames, slotProps, checked, indeterminate } = useCheckboxOwnContext("Checkbox.Indicator");
+  const { className, children, ref, ...rest } = props;
+  const indicatorAttrs = buildSlotAttrs(CheckboxBase.getSlotProps("indicator", { className }), "indicator", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: slotProps,
+    instanceClassNames: classNames
+  });
+  const iconAttrs = buildSlotAttrs(CheckboxBase.getSlotProps("icon"), "icon", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: slotProps,
+    instanceClassNames: classNames
+  });
+  const resolvedChildren = typeof children === "function" ? children({ checked, indeterminate }) : children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(PlaceholderRemove, {}) : /* @__PURE__ */ jsxRuntime.jsx(PlaceholderCheck, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, ...indicatorAttrs, ref, children: resolvedChildren });
+};
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+
+// src/components/checkbox/index.ts
+var Checkbox2 = Object.assign(Checkbox, {
+  Indicator: CheckboxIndicator
+});
+
+// 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_INTENSITY = "base";
+var Drawer = (props) => {
+  const theme = useComponentTheme("Drawer");
+  const merged = { ...theme?.defaultProps, ...props };
+  const { placement = DEFAULT_PLACEMENT, dismissable = true, disabled = false, children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerProvider, { value: { placement, dismissable }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Dialog, { ...sparProps, disabled, forceMount: true, children }) });
+};
+Drawer.displayName = "Drawer";
+
+// src/components/drawer/base.ts
+createComponentBase({
+  name: "Drawer",
+  slots: ["root"],
+  classes: { root: "tk-drawer" }
+});
+var DrawerOverlayBase = createComponentBase({
+  name: "DrawerOverlay",
+  slots: ["root"],
+  classes: { root: "tk-drawer-overlay" }
+});
+var DrawerPanelBase = createComponentBase({
+  name: "DrawerPanel",
+  slots: ["root"],
+  classes: { root: "tk-drawer-panel" }
+});
+var DrawerHeaderBase = createComponentBase({
+  name: "DrawerHeader",
+  slots: ["root"],
+  classes: { root: "tk-drawer-header" }
+});
+var DrawerTitleBase = createComponentBase({
+  name: "DrawerTitle",
+  slots: ["root"],
+  classes: { root: "tk-drawer-title" }
+});
+var DrawerDescriptionBase = createComponentBase({
+  name: "DrawerDescription",
+  slots: ["root"],
+  classes: { root: "tk-drawer-description" }
+});
+var DrawerBodyBase = createComponentBase({
+  name: "DrawerBody",
+  slots: ["root"],
+  classes: { root: "tk-drawer-body" }
+});
+var DrawerFooterBase = createComponentBase({
+  name: "DrawerFooter",
+  slots: ["root"],
+  classes: { root: "tk-drawer-footer" }
+});
+var DrawerCloseButtonBase = createComponentBase({
+  name: "DrawerCloseButton",
+  slots: ["root"],
+  classes: { root: "tk-drawer-close-button" }
+});
+var DrawerTriggerBase = createComponentBase({
+  name: "DrawerTrigger",
+  slots: ["root"],
+  classes: { root: "tk-drawer-trigger" }
+});
+var DrawerTrigger = (props) => {
+  const theme = useComponentTheme("DrawerTrigger");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerTriggerBase, props, theme);
+  const { children, ref, ...triggerProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTrigger, { ...triggerProps, ref, ...rootAttrs, children });
+};
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerOverlay = (props) => {
+  const theme = useComponentTheme("DrawerOverlay");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerOverlayBase, props, theme, {
+    stateAttrs: ({ intensity = DEFAULT_INTENSITY, invisible }) => ({
+      "data-intensity": intensity,
+      "data-invisible": invisible ? "" : void 0
+    })
+  });
+  const { intensity: _intensity, invisible: _invisible, children, ref, ...overlayProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogOverlay, { ...overlayProps, ref, ...rootAttrs, children });
+};
+DrawerOverlay.displayName = "DrawerOverlay";
+var preventDefault = (e) => e.preventDefault();
+var DrawerPanel = (props) => {
+  const theme = useComponentTheme("DrawerPanel");
+  const { placement, dismissable } = 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
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogContent, { ...panelProps, container, ref, ...rootAttrs, ...dismissHandlers, children });
+};
+DrawerPanel.displayName = "DrawerPanel";
+var DrawerHeader = (props) => {
+  const theme = useComponentTheme("DrawerHeader");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerHeaderBase, props, theme, {
+    stateAttrs: ({ headerType = DEFAULT_HEADER_TYPE }) => ({
+      "data-header-type": headerType
+    })
+  });
+  const { as, headerType: _headerType, children, ref, ...headerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...headerProps, ref, ...rootAttrs, children });
+};
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = (props) => {
+  const theme = useComponentTheme("DrawerTitle");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerTitleBase, props, theme);
+  const { level = 5, children, ref, ...titleProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogTitle, { ...titleProps, level, ref, ...rootAttrs, children });
+};
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = (props) => {
+  const theme = useComponentTheme("DrawerDescription");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerDescriptionBase, props, theme);
+  const { children, ref, ...descProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogDescription, { ...descProps, ref, ...rootAttrs, children });
+};
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = (props) => {
+  const theme = useComponentTheme("DrawerBody");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerBodyBase, props, theme);
+  const { as, children, ref, ...bodyProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...bodyProps, ref, ...rootAttrs, children });
+};
+DrawerBody.displayName = "DrawerBody";
+var DrawerFooter = (props) => {
+  const theme = useComponentTheme("DrawerFooter");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerFooterBase, props, theme, {
+    stateAttrs: ({ footerType = DEFAULT_FOOTER_TYPE }) => ({
+      "data-footer-type": footerType
+    })
+  });
+  const { as, footerType: _footerType, children, ref, ...footerProps } = rest;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...footerProps, ref, ...rootAttrs, children });
+};
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerCloseButton = (props) => {
+  const theme = useComponentTheme("DrawerCloseButton");
+  const { rootAttrs, rest } = composeRootAttrs(DrawerCloseButtonBase, props, theme);
+  const { children, ref, ...closeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.DialogClose, { ...closeProps, ref, ...rootAttrs, children });
+};
+DrawerCloseButton.displayName = "DrawerCloseButton";
+
+// src/components/drawer/index.ts
+var Drawer2 = Object.assign(Drawer, {
+  Trigger: DrawerTrigger,
+  Overlay: DrawerOverlay,
+  Panel: DrawerPanel,
+  Header: DrawerHeader,
+  Title: DrawerTitle,
+  Description: DrawerDescription,
+  Body: DrawerBody,
+  Footer: DrawerFooter,
+  CloseButton: DrawerCloseButton
+});
+
+// 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"],
+  classes: { root: "tk-field-description" }
+});
+var FieldErrorMessageBase = createComponentBase({
+  name: "FieldErrorMessage",
+  slots: ["root"],
+  classes: { root: "tk-field-error-message" }
+});
+var Field = (props) => {
+  const theme = useComponentTheme("Field");
+  const { rootAttrs, rest } = composeRootAttrs(FieldBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Field, { ...sparProps, ref, ...rootAttrs, children });
+};
+Field.displayName = "Field";
+var FieldLabel = (props) => {
+  const theme = useComponentTheme("FieldLabel");
+  const { required } = spar.useFieldContext();
+  const { rootAttrs, rest } = composeRootAttrs(FieldLabelBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  const asteriskAttrs = buildSlotAttrs(FieldLabelBase.getSlotProps("asterisk"), "asterisk", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(spar.FieldLabel, { ...spar$1, ref, ...rootAttrs, children: [
+    children,
+    required && /* @__PURE__ */ jsxRuntime.jsx("span", { ...asteriskAttrs, "aria-hidden": "true", children: "*" })
+  ] });
+};
+FieldLabel.displayName = "Field.Label";
+var FieldDescription = (props) => {
+  const theme = useComponentTheme("FieldDescription");
+  const { rootAttrs, rest } = composeRootAttrs(FieldDescriptionBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.FieldDescription, { ...spar$1, ref, ...rootAttrs, children });
+};
+FieldDescription.displayName = "Field.Description";
+var FieldErrorMessage = (props) => {
+  const theme = useComponentTheme("FieldErrorMessage");
+  const { rootAttrs, rest } = composeRootAttrs(FieldErrorMessageBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.FieldErrorMessage, { ...spar$1, ref, ...rootAttrs, children });
+};
+FieldErrorMessage.displayName = "Field.ErrorMessage";
+
+// src/components/field/index.ts
+var Field2 = Object.assign(Field, {
+  Label: FieldLabel,
+  Description: FieldDescription,
+  ErrorMessage: FieldErrorMessage
+});
+
+// src/components/input/base.ts
+var InputBase = createComponentBase({
+  name: "Input",
+  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"],
+  classes: { root: "tk-input-field" }
+});
+var InputPrefixBase = createComponentBase({
+  name: "InputPrefix",
+  slots: ["root"],
+  classes: { root: "tk-input-prefix" }
+});
+var InputSuffixBase = createComponentBase({
+  name: "InputSuffix",
+  slots: ["root"],
+  classes: { root: "tk-input-suffix" }
+});
+
+// src/components/input/context.ts
+var [InputProvider, useInputOwnContext] = createSafeContext("InputProvider");
+
+// src/components/input/defaults.ts
+var DEFAULT_SIZE5 = "base";
+var Input = (props) => {
+  const theme = useComponentTheme("Input");
+  const { rootAttrs, rest } = composeRootAttrs(InputBase, props, theme, {
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE5 }) => ({
+      "data-size": size2
+    })
+  });
+  const { size = DEFAULT_SIZE5, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(InputProvider, { value: { size }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Input, { ...sparProps, ref, ...rootAttrs, children }) });
+};
+Input.displayName = "Input";
+var InputContainer = (props) => {
+  const theme = useComponentTheme("InputContainer");
+  const { invalid, disabled, readOnly } = spar.useInputContext();
+  const Component = props.as ?? "div";
+  const { rootAttrs, rest } = composeRootAttrs(InputContainerBase, props, theme, {
+    stateAttrs: () => ({
+      "data-invalid": invalid ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-readonly": readOnly ? "" : void 0
+    })
+  });
+  const { as: _as, children, startContent, endContent, ref, ...rendered } = rest;
+  const slotAttrs = (slot) => buildSlotAttrs(InputContainerBase.getSlotProps(slot), slot, {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ...rendered, ref, ...rootAttrs, children: [
+    startContent != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...slotAttrs("startContent"), children: startContent }),
+    children,
+    endContent != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", ...slotAttrs("endContent"), children: endContent })
+  ] });
+};
+InputContainer.displayName = "Input.Container";
+var InputField = (props) => {
+  const theme = useComponentTheme("InputField");
+  const { size } = useInputOwnContext("Input.Field");
+  const { rootAttrs, rest } = composeRootAttrs(InputFieldBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.InputField, { ...spar$1, ref, ...rootAttrs });
+};
+InputField.displayName = "Input.Field";
+var InputPrefix = (props) => {
+  const theme = useComponentTheme("InputPrefix");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputPrefixBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children });
+};
+InputPrefix.displayName = "Input.Prefix";
+var InputSuffix = (props) => {
+  const theme = useComponentTheme("InputSuffix");
+  const Component = props.as ?? "span";
+  const { rootAttrs, rest } = composeRootAttrs(InputSuffixBase, props, theme);
+  const { as: _as, children, ref, ...rendered } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rendered, ref, ...rootAttrs, children });
+};
+InputSuffix.displayName = "Input.Suffix";
+
+// src/components/input/index.ts
+var Input2 = Object.assign(Input, {
+  Container: InputContainer,
+  Field: InputField,
+  Prefix: InputPrefix,
+  Suffix: InputSuffix
+});
+
+// src/components/radio/base.ts
+var RadioBase = createComponentBase({
+  name: "Radio",
+  slots: ["root"],
+  classes: { root: "tk-radio" }
+});
+var RadioItemBase = createComponentBase({
+  name: "RadioItem",
+  slots: ["root"],
+  classes: { root: "tk-radio-item" }
+});
+var RadioIndicatorBase = createComponentBase({
+  name: "RadioIndicator",
+  slots: ["root", "icon"],
+  classes: {
+    root: "tk-radio-indicator",
+    icon: "tk-radio-icon"
+  }
+});
+var RadioLabelBase = createComponentBase({
+  name: "RadioLabel",
+  slots: ["root"],
+  classes: { root: "tk-radio-label" }
+});
+
+// src/components/radio/context.ts
+var [RadioGroupProvider, useRadioGroupOwnContext] = createSafeContext("RadioGroupProvider");
+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_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 }) => ({
+      "data-size": size2,
+      "data-type": type2,
+      "data-position": position2,
+      "data-spread": spread ? "" : void 0
+    })
+  });
+  const {
+    size = DEFAULT_SIZE6,
+    type = DEFAULT_TYPE3,
+    position = DEFAULT_POSITION,
+    invalid,
+    // `spread` is consumed only as a data-attr above; destructure to keep it
+    // out of `sparProps` so the underlying div doesn't receive an unknown
+    // boolean DOM attribute.
+    spread: _spread,
+    children,
+    ref,
+    ...sparProps
+  } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { value: { size, type, position }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Radio, { ...sparProps, invalid, ...rootAttrs, ref, children }) });
+};
+Radio.displayName = "Radio";
+var RadioIndicator = (props) => {
+  useRadioItemOwnContext("Radio.Indicator");
+  const theme = useComponentTheme("RadioIndicator");
+  const { rootAttrs, rest } = composeRootAttrs(RadioIndicatorBase, props, theme);
+  const { children, ref, as, ...spar } = rest;
+  const iconAttrs = buildSlotAttrs(RadioIndicatorBase.getSlotProps("icon"), "icon", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...spar, ...rootAttrs, ref, "aria-hidden": "true", children: children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { ...iconAttrs }) });
+};
+RadioIndicator.displayName = "Radio.Indicator";
+var RadioItem = (props) => {
+  const theme = useComponentTheme("RadioItem");
+  const group = useRadioGroupOwnContext("Radio.Item");
+  const { rootAttrs, rest } = composeRootAttrs(RadioItemBase, props, theme, {
+    stateAttrs: ({ position }) => ({
+      "data-size": group.size,
+      "data-type": group.type,
+      "data-position": position ?? group.position
+    })
+  });
+  const { position: _position, children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioItemProvider, { value: RADIO_ITEM_CONTEXT_VALUE, children: /* @__PURE__ */ jsxRuntime.jsx(spar.RadioItem, { ...spar$1, ...rootAttrs, ref, children }) });
+};
+RadioItem.displayName = "Radio.Item";
+var RadioLabel = (props) => {
+  useRadioItemOwnContext("Radio.Label");
+  const theme = useComponentTheme("RadioLabel");
+  const { rootAttrs, rest } = composeRootAttrs(RadioLabelBase, props, theme);
+  const { children, ref, as, ...spar } = rest;
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...spar, ...rootAttrs, ref, children });
+};
+RadioLabel.displayName = "Radio.Label";
+
+// src/components/radio/index.ts
+var Radio2 = Object.assign(Radio, {
+  Item: RadioItem,
+  Indicator: RadioIndicator,
+  Label: RadioLabel
+});
+var Popover = (props) => {
+  const theme = useComponentTheme("Popover");
+  const merged = { ...theme?.defaultProps, ...props };
+  const { children, ...sparProps } = merged;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Popover, { ...sparProps, children });
+};
+Popover.displayName = "Popover";
+
+// src/components/popover/base.ts
+var PopoverTriggerBase = createComponentBase({
+  name: "PopoverTrigger",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-trigger"
+  }
+});
+var PopoverContentBase = createComponentBase({
+  name: "PopoverContent",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-content"
+  }
+});
+var PopoverHeaderBase = createComponentBase({
+  name: "PopoverHeader",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-header"
+  }
+});
+var PopoverDescriptionBase = createComponentBase({
+  name: "PopoverDescription",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-description"
+  }
+});
+var PopoverArrowBase = createComponentBase({
+  name: "PopoverArrow",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-arrow"
+  }
+});
+var PopoverCloseBase = createComponentBase({
+  name: "PopoverClose",
+  slots: ["root"],
+  classes: {
+    root: "tk-popover-close"
+  }
+});
+var PopoverTrigger = (props) => {
+  const theme = useComponentTheme("PopoverTrigger");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverTriggerBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+PopoverTrigger.displayName = "Popover.Trigger";
+
+// src/components/popover/defaults.ts
+var DEFAULT_VARIANT3 = "dark";
+var PopoverContent = (props) => {
+  const theme = useComponentTheme("PopoverContent");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverContentBase, props, theme, {
+    stateAttrs: ({ variant = DEFAULT_VARIANT3 }) => ({
+      "data-variant": variant
+    })
+  });
+  const { variant: _variant, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverContent, { ...sparProps, ...rootAttrs, ref, children });
+};
+PopoverContent.displayName = "Popover.Content";
+var PopoverHeader = (props) => {
+  const theme = useComponentTheme("PopoverHeader");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverHeaderBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, ref, children });
+};
+PopoverHeader.displayName = "Popover.Header";
+var PopoverDescription = (props) => {
+  const theme = useComponentTheme("PopoverDescription");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverDescriptionBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...nativeProps, ...rootAttrs, ref, children });
+};
+PopoverDescription.displayName = "Popover.Description";
+var PopoverArrow = (props) => {
+  const theme = useComponentTheme("PopoverArrow");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverArrowBase, props, theme);
+  const { ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverArrow, { ...sparProps, ...rootAttrs, ref });
+};
+PopoverArrow.displayName = "Popover.Arrow";
+var PopoverClose = (props) => {
+  const theme = useComponentTheme("PopoverClose");
+  const { rootAttrs, rest } = composeRootAttrs(PopoverCloseBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.PopoverClose, { ...sparProps, ...rootAttrs, ref, children });
+};
+PopoverClose.displayName = "Popover.Close";
+
+// src/components/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Trigger: PopoverTrigger,
+  Content: PopoverContent,
+  Header: PopoverHeader,
+  Description: PopoverDescription,
+  Arrow: PopoverArrow,
+  Close: PopoverClose
+});
+
+// src/components/select/base.ts
+var SelectBase = createComponentBase({
+  name: "Select",
+  slots: ["root"],
+  classes: { root: "tk-select" }
+});
+var SelectTriggerBase = createComponentBase({
+  name: "SelectTrigger",
+  slots: ["root"],
+  classes: { root: "tk-select-trigger" }
+});
+var SelectValueBase = createComponentBase({
+  name: "SelectValue",
+  slots: ["root"],
+  classes: { root: "tk-select-value" }
+});
+var SelectContentBase = createComponentBase({
+  name: "SelectContent",
+  slots: ["root"],
+  classes: { root: "tk-select-content" }
+});
+var SelectItemBase = createComponentBase({
+  name: "SelectItem",
+  slots: ["root"],
+  classes: { root: "tk-select-item" }
+});
+var SelectGroupBase = createComponentBase({
+  name: "SelectGroup",
+  slots: ["root"],
+  classes: { root: "tk-select-group" }
+});
+var SelectLabelBase = createComponentBase({
+  name: "SelectLabel",
+  slots: ["root"],
+  classes: { root: "tk-select-label" }
+});
+var SelectItemTextBase = createComponentBase({
+  name: "SelectItemText",
+  slots: ["root"],
+  classes: { root: "tk-select-item-text" }
+});
+var SelectSeparatorBase = createComponentBase({
+  name: "SelectSeparator",
+  slots: ["root"],
+  classes: { root: "tk-select-separator" }
+});
+
+// src/components/select/context.ts
+var [SelectProvider, useSelectOwnContext] = createSafeContext("SelectProvider");
+
+// src/components/select/defaults.ts
+var DEFAULT_SIZE7 = "base";
+var Select = (props) => {
+  const theme = useComponentTheme("Select");
+  const { rootAttrs, rest } = composeRootAttrs(SelectBase, props, theme, {
+    stateAttrs: ({ size: size2 = DEFAULT_SIZE7, invalid: invalid2 }) => ({
+      "data-size": size2,
+      "data-invalid": invalid2 ? "" : void 0
+    })
+  });
+  const { size = DEFAULT_SIZE7, invalid = false, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectProvider, { value: { size, invalid }, children: /* @__PURE__ */ jsxRuntime.jsx(spar.Select, { ...sparProps, ref, ...rootAttrs, children }) });
+};
+Select.displayName = "Select";
+var SelectTrigger = (props) => {
+  const theme = useComponentTheme("SelectTrigger");
+  const { size, invalid } = useSelectOwnContext("Select.Trigger");
+  const { rootAttrs, rest } = composeRootAttrs(SelectTriggerBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size,
+      "data-invalid": invalid ? "" : void 0
+    })
+  });
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectTrigger, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectTrigger.displayName = "Select.Trigger";
+var SelectValue = (props) => {
+  const theme = useComponentTheme("SelectValue");
+  const { rootAttrs, rest } = composeRootAttrs(SelectValueBase, props, theme);
+  const { placeholder, children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectValue, { ...spar$1, placeholder, ref, ...rootAttrs, children });
+};
+SelectValue.displayName = "Select.Value";
+var SelectContent = (props) => {
+  const theme = useComponentTheme("SelectContent");
+  const { size } = useSelectOwnContext("Select.Content");
+  const { rootAttrs, rest } = composeRootAttrs(SelectContentBase, props, theme, {
+    stateAttrs: () => ({
+      "data-size": size
+    })
+  });
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectContent, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectContent.displayName = "Select.Content";
+var SelectItem = (props) => {
+  const theme = useComponentTheme("SelectItem");
+  const { rootAttrs, rest } = composeRootAttrs(SelectItemBase, props, theme);
+  const { value, disabled, textValue, children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItem, { ...spar$1, value, disabled, textValue, ref, ...rootAttrs, children });
+};
+SelectItem.displayName = "Select.Item";
+var SelectItemText = (props) => {
+  const theme = useComponentTheme("SelectItemText");
+  const { rootAttrs, rest } = composeRootAttrs(SelectItemTextBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectItemText, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectItemText.displayName = "Select.ItemText";
+var SelectGroup = (props) => {
+  const theme = useComponentTheme("SelectGroup");
+  const { rootAttrs, rest } = composeRootAttrs(SelectGroupBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectGroup, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectGroup.displayName = "Select.Group";
+var SelectLabel = (props) => {
+  const theme = useComponentTheme("SelectLabel");
+  const { rootAttrs, rest } = composeRootAttrs(SelectLabelBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectLabel, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectLabel.displayName = "Select.Label";
+var SelectSeparator = (props) => {
+  const theme = useComponentTheme("SelectSeparator");
+  const { rootAttrs, rest } = composeRootAttrs(SelectSeparatorBase, props, theme);
+  const { children, ref, ...spar$1 } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.SelectSeparator, { ...spar$1, ref, ...rootAttrs, children });
+};
+SelectSeparator.displayName = "Select.Separator";
+
+// src/components/select/index.ts
+var Select2 = Object.assign(Select, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Item: SelectItem,
+  ItemText: SelectItemText,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Separator: SelectSeparator
+});
+
+// src/components/switch/base.ts
+var SwitchBase = createComponentBase({
+  name: "Switch",
+  slots: ["root", "indicator", "thumb"],
+  classes: {
+    root: "tk-toggle",
+    // @archetype react-enhancement — visible track ("input container" in tokens CSS).
+    indicator: "tk-toggle-input-container",
+    // @archetype react-enhancement — sliding thumb inside the track.
+    thumb: "tk-toggle-thumb"
+  }
+});
+
+// src/components/switch/context.ts
+var [SwitchProvider, useSwitchOwnContext] = createSafeContext("SwitchProvider");
+
+// src/components/switch/defaults.ts
+var DEFAULT_SIZE8 = "base";
+var DEFAULT_VARIANT4 = "info";
+var Switch = (props) => {
+  const theme = useComponentTheme("Switch");
+  const { rootAttrs, rest } = composeRootAttrs(SwitchBase, props, theme, {
+    stateAttrs: ({ size = DEFAULT_SIZE8, variant = DEFAULT_VARIANT4 }) => ({
+      "data-size": size,
+      "data-variant": variant
+    })
+  });
+  const { classNames, slotProps } = props;
+  const {
+    // Visual props are consumed via `stateAttrs`; destructured to keep them
+    // off the rendered DOM where they would leak as raw HTML attributes.
+    size: _size,
+    variant: _variant,
+    // `invalid` is forwarded to Spar as `invalid` (same name).
+    invalid = false,
+    children,
+    ref,
+    ...sparProps
+  } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    spar.Switch,
+    {
+      ...sparProps,
+      invalid,
+      ref,
+      ...rootAttrs,
+      children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchProvider,
+        {
+          value: {
+            classNames,
+            slotProps,
+            checked: state.checked,
+            disabled: state.disabled,
+            readOnly: state.readOnly
+          },
+          children: typeof children === "function" ? children(state) : children
+        }
+      )
+    }
+  );
+};
+Switch.displayName = "Switch";
+var SwitchIndicator = (props) => {
+  const theme = useComponentTheme("Switch");
+  const { classNames, slotProps, checked, disabled, readOnly } = useSwitchOwnContext("Switch.Indicator");
+  const { className, children, ref, ...rest } = props;
+  const indicatorAttrs = buildSlotAttrs(SwitchBase.getSlotProps("indicator", { className }), "indicator", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: slotProps,
+    instanceClassNames: classNames
+  });
+  const thumbAttrs = buildSlotAttrs(SwitchBase.getSlotProps("thumb"), "thumb", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: slotProps,
+    instanceClassNames: classNames
+  });
+  const resolvedChildren = typeof children === "function" ? children({ checked, disabled, readOnly }) : children ?? /* @__PURE__ */ jsxRuntime.jsx("span", { ...thumbAttrs, "aria-hidden": true });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, ...indicatorAttrs, ref, children: resolvedChildren });
+};
+SwitchIndicator.displayName = "Switch.Indicator";
+
+// src/components/switch/index.ts
+var Switch2 = Object.assign(Switch, {
+  Indicator: SwitchIndicator
+});
+var Tooltip = ({ children, id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.Tooltip, { id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled, children });
+};
+Tooltip.displayName = "Tooltip";
+var TooltipProvider = ({ children, delayDuration, skipDelayDuration, disableHoverableContent }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipProvider, { delayDuration, skipDelayDuration, disableHoverableContent, children });
+};
+TooltipProvider.displayName = "Tooltip.Provider";
+
+// src/components/tooltip/base.ts
+var TooltipTriggerBase = createComponentBase({
+  name: "TooltipTrigger",
+  slots: ["root"],
+  classes: {
+    root: "tk-tooltip-trigger"
+  }
+});
+var TooltipContentBase = createComponentBase({
+  name: "TooltipContent",
+  slots: ["root"],
+  classes: {
+    root: "tk-tooltip-content"
+  }
+});
+var TooltipHeaderBase = createComponentBase({
+  name: "TooltipHeader",
+  slots: ["root"],
+  classes: {
+    root: "tk-tooltip-header"
+  }
+});
+var TooltipDescriptionBase = createComponentBase({
+  name: "TooltipDescription",
+  slots: ["root"],
+  classes: {
+    root: "tk-tooltip-description"
+  }
+});
+var TooltipArrowBase = createComponentBase({
+  name: "TooltipArrow",
+  slots: ["root"],
+  classes: {
+    root: "tk-tooltip-arrow"
+  }
+});
+var TooltipTrigger = (props) => {
+  const theme = useComponentTheme("TooltipTrigger");
+  const { rootAttrs, rest } = composeRootAttrs(TooltipTriggerBase, props, theme);
+  const { children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipTrigger, { ...sparProps, ...rootAttrs, ref, children });
+};
+TooltipTrigger.displayName = "Tooltip.Trigger";
+
+// src/components/tooltip/defaults.ts
+var DEFAULT_VARIANT5 = "dark";
+var TooltipContent = (props) => {
+  const theme = useComponentTheme("TooltipContent");
+  const { rootAttrs, rest } = composeRootAttrs(TooltipContentBase, props, theme, {
+    stateAttrs: ({ variant = DEFAULT_VARIANT5 }) => ({
+      "data-variant": variant
+    })
+  });
+  const { variant: _variant, children, ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipContent, { ...sparProps, ...rootAttrs, ref, children });
+};
+TooltipContent.displayName = "Tooltip.Content";
+var TooltipHeader = (props) => {
+  const theme = useComponentTheme("TooltipHeader");
+  const { rootAttrs, rest } = composeRootAttrs(TooltipHeaderBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...nativeProps, ...rootAttrs, ref, children });
+};
+TooltipHeader.displayName = "Tooltip.Header";
+var TooltipDescription = (props) => {
+  const theme = useComponentTheme("TooltipDescription");
+  const { rootAttrs, rest } = composeRootAttrs(TooltipDescriptionBase, props, theme);
+  const { children, ref, ...nativeProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...nativeProps, ...rootAttrs, ref, children });
+};
+TooltipDescription.displayName = "Tooltip.Description";
+var TooltipArrow = (props) => {
+  const theme = useComponentTheme("TooltipArrow");
+  const { rootAttrs, rest } = composeRootAttrs(TooltipArrowBase, props, theme);
+  const { ref, ...sparProps } = rest;
+  return /* @__PURE__ */ jsxRuntime.jsx(spar.TooltipArrow, { ...sparProps, ...rootAttrs, ref });
+};
+TooltipArrow.displayName = "Tooltip.Arrow";
+
+// src/components/tooltip/index.ts
+var Tooltip2 = Object.assign(Tooltip, {
+  Provider: TooltipProvider,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent,
+  Header: TooltipHeader,
+  Description: TooltipDescription,
+  Arrow: TooltipArrow
+});
+
+exports.Accordion = Accordion2;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Checkbox = Checkbox2;
+exports.Drawer = Drawer2;
+exports.Field = Field2;
+exports.Input = Input2;
+exports.Popover = Popover2;
+exports.Radio = Radio2;
+exports.Select = Select2;
+exports.Switch = Switch2;
+exports.TakeoffSparProvider = TakeoffSparProvider;
+exports.Tooltip = Tooltip2;
+exports.useComponentTheme = useComponentTheme;
+exports.useTheme = useTheme;