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

package/dist/index.mjs

@@ -0,0 +1,1436 @@
+import { createContext, Children, isValidElement, createElement, useContext, useEffect, useMemo } 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, SelectItemText as SelectItemText$1, SelectItem as SelectItem$1, SelectContent as SelectContent$1, SelectValue as SelectValue$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 { clsx } from 'clsx';
+
+// src/provider.tsx
+
+// src/utils/isDevelopment.ts
+var isDevelopment = () => typeof process !== "undefined" && process?.env?.NODE_ENV !== "production";
+var TakeoffSparContext = createContext(void 0);
+var TakeoffSparProvider = ({ children, colorMode = "light", locale, components }) => {
+  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]);
+  useEffect(() => {
+    if (!locale) return;
+    const html = document.documentElement;
+    const previous = html.lang;
+    html.lang = locale;
+    return () => {
+      html.lang = previous;
+    };
+  }, [locale]);
+  const value = useMemo(() => ({ colorMode, locale, components }), [colorMode, locale, components]);
+  return /* @__PURE__ */ jsx(TakeoffSparContext.Provider, { value, children });
+};
+var DEFAULT_THEME = { colorMode: "light" };
+var useThemeWarningEmitted = false;
+var useTheme = () => {
+  const context = 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 = 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(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(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 = createContext(null);
+  Context.displayName = displayName;
+  const Provider = ({ value, children }) => createElement(Context.Provider, { value }, children);
+  Provider.displayName = `${displayName}.Provider`;
+  const useSafeContext = (consumerName) => {
+    const context = 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__ */ jsx(
+    AccordionProvider,
+    {
+      value: {
+        type,
+        mode,
+        size
+      },
+      children: /* @__PURE__ */ jsx(Accordion$1, { ...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 } = rest;
+  return /* @__PURE__ */ jsx(AccordionItem$1, { ...spar, ...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 } = rest;
+  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);
+  return /* @__PURE__ */ 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 } = rest;
+  const slotLayers = {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  };
+  const startContentNode = startContent !== void 0 && startContent !== null && /* @__PURE__ */ 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__ */ jsx("span", { ...buildSlotAttrs(AccordionTriggerBase.getSlotProps("title"), "title", slotLayers), children: titleBuffer }, `title-${titleKey++}`)
+    );
+    titleBuffer = [];
+  };
+  Children.toArray(children).forEach((child) => {
+    if (isValidElement(child) && child.type === AccordionIndicator) {
+      flushTitle();
+      inlineNodes.push(child);
+    } else {
+      titleBuffer.push(child);
+    }
+  });
+  flushTitle();
+  return /* @__PURE__ */ jsxs(AccordionTrigger$1, { ...spar, ...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 } = rest;
+  return /* @__PURE__ */ jsx(AccordionContent$1, { ...spar, ...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__ */ 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 })
+  ] });
+};
+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__ */ 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 })
+  ] });
+};
+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__ */ jsx(
+    Checkbox$1,
+    {
+      ...sparProps,
+      checked: sparChecked,
+      defaultChecked: sparDefaultChecked,
+      onChange: handleSparChange,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      ref,
+      ...rootAttrs,
+      children: (state) => /* @__PURE__ */ jsx(
+        CheckboxProvider,
+        {
+          value: {
+            classNames,
+            slotProps,
+            required,
+            invalid,
+            disabled: state.disabled,
+            readOnly: state.readOnly,
+            checked: state.checked === true,
+            indeterminate: state.checked === "indeterminate"
+          },
+          children: typeof children === "function" ? children(state) : children
+        }
+      )
+    }
+  );
+};
+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");
+  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__ */ jsx("span", { ...iconAttrs, "aria-hidden": true, children: indeterminate ? /* @__PURE__ */ jsx(PlaceholderRemove, {}) : /* @__PURE__ */ jsx(PlaceholderCheck, {}) });
+  return /* @__PURE__ */ 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__ */ jsx(DrawerProvider, { value: { placement, dismissable }, children: /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ jsx(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__ */ 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__ */ jsx(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__ */ jsx(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__ */ 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__ */ 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__ */ jsx(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__ */ jsx(Field$1, { ...sparProps, ref, ...rootAttrs, children });
+};
+Field.displayName = "Field";
+var FieldLabel = (props) => {
+  const theme = useComponentTheme("FieldLabel");
+  const { required } = useFieldContext();
+  const { rootAttrs, rest } = composeRootAttrs(FieldLabelBase, props, theme);
+  const { children, ref, ...spar } = rest;
+  const asteriskAttrs = buildSlotAttrs(FieldLabelBase.getSlotProps("asterisk"), "asterisk", {
+    themeSlotProps: theme?.slotProps,
+    themeClassNames: theme?.classNames,
+    instanceSlotProps: props.slotProps,
+    instanceClassNames: props.classNames
+  });
+  return /* @__PURE__ */ jsxs(FieldLabel$1, { ...spar, ref, ...rootAttrs, children: [
+    children,
+    required && /* @__PURE__ */ 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 } = rest;
+  return /* @__PURE__ */ jsx(FieldDescription$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(FieldErrorMessage$1, { ...spar, 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__ */ jsx(InputProvider, { value: { size }, children: /* @__PURE__ */ jsx(Input$1, { ...sparProps, ref, ...rootAttrs, children }) });
+};
+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
+  });
+  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 })
+  ] });
+};
+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 } = rest;
+  return /* @__PURE__ */ jsx(InputField$1, { ...spar, 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__ */ 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__ */ 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__ */ jsx(RadioGroupProvider, { value: { size, type, position }, children: /* @__PURE__ */ jsx(Radio$1, { ...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__ */ jsx(Component, { ...spar, ...rootAttrs, ref, "aria-hidden": "true", children: children ?? /* @__PURE__ */ 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 } = rest;
+  return /* @__PURE__ */ jsx(RadioItemProvider, { value: RADIO_ITEM_CONTEXT_VALUE, children: /* @__PURE__ */ jsx(RadioItem$1, { ...spar, ...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__ */ 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__ */ jsx(Popover$1, { ...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__ */ jsx(PopoverTrigger$1, { ...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__ */ jsx(PopoverContent$1, { ...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__ */ 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__ */ 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__ */ jsx(PopoverArrow$1, { ...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__ */ jsx(PopoverClose$1, { ...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__ */ jsx(SelectProvider, { value: { size, invalid }, children: /* @__PURE__ */ jsx(Select$1, { ...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 } = rest;
+  return /* @__PURE__ */ jsx(SelectTrigger$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectValue$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectContent$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectItem$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectItemText$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectGroup$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectLabel$1, { ...spar, 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 } = rest;
+  return /* @__PURE__ */ jsx(SelectSeparator$1, { ...spar, 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__ */ jsx(
+    Switch$1,
+    {
+      ...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
+        }
+      )
+    }
+  );
+};
+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__ */ jsx("span", { ...thumbAttrs, "aria-hidden": true });
+  return /* @__PURE__ */ 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__ */ jsx(Tooltip$1, { id, open, defaultOpen, onOpenChange, delay, hideDelay, disabled, children });
+};
+Tooltip.displayName = "Tooltip";
+var TooltipProvider = ({ children, delayDuration, skipDelayDuration, disableHoverableContent }) => {
+  return /* @__PURE__ */ jsx(TooltipProvider$1, { 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__ */ jsx(TooltipTrigger$1, { ...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__ */ jsx(TooltipContent$1, { ...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__ */ 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__ */ 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__ */ jsx(TooltipArrow$1, { ...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
+});
+
+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 };