@terminal-blueprint/react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2178 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Battery: () => Battery,
+  BatteryInline: () => BatteryInline,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  CodeBlock: () => CodeBlock,
+  CornerBrackets: () => CornerBrackets,
+  Input: () => Input,
+  Modal: () => Modal,
+  NavDropdown: () => NavDropdown,
+  Pagination: () => Pagination,
+  Progress: () => Progress,
+  RadioGroup: () => RadioGroup,
+  RadioItem: () => RadioItem,
+  SafePortal: () => SafePortal,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
+  Sidenav: () => Sidenav,
+  Skeleton: () => Skeleton,
+  Spinner: () => Spinner,
+  Table: () => Table,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  Tag: () => Tag,
+  Textarea: () => Textarea,
+  ThemeProvider: () => ThemeProvider,
+  TitleLine: () => TitleLine,
+  Toaster: () => Toaster,
+  Toggle: () => Toggle,
+  Toolbar: () => Toolbar,
+  Tooltip: () => Tooltip,
+  cn: () => cn,
+  toast: () => createToast,
+  useDisclosure: () => useDisclosure,
+  useFocusTrap: () => useFocusTrap,
+  useKeyboardNav: () => useKeyboardNav,
+  useMergedRef: () => useMergedRef,
+  useReducedMotion: () => useReducedMotion,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+var import_css = require("@terminal-blueprint/core/css");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+function cn(...inputs) {
+  return (0, import_clsx.clsx)(inputs);
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button({
+  as,
+  variant = "default",
+  size = "md",
+  isLoading = false,
+  loadingText,
+  icon,
+  iconPosition = "left",
+  className,
+  disabled,
+  children,
+  ref,
+  ...props
+}) {
+  const Component = as || "button";
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    Component,
+    {
+      ref,
+      className: cn(
+        "tb-btn",
+        variant !== "default" && `tb-btn--${variant}`,
+        size !== "md" && `tb-btn--${size}`,
+        isLoading && "tb-btn--loading",
+        isLoading && loadingText && "tb-btn--loading-text",
+        isDisabled && "tb-btn--disabled",
+        className
+      ),
+      disabled: Component === "button" ? isDisabled : void 0,
+      "aria-disabled": Component !== "button" && isDisabled ? true : void 0,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tb-btn__spinner", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tb-btn__spinner-square" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tb-btn__spinner-square" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tb-btn__spinner-square" })
+        ] }),
+        icon && iconPosition === "left" && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tb-btn__icon", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: isLoading && !loadingText ? { visibility: "hidden" } : void 0, children: isLoading && loadingText ? loadingText : children }),
+        icon && iconPosition === "right" && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tb-btn__icon", children: icon })
+      ]
+    }
+  );
+}
+
+// src/components/Input.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Input({
+  label,
+  error,
+  hint,
+  size = "md",
+  icon,
+  iconPosition = "left",
+  className,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const autoId = (0, import_react.useId)();
+  const id = idProp ?? autoId;
+  const errorId = error ? `${id}-error` : void 0;
+  const hintId = hint && !error ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "tb-form-group", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: id, className: "tb-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: cn(
+          "tb-input-wrapper",
+          icon && `tb-input-wrapper--icon-${iconPosition}`
+        ),
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "tb-input__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              ref,
+              id,
+              className: cn(
+                "tb-input",
+                size !== "md" && `tb-input--${size}`,
+                error && "tb-input--error",
+                className
+              ),
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": errorId ?? hintId,
+              ...props
+            }
+          )
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: errorId, className: "tb-input__error", role: "alert", children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: hintId, className: "tb-input__hint", children: hint })
+  ] });
+}
+
+// src/components/Textarea.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Textarea({
+  label,
+  error,
+  hint,
+  className,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const autoId = (0, import_react2.useId)();
+  const id = idProp ?? autoId;
+  const errorId = error ? `${id}-error` : void 0;
+  const hintId = hint && !error ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tb-form-group", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: id, className: "tb-label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "textarea",
+      {
+        ref,
+        id,
+        className: cn(
+          "tb-textarea",
+          error && "tb-textarea--error",
+          className
+        ),
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": errorId ?? hintId,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: errorId, className: "tb-textarea__error", role: "alert", children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { id: hintId, className: "tb-textarea__hint", children: hint })
+  ] });
+}
+
+// src/components/Card/Card.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function CardRoot({
+  as,
+  brackets = false,
+  pulse = false,
+  hoverable = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const Component = as || "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    Component,
+    {
+      ref,
+      className: cn(
+        "tb-card",
+        brackets && "tb-card--bracketed",
+        pulse && "tb-card--pulse",
+        hoverable && "tb-card--hoverable",
+        className
+      ),
+      ...props,
+      children: [
+        brackets && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--tl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--tr" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--bl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "tb-card__bracket tb-card__bracket--br" })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function Header({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__header", className),
+      ...props
+    }
+  );
+}
+function Title({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__title", className),
+      ...props
+    }
+  );
+}
+function Body({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__body", className),
+      ...props
+    }
+  );
+}
+function Tags({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__tags", className),
+      ...props
+    }
+  );
+}
+function Footer({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__footer", className),
+      ...props
+    }
+  );
+}
+var Card = Object.assign(CardRoot, {
+  Header,
+  Title,
+  Body,
+  Tags,
+  Footer
+});
+
+// src/components/Badge.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Badge({
+  variant = "default",
+  dot = false,
+  pulse = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "span",
+    {
+      ref,
+      className: cn(
+        "tb-badge",
+        variant !== "default" && `tb-badge--${variant}`,
+        pulse && "tb-badge--pulse",
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            className: cn(
+              "tb-badge__dot"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Tag.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Tag({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: cn("tb-tag", className), ...props, children });
+}
+
+// src/components/TitleLine.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function TitleLine({ label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("tb-title-line", className), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "tb-title-line__label", children: label }) });
+}
+
+// src/components/CornerBrackets.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CornerBrackets({ pulse, children, className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("tb-brackets", pulse && "tb-brackets--pulse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "tb-brackets__corner tb-brackets__corner--tl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "tb-brackets__corner tb-brackets__corner--tr" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "tb-brackets__corner tb-brackets__corner--bl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "tb-brackets__corner tb-brackets__corner--br" }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Select/Select.tsx
+var import_react3 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var SelectContext = (0, import_react3.createContext)(null);
+function useSelectContext() {
+  const ctx = (0, import_react3.useContext)(SelectContext);
+  if (!ctx) throw new Error("Select compound components must be used within <Select>");
+  return ctx;
+}
+function Select({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder = "Select...",
+  disabled = false,
+  error,
+  label,
+  children,
+  className,
+  ref
+}) {
+  const [internalValue, setInternalValue] = (0, import_react3.useState)(defaultValue);
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
+  const [itemValues, setItemValues] = (0, import_react3.useState)([]);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const triggerRef = (0, import_react3.useRef)(null);
+  const listRef = (0, import_react3.useRef)(null);
+  const rootRef = (0, import_react3.useRef)(null);
+  const onSelect = (0, import_react3.useCallback)(
+    (val) => {
+      if (!isControlled) setInternalValue(val);
+      onValueChange?.(val);
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [isControlled, onValueChange]
+  );
+  const registerItem = (0, import_react3.useCallback)((val) => {
+    setItemValues((prev) => prev.includes(val) ? prev : [...prev, val]);
+  }, []);
+  const unregisterItem = (0, import_react3.useCallback)((val) => {
+    setItemValues((prev) => prev.filter((v) => v !== val));
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handleClick);
+    return () => document.removeEventListener("pointerdown", handleClick);
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    if (!open) return;
+    function handleKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open]);
+  (0, import_react3.useEffect)(() => {
+    if (open) {
+      const idx = itemValues.indexOf(value);
+      setFocusedIndex(idx >= 0 ? idx : 0);
+    }
+  }, [open, itemValues, value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    SelectContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        value,
+        onSelect,
+        placeholder,
+        disabled,
+        focusedIndex,
+        setFocusedIndex,
+        itemValues,
+        registerItem,
+        unregisterItem,
+        triggerRef,
+        listRef
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "div",
+        {
+          ref: (node) => {
+            rootRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          className: cn(
+            "tb-select",
+            error && "tb-select--error",
+            disabled && "tb-select--disabled",
+            className
+          ),
+          children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "tb-select__label", children: label }),
+            children,
+            error && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "tb-select__error", children: error })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Select/SelectTrigger.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SelectTrigger({ className, ref }) {
+  const { open, setOpen, value, placeholder, disabled, triggerRef, itemValues, focusedIndex, setFocusedIndex, onSelect } = useSelectContext();
+  function handleKeyDown(e) {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+        } else {
+          setFocusedIndex(Math.min(focusedIndex + 1, itemValues.length - 1));
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (open) {
+          setFocusedIndex(Math.max(focusedIndex - 1, 0));
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (open && focusedIndex >= 0 && itemValues[focusedIndex]) {
+          onSelect(itemValues[focusedIndex]);
+        } else {
+          setOpen(!open);
+        }
+        break;
+      }
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "button",
+    {
+      ref: (node) => {
+        triggerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      type: "button",
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      disabled,
+      className: cn("tb-select__trigger", open && "tb-select__trigger--open", className),
+      onPointerDown: (e) => {
+        e.preventDefault();
+        if (!disabled) setOpen(!open);
+      },
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("tb-select__value", !value && "tb-select__placeholder"), children: value || placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "tb-select__chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/components/Select/SelectContent.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function SelectContent({ children, className, ref }) {
+  const { open, listRef } = useSelectContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      role: "listbox",
+      className: cn("tb-select__dropdown", open && "tb-select__dropdown--open", className),
+      children
+    }
+  );
+}
+
+// src/components/Select/SelectItem.tsx
+var import_react4 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SelectItem({
+  value: itemValue,
+  disabled = false,
+  children,
+  className,
+  ref
+}) {
+  const { value, onSelect, focusedIndex, setFocusedIndex, itemValues, registerItem, unregisterItem } = useSelectContext();
+  const index = itemValues.indexOf(itemValue);
+  const isSelected = value === itemValue;
+  const isFocused = focusedIndex === index;
+  (0, import_react4.useEffect)(() => {
+    registerItem(itemValue);
+    return () => unregisterItem(itemValue);
+  }, [itemValue, registerItem, unregisterItem]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      ref,
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": disabled,
+      "data-focused": isFocused || void 0,
+      className: cn(
+        "tb-select__option",
+        isSelected && "tb-select__option--selected",
+        isFocused && "tb-select__option--focused",
+        disabled && "tb-select__option--disabled",
+        className
+      ),
+      onClick: () => {
+        if (!disabled) onSelect(itemValue);
+      },
+      onMouseEnter: () => {
+        if (!disabled) setFocusedIndex(index);
+      },
+      children
+    }
+  );
+}
+
+// src/components/Modal/Modal.tsx
+var import_react6 = require("react");
+
+// src/utils/SafePortal.tsx
+var import_react5 = require("react");
+var import_react_dom = require("react-dom");
+function SafePortal({ children, target }) {
+  const [mounted, setMounted] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return (0, import_react_dom.createPortal)(children, target ?? document.body);
+}
+
+// src/components/Modal/Modal.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var ModalContext = (0, import_react6.createContext)(null);
+function useModalContext() {
+  const ctx = (0, import_react6.useContext)(ModalContext);
+  if (!ctx) throw new Error("Modal sub-components must be used within <Modal>");
+  return ctx;
+}
+function ModalRoot({
+  open,
+  onOpenChange,
+  closeOnEscape = true,
+  closeOnBackdrop = true,
+  hideCloseButton = false,
+  portalTarget,
+  children,
+  className,
+  ref
+}) {
+  const modalRef = (0, import_react6.useRef)(null);
+  const previousFocusRef = (0, import_react6.useRef)(null);
+  const uid = (0, import_react6.useId)();
+  const titleId = `tb-modal-title-${uid}`;
+  const descId = `tb-modal-desc-${uid}`;
+  const onClose = (0, import_react6.useCallback)(() => onOpenChange(false), [onOpenChange]);
+  (0, import_react6.useEffect)(() => {
+    if (!open) return;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+    return () => {
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+    };
+  }, [open]);
+  (0, import_react6.useEffect)(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+      requestAnimationFrame(() => {
+        const focusable = modalRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        (focusable ?? modalRef.current)?.focus();
+      });
+    } else {
+      previousFocusRef.current?.focus();
+    }
+  }, [open]);
+  (0, import_react6.useEffect)(() => {
+    if (!open || !closeOnEscape) return;
+    function handleKey(e) {
+      if (e.key === "Escape") onOpenChange(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, closeOnEscape, onOpenChange]);
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (e) => {
+      if (e.key !== "Tab" || !modalRef.current) return;
+      const focusable = modalRef.current.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SafePortal, { target: portalTarget, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      className: cn("tb-modal-overlay", open && "tb-modal-overlay--open"),
+      onClick: (e) => {
+        if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        "div",
+        {
+          ref: (node) => {
+            modalRef.current = node;
+            if (typeof ref === "function") ref(node);
+            else if (ref) ref.current = node;
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": titleId,
+          "aria-describedby": descId,
+          className: cn("tb-modal", className),
+          tabIndex: -1,
+          onKeyDown: handleKeyDown,
+          children: [
+            !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "tb-modal__close",
+                "aria-label": "Close",
+                onClick: onClose,
+                children: "\xD7"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ModalContext.Provider, { value: { onClose, titleId, descId }, children })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function Title2({ className, ref, ...props }) {
+  const { titleId } = useModalContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "h2",
+    {
+      ref,
+      id: titleId,
+      className: cn("tb-modal__title", className),
+      ...props
+    }
+  );
+}
+function Body2({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-modal__body", className),
+      ...props
+    }
+  );
+}
+function Footer2({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      ref,
+      className: cn("tb-modal__footer", className),
+      ...props
+    }
+  );
+}
+function Close({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { onClose } = useModalContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn("tb-modal__close", className),
+      "aria-label": "Close",
+      onClick: onClose,
+      ...props,
+      children: children ?? "\xD7"
+    }
+  );
+}
+var Modal = Object.assign(ModalRoot, {
+  Title: Title2,
+  Body: Body2,
+  Footer: Footer2,
+  Close
+});
+
+// src/components/Tabs/Tabs.tsx
+var import_react7 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TabsContext = (0, import_react7.createContext)(null);
+function useTabsContext() {
+  const ctx = (0, import_react7.useContext)(TabsContext);
+  if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
+  return ctx;
+}
+function Tabs({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange: onValueChangeProp,
+  children,
+  className,
+  ref
+}) {
+  const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const onValueChange = (0, import_react7.useCallback)(
+    (val) => {
+      if (!isControlled) setInternalValue(val);
+      onValueChangeProp?.(val);
+    },
+    [isControlled, onValueChangeProp]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("tb-tabs", className), children }) });
+}
+function TabsList({ children, className, ref }) {
+  const listRef = (0, import_react7.useRef)(null);
+  function handleKeyDown(e) {
+    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+    const triggers = Array.from(
+      (listRef.current ?? e.currentTarget).querySelectorAll(
+        ".tb-tabs__trigger:not(:disabled)"
+      )
+    );
+    if (triggers.length === 0) return;
+    const current = document.activeElement;
+    const idx = triggers.indexOf(current);
+    if (idx < 0) return;
+    e.preventDefault();
+    let next;
+    if (e.key === "ArrowRight") {
+      next = (idx + 1) % triggers.length;
+    } else {
+      next = (idx - 1 + triggers.length) % triggers.length;
+    }
+    triggers[next].focus();
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      role: "tablist",
+      className: cn("tb-tabs__list", className),
+      onKeyDown: handleKeyDown,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value: triggerValue,
+  icon,
+  disabled = false,
+  children,
+  className,
+  ref
+}) {
+  const { value, onValueChange } = useTabsContext();
+  const isActive = value === triggerValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      className: cn(
+        "tb-tabs__trigger",
+        isActive && "tb-tabs__trigger--active",
+        disabled && "tb-tabs__trigger--disabled",
+        className
+      ),
+      onClick: () => {
+        if (!disabled) onValueChange(triggerValue);
+      },
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "tb-tabs__trigger-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+function TabsContent({ value: contentValue, children, className, ref }) {
+  const { value } = useTabsContext();
+  const isActive = value === contentValue;
+  if (!isActive) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      className: cn("tb-tabs__content", isActive && "tb-tabs__content--active", className),
+      children
+    }
+  );
+}
+
+// src/components/Toast/ToastProvider.tsx
+var import_react8 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var toasts = [];
+var nextId = 0;
+var listeners = /* @__PURE__ */ new Set();
+var timers = /* @__PURE__ */ new Map();
+function emit() {
+  for (const fn of listeners) fn();
+}
+function getSnapshot() {
+  return toasts;
+}
+function subscribe(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+function addToast(options, maxCount = 3) {
+  const id = `toast-${++nextId}`;
+  const entry = {
+    ...options,
+    id,
+    type: options.type ?? "info"
+  };
+  toasts = [...toasts, entry];
+  while (toasts.length > maxCount) {
+    const removed = toasts[0];
+    toasts = toasts.slice(1);
+    const timer = timers.get(removed.id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.delete(removed.id);
+    }
+  }
+  const duration = options.duration === void 0 ? 3500 : options.duration;
+  if (duration !== null) {
+    const timer = setTimeout(() => {
+      timers.delete(id);
+      toasts = toasts.filter((t) => t.id !== id);
+      emit();
+    }, duration);
+    timers.set(id, timer);
+  }
+  emit();
+  return id;
+}
+function dismissToast(id) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  toasts = toasts.filter((t) => t.id !== id);
+  emit();
+}
+function dismissAll() {
+  timers.forEach((timer) => clearTimeout(timer));
+  timers.clear();
+  toasts = [];
+  emit();
+}
+function createToast(options) {
+  return addToast(options);
+}
+createToast.success = (title, options) => addToast({ ...options, title, type: "success" });
+createToast.error = (title, options) => addToast({ ...options, title, type: "error" });
+createToast.warning = (title, options) => addToast({ ...options, title, type: "warning" });
+createToast.info = (title, options) => addToast({ ...options, title, type: "info" });
+createToast.dismiss = dismissToast;
+createToast.dismissAll = dismissAll;
+var ICONS = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+function Toaster({ position = "top-right" }) {
+  const currentToasts = (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  if (currentToasts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SafePortal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      className: cn("tb-toast-container", `tb-toast-container--${position}`),
+      "aria-live": "polite",
+      children: currentToasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        "div",
+        {
+          className: cn("tb-toast", `tb-toast--${t.type}`, "tb-toast--show"),
+          role: "alert",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "tb-toast__icon", "aria-hidden": "true", children: ICONS[t.type] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "tb-toast__content", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "tb-toast__title", children: t.title }),
+              t.description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "tb-toast__description", children: t.description })
+            ] }),
+            t.action && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "tb-toast__action",
+                onClick: () => {
+                  t.action.onClick();
+                  dismissToast(t.id);
+                },
+                children: t.action.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "tb-toast__dismiss",
+                "aria-label": "Dismiss",
+                onClick: () => dismissToast(t.id),
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        t.id
+      ))
+    }
+  ) });
+}
+
+// src/components/Tooltip.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Tooltip({
+  content,
+  side = "top",
+  align = "center",
+  children,
+  className,
+  ref
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("tb-tooltip-wrap", className),
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            role: "tooltip",
+            className: cn(
+              "tb-tooltip",
+              `tb-tooltip--${side}`,
+              align !== "center" && `tb-tooltip--align-${align}`
+            ),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/NavDropdown.tsx
+var import_react9 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function NavDropdown({ trigger, items, align = "left", className, ref }) {
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const rootRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    if (!open) return;
+    function handlePointer(e) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointer);
+    return () => document.removeEventListener("pointerdown", handlePointer);
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      ref: (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn("tb-nav-item", open && "tb-nav-item--open", align !== "left" && `tb-nav-item--align-${align}`, className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "tb-nav-item__trigger",
+            onClick: () => setOpen(!open),
+            children: [
+              typeof trigger === "string" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: trigger }) : trigger,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "tb-nav-item__chevron", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cn("tb-nav-dropdown", open && "tb-nav-dropdown--open"), children: items.map((item, i) => {
+          const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+            item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "tb-nav-dropdown__icon", children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: item.label })
+          ] });
+          if (item.href) {
+            return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "a",
+              {
+                href: item.href,
+                className: "tb-nav-dropdown__item",
+                onClick: () => {
+                  setOpen(false);
+                  item.onClick?.();
+                },
+                children: content
+              },
+              i
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "tb-nav-dropdown__item",
+              onClick: () => {
+                setOpen(false);
+                item.onClick?.();
+              },
+              children: content
+            },
+            i
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox.tsx
+var import_react10 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  error,
+  ref,
+  className
+}) {
+  const [internalChecked, setInternalChecked] = (0, import_react10.useState)(defaultChecked);
+  const isControlled = controlledChecked !== void 0;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  function handleChange() {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setInternalChecked(next);
+    onCheckedChange?.(next);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "label",
+      {
+        className: cn(
+          "tb-checkbox",
+          error && "tb-checkbox--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              checked: isChecked,
+              disabled,
+              onChange: handleChange
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { color: "var(--tb-error)", fontSize: "0.5rem", letterSpacing: "0.2em", marginTop: 4, display: "block" }, children: error })
+  ] });
+}
+
+// src/components/Toggle.tsx
+var import_react11 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Toggle({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  ref,
+  className
+}) {
+  const [internalChecked, setInternalChecked] = (0, import_react11.useState)(defaultChecked);
+  const isControlled = controlledChecked !== void 0;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  function handleChange() {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) setInternalChecked(next);
+    onCheckedChange?.(next);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "label",
+    {
+      className: cn(
+        "tb-toggle",
+        isChecked && "tb-toggle--checked",
+        disabled && "tb-toggle--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "tb-toggle__input",
+            checked: isChecked,
+            disabled,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "tb-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "tb-toggle__thumb" }) }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "tb-toggle__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/Radio.tsx
+var import_react12 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var RadioContext = (0, import_react12.createContext)(null);
+var radioGroupId = 0;
+function RadioGroup({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  disabled = false,
+  label,
+  orientation = "vertical",
+  children,
+  className
+}) {
+  const [internalValue, setInternalValue] = (0, import_react12.useState)(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const [name] = (0, import_react12.useState)(() => `tb-radio-group-${++radioGroupId}`);
+  function handleChange(val) {
+    if (!isControlled) setInternalValue(val);
+    onValueChange?.(val);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadioContext.Provider, { value: { value: currentValue, onChange: handleChange, disabled, name }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "fieldset",
+    {
+      className: cn(
+        "tb-radio-group",
+        orientation === "horizontal" && "tb-radio-group--horizontal",
+        disabled && "tb-radio-group--disabled",
+        className
+      ),
+      disabled,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("legend", { className: "tb-radio-group__label", children: label }),
+        children
+      ]
+    }
+  ) });
+}
+function RadioItem({
+  value,
+  label,
+  disabled: itemDisabled = false,
+  className
+}) {
+  const ctx = (0, import_react12.useContext)(RadioContext);
+  if (!ctx) throw new Error("RadioItem must be used within a RadioGroup");
+  const isDisabled = ctx.disabled || itemDisabled;
+  const isChecked = ctx.value === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "label",
+    {
+      className: cn(
+        "tb-radio",
+        isChecked && "tb-radio--checked",
+        isDisabled && "tb-radio--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "input",
+          {
+            type: "radio",
+            name: ctx.name,
+            value,
+            checked: isChecked,
+            disabled: isDisabled,
+            onChange: () => ctx.onChange(value)
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Progress.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Progress({
+  value,
+  variant = "default",
+  animated = false,
+  indeterminate = false,
+  label,
+  showValue = false,
+  className
+}) {
+  const clampedValue = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "div",
+    {
+      className: cn(
+        "tb-progress",
+        variant !== "default" && `tb-progress--${variant}`,
+        animated && "tb-progress--animated",
+        indeterminate && "tb-progress--indeterminate",
+        className
+      ),
+      role: "progressbar",
+      "aria-valuenow": indeterminate ? void 0 : clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "tb-progress__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "tb-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          "div",
+          {
+            className: "tb-progress__fill",
+            style: indeterminate ? void 0 : { width: `${clampedValue}%` }
+          }
+        ) }),
+        showValue && !indeterminate && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "tb-progress__value", children: [
+          clampedValue,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Battery.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Battery({
+  value,
+  total = 10,
+  variant = "default",
+  animated = false,
+  label,
+  className
+}) {
+  const clampedValue = Math.max(0, Math.min(total, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: cn(
+        "tb-battery",
+        variant !== "default" && `tb-battery--${variant}`,
+        animated && "tb-battery--animated",
+        className
+      ),
+      role: "meter",
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": total,
+      "aria-label": label,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "tb-battery__body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tb-battery__cap" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "tb-battery__segments", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "div",
+            {
+              className: cn(
+                "tb-battery__segment",
+                i < clampedValue && "tb-battery__segment--filled"
+              )
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/BatteryInline.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function BatteryInline({
+  value,
+  total = 10,
+  variant = "default",
+  animated = false,
+  label,
+  showValue = false,
+  className
+}) {
+  const clampedValue = Math.max(0, Math.min(total, value));
+  const percent = Math.round(clampedValue / total * 100);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: cn(
+        "tb-battery tb-battery--inline",
+        animated && "tb-battery--animated",
+        className
+      ),
+      role: "meter",
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": total,
+      "aria-label": label,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "div",
+          {
+            className: cn(
+              "tb-battery__segment",
+              i < clampedValue && "tb-battery__segment--filled",
+              i < clampedValue && variant !== "default" && `tb-battery__segment--${variant}`
+            )
+          },
+          i
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "tb-battery__cap" }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "tb-battery__value", children: [
+          percent,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Table.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function getCellValue(row, accessor) {
+  if (typeof accessor === "function") return accessor(row);
+  return row[accessor];
+}
+function Table({
+  columns,
+  data,
+  onRowClick,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("table", { className: "tb-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("thead", { className: "tb-table__head", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "tr",
+      {
+        className: cn(
+          "tb-table__row",
+          onRowClick && "tb-table__row--clickable"
+        ),
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        children: columns.map((col) => {
+          const value = getCellValue(row, col.accessor);
+          return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
+        })
+      },
+      rowIndex
+    )) })
+  ] }) });
+}
+
+// src/components/Skeleton.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className
+}) {
+  const style = {
+    width: typeof width === "number" ? `${width}px` : width,
+    height: typeof height === "number" ? `${height}px` : height
+  };
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        className: cn(
+          "tb-skeleton",
+          "tb-skeleton--text"
+        ),
+        style: i === lines - 1 ? { ...style, width: style.width ?? "75%" } : style
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      className: cn(
+        "tb-skeleton",
+        `tb-skeleton--${variant}`,
+        className
+      ),
+      style
+    }
+  );
+}
+
+// src/components/Spinner.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Spinner({
+  variant = "multi-square",
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "span",
+    {
+      className: cn(
+        "tb-spinner",
+        `tb-spinner--${variant}`,
+        size !== "md" && `tb-spinner--${size}`,
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      children: variant === "multi-square" && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "tb-spinner__square" })
+      ] })
+    }
+  );
+}
+
+// src/components/Pagination.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function getPageRange(page, totalPages, siblingCount) {
+  const totalSlots = siblingCount * 2 + 5;
+  if (totalPages <= totalSlots) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+  const leftSibling = Math.max(page - siblingCount, 2);
+  const rightSibling = Math.min(page + siblingCount, totalPages - 1);
+  const showLeftEllipsis = leftSibling > 2;
+  const showRightEllipsis = rightSibling < totalPages - 1;
+  const pages = [1];
+  if (showLeftEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let i = 2; i < leftSibling; i++) pages.push(i);
+  }
+  for (let i = leftSibling; i <= rightSibling; i++) pages.push(i);
+  if (showRightEllipsis) {
+    pages.push("ellipsis");
+  } else {
+    for (let i = rightSibling + 1; i < totalPages; i++) pages.push(i);
+  }
+  pages.push(totalPages);
+  return pages;
+}
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className
+}) {
+  const pages = getPageRange(page, totalPages, siblingCount);
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "button",
+      {
+        className: "tb-pagination__btn tb-pagination__btn--prev",
+        disabled: page <= 1,
+        onClick: () => onPageChange(page - 1),
+        "aria-label": "Previous page",
+        children: "\u2039"
+      }
+    ),
+    pages.map(
+      (p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        "button",
+        {
+          className: cn(
+            "tb-pagination__btn",
+            p === page && "tb-pagination__btn--active"
+          ),
+          onClick: () => onPageChange(p),
+          "aria-current": p === page ? "page" : void 0,
+          children: p
+        },
+        p
+      )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "button",
+      {
+        className: "tb-pagination__btn tb-pagination__btn--next",
+        disabled: page >= totalPages,
+        onClick: () => onPageChange(page + 1),
+        "aria-label": "Next page",
+        children: "\u203A"
+      }
+    )
+  ] });
+}
+
+// src/components/Breadcrumbs.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function Breadcrumbs({
+  items,
+  separator = "/",
+  linkComponent,
+  className
+}) {
+  const LinkComponent = linkComponent || "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("li", { className: "tb-breadcrumbs__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "span",
+        {
+          className: "tb-breadcrumbs__current",
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      ),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
+    ] }, i);
+  }) }) });
+}
+
+// src/components/Toolbar.tsx
+var import_react13 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function ToolbarSelect({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  dropDown = false,
+  minWidth,
+  className
+}) {
+  const [internalValue, setInternalValue] = (0, import_react13.useState)(defaultValue ?? options[0]?.value ?? "");
+  const [open, setOpen] = (0, import_react13.useState)(false);
+  const ref = (0, import_react13.useRef)(null);
+  const value = controlledValue ?? internalValue;
+  const activeOption = options.find((o) => o.value === value);
+  (0, import_react13.useEffect)(() => {
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, []);
+  function select(opt) {
+    if (controlledValue === void 0) setInternalValue(opt.value);
+    onChange?.(opt.value);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn("tb-toolbar__select", open && "tb-toolbar__select--open", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "tb-toolbar__trigger",
+            style: minWidth ? { minWidth } : void 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(!open);
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: activeOption?.label ?? "" }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "tb-toolbar__chevron" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          "div",
+          {
+            className: cn("tb-toolbar__option", opt.value === value && "tb-toolbar__option--active"),
+            style: { fontFamily: opt.value },
+            onClick: () => select(opt),
+            children: [
+              opt.label,
+              opt.meta && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "tb-toolbar__option-meta", children: opt.meta })
+            ]
+          },
+          opt.value
+        )) })
+      ]
+    }
+  );
+}
+function ToolbarLabel({ children, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("tb-toolbar__label", className), ...props, children });
+}
+function ToolbarDivider({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("tb-toolbar__divider", className), ...props });
+}
+function ToolbarRoot({ position, fixed = false, children, className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "tb-toolbar",
+        fixed && "tb-toolbar--fixed",
+        position && `tb-toolbar--${position}`,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var Toolbar = Object.assign(ToolbarRoot, {
+  Label: ToolbarLabel,
+  Select: ToolbarSelect,
+  Divider: ToolbarDivider
+});
+
+// src/components/Sidenav/Sidenav.tsx
+var import_react14 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var SidenavContext = (0, import_react14.createContext)({
+  iconPosition: "left",
+  borderSide: "left"
+});
+function SidenavRoot({
+  iconPosition = "left",
+  borderSide = "left",
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "nav",
+    {
+      ref,
+      className: cn(
+        "tb-sidenav",
+        iconPosition === "right" && "tb-sidenav--icon-right",
+        borderSide === "right" && "tb-sidenav--border-right",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function Item({
+  as,
+  active = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const Component = as || "a";
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    Component,
+    {
+      ref,
+      className: cn(
+        "tb-sidenav__item",
+        active && "tb-sidenav__item--active",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Icon({ className, ref, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "span",
+    {
+      ref,
+      className: cn("tb-sidenav__icon", className),
+      ...props
+    }
+  );
+}
+function Group({
+  label,
+  icon,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = (0, import_react14.useState)(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  function toggle() {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "div",
+    {
+      ref,
+      className: cn(
+        "tb-sidenav__group",
+        isOpen && "tb-sidenav__group--open",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "tb-sidenav__group-trigger",
+            onClick: toggle,
+            "aria-expanded": isOpen,
+            children: [
+              icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-sidenav__icon", children: icon }),
+              label,
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "tb-sidenav__group-content", children })
+      ]
+    }
+  );
+}
+var Sidenav = Object.assign(SidenavRoot, {
+  Item,
+  Icon,
+  Group
+});
+
+// src/components/CodeBlock.tsx
+var import_react15 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function CodeBlock({ children, copyText, className, ref, ...props }) {
+  const [copied, setCopied] = (0, import_react15.useState)(false);
+  const contentRef = (0, import_react15.useRef)(null);
+  async function handleCopy() {
+    const text = copyText ?? contentRef.current?.textContent ?? "";
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: cn("tb-code-block", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ref: contentRef, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "button",
+      {
+        type: "button",
+        className: cn("tb-code-block__copy", copied && "tb-code-block__copy--copied"),
+        onClick: handleCopy,
+        "aria-label": copied ? "Copied" : "Copy to clipboard",
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
+      }
+    )
+  ] });
+}
+
+// src/components/ThemeProvider.tsx
+var import_react16 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react16.createContext)(null);
+function useTheme() {
+  const ctx = (0, import_react16.useContext)(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within <ThemeProvider>");
+  return ctx;
+}
+function ThemeProvider({
+  theme: controlledTheme,
+  contrast: controlledContrast,
+  defaultTheme = "dark",
+  defaultContrast = "enhanced",
+  onThemeChange,
+  onContrastChange,
+  children
+}) {
+  const isThemeControlled = controlledTheme !== void 0;
+  const isContrastControlled = controlledContrast !== void 0;
+  const [internalTheme, setInternalTheme] = (0, import_react16.useState)(defaultTheme);
+  const [internalContrast, setInternalContrast] = (0, import_react16.useState)(defaultContrast);
+  const theme = isThemeControlled ? controlledTheme : internalTheme;
+  const contrast = isContrastControlled ? controlledContrast : internalContrast;
+  const setTheme = (0, import_react16.useCallback)(
+    (next) => {
+      if (!isThemeControlled) setInternalTheme(next);
+      onThemeChange?.(next);
+    },
+    [isThemeControlled, onThemeChange]
+  );
+  const setContrast = (0, import_react16.useCallback)(
+    (next) => {
+      if (!isContrastControlled) setInternalContrast(next);
+      onContrastChange?.(next);
+    },
+    [isContrastControlled, onContrastChange]
+  );
+  const toggleTheme = (0, import_react16.useCallback)(
+    () => setTheme(theme === "dark" ? "light" : "dark"),
+    [theme, setTheme]
+  );
+  (0, import_react16.useEffect)(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", theme);
+    if (contrast === "high") {
+      root.setAttribute("data-contrast", "high");
+    } else {
+      root.removeAttribute("data-contrast");
+    }
+  }, [theme, contrast]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
+}
+
+// src/hooks/useDisclosure.ts
+var import_react17 = require("react");
+function useDisclosure(options = {}) {
+  const { defaultOpen = false, onOpen: onOpenCallback, onClose: onCloseCallback } = options;
+  const [isOpen, setIsOpen] = (0, import_react17.useState)(defaultOpen);
+  const onOpen = (0, import_react17.useCallback)(() => {
+    setIsOpen(true);
+    onOpenCallback?.();
+  }, [onOpenCallback]);
+  const onClose = (0, import_react17.useCallback)(() => {
+    setIsOpen(false);
+    onCloseCallback?.();
+  }, [onCloseCallback]);
+  const onToggle = (0, import_react17.useCallback)(() => {
+    if (isOpen) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  }, [isOpen, onOpen, onClose]);
+  return { isOpen, onOpen, onClose, onToggle };
+}
+
+// src/hooks/useFocusTrap.ts
+var import_react18 = require("react");
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "textarea:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(ref, active) {
+  const previouslyFocusedRef = (0, import_react18.useRef)(null);
+  (0, import_react18.useEffect)(() => {
+    if (!active || !ref.current) return;
+    previouslyFocusedRef.current = document.activeElement;
+    const container = ref.current;
+    const focusableElements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    }
+    function handleKeyDown(e) {
+      if (e.key !== "Tab") return;
+      const focusable = container.querySelectorAll(FOCUSABLE_SELECTOR);
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === "function") {
+        previouslyFocusedRef.current.focus();
+      }
+    };
+  }, [active, ref]);
+}
+
+// src/hooks/useKeyboardNav.ts
+var import_react19 = require("react");
+function useKeyboardNav(items, options = {}) {
+  const { orientation = "vertical", loop = true, onSelect } = options;
+  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
+  const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  const onKeyDown = (0, import_react19.useCallback)(
+    (e) => {
+      const list = items.current;
+      if (!list || list.length === 0) return;
+      const count = list.length;
+      if (e.key === nextKey) {
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          const next = prev + 1;
+          if (next >= count) {
+            const wrapped = loop ? 0 : prev;
+            list[wrapped]?.focus();
+            return wrapped;
+          }
+          list[next]?.focus();
+          return next;
+        });
+      } else if (e.key === prevKey) {
+        e.preventDefault();
+        setActiveIndex((prev) => {
+          const next = prev - 1;
+          if (next < 0) {
+            const wrapped = loop ? count - 1 : prev;
+            list[wrapped]?.focus();
+            return wrapped;
+          }
+          list[next]?.focus();
+          return next;
+        });
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onSelect?.(activeIndex);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setActiveIndex(0);
+        list[0]?.focus();
+      } else if (e.key === "End") {
+        e.preventDefault();
+        const last = count - 1;
+        setActiveIndex(last);
+        list[last]?.focus();
+      }
+    },
+    [items, activeIndex, prevKey, nextKey, loop, onSelect]
+  );
+  return { activeIndex, setActiveIndex, onKeyDown };
+}
+
+// src/hooks/useReducedMotion.ts
+var import_react20 = require("react");
+function useReducedMotion() {
+  const [reduced, setReduced] = (0, import_react20.useState)(false);
+  (0, import_react20.useEffect)(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const handler = (e) => setReduced(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
+
+// src/hooks/useMergedRef.ts
+var import_react21 = require("react");
+function useMergedRef(...refs) {
+  return (0, import_react21.useCallback)((node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    });
+  }, refs);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Battery,
+  BatteryInline,
+  Breadcrumbs,
+  Button,
+  Card,
+  Checkbox,
+  CodeBlock,
+  CornerBrackets,
+  Input,
+  Modal,
+  NavDropdown,
+  Pagination,
+  Progress,
+  RadioGroup,
+  RadioItem,
+  SafePortal,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  Sidenav,
+  Skeleton,
+  Spinner,
+  Table,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Tag,
+  Textarea,
+  ThemeProvider,
+  TitleLine,
+  Toaster,
+  Toggle,
+  Toolbar,
+  Tooltip,
+  cn,
+  toast,
+  useDisclosure,
+  useFocusTrap,
+  useKeyboardNav,
+  useMergedRef,
+  useReducedMotion,
+  useTheme
+});
+//# sourceMappingURL=index.cjs.map