@x12i/ui 1.0.0 → 1.1.0

package/dist/index.js

@@ -158,67 +158,2067 @@ function Button({
   );
 }
 
-// src/components/divider.tsx
+// src/components/button-group.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
+function ButtonGroup({
+  orientation = "horizontal",
+  attached = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      role: "group",
+      "data-kit": "button-group",
+      "data-orientation": orientation,
+      "data-attached": attached ? "" : void 0,
+      ...props
+    }
+  );
+}
+
+// src/components/copy-button.tsx
+import { Icon } from "@x12i/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/components/icon-button.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function IconButton({ label, children, ...props }) {
+  return /* @__PURE__ */ jsx6(Button, { ...props, "aria-label": label, "data-icon-only": "", children });
+}
+
+// src/components/copy-button.tsx
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function CopyButton({
+  text: source,
+  label,
+  copiedLabel,
+  failedLabel,
+  timeout = 2e3,
+  onCopied,
+  onCopyError,
+  children,
+  variant = "ghost",
+  tone = "neutral",
+  ...props
+}) {
+  const [status, setStatus] = useState("idle");
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const settle = useCallback(
+    (next) => {
+      setStatus(next);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setStatus("idle"), timeout);
+    },
+    [timeout]
+  );
+  const copy = async () => {
+    const text = typeof source === "function" ? source() : source;
+    try {
+      if (!navigator.clipboard) throw new Error("Clipboard API is not available");
+      await navigator.clipboard.writeText(text);
+      onCopied?.(text);
+      settle("copied");
+    } catch (error) {
+      onCopyError?.(error);
+      settle("failed");
+    }
+  };
+  const glyph = /* @__PURE__ */ jsx7(Icon, { name: status === "copied" ? "check" : status === "failed" ? "alert-circle" : "copy" });
+  const announcement = status === "copied" ? copiedLabel : status === "failed" ? failedLabel ?? "" : "";
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    children === void 0 ? /* @__PURE__ */ jsx7(
+      IconButton,
+      {
+        label,
+        variant,
+        tone,
+        "data-kit-copy": "",
+        "data-status": status,
+        onClick: () => void copy(),
+        ...props,
+        children: glyph
+      }
+    ) : /* @__PURE__ */ jsxs3(
+      Button,
+      {
+        variant,
+        tone,
+        "data-kit-copy": "",
+        "data-status": status,
+        onClick: () => void copy(),
+        ...props,
+        children: [
+          glyph,
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx7(VisuallyHidden, { role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+
+// src/components/kbd.tsx
+import { Children } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function Kbd(props) {
+  return /* @__PURE__ */ jsx8("kbd", { "data-kit": "kbd", ...props });
+}
+function KbdGroup({ separator = "+", children, ...props }) {
+  const keys = Children.toArray(children);
+  return /* @__PURE__ */ jsx8("span", { "data-kit": "kbd-group", ...props, children: keys.map((key, index) => (
+    // The keys are static markup the caller wrote, so the index is stable.
+    /* @__PURE__ */ jsxs4("span", { "data-kit-slot": "kbd-item", children: [
+      index > 0 ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", "data-kit-slot": "kbd-separator", children: separator }) : null,
+      key
+    ] }, index)
+  )) });
+}
+
+// src/components/link.tsx
+import { Icon as Icon2 } from "@x12i/icons";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function Link({
+  tone = "accent",
+  underline = "always",
+  external = false,
+  externalLabel,
+  asChild = false,
+  children,
+  ...props
+}) {
+  const shared = {
+    "data-kit": "link",
+    "data-tone": tone,
+    "data-underline": underline,
+    "data-external": external ? "" : void 0,
+    ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+    ...props
+  };
+  if (asChild) return /* @__PURE__ */ jsx9(Slot, { ...shared, children });
+  return /* @__PURE__ */ jsxs5("a", { ...shared, children: [
+    children,
+    external ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx9(Icon2, { name: "external-link", size: 12, "data-kit-slot": "external-icon" }),
+      externalLabel ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        " ",
+        /* @__PURE__ */ jsx9(VisuallyHidden, { children: externalLabel })
+      ] }) : null
+    ] }) : null
+  ] });
+}
+
+// src/components/toggle.tsx
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Toggle({
+  variant = "outline",
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(BaseToggle, { "data-kit": "toggle", "data-variant": variant, "data-size": size, ...props });
+}
+function ToggleGroup({
+  attached = true,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10(
+    BaseToggleGroup,
+    {
+      "data-kit": "toggle-group",
+      "data-attached": attached ? "" : void 0,
+      orientation,
+      ...props
+    }
+  );
+}
+
+// src/components/checkbox.tsx
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import { Icon as Icon3 } from "@x12i/icons";
+
+// src/components/choice.tsx
+import { useId } from "react";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function useChoiceIds(label, description) {
+  const labelId = useId();
+  const descriptionId = useId();
+  return {
+    labelId,
+    descriptionId,
+    controlAria: {
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": description ? descriptionId : void 0
+    }
+  };
+}
+function ChoiceRow({
+  kind,
+  control,
+  label,
+  description,
+  labelId,
+  descriptionId,
+  disabled
+}) {
+  if (!label && !description) return /* @__PURE__ */ jsx11(Fragment4, { children: control });
+  return /* @__PURE__ */ jsxs6("label", { "data-kit": "choice", "data-choice": kind, "data-disabled": disabled ? "" : void 0, children: [
+    control,
+    /* @__PURE__ */ jsxs6("span", { "data-kit-slot": "choice-text", children: [
+      label ? /* @__PURE__ */ jsx11("span", { id: labelId, "data-kit-slot": "choice-label", children: label }) : null,
+      description ? /* @__PURE__ */ jsx11("span", { id: descriptionId, "data-kit-slot": "choice-description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/checkbox.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function Checkbox({ label, description, disabled, ...props }) {
+  const { labelId, descriptionId, controlAria } = useChoiceIds(label, description);
+  const control = /* @__PURE__ */ jsx12(BaseCheckbox.Root, { "data-kit": "checkbox", disabled, ...controlAria, ...props, children: /* @__PURE__ */ jsxs7(BaseCheckbox.Indicator, { "data-kit-slot": "checkbox-indicator", children: [
+    /* @__PURE__ */ jsx12(Icon3, { name: "check", size: 12, "data-kit-slot": "checkbox-check" }),
+    /* @__PURE__ */ jsx12(Icon3, { name: "minus", size: 12, "data-kit-slot": "checkbox-dash" })
+  ] }) });
+  return /* @__PURE__ */ jsx12(
+    ChoiceRow,
+    {
+      kind: "checkbox",
+      control,
+      label,
+      description,
+      labelId,
+      descriptionId,
+      disabled
+    }
+  );
+}
+function CheckboxGroup(props) {
+  return /* @__PURE__ */ jsx12(BaseCheckboxGroup, { "data-kit": "checkbox-group", ...props });
+}
+
+// src/components/combobox.tsx
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Icon as Icon4 } from "@x12i/icons";
+import { useId as useId2, useRef as useRef2 } from "react";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var itemToStringLabel = (option) => option.label;
+var itemToStringValue = (option) => option.value;
+var isItemEqualToValue = (a, b) => a.value === b.value;
+function OpenButton({ label }) {
+  const id = useId2();
+  return /* @__PURE__ */ jsx13(BaseCombobox.Trigger, { id, "aria-labelledby": id, "aria-label": label, "data-kit-slot": "combobox-trigger", children: /* @__PURE__ */ jsx13(Icon4, { name: "chevron-down" }) });
+}
+function Options({ emptyLabel }) {
+  return /* @__PURE__ */ jsx13(BaseCombobox.Portal, { children: /* @__PURE__ */ jsx13(BaseCombobox.Positioner, { sideOffset: 4, "data-kit": "combobox-positioner", children: /* @__PURE__ */ jsxs8(BaseCombobox.Popup, { "data-kit": "combobox-popup", children: [
+    /* @__PURE__ */ jsx13(BaseCombobox.Empty, { "data-kit-slot": "combobox-empty", children: emptyLabel }),
+    /* @__PURE__ */ jsx13(BaseCombobox.List, { "data-kit-slot": "combobox-list", children: (option) => /* @__PURE__ */ jsxs8(
+      BaseCombobox.Item,
+      {
+        value: option,
+        disabled: option.disabled,
+        "data-kit": "combobox-item",
+        children: [
+          /* @__PURE__ */ jsx13(BaseCombobox.ItemIndicator, { "data-kit-slot": "combobox-item-indicator", children: /* @__PURE__ */ jsx13(Icon4, { name: "check", size: 16 }) }),
+          /* @__PURE__ */ jsx13("span", { "data-kit-slot": "combobox-item-text", children: option.label })
+        ]
+      },
+      option.value
+    ) })
+  ] }) }) });
+}
+function Combobox({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  size = "md",
+  invalid,
+  disabled,
+  readOnly,
+  required,
+  name,
+  className,
+  style,
+  emptyLabel,
+  clearLabel,
+  openLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const find = (key) => key === void 0 ? void 0 : options.find((option) => option.value === key) ?? null;
+  return /* @__PURE__ */ jsxs8(
+    BaseCombobox.Root,
+    {
+      items: options,
+      value: find(value),
+      defaultValue: find(defaultValue),
+      onValueChange: (option) => onValueChange?.(option?.value ?? null),
+      itemToStringLabel,
+      itemToStringValue,
+      isItemEqualToValue,
+      disabled,
+      readOnly,
+      required,
+      name,
+      children: [
+        /* @__PURE__ */ jsxs8(
+          BaseCombobox.InputGroup,
+          {
+            "data-kit": "combobox",
+            "data-size": size,
+            "data-invalid": invalid ? "" : void 0,
+            className,
+            style,
+            children: [
+              /* @__PURE__ */ jsx13(
+                BaseCombobox.Input,
+                {
+                  "data-kit-slot": "combobox-input",
+                  placeholder,
+                  "aria-label": ariaLabel,
+                  "aria-labelledby": ariaLabelledBy,
+                  "aria-describedby": ariaDescribedBy,
+                  "aria-invalid": invalid ? true : void 0
+                }
+              ),
+              /* @__PURE__ */ jsx13(BaseCombobox.Clear, { "data-kit-slot": "combobox-clear", "aria-label": clearLabel, children: /* @__PURE__ */ jsx13(Icon4, { name: "close", size: 16 }) }),
+              /* @__PURE__ */ jsx13(OpenButton, { label: openLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13(Options, { emptyLabel })
+      ]
+    }
+  );
+}
+function MultiCombobox({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder,
+  size = "md",
+  invalid,
+  disabled,
+  readOnly,
+  required,
+  name,
+  className,
+  style,
+  emptyLabel,
+  clearLabel,
+  openLabel,
+  removeLabel,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const anchor = useRef2(null);
+  const find = (keys) => keys === void 0 ? void 0 : keys.flatMap((key) => options.filter((option) => option.value === key));
+  return /* @__PURE__ */ jsxs8(
+    BaseCombobox.Root,
+    {
+      multiple: true,
+      items: options,
+      value: find(value),
+      defaultValue: find(defaultValue),
+      onValueChange: (selected) => onValueChange?.(selected.map((option) => option.value)),
+      itemToStringLabel,
+      itemToStringValue,
+      isItemEqualToValue,
+      disabled,
+      readOnly,
+      required,
+      name,
+      children: [
+        /* @__PURE__ */ jsxs8(
+          BaseCombobox.Chips,
+          {
+            ref: anchor,
+            "data-kit": "combobox",
+            "data-multiple": "",
+            "data-size": size,
+            "data-invalid": invalid ? "" : void 0,
+            className,
+            style,
+            children: [
+              /* @__PURE__ */ jsx13(BaseCombobox.Value, { children: (selected) => /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                selected.map((option) => /* @__PURE__ */ jsxs8(BaseCombobox.Chip, { "data-kit-slot": "combobox-chip", children: [
+                  /* @__PURE__ */ jsx13("span", { "data-kit-slot": "combobox-chip-text", children: option.label }),
+                  /* @__PURE__ */ jsx13(
+                    BaseCombobox.ChipRemove,
+                    {
+                      "data-kit-slot": "combobox-chip-remove",
+                      "aria-label": removeLabel(option.label),
+                      children: /* @__PURE__ */ jsx13(Icon4, { name: "close", size: 12 })
+                    }
+                  )
+                ] }, option.value)),
+                /* @__PURE__ */ jsx13(
+                  BaseCombobox.Input,
+                  {
+                    "data-kit-slot": "combobox-input",
+                    placeholder: selected.length === 0 ? placeholder : void 0,
+                    "aria-label": ariaLabel,
+                    "aria-labelledby": ariaLabelledBy,
+                    "aria-describedby": ariaDescribedBy,
+                    "aria-invalid": invalid ? true : void 0
+                  }
+                )
+              ] }) }),
+              /* @__PURE__ */ jsx13(BaseCombobox.Clear, { "data-kit-slot": "combobox-clear", "aria-label": clearLabel, children: /* @__PURE__ */ jsx13(Icon4, { name: "close", size: 16 }) }),
+              /* @__PURE__ */ jsx13(OpenButton, { label: openLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx13(BaseCombobox.Portal, { children: /* @__PURE__ */ jsx13(BaseCombobox.Positioner, { anchor, sideOffset: 4, "data-kit": "combobox-positioner", children: /* @__PURE__ */ jsxs8(BaseCombobox.Popup, { "data-kit": "combobox-popup", children: [
+          /* @__PURE__ */ jsx13(BaseCombobox.Empty, { "data-kit-slot": "combobox-empty", children: emptyLabel }),
+          /* @__PURE__ */ jsx13(BaseCombobox.List, { "data-kit-slot": "combobox-list", children: (option) => /* @__PURE__ */ jsxs8(
+            BaseCombobox.Item,
+            {
+              value: option,
+              disabled: option.disabled,
+              "data-kit": "combobox-item",
+              children: [
+                /* @__PURE__ */ jsx13(BaseCombobox.ItemIndicator, { "data-kit-slot": "combobox-item-indicator", children: /* @__PURE__ */ jsx13(Icon4, { name: "check", size: 16 }) }),
+                /* @__PURE__ */ jsx13("span", { "data-kit-slot": "combobox-item-text", children: option.label })
+              ]
+            },
+            option.value
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/field.tsx
+import { Field as BaseField } from "@base-ui/react/field";
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function Field({
+  label,
+  description,
+  error,
+  required = false,
+  orientation = "vertical",
+  invalid,
+  children,
+  ...props
+}) {
+  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+  return /* @__PURE__ */ jsxs9(
+    BaseField.Root,
+    {
+      "data-kit": "field",
+      "data-orientation": orientation,
+      "data-required": required ? "" : void 0,
+      invalid: invalid ?? (hasError ? true : void 0),
+      ...props,
+      children: [
+        label ? /* @__PURE__ */ jsxs9(BaseField.Label, { "data-kit-slot": "field-label", children: [
+          label,
+          required ? /* @__PURE__ */ jsx14("span", { "aria-hidden": "true", "data-kit-slot": "field-required", children: "*" }) : null
+        ] }) : null,
+        description ? /* @__PURE__ */ jsx14(BaseField.Description, { "data-kit-slot": "field-description", children: description }) : null,
+        /* @__PURE__ */ jsx14("div", { "data-kit-slot": "field-control", children }),
+        hasError ? /* @__PURE__ */ jsx14(BaseField.Error, { match: true, "data-kit-slot": "field-error", "aria-live": "polite", children: error }) : null
+      ]
+    }
+  );
+}
+function FieldLabel(props) {
+  return /* @__PURE__ */ jsx14(BaseField.Label, { "data-kit-slot": "field-label", ...props });
+}
+function FieldDescription(props) {
+  return /* @__PURE__ */ jsx14(BaseField.Description, { "data-kit-slot": "field-description", ...props });
+}
+function FieldError(props) {
+  return /* @__PURE__ */ jsx14(BaseField.Error, { "data-kit-slot": "field-error", "aria-live": "polite", ...props });
+}
+function Fieldset({ legend, description, children, ...props }) {
+  return /* @__PURE__ */ jsxs9(BaseFieldset.Root, { "data-kit": "fieldset", ...props, children: [
+    /* @__PURE__ */ jsx14(BaseFieldset.Legend, { "data-kit-slot": "fieldset-legend", children: legend }),
+    description ? /* @__PURE__ */ jsx14("p", { "data-kit-slot": "fieldset-description", children: description }) : null,
+    /* @__PURE__ */ jsx14("div", { "data-kit-slot": "fieldset-body", children })
+  ] });
+}
+
+// src/components/input.tsx
+import { Input as BaseInput } from "@base-ui/react/input";
+import { Icon as Icon5 } from "@x12i/icons";
+import { useState as useState2 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+function Input({ size = "md", invalid, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    BaseInput,
+    {
+      "data-kit": "input",
+      "data-size": size,
+      "data-invalid": invalid ? "" : void 0,
+      "aria-invalid": invalid ? true : void 0,
+      ...props
+    }
+  );
+}
+function InputGroup({ size = "md", invalid, disabled, ...props }) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      "data-kit": "input-group",
+      "data-size": size,
+      "data-invalid": invalid ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      ...props
+    }
+  );
+}
+function InputAddon(props) {
+  return /* @__PURE__ */ jsx15("span", { "data-kit": "input-addon", ...props });
+}
+function PasswordInput({
+  showLabel,
+  hideLabel,
+  startAddon,
+  size = "md",
+  invalid,
+  disabled,
+  ...props
+}) {
+  const [visible, setVisible] = useState2(false);
+  return /* @__PURE__ */ jsxs10(InputGroup, { size, invalid, disabled, children: [
+    startAddon ? /* @__PURE__ */ jsx15(InputAddon, { "aria-hidden": "true", children: startAddon }) : null,
+    /* @__PURE__ */ jsx15(
+      Input,
+      {
+        size,
+        invalid,
+        disabled,
+        autoComplete: "current-password",
+        ...props,
+        type: visible ? "text" : "password"
+      }
+    ),
+    /* @__PURE__ */ jsx15(
+      IconButton,
+      {
+        label: visible ? hideLabel : showLabel,
+        variant: "ghost",
+        tone: "neutral",
+        size: size === "xl" ? "lg" : "sm",
+        disabled,
+        onClick: () => setVisible((current) => !current),
+        children: /* @__PURE__ */ jsx15(Icon5, { name: visible ? "eye-off" : "eye" })
+      }
+    )
+  ] });
+}
+
+// src/components/number-input.tsx
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import { Icon as Icon6 } from "@x12i/icons";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+function NumberInput({
+  size = "md",
+  invalid,
+  decrementLabel,
+  incrementLabel,
+  placeholder,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx16(BaseNumberField.Root, { ...props, children: /* @__PURE__ */ jsxs11(
+    BaseNumberField.Group,
+    {
+      "data-kit": "number-input",
+      "data-size": size,
+      "data-invalid": invalid ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx16(BaseNumberField.Decrement, { "data-kit-slot": "number-decrement", "aria-label": decrementLabel, children: /* @__PURE__ */ jsx16(Icon6, { name: "minus", size: size === "xs" || size === "sm" ? 12 : 16 }) }),
+        /* @__PURE__ */ jsx16(
+          BaseNumberField.Input,
+          {
+            "data-kit-slot": "number-control",
+            placeholder,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            "aria-invalid": invalid ? true : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx16(BaseNumberField.Increment, { "data-kit-slot": "number-increment", "aria-label": incrementLabel, children: /* @__PURE__ */ jsx16(Icon6, { name: "plus", size: size === "xs" || size === "sm" ? 12 : 16 }) })
+      ]
+    }
+  ) });
+}
+
+// src/components/otp-input.tsx
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { useId as useId3 } from "react";
+import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+function OTPInput({
+  size = "md",
+  invalid,
+  length,
+  label,
+  getInputLabel,
+  id,
+  ...props
+}) {
+  const generatedId = useId3();
+  const firstId = id ?? generatedId;
+  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    label ? /* @__PURE__ */ jsx17(VisuallyHidden, { children: /* @__PURE__ */ jsx17("label", { htmlFor: firstId, children: label }) }) : null,
+    /* @__PURE__ */ jsx17(
+      BaseOTPField.Root,
+      {
+        "data-kit": "otp-input",
+        "data-size": size,
+        "data-invalid": invalid ? "" : void 0,
+        id: firstId,
+        length,
+        ...props,
+        children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx17(
+          BaseOTPField.Input,
+          {
+            "data-kit-slot": "otp-box",
+            "aria-label": index === 0 ? void 0 : getInputLabel(index, length),
+            "aria-invalid": invalid ? true : void 0
+          },
+          index
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/radio-group.tsx
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function RadioGroup({
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx18(BaseRadioGroup, { "data-kit": "radio-group", "data-orientation": orientation, ...props });
+}
+function Radio({
+  label,
+  description,
+  disabled,
+  ...props
+}) {
+  const { labelId, descriptionId, controlAria } = useChoiceIds(label, description);
+  const control = /* @__PURE__ */ jsx18(BaseRadio.Root, { "data-kit": "radio", disabled, ...controlAria, ...props, children: /* @__PURE__ */ jsx18(BaseRadio.Indicator, { "data-kit-slot": "radio-indicator" }) });
+  return /* @__PURE__ */ jsx18(
+    ChoiceRow,
+    {
+      kind: "radio",
+      control,
+      label,
+      description,
+      labelId,
+      descriptionId,
+      disabled
+    }
+  );
+}
+
+// src/components/select.tsx
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Icon as Icon7 } from "@x12i/icons";
+import { Fragment as Fragment7 } from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+function isGroup(item) {
+  return "options" in item;
+}
+function flatten(items) {
+  return items.flatMap((item) => isGroup(item) ? item.options : [item]);
+}
+function Select({
+  options,
+  placeholder,
+  size = "md",
+  invalid,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const flat = flatten(options);
+  const renderOption = (option) => /* @__PURE__ */ jsxs13(
+    BaseSelect.Item,
+    {
+      value: option.value,
+      disabled: option.disabled,
+      label: option.textValue ?? (typeof option.label === "string" ? option.label : String(option.value)),
+      "data-kit": "select-item",
+      children: [
+        /* @__PURE__ */ jsx19(BaseSelect.ItemIndicator, { "data-kit-slot": "select-item-indicator", children: /* @__PURE__ */ jsx19(Icon7, { name: "check", size: 16 }) }),
+        /* @__PURE__ */ jsx19(BaseSelect.ItemText, { "data-kit-slot": "select-item-text", children: option.label })
+      ]
+    },
+    option.value
+  );
+  return /* @__PURE__ */ jsxs13(
+    BaseSelect.Root,
+    {
+      items: flat.map((option) => ({ value: option.value, label: option.label })),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs13(
+          BaseSelect.Trigger,
+          {
+            "data-kit": "select",
+            "data-size": size,
+            "data-invalid": invalid ? "" : void 0,
+            "aria-invalid": invalid ? true : void 0,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-describedby": ariaDescribedBy,
+            className,
+            style,
+            children: [
+              /* @__PURE__ */ jsx19(BaseSelect.Value, { "data-kit-slot": "select-value", placeholder }),
+              /* @__PURE__ */ jsx19(BaseSelect.Icon, { "data-kit-slot": "select-icon", children: /* @__PURE__ */ jsx19(Icon7, { name: "chevron-down" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx19(BaseSelect.Portal, { children: /* @__PURE__ */ jsx19(BaseSelect.Positioner, { sideOffset: 4, alignItemWithTrigger: false, "data-kit": "select-positioner", children: /* @__PURE__ */ jsx19(BaseSelect.Popup, { "data-kit": "select-popup", children: /* @__PURE__ */ jsx19(BaseSelect.List, { "data-kit-slot": "select-list", children: options.map(
+          (item, index) => isGroup(item) ? /* @__PURE__ */ jsxs13(BaseSelect.Group, { "data-kit-slot": "select-group", children: [
+            /* @__PURE__ */ jsx19(BaseSelect.GroupLabel, { "data-kit-slot": "select-group-label", children: item.label }),
+            item.options.map(renderOption)
+          ] }, `group-${index}`) : /* @__PURE__ */ jsx19(Fragment7, { children: renderOption(item) }, item.value)
+        ) }) }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/slider.tsx
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function thumbCount(value) {
+  return Array.isArray(value) ? value.length : 1;
+}
+function Slider({
+  getThumbLabel,
+  showValue = false,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const count = thumbCount(props.value ?? props.defaultValue);
+  return (
+    // Center alignment needs no layout measurement, so the thumb is visible on
+    // the server and on first paint instead of appearing after hydration.
+    /* @__PURE__ */ jsxs14(BaseSlider.Root, { "data-kit": "slider", ...props, children: [
+      /* @__PURE__ */ jsx20(BaseSlider.Control, { "data-kit-slot": "slider-control", children: /* @__PURE__ */ jsxs14(BaseSlider.Track, { "data-kit-slot": "slider-track", children: [
+        /* @__PURE__ */ jsx20(BaseSlider.Indicator, { "data-kit-slot": "slider-indicator" }),
+        Array.from({ length: count }, (_, index) => {
+          const label = getThumbLabel?.(index, count) ?? ariaLabel;
+          return /* @__PURE__ */ jsx20(
+            BaseSlider.Thumb,
+            {
+              index,
+              "data-kit-slot": "slider-thumb",
+              getAriaLabel: label === void 0 ? void 0 : () => label
+            },
+            index
+          );
+        })
+      ] }) }),
+      showValue ? /* @__PURE__ */ jsx20(BaseSlider.Value, { "data-kit-slot": "slider-value" }) : null
+    ] })
+  );
+}
+
+// src/components/switch.tsx
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Switch({ label, description, disabled, ...props }) {
+  const { labelId, descriptionId, controlAria } = useChoiceIds(label, description);
+  const control = /* @__PURE__ */ jsx21(BaseSwitch.Root, { "data-kit": "switch", disabled, ...controlAria, ...props, children: /* @__PURE__ */ jsx21(BaseSwitch.Thumb, { "data-kit-slot": "switch-thumb" }) });
+  return /* @__PURE__ */ jsx21(
+    ChoiceRow,
+    {
+      kind: "switch",
+      control,
+      label,
+      description,
+      labelId,
+      descriptionId,
+      disabled
+    }
+  );
+}
+
+// src/components/textarea.tsx
+import { Field as BaseField2 } from "@base-ui/react/field";
+import { jsx as jsx22 } from "react/jsx-runtime";
+function Textarea({
+  size = "md",
+  invalid,
+  rows = 3,
+  autoResize = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx22(
+    BaseField2.Control,
+    {
+      "data-kit": "textarea",
+      "data-size": size,
+      "data-invalid": invalid ? "" : void 0,
+      "data-auto-resize": autoResize ? "" : void 0,
+      "aria-invalid": invalid ? true : void 0,
+      render: (controlProps) => /* @__PURE__ */ jsx22("textarea", { ...controlProps, rows }),
+      ...props
+    }
+  );
+}
+
+// src/components/divider.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Divider({
   orientation = "horizontal",
   decorative = false,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx23(
     "hr",
     {
-      "data-kit": "divider",
-      "data-orientation": orientation,
-      role: decorative ? "presentation" : void 0,
-      "aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
-      className: cx(className),
+      "data-kit": "divider",
+      "data-orientation": orientation,
+      role: decorative ? "presentation" : void 0,
+      "aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0,
+      className: cx(className),
+      ...props
+    }
+  );
+}
+
+// src/components/stack.tsx
+import { cssVar } from "@x12i/tokens";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Flex({
+  kind,
+  gap,
+  align,
+  justify,
+  wrap,
+  asChild = false,
+  className,
+  style,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const gapStyle = gap === void 0 ? void 0 : { gap: cssVar(`space.${gap}`) };
+  return /* @__PURE__ */ jsx24(
+    Component,
+    {
+      "data-kit": kind,
+      "data-align": align,
+      "data-justify": justify,
+      "data-wrap": wrap ? "" : void 0,
+      className: cx(className),
+      style: { ...gapStyle, ...style },
+      ...props
+    }
+  );
+}
+function Stack({ gap = "3", ...props }) {
+  return /* @__PURE__ */ jsx24(Flex, { kind: "stack", gap, ...props });
+}
+function Inline({ gap = "2", align = "center", wrap = true, ...props }) {
+  return /* @__PURE__ */ jsx24(Flex, { kind: "inline", gap, align, wrap, ...props });
+}
+
+// src/components/alert.tsx
+import { Icon as Icon8 } from "@x12i/icons";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+var toneIcons = {
+  neutral: "info",
+  accent: "info",
+  info: "info",
+  success: "check-circle",
+  warning: "alert-triangle",
+  danger: "alert-circle"
+};
+function Alert({
+  tone = "info",
+  title,
+  icon,
+  action,
+  onDismiss,
+  dismissLabel,
+  role,
+  children,
+  ...props
+}) {
+  const glyph = icon === false ? null : icon ?? /* @__PURE__ */ jsx25(Icon8, { name: toneIcons[tone], size: 20 });
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      "data-kit": "alert",
+      "data-tone": tone,
+      role: role ?? (tone === "danger" ? "alert" : "status"),
+      ...props,
+      children: [
+        glyph ? /* @__PURE__ */ jsx25("span", { "data-kit-slot": "alert-icon", "aria-hidden": "true", children: glyph }) : null,
+        /* @__PURE__ */ jsxs15("div", { "data-kit-slot": "alert-body", children: [
+          title ? /* @__PURE__ */ jsx25("div", { "data-kit-slot": "alert-title", children: title }) : null,
+          children ? /* @__PURE__ */ jsx25("div", { "data-kit-slot": "alert-message", children }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx25("div", { "data-kit-slot": "alert-action", children: action }) : null,
+        onDismiss ? /* @__PURE__ */ jsx25(IconButton, { label: dismissLabel, variant: "ghost", tone: "neutral", size: "sm", onClick: onDismiss, children: /* @__PURE__ */ jsx25(Icon8, { name: "close" }) }) : null
+      ]
+    }
+  );
+}
+function Callout({ tone = "info", title, icon, children, ...props }) {
+  const glyph = icon === false ? null : icon ?? /* @__PURE__ */ jsx25(Icon8, { name: toneIcons[tone], size: 20 });
+  return /* @__PURE__ */ jsxs15("aside", { "data-kit": "callout", "data-tone": tone, ...props, children: [
+    glyph ? /* @__PURE__ */ jsx25("span", { "data-kit-slot": "callout-icon", "aria-hidden": "true", children: glyph }) : null,
+    /* @__PURE__ */ jsxs15("div", { "data-kit-slot": "callout-body", children: [
+      title ? /* @__PURE__ */ jsx25("div", { "data-kit-slot": "callout-title", children: title }) : null,
+      children ? /* @__PURE__ */ jsx25("div", { "data-kit-slot": "callout-content", children }) : null
+    ] })
+  ] });
+}
+
+// src/components/progress.tsx
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
+function Progress({
+  label,
+  showValue = false,
+  size = "md",
+  tone = "accent",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs16(BaseProgress.Root, { "data-kit": "progress", "data-size": size, "data-tone": tone, ...props, children: [
+    label || showValue ? /* @__PURE__ */ jsxs16("div", { "data-kit-slot": "progress-header", children: [
+      label ? /* @__PURE__ */ jsx26(BaseProgress.Label, { "data-kit-slot": "progress-label", children: label }) : null,
+      showValue ? /* @__PURE__ */ jsx26(BaseProgress.Value, { "data-kit-slot": "progress-value" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx26(BaseProgress.Track, { "data-kit-slot": "progress-track", children: /* @__PURE__ */ jsx26(BaseProgress.Indicator, { "data-kit-slot": "progress-indicator" }) })
+  ] });
+}
+function Meter({ label, showValue = false, size = "md", tone = "accent", ...props }) {
+  return /* @__PURE__ */ jsxs16(BaseMeter.Root, { "data-kit": "meter", "data-size": size, "data-tone": tone, ...props, children: [
+    label || showValue ? /* @__PURE__ */ jsxs16("div", { "data-kit-slot": "progress-header", children: [
+      label ? /* @__PURE__ */ jsx26(BaseMeter.Label, { "data-kit-slot": "progress-label", children: label }) : null,
+      showValue ? /* @__PURE__ */ jsx26(BaseMeter.Value, { "data-kit-slot": "progress-value" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx26(BaseMeter.Track, { "data-kit-slot": "progress-track", children: /* @__PURE__ */ jsx26(BaseMeter.Indicator, { "data-kit-slot": "progress-indicator" }) })
+  ] });
+}
+
+// src/components/progress-circle.tsx
+import { Progress as BaseProgress2 } from "@base-ui/react/progress";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+var RADIUS = 45;
+var INDETERMINATE_PERCENT = 25;
+function percentOf(value, min, max) {
+  if (value === null || !Number.isFinite(value) || max <= min) return 0;
+  const percent = (value - min) / (max - min) * 100;
+  return Math.round(Math.min(100, Math.max(0, percent)) * 100) / 100;
+}
+function ProgressCircle({
+  label,
+  showValue = false,
+  children,
+  size = "md",
+  tone = "accent",
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const percent = value === null ? INDETERMINATE_PERCENT : percentOf(value, min, max);
+  const center = children ?? (showValue && size !== "sm" ? /* @__PURE__ */ jsx27(BaseProgress2.Value, {}) : null);
+  return /* @__PURE__ */ jsxs17(
+    BaseProgress2.Root,
+    {
+      "data-kit": "progress-circle",
+      "data-size": size,
+      "data-tone": tone,
+      value,
+      min,
+      max,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs17("div", { "data-kit-slot": "progress-circle-ring", style: { "--_percent": percent }, children: [
+          /* @__PURE__ */ jsxs17("svg", { viewBox: "0 0 100 100", "aria-hidden": "true", focusable: "false", "data-kit-slot": "progress-circle-svg", children: [
+            /* @__PURE__ */ jsx27("circle", { "data-kit-slot": "progress-circle-track", cx: 50, cy: 50, r: RADIUS }),
+            /* @__PURE__ */ jsx27("circle", { "data-kit-slot": "progress-circle-indicator", cx: 50, cy: 50, r: RADIUS, pathLength: 100 })
+          ] }),
+          center ? /* @__PURE__ */ jsx27("span", { "data-kit-slot": "progress-circle-center", children: center }) : null
+        ] }),
+        label ? /* @__PURE__ */ jsx27(BaseProgress2.Label, { "data-kit-slot": "progress-circle-label", children: label }) : null
+      ]
+    }
+  );
+}
+
+// src/components/animated-number.tsx
+import { useEffect as useEffect2, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+var FALLBACK_DURATION = 400;
+var DEFAULT_MAX_DECIMALS = 3;
+var REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+var easeOut = (t) => 1 - (1 - t) ** 3;
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+function themeDuration(element) {
+  if (!element || typeof getComputedStyle !== "function") return FALLBACK_DURATION;
+  const raw = getComputedStyle(element).getPropertyValue("--kit-duration-slow").trim();
+  const match = /^(\d*\.?\d+)(ms|s)$/.exec(raw);
+  if (!match) return FALLBACK_DURATION;
+  return Number(match[1]) * (match[2] === "s" ? 1e3 : 1);
+}
+function decimalsOf(value) {
+  if (!Number.isFinite(value)) return 0;
+  const [, decimals = ""] = value.toFixed(DEFAULT_MAX_DECIMALS).replace(/0+$/, "").split(".");
+  return decimals.length;
+}
+function stableFormat(format, digits) {
+  const plain = (format.style === void 0 || format.style === "decimal" || format.style === "unit") && (format.notation === void 0 || format.notation === "standard") && format.minimumFractionDigits === void 0 && format.maximumFractionDigits === void 0 && format.minimumSignificantDigits === void 0 && format.maximumSignificantDigits === void 0;
+  return plain ? { ...format, minimumFractionDigits: digits, maximumFractionDigits: digits } : format;
+}
+function AnimatedNumber({ value, format, locale, duration, from, ...props }) {
+  const [shown, setShown] = useState3(from ?? value);
+  const shownRef = useRef3(shown);
+  const visualRef = useRef3(null);
+  const formatKey = JSON.stringify(format ?? {});
+  const localeKey = locale === void 0 ? "" : String(locale);
+  const digits = decimalsOf(value);
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(
+      localeKey === "" ? void 0 : localeKey.split(","),
+      stableFormat(JSON.parse(formatKey), digits)
+    ),
+    [localeKey, formatKey, digits]
+  );
+  useEffect2(() => {
+    const start = shownRef.current;
+    if (Object.is(start, value)) return;
+    const settle = () => {
+      shownRef.current = value;
+      setShown(value);
+    };
+    const ms = duration ?? themeDuration(visualRef.current);
+    if (!Number.isFinite(value) || !Number.isFinite(start) || ms <= 0 || prefersReducedMotion()) {
+      settle();
+      return;
+    }
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const progress = Math.max(0, Math.min(1, (now - startedAt) / ms));
+      if (progress === 1) {
+        settle();
+        return;
+      }
+      const next = start + (value - start) * easeOut(progress);
+      shownRef.current = next;
+      setShown(next);
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [value, duration]);
+  return /* @__PURE__ */ jsxs18("span", { "data-kit": "animated-number", "data-animating": Object.is(shown, value) ? void 0 : "", ...props, children: [
+    /* @__PURE__ */ jsx28("span", { ref: visualRef, "aria-hidden": "true", "data-kit-slot": "animated-number-visual", children: formatter.format(shown) }),
+    /* @__PURE__ */ jsx28(VisuallyHidden, { children: formatter.format(value) })
+  ] });
+}
+
+// src/components/skeleton.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+function Skeleton({ variant = "text", width, height, style, ...props }) {
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-kit": "skeleton",
+      "data-variant": variant,
+      style: { inlineSize: width, blockSize: height, ...style },
       ...props
     }
   );
 }
+function SkeletonText({ lines = 3, ...props }) {
+  return /* @__PURE__ */ jsx29("div", { "data-kit": "skeleton-text", "aria-hidden": "true", ...props, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx29(
+    Skeleton,
+    {
+      variant: "text",
+      width: index === lines - 1 && lines > 1 ? "60%" : void 0
+    },
+    index
+  )) });
+}
 
-// src/components/icon-button.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function IconButton({ label, children, ...props }) {
-  return /* @__PURE__ */ jsx6(Button, { ...props, "aria-label": label, "data-icon-only": "", children });
+// src/components/empty-state.tsx
+import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  headingLevel = 3,
+  ...props
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs19("div", { "data-kit": "empty-state", ...props, children: [
+    icon ? /* @__PURE__ */ jsx30("div", { "data-kit-slot": "empty-icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx30(Heading, { "data-kit-slot": "empty-title", children: title }),
+    description ? /* @__PURE__ */ jsx30("p", { "data-kit-slot": "empty-description", children: description }) : null,
+    action ? /* @__PURE__ */ jsx30("div", { "data-kit-slot": "empty-action", children: action }) : null
+  ] });
 }
 
-// src/components/stack.tsx
-import { cssVar } from "@x12i/tokens";
-import { jsx as jsx7 } from "react/jsx-runtime";
-function Flex({
-  kind,
-  gap,
-  align,
-  justify,
-  wrap,
+// src/components/card.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+function Card({
+  variant = "outlined",
+  padding = "md",
+  interactive = false,
   asChild = false,
-  className,
-  style,
   ...props
 }) {
-  const Component = asChild ? Slot : "div";
-  const gapStyle = gap === void 0 ? void 0 : { gap: cssVar(`space.${gap}`) };
-  return /* @__PURE__ */ jsx7(
-    Component,
+  const shared = {
+    "data-kit": "card",
+    "data-variant": variant,
+    "data-padding": padding,
+    "data-interactive": interactive ? "" : void 0,
+    ...props
+  };
+  return asChild ? /* @__PURE__ */ jsx31(Slot, { ...shared }) : /* @__PURE__ */ jsx31("div", { ...shared });
+}
+function CardHeader(props) {
+  return /* @__PURE__ */ jsx31("div", { "data-kit-slot": "card-header", ...props });
+}
+function CardTitle({ level = 3, ...props }) {
+  const Heading = `h${level}`;
+  return /* @__PURE__ */ jsx31(Heading, { "data-kit-slot": "card-title", ...props });
+}
+function CardDescription(props) {
+  return /* @__PURE__ */ jsx31("p", { "data-kit-slot": "card-description", ...props });
+}
+function CardContent(props) {
+  return /* @__PURE__ */ jsx31("div", { "data-kit-slot": "card-content", ...props });
+}
+function CardFooter(props) {
+  return /* @__PURE__ */ jsx31("div", { "data-kit-slot": "card-footer", ...props });
+}
+
+// src/components/avatar.tsx
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { Children as Children2 } from "react";
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+function getInitials(name) {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) return "";
+  const first = Array.from(words[0] ?? "")[0] ?? "";
+  const last = words.length > 1 ? Array.from(words[words.length - 1] ?? "")[0] ?? "" : "";
+  return `${first}${last}`.toLocaleUpperCase();
+}
+function Avatar({
+  src,
+  name,
+  alt,
+  size = "md",
+  shape = "circle",
+  fallback,
+  ...props
+}) {
+  const label = alt ?? name ?? "";
+  const decorative = label === "";
+  return /* @__PURE__ */ jsxs20(
+    BaseAvatar.Root,
     {
-      "data-kit": kind,
+      "data-kit": "avatar",
+      "data-size": size,
+      "data-shape": shape,
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label,
+      ...props,
+      children: [
+        src ? /* @__PURE__ */ jsx32(BaseAvatar.Image, { "data-kit-slot": "avatar-image", src, alt: "" }) : null,
+        /* @__PURE__ */ jsx32(BaseAvatar.Fallback, { "data-kit-slot": "avatar-fallback", "aria-hidden": "true", children: fallback ?? (name ? getInitials(name) : null) })
+      ]
+    }
+  );
+}
+function AvatarGroup({
+  max = 4,
+  overflowLabel,
+  size = "md",
+  children,
+  ...props
+}) {
+  const avatars = Children2.toArray(children);
+  const shown = avatars.slice(0, max);
+  const hidden = avatars.length - shown.length;
+  return /* @__PURE__ */ jsxs20("div", { role: "group", "data-kit": "avatar-group", "data-size": size, ...props, children: [
+    shown,
+    hidden > 0 ? /* @__PURE__ */ jsx32(
+      "span",
+      {
+        "data-kit": "avatar",
+        "data-size": size,
+        "data-shape": "circle",
+        "data-overflow": "",
+        role: "img",
+        "aria-label": overflowLabel?.(hidden) ?? `+${hidden}`,
+        children: /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", "data-kit-slot": "avatar-fallback", children: `+${hidden}` })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/tag.tsx
+import { Icon as Icon9 } from "@x12i/icons";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
+function Tag({
+  tone = "neutral",
+  size = "md",
+  icon,
+  onRemove,
+  removeLabel,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs21("span", { "data-kit": "tag", "data-tone": tone, "data-size": size, ...props, children: [
+    icon ? /* @__PURE__ */ jsx33("span", { "data-kit-slot": "tag-icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx33("span", { "data-kit-slot": "tag-text", children }),
+    onRemove ? /* @__PURE__ */ jsx33("button", { type: "button", "data-kit-slot": "tag-remove", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx33(Icon9, { name: "close", size: 12 }) }) : null
+  ] });
+}
+
+// src/components/stat.tsx
+import { Icon as Icon10 } from "@x12i/icons";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
+var trendIcon = {
+  up: "chevron-up",
+  down: "chevron-down",
+  flat: "minus"
+};
+function Stat({
+  label,
+  value,
+  delta,
+  trend = "flat",
+  intent,
+  trendLabel,
+  help,
+  ...props
+}) {
+  const resolvedIntent = intent ?? (trend === "up" ? "positive" : trend === "down" ? "negative" : "neutral");
+  return /* @__PURE__ */ jsxs22("dl", { "data-kit": "stat", ...props, children: [
+    /* @__PURE__ */ jsx34("dt", { "data-kit-slot": "stat-label", children: label }),
+    /* @__PURE__ */ jsx34("dd", { "data-kit-slot": "stat-value", children: value }),
+    delta ? /* @__PURE__ */ jsxs22("dd", { "data-kit-slot": "stat-delta", "data-trend": trend, "data-intent": resolvedIntent, children: [
+      /* @__PURE__ */ jsx34(Icon10, { name: trendIcon[trend], size: 16 }),
+      trendLabel ? /* @__PURE__ */ jsx34(VisuallyHidden, { children: `${trendLabel} ` }) : null,
+      delta
+    ] }) : null,
+    help ? /* @__PURE__ */ jsx34("dd", { "data-kit-slot": "stat-help", children: help }) : null
+  ] });
+}
+
+// src/components/table.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function TableContainer({ label, ...props }) {
+  return /* @__PURE__ */ jsx35("div", { "data-kit": "table-container", role: "region", "aria-label": label, tabIndex: 0, ...props });
+}
+function Table({ striped, stickyHeader, density, ...props }) {
+  return /* @__PURE__ */ jsx35(
+    "table",
+    {
+      "data-kit": "table",
+      "data-striped": striped ? "" : void 0,
+      "data-sticky-header": stickyHeader ? "" : void 0,
+      "data-density": density,
+      ...props
+    }
+  );
+}
+function TableCaption(props) {
+  return /* @__PURE__ */ jsx35("caption", { "data-kit-slot": "table-caption", ...props });
+}
+function TableHead(props) {
+  return /* @__PURE__ */ jsx35("thead", { "data-kit-slot": "table-head", ...props });
+}
+function TableBody(props) {
+  return /* @__PURE__ */ jsx35("tbody", { "data-kit-slot": "table-body", ...props });
+}
+function TableFoot(props) {
+  return /* @__PURE__ */ jsx35("tfoot", { "data-kit-slot": "table-foot", ...props });
+}
+function TableRow({ selected, ...props }) {
+  return /* @__PURE__ */ jsx35("tr", { "data-kit-slot": "table-row", "data-selected": selected ? "" : void 0, ...props });
+}
+function TableHeaderCell({ align = "start", sort, scope = "col", ...props }) {
+  return /* @__PURE__ */ jsx35(
+    "th",
+    {
+      "data-kit-slot": "table-header-cell",
       "data-align": align,
-      "data-justify": justify,
-      "data-wrap": wrap ? "" : void 0,
-      className: cx(className),
-      style: { ...gapStyle, ...style },
+      "data-sort": sort && sort !== "none" ? sort : void 0,
+      "aria-sort": sort,
+      scope,
       ...props
     }
   );
 }
-function Stack({ gap = "3", ...props }) {
-  return /* @__PURE__ */ jsx7(Flex, { kind: "stack", gap, ...props });
+function TableCell({ align = "start", ...props }) {
+  return /* @__PURE__ */ jsx35("td", { "data-kit-slot": "table-cell", "data-align": align, ...props });
 }
-function Inline({ gap = "2", align = "center", wrap = true, ...props }) {
-  return /* @__PURE__ */ jsx7(Flex, { kind: "inline", gap, align, wrap, ...props });
+
+// src/components/scroll-area.tsx
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+function ScrollArea({
+  label,
+  orientation = "vertical",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs23(BaseScrollArea.Root, { "data-kit": "scroll-area", ...props, children: [
+    /* @__PURE__ */ jsx36(
+      BaseScrollArea.Viewport,
+      {
+        "data-kit-slot": "scroll-viewport",
+        role: "region",
+        "aria-label": label,
+        tabIndex: 0,
+        children: /* @__PURE__ */ jsx36(BaseScrollArea.Content, { "data-kit-slot": "scroll-content", children })
+      }
+    ),
+    orientation !== "horizontal" ? /* @__PURE__ */ jsx36(BaseScrollArea.Scrollbar, { orientation: "vertical", "data-kit-slot": "scrollbar", children: /* @__PURE__ */ jsx36(BaseScrollArea.Thumb, { "data-kit-slot": "scroll-thumb" }) }) : null,
+    orientation !== "vertical" ? /* @__PURE__ */ jsx36(BaseScrollArea.Scrollbar, { orientation: "horizontal", "data-kit-slot": "scrollbar", children: /* @__PURE__ */ jsx36(BaseScrollArea.Thumb, { "data-kit-slot": "scroll-thumb" }) }) : null,
+    orientation === "both" ? /* @__PURE__ */ jsx36(BaseScrollArea.Corner, { "data-kit-slot": "scroll-corner" }) : null
+  ] });
+}
+
+// src/components/collapsible.tsx
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { Icon as Icon11 } from "@x12i/icons";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+function Collapsible(props) {
+  return /* @__PURE__ */ jsx37(BaseCollapsible.Root, { "data-kit": "collapsible", ...props });
+}
+function CollapsibleTrigger({ children, ...props }) {
+  return /* @__PURE__ */ jsxs24(BaseCollapsible.Trigger, { "data-kit-slot": "collapsible-trigger", ...props, children: [
+    /* @__PURE__ */ jsx37(Icon11, { name: "chevron-right", "data-kit-slot": "collapsible-chevron" }),
+    children
+  ] });
+}
+function CollapsiblePanel(props) {
+  return /* @__PURE__ */ jsx37(BaseCollapsible.Panel, { "data-kit-slot": "collapsible-panel", ...props });
+}
+
+// src/components/tabs.tsx
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+function Tabs({ variant = "line", ...props }) {
+  return /* @__PURE__ */ jsx38(BaseTabs.Root, { "data-kit": "tabs", "data-variant": variant, ...props });
+}
+function TabList({ children, ...props }) {
+  return /* @__PURE__ */ jsxs25(BaseTabs.List, { "data-kit-slot": "tab-list", ...props, children: [
+    children,
+    /* @__PURE__ */ jsx38(BaseTabs.Indicator, { "data-kit-slot": "tab-indicator" })
+  ] });
+}
+function Tab(props) {
+  return /* @__PURE__ */ jsx38(BaseTabs.Tab, { "data-kit-slot": "tab", ...props });
+}
+function TabPanel(props) {
+  return /* @__PURE__ */ jsx38(BaseTabs.Panel, { "data-kit-slot": "tab-panel", ...props });
+}
+
+// src/components/breadcrumb.tsx
+import { Icon as Icon12 } from "@x12i/icons";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
+function Breadcrumb({ label, items, renderLink, ...props }) {
+  return /* @__PURE__ */ jsx39("nav", { "data-kit": "breadcrumb", "aria-label": label, ...props, children: /* @__PURE__ */ jsx39("ol", { "data-kit-slot": "breadcrumb-list", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs26("li", { "data-kit-slot": "breadcrumb-item", children: [
+      item.href && !isLast ? renderLink?.({ href: item.href, label: item.label }) ?? /* @__PURE__ */ jsx39(Link, { href: item.href, tone: "neutral", underline: "hover", children: item.label }) : /* @__PURE__ */ jsx39("span", { "data-kit-slot": "breadcrumb-page", "aria-current": isLast ? "page" : void 0, children: item.label }),
+      isLast ? null : /* @__PURE__ */ jsx39("span", { "data-kit-slot": "breadcrumb-separator", "aria-hidden": "true", children: /* @__PURE__ */ jsx39(Icon12, { name: "chevron-right", size: 12 }) })
+    ] }, index);
+  }) }) });
+}
+
+// src/components/pagination.tsx
+import { Icon as Icon13 } from "@x12i/icons";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
+function getPaginationRange(page, pageCount, siblingCount = 1) {
+  const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, index) => from + index);
+  const slots = siblingCount * 2 + 5;
+  if (pageCount <= slots) return range(1, pageCount);
+  const current = Math.min(Math.max(page, 1), pageCount);
+  const left = Math.max(current - siblingCount, 1);
+  const right = Math.min(current + siblingCount, pageCount);
+  const showLeftEllipsis = left > 2;
+  const showRightEllipsis = right < pageCount - 1;
+  const edgeCount = 3 + siblingCount * 2;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    return [...range(1, edgeCount), "ellipsis-end", pageCount];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    return [1, "ellipsis-start", ...range(pageCount - edgeCount + 1, pageCount)];
+  }
+  return [1, "ellipsis-start", ...range(left, right), "ellipsis-end", pageCount];
+}
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblingCount = 1,
+  label,
+  previousLabel,
+  nextLabel,
+  getPageLabel,
+  ...props
+}) {
+  const items = getPaginationRange(page, pageCount, siblingCount);
+  return /* @__PURE__ */ jsx40("nav", { "data-kit": "pagination", "aria-label": label, ...props, children: /* @__PURE__ */ jsxs27("ul", { "data-kit-slot": "pagination-list", children: [
+    /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(
+      "button",
+      {
+        type: "button",
+        "data-kit-slot": "pagination-step",
+        "data-direction": "previous",
+        "aria-label": previousLabel,
+        disabled: page <= 1,
+        onClick: () => onPageChange(page - 1),
+        children: /* @__PURE__ */ jsx40(Icon13, { name: "chevron-left" })
+      }
+    ) }),
+    items.map(
+      (item) => typeof item === "number" ? /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(
+        "button",
+        {
+          type: "button",
+          "data-kit-slot": "pagination-page",
+          "data-current": item === page ? "" : void 0,
+          "aria-label": getPageLabel(item),
+          "aria-current": item === page ? "page" : void 0,
+          onClick: () => onPageChange(item),
+          children: item
+        }
+      ) }, item) : /* @__PURE__ */ jsx40("li", { "data-kit-slot": "pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }, item)
+    ),
+    /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(
+      "button",
+      {
+        type: "button",
+        "data-kit-slot": "pagination-step",
+        "data-direction": "next",
+        "aria-label": nextLabel,
+        disabled: page >= pageCount,
+        onClick: () => onPageChange(page + 1),
+        children: /* @__PURE__ */ jsx40(Icon13, { name: "chevron-right" })
+      }
+    ) })
+  ] }) });
+}
+
+// src/components/accordion.tsx
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { Icon as Icon14 } from "@x12i/icons";
+import { createElement } from "react";
+import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+function Accordion(props) {
+  return /* @__PURE__ */ jsx41(BaseAccordion.Root, { "data-kit": "accordion", ...props });
+}
+function AccordionItem({ title, children, headingLevel = 3, ...props }) {
+  return /* @__PURE__ */ jsxs28(BaseAccordion.Item, { "data-kit-slot": "accordion-item", ...props, children: [
+    /* @__PURE__ */ jsx41(BaseAccordion.Header, { "data-kit-slot": "accordion-header", render: createElement(`h${headingLevel}`), children: /* @__PURE__ */ jsxs28(BaseAccordion.Trigger, { "data-kit-slot": "accordion-trigger", children: [
+      /* @__PURE__ */ jsx41("span", { "data-kit-slot": "accordion-title", children: title }),
+      /* @__PURE__ */ jsx41(Icon14, { name: "chevron-down", "data-kit-slot": "accordion-chevron" })
+    ] }) }),
+    /* @__PURE__ */ jsx41(BaseAccordion.Panel, { "data-kit-slot": "accordion-panel", children: /* @__PURE__ */ jsx41("div", { "data-kit-slot": "accordion-content", children }) })
+  ] });
+}
+
+// src/components/segmented-control.tsx
+import { Radio as BaseRadio2 } from "@base-ui/react/radio";
+import { RadioGroup as BaseRadioGroup2 } from "@base-ui/react/radio-group";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function SegmentedControl({
+  options,
+  size = "md",
+  fullWidth = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx42(
+    BaseRadioGroup2,
+    {
+      "data-kit": "segmented-control",
+      "data-size": size,
+      "data-full-width": fullWidth ? "" : void 0,
+      ...props,
+      children: options.map((option) => /* @__PURE__ */ jsx42(
+        BaseRadio2.Root,
+        {
+          value: option.value,
+          disabled: option.disabled,
+          "data-kit-slot": "segment",
+          children: option.label
+        },
+        option.value
+      ))
+    }
+  );
+}
+
+// src/components/stepper.tsx
+import { Icon as Icon15 } from "@x12i/icons";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
+function Stepper({
+  steps,
+  current,
+  orientation = "horizontal",
+  getStatusLabel,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx43("ol", { "data-kit": "stepper", "data-orientation": orientation, ...props, children: steps.map((step, index) => {
+    const status = index < current ? "complete" : index === current ? "current" : "upcoming";
+    return /* @__PURE__ */ jsxs29(
+      "li",
+      {
+        "data-kit-slot": "step",
+        "data-status": status,
+        "aria-current": status === "current" ? "step" : void 0,
+        children: [
+          /* @__PURE__ */ jsx43("span", { "data-kit-slot": "step-marker", "aria-hidden": "true", children: status === "complete" ? /* @__PURE__ */ jsx43(Icon15, { name: "check", size: 16 }) : index + 1 }),
+          /* @__PURE__ */ jsxs29("span", { "data-kit-slot": "step-text", children: [
+            /* @__PURE__ */ jsxs29("span", { "data-kit-slot": "step-label", children: [
+              step.label,
+              /* @__PURE__ */ jsx43(VisuallyHidden, { children: `. ${getStatusLabel(status)}` })
+            ] }),
+            step.description ? /* @__PURE__ */ jsx43("span", { "data-kit-slot": "step-description", children: step.description }) : null
+          ] })
+        ]
+      },
+      step.id
+    );
+  }) });
+}
+
+// src/components/toolbar.tsx
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { jsx as jsx44 } from "react/jsx-runtime";
+function Toolbar(props) {
+  return /* @__PURE__ */ jsx44(BaseToolbar.Root, { "data-kit": "toolbar", ...props });
+}
+function ToolbarGroup(props) {
+  return /* @__PURE__ */ jsx44(BaseToolbar.Group, { "data-kit-slot": "toolbar-group", ...props });
+}
+function ToolbarButton({
+  variant = "ghost",
+  tone = "neutral",
+  size = "sm",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx44(BaseToolbar.Button, { render: /* @__PURE__ */ jsx44(Button, { variant, tone, size }), ...props });
+}
+function ToolbarSeparator(props) {
+  return /* @__PURE__ */ jsx44(BaseToolbar.Separator, { "data-kit-slot": "toolbar-separator", ...props });
+}
+
+// src/components/dialog.tsx
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Icon as Icon16 } from "@x12i/icons";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
+var Dialog = BaseDialog.Root;
+function DialogTrigger(props) {
+  return /* @__PURE__ */ jsx45(BaseDialog.Trigger, { ...props });
+}
+function DialogContent({ size = "md", closeLabel, children, ...props }) {
+  return /* @__PURE__ */ jsxs30(BaseDialog.Portal, { children: [
+    /* @__PURE__ */ jsx45(BaseDialog.Backdrop, { "data-kit": "dialog-backdrop" }),
+    /* @__PURE__ */ jsx45(BaseDialog.Viewport, { "data-kit": "dialog-viewport", children: /* @__PURE__ */ jsxs30(BaseDialog.Popup, { "data-kit": "dialog", "data-size": size, ...props, children: [
+      children,
+      closeLabel ? /* @__PURE__ */ jsx45(
+        BaseDialog.Close,
+        {
+          "data-kit-slot": "dialog-close",
+          render: /* @__PURE__ */ jsx45(IconButton, { label: closeLabel, variant: "ghost", tone: "neutral", size: "sm", children: /* @__PURE__ */ jsx45(Icon16, { name: "close" }) })
+        }
+      ) : null
+    ] }) })
+  ] });
+}
+function DialogTitle(props) {
+  return /* @__PURE__ */ jsx45(BaseDialog.Title, { "data-kit-slot": "dialog-title", ...props });
+}
+function DialogDescription(props) {
+  return /* @__PURE__ */ jsx45(BaseDialog.Description, { "data-kit-slot": "dialog-description", ...props });
+}
+function DialogHeader(props) {
+  return /* @__PURE__ */ jsx45("div", { "data-kit-slot": "dialog-header", ...props });
+}
+function DialogBody(props) {
+  return /* @__PURE__ */ jsx45("div", { "data-kit-slot": "dialog-body", ...props });
+}
+function DialogFooter(props) {
+  return /* @__PURE__ */ jsx45("div", { "data-kit-slot": "dialog-footer", ...props });
+}
+function DialogClose(props) {
+  return /* @__PURE__ */ jsx45(BaseDialog.Close, { ...props });
+}
+var AlertDialog = BaseAlertDialog.Root;
+function AlertDialogTrigger(props) {
+  return /* @__PURE__ */ jsx45(BaseAlertDialog.Trigger, { ...props });
+}
+function AlertDialogContent({ size = "sm", ...props }) {
+  return /* @__PURE__ */ jsxs30(BaseAlertDialog.Portal, { children: [
+    /* @__PURE__ */ jsx45(BaseAlertDialog.Backdrop, { "data-kit": "dialog-backdrop" }),
+    /* @__PURE__ */ jsx45(BaseAlertDialog.Viewport, { "data-kit": "dialog-viewport", children: /* @__PURE__ */ jsx45(BaseAlertDialog.Popup, { "data-kit": "dialog", "data-kind": "alert", "data-size": size, ...props }) })
+  ] });
+}
+function AlertDialogTitle(props) {
+  return /* @__PURE__ */ jsx45(BaseAlertDialog.Title, { "data-kit-slot": "dialog-title", ...props });
+}
+function AlertDialogDescription(props) {
+  return /* @__PURE__ */ jsx45(BaseAlertDialog.Description, { "data-kit-slot": "dialog-description", ...props });
+}
+function AlertDialogFooter(props) {
+  return /* @__PURE__ */ jsx45("div", { "data-kit-slot": "dialog-footer", ...props });
+}
+function AlertDialogClose(props) {
+  return /* @__PURE__ */ jsx45(BaseAlertDialog.Close, { ...props });
+}
+
+// src/components/drawer.tsx
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import { Icon as Icon17 } from "@x12i/icons";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
+function isRtl() {
+  return typeof document !== "undefined" && getComputedStyle(document.documentElement).direction === "rtl";
+}
+function swipeDirection(side) {
+  if (side === "top") return "up";
+  if (side === "bottom") return "down";
+  const rtl = isRtl();
+  return side === "start" !== rtl ? "left" : "right";
+}
+function Drawer({ side = "end", ...props }) {
+  return /* @__PURE__ */ jsx46(BaseDrawer.Root, { swipeDirection: swipeDirection(side), ...props });
+}
+function DrawerTrigger(props) {
+  return /* @__PURE__ */ jsx46(BaseDrawer.Trigger, { ...props });
+}
+function DrawerContent({ side = "end", closeLabel, children, ...props }) {
+  return /* @__PURE__ */ jsxs31(BaseDrawer.Portal, { children: [
+    /* @__PURE__ */ jsx46(BaseDrawer.Backdrop, { "data-kit": "drawer-backdrop" }),
+    /* @__PURE__ */ jsx46(BaseDrawer.Viewport, { "data-kit": "drawer-viewport", children: /* @__PURE__ */ jsxs31(BaseDrawer.Popup, { "data-kit": "drawer", "data-side": side, ...props, children: [
+      children,
+      closeLabel ? /* @__PURE__ */ jsx46(
+        BaseDrawer.Close,
+        {
+          "data-kit-slot": "drawer-close",
+          render: /* @__PURE__ */ jsx46(IconButton, { label: closeLabel, variant: "ghost", tone: "neutral", size: "sm", children: /* @__PURE__ */ jsx46(Icon17, { name: "close" }) })
+        }
+      ) : null
+    ] }) })
+  ] });
+}
+function DrawerTitle(props) {
+  return /* @__PURE__ */ jsx46(BaseDrawer.Title, { "data-kit-slot": "drawer-title", ...props });
+}
+function DrawerDescription(props) {
+  return /* @__PURE__ */ jsx46(BaseDrawer.Description, { "data-kit-slot": "drawer-description", ...props });
+}
+function DrawerHeader(props) {
+  return /* @__PURE__ */ jsx46("div", { "data-kit-slot": "drawer-header", ...props });
+}
+function DrawerBody(props) {
+  return /* @__PURE__ */ jsx46("div", { "data-kit-slot": "drawer-body", ...props });
+}
+function DrawerFooter(props) {
+  return /* @__PURE__ */ jsx46("div", { "data-kit-slot": "drawer-footer", ...props });
+}
+function DrawerClose(props) {
+  return /* @__PURE__ */ jsx46(BaseDrawer.Close, { ...props });
+}
+
+// src/components/popover.tsx
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { jsx as jsx47, jsxs as jsxs32 } from "react/jsx-runtime";
+var Popover = BasePopover.Root;
+function PopoverTrigger(props) {
+  return /* @__PURE__ */ jsx47(BasePopover.Trigger, { ...props });
+}
+function PopoverContent({
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  alignOffset,
+  collisionPadding = 8,
+  anchor,
+  arrow = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx47(BasePopover.Portal, { children: /* @__PURE__ */ jsx47(
+    BasePopover.Positioner,
+    {
+      "data-kit": "popover-positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      anchor,
+      children: /* @__PURE__ */ jsxs32(BasePopover.Popup, { "data-kit": "popover", ...props, children: [
+        arrow ? /* @__PURE__ */ jsx47(BasePopover.Arrow, { "data-kit-slot": "popup-arrow" }) : null,
+        children
+      ] })
+    }
+  ) });
+}
+function PopoverTitle(props) {
+  return /* @__PURE__ */ jsx47(BasePopover.Title, { "data-kit-slot": "popover-title", ...props });
+}
+function PopoverDescription(props) {
+  return /* @__PURE__ */ jsx47(BasePopover.Description, { "data-kit-slot": "popover-description", ...props });
+}
+function PopoverClose(props) {
+  return /* @__PURE__ */ jsx47(BasePopover.Close, { ...props });
+}
+
+// src/components/tooltip.tsx
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { useId as useId4, useState as useState4 } from "react";
+import { jsx as jsx48, jsxs as jsxs33 } from "react/jsx-runtime";
+var TooltipProvider = BaseTooltip.Provider;
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  alignOffset,
+  collisionPadding = 8,
+  delay = 600,
+  closeDelay,
+  disabled,
+  open,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  const id = useId4();
+  const [internalOpen, setInternalOpen] = useState4(defaultOpen);
+  const isOpen = open ?? internalOpen;
+  const own = children.props["aria-describedby"];
+  const describedBy = isOpen ? [own, id].filter(Boolean).join(" ") : own;
+  return /* @__PURE__ */ jsxs33(
+    BaseTooltip.Root,
+    {
+      open: isOpen,
+      onOpenChange: (next) => {
+        setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx48(
+          BaseTooltip.Trigger,
+          {
+            render: children,
+            delay,
+            closeDelay,
+            "aria-describedby": describedBy
+          }
+        ),
+        /* @__PURE__ */ jsx48(BaseTooltip.Portal, { children: /* @__PURE__ */ jsx48(
+          BaseTooltip.Positioner,
+          {
+            "data-kit": "tooltip-positioner",
+            side,
+            align,
+            sideOffset,
+            alignOffset,
+            collisionPadding,
+            children: /* @__PURE__ */ jsx48(BaseTooltip.Popup, { "data-kit": "tooltip", id, role: "tooltip", children: content })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/menu.tsx
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Icon as Icon18 } from "@x12i/icons";
+import { jsx as jsx49, jsxs as jsxs34 } from "react/jsx-runtime";
+var Menu = BaseMenu.Root;
+function MenuTrigger(props) {
+  return /* @__PURE__ */ jsx49(BaseMenu.Trigger, { ...props });
+}
+function MenuContent({
+  side = "bottom",
+  align = "start",
+  sideOffset = 4,
+  alignOffset,
+  collisionPadding = 8,
+  anchor,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx49(BaseMenu.Portal, { children: /* @__PURE__ */ jsx49(
+    BaseMenu.Positioner,
+    {
+      "data-kit": "menu-positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      anchor,
+      children: /* @__PURE__ */ jsx49(BaseMenu.Popup, { "data-kit": "menu", ...props })
+    }
+  ) });
+}
+function MenuItem({ icon, shortcut, tone = "default", children, ...props }) {
+  return /* @__PURE__ */ jsxs34(BaseMenu.Item, { "data-kit": "menu-item", "data-tone": tone, ...props, children: [
+    icon ? /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-text", children }),
+    shortcut ? /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-shortcut", "aria-hidden": "true", children: shortcut }) : null
+  ] });
+}
+function MenuCheckboxItem({ children, ...props }) {
+  return /* @__PURE__ */ jsxs34(BaseMenu.CheckboxItem, { "data-kit": "menu-item", "data-choice": "checkbox", ...props, children: [
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx49(BaseMenu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx49(Icon18, { name: "check" }) }) }),
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-text", children })
+  ] });
+}
+function MenuRadioGroup(props) {
+  return /* @__PURE__ */ jsx49(BaseMenu.RadioGroup, { ...props });
+}
+function MenuRadioItem({ children, ...props }) {
+  return /* @__PURE__ */ jsxs34(BaseMenu.RadioItem, { "data-kit": "menu-item", "data-choice": "radio", ...props, children: [
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx49(BaseMenu.RadioItemIndicator, { "data-kit-slot": "menu-radio-dot" }) }),
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-text", children })
+  ] });
+}
+function MenuGroup(props) {
+  return /* @__PURE__ */ jsx49(BaseMenu.Group, { "data-kit-slot": "menu-group", ...props });
+}
+function MenuLabel(props) {
+  return /* @__PURE__ */ jsx49(BaseMenu.GroupLabel, { "data-kit-slot": "menu-label", ...props });
+}
+function MenuSeparator(props) {
+  return /* @__PURE__ */ jsx49(BaseMenu.Separator, { "data-kit-slot": "menu-separator", ...props });
+}
+var SubMenu = BaseMenu.SubmenuRoot;
+function SubMenuTrigger({ icon, children, ...props }) {
+  return /* @__PURE__ */ jsxs34(BaseMenu.SubmenuTrigger, { "data-kit": "menu-item", "data-submenu": "", ...props, children: [
+    icon ? /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-icon", "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-text", children }),
+    /* @__PURE__ */ jsx49("span", { "data-kit-slot": "menu-item-chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx49(Icon18, { name: "chevron-right" }) })
+  ] });
+}
+function SubMenuContent({
+  side = "inline-end",
+  align = "start",
+  sideOffset = 2,
+  alignOffset,
+  collisionPadding = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx49(BaseMenu.Portal, { children: /* @__PURE__ */ jsx49(
+    BaseMenu.Positioner,
+    {
+      "data-kit": "menu-positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      children: /* @__PURE__ */ jsx49(BaseMenu.Popup, { "data-kit": "menu", ...props })
+    }
+  ) });
+}
+var ContextMenu = BaseContextMenu.Root;
+function ContextMenuTrigger(props) {
+  return /* @__PURE__ */ jsx49(BaseContextMenu.Trigger, { "data-kit-slot": "context-trigger", ...props });
+}
+function ContextMenuContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding = 8,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx49(BaseContextMenu.Portal, { children: /* @__PURE__ */ jsx49(
+    BaseContextMenu.Positioner,
+    {
+      "data-kit": "menu-positioner",
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      children: /* @__PURE__ */ jsx49(BaseContextMenu.Popup, { "data-kit": "menu", ...props })
+    }
+  ) });
+}
+
+// src/components/toast.tsx
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { Icon as Icon19 } from "@x12i/icons";
+import { Fragment as Fragment8, jsx as jsx50, jsxs as jsxs35 } from "react/jsx-runtime";
+var tones = /* @__PURE__ */ new Set([
+  "neutral",
+  "accent",
+  "success",
+  "warning",
+  "danger",
+  "info"
+]);
+function toneOf(type) {
+  if (type === "error") return "danger";
+  return type && tones.has(type) ? type : "neutral";
+}
+function ToastList({ closeLabel }) {
+  const { toasts } = BaseToast.useToastManager();
+  return /* @__PURE__ */ jsx50(Fragment8, { children: toasts.map((toast) => {
+    const loading = toast.type === "loading";
+    const tone = toneOf(toast.type);
+    return /* @__PURE__ */ jsxs35(
+      BaseToast.Root,
+      {
+        toast,
+        "data-kit": "toast",
+        "data-tone": tone,
+        "data-loading": loading ? "" : void 0,
+        children: [
+          /* @__PURE__ */ jsx50("span", { "data-kit-slot": "toast-icon", "aria-hidden": "true", children: loading ? /* @__PURE__ */ jsx50(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx50(Icon19, { name: toneIcons[tone], size: 20 }) }),
+          /* @__PURE__ */ jsxs35(BaseToast.Content, { "data-kit-slot": "toast-content", children: [
+            toast.title ? /* @__PURE__ */ jsx50(BaseToast.Title, { "data-kit-slot": "toast-title" }) : null,
+            toast.description ? /* @__PURE__ */ jsx50(BaseToast.Description, { "data-kit-slot": "toast-description" }) : null,
+            toast.actionProps ? /* @__PURE__ */ jsx50(BaseToast.Action, { "data-kit-slot": "toast-action" }) : null
+          ] }),
+          /* @__PURE__ */ jsx50(
+            BaseToast.Close,
+            {
+              "data-kit-slot": "toast-close",
+              "aria-hidden": false,
+              render: /* @__PURE__ */ jsx50(IconButton, { label: closeLabel, variant: "ghost", tone: "neutral", size: "sm", children: /* @__PURE__ */ jsx50(Icon19, { name: "close" }) })
+            }
+          )
+        ]
+      },
+      toast.id
+    );
+  }) });
+}
+function ToastProvider({
+  children,
+  closeLabel,
+  regionLabel,
+  timeout = 5e3,
+  limit = 3,
+  placement = "bottom-end"
+}) {
+  return /* @__PURE__ */ jsxs35(BaseToast.Provider, { timeout, limit, children: [
+    children,
+    /* @__PURE__ */ jsx50(BaseToast.Portal, { children: /* @__PURE__ */ jsx50(
+      BaseToast.Viewport,
+      {
+        "data-kit": "toast-viewport",
+        "data-placement": placement,
+        "aria-label": regionLabel,
+        children: /* @__PURE__ */ jsx50(ToastList, { closeLabel })
+      }
+    ) })
+  ] });
+}
+function toManagerOptions(options) {
+  const { tone, action, ...rest } = options;
+  return {
+    ...rest,
+    ...tone ? { type: tone } : {},
+    ...action ? { actionProps: { children: action.label, onClick: action.onClick } } : {}
+  };
+}
+function useToast() {
+  const manager = BaseToast.useToastManager();
+  return {
+    show: (options) => manager.add(toManagerOptions(options)),
+    update: (id, options) => manager.update(id, toManagerOptions(options)),
+    close: (id) => manager.close(id),
+    promise: (promise, messages) => manager.promise(promise, {
+      loading: toManagerOptions(messages.loading),
+      success: (value) => toManagerOptions(typeof messages.success === "function" ? messages.success(value) : messages.success),
+      error: (error) => toManagerOptions(typeof messages.error === "function" ? messages.error(error) : messages.error)
+    })
+  };
+}
+
+// src/components/split-button.tsx
+import { Icon as Icon20 } from "@x12i/icons";
+import { jsx as jsx51, jsxs as jsxs36 } from "react/jsx-runtime";
+function SplitButton({
+  children,
+  menuLabel,
+  menu,
+  variant = "solid",
+  tone = "accent",
+  size = "md",
+  disabled,
+  loading,
+  loadingLabel,
+  onClick,
+  type
+}) {
+  return /* @__PURE__ */ jsxs36(ButtonGroup, { "data-kit-split": "", children: [
+    /* @__PURE__ */ jsx51(
+      Button,
+      {
+        variant,
+        tone,
+        size,
+        disabled,
+        loading,
+        loadingLabel,
+        onClick,
+        type,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs36(Menu, { children: [
+      /* @__PURE__ */ jsx51(
+        MenuTrigger,
+        {
+          disabled: disabled || loading,
+          render: /* @__PURE__ */ jsx51(IconButton, { label: menuLabel, variant, tone, size, children: /* @__PURE__ */ jsx51(Icon20, { name: "chevron-down" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx51(MenuContent, { align: "end", children: menu })
+    ] })
+  ] });
 }
 
 // src/providers/density-provider.tsx
@@ -230,12 +2230,12 @@ import {
 import {
   createContext,
   useContext,
-  useEffect as useEffect2,
-  useMemo
+  useEffect as useEffect4,
+  useMemo as useMemo2
 } from "react";
 
 // src/utils/use-persisted-choice.ts
-import { useCallback, useEffect, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useState as useState5 } from "react";
 function read(key) {
   try {
     return window.localStorage.getItem(key);
@@ -257,13 +2257,13 @@ function usePersistedChoice({
   isValid
 }) {
   const isControlled = controlled !== void 0;
-  const [internal, setInternal] = useState(defaultValue);
-  useEffect(() => {
+  const [internal, setInternal] = useState5(defaultValue);
+  useEffect3(() => {
     if (isControlled || storageKey === null) return;
     const stored = read(storageKey);
     if (stored !== null && isValid(stored)) setInternal(stored);
   }, [isControlled, storageKey, isValid]);
-  const setValue = useCallback(
+  const setValue = useCallback2(
     (next) => {
       if (!isControlled) setInternal(next);
       if (storageKey !== null) write(storageKey, next);
@@ -275,7 +2275,7 @@ function usePersistedChoice({
 }
 
 // src/providers/density-provider.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var DensityContext = createContext(null);
 function isDensity(value) {
   return densityNames.includes(value);
@@ -297,7 +2297,7 @@ function DensityProvider({
     storageKey: storageKey === void 0 ? scope === "root" ? DENSITY_STORAGE_KEY : null : storageKey,
     isValid: isDensity
   });
-  useEffect2(() => {
+  useEffect4(() => {
     if (scope !== "root") return;
     const root = document.documentElement;
     const previous = root.getAttribute(DENSITY_ATTRIBUTE);
@@ -307,11 +2307,11 @@ function DensityProvider({
       else root.setAttribute(DENSITY_ATTRIBUTE, previous);
     };
   }, [scope, density]);
-  const value = useMemo(
+  const value = useMemo2(
     () => ({ density, setDensity }),
     [density, setDensity]
   );
-  return /* @__PURE__ */ jsx8(DensityContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx52(DensityContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx52(
     "div",
     {
       "data-kit": "density-provider",
@@ -339,11 +2339,11 @@ import {
 import {
   createContext as createContext2,
   useContext as useContext2,
-  useEffect as useEffect3,
-  useMemo as useMemo2,
+  useEffect as useEffect5,
+  useMemo as useMemo3,
   useSyncExternalStore
 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var ThemeContext = createContext2(null);
 var DARK_QUERY = "(prefers-color-scheme: dark)";
 function subscribeToSystemTheme(onChange) {
@@ -376,7 +2376,7 @@ function ThemeProvider({
   const systemIsDark = useSyncExternalStore(subscribeToSystemTheme, prefersDark, serverPrefersDark);
   const resolvedTheme = theme === "system" ? systemIsDark ? "dark" : "light" : theme;
   const attribute = theme === "system" ? void 0 : theme;
-  useEffect3(() => {
+  useEffect5(() => {
     if (scope !== "root") return;
     const root = document.documentElement;
     const previous = root.getAttribute(THEME_ATTRIBUTE);
@@ -387,11 +2387,11 @@ function ThemeProvider({
       else root.setAttribute(THEME_ATTRIBUTE, previous);
     };
   }, [scope, attribute]);
-  const value = useMemo2(
+  const value = useMemo3(
     () => ({ theme, resolvedTheme, setTheme }),
     [theme, resolvedTheme, setTheme]
   );
-  return /* @__PURE__ */ jsx9(ThemeContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx53(ThemeContext, { value, children: scope === "root" ? children : /* @__PURE__ */ jsx53(
     "div",
     {
       "data-kit": "theme-provider",
@@ -410,17 +2410,145 @@ function useTheme() {
   return context;
 }
 export {
+  Accordion,
+  AccordionItem,
+  Alert,
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AnimatedNumber,
+  Avatar,
+  AvatarGroup,
   Badge,
+  Breadcrumb,
   Button,
+  ButtonGroup,
+  Callout,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CheckboxGroup,
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+  Combobox,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuTrigger,
+  CopyButton,
   DensityProvider,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+  EmptyState,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Fieldset,
   IconButton,
   Inline,
+  Input,
+  InputAddon,
+  InputGroup,
+  Kbd,
+  KbdGroup,
+  Link,
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuTrigger,
+  Meter,
+  MultiCombobox,
+  NumberInput,
+  OTPInput,
+  Pagination,
+  PasswordInput,
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+  Progress,
+  ProgressCircle,
+  Radio,
+  RadioGroup,
+  ScrollArea,
+  SegmentedControl,
+  Select,
+  Skeleton,
+  SkeletonText,
+  Slider,
   Spinner,
+  SplitButton,
   Stack,
+  Stat,
+  Stepper,
+  SubMenu,
+  SubMenuContent,
+  SubMenuTrigger,
+  Switch,
+  Tab,
+  TabList,
+  TabPanel,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableContainer,
+  TableFoot,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  Tabs,
+  Tag,
+  Textarea,
   ThemeProvider,
+  ToastProvider,
+  Toggle,
+  ToggleGroup,
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarSeparator,
+  Tooltip,
+  TooltipProvider,
   VisuallyHidden,
+  getInitials,
+  getPaginationRange,
   useDensity,
-  useTheme
+  useTheme,
+  useToast
 };
 //# sourceMappingURL=index.js.map