@hellboy/ds 0.1.2

package/dist/index.mjs

@@ -0,0 +1,3287 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/contexts/NavbarTooltipContext.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var NavbarTooltipContext = React.createContext(void 0);
+var NavbarTooltipProvider = ({ children }) => {
+  const [hasOpenPopover, setHasOpenPopover] = React.useState(false);
+  const [activePopoverId, setActivePopoverId] = React.useState(null);
+  const openPopover = React.useCallback((id) => {
+    setActivePopoverId(id);
+    setHasOpenPopover(true);
+  }, []);
+  const closePopover = React.useCallback((id) => {
+    if (activePopoverId === id) {
+      setActivePopoverId(null);
+      setHasOpenPopover(false);
+    }
+  }, [activePopoverId]);
+  return /* @__PURE__ */ jsx(NavbarTooltipContext.Provider, { value: {
+    hasOpenPopover,
+    setHasOpenPopover,
+    openPopover,
+    closePopover,
+    activePopoverId
+  }, children });
+};
+var useNavbarTooltip = () => {
+  const context = React.useContext(NavbarTooltipContext);
+  if (!context) {
+    throw new Error("useNavbarTooltip must be used within a NavbarTooltipProvider");
+  }
+  return context;
+};
+
+// src/components/button/button.tsx
+import React2 from "react";
+import { Button as AriakitButton } from "@ariakit/react";
+
+// src/components/icons/icons.tsx
+import { Icon as IconifyIcon } from "@iconify/react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Icon = ({ name, size = 24, className, loading = false, ...rest }) => {
+  const iconName = name.startsWith("famicons:") ? name : `famicons:${name}`;
+  const classes = ["icon", className].filter(Boolean).join(" ");
+  if (loading) {
+    const style = { width: size, height: size };
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        className: `${classes} icon--skeleton`,
+        style,
+        "aria-hidden": rest["aria-label"] ? "false" : "true",
+        ...rest["aria-label"] ? { "aria-label": rest["aria-label"] } : {}
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    IconifyIcon,
+    {
+      icon: iconName,
+      width: size,
+      height: size,
+      className: classes,
+      ...rest
+    }
+  );
+};
+
+// src/components/button/button.tsx
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Button = React2.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    children,
+    isLoading = false,
+    disabled = false,
+    fullWidth = false,
+    startIcon,
+    endIcon,
+    iconOnly = false,
+    href,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const buttonClasses = [
+      "btn",
+      `btn--${variant}`,
+      `btn--${size}`,
+      fullWidth && "btn--full-width",
+      iconOnly && "btn--icon-only",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "xs" ? 14 : size === "sm" ? 16 : size === "lg" ? 24 : 20;
+    const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+      isLoading && /* @__PURE__ */ jsx3("span", { className: "btn__spinner" }),
+      startIcon && (isLoading ? /* @__PURE__ */ jsx3("span", { className: "btn__icon-placeholder", style: { width: iconSize, height: iconSize } }) : /* @__PURE__ */ jsx3(Icon, { name: startIcon, size: iconSize, className: "btn__icon" })),
+      !iconOnly && children,
+      endIcon && /* @__PURE__ */ jsx3(Icon, { name: endIcon, size: iconSize, className: "btn__icon" })
+    ] });
+    const handleClick = (e) => {
+      if (href && !isLoading && !disabled) {
+        window.location.href = href;
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx3(
+      AriakitButton,
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: buttonClasses,
+        onClick: handleClick,
+        ...props,
+        children: buttonContent
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/badge/Badge.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Badge = ({
+  variant = "primary",
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["badge", `badge--${variant}`, `badge--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx4("span", { className: classes, ...props, children });
+};
+
+// src/components/checkbox/Checkbox.tsx
+import React3 from "react";
+import { Checkbox as AriakitCheckbox } from "@ariakit/react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Checkbox = React3.forwardRef(
+  ({
+    size = "md",
+    label,
+    error,
+    helperText,
+    indeterminate = false,
+    disabled = false,
+    className,
+    checked,
+    ...props
+  }, ref) => {
+    const checkboxClasses = [
+      "checkbox",
+      `checkbox--${size}`,
+      error && "checkbox--error",
+      disabled && "checkbox--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const iconSize = size === "sm" ? 14 : size === "lg" ? 20 : 16;
+    const isChecked = checked === true;
+    const isIndeterminate = indeterminate && !isChecked;
+    return /* @__PURE__ */ jsxs2("div", { className: checkboxClasses, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "checkbox__container", children: [
+        /* @__PURE__ */ jsx5(
+          AriakitCheckbox,
+          {
+            ref,
+            checked,
+            disabled,
+            className: "checkbox__input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "checkbox__box", children: [
+          isChecked && /* @__PURE__ */ jsx5(Icon, { name: "checkmark-sharp", size: iconSize, className: "checkbox__icon" }),
+          isIndeterminate && /* @__PURE__ */ jsx5(Icon, { name: "minus", size: iconSize, className: "checkbox__icon" })
+        ] }),
+        label && /* @__PURE__ */ jsx5("span", { className: "checkbox__label", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs2("div", { className: "checkbox__feedback", children: [
+        error && /* @__PURE__ */ jsx5("span", { className: "checkbox__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ jsx5("span", { className: "checkbox__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/switch/switch.tsx
+import React4 from "react";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var Switch = React4.forwardRef(
+  ({
+    size = "md",
+    label,
+    onIcon,
+    offIcon,
+    error,
+    helperText,
+    disabled = false,
+    className,
+    checked,
+    ...props
+  }, ref) => {
+    const switchClasses = [
+      "switch",
+      `switch--${size}`,
+      checked && "switch--checked",
+      disabled && "switch--disabled",
+      error && "switch--error",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs3("div", { className: "switch__wrapper", children: [
+      /* @__PURE__ */ jsxs3("label", { className: "switch__label", children: [
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "checkbox",
+            ref,
+            checked,
+            disabled,
+            className: "switch__input",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx6("span", { className: switchClasses, children: /* @__PURE__ */ jsx6("span", { className: "switch__track", children: /* @__PURE__ */ jsxs3("span", { className: "switch__thumb", children: [
+          onIcon && /* @__PURE__ */ jsx6(Icon, { name: onIcon, size: 16, className: "switch__icon switch__icon--on" }),
+          offIcon && /* @__PURE__ */ jsx6(Icon, { name: offIcon, size: 16, className: "switch__icon switch__icon--off" })
+        ] }) }) }),
+        label && /* @__PURE__ */ jsx6("span", { className: "switch__text", children: label })
+      ] }),
+      (error || helperText) && /* @__PURE__ */ jsxs3("div", { className: "switch__message", children: [
+        error && /* @__PURE__ */ jsx6("span", { className: "switch__error-text", children: error }),
+        helperText && !error && /* @__PURE__ */ jsx6("span", { className: "switch__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+
+// src/components/layout/Layout.tsx
+import * as React6 from "react";
+
+// src/components/drag-handle/DragHandle.tsx
+import React5, { useState as useState2, useRef, useCallback as useCallback2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var DragHandle = ({
+  onResize,
+  onResizeEnd,
+  orientation = "vertical",
+  className = ""
+}) => {
+  const [isDragging, setIsDragging] = useState2(false);
+  const dragHandleRef = useRef(null);
+  const startPosRef = useRef(0);
+  const handleMouseDown = useCallback2((e) => {
+    setIsDragging(true);
+    startPosRef.current = orientation === "vertical" ? e.clientX : e.clientY;
+    e.preventDefault();
+  }, [orientation]);
+  const handleMouseMove = useCallback2((e) => {
+    if (!isDragging) return;
+    const currentPos = orientation === "vertical" ? e.clientX : e.clientY;
+    const delta = currentPos - startPosRef.current;
+    onResize(delta);
+    startPosRef.current = currentPos;
+  }, [isDragging, onResize, orientation]);
+  const handleMouseUp = useCallback2(() => {
+    setIsDragging(false);
+    onResizeEnd?.();
+  }, [onResizeEnd]);
+  React5.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = orientation === "vertical" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp, orientation]);
+  const classes = [
+    "drag-handle",
+    `drag-handle--${orientation}`,
+    isDragging && "drag-handle--dragging",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: dragHandleRef,
+      className: classes,
+      onMouseDown: handleMouseDown,
+      children: /* @__PURE__ */ jsx7("div", { className: "drag-handle__indicator" })
+    }
+  );
+};
+
+// src/utils/user-preferences.ts
+var DEFAULT_CONFIG = {
+  backend: "localStorage",
+  prefix: "hellboy-ds",
+  dbName: "hellboy-ds-prefs",
+  storeName: "preferences"
+};
+var config = { ...DEFAULT_CONFIG };
+var configurePreferences = (userConfig) => {
+  config = { ...config, ...userConfig };
+};
+var getStorageKey = (key) => {
+  return `${config.prefix}:${key}`;
+};
+var isLocalStorageAvailable = () => {
+  try {
+    const test = "__storage_test__";
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch {
+    return false;
+  }
+};
+var IndexedDBStore = class {
+  constructor() {
+    __publicField(this, "db", null);
+  }
+  async init() {
+    if (typeof window === "undefined" || !window.indexedDB) {
+      throw new Error("IndexedDB not available");
+    }
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(config.dbName, 1);
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => {
+        this.db = request.result;
+        resolve();
+      };
+      request.onupgradeneeded = (event) => {
+        const db = event.target.result;
+        if (!db.objectStoreNames.contains(config.storeName)) {
+          db.createObjectStore(config.storeName, { keyPath: "key" });
+        }
+      };
+    });
+  }
+  async get(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readonly");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.get(key);
+      request.onsuccess = () => resolve(request.result?.value);
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async set(key, value) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.put({ key, value });
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async remove(key) {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.delete(key);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+  async clear() {
+    if (!this.db) await this.init();
+    return new Promise((resolve, reject) => {
+      const transaction = this.db.transaction([config.storeName], "readwrite");
+      const store = transaction.objectStore(config.storeName);
+      const request = store.clear();
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+};
+var indexedDBStore = new IndexedDBStore();
+var getPreference = (key, defaultValue) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const stored = localStorage.getItem(getStorageKey(key));
+      if (stored !== null) {
+        return JSON.parse(stored);
+      }
+    }
+    return defaultValue;
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var getPreferenceAsync = async (key, defaultValue) => {
+  try {
+    if (config.backend === "indexedDB") {
+      const value = await indexedDBStore.get(getStorageKey(key));
+      return value !== void 0 ? value : defaultValue;
+    }
+    return getPreference(key, defaultValue);
+  } catch (error) {
+    console.warn(`Failed to get preference "${key}":`, error);
+    return defaultValue;
+  }
+};
+var setPreference = (key, value) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.setItem(getStorageKey(key), JSON.stringify(value));
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+var setPreferenceAsync = async (key, value) => {
+  try {
+    if (config.backend === "indexedDB") {
+      await indexedDBStore.set(getStorageKey(key), value);
+    } else {
+      setPreference(key, value);
+    }
+  } catch (error) {
+    console.warn(`Failed to set preference "${key}":`, error);
+  }
+};
+var removePreference = (key) => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      localStorage.removeItem(getStorageKey(key));
+    }
+  } catch (error) {
+    console.warn(`Failed to remove preference "${key}":`, error);
+  }
+};
+var removePreferenceAsync = async (key) => {
+  try {
+    if (config.backend === "indexedDB") {
+      await indexedDBStore.remove(getStorageKey(key));
+    } else {
+      removePreference(key);
+    }
+  } catch (error) {
+    console.warn(`Failed to remove preference "${key}":`, error);
+  }
+};
+var clearPreferences = () => {
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const prefix = `${config.prefix}:`;
+      const keysToRemove = [];
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key?.startsWith(prefix)) {
+          keysToRemove.push(key);
+        }
+      }
+      keysToRemove.forEach((key) => localStorage.removeItem(key));
+    }
+  } catch (error) {
+    console.warn("Failed to clear preferences:", error);
+  }
+};
+var clearPreferencesAsync = async () => {
+  try {
+    if (config.backend === "indexedDB") {
+      await indexedDBStore.clear();
+    } else {
+      clearPreferences();
+    }
+  } catch (error) {
+    console.warn("Failed to clear preferences:", error);
+  }
+};
+var getAllPreferences = () => {
+  const preferences = {};
+  try {
+    if (config.backend === "localStorage" && isLocalStorageAvailable()) {
+      const prefix = `${config.prefix}:`;
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key?.startsWith(prefix)) {
+          const prefKey = key.substring(prefix.length);
+          const value = localStorage.getItem(key);
+          if (value !== null) {
+            try {
+              preferences[prefKey] = JSON.parse(value);
+            } catch {
+              preferences[prefKey] = value;
+            }
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.warn("Failed to get all preferences:", error);
+  }
+  return preferences;
+};
+var exportPreferences = () => {
+  const prefs = getAllPreferences();
+  return JSON.stringify(prefs, null, 2);
+};
+var importPreferences = (json, merge = false) => {
+  try {
+    const prefs = JSON.parse(json);
+    if (!merge) {
+      clearPreferences();
+    }
+    Object.entries(prefs).forEach(([key, value]) => {
+      setPreference(key, value);
+    });
+  } catch (error) {
+    console.warn("Failed to import preferences:", error);
+  }
+};
+var createPreferenceNamespace = (namespace) => {
+  const getKey = (key) => `${namespace}.${key}`;
+  return {
+    get: (key, defaultValue) => getPreference(getKey(key), defaultValue),
+    set: (key, value) => setPreference(getKey(key), value),
+    remove: (key) => removePreference(getKey(key)),
+    clear: () => {
+      const prefs = getAllPreferences();
+      const prefix = `${namespace}.`;
+      Object.keys(prefs).filter((key) => key.startsWith(prefix)).forEach((key) => removePreference(key));
+    }
+  };
+};
+
+// src/components/layout/Layout.tsx
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var Layout = ({
+  variant = "stacked",
+  header,
+  footer,
+  sidebarLeft,
+  sidebarRight,
+  bottomBar,
+  resizable = false,
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = ["layout", `layout--${variant}`, className].filter(Boolean).join(" ");
+  const NAVBAR_COLLAPSED_WIDTH = 72;
+  const NAVBAR_EXPAND_THRESHOLD = 210;
+  const NAVBAR_MIN_PERSIST_WIDTH = 211;
+  const NAVBAR_MAX_WIDTH = 600;
+  const hasSidebarLeft = sidebarLeft != null;
+  const hasSidebarRight = sidebarRight != null;
+  const sidebarLeftIsNavbar = hasSidebarLeft && React6.isValidElement(sidebarLeft) && Boolean(sidebarLeft.props?.isNavbar);
+  const columnCount = [hasSidebarLeft, true, hasSidebarRight].filter(Boolean).length;
+  const shouldShowResizers = resizable && columnCount >= 2;
+  const [leftSidebarWidth, setLeftSidebarWidth] = React6.useState(() => {
+    const v = getPreference("layout.leftSidebarWidth", 280);
+    return typeof v === "number" ? v : 280;
+  });
+  const preferredLeftSidebarWidth = React6.useMemo(() => {
+    const v = getPreference("layout.leftSidebarPreferredWidth", leftSidebarWidth);
+    if (typeof v === "number" && v >= NAVBAR_MIN_PERSIST_WIDTH) {
+      return v;
+    }
+    return Math.max(NAVBAR_MIN_PERSIST_WIDTH, leftSidebarWidth);
+  }, [leftSidebarWidth]);
+  const [rightSidebarWidth, setRightSidebarWidth] = React6.useState(() => {
+    const v = getPreference("layout.rightSidebarWidth", 300);
+    return typeof v === "number" ? v : 300;
+  });
+  const clampLeftWidth = React6.useCallback((width) => {
+    console.log("clampLeftWidth called with:", width);
+    if (width <= NAVBAR_COLLAPSED_WIDTH) {
+      console.log("Returning 72 (collapsed)");
+      return NAVBAR_COLLAPSED_WIDTH;
+    }
+    const result = Math.max(NAVBAR_COLLAPSED_WIDTH, Math.min(NAVBAR_MAX_WIDTH, Math.round(width)));
+    console.log("Returning clamped result:", result);
+    return result;
+  }, []);
+  const updateLeftSidebarWidth = React6.useCallback((width) => {
+    console.log("updateLeftSidebarWidth called with:", width);
+    const newWidth = clampLeftWidth(width);
+    console.log("clampLeftWidth result:", newWidth);
+    setLeftSidebarWidth(newWidth);
+    if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
+      setPreference("layout.leftSidebarWidth", newWidth);
+    }
+  }, [clampLeftWidth]);
+  const handleLeftResize = React6.useCallback((delta) => {
+    setLeftSidebarWidth((prev = 300) => {
+      const newWidthRaw = prev + delta;
+      const newWidth = clampLeftWidth(newWidthRaw);
+      if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarWidth", newWidth);
+      }
+      if (sidebarLeftIsNavbar && Math.abs(delta) > 5 && newWidth < NAVBAR_EXPAND_THRESHOLD) {
+        setPreference("layout.leftSidebarWidth", NAVBAR_COLLAPSED_WIDTH);
+        return NAVBAR_COLLAPSED_WIDTH;
+      }
+      if (newWidth >= NAVBAR_MIN_PERSIST_WIDTH) {
+        setPreference("layout.leftSidebarPreferredWidth", newWidth);
+      }
+      return newWidth;
+    });
+  }, [clampLeftWidth, sidebarLeftIsNavbar]);
+  const handleLeftResizeEnd = React6.useCallback(() => {
+    setLeftSidebarWidth((currentWidth) => {
+      if (currentWidth < NAVBAR_EXPAND_THRESHOLD) {
+        const collapsed = NAVBAR_COLLAPSED_WIDTH;
+        setPreference("layout.leftSidebarWidth", collapsed);
+        return collapsed;
+      }
+      return currentWidth;
+    });
+  }, []);
+  const handleRightResize = React6.useCallback((delta) => {
+    setRightSidebarWidth((prev = 300) => {
+      const newWidth = Math.max(200, Math.min(600, prev - delta));
+      setPreference("layout.rightSidebarWidth", newWidth);
+      return newWidth;
+    });
+  }, []);
+  if (variant === "single") {
+    return /* @__PURE__ */ jsx8("div", { className: classes, ...props, children: /* @__PURE__ */ jsxs4("div", { className: "layout__container", children: [
+      /* @__PURE__ */ jsxs4("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ jsx8("header", { className: "layout__header", children: header }),
+        children,
+        footer && /* @__PURE__ */ jsx8("footer", { className: "layout__footer", children: footer })
+      ] }),
+      bottomBar && /* @__PURE__ */ jsx8("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }) });
+  }
+  if (variant === "stacked") {
+    return /* @__PURE__ */ jsx8("div", { className: classes, ...props, children: /* @__PURE__ */ jsxs4("div", { className: "layout__container", children: [
+      /* @__PURE__ */ jsxs4("main", { className: "layout__main", children: [
+        header && /* @__PURE__ */ jsx8("header", { className: "layout__header", children: header }),
+        children,
+        footer && /* @__PURE__ */ jsx8("footer", { className: "layout__footer", children: footer })
+      ] }),
+      bottomBar && /* @__PURE__ */ jsx8("div", { className: "layout__bottom-bar", children: bottomBar })
+    ] }) });
+  }
+  if (variant === "sidebar-main-sidebar") {
+    return /* @__PURE__ */ jsxs4("div", { className: classes, ...props, children: [
+      hasSidebarLeft && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        /* @__PURE__ */ jsx8(
+          "aside",
+          {
+            className: "layout__sidebar layout__sidebar--left",
+            style: { width: leftSidebarWidth },
+            children: React6.isValidElement(sidebarLeft) ? React6.cloneElement(sidebarLeft, {
+              sidebarWidth: leftSidebarWidth,
+              setSidebarWidth: updateLeftSidebarWidth,
+              preferredSidebarWidth: preferredLeftSidebarWidth,
+              setPreferredSidebarWidth: (w) => {
+                const newW = clampLeftWidth(w);
+                if (newW >= NAVBAR_MIN_PERSIST_WIDTH) {
+                  setPreference("layout.leftSidebarPreferredWidth", newW);
+                }
+                if (leftSidebarWidth > NAVBAR_COLLAPSED_WIDTH) {
+                  setLeftSidebarWidth(newW);
+                  setPreference("layout.leftSidebarWidth", newW);
+                }
+              }
+            }) : sidebarLeft
+          }
+        ),
+        shouldShowResizers && /* @__PURE__ */ jsx8(
+          DragHandle,
+          {
+            orientation: "vertical",
+            onResize: handleLeftResize,
+            onResizeEnd: handleLeftResizeEnd
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "layout__container", children: [
+        /* @__PURE__ */ jsxs4("main", { className: "layout__main", children: [
+          header && /* @__PURE__ */ jsx8("header", { className: "layout__header", children: header }),
+          children,
+          footer && /* @__PURE__ */ jsx8("footer", { className: "layout__footer", children: footer })
+        ] }),
+        bottomBar && /* @__PURE__ */ jsx8("div", { className: "layout__bottom-bar", children: bottomBar })
+      ] }),
+      hasSidebarRight && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+        shouldShowResizers && /* @__PURE__ */ jsx8(
+          DragHandle,
+          {
+            orientation: "vertical",
+            onResize: handleRightResize
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "aside",
+          {
+            className: "layout__sidebar layout__sidebar--right",
+            style: { width: rightSidebarWidth },
+            children: React6.isValidElement(sidebarRight) ? React6.cloneElement(sidebarRight, {
+              sidebarWidth: rightSidebarWidth,
+              setSidebarWidth: (w) => {
+                const newW = Math.max(200, Math.min(600, w));
+                setRightSidebarWidth(newW);
+                setPreference("layout.rightSidebarWidth", newW);
+              }
+            }) : sidebarRight
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx8("div", { className: classes, ...props, children });
+};
+
+// src/components/page/page.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Page = ({ width = "medium", children, className }) => {
+  const pageClasses = [
+    "page",
+    `page--${width}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx9("main", { className: pageClasses, children });
+};
+
+// src/components/header/header.tsx
+import { useMemo as useMemo2 } from "react";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Header = ({ title, subtitle, children, className }) => {
+  const headerId = useMemo2(() => {
+    if (typeof title === "string" && title.trim()) {
+      return title.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+    }
+    return void 0;
+  }, [title]);
+  return /* @__PURE__ */ jsx10("header", { className: `header ${className || ""}`, id: headerId, children: /* @__PURE__ */ jsx10("div", { className: "header__container", children: children ? children : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    title && /* @__PURE__ */ jsx10("h1", { className: "header__title", children: title }),
+    subtitle && /* @__PURE__ */ jsx10("p", { className: "header__subtitle", children: subtitle })
+  ] }) }) });
+};
+
+// src/components/section/section.tsx
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Section = ({ title, children, size = "md", className }) => {
+  const sectionClasses = [
+    "section",
+    size !== "md" && `section--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  const sectionId = useMemo3(() => {
+    if (typeof title === "string" && title.trim()) {
+      return title.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+    }
+    return void 0;
+  }, [title]);
+  const titleText = typeof title === "string" ? title : void 0;
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      className: sectionClasses,
+      id: sectionId,
+      "data-section-title": titleText,
+      children: [
+        title && /* @__PURE__ */ jsx11("h2", { className: "section__title", children: title }),
+        /* @__PURE__ */ jsx11("div", { className: "section__content", children })
+      ]
+    }
+  );
+};
+
+// src/components/code-block/code-block.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CodeBlock = ({ children, variant = "block", className }) => {
+  const classes = [
+    "code-block",
+    variant === "inline" && "code-block--inline",
+    className
+  ].filter(Boolean).join(" ");
+  if (variant === "inline") {
+    return /* @__PURE__ */ jsx12("code", { className: classes, children });
+  }
+  return /* @__PURE__ */ jsx12("pre", { className: classes, children: /* @__PURE__ */ jsx12("code", { children }) });
+};
+
+// src/components/navbar/Navbar.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Navbar = ({
+  children,
+  className = ""
+}) => {
+  const classes = ["navbar", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx13("nav", { className: classes, role: "navigation", "aria-label": "Main navigation", children: /* @__PURE__ */ jsx13("div", { className: "navbar__content", children }) });
+};
+
+// src/components/tooltip/tooltip.tsx
+import * as React9 from "react";
+import * as ReactDOM from "react-dom";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var Tooltip = ({
+  content,
+  children,
+  placement = "top",
+  delay = 0,
+  disabled = false
+}) => {
+  const [isVisible, setIsVisible] = React9.useState(false);
+  const [tooltipStyle, setTooltipStyle] = React9.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React9.useState(placement);
+  const triggerRef = React9.useRef(null);
+  const tooltipRef = React9.useRef(null);
+  const timeoutRef = React9.useRef();
+  React9.useEffect(() => {
+    if (!isVisible || !triggerRef.current || !tooltipRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !tooltipRef.current) {
+        console.log("Tooltip refs not ready:", { trigger: !!triggerRef.current, tooltip: !!tooltipRef.current });
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+      if (tooltipRect.width === 0 || tooltipRect.height === 0) {
+        setTimeout(updatePosition, 10);
+        return;
+      }
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < tooltipRect.width + gap) {
+        finalPlacement = spaceLeft >= tooltipRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < tooltipRect.width + gap) {
+        finalPlacement = spaceRight >= tooltipRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < tooltipRect.height + gap) {
+        finalPlacement = spaceTop >= tooltipRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < tooltipRect.height + gap) {
+        finalPlacement = spaceBottom >= tooltipRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 1e4,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+          newStyle.left = triggerRect.left - tooltipRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - tooltipRect.height - gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+      }
+      if (newStyle.left < 0) {
+        newStyle.left = 0;
+      } else if (newStyle.left + tooltipRect.width > viewportWidth) {
+        newStyle.left = viewportWidth - tooltipRect.width;
+      }
+      if (newStyle.top < 0) {
+        newStyle.top = 0;
+      } else if (newStyle.top + tooltipRect.height > viewportHeight) {
+        newStyle.top = viewportHeight - tooltipRect.height;
+      }
+      setTooltipStyle(newStyle);
+      console.log("Calculated position:", newStyle);
+    };
+    console.log("Tooltip isVisible:", isVisible, "tooltipStyle:", tooltipStyle);
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [isVisible, placement]);
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    console.log("Tooltip mouse enter");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      console.log("Tooltip setting visible");
+      setIsVisible(true);
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    console.log("Tooltip mouse leave");
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      console.log("Tooltip setting invisible");
+      setIsVisible(false);
+    }, 150);
+  };
+  const handleClick = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+  return /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        style: { display: "inline-block" },
+        children
+      }
+    ),
+    isVisible && !disabled && ReactDOM.createPortal(
+      /* @__PURE__ */ jsx14(
+        "div",
+        {
+          ref: tooltipRef,
+          className: `tooltip tooltip--${resolvedPlacement}`,
+          style: {
+            ...tooltipStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: tooltipStyle.top !== void 0 ? 1 : 0,
+            visibility: tooltipStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          onMouseEnter: () => {
+            console.log("Tooltip mouse enter on tooltip");
+            if (timeoutRef.current) {
+              clearTimeout(timeoutRef.current);
+            }
+          },
+          onMouseLeave: handleMouseLeave,
+          children: /* @__PURE__ */ jsx14("div", { className: "tooltip__content", children: content })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/navbar/MenuItem.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+var MenuItem = ({
+  icon,
+  active = false,
+  children,
+  className = "",
+  as: Component = "button",
+  isCollapsed = false,
+  showTooltipWhenCollapsed = false,
+  ...props
+}) => {
+  const { hasOpenPopover } = useNavbarTooltip();
+  const classes = [
+    "navbar__menu-item",
+    active && "navbar__menu-item--active",
+    className
+  ].filter(Boolean).join(" ");
+  const menuItem = isCollapsed ? /* @__PURE__ */ jsx15(
+    Button,
+    {
+      variant: active ? "primary" : "ghost",
+      iconOnly: true,
+      startIcon: icon,
+      ...props
+    }
+  ) : /* @__PURE__ */ jsxs8(
+    Component,
+    {
+      className: classes,
+      type: Component === "button" ? "button" : void 0,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx15("span", { className: "navbar__menu-item-icon", children: /* @__PURE__ */ jsx15(Icon, { name: icon, size: 16 }) }),
+        !isCollapsed && /* @__PURE__ */ jsx15("span", { className: "navbar__menu-item-label", children })
+      ]
+    }
+  );
+  if (showTooltipWhenCollapsed && isCollapsed) {
+    return /* @__PURE__ */ jsx15(Tooltip, { content: typeof children === "string" ? children : "", placement: "right", disabled: hasOpenPopover, children: menuItem });
+  }
+  return menuItem;
+};
+
+// src/components/navbar/MenuGroup.tsx
+import * as React11 from "react";
+
+// src/components/popover/popover.tsx
+import * as React10 from "react";
+import * as ReactDOM2 from "react-dom";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+var Popover = ({
+  trigger,
+  children,
+  isOpen = false,
+  onToggle,
+  placement = "bottom"
+}) => {
+  const [internalOpen, setInternalOpen] = React10.useState(false);
+  const triggerRef = React10.useRef(null);
+  const popoverRef = React10.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React10.useState({});
+  const [resolvedPlacement, setResolvedPlacement] = React10.useState(placement);
+  const open = isOpen !== void 0 ? isOpen : internalOpen;
+  const toggle = onToggle || (() => setInternalOpen(!internalOpen));
+  React10.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (triggerRef.current && !triggerRef.current.contains(event.target) && popoverRef.current && !popoverRef.current.contains(event.target)) {
+        if (onToggle) {
+          onToggle();
+        } else {
+          setInternalOpen(false);
+        }
+      }
+    };
+    if (open) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [open, onToggle]);
+  React10.useEffect(() => {
+    if (!open || !triggerRef.current || !popoverRef.current) {
+      return;
+    }
+    const updatePosition = () => {
+      if (!triggerRef.current || !popoverRef.current) {
+        return;
+      }
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      const gap = 8;
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+      const spaceTop = triggerRect.top;
+      const spaceBottom = viewportHeight - triggerRect.bottom;
+      const spaceLeft = triggerRect.left;
+      const spaceRight = viewportWidth - triggerRect.right;
+      let finalPlacement = placement;
+      if (placement === "right" && spaceRight < popoverRect.width + gap) {
+        finalPlacement = spaceLeft >= popoverRect.width + gap ? "left" : "bottom";
+      } else if (placement === "left" && spaceLeft < popoverRect.width + gap) {
+        finalPlacement = spaceRight >= popoverRect.width + gap ? "right" : "bottom";
+      } else if (placement === "bottom" && spaceBottom < popoverRect.height + gap) {
+        finalPlacement = spaceTop >= popoverRect.height + gap ? "top" : "bottom";
+      } else if (placement === "top" && spaceTop < popoverRect.height + gap) {
+        finalPlacement = spaceBottom >= popoverRect.height + gap ? "bottom" : "top";
+      }
+      setResolvedPlacement(finalPlacement);
+      const newStyle = {
+        position: "fixed",
+        zIndex: 9999,
+        opacity: 1,
+        visibility: "visible",
+        pointerEvents: "auto"
+      };
+      switch (finalPlacement) {
+        case "right":
+          newStyle.top = triggerRect.top;
+          newStyle.left = triggerRect.right + gap;
+          break;
+        case "left":
+          newStyle.top = triggerRect.top;
+          newStyle.left = triggerRect.left - popoverRect.width - gap;
+          break;
+        case "top":
+          newStyle.top = triggerRect.top - popoverRect.height - gap;
+          newStyle.left = triggerRect.left;
+          break;
+        case "bottom":
+        default:
+          newStyle.top = triggerRect.bottom + gap;
+          newStyle.left = triggerRect.left;
+      }
+      if (typeof newStyle.left === "number") {
+        if (newStyle.left + popoverRect.width > viewportWidth - gap) {
+          newStyle.left = viewportWidth - popoverRect.width - gap;
+        }
+        if (newStyle.left < gap) {
+          newStyle.left = gap;
+        }
+      }
+      if (typeof newStyle.top === "number") {
+        if (newStyle.top + popoverRect.height > viewportHeight - gap) {
+          newStyle.top = viewportHeight - popoverRect.height - gap;
+        }
+        if (newStyle.top < gap) {
+          newStyle.top = gap;
+        }
+      }
+      setPopoverStyle(newStyle);
+    };
+    requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, placement]);
+  const handleTriggerClick = () => {
+    toggle();
+  };
+  return /* @__PURE__ */ jsxs9(Fragment5, { children: [
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ref: triggerRef,
+        onClick: handleTriggerClick,
+        style: { display: "inline-block", position: "relative" },
+        children: React10.isValidElement(trigger) ? React10.cloneElement(trigger, {
+          onClick: (e) => {
+            e.stopPropagation();
+            handleTriggerClick();
+            trigger.props?.onClick?.(e);
+          }
+        }) : trigger
+      }
+    ),
+    open && ReactDOM2.createPortal(
+      /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: popoverRef,
+          className: `popover popover--${resolvedPlacement}`,
+          style: {
+            ...popoverStyle,
+            // Start with opacity 0 and visibility hidden to prevent initial flash
+            opacity: popoverStyle.top !== void 0 ? 1 : 0,
+            visibility: popoverStyle.top !== void 0 ? "visible" : "hidden"
+          },
+          children: /* @__PURE__ */ jsx16("div", { className: "popover__content", children })
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+
+// src/components/navbar/MenuGroup.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var MenuGroup = ({
+  title,
+  icon,
+  children,
+  defaultExpanded = false,
+  autoExpand = false,
+  expandable = true,
+  isCollapsed = false
+}) => {
+  const [expanded, setExpanded] = React11.useState(defaultExpanded);
+  const [userInteracted, setUserInteracted] = React11.useState(false);
+  const { openPopover, closePopover, activePopoverId } = useNavbarTooltip();
+  const groupId = React11.useMemo(() => `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`, [title]);
+  const popoverOpen = activePopoverId === groupId;
+  const triggerRef = React11.useRef(null);
+  const popoverContentRef = React11.useRef(null);
+  React11.useEffect(() => {
+    if (popoverOpen && popoverContentRef.current) {
+      setTimeout(() => {
+        const firstFocusable = popoverContentRef.current?.querySelector(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        firstFocusable?.focus();
+      }, 10);
+    }
+  }, [popoverOpen]);
+  const findNextFocusableElement = React11.useCallback((currentElement) => {
+    const navbar = currentElement.closest(".navbar");
+    if (!navbar) return null;
+    const focusableElements = navbar.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    const rootFocusableElements = Array.from(focusableElements).filter((el) => {
+      return !el.closest(".popover");
+    });
+    const currentIndex = rootFocusableElements.indexOf(currentElement);
+    if (currentIndex >= 0 && currentIndex < rootFocusableElements.length - 1) {
+      return rootFocusableElements[currentIndex + 1];
+    }
+    return null;
+  }, []);
+  const handleKeyDown = React11.useCallback((event) => {
+    if (event.key === "Tab" && !event.shiftKey) {
+      if (popoverContentRef.current) {
+        const focusableElements = popoverContentRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const currentElement = event.target;
+        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
+        if (currentIndex >= 0 && currentIndex === focusableElements.length - 1) {
+          event.preventDefault();
+          const nextElement = findNextFocusableElement(currentElement);
+          if (nextElement) {
+            nextElement.focus();
+          } else {
+            closePopover(groupId);
+            triggerRef.current?.focus();
+          }
+        }
+      }
+    } else if (event.key === "Tab" && event.shiftKey) {
+      if (popoverContentRef.current) {
+        const focusableElements = popoverContentRef.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        const currentElement = event.target;
+        const currentIndex = Array.from(focusableElements).indexOf(currentElement);
+        if (currentIndex === 0) {
+          event.preventDefault();
+          triggerRef.current?.focus();
+        }
+      }
+    } else if (event.key === "Escape") {
+      closePopover(groupId);
+      setTimeout(() => {
+        triggerRef.current?.focus();
+      }, 10);
+    }
+  }, [closePopover, groupId, findNextFocusableElement]);
+  const hasActiveItem = React11.useMemo(() => {
+    const checkForActiveItems = (children2) => {
+      return React11.Children.toArray(children2).some((child) => {
+        if (React11.isValidElement(child)) {
+          if (child.props && child.props.active === true) {
+            return true;
+          }
+          if (child.props && child.props.children) {
+            return checkForActiveItems(child.props.children);
+          }
+        }
+        return false;
+      });
+    };
+    return checkForActiveItems(children);
+  }, [children]);
+  React11.useEffect(() => {
+    if (autoExpand && hasActiveItem && !userInteracted) {
+      setExpanded(true);
+    }
+  }, [autoExpand, hasActiveItem, userInteracted]);
+  const toggleExpanded = () => {
+    setUserInteracted(true);
+    setExpanded(!expanded);
+  };
+  const popoverContent = /* @__PURE__ */ jsxs10("div", { className: "navbar__menu-group-popover", children: [
+    /* @__PURE__ */ jsx17("div", { className: "navbar__menu-group-popover-title", children: title }),
+    /* @__PURE__ */ jsx17(
+      "div",
+      {
+        className: "navbar__menu-group-popover-content",
+        ref: popoverContentRef,
+        onKeyDown: handleKeyDown,
+        onClick: () => {
+          setTimeout(() => {
+            closePopover(groupId);
+          }, 0);
+        },
+        children: React11.Children.map(children, (child) => {
+          if (React11.isValidElement(child)) {
+            return React11.cloneElement(child, {
+              onKeyDown: (e) => {
+                child.props.onKeyDown?.(e);
+                handleKeyDown(e);
+              }
+            });
+          }
+          return child;
+        })
+      }
+    )
+  ] });
+  const expandedHeader = !expandable ? /* @__PURE__ */ jsxs10("div", { className: "navbar__menu-group-header navbar__menu-group-header--static", children: [
+    icon && /* @__PURE__ */ jsx17("span", { className: "navbar__menu-group-icon", children: /* @__PURE__ */ jsx17(Icon, { name: icon, size: 16 }) }),
+    /* @__PURE__ */ jsx17("span", { className: "navbar__menu-group-title", children: title })
+  ] }) : /* @__PURE__ */ jsxs10(
+    "button",
+    {
+      className: `navbar__menu-group-header ${!expanded && hasActiveItem ? "navbar__menu-group-header--active" : ""}`,
+      onClick: toggleExpanded,
+      "aria-expanded": expanded,
+      "aria-controls": `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`,
+      type: "button",
+      children: [
+        icon && /* @__PURE__ */ jsx17("span", { className: "navbar__menu-group-icon", children: /* @__PURE__ */ jsx17(Icon, { name: icon, size: 16 }) }),
+        /* @__PURE__ */ jsx17("span", { className: "navbar__menu-group-title", children: title }),
+        /* @__PURE__ */ jsx17("span", { className: `navbar__menu-group-chevron ${expanded ? "navbar__menu-group-chevron--expanded" : ""}`, children: /* @__PURE__ */ jsx17(Icon, { name: "chevron-down", size: 12 }) })
+      ]
+    }
+  );
+  const collapsedHeader = /* @__PURE__ */ jsx17("div", { children: /* @__PURE__ */ jsx17(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ jsx17(Tooltip, { content: title, placement: "right", disabled: popoverOpen, children: /* @__PURE__ */ jsx17(
+        Button,
+        {
+          ref: triggerRef,
+          variant: popoverOpen ? "secondary" : hasActiveItem ? "primary" : "ghost",
+          iconOnly: true,
+          startIcon: icon,
+          "aria-label": title,
+          "aria-haspopup": "menu",
+          "aria-expanded": popoverOpen,
+          onKeyDown: (event) => {
+            if (event.key === "Tab" && !event.shiftKey && popoverOpen) {
+              event.preventDefault();
+              const firstFocusable = popoverContentRef.current?.querySelector(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+              );
+              firstFocusable?.focus();
+            }
+          },
+          onClick: () => {
+            if (popoverOpen) {
+              closePopover(groupId);
+            } else {
+              openPopover(groupId);
+            }
+          }
+        }
+      ) }),
+      isOpen: popoverOpen,
+      onToggle: () => {
+        if (popoverOpen) {
+          closePopover(groupId);
+        } else {
+          openPopover(groupId);
+        }
+      },
+      placement: "right",
+      children: popoverContent
+    }
+  ) });
+  return /* @__PURE__ */ jsxs10("div", { className: "navbar__menu-group", children: [
+    isCollapsed ? collapsedHeader : expandedHeader,
+    !isCollapsed && /* @__PURE__ */ jsx17(
+      "div",
+      {
+        className: "navbar__menu-group-content",
+        id: `menu-group-${title.replace(/\s+/g, "-").toLowerCase()}`,
+        "aria-hidden": !expandable || !expanded,
+        style: { display: expandable ? expanded ? "block" : "none" : "block" },
+        children
+      }
+    )
+  ] });
+};
+
+// src/components/navbar/MenuCategory.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var MenuCategory = ({
+  title,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs11("div", { className: "navbar__menu-category", children: [
+    /* @__PURE__ */ jsx18("div", { className: "navbar__menu-category-title", children: title }),
+    /* @__PURE__ */ jsx18("div", { className: "navbar__menu-category-content", children })
+  ] });
+};
+
+// src/components/theme-control/theme-control.tsx
+import * as React12 from "react";
+
+// src/utils/theme.ts
+var THEME_KEY = "theme";
+var ATTR_NAME = "data-theme";
+var applyTheme = (theme) => {
+  document.documentElement.setAttribute(ATTR_NAME, theme);
+};
+var getTheme = () => {
+  const dataTheme = document.documentElement.getAttribute(ATTR_NAME);
+  if (dataTheme === "light" || dataTheme === "dark") return dataTheme;
+  try {
+    const stored = getPreference(THEME_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch (e) {
+  }
+  if (typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+};
+var getSavedTheme = () => getTheme();
+var setTheme = (theme) => {
+  if (!["light", "dark"].includes(theme)) {
+    console.warn(`Invalid theme: ${theme}. Using 'light' as fallback.`);
+    theme = "light";
+  }
+  try {
+    setPreference(THEME_KEY, theme);
+  } catch (e) {
+  }
+  applyTheme(theme);
+};
+var initializeTheme = () => {
+  const theme = getTheme();
+  applyTheme(theme);
+};
+var onSystemThemeChange = (callback) => {
+  if (typeof window === "undefined") return () => {
+  };
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const listener = (e) => {
+    const theme = e.matches ? "dark" : "light";
+    const hasStored = (() => {
+      try {
+        const stored = getPreference(THEME_KEY);
+        return stored === "light" || stored === "dark";
+      } catch {
+        return false;
+      }
+    })();
+    const dataTheme = document.documentElement.getAttribute(ATTR_NAME);
+    if (!hasStored && !dataTheme) callback(theme);
+  };
+  if (mediaQuery.addEventListener) {
+    mediaQuery.addEventListener("change", listener);
+    return () => mediaQuery.removeEventListener("change", listener);
+  }
+  mediaQuery.addListener(listener);
+  return () => mediaQuery.removeListener(listener);
+};
+var toggleTheme = () => {
+  const current = getTheme();
+  const next = current === "light" ? "dark" : "light";
+  setTheme(next);
+  return next;
+};
+
+// src/components/theme-control/theme-control.tsx
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var themeOptions = [
+  {
+    value: "light",
+    label: "Light",
+    icon: /* @__PURE__ */ jsxs12("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx19("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+      /* @__PURE__ */ jsx19("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+      /* @__PURE__ */ jsx19("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+      /* @__PURE__ */ jsx19("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+      /* @__PURE__ */ jsx19("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+      /* @__PURE__ */ jsx19("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+      /* @__PURE__ */ jsx19("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+      /* @__PURE__ */ jsx19("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+    ] })
+  },
+  {
+    value: "dark",
+    label: "Dark",
+    icon: /* @__PURE__ */ jsx19("svg", { className: "theme-control__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx19("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) })
+  }
+];
+var ThemeControl = ({ onThemeChange }) => {
+  const [currentTheme, setCurrentTheme] = React12.useState(() => {
+    return getSavedTheme();
+  });
+  React12.useEffect(() => {
+    setTheme(currentTheme);
+    onThemeChange?.(currentTheme);
+  }, [currentTheme, onThemeChange]);
+  const handleThemeSelect = (theme) => {
+    setCurrentTheme(theme);
+  };
+  return /* @__PURE__ */ jsx19("div", { className: "theme-control", children: themeOptions.map((option) => /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: `theme-control__option ${currentTheme === option.value ? "theme-control__option--active" : ""}`,
+      onClick: () => handleThemeSelect(option.value),
+      children: [
+        option.icon,
+        /* @__PURE__ */ jsx19("span", { children: option.label })
+      ]
+    },
+    option.value
+  )) });
+};
+
+// src/components/card/card.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Card = ({
+  variant = "default",
+  children,
+  className = "",
+  onClick,
+  ...props
+}) => {
+  const cardClasses = [
+    "card",
+    `card--${variant}`,
+    onClick && "card--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  const Component = onClick ? "button" : "div";
+  return /* @__PURE__ */ jsx20(
+    Component,
+    {
+      className: cardClasses,
+      onClick,
+      ...onClick && { type: "button" },
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/color-control/color-control.tsx
+import { useState as useState9, useEffect as useEffect5, useCallback as useCallback6 } from "react";
+
+// src/components/slider/Slider.tsx
+import React13, { useState as useState8, useCallback as useCallback5, useRef as useRef5 } from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var Slider = ({
+  min = 0,
+  max = 100,
+  value,
+  step = 1,
+  onChange,
+  onDragStart,
+  onChangeEnd,
+  label,
+  showValue = true,
+  className = "",
+  disabled = false,
+  type = "default",
+  baseHue = 0,
+  baseSaturation = 70
+}) => {
+  const [isDragging, setIsDragging] = useState8(false);
+  const inputRef = useRef5(null);
+  const containerRef = useRef5(null);
+  const valueRef = useRef5(value);
+  React13.useEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  const handleChange = useCallback5((event) => {
+    const newValue = parseFloat(event.target.value);
+    onChange(newValue);
+  }, [onChange]);
+  const getValueFromPosition = useCallback5((clientX) => {
+    if (!containerRef.current) return value;
+    const rect = containerRef.current.getBoundingClientRect();
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const rawValue = min + percentage * (max - min);
+    const steppedValue = Math.round(rawValue / step) * step;
+    return Math.max(min, Math.min(max, steppedValue));
+  }, [min, max, step, value]);
+  const handleMouseDown = useCallback5((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleMouseMove = useCallback5((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const newValue = getValueFromPosition(event.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleMouseUp = useCallback5(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React13.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  const handleTouchStart = useCallback5((event) => {
+    if (disabled) return;
+    event.preventDefault();
+    setIsDragging(true);
+    onDragStart?.();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [disabled, onDragStart, getValueFromPosition, onChange]);
+  const handleTouchMove = useCallback5((event) => {
+    if (!isDragging) return;
+    event.preventDefault();
+    const touch = event.touches[0];
+    const newValue = getValueFromPosition(touch.clientX);
+    onChange(newValue);
+  }, [isDragging, getValueFromPosition, onChange]);
+  const handleTouchEnd = useCallback5(() => {
+    if (!isDragging) return;
+    setIsDragging(false);
+    onChangeEnd?.(valueRef.current);
+  }, [isDragging, onChangeEnd]);
+  React13.useEffect(() => {
+    if (!isDragging) return;
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+    return () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+  }, [isDragging, handleTouchMove, handleTouchEnd]);
+  const sliderClasses = [
+    "slider",
+    `slider--${type}`,
+    isDragging && "slider--dragging",
+    disabled && "slider--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const getBackground = () => {
+    switch (type) {
+      case "hue":
+        return "linear-gradient(to right, hsl(0, 70%, 50%), hsl(60, 70%, 50%), hsl(120, 70%, 50%), hsl(180, 70%, 50%), hsl(240, 70%, 50%), hsl(300, 70%, 50%), hsl(360, 70%, 50%))";
+      case "saturation":
+        return `linear-gradient(to right, hsl(${baseHue}, 0%, 50%), hsl(${baseHue}, 100%, 50%))`;
+      case "lightness":
+        return `linear-gradient(to right, hsl(${baseHue}, ${baseSaturation}%, 0%), hsl(${baseHue}, ${baseSaturation}%, 50%), hsl(${baseHue}, ${baseSaturation}%, 100%))`;
+      default:
+        return "var(--color-action-primary)";
+    }
+  };
+  const inputStyle = { background: getBackground() };
+  const stepMarks = step > 1 ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => min + i * step) : [];
+  const thumbPosition = (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxs13("div", { className: sliderClasses, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs13("div", { className: "slider__header", children: [
+      label && /* @__PURE__ */ jsx21("label", { className: "slider__label", children: label }),
+      showValue && /* @__PURE__ */ jsx21("span", { className: "slider__value", children: value })
+    ] }),
+    /* @__PURE__ */ jsxs13("div", { className: "slider__container", ref: containerRef, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: [
+      /* @__PURE__ */ jsx21(
+        "input",
+        {
+          ref: inputRef,
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          onChange: handleChange,
+          className: "slider__input",
+          style: inputStyle,
+          disabled,
+          readOnly: true
+        }
+      ),
+      /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: "slider__thumb",
+          style: {
+            left: `${thumbPosition}%`,
+            transform: "translateX(-50%)"
+          },
+          children: /* @__PURE__ */ jsx21("div", { className: "slider__thumb-icon", children: /* @__PURE__ */ jsx21(Icon, { name: "arrow-down", size: 16 }) })
+        }
+      ),
+      stepMarks.length > 0 && /* @__PURE__ */ jsx21("div", { className: "slider__marks", children: stepMarks.map((mark) => /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: "slider__mark",
+          style: {
+            left: `${(mark - min) / (max - min) * 100}%`
+          }
+        },
+        mark
+      )) })
+    ] })
+  ] });
+};
+
+// src/components/color-control/color-control.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var getCSSVariable = (variable) => {
+  if (typeof window === "undefined") return 0;
+  const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+  return value ? parseInt(value, 10) : 0;
+};
+var loadColorsFromCSS = () => {
+  return {
+    hues: {
+      primary: getCSSVariable("--primary-hue"),
+      secondary: getCSSVariable("--secondary-hue"),
+      accent: getCSSVariable("--accent-hue"),
+      success: getCSSVariable("--success-hue"),
+      warning: getCSSVariable("--warning-hue"),
+      error: getCSSVariable("--error-hue"),
+      info: getCSSVariable("--info-hue")
+    },
+    saturations: {
+      primary: getCSSVariable("--primary-saturation"),
+      secondary: getCSSVariable("--secondary-saturation"),
+      accent: getCSSVariable("--accent-saturation"),
+      success: getCSSVariable("--success-saturation"),
+      warning: getCSSVariable("--warning-saturation"),
+      error: getCSSVariable("--error-saturation"),
+      info: getCSSVariable("--info-saturation")
+    },
+    lightnesses: {
+      primary: getCSSVariable("--primary-lightness"),
+      secondary: getCSSVariable("--secondary-lightness"),
+      accent: getCSSVariable("--accent-lightness"),
+      success: getCSSVariable("--success-lightness"),
+      warning: getCSSVariable("--warning-lightness"),
+      error: getCSSVariable("--error-lightness"),
+      info: getCSSVariable("--info-lightness")
+    }
+  };
+};
+var ColorControl = () => {
+  const [colors, setColors] = useState9(() => {
+    const saved = localStorage.getItem("color-config");
+    return saved ? JSON.parse(saved) : loadColorsFromCSS();
+  });
+  const [pendingColors, setPendingColors] = useState9(colors);
+  useEffect5(() => {
+    const root = document.documentElement;
+    root.style.setProperty("--hue-primary", colors.hues.primary.toString());
+    root.style.setProperty("--hue-secondary", colors.hues.secondary.toString());
+    root.style.setProperty("--hue-accent", colors.hues.accent.toString());
+    root.style.setProperty("--hue-success", colors.hues.success.toString());
+    root.style.setProperty("--hue-warning", colors.hues.warning.toString());
+    root.style.setProperty("--hue-error", colors.hues.error.toString());
+    root.style.setProperty("--hue-info", colors.hues.info.toString());
+    root.style.setProperty("--saturation-primary", `${colors.saturations.primary}%`);
+    root.style.setProperty("--saturation-secondary", `${colors.saturations.secondary}%`);
+    root.style.setProperty("--saturation-accent", `${colors.saturations.accent}%`);
+    root.style.setProperty("--saturation-success", `${colors.saturations.success}%`);
+    root.style.setProperty("--saturation-warning", `${colors.saturations.warning}%`);
+    root.style.setProperty("--saturation-error", `${colors.saturations.error}%`);
+    root.style.setProperty("--saturation-info", `${colors.saturations.info}%`);
+    root.style.setProperty("--lightness-primary", `${colors.lightnesses.primary}%`);
+    root.style.setProperty("--lightness-secondary", `${colors.lightnesses.secondary}%`);
+    root.style.setProperty("--lightness-accent", `${colors.lightnesses.accent}%`);
+    root.style.setProperty("--lightness-success", `${colors.lightnesses.success}%`);
+    root.style.setProperty("--lightness-warning", `${colors.lightnesses.warning}%`);
+    root.style.setProperty("--lightness-error", `${colors.lightnesses.error}%`);
+    root.style.setProperty("--lightness-info", `${colors.lightnesses.info}%`);
+  }, []);
+  const commitColorChange = useCallback6((color, property, value) => {
+    setColors((prev) => {
+      const newColors = {
+        ...prev,
+        [property === "hue" ? "hues" : property === "saturation" ? "saturations" : "lightnesses"]: {
+          ...prev[property === "hue" ? "hues" : property === "saturation" ? "saturations" : "lightnesses"],
+          [color]: value
+        }
+      };
+      const root = document.documentElement;
+      const cssVar = property === "hue" ? `--hue-${color}` : `--${property}-${color}`;
+      const cssValue = property === "hue" ? value.toString() : `${value}%`;
+      root.style.setProperty(cssVar, cssValue);
+      localStorage.setItem("color-config", JSON.stringify(newColors));
+      return newColors;
+    });
+  }, []);
+  const resetToDefaults = useCallback6(() => {
+    const cssColors = loadColorsFromCSS();
+    setColors(cssColors);
+    setPendingColors(cssColors);
+  }, []);
+  const renderColorControls = (colorName) => {
+    const hue = pendingColors.hues[colorName];
+    const saturation = pendingColors.saturations[colorName];
+    const lightness = pendingColors.lightnesses[colorName];
+    return /* @__PURE__ */ jsxs14("div", { className: "color-control__color-group", children: [
+      /* @__PURE__ */ jsx22("h4", { className: "color-control__color-title", children: colorName.charAt(0).toUpperCase() + colorName.slice(1) }),
+      /* @__PURE__ */ jsxs14("div", { className: "color-control__controls-row", children: [
+        /* @__PURE__ */ jsxs14("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx22("label", { className: "color-control__label", children: "Hue" }),
+          /* @__PURE__ */ jsx22(
+            Slider,
+            {
+              label: "",
+              value: hue,
+              min: 0,
+              max: 360,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                hues: { ...prev.hues, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  hues: { ...prev.hues, [colorName]: v }
+                }));
+                commitColorChange(colorName, "hue", v);
+              },
+              type: "hue",
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx22("label", { className: "color-control__label", children: "Saturation" }),
+          /* @__PURE__ */ jsx22(
+            Slider,
+            {
+              label: "",
+              value: saturation,
+              min: 0,
+              max: 100,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                saturations: { ...prev.saturations, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  saturations: { ...prev.saturations, [colorName]: v }
+                }));
+                commitColorChange(colorName, "saturation", v);
+              },
+              type: "saturation",
+              baseHue: hue,
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "color-control__control", children: [
+          /* @__PURE__ */ jsx22("label", { className: "color-control__label", children: "Lightness" }),
+          /* @__PURE__ */ jsx22(
+            Slider,
+            {
+              label: "",
+              value: lightness,
+              min: 0,
+              max: 100,
+              step: 1,
+              onChange: (v) => setPendingColors((prev) => ({
+                ...prev,
+                lightnesses: { ...prev.lightnesses, [colorName]: v }
+              })),
+              onChangeEnd: (v) => {
+                setPendingColors((prev) => ({
+                  ...prev,
+                  lightnesses: { ...prev.lightnesses, [colorName]: v }
+                }));
+                commitColorChange(colorName, "lightness", v);
+              },
+              type: "lightness",
+              baseHue: hue,
+              baseSaturation: saturation,
+              showValue: false
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__preview",
+            style: {
+              backgroundColor: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+              border: "2px solid var(--color-neutral-300)"
+            }
+          }
+        )
+      ] })
+    ] }, colorName);
+  };
+  return /* @__PURE__ */ jsxs14("div", { className: "color-control", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "color-control__header", children: [
+      /* @__PURE__ */ jsx22("h3", { className: "color-control__title", children: "Paleta de Cores" }),
+      /* @__PURE__ */ jsx22("p", { className: "color-control__description", children: "Ajuste o matiz, satura\xE7\xE3o e luminosidade das cores. As mudan\xE7as s\xE3o aplicadas instantaneamente." })
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "color-control__sliders", children: [
+      renderColorControls("primary"),
+      renderColorControls("secondary"),
+      renderColorControls("accent"),
+      renderColorControls("success"),
+      renderColorControls("warning"),
+      renderColorControls("error"),
+      renderColorControls("info")
+    ] }),
+    /* @__PURE__ */ jsx22("div", { className: "color-control__actions", children: /* @__PURE__ */ jsx22(
+      "button",
+      {
+        onClick: resetToDefaults,
+        className: "color-control__reset-btn",
+        children: "Restaurar Padr\xF5es"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs14("div", { className: "color-control__preview-section", children: [
+      /* @__PURE__ */ jsx22("h4", { className: "color-control__preview-title", children: "Pr\xE9via das Cores" }),
+      /* @__PURE__ */ jsxs14("div", { className: "color-control__color-grid", children: [
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.primary}, ${pendingColors.saturations.primary}%, ${pendingColors.lightnesses.primary}%)` },
+            children: "Primary"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.secondary}, ${pendingColors.saturations.secondary}%, ${pendingColors.lightnesses.secondary}%)` },
+            children: "Secondary"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.accent}, ${pendingColors.saturations.accent}%, ${pendingColors.lightnesses.accent}%)` },
+            children: "Accent"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.success}, ${pendingColors.saturations.success}%, ${pendingColors.lightnesses.success}%)` },
+            children: "Success"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.warning}, ${pendingColors.saturations.warning}%, ${pendingColors.lightnesses.warning}%)` },
+            children: "Warning"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.error}, ${pendingColors.saturations.error}%, ${pendingColors.lightnesses.error}%)` },
+            children: "Error"
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          "div",
+          {
+            className: "color-control__color-sample",
+            style: { backgroundColor: `hsl(${pendingColors.hues.info}, ${pendingColors.saturations.info}%, ${pendingColors.lightnesses.info}%)` },
+            children: "Info"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+// src/components/grid/Grid.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Grid = ({
+  columns = "auto-fit",
+  minWidth = "250px",
+  gap = "1rem",
+  maxColumns,
+  className = "",
+  children,
+  ...props
+}) => {
+  const gridClass = [
+    "grid",
+    typeof columns === "number" ? `grid--cols-${Math.min(columns, maxColumns || columns)}` : `grid--${columns}`,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--grid-min-width": minWidth,
+    "--grid-gap": gap
+  };
+  return /* @__PURE__ */ jsx23("div", { className: gridClass, style, ...props, children });
+};
+
+// src/components/footer/footer.tsx
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+var Footer = ({ className = "", children, ...props }) => {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  return /* @__PURE__ */ jsx24("footer", { className: `footer ${className}`.trim(), ...props, children: /* @__PURE__ */ jsx24("div", { className: "footer__container", children: children ? children : /* @__PURE__ */ jsx24(Fragment6, { children: /* @__PURE__ */ jsx24("div", { className: "footer__bottom", children: /* @__PURE__ */ jsxs15("p", { className: "footer__copyright", children: [
+    "\xA9 ",
+    currentYear,
+    " ",
+    /* @__PURE__ */ jsx24("strong", { children: "HellboyDS" }),
+    " is a design system package published on npm by user ",
+    /* @__PURE__ */ jsx24("strong", { children: "@hellboy" }),
+    ". This project is not affiliated with any comic book, film, television, or other artistic works."
+  ] }) }) }) }) });
+};
+
+// src/components/input/InputText.tsx
+import React19 from "react";
+
+// src/components/input/Input.tsx
+import * as React18 from "react";
+
+// src/components/input/InputField.tsx
+import * as React15 from "react";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var InputField = React15.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    iconRight,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    onRightIconClick,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${React15.useId()}`;
+    const containerClasses = [
+      "input-container",
+      fullWidth && "input-container--full-width",
+      className
+    ].filter(Boolean).join(" ");
+    const inputClasses = [
+      "input",
+      `input--${size}`,
+      error && "input--error",
+      disabled && "input--disabled",
+      icon && "input--has-icon-left",
+      iconRight && "input--has-icon-right"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs16("div", { className: containerClasses, children: [
+      label && /* @__PURE__ */ jsx25("label", { htmlFor: inputId, className: "input__label", children: label }),
+      /* @__PURE__ */ jsxs16("div", { className: "input__wrapper", children: [
+        icon && /* @__PURE__ */ jsx25("span", { className: "input__icon input__icon--left", "aria-hidden": "true", children: /* @__PURE__ */ jsx25(Icon, { name: icon, size: 16 }) }),
+        /* @__PURE__ */ jsx25(
+          "input",
+          {
+            ref,
+            type,
+            id: inputId,
+            className: inputClasses,
+            disabled,
+            ...props
+          }
+        ),
+        iconRight && /* @__PURE__ */ jsx25(
+          "button",
+          {
+            type: "button",
+            className: "input__icon input__icon--right",
+            onClick: onRightIconClick,
+            tabIndex: -1,
+            "aria-label": "Icon action",
+            children: /* @__PURE__ */ jsx25(Icon, { name: iconRight, size: 16 })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx25("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx25("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+
+// src/components/input/DatePicker.tsx
+import * as React16 from "react";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+var MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var DatePicker = ({ value, onChange, disabled }) => {
+  const parseDate = (dateStr) => {
+    if (!dateStr) {
+      const today = /* @__PURE__ */ new Date();
+      return { year: today.getFullYear(), month: today.getMonth(), day: today.getDate() };
+    }
+    const [year, month, day] = dateStr.split("-").map(Number);
+    return { year, month: month - 1, day };
+  };
+  const { year: initialYear, month: initialMonth, day: selectedDay } = parseDate(value);
+  const [currentYear, setCurrentYear] = React16.useState(initialYear);
+  const [currentMonth, setCurrentMonth] = React16.useState(initialMonth);
+  const getDaysInMonth = (year, month) => {
+    return new Date(year, month + 1, 0).getDate();
+  };
+  const getFirstDayOfMonth = (year, month) => {
+    return new Date(year, month, 1).getDay();
+  };
+  const handleDateSelect = (day) => {
+    if (disabled) return;
+    const formattedDate = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    onChange(formattedDate);
+  };
+  const handlePrevMonth = () => {
+    if (currentMonth === 0) {
+      setCurrentMonth(11);
+      setCurrentYear(currentYear - 1);
+    } else {
+      setCurrentMonth(currentMonth - 1);
+    }
+  };
+  const handleNextMonth = () => {
+    if (currentMonth === 11) {
+      setCurrentMonth(0);
+      setCurrentYear(currentYear + 1);
+    } else {
+      setCurrentMonth(currentMonth + 1);
+    }
+  };
+  const daysInMonth = getDaysInMonth(currentYear, currentMonth);
+  const firstDay = getFirstDayOfMonth(currentYear, currentMonth);
+  const days = [
+    ...Array(firstDay).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => i + 1)
+  ];
+  return /* @__PURE__ */ jsxs17("div", { className: "date-picker", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "date-picker__header", children: [
+      /* @__PURE__ */ jsx26(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handlePrevMonth,
+          disabled,
+          "aria-label": "Previous month",
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxs17("div", { className: "date-picker__title", children: [
+        /* @__PURE__ */ jsx26(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentMonth,
+            onChange: (e) => setCurrentMonth(Number(e.target.value)),
+            disabled,
+            children: MONTHS.map((month, idx) => /* @__PURE__ */ jsx26("option", { value: idx, children: month }, month))
+          }
+        ),
+        /* @__PURE__ */ jsx26(
+          "select",
+          {
+            className: "date-picker__select",
+            value: currentYear,
+            onChange: (e) => setCurrentYear(Number(e.target.value)),
+            disabled,
+            children: Array.from({ length: 100 }, (_, i) => currentYear - 50 + i).map((year) => /* @__PURE__ */ jsx26("option", { value: year, children: year }, year))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx26(
+        "button",
+        {
+          type: "button",
+          className: "date-picker__nav",
+          onClick: handleNextMonth,
+          disabled,
+          "aria-label": "Next month",
+          children: "\u203A"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx26("div", { className: "date-picker__weekdays", children: DAYS_OF_WEEK.map((day) => /* @__PURE__ */ jsx26("div", { className: "date-picker__weekday", children: day }, day)) }),
+    /* @__PURE__ */ jsx26("div", { className: "date-picker__days", children: days.map((day, idx) => /* @__PURE__ */ jsx26(
+      "button",
+      {
+        type: "button",
+        className: `date-picker__day ${day === selectedDay ? "date-picker__day--selected" : ""} ${!day ? "date-picker__day--empty" : ""}`,
+        onClick: () => day && handleDateSelect(day),
+        disabled: !day || disabled,
+        children: day || ""
+      },
+      idx
+    )) })
+  ] });
+};
+
+// src/components/input/TimePicker.tsx
+import * as React17 from "react";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var parseTime = (timeStr) => {
+  if (!timeStr) return { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 };
+  const parts = timeStr.split(":");
+  const hours = parseInt(parts[0] || "0", 10);
+  const minutes = parseInt(parts[1] || "0", 10);
+  const secondsParts = (parts[2] || "0").split(".");
+  const seconds = parseInt(secondsParts[0] || "0", 10);
+  const milliseconds = parseInt(secondsParts[1] || "0", 10);
+  return { hours, minutes, seconds, milliseconds };
+};
+var TimeColumn = ({
+  label,
+  value,
+  max,
+  field,
+  step,
+  disabled,
+  onChange
+}) => {
+  const items = Array.from({ length: Math.floor(max / step) + 1 }, (_, i) => i * step);
+  const columnRef = React17.useRef(null);
+  React17.useEffect(() => {
+    if (columnRef.current) {
+      const selected = columnRef.current.querySelector(".time-picker__item--selected");
+      if (selected) {
+        selected.scrollIntoView({ block: "center", behavior: "smooth" });
+      }
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs18("div", { className: "time-picker__column", children: [
+    /* @__PURE__ */ jsx27("div", { className: "time-picker__label", children: label }),
+    /* @__PURE__ */ jsx27("div", { className: "time-picker__scroll", ref: columnRef, children: items.map((item) => /* @__PURE__ */ jsx27(
+      "button",
+      {
+        type: "button",
+        className: `time-picker__item ${item === value ? "time-picker__item--selected" : ""}`,
+        onClick: () => onChange(field, item),
+        disabled,
+        children: String(item).padStart(field === "milliseconds" ? 3 : 2, "0")
+      },
+      item
+    )) })
+  ] });
+};
+var TimePicker = ({
+  value,
+  onChange,
+  disabled,
+  showMilliseconds = false,
+  minuteStep = 1
+}) => {
+  const [internalTime, setInternalTime] = React17.useState(value);
+  React17.useEffect(() => {
+    setInternalTime(value);
+  }, [value]);
+  const { hours, minutes, seconds, milliseconds } = parseTime(internalTime);
+  const handleChange = (field, newValue) => {
+    if (disabled) return;
+    const currentParsed = parseTime(internalTime);
+    const updated = { ...currentParsed, [field]: newValue };
+    let formattedTime = `${String(updated.hours).padStart(2, "0")}:${String(updated.minutes).padStart(2, "0")}:${String(updated.seconds).padStart(2, "0")}`;
+    if (showMilliseconds && updated.milliseconds > 0) {
+      formattedTime += `.${String(updated.milliseconds).padStart(3, "0")}`;
+    }
+    setInternalTime(formattedTime);
+    onChange(formattedTime);
+  };
+  return /* @__PURE__ */ jsxs18("div", { className: "time-picker", children: [
+    /* @__PURE__ */ jsx27(
+      TimeColumn,
+      {
+        label: "Hours",
+        value: hours,
+        max: 23,
+        field: "hours",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      TimeColumn,
+      {
+        label: "Minutes",
+        value: minutes,
+        max: 59,
+        field: "minutes",
+        step: minuteStep,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    /* @__PURE__ */ jsx27(
+      TimeColumn,
+      {
+        label: "Seconds",
+        value: seconds,
+        max: 59,
+        field: "seconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    ),
+    showMilliseconds && /* @__PURE__ */ jsx27(
+      TimeColumn,
+      {
+        label: "ms",
+        value: milliseconds,
+        max: 999,
+        field: "milliseconds",
+        step: 1,
+        disabled,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+// src/components/input/Input.tsx
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var TYPE_ICON_MAP = {
+  email: "mail",
+  password: "lock-closed",
+  search: "search",
+  date: "calendar",
+  time: "time",
+  "datetime-local": "calendar",
+  tel: "call",
+  url: "link"
+};
+var formatDisplayValue = (val, inputType) => {
+  if (!val) return "";
+  if (inputType === "date") {
+    const [year, month, day] = val.split("-");
+    return `${day}/${month}/${year}`;
+  }
+  if (inputType === "time") {
+    return val;
+  }
+  if (inputType === "datetime-local") {
+    const [datePart, timePart] = val.split("T");
+    if (datePart && timePart) {
+      const [year, month, day] = datePart.split("-");
+      return `${day}/${month}/${year} ${timePart}`;
+    }
+    return val;
+  }
+  return val;
+};
+var Input = React18.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    icon,
+    fullWidth = false,
+    size = "md",
+    className = "",
+    disabled,
+    id,
+    showMilliseconds = false,
+    minuteStep = 1,
+    showClear = true,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = React18.useState(false);
+    const [showDateTimePicker, setShowDateTimePicker] = React18.useState(false);
+    const inputRef = React18.useRef(null);
+    const leftIcon = icon || TYPE_ICON_MAP[type];
+    const isPasswordType = type === "password";
+    const actualType = isPasswordType && showPassword ? "text" : type !== "date" && type !== "time" && type !== "datetime-local" ? type : "text";
+    const isDateTimeType = type === "date" || type === "time" || type === "datetime-local";
+    const isSearchType = type === "search";
+    const hasValue = props.value && String(props.value).length > 0;
+    const rightIconName = isPasswordType ? showPassword ? "eye-off" : "eye" : isDateTimeType ? "chevron-down" : isSearchType && hasValue && showClear ? "x" : void 0;
+    const handleRightIconClick = () => {
+      if (isPasswordType) {
+        setShowPassword(!showPassword);
+      } else if (isDateTimeType) {
+        setShowDateTimePicker(!showDateTimePicker);
+      } else if (isSearchType && hasValue && showClear) {
+        if (props.onChange) {
+          props.onChange({ target: { value: "" } });
+        }
+      }
+    };
+    const handleDateTimeChange = (newValue) => {
+      if (props.onChange) {
+        props.onChange({ target: { value: newValue } });
+      }
+    };
+    if (!isDateTimeType) {
+      return /* @__PURE__ */ jsx28(
+        InputField,
+        {
+          ref: ref || inputRef,
+          type: actualType,
+          label,
+          helperText,
+          error,
+          icon: leftIcon,
+          iconRight: rightIconName,
+          onRightIconClick: handleRightIconClick,
+          fullWidth,
+          size,
+          className,
+          disabled,
+          id,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs19("div", { className: `input-container ${fullWidth ? "input-container--full-width" : ""} ${className}`.trim(), children: [
+      label && /* @__PURE__ */ jsx28("label", { htmlFor: id, className: "input__label", children: label }),
+      /* @__PURE__ */ jsx28(
+        Popover,
+        {
+          trigger: /* @__PURE__ */ jsx28(
+            InputField,
+            {
+              ref: ref || inputRef,
+              type: "text",
+              icon: leftIcon,
+              iconRight: rightIconName,
+              onRightIconClick: () => setShowDateTimePicker(!showDateTimePicker),
+              fullWidth,
+              size,
+              disabled,
+              id,
+              value: formatDisplayValue(String(props.value || ""), type),
+              placeholder: props.placeholder,
+              readOnly: true
+            }
+          ),
+          isOpen: showDateTimePicker,
+          onToggle: () => setShowDateTimePicker(!showDateTimePicker),
+          placement: "bottom",
+          children: /* @__PURE__ */ jsxs19("div", { style: { padding: "1rem" }, children: [
+            (type === "date" || type === "datetime-local") && /* @__PURE__ */ jsx28(
+              DatePicker,
+              {
+                value: String(props.value || "").split("T")[0],
+                onChange: (newDate) => {
+                  if (type === "datetime-local") {
+                    const time = String(props.value || "").split("T")[1] || "00:00:00";
+                    handleDateTimeChange(`${newDate}T${time}`);
+                  } else {
+                    handleDateTimeChange(newDate);
+                    setShowDateTimePicker(false);
+                  }
+                },
+                disabled
+              }
+            ),
+            (type === "time" || type === "datetime-local") && /* @__PURE__ */ jsx28(
+              TimePicker,
+              {
+                value: String(props.value || "").split("T")[1] || "00:00:00",
+                onChange: (newTime) => {
+                  if (type === "datetime-local") {
+                    const date = String(props.value || "").split("T")[0] || (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+                    handleDateTimeChange(`${date}T${newTime}`);
+                  } else {
+                    handleDateTimeChange(newTime);
+                  }
+                },
+                disabled,
+                showMilliseconds,
+                minuteStep
+              }
+            )
+          ] })
+        }
+      ),
+      error && /* @__PURE__ */ jsx28("p", { className: "input__message input__message--error", children: error }),
+      helperText && !error && /* @__PURE__ */ jsx28("p", { className: "input__message", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/input/InputText.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var InputText = React19.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx29(Input, { ref, ...props, type: "text" });
+});
+InputText.displayName = "InputText";
+
+// src/components/input/InputEmail.tsx
+import React20 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var InputEmail = React20.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx30(Input, { ref, ...props, type: "email" });
+});
+InputEmail.displayName = "InputEmail";
+
+// src/components/input/InputPassword.tsx
+import React21 from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var InputPassword = React21.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx31(Input, { ref, ...props, type: "password" });
+});
+InputPassword.displayName = "InputPassword";
+
+// src/components/input/InputSearch.tsx
+import React22 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var InputSearch = React22.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx32(Input, { ref, ...props, type: "search" });
+});
+InputSearch.displayName = "InputSearch";
+
+// src/components/input/InputTel.tsx
+import React23 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var InputTel = React23.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx33(Input, { ref, ...props, type: "tel" });
+});
+InputTel.displayName = "InputTel";
+
+// src/components/input/InputUrl.tsx
+import React24 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var InputUrl = React24.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx34(Input, { ref, ...props, type: "url" });
+});
+InputUrl.displayName = "InputUrl";
+
+// src/components/input/InputNumber.tsx
+import React25 from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var InputNumber = React25.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx35(Input, { ref, ...props, type: "number" });
+});
+InputNumber.displayName = "InputNumber";
+
+// src/components/input/InputDate.tsx
+import React26 from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var InputDate = React26.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx36(Input, { ref, ...props, type: "date" });
+});
+InputDate.displayName = "InputDate";
+
+// src/components/input/InputTime.tsx
+import React27 from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var InputTime = React27.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx37(Input, { ref, ...props, type: "time" });
+});
+InputTime.displayName = "InputTime";
+
+// src/components/input/InputDateTime.tsx
+import React28 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var InputDateTime = React28.forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx38(Input, { ref, ...props, type: "datetime-local" });
+});
+InputDateTime.displayName = "InputDateTime";
+
+// src/components/list/List.tsx
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var ListItem = ({
+  children,
+  icon,
+  selected = false,
+  disabled = false,
+  onClick,
+  category,
+  className = "",
+  ...props
+}) => {
+  const classes = [
+    "list-item",
+    selected && "list-item--selected",
+    disabled && "list-item--disabled",
+    onClick && !disabled && "list-item--interactive",
+    className
+  ].filter(Boolean).join(" ");
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!disabled && onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxs20(
+    "div",
+    {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx39("div", { className: "list-item__icon", children: /* @__PURE__ */ jsx39(Icon, { name: icon, size: 20 }) }),
+        /* @__PURE__ */ jsxs20("div", { className: "list-item__content", children: [
+          category && /* @__PURE__ */ jsx39("div", { className: "list-item__category", children: category }),
+          /* @__PURE__ */ jsx39("div", { children })
+        ] }),
+        selected && /* @__PURE__ */ jsx39("div", { className: "list-item__indicator", children: /* @__PURE__ */ jsx39(Icon, { name: "checkmark", size: 16 }) })
+      ]
+    }
+  );
+};
+var List = ({ children, className = "", ...props }) => {
+  const classes = ["list", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx39("div", { className: classes, role: "list", ...props, children });
+};
+
+// src/components/radio/Radio.tsx
+import React29 from "react";
+import { Radio as AriakitRadio, RadioGroup as AriakitRadioGroup, useRadioStore } from "@ariakit/react";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+var Radio = React29.forwardRef(
+  ({
+    size = "md",
+    label,
+    error = false,
+    disabled = false,
+    className,
+    ...props
+  }, ref) => {
+    const radioClasses = [
+      "radio",
+      `radio--${size}`,
+      error && "radio--error",
+      disabled && "radio--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs21("label", { className: radioClasses, children: [
+      /* @__PURE__ */ jsx40(
+        AriakitRadio,
+        {
+          ref,
+          disabled,
+          className: "radio__input",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx40("span", { className: "radio__box", children: /* @__PURE__ */ jsx40("span", { className: "radio__dot" }) }),
+      label && /* @__PURE__ */ jsx40("span", { className: "radio__label", children: label })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = React29.forwardRef(
+  ({
+    size = "md",
+    label,
+    error,
+    helperText,
+    children,
+    orientation = "vertical",
+    disabled = false,
+    className,
+    value,
+    onChange,
+    ...props
+  }, ref) => {
+    const groupClasses = [
+      "radio-group",
+      `radio-group--${orientation}`,
+      error && "radio-group--error",
+      disabled && "radio-group--disabled",
+      className
+    ].filter(Boolean).join(" ");
+    const radioGroupStore = useRadioStore({
+      value,
+      setValue: onChange
+    });
+    const childrenWithProps = React29.Children.map(children, (child) => {
+      if (React29.isValidElement(child) && child.type === Radio) {
+        return React29.cloneElement(child, {
+          size: child.props.size || size,
+          error: error ? true : child.props.error,
+          disabled: disabled || child.props.disabled
+        });
+      }
+      return child;
+    });
+    return /* @__PURE__ */ jsxs21("div", { className: groupClasses, children: [
+      label && /* @__PURE__ */ jsx40("div", { className: "radio-group__label", children: label }),
+      /* @__PURE__ */ jsx40(
+        AriakitRadioGroup,
+        {
+          ref,
+          store: radioGroupStore,
+          className: "radio-group__container",
+          ...props,
+          children: childrenWithProps
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsxs21("div", { className: "radio-group__feedback", children: [
+        error && /* @__PURE__ */ jsx40("span", { className: "radio-group__error-text", children: error }),
+        !error && helperText && /* @__PURE__ */ jsx40("span", { className: "radio-group__helper-text", children: helperText })
+      ] })
+    ] });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// src/components/select/Select.tsx
+import * as React30 from "react";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+var Select = ({
+  options,
+  value,
+  onChange,
+  label,
+  placeholder = "Select an option",
+  helperText,
+  error,
+  disabled = false,
+  fullWidth = false,
+  size = "md",
+  className = "",
+  id
+}) => {
+  const [isOpen, setIsOpen] = React30.useState(false);
+  const selectId = id || `select-${React30.useId()}`;
+  const selectedOption = options.find((opt) => opt.value === value);
+  const handleSelect = (optionValue) => {
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setIsOpen(!isOpen);
+    } else if (e.key === "Escape") {
+      setIsOpen(false);
+    } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+  };
+  const containerClasses = [
+    "select-container",
+    fullWidth && "select-container--full-width",
+    className
+  ].filter(Boolean).join(" ");
+  const triggerClasses = [
+    "select__trigger",
+    `select__trigger--${size}`,
+    error && "select__trigger--error",
+    disabled && "select__trigger--disabled",
+    isOpen && "select__trigger--open"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs22("div", { className: containerClasses, children: [
+    label && /* @__PURE__ */ jsx41("label", { htmlFor: selectId, className: "select__label", children: label }),
+    /* @__PURE__ */ jsx41(
+      Popover,
+      {
+        trigger: /* @__PURE__ */ jsxs22(
+          "button",
+          {
+            id: selectId,
+            type: "button",
+            className: triggerClasses,
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            onKeyDown: handleKeyDown,
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-labelledby": label ? `${selectId}-label` : void 0,
+            "aria-describedby": error ? `${selectId}-error` : helperText ? `${selectId}-helper` : void 0,
+            "aria-invalid": error ? "true" : "false",
+            children: [
+              /* @__PURE__ */ jsxs22("span", { className: "select__trigger-content", children: [
+                selectedOption?.icon && /* @__PURE__ */ jsx41(
+                  Icon,
+                  {
+                    name: selectedOption.icon,
+                    size: size === "sm" ? 16 : size === "lg" ? 24 : 20
+                  }
+                ),
+                /* @__PURE__ */ jsx41("span", { className: "select__trigger-text", children: selectedOption ? selectedOption.label : placeholder })
+              ] }),
+              /* @__PURE__ */ jsx41(
+                Icon,
+                {
+                  name: "chevron-down",
+                  size: size === "sm" ? 16 : size === "lg" ? 24 : 20,
+                  className: "select__trigger-icon"
+                }
+              )
+            ]
+          }
+        ),
+        isOpen,
+        onToggle: () => !disabled && setIsOpen(!isOpen),
+        placement: "bottom",
+        children: /* @__PURE__ */ jsx41("div", { className: "select__dropdown", role: "listbox", children: /* @__PURE__ */ jsx41(List, { children: options.map((option) => /* @__PURE__ */ jsx41(
+          ListItem,
+          {
+            icon: option.icon,
+            selected: option.value === value,
+            disabled: option.disabled,
+            onClick: () => !option.disabled && handleSelect(option.value),
+            role: "option",
+            "aria-selected": option.value === value,
+            children: option.label
+          },
+          option.value
+        )) }) })
+      }
+    ),
+    error && /* @__PURE__ */ jsx41("p", { id: `${selectId}-error`, className: "select__message select__message--error", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx41("p", { id: `${selectId}-helper`, className: "select__message", children: helperText })
+  ] });
+};
+
+// src/components/banner/Banner.tsx
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+var Banner = ({
+  type = "info",
+  children,
+  icon,
+  onDismiss
+}) => {
+  const defaultIcons = {
+    info: "information-circle",
+    warning: "warning",
+    error: "close-circle",
+    success: "checkmark-circle"
+  };
+  const displayIcon = icon || defaultIcons[type];
+  return /* @__PURE__ */ jsxs23("div", { className: `banner banner--${type}`, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "banner__content", children: [
+      /* @__PURE__ */ jsx42(Icon, { name: displayIcon, size: 32 }),
+      /* @__PURE__ */ jsx42("div", { className: "banner__message", children })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx42(
+      Button,
+      {
+        variant: "ghost",
+        size: "xs",
+        onClick: onDismiss,
+        "aria-label": "Dismiss banner",
+        children: /* @__PURE__ */ jsx42(Icon, { name: "close", size: 20 })
+      }
+    )
+  ] });
+};
+
+// src/components/floating-bar/floating-bar.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+var FloatingBar = ({
+  position = "bottom",
+  children,
+  className = "",
+  ...props
+}) => {
+  const classes = [
+    "floating-bar",
+    `floating-bar--${position}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx43("div", { className: "floating-bar__content", children })
+    }
+  );
+};
+
+// src/components/drawer/drawer.tsx
+import { Dialog, DialogHeading } from "@ariakit/react";
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var Drawer = ({
+  children,
+  title,
+  placement = "right",
+  size = "400px",
+  store,
+  ...props
+}) => {
+  const sizeValue = typeof size === "number" ? `${size}px` : size;
+  const getDrawerStyles = () => {
+    const baseStyles = {
+      zIndex: 1e3
+    };
+    switch (placement) {
+      case "top":
+        return {
+          ...baseStyles,
+          height: sizeValue
+        };
+      case "bottom":
+        return {
+          ...baseStyles,
+          height: sizeValue
+        };
+      case "left":
+        return {
+          ...baseStyles,
+          width: sizeValue
+        };
+      case "right":
+      default:
+        return {
+          ...baseStyles,
+          width: sizeValue
+        };
+    }
+  };
+  return /* @__PURE__ */ jsx44(
+    Dialog,
+    {
+      store,
+      ...props,
+      className: `drawer drawer--${placement}`,
+      style: getDrawerStyles(),
+      backdrop: /* @__PURE__ */ jsx44("div", { className: "drawer__backdrop" }),
+      children: /* @__PURE__ */ jsxs24("div", { className: "drawer__content", children: [
+        title && /* @__PURE__ */ jsxs24("div", { className: "drawer__header", children: [
+          /* @__PURE__ */ jsx44(DialogHeading, { className: "drawer__title", children: title }),
+          /* @__PURE__ */ jsx44(
+            "button",
+            {
+              className: "drawer__close",
+              onClick: store.hide,
+              "aria-label": "Close drawer",
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx44("div", { className: "drawer__body", children })
+      ] })
+    }
+  );
+};
+
+// src/components/table/Table.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+var Table = ({
+  bordered = false,
+  striped = true,
+  hover = true,
+  size = "md",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    "table",
+    bordered && "table--bordered",
+    striped && "table--striped",
+    hover && "table--hover",
+    size && `table--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx45("table", { className: classes, ...props, children });
+};
+var TableHead = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__head", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx45("thead", { className: classes, ...props, children });
+};
+var TableBody = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__body", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx45("tbody", { className: classes, ...props, children });
+};
+var TableRow = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table__row", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx45("tr", { className: classes, ...props, children });
+};
+var TableCell = ({
+  header = false,
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = [
+    header ? "table__cell--header" : "table__cell",
+    className
+  ].filter(Boolean).join(" ");
+  if (header) {
+    return /* @__PURE__ */ jsx45("th", { className: classes, ...props, children });
+  }
+  return /* @__PURE__ */ jsx45("td", { className: classes, ...props, children });
+};
+var TableContainer = ({
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = ["table-container", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx45("div", { className: classes, ...props, children });
+};
+
+// src/components/page-index/PageIndex.tsx
+import * as React31 from "react";
+import { jsx as jsx46, jsxs as jsxs25 } from "react/jsx-runtime";
+var PageIndex = ({
+  title = "On this page",
+  collapsed = false,
+  className = "",
+  ...props
+}) => {
+  const [items, setItems] = React31.useState([]);
+  const [activeId, setActiveId] = React31.useState("");
+  const [manualNavigation, setManualNavigation] = React31.useState(false);
+  const getTextContent = React31.useCallback((element) => {
+    if (element.tagName.match(/^H[1-6]$/)) {
+      return element.textContent || "";
+    }
+    return element.getAttribute("data-page-index-title") || element.getAttribute("title") || element.textContent || "";
+  }, []);
+  const generateId = React31.useCallback((text) => {
+    return text.toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").trim();
+  }, []);
+  const scanPage = React31.useCallback(() => {
+    const newItems = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const pages = document.querySelectorAll("main");
+    pages.forEach((page) => {
+      const pageElement = page;
+      if (pageElement.closest(".page-index")) {
+        return;
+      }
+      const sections = pageElement.querySelectorAll("section");
+      sections.forEach((section) => {
+        const sectionElement = section;
+        if (sectionElement.closest(".page-index")) {
+          return;
+        }
+        const childElements = Array.from(sectionElement.children);
+        const headings = childElements.filter(
+          (child) => child.tagName.match(/^H[1-6]$/)
+        );
+        headings.forEach((element) => {
+          const text = getTextContent(element);
+          if (text.trim()) {
+            if (element.closest('.component-preview, [data-demo], .demo, .example, .drawer, [role="dialog"]')) {
+              return;
+            }
+            const id = element.id || generateId(text);
+            if (seenIds.has(id)) {
+              return;
+            }
+            seenIds.add(id);
+            if (!element.id) {
+              element.id = id;
+            }
+            const tagName = element.tagName.toLowerCase();
+            const level = parseInt(tagName.substring(1));
+            newItems.push({
+              id,
+              title: text.trim(),
+              level,
+              element
+            });
+          }
+        });
+      });
+    });
+    newItems.sort((a, b) => {
+      const aRect = a.element.getBoundingClientRect();
+      const bRect = b.element.getBoundingClientRect();
+      return aRect.top - bRect.top;
+    });
+    setItems(newItems);
+  }, [getTextContent, generateId]);
+  React31.useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (manualNavigation) return;
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: "-80px 0px -80% 0px",
+        threshold: 0
+      }
+    );
+    items.forEach((item) => {
+      observer.observe(item.element);
+    });
+    return () => {
+      items.forEach((item) => {
+        observer.unobserve(item.element);
+      });
+    };
+  }, [items, manualNavigation]);
+  React31.useEffect(() => {
+    const timer = setTimeout(() => {
+      scanPage();
+    }, 100);
+    const handleLocationChange = () => {
+      setTimeout(() => {
+        scanPage();
+      }, 150);
+    };
+    window.addEventListener("popstate", handleLocationChange);
+    window.addEventListener("locationchange", handleLocationChange);
+    const observer = new MutationObserver(() => {
+      clearTimeout(timer);
+      setTimeout(() => {
+        scanPage();
+      }, 200);
+    });
+    const mainContent = document.querySelector("main") || document.body;
+    observer.observe(mainContent, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-section-title", "id"]
+    });
+    return () => {
+      clearTimeout(timer);
+      window.removeEventListener("popstate", handleLocationChange);
+      window.removeEventListener("locationchange", handleLocationChange);
+      observer.disconnect();
+    };
+  }, [scanPage]);
+  const handleItemClick = React31.useCallback((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      setManualNavigation(true);
+      setActiveId(id);
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      setTimeout(() => {
+        setManualNavigation(false);
+      }, 1e3);
+    }
+  }, []);
+  const classes = [
+    "page-index",
+    collapsed && "page-index--collapsed",
+    className
+  ].filter(Boolean).join(" ");
+  if (items.length === 0) {
+    return null;
+  }
+  const { sidebarWidth, setSidebarWidth, ...domProps } = props;
+  return /* @__PURE__ */ jsxs25("div", { className: classes, ...domProps, children: [
+    !collapsed && /* @__PURE__ */ jsx46("h3", { className: "page-index__title", children: title }),
+    /* @__PURE__ */ jsx46("nav", { className: "page-index__nav", "aria-label": "Page contents", children: /* @__PURE__ */ jsx46("ul", { className: "page-index__list", children: items.map((item) => /* @__PURE__ */ jsx46(
+      "li",
+      {
+        className: `page-index__item page-index__item--level-${item.level}`,
+        children: /* @__PURE__ */ jsx46(
+          "button",
+          {
+            className: `page-index__link ${activeId === item.id ? "page-index__link--active" : ""}`,
+            onClick: () => handleItemClick(item.id),
+            "aria-current": activeId === item.id ? "location" : void 0,
+            children: collapsed ? /* @__PURE__ */ jsx46("span", { className: "page-index__link-text--collapsed", children: item.title.charAt(0) }) : item.title
+          }
+        )
+      },
+      item.id
+    )) }) })
+  ] });
+};
+export {
+  Badge,
+  Banner,
+  Button,
+  Card,
+  Checkbox,
+  CodeBlock,
+  ColorControl,
+  DragHandle,
+  Drawer,
+  FloatingBar,
+  Footer,
+  Grid,
+  Header,
+  Icon,
+  InputDate,
+  InputDateTime,
+  InputEmail,
+  InputNumber,
+  InputPassword,
+  InputSearch,
+  InputTel,
+  InputText,
+  InputTime,
+  InputUrl,
+  Layout,
+  List,
+  ListItem,
+  MenuCategory,
+  MenuGroup,
+  MenuItem,
+  Navbar,
+  NavbarTooltipProvider,
+  Page,
+  PageIndex,
+  Popover,
+  Radio,
+  RadioGroup,
+  Section,
+  Select,
+  Slider,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  ThemeControl,
+  Tooltip,
+  applyTheme,
+  clearPreferences,
+  clearPreferencesAsync,
+  configurePreferences,
+  createPreferenceNamespace,
+  exportPreferences,
+  getAllPreferences,
+  getPreference,
+  getPreferenceAsync,
+  getSavedTheme,
+  getTheme,
+  importPreferences,
+  initializeTheme,
+  onSystemThemeChange,
+  removePreference,
+  removePreferenceAsync,
+  setPreference,
+  setPreferenceAsync,
+  setTheme,
+  toggleTheme,
+  useNavbarTooltip
+};
+//# sourceMappingURL=index.mjs.map