@tomny-dev/uzi 0.1.0

package/dist/index.cjs

@@ -0,0 +1,715 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppShell: () => AppShell,
+  Button: () => Button,
+  Card: () => Card,
+  Dropdown: () => Dropdown,
+  Modal: () => Modal,
+  Pill: () => Pill,
+  SidebarNav: () => SidebarNav,
+  ToastProvider: () => ToastProvider,
+  cx: () => cx,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/cx.ts
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+
+// src/components/button/button.module.css
+var button_default = {};
+
+// src/components/button/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button({
+  as,
+  variant = "primary",
+  size = "md",
+  className,
+  children,
+  ...rest
+}) {
+  const classes = cx(
+    button_default.button,
+    button_default[`variant-${variant}`],
+    button_default[`size-${size}`],
+    className
+  );
+  if (as === "a") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: classes, ...rest, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      className: classes,
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/components/card/card.module.css
+var card_default = {};
+
+// src/components/card/Card.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Card({
+  as,
+  tone = "default",
+  padding = "md",
+  interactive = false,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as ?? "div";
+  const toneClass = tone !== "default" ? card_default[`tone-${tone}`] : null;
+  const classes = cx(
+    card_default.card,
+    toneClass,
+    card_default[`padding-${padding}`],
+    interactive && card_default.interactive,
+    className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { className: classes, ...rest, children });
+}
+
+// src/components/pill/pill.module.css
+var pill_default = {};
+
+// src/components/pill/Pill.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Pill({
+  as,
+  tone = "neutral",
+  size = "md",
+  icon,
+  className,
+  children,
+  ...rest
+}) {
+  const Component = as ?? "span";
+  const classes = cx(pill_default.pill, pill_default[`tone-${tone}`], pill_default[`size-${size}`], className);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Component, { className: classes, ...rest, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: pill_default.icon, "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: pill_default.content, children })
+  ] });
+}
+
+// src/components/modal/Modal.tsx
+var import_react = require("react");
+
+// src/components/modal/modal.module.css
+var modal_default = {};
+
+// src/components/modal/Modal.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
+  const mouseDownOnBackdrop = (0, import_react.useRef)(false);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: modal_default.backdrop,
+      onMouseDown: (e) => {
+        mouseDownOnBackdrop.current = e.target === e.currentTarget;
+      },
+      onMouseUp: (e) => {
+        if (mouseDownOnBackdrop.current && e.target === e.currentTarget) onClose();
+        mouseDownOnBackdrop.current = false;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cx(modal_default.modal, modal_default[`size-${size}`]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: modal_default.header, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: modal_default.titles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: modal_default.title, children: title }),
+            subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: modal_default.subtitle, children: subtitle })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: modal_default.closeButton, onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: modal_default.body, children }),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: modal_default.footer, children: footer })
+      ] })
+    }
+  );
+}
+
+// src/components/toast/ToastContext.tsx
+var import_react2 = require("react");
+
+// src/components/toast/toast.module.css
+var toast_default = {};
+
+// src/components/toast/ToastContext.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var DEFAULT_CONFIG = {
+  position: "top-right",
+  maxToasts: 5,
+  defaultDuration: 4e3,
+  pauseOnHover: true,
+  pauseOnFocusLoss: true
+};
+var ToastContext = (0, import_react2.createContext)(void 0);
+var toastIdCounter = 0;
+var generateToastId = () => `toast-${++toastIdCounter}-${Date.now()}`;
+function ToastProvider({
+  children,
+  config
+}) {
+  const [toasts, setToasts] = (0, import_react2.useState)([]);
+  const [isPaused, setIsPaused] = (0, import_react2.useState)(false);
+  const merged = (0, import_react2.useMemo)(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
+  const push = (0, import_react2.useCallback)(
+    (message, options = {}) => {
+      const id = generateToastId();
+      setToasts((prev) => {
+        const next = [
+          ...prev,
+          {
+            id,
+            message,
+            type: options.type ?? "info",
+            duration: options.duration ?? (options.type === "error" ? 6e3 : merged.defaultDuration),
+            dismissible: options.dismissible ?? true,
+            action: options.action
+          }
+        ];
+        if (next.length > merged.maxToasts) next.shift();
+        return next;
+      });
+      return id;
+    },
+    [merged.defaultDuration, merged.maxToasts]
+  );
+  const success = (0, import_react2.useCallback)(
+    (message, options) => push(message, { ...options, type: "success" }),
+    [push]
+  );
+  const error = (0, import_react2.useCallback)(
+    (message, options) => push(message, { ...options, type: "error", duration: options?.duration ?? 6e3 }),
+    [push]
+  );
+  const warning = (0, import_react2.useCallback)(
+    (message, options) => push(message, { ...options, type: "warning" }),
+    [push]
+  );
+  const info = (0, import_react2.useCallback)(
+    (message, options) => push(message, { ...options, type: "info" }),
+    [push]
+  );
+  const dismiss = (0, import_react2.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = (0, import_react2.useCallback)(() => setToasts([]), []);
+  (0, import_react2.useEffect)(() => {
+    if (!merged.pauseOnFocusLoss) return;
+    const handleVisibility = () => setIsPaused(document.visibilityState !== "visible");
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, [merged.pauseOnFocusLoss]);
+  const value = (0, import_react2.useMemo)(
+    () => ({ toasts, push, success, error, warning, info, dismiss, dismissAll }),
+    [toasts, push, success, error, warning, info, dismiss, dismissAll]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ToastContext.Provider, { value, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ToastContainer,
+      {
+        toasts,
+        position: merged.position,
+        pauseOnHover: merged.pauseOnHover,
+        isPaused,
+        onDismiss: dismiss,
+        onPauseChange: setIsPaused
+      }
+    )
+  ] });
+}
+function useToast() {
+  const ctx = (0, import_react2.useContext)(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
+function ToastContainer({
+  toasts,
+  position,
+  pauseOnHover,
+  isPaused,
+  onDismiss,
+  onPauseChange
+}) {
+  const posClass = (() => {
+    switch (position) {
+      case "top-left":
+        return toast_default.topLeft;
+      case "top-center":
+        return toast_default.topCenter;
+      case "bottom-right":
+        return toast_default.bottomRight;
+      case "bottom-left":
+        return toast_default.bottomLeft;
+      case "bottom-center":
+        return toast_default.bottomCenter;
+      case "top-right":
+      default:
+        return toast_default.topRight;
+    }
+  })();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      className: cx(toast_default.stack, posClass),
+      role: "presentation",
+      onMouseEnter: () => pauseOnHover && onPauseChange(true),
+      onMouseLeave: () => pauseOnHover && onPauseChange(false),
+      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id))
+    }
+  );
+}
+function ToastItem({
+  toast,
+  isPaused,
+  onDismiss
+}) {
+  const [exiting, setExiting] = (0, import_react2.useState)(false);
+  const timerRef = (0, import_react2.useRef)(null);
+  const startRef = (0, import_react2.useRef)(0);
+  const remainingRef = (0, import_react2.useRef)(toast.duration ?? 0);
+  const palette = getPalette(toast.type);
+  const styleVars = {
+    ["--toast-bg"]: palette.background,
+    ["--toast-border"]: palette.border,
+    ["--toast-text"]: palette.text,
+    ["--toast-button-bg"]: palette.buttonBg,
+    ["--toast-button-border"]: palette.buttonBorder,
+    ["--toast-action-bg"]: palette.actionBg,
+    ["--toast-action-border"]: palette.actionBorder
+  };
+  const stopTimer = () => {
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+  const triggerDismiss = (0, import_react2.useCallback)(() => {
+    setExiting(true);
+    stopTimer();
+    window.setTimeout(() => onDismiss(toast.id), 160);
+  }, [onDismiss, toast.id]);
+  const schedule = (0, import_react2.useCallback)(
+    (delay) => {
+      if (!delay || delay <= 0) {
+        triggerDismiss();
+        return;
+      }
+      startRef.current = performance.now();
+      stopTimer();
+      timerRef.current = window.setTimeout(() => triggerDismiss(), delay);
+    },
+    [triggerDismiss]
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!toast.duration || toast.duration <= 0) return void 0;
+    schedule(toast.duration);
+    return stopTimer;
+  }, [schedule, toast.duration]);
+  (0, import_react2.useEffect)(() => {
+    if (!toast.duration || toast.duration <= 0) return;
+    if (isPaused) {
+      const elapsed = performance.now() - startRef.current;
+      remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+      stopTimer();
+    } else {
+      schedule(remainingRef.current);
+    }
+  }, [isPaused, schedule, toast.duration]);
+  const icon = getIcon(toast.type);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx(toast_default.toast, exiting && toast_default.exit), style: styleVars, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: toast_default.icon, "aria-hidden": true, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: toast_default.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: toast_default.message, children: toast.message }),
+      toast.action && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: toast_default.actions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          className: toast_default.actionButton,
+          onClick: () => {
+            toast.action?.onClick();
+            triggerDismiss();
+          },
+          children: toast.action.label
+        }
+      ) })
+    ] }),
+    toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: toast_default.closeButton,
+        onClick: triggerDismiss,
+        "aria-label": "Dismiss notification",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M11 3L3 11M3 3l8 8",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ) })
+      }
+    )
+  ] });
+}
+function getPalette(type) {
+  switch (type) {
+    case "success":
+      return {
+        background: "#22c55e",
+        border: "#16a34a",
+        text: "#0b1224",
+        buttonBg: "rgba(0, 0, 0, 0.08)",
+        buttonBorder: "rgba(0, 0, 0, 0.2)",
+        actionBg: "rgba(0, 0, 0, 0.1)",
+        actionBorder: "rgba(0, 0, 0, 0.2)"
+      };
+    case "error":
+      return {
+        background: "#f87171",
+        border: "#ef4444",
+        text: "#0b1224",
+        buttonBg: "rgba(0, 0, 0, 0.08)",
+        buttonBorder: "rgba(0, 0, 0, 0.2)",
+        actionBg: "rgba(0, 0, 0, 0.1)",
+        actionBorder: "rgba(0, 0, 0, 0.2)"
+      };
+    case "warning":
+      return {
+        background: "#fbbf24",
+        border: "#f59e0b",
+        text: "#0b1224",
+        buttonBg: "rgba(0, 0, 0, 0.08)",
+        buttonBorder: "rgba(0, 0, 0, 0.2)",
+        actionBg: "rgba(0, 0, 0, 0.1)",
+        actionBorder: "rgba(0, 0, 0, 0.2)"
+      };
+    case "info":
+    default:
+      return {
+        background: "#38bdf8",
+        border: "#0ea5e9",
+        text: "#0b1224",
+        buttonBg: "rgba(0, 0, 0, 0.08)",
+        buttonBorder: "rgba(0, 0, 0, 0.2)",
+        actionBg: "rgba(0, 0, 0, 0.1)",
+        actionBorder: "rgba(0, 0, 0, 0.2)"
+      };
+  }
+}
+function getIcon(type) {
+  switch (type) {
+    case "success":
+      return "OK";
+    case "error":
+      return "X";
+    case "warning":
+      return "!";
+    case "info":
+    default:
+      return "i";
+  }
+}
+
+// src/components/dropdown/Dropdown.tsx
+var import_react3 = require("react");
+
+// src/components/dropdown/dropdown.module.css
+var dropdown_default = {};
+
+// src/components/dropdown/Dropdown.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Dropdown({
+  options,
+  value,
+  onChange,
+  placeholder = "All",
+  className,
+  allowClear = true,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = (0, import_react3.useState)(false);
+  const ref = (0, import_react3.useRef)(null);
+  const selected = options.find((o) => o.value === value);
+  const isActive = allowClear && value !== "";
+  (0, import_react3.useEffect)(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cx(dropdown_default.wrapper, className), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: cx(dropdown_default.trigger, isActive && dropdown_default["trigger-active"]),
+        onClick: () => setOpen((o) => !o),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        children: [
+          selected ? selected.label : placeholder,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cx(dropdown_default.chevron, open && dropdown_default["chevron-open"]), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M2 3.5L5 6.5L8 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: dropdown_default.menu, children: [
+      allowClear && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cx(dropdown_default.option, value === "" && dropdown_default["option-selected"]),
+          onClick: () => {
+            onChange("");
+            setOpen(false);
+          },
+          children: placeholder
+        }
+      ),
+      options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cx(dropdown_default.option, value === opt.value && dropdown_default["option-selected"]),
+          onClick: () => {
+            onChange(opt.value);
+            setOpen(false);
+          },
+          children: opt.label
+        },
+        opt.value
+      ))
+    ] })
+  ] });
+}
+
+// src/components/app-shell/AppShell.tsx
+var import_react4 = require("react");
+
+// src/components/app-shell/app-shell.module.css
+var app_shell_default = {};
+
+// src/components/app-shell/AppShell.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var DESKTOP_BREAKPOINT = 960;
+function getIsDesktop() {
+  if (typeof window === "undefined") return false;
+  return window.innerWidth >= DESKTOP_BREAKPOINT;
+}
+function AppShell({
+  children,
+  sidebar,
+  brand,
+  brandHref,
+  topbarStart,
+  topbarEnd,
+  className,
+  sidebarClassName,
+  topbarClassName,
+  mainClassName,
+  sidebarWidth,
+  closeSidebarOnChangeKey,
+  hamburgerLabel = "Toggle navigation",
+  onSidebarToggle
+}) {
+  const [isDesktop, setIsDesktop] = (0, import_react4.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react4.useState)(false);
+  const prevIsDesktopRef = (0, import_react4.useRef)(false);
+  const closeKeyRef = (0, import_react4.useRef)(closeSidebarOnChangeKey);
+  const sidebarRef = (0, import_react4.useRef)(null);
+  const hamburgerRef = (0, import_react4.useRef)(null);
+  const mainRef = (0, import_react4.useRef)(null);
+  const sidebarId = (0, import_react4.useId)();
+  (0, import_react4.useEffect)(() => {
+    const desktop = getIsDesktop();
+    setIsDesktop(desktop);
+    setSidebarOpen(desktop);
+    prevIsDesktopRef.current = desktop;
+    const handleResize = () => {
+      const nowDesktop = getIsDesktop();
+      setIsDesktop(nowDesktop);
+      if (nowDesktop !== prevIsDesktopRef.current) {
+        setSidebarOpen(nowDesktop);
+        prevIsDesktopRef.current = nowDesktop;
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (isDesktop || !sidebarOpen) return;
+    const mainElement = mainRef.current;
+    const closeSidebar = () => setSidebarOpen(false);
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (sidebarRef.current?.contains(target)) return;
+      if (hamburgerRef.current?.contains(target)) return;
+      closeSidebar();
+    };
+    const timeoutId = window.setTimeout(() => {
+      document.addEventListener("pointerdown", onPointerDown);
+      window.addEventListener("scroll", closeSidebar, { passive: true });
+      mainElement?.addEventListener("scroll", closeSidebar, { passive: true });
+      document.addEventListener("touchmove", closeSidebar, { passive: true });
+    }, 10);
+    return () => {
+      window.clearTimeout(timeoutId);
+      document.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("scroll", closeSidebar);
+      mainElement?.removeEventListener("scroll", closeSidebar);
+      document.removeEventListener("touchmove", closeSidebar);
+    };
+  }, [sidebarOpen, isDesktop]);
+  (0, import_react4.useEffect)(() => {
+    if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
+      setSidebarOpen(false);
+    }
+    closeKeyRef.current = closeSidebarOnChangeKey;
+  }, [closeSidebarOnChangeKey, isDesktop]);
+  (0, import_react4.useEffect)(() => {
+    onSidebarToggle?.(sidebarOpen);
+  }, [sidebarOpen, onSidebarToggle]);
+  const toggleSidebar = () => setSidebarOpen((open) => !open);
+  const sidebarWidthValue = sidebarWidth === void 0 ? void 0 : typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
+  const shellStyle = sidebarWidthValue ? { ["--app-shell-sidebar-width"]: sidebarWidthValue } : void 0;
+  const shellClasses = cx(
+    app_shell_default.shell,
+    sidebarOpen ? app_shell_default.sidebarOpen : app_shell_default.sidebarCollapsed,
+    className
+  );
+  const sidebarClasses = cx(app_shell_default.sidebar, sidebarOpen && app_shell_default.open, sidebarClassName);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: shellClasses,
+      style: shellStyle,
+      "data-app-shell": true,
+      "data-desktop": isDesktop ? "true" : "false",
+      "data-sidebar-open": sidebarOpen ? "true" : "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { className: cx(app_shell_default.topbar, topbarClassName), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: app_shell_default.topbarLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                ref: hamburgerRef,
+                type: "button",
+                className: app_shell_default.hamburger,
+                onClick: toggleSidebar,
+                "aria-label": hamburgerLabel,
+                "aria-expanded": sidebarOpen,
+                "aria-controls": sidebarId,
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) })
+              }
+            ),
+            brand && (brandHref ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { className: app_shell_default.brand, href: brandHref, children: brand }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: app_shell_default.brand, children: brand })),
+            topbarStart && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: app_shell_default.topbarStart, children: topbarStart })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: app_shell_default.topbarRight, children: topbarEnd })
+        ] }),
+        !isDesktop && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: app_shell_default.backdrop, onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("main", { ref: mainRef, className: cx(app_shell_default.main, mainClassName), children })
+      ]
+    }
+  );
+}
+
+// src/components/sidebar-nav/sidebar-nav.module.css
+var sidebar_nav_default = {};
+
+// src/components/sidebar-nav/SidebarNav.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var defaultIsActive = (item, path) => {
+  if (item.active !== void 0) return item.active;
+  if (!path) return false;
+  if (item.href === "/") return path === "/";
+  return path.startsWith(item.href);
+};
+function SidebarNav({
+  items,
+  currentPath,
+  getIsActive = defaultIsActive,
+  onItemClick,
+  className,
+  itemClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { className: cx(sidebar_nav_default.nav, className), "aria-label": "Sidebar navigation", children: items.map((item) => {
+    const active = getIsActive(item, currentPath);
+    const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "a",
+      {
+        className: cx(sidebar_nav_default.item, active && sidebar_nav_default.active, itemClassName),
+        href: item.href,
+        target: item.target,
+        rel,
+        "aria-current": active ? "page" : void 0,
+        onClick: () => {
+          item.onClick?.();
+          onItemClick?.(item);
+        },
+        children: [
+          item.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: sidebar_nav_default.icon, children: item.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: sidebar_nav_default.label, children: item.label }),
+          item.badge && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: sidebar_nav_default.badge, children: item.badge })
+        ]
+      },
+      item.href
+    );
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  Button,
+  Card,
+  Dropdown,
+  Modal,
+  Pill,
+  SidebarNav,
+  ToastProvider,
+  cx,
+  useToast
+});
+//# sourceMappingURL=index.cjs.map