@terminal-blueprint/react 0.1.0

package/dist/index.js

@@ -0,0 +1,2141 @@
+// src/index.ts
+import "@terminal-blueprint/core/css";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+function cn(...inputs) {
+  return clsx(inputs);
+}
+
+// src/components/Button.tsx
+import { jsx, jsxs } from "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__ */ 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__ */ jsxs("span", { className: "tb-btn__spinner", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { className: "tb-btn__spinner-square" }),
+          /* @__PURE__ */ jsx("span", { className: "tb-btn__spinner-square" }),
+          /* @__PURE__ */ jsx("span", { className: "tb-btn__spinner-square" })
+        ] }),
+        icon && iconPosition === "left" && !isLoading && /* @__PURE__ */ jsx("span", { className: "tb-btn__icon", children: icon }),
+        /* @__PURE__ */ jsx("span", { style: isLoading && !loadingText ? { visibility: "hidden" } : void 0, children: isLoading && loadingText ? loadingText : children }),
+        icon && iconPosition === "right" && !isLoading && /* @__PURE__ */ jsx("span", { className: "tb-btn__icon", children: icon })
+      ]
+    }
+  );
+}
+
+// src/components/Input.tsx
+import {
+  useId
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Input({
+  label,
+  error,
+  hint,
+  size = "md",
+  icon,
+  iconPosition = "left",
+  className,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const errorId = error ? `${id}-error` : void 0;
+  const hintId = hint && !error ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ jsxs2("div", { className: "tb-form-group", children: [
+    label && /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "tb-label", children: label }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "tb-input-wrapper",
+          icon && `tb-input-wrapper--icon-${iconPosition}`
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx2("span", { className: "tb-input__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2("span", { id: errorId, className: "tb-input__error", role: "alert", children: error }),
+    hint && !error && /* @__PURE__ */ jsx2("span", { id: hintId, className: "tb-input__hint", children: hint })
+  ] });
+}
+
+// src/components/Textarea.tsx
+import { useId as useId2 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Textarea({
+  label,
+  error,
+  hint,
+  className,
+  id: idProp,
+  ref,
+  ...props
+}) {
+  const autoId = useId2();
+  const id = idProp ?? autoId;
+  const errorId = error ? `${id}-error` : void 0;
+  const hintId = hint && !error ? `${id}-hint` : void 0;
+  return /* @__PURE__ */ jsxs3("div", { className: "tb-form-group", children: [
+    label && /* @__PURE__ */ jsx3("label", { htmlFor: id, className: "tb-label", children: label }),
+    /* @__PURE__ */ jsx3(
+      "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__ */ jsx3("span", { id: errorId, className: "tb-textarea__error", role: "alert", children: error }),
+    hint && !error && /* @__PURE__ */ jsx3("span", { id: hintId, className: "tb-textarea__hint", children: hint })
+  ] });
+}
+
+// src/components/Card/Card.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function CardRoot({
+  as,
+  brackets = false,
+  pulse = false,
+  hoverable = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const Component = as || "div";
+  return /* @__PURE__ */ jsxs4(
+    Component,
+    {
+      ref,
+      className: cn(
+        "tb-card",
+        brackets && "tb-card--bracketed",
+        pulse && "tb-card--pulse",
+        hoverable && "tb-card--hoverable",
+        className
+      ),
+      ...props,
+      children: [
+        brackets && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--tl" }),
+          /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--tr" }),
+          /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--bl" }),
+          /* @__PURE__ */ jsx4("span", { className: "tb-card__bracket tb-card__bracket--br" })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function Header({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__header", className),
+      ...props
+    }
+  );
+}
+function Title({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__title", className),
+      ...props
+    }
+  );
+}
+function Body({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__body", className),
+      ...props
+    }
+  );
+}
+function Tags({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__tags", className),
+      ...props
+    }
+  );
+}
+function Footer({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ref,
+      className: cn("tb-card__footer", className),
+      ...props
+    }
+  );
+}
+var Card = Object.assign(CardRoot, {
+  Header,
+  Title,
+  Body,
+  Tags,
+  Footer
+});
+
+// src/components/Badge.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function Badge({
+  variant = "default",
+  dot = false,
+  pulse = false,
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      ref,
+      className: cn(
+        "tb-badge",
+        variant !== "default" && `tb-badge--${variant}`,
+        pulse && "tb-badge--pulse",
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx5(
+          "span",
+          {
+            className: cn(
+              "tb-badge__dot"
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Tag.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Tag({ className, children, ref, ...props }) {
+  return /* @__PURE__ */ jsx6("span", { ref, className: cn("tb-tag", className), ...props, children });
+}
+
+// src/components/TitleLine.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function TitleLine({ label, className }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("tb-title-line", className), children: /* @__PURE__ */ jsx7("span", { className: "tb-title-line__label", children: label }) });
+}
+
+// src/components/CornerBrackets.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function CornerBrackets({ pulse, children, className, ref, ...props }) {
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      ref,
+      className: cn("tb-brackets", pulse && "tb-brackets--pulse", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "tb-brackets__corner tb-brackets__corner--tl" }),
+        /* @__PURE__ */ jsx8("span", { className: "tb-brackets__corner tb-brackets__corner--tr" }),
+        /* @__PURE__ */ jsx8("span", { className: "tb-brackets__corner tb-brackets__corner--bl" }),
+        /* @__PURE__ */ jsx8("span", { className: "tb-brackets__corner tb-brackets__corner--br" }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/Select/Select.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectContext = createContext(null);
+function useSelectContext() {
+  const ctx = 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] = useState(defaultValue);
+  const [open, setOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [itemValues, setItemValues] = useState([]);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const triggerRef = useRef(null);
+  const listRef = useRef(null);
+  const rootRef = useRef(null);
+  const onSelect = useCallback(
+    (val) => {
+      if (!isControlled) setInternalValue(val);
+      onValueChange?.(val);
+      setOpen(false);
+      triggerRef.current?.focus();
+    },
+    [isControlled, onValueChange]
+  );
+  const registerItem = useCallback((val) => {
+    setItemValues((prev) => prev.includes(val) ? prev : [...prev, val]);
+  }, []);
+  const unregisterItem = useCallback((val) => {
+    setItemValues((prev) => prev.filter((v) => v !== val));
+  }, []);
+  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]);
+  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]);
+  useEffect(() => {
+    if (open) {
+      const idx = itemValues.indexOf(value);
+      setFocusedIndex(idx >= 0 ? idx : 0);
+    }
+  }, [open, itemValues, value]);
+  return /* @__PURE__ */ jsx9(
+    SelectContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        value,
+        onSelect,
+        placeholder,
+        disabled,
+        focusedIndex,
+        setFocusedIndex,
+        itemValues,
+        registerItem,
+        unregisterItem,
+        triggerRef,
+        listRef
+      },
+      children: /* @__PURE__ */ jsxs7(
+        "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__ */ jsx9("label", { className: "tb-select__label", children: label }),
+            children,
+            error && /* @__PURE__ */ jsx9("span", { className: "tb-select__error", children: error })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/Select/SelectTrigger.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "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__ */ jsxs8(
+    "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__ */ jsx10("span", { className: cn("tb-select__value", !value && "tb-select__placeholder"), children: value || placeholder }),
+        /* @__PURE__ */ jsx10("span", { className: "tb-select__chevron", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+
+// src/components/Select/SelectContent.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function SelectContent({ children, className, ref }) {
+  const { open, listRef } = useSelectContext();
+  return /* @__PURE__ */ jsx11(
+    "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
+import { useEffect as useEffect2 } from "react";
+import { jsx as jsx12 } from "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;
+  useEffect2(() => {
+    registerItem(itemValue);
+    return () => unregisterItem(itemValue);
+  }, [itemValue, registerItem, unregisterItem]);
+  return /* @__PURE__ */ jsx12(
+    "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
+import {
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect as useEffect4,
+  useRef as useRef2,
+  useCallback as useCallback2,
+  useId as useId3
+} from "react";
+
+// src/utils/SafePortal.tsx
+import { useState as useState2, useEffect as useEffect3 } from "react";
+import { createPortal } from "react-dom";
+function SafePortal({ children, target }) {
+  const [mounted, setMounted] = useState2(false);
+  useEffect3(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return createPortal(children, target ?? document.body);
+}
+
+// src/components/Modal/Modal.tsx
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+var ModalContext = createContext2(null);
+function useModalContext() {
+  const ctx = useContext2(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 = useRef2(null);
+  const previousFocusRef = useRef2(null);
+  const uid = useId3();
+  const titleId = `tb-modal-title-${uid}`;
+  const descId = `tb-modal-desc-${uid}`;
+  const onClose = useCallback2(() => onOpenChange(false), [onOpenChange]);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    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]);
+  useEffect4(() => {
+    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 = useCallback2(
+    (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__ */ jsx13(SafePortal, { target: portalTarget, children: /* @__PURE__ */ jsx13(
+    "div",
+    {
+      className: cn("tb-modal-overlay", open && "tb-modal-overlay--open"),
+      onClick: (e) => {
+        if (closeOnBackdrop && e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs9(
+        "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__ */ jsx13(
+              "button",
+              {
+                type: "button",
+                className: "tb-modal__close",
+                "aria-label": "Close",
+                onClick: onClose,
+                children: "\xD7"
+              }
+            ),
+            /* @__PURE__ */ jsx13(ModalContext.Provider, { value: { onClose, titleId, descId }, children })
+          ]
+        }
+      )
+    }
+  ) });
+}
+function Title2({ className, ref, ...props }) {
+  const { titleId } = useModalContext();
+  return /* @__PURE__ */ jsx13(
+    "h2",
+    {
+      ref,
+      id: titleId,
+      className: cn("tb-modal__title", className),
+      ...props
+    }
+  );
+}
+function Body2({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref,
+      className: cn("tb-modal__body", className),
+      ...props
+    }
+  );
+}
+function Footer2({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref,
+      className: cn("tb-modal__footer", className),
+      ...props
+    }
+  );
+}
+function Close({
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  const { onClose } = useModalContext();
+  return /* @__PURE__ */ jsx13(
+    "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
+import {
+  createContext as createContext3,
+  useCallback as useCallback3,
+  useContext as useContext3,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+var TabsContext = createContext3(null);
+function useTabsContext() {
+  const ctx = useContext3(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] = useState3(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : internalValue;
+  const onValueChange = useCallback3(
+    (val) => {
+      if (!isControlled) setInternalValue(val);
+      onValueChangeProp?.(val);
+    },
+    [isControlled, onValueChangeProp]
+  );
+  return /* @__PURE__ */ jsx14(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx14("div", { ref, className: cn("tb-tabs", className), children }) });
+}
+function TabsList({ children, className, ref }) {
+  const listRef = useRef3(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__ */ jsx14(
+    "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__ */ jsxs10(
+    "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__ */ jsx14("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__ */ jsx14(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      className: cn("tb-tabs__content", isActive && "tb-tabs__content--active", className),
+      children
+    }
+  );
+}
+
+// src/components/Toast/ToastProvider.tsx
+import { useSyncExternalStore } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "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 = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  if (currentToasts.length === 0) return null;
+  return /* @__PURE__ */ jsx15(SafePortal, { children: /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn("tb-toast-container", `tb-toast-container--${position}`),
+      "aria-live": "polite",
+      children: currentToasts.map((t) => /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          className: cn("tb-toast", `tb-toast--${t.type}`, "tb-toast--show"),
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx15("span", { className: "tb-toast__icon", "aria-hidden": "true", children: ICONS[t.type] }),
+            /* @__PURE__ */ jsxs11("div", { className: "tb-toast__content", children: [
+              /* @__PURE__ */ jsx15("span", { className: "tb-toast__title", children: t.title }),
+              t.description && /* @__PURE__ */ jsx15("span", { className: "tb-toast__description", children: t.description })
+            ] }),
+            t.action && /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                className: "tb-toast__action",
+                onClick: () => {
+                  t.action.onClick();
+                  dismissToast(t.id);
+                },
+                children: t.action.label
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                type: "button",
+                className: "tb-toast__dismiss",
+                "aria-label": "Dismiss",
+                onClick: () => dismissToast(t.id),
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        t.id
+      ))
+    }
+  ) });
+}
+
+// src/components/Tooltip.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  side = "top",
+  align = "center",
+  children,
+  className,
+  ref
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      ref,
+      className: cn("tb-tooltip-wrap", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx16(
+          "span",
+          {
+            role: "tooltip",
+            className: cn(
+              "tb-tooltip",
+              `tb-tooltip--${side}`,
+              align !== "center" && `tb-tooltip--align-${align}`
+            ),
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/NavDropdown.tsx
+import { useState as useState4, useEffect as useEffect5, useRef as useRef4 } from "react";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function NavDropdown({ trigger, items, align = "left", className, ref }) {
+  const [open, setOpen] = useState4(false);
+  const rootRef = useRef4(null);
+  useEffect5(() => {
+    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__ */ jsxs13(
+    "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__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            className: "tb-nav-item__trigger",
+            onClick: () => setOpen(!open),
+            children: [
+              typeof trigger === "string" ? /* @__PURE__ */ jsx17("span", { children: trigger }) : trigger,
+              /* @__PURE__ */ jsx17("span", { className: "tb-nav-item__chevron", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx17("div", { className: cn("tb-nav-dropdown", open && "tb-nav-dropdown--open"), children: items.map((item, i) => {
+          const content = /* @__PURE__ */ jsxs13(Fragment2, { children: [
+            item.icon && /* @__PURE__ */ jsx17("span", { className: "tb-nav-dropdown__icon", children: item.icon }),
+            /* @__PURE__ */ jsx17("span", { children: item.label })
+          ] });
+          if (item.href) {
+            return /* @__PURE__ */ jsx17(
+              "a",
+              {
+                href: item.href,
+                className: "tb-nav-dropdown__item",
+                onClick: () => {
+                  setOpen(false);
+                  item.onClick?.();
+                },
+                children: content
+              },
+              i
+            );
+          }
+          return /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              className: "tb-nav-dropdown__item",
+              onClick: () => {
+                setOpen(false);
+                item.onClick?.();
+              },
+              children: content
+            },
+            i
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/components/Checkbox.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  error,
+  ref,
+  className
+}) {
+  const [internalChecked, setInternalChecked] = useState5(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__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsxs14(
+      "label",
+      {
+        className: cn(
+          "tb-checkbox",
+          error && "tb-checkbox--error",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx18(
+            "input",
+            {
+              ref,
+              type: "checkbox",
+              checked: isChecked,
+              disabled,
+              onChange: handleChange
+            }
+          ),
+          label && /* @__PURE__ */ jsx18("span", { children: label })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx18("span", { style: { color: "var(--tb-error)", fontSize: "0.5rem", letterSpacing: "0.2em", marginTop: 4, display: "block" }, children: error })
+  ] });
+}
+
+// src/components/Toggle.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+function Toggle({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  label,
+  ref,
+  className
+}) {
+  const [internalChecked, setInternalChecked] = useState6(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__ */ jsxs15(
+    "label",
+    {
+      className: cn(
+        "tb-toggle",
+        isChecked && "tb-toggle--checked",
+        disabled && "tb-toggle--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx19(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: "tb-toggle__input",
+            checked: isChecked,
+            disabled,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx19("span", { className: "tb-toggle__track", "aria-hidden": "true", children: /* @__PURE__ */ jsx19("span", { className: "tb-toggle__thumb" }) }),
+        label && /* @__PURE__ */ jsx19("span", { className: "tb-toggle__label", children: label })
+      ]
+    }
+  );
+}
+
+// src/components/Radio.tsx
+import { createContext as createContext4, useContext as useContext4, useState as useState7 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var RadioContext = createContext4(null);
+var radioGroupId = 0;
+function RadioGroup({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  disabled = false,
+  label,
+  orientation = "vertical",
+  children,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState7(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const [name] = useState7(() => `tb-radio-group-${++radioGroupId}`);
+  function handleChange(val) {
+    if (!isControlled) setInternalValue(val);
+    onValueChange?.(val);
+  }
+  return /* @__PURE__ */ jsx20(RadioContext.Provider, { value: { value: currentValue, onChange: handleChange, disabled, name }, children: /* @__PURE__ */ jsxs16(
+    "fieldset",
+    {
+      className: cn(
+        "tb-radio-group",
+        orientation === "horizontal" && "tb-radio-group--horizontal",
+        disabled && "tb-radio-group--disabled",
+        className
+      ),
+      disabled,
+      children: [
+        label && /* @__PURE__ */ jsx20("legend", { className: "tb-radio-group__label", children: label }),
+        children
+      ]
+    }
+  ) });
+}
+function RadioItem({
+  value,
+  label,
+  disabled: itemDisabled = false,
+  className
+}) {
+  const ctx = useContext4(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__ */ jsxs16(
+    "label",
+    {
+      className: cn(
+        "tb-radio",
+        isChecked && "tb-radio--checked",
+        isDisabled && "tb-radio--disabled",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx20(
+          "input",
+          {
+            type: "radio",
+            name: ctx.name,
+            value,
+            checked: isChecked,
+            disabled: isDisabled,
+            onChange: () => ctx.onChange(value)
+          }
+        ),
+        label
+      ]
+    }
+  );
+}
+
+// src/components/Progress.tsx
+import { jsx as jsx21, jsxs as jsxs17 } from "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__ */ jsxs17(
+    "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__ */ jsx21("span", { className: "tb-progress__label", children: label }),
+        /* @__PURE__ */ jsx21("div", { className: "tb-progress__track", children: /* @__PURE__ */ jsx21(
+          "div",
+          {
+            className: "tb-progress__fill",
+            style: indeterminate ? void 0 : { width: `${clampedValue}%` }
+          }
+        ) }),
+        showValue && !indeterminate && /* @__PURE__ */ jsxs17("span", { className: "tb-progress__value", children: [
+          clampedValue,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Battery.tsx
+import { jsx as jsx22, jsxs as jsxs18 } from "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__ */ jsxs18(
+    "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__ */ jsx22("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ jsxs18("div", { className: "tb-battery__body", children: [
+          /* @__PURE__ */ jsx22("div", { className: "tb-battery__cap" }),
+          /* @__PURE__ */ jsx22("div", { className: "tb-battery__segments", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx22(
+            "div",
+            {
+              className: cn(
+                "tb-battery__segment",
+                i < clampedValue && "tb-battery__segment--filled"
+              )
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/BatteryInline.tsx
+import { jsx as jsx23, jsxs as jsxs19 } from "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__ */ jsxs19(
+    "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__ */ jsx23("span", { className: "tb-battery__label", children: label }),
+        /* @__PURE__ */ jsx23("div", { className: "tb-battery__track", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx23(
+          "div",
+          {
+            className: cn(
+              "tb-battery__segment",
+              i < clampedValue && "tb-battery__segment--filled",
+              i < clampedValue && variant !== "default" && `tb-battery__segment--${variant}`
+            )
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx23("div", { className: "tb-battery__cap" }),
+        showValue && /* @__PURE__ */ jsxs19("span", { className: "tb-battery__value", children: [
+          percent,
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/Table.tsx
+import { jsx as jsx24, jsxs as jsxs20 } from "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__ */ jsx24("div", { className: cn("tb-table__wrapper", className), children: /* @__PURE__ */ jsxs20("table", { className: "tb-table", children: [
+    /* @__PURE__ */ jsx24("thead", { className: "tb-table__head", children: /* @__PURE__ */ jsx24("tr", { className: "tb-table__row", children: columns.map((col) => /* @__PURE__ */ jsx24("th", { className: "tb-table__th", children: col.header }, col.id)) }) }),
+    /* @__PURE__ */ jsx24("tbody", { className: "tb-table__body", children: data.map((row, rowIndex) => /* @__PURE__ */ jsx24(
+      "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__ */ jsx24("td", { className: "tb-table__td", children: col.cell ? col.cell(value, row) : value }, col.id);
+        })
+      },
+      rowIndex
+    )) })
+  ] }) });
+}
+
+// src/components/Skeleton.tsx
+import { jsx as jsx25 } from "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__ */ jsx25("div", { className: cn("tb-skeleton__group", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx25(
+      "div",
+      {
+        className: cn(
+          "tb-skeleton",
+          "tb-skeleton--text"
+        ),
+        style: i === lines - 1 ? { ...style, width: style.width ?? "75%" } : style
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      className: cn(
+        "tb-skeleton",
+        `tb-skeleton--${variant}`,
+        className
+      ),
+      style
+    }
+  );
+}
+
+// src/components/Spinner.tsx
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+function Spinner({
+  variant = "multi-square",
+  size = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsx26(
+    "span",
+    {
+      className: cn(
+        "tb-spinner",
+        `tb-spinner--${variant}`,
+        size !== "md" && `tb-spinner--${size}`,
+        className
+      ),
+      role: "status",
+      "aria-label": "Loading",
+      children: variant === "multi-square" && /* @__PURE__ */ jsxs21(Fragment3, { children: [
+        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" }),
+        /* @__PURE__ */ jsx26("span", { className: "tb-spinner__square" })
+      ] })
+    }
+  );
+}
+
+// src/components/Pagination.tsx
+import { jsx as jsx27, jsxs as jsxs22 } from "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__ */ jsxs22("nav", { className: cn("tb-pagination", className), "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx27(
+      "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__ */ jsx27("span", { className: "tb-pagination__ellipsis", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsx27(
+        "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__ */ jsx27(
+      "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
+import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+function Breadcrumbs({
+  items,
+  separator = "/",
+  linkComponent,
+  className
+}) {
+  const LinkComponent = linkComponent || "a";
+  return /* @__PURE__ */ jsx28("nav", { className: cn("tb-breadcrumbs", className), "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx28("ol", { className: "tb-breadcrumbs__list", children: items.map((item, i) => {
+    const isLast = i === items.length - 1;
+    return /* @__PURE__ */ jsxs23("li", { className: "tb-breadcrumbs__item", children: [
+      item.href && !isLast ? /* @__PURE__ */ jsx28(LinkComponent, { href: item.href, className: "tb-breadcrumbs__link", children: item.label }) : /* @__PURE__ */ jsx28(
+        "span",
+        {
+          className: "tb-breadcrumbs__current",
+          "aria-current": isLast ? "page" : void 0,
+          children: item.label
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx28("span", { className: "tb-breadcrumbs__separator", "aria-hidden": "true", children: separator })
+    ] }, i);
+  }) }) });
+}
+
+// src/components/Toolbar.tsx
+import { useState as useState8, useRef as useRef5, useEffect as useEffect6 } from "react";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
+function ToolbarSelect({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  dropDown = false,
+  minWidth,
+  className
+}) {
+  const [internalValue, setInternalValue] = useState8(defaultValue ?? options[0]?.value ?? "");
+  const [open, setOpen] = useState8(false);
+  const ref = useRef5(null);
+  const value = controlledValue ?? internalValue;
+  const activeOption = options.find((o) => o.value === value);
+  useEffect6(() => {
+    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__ */ jsxs24(
+    "div",
+    {
+      ref,
+      className: cn("tb-toolbar__select", open && "tb-toolbar__select--open", className),
+      children: [
+        /* @__PURE__ */ jsxs24(
+          "button",
+          {
+            type: "button",
+            className: "tb-toolbar__trigger",
+            style: minWidth ? { minWidth } : void 0,
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(!open);
+            },
+            children: [
+              /* @__PURE__ */ jsx29("span", { children: activeOption?.label ?? "" }),
+              /* @__PURE__ */ jsx29("span", { className: "tb-toolbar__chevron" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx29("div", { className: cn("tb-toolbar__dropdown", dropDown && "tb-toolbar__dropdown--down"), children: options.map((opt) => /* @__PURE__ */ jsxs24(
+          "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__ */ jsx29("span", { className: "tb-toolbar__option-meta", children: opt.meta })
+            ]
+          },
+          opt.value
+        )) })
+      ]
+    }
+  );
+}
+function ToolbarLabel({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx29("span", { className: cn("tb-toolbar__label", className), ...props, children });
+}
+function ToolbarDivider({ className, ...props }) {
+  return /* @__PURE__ */ jsx29("div", { className: cn("tb-toolbar__divider", className), ...props });
+}
+function ToolbarRoot({ position, fixed = false, children, className, ref, ...props }) {
+  return /* @__PURE__ */ jsx29(
+    "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
+import {
+  createContext as createContext5,
+  useContext as useContext5,
+  useState as useState9
+} from "react";
+import { jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
+var SidenavContext = createContext5({
+  iconPosition: "left",
+  borderSide: "left"
+});
+function SidenavRoot({
+  iconPosition = "left",
+  borderSide = "left",
+  className,
+  children,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx30(SidenavContext.Provider, { value: { iconPosition, borderSide }, children: /* @__PURE__ */ jsx30(
+    "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__ */ jsx30(
+    Component,
+    {
+      ref,
+      className: cn(
+        "tb-sidenav__item",
+        active && "tb-sidenav__item--active",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Icon({ className, ref, ...props }) {
+  return /* @__PURE__ */ jsx30(
+    "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] = useState9(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  function toggle() {
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      ref,
+      className: cn(
+        "tb-sidenav__group",
+        isOpen && "tb-sidenav__group--open",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs25(
+          "button",
+          {
+            type: "button",
+            className: "tb-sidenav__group-trigger",
+            onClick: toggle,
+            "aria-expanded": isOpen,
+            children: [
+              icon && /* @__PURE__ */ jsx30("span", { className: "tb-sidenav__icon", children: icon }),
+              label,
+              /* @__PURE__ */ jsx30("span", { className: "tb-sidenav__group-chevron material-symbols-outlined", "aria-hidden": "true", children: "expand_more" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx30("div", { className: "tb-sidenav__group-content", children })
+      ]
+    }
+  );
+}
+var Sidenav = Object.assign(SidenavRoot, {
+  Item,
+  Icon,
+  Group
+});
+
+// src/components/CodeBlock.tsx
+import { useState as useState10, useRef as useRef6 } from "react";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
+function CodeBlock({ children, copyText, className, ref, ...props }) {
+  const [copied, setCopied] = useState10(false);
+  const contentRef = useRef6(null);
+  async function handleCopy() {
+    const text = copyText ?? contentRef.current?.textContent ?? "";
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }
+  return /* @__PURE__ */ jsxs26("div", { ref, className: cn("tb-code-block", className), ...props, children: [
+    /* @__PURE__ */ jsx31("div", { ref: contentRef, children }),
+    /* @__PURE__ */ jsx31(
+      "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__ */ jsx31("span", { className: "material-symbols-outlined", style: { fontSize: 14 }, children: copied ? "check" : "content_copy" })
+      }
+    )
+  ] });
+}
+
+// src/components/ThemeProvider.tsx
+import {
+  createContext as createContext6,
+  useContext as useContext6,
+  useState as useState11,
+  useEffect as useEffect7,
+  useCallback as useCallback4
+} from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var ThemeContext = createContext6(null);
+function useTheme() {
+  const ctx = useContext6(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] = useState11(defaultTheme);
+  const [internalContrast, setInternalContrast] = useState11(defaultContrast);
+  const theme = isThemeControlled ? controlledTheme : internalTheme;
+  const contrast = isContrastControlled ? controlledContrast : internalContrast;
+  const setTheme = useCallback4(
+    (next) => {
+      if (!isThemeControlled) setInternalTheme(next);
+      onThemeChange?.(next);
+    },
+    [isThemeControlled, onThemeChange]
+  );
+  const setContrast = useCallback4(
+    (next) => {
+      if (!isContrastControlled) setInternalContrast(next);
+      onContrastChange?.(next);
+    },
+    [isContrastControlled, onContrastChange]
+  );
+  const toggleTheme = useCallback4(
+    () => setTheme(theme === "dark" ? "light" : "dark"),
+    [theme, setTheme]
+  );
+  useEffect7(() => {
+    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__ */ jsx32(ThemeContext.Provider, { value: { theme, setTheme, contrast, setContrast, toggleTheme }, children });
+}
+
+// src/hooks/useDisclosure.ts
+import { useState as useState12, useCallback as useCallback5 } from "react";
+function useDisclosure(options = {}) {
+  const { defaultOpen = false, onOpen: onOpenCallback, onClose: onCloseCallback } = options;
+  const [isOpen, setIsOpen] = useState12(defaultOpen);
+  const onOpen = useCallback5(() => {
+    setIsOpen(true);
+    onOpenCallback?.();
+  }, [onOpenCallback]);
+  const onClose = useCallback5(() => {
+    setIsOpen(false);
+    onCloseCallback?.();
+  }, [onCloseCallback]);
+  const onToggle = useCallback5(() => {
+    if (isOpen) {
+      onClose();
+    } else {
+      onOpen();
+    }
+  }, [isOpen, onOpen, onClose]);
+  return { isOpen, onOpen, onClose, onToggle };
+}
+
+// src/hooks/useFocusTrap.ts
+import { useEffect as useEffect8, useRef as useRef7 } from "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 = useRef7(null);
+  useEffect8(() => {
+    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
+import { useState as useState13, useCallback as useCallback6 } from "react";
+function useKeyboardNav(items, options = {}) {
+  const { orientation = "vertical", loop = true, onSelect } = options;
+  const [activeIndex, setActiveIndex] = useState13(0);
+  const prevKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  const onKeyDown = useCallback6(
+    (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
+import { useState as useState14, useEffect as useEffect9 } from "react";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState14(false);
+  useEffect9(() => {
+    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
+import { useCallback as useCallback7 } from "react";
+function useMergedRef(...refs) {
+  return useCallback7((node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    });
+  }, refs);
+}
+export {
+  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,
+  createToast as toast,
+  useDisclosure,
+  useFocusTrap,
+  useKeyboardNav,
+  useMergedRef,
+  useReducedMotion,
+  useTheme
+};
+//# sourceMappingURL=index.js.map