@tomny-dev/uzi 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -1,8 +1,10 @@
 "use client";
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,24 +18,61 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Alert: () => Alert,
   AppShell: () => AppShell,
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarImage: () => AvatarImage,
   Button: () => Button,
   Card: () => Card,
+  Checkbox: () => Checkbox,
   Dropdown: () => Dropdown,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuPortal: () => DropdownMenuPortal,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRadioItem: () => DropdownMenuRadioItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  Input: () => Input,
+  Label: () => Label,
   Modal: () => Modal,
+  ModalOverlay: () => ModalOverlay,
   Pill: () => Pill,
   SidebarNav: () => SidebarNav,
+  ThemeProvider: () => ThemeProvider,
+  ThemeToggleButton: () => ThemeToggleButton,
   ToastProvider: () => ToastProvider,
+  TopBar: () => TopBar,
   cx: () => cx,
+  useTheme: () => useTheme,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/button/Button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+
 // src/utils/cx.ts
 function cx(...values) {
   return values.filter(Boolean).join(" ");
@@ -44,22 +83,49 @@ var button_default = {};
 
 // src/components/button/Button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var variantClass = {
+  default: button_default["variant-primary"],
+  primary: button_default["variant-primary"],
+  secondary: button_default["variant-secondary"],
+  outline: button_default["variant-outline"],
+  ghost: button_default["variant-ghost"],
+  destructive: button_default["variant-destructive"],
+  link: button_default["variant-link"]
+};
+var sizeClass = {
+  default: button_default["size-md"],
+  sm: button_default["size-sm"],
+  md: button_default["size-md"],
+  lg: button_default["size-lg"],
+  icon: button_default["size-icon"]
+};
 function Button({
   as,
-  variant = "primary",
-  size = "md",
+  variant = "default",
+  size = "default",
   className,
   children,
+  asChild = false,
   ...rest
 }) {
   const classes = cx(
     button_default.button,
-    button_default[`variant-${variant}`],
-    button_default[`size-${size}`],
+    variantClass[variant],
+    sizeClass[size],
     className
   );
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slot, { className: classes, ...rest, children });
+  }
   if (as === "a") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: classes, ...rest, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "a",
+      {
+        className: classes,
+        ...rest,
+        children
+      }
+    );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
@@ -72,11 +138,57 @@ function Button({
   );
 }
 
+// src/components/avatar/Avatar.tsx
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+
+// src/components/avatar/avatar.module.css
+var avatar_default = {};
+
+// src/components/avatar/Avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Avatar({
+  className,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AvatarPrimitive.Root,
+    {
+      className: cx(avatar_default.avatar, avatar_default[`size-${size}`], className),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AvatarPrimitive.Image,
+    {
+      className: cx(avatar_default.image, className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    AvatarPrimitive.Fallback,
+    {
+      className: cx(avatar_default.fallback, className),
+      ...props
+    }
+  );
+}
+
 // src/components/card/card.module.css
 var card_default = {};
 
 // src/components/card/Card.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Card({
   as,
   tone = "default",
@@ -95,14 +207,14 @@ function Card({
     interactive && card_default.interactive,
     className
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { className: classes, ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Pill({
   as,
   tone = "neutral",
@@ -114,9 +226,9 @@ function Pill({
 }) {
   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 })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Component, { className: classes, ...rest, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: pill_default.icon, "aria-hidden": "true", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: pill_default.content, children })
   ] });
 }
 
@@ -127,14 +239,27 @@ var import_react = require("react");
 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 }) {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ModalOverlay({ open, onClose, className, children }) {
   const mouseDownOnBackdrop = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: modal_default.backdrop,
+      className: cx(modal_default.backdrop, className),
+      role: "dialog",
+      "aria-modal": "true",
       onMouseDown: (e) => {
         mouseDownOnBackdrop.current = e.target === e.currentTarget;
       },
@@ -142,23 +267,35 @@ function Modal({ open, onClose, title, subtitle, size = "md", children, footer }
         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 })
-      ] })
+      children
     }
   );
 }
+function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalOverlay, { open, onClose, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cx(modal_default.modal, modal_default[`size-${size}`]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: modal_default.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: modal_default.titles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: modal_default.title, children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: modal_default.subtitle, children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: modal_default.closeButton, onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime5.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_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: modal_default.body, children }),
+    footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: modal_default.footer, children: footer })
+  ] }) });
+}
+
+// src/components/alert/alert.module.css
+var alert_default = {};
+
+// src/components/alert/Alert.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Alert({ tone, children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cx(alert_default.alert, alert_default[tone], className), role: "alert", children });
+}
 
 // src/components/toast/ToastContext.tsx
 var import_react2 = require("react");
@@ -167,7 +304,7 @@ var import_react2 = require("react");
 var toast_default = {};
 
 // src/components/toast/ToastContext.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_CONFIG = {
   position: "top-right",
   maxToasts: 5,
@@ -237,9 +374,9 @@ function ToastProvider({
     () => ({ 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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ToastContainer,
       {
         toasts,
@@ -282,14 +419,14 @@ function ToastContainer({
         return toast_default.topRight;
     }
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.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))
+      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id))
     }
   );
 }
@@ -351,11 +488,11 @@ function ToastItem({
     }
   }, [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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx(toast_default.toast, exiting && toast_default.exit), style: styleVars, role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: toast_default.icon, "aria-hidden": true, children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: toast_default.body, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: toast_default.message, children: toast.message }),
+      toast.action && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: toast_default.actions, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -368,14 +505,14 @@ function ToastItem({
         }
       ) })
     ] }),
-    toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime7.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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "path",
           {
             d: "M11 3L3 11M3 3l8 8",
@@ -447,6 +584,65 @@ function getIcon(type) {
   }
 }
 
+// src/components/input/Input.tsx
+var React = __toESM(require("react"), 1);
+
+// src/components/input/input.module.css
+var input_default = {};
+
+// src/components/input/Input.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "input",
+      {
+        ref,
+        type,
+        className: cx(input_default.input, className),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/components/label/Label.tsx
+var React2 = __toESM(require("react"), 1);
+
+// src/components/label/label.module.css
+var label_default = {};
+
+// src/components/label/Label.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Label = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { ref, className: cx(label_default.label, className), ...props })
+);
+Label.displayName = "Label";
+
+// src/components/checkbox/Checkbox.tsx
+var React3 = __toESM(require("react"), 1);
+
+// src/components/checkbox/checkbox.module.css
+var checkbox_default = {};
+
+// src/components/checkbox/Checkbox.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Checkbox = React3.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        className: cx(checkbox_default.checkbox, className),
+        ...props
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
 // src/components/dropdown/Dropdown.tsx
 var import_react3 = require("react");
 
@@ -454,7 +650,7 @@ var import_react3 = require("react");
 var dropdown_default = {};
 
 // src/components/dropdown/Dropdown.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Dropdown({
   options,
   value,
@@ -478,8 +674,8 @@ function Dropdown({
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx(dropdown_default.wrapper, className), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         type: "button",
@@ -489,12 +685,12 @@ function Dropdown({
         "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" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cx(dropdown_default.chevron, open && dropdown_default["chevron-open"]), children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: dropdown_default.menu, children: [
+      allowClear && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
@@ -506,7 +702,7 @@ function Dropdown({
           children: placeholder
         }
       ),
-      options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
@@ -523,14 +719,429 @@ function Dropdown({
   ] });
 }
 
+// src/components/dropdown-menu/DropdownMenu.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+
+// src/components/dropdown-menu/dropdown-menu.module.css
+var dropdown_menu_default = {};
+
+// src/components/dropdown-menu/DropdownMenu.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function DropdownMenu(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Root, { ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Trigger, { ...props });
+}
+function DropdownMenuGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Group, { ...props });
+}
+function DropdownMenuPortal(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { ...props });
+}
+function DropdownMenuSub(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Sub, { ...props });
+}
+function DropdownMenuRadioGroup(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.RadioGroup, { ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DropdownMenuPrimitive.Content,
+    {
+      sideOffset,
+      className: cx(dropdown_menu_default.content, className),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-inset": inset ? "true" : void 0,
+      className: cx(
+        dropdown_menu_default.item,
+        variant === "destructive" && dropdown_menu_default.destructive,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      className: cx(dropdown_menu_default.item, dropdown_menu_default.insetItem, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: dropdown_menu_default.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "svg",
+          {
+            viewBox: "0 0 16 16",
+            width: "16",
+            height: "16",
+            "aria-hidden": "true",
+            className: dropdown_menu_default.indicatorIcon,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "path",
+              {
+                d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.8",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      className: cx(dropdown_menu_default.item, dropdown_menu_default.insetItem, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: dropdown_menu_default.indicator, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: dropdown_menu_default.radioDot }) }) }),
+        children
+      ]
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-inset": inset ? "true" : void 0,
+      className: cx(dropdown_menu_default.label, className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DropdownMenuPrimitive.Separator,
+    {
+      className: cx(dropdown_menu_default.separator, className),
+      ...props
+    }
+  );
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-inset": inset ? "true" : void 0,
+      className: cx(dropdown_menu_default.item, className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "svg",
+          {
+            viewBox: "0 0 16 16",
+            width: "16",
+            height: "16",
+            "aria-hidden": "true",
+            className: dropdown_menu_default.chevron,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              "path",
+              {
+                d: "M6 3.5 10.5 8 6 12.5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "1.6",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    DropdownMenuPrimitive.SubContent,
+    {
+      className: cx(dropdown_menu_default.content, className),
+      ...props
+    }
+  );
+}
+
 // src/components/app-shell/AppShell.tsx
+var import_react5 = require("react");
+
+// src/theme/ThemeProvider.tsx
 var import_react4 = require("react");
 
+// src/theme/constants.ts
+var UZI_THEMES = ["light", "dark", "system"];
+var UZI_ACCENTS = ["blue", "cyan", "violet", "emerald", "amber", "rose"];
+var THEME_STORAGE_KEY = "uzi-theme";
+var ACCENT_STORAGE_KEY = "uzi-accent";
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var THEME_STORAGE_KEY2 = THEME_STORAGE_KEY;
+var ACCENT_STORAGE_KEY2 = ACCENT_STORAGE_KEY;
+var THEME_ATTRIBUTE = "data-uzi-theme";
+var ACCENT_ATTRIBUTE = "data-uzi-accent";
+var ThemeContext = (0, import_react4.createContext)(void 0);
+function isTheme(value) {
+  return UZI_THEMES.includes(value);
+}
+function isAccent(value) {
+  return UZI_ACCENTS.includes(value);
+}
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function ThemeProvider({
+  children,
+  theme,
+  defaultTheme = "system",
+  accent,
+  defaultAccent = "blue",
+  onThemeChange,
+  onAccentChange,
+  storageKey = THEME_STORAGE_KEY2,
+  accentStorageKey = ACCENT_STORAGE_KEY2,
+  disableStorage = false
+}) {
+  const [internalTheme, setInternalTheme] = (0, import_react4.useState)(defaultTheme);
+  const [internalAccent, setInternalAccent] = (0, import_react4.useState)(defaultAccent);
+  const [systemTheme, setSystemTheme] = (0, import_react4.useState)("light");
+  (0, import_react4.useEffect)(() => {
+    setSystemTheme(getSystemTheme());
+    if (!disableStorage) {
+      const storedTheme = window.localStorage.getItem(storageKey);
+      if (isTheme(storedTheme)) setInternalTheme(storedTheme);
+      const storedAccent = window.localStorage.getItem(accentStorageKey);
+      if (isAccent(storedAccent)) setInternalAccent(storedAccent);
+    }
+  }, [disableStorage, storageKey, accentStorageKey]);
+  const isThemeControlled = theme !== void 0;
+  const isAccentControlled = accent !== void 0;
+  const currentTheme = isThemeControlled ? theme : internalTheme;
+  const currentAccent = isAccentControlled ? accent : internalAccent;
+  const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
+  (0, import_react4.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
+    handleChange();
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
+    root.setAttribute(ACCENT_ATTRIBUTE, currentAccent);
+    root.style.colorScheme = resolvedTheme;
+    root.classList.toggle("dark", resolvedTheme === "dark");
+  }, [currentAccent, resolvedTheme]);
+  const setTheme = (0, import_react4.useCallback)(
+    (nextTheme) => {
+      if (!isThemeControlled) setInternalTheme(nextTheme);
+      if (!disableStorage && typeof window !== "undefined") {
+        window.localStorage.setItem(storageKey, nextTheme);
+      }
+      onThemeChange?.(nextTheme);
+    },
+    [disableStorage, isThemeControlled, onThemeChange, storageKey]
+  );
+  const setAccent = (0, import_react4.useCallback)(
+    (nextAccent) => {
+      if (!isAccentControlled) setInternalAccent(nextAccent);
+      if (!disableStorage && typeof window !== "undefined") {
+        window.localStorage.setItem(accentStorageKey, nextAccent);
+      }
+      onAccentChange?.(nextAccent);
+    },
+    [accentStorageKey, disableStorage, isAccentControlled, onAccentChange]
+  );
+  const toggleTheme = (0, import_react4.useCallback)(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+  const value = (0, import_react4.useMemo)(
+    () => ({
+      theme: currentTheme,
+      resolvedTheme,
+      accent: currentAccent,
+      setTheme,
+      setAccent,
+      toggleTheme
+    }),
+    [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = (0, import_react4.useContext)(ThemeContext);
+  if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+}
+
+// src/components/theme-toggle-button/theme-toggle-button.module.css
+var theme_toggle_button_default = {};
+
+// src/components/theme-toggle-button/ThemeToggleButton.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function MoonIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "path",
+    {
+      d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function SunIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "path",
+      {
+        d: "M12 2.75v2.5M12 18.75v2.5M21.25 12h-2.5M5.25 12h-2.5M18.54 5.46l-1.77 1.77M7.23 16.77l-1.77 1.77M18.54 18.54l-1.77-1.77M7.23 7.23 5.46 5.46",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function ThemeToggleButton({
+  showLabel = false,
+  lightLabel = "Light mode",
+  darkLabel = "Dark mode",
+  className,
+  onClick,
+  ...rest
+}) {
+  const { resolvedTheme, toggleTheme } = useTheme();
+  const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: showLabel ? "sm" : "icon",
+      className: cx(showLabel && theme_toggle_button_default.withLabel, className),
+      "aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
+      title: `Switch to ${nextThemeLabel.toLowerCase()}`,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) toggleTheme();
+      },
+      ...rest,
+      children: [
+        resolvedTheme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SunIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MoonIcon, {}),
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: nextThemeLabel })
+      ]
+    }
+  );
+}
+
+// src/components/top-bar/top-bar.module.css
+var top_bar_default = {};
+
+// src/components/top-bar/TopBar.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function TopBar({
+  leading,
+  brand,
+  brandHref,
+  brandingLocation = "left",
+  start,
+  center,
+  actions,
+  showThemeToggle = false,
+  themeToggleProps,
+  className,
+  innerClassName,
+  isSticky,
+  sticky = true,
+  children,
+  ...rest
+}) {
+  const shouldStick = isSticky ?? sticky;
+  const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: brandHref, className: top_bar_default.topBarBrand, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: top_bar_default.topBarBrandContent, children: brand }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: top_bar_default.topBarBrand, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: top_bar_default.topBarBrandContent, children: brand }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "header",
+    {
+      className: cx(top_bar_default.topBar, !shouldStick && top_bar_default.topBarStatic, className),
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cx(top_bar_default.topBarInner, innerClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: top_bar_default.topBarStart, children: [
+          leading,
+          brandingLocation === "left" && brandNode,
+          start
+        ] }),
+        brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: top_bar_default.topBarCenter, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: top_bar_default.topBarCenterGroup, children: [
+          brandingLocation === "center" && brandNode,
+          center ?? children
+        ] }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: top_bar_default.topBarActions, children: [
+          showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeToggleButton, { ...themeToggleProps }),
+          actions
+        ] })
+      ] })
+    }
+  );
+}
+
 // 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 import_jsx_runtime16 = require("react/jsx-runtime");
 var DESKTOP_BREAKPOINT = 960;
 function getIsDesktop() {
   if (typeof window === "undefined") return false;
@@ -543,6 +1154,9 @@ function AppShell({
   brandHref,
   topbarStart,
   topbarEnd,
+  showThemeToggle = false,
+  themeToggleProps,
+  topBarBrandingLocation = "left",
   className,
   sidebarClassName,
   topbarClassName,
@@ -552,19 +1166,23 @@ function AppShell({
   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 [isDesktop, setIsDesktop] = (0, import_react5.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react5.useState)(false);
+  const [transitionsReady, setTransitionsReady] = (0, import_react5.useState)(false);
+  const prevIsDesktopRef = (0, import_react5.useRef)(false);
+  const closeKeyRef = (0, import_react5.useRef)(closeSidebarOnChangeKey);
+  const sidebarRef = (0, import_react5.useRef)(null);
+  const hamburgerRef = (0, import_react5.useRef)(null);
+  const mainRef = (0, import_react5.useRef)(null);
+  const sidebarId = (0, import_react5.useId)();
+  (0, import_react5.useEffect)(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
     prevIsDesktopRef.current = desktop;
+    const transitionFrame = window.requestAnimationFrame(() => {
+      setTransitionsReady(true);
+    });
     const handleResize = () => {
       const nowDesktop = getIsDesktop();
       setIsDesktop(nowDesktop);
@@ -574,9 +1192,12 @@ function AppShell({
       }
     };
     window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    return () => {
+      window.cancelAnimationFrame(transitionFrame);
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -601,25 +1222,26 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.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,
+    app_shell_default.appShell,
+    transitionsReady && app_shell_default.appShellAnimated,
+    sidebarOpen ? app_shell_default.appShellOpen : app_shell_default.appShellCollapsed,
     className
   );
-  const sidebarClasses = cx(app_shell_default.sidebar, sidebarOpen && app_shell_default.open, sidebarClassName);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const sidebarClasses = cx(app_shell_default.appShellSidebar, sidebarOpen && app_shell_default.appShellSidebarOpen, sidebarClassName);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: shellClasses,
@@ -628,29 +1250,35 @@ function AppShell({
       "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)(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          TopBar,
+          {
+            className: cx(app_shell_default.appShellTopbar, topbarClassName),
+            leading: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "button",
               {
                 ref: hamburgerRef,
                 type: "button",
-                className: app_shell_default.hamburger,
+                className: app_shell_default.appShellHamburger,
                 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" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.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 })
+            brand,
+            brandHref,
+            brandingLocation: topBarBrandingLocation,
+            start: topbarStart,
+            actions: topbarEnd,
+            showThemeToggle,
+            themeToggleProps
+          }
+        ),
+        !isDesktop && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: app_shell_default.appShellBackdrop, onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("main", { ref: mainRef, className: cx(app_shell_default.appShellMain, mainClassName), children })
       ]
     }
   );
@@ -660,57 +1288,176 @@ function AppShell({
 var sidebar_nav_default = {};
 
 // src/components/sidebar-nav/SidebarNav.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var defaultIsActive = (item, path) => {
   if (item.active !== void 0) return item.active;
+  if (!item.href) return false;
   if (!path) return false;
   if (item.href === "/") return path === "/";
   return path.startsWith(item.href);
 };
 function SidebarNav({
-  items,
+  items = [],
+  sections,
   currentPath,
   getIsActive = defaultIsActive,
   onItemClick,
+  header,
+  footer,
+  ariaLabel = "Sidebar navigation",
+  collapsed = false,
+  iconSize,
   className,
-  itemClassName
+  itemClassName,
+  sectionClassName
 }) {
-  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",
+  const resolvedSections = sections?.length ? sections : [{ id: "default", items }];
+  const style = iconSize !== void 0 ? {
+    ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "nav",
+    {
+      className: cx(sidebar_nav_default.uziSidebarNav, collapsed && sidebar_nav_default.uziSidebarNavCollapsed, className),
+      "aria-label": ariaLabel,
+      style,
+      children: [
+        header ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: sidebar_nav_default.uziSidebarNavHeader, children: header }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: sidebar_nav_default.uziSidebarNavSections, children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          "div",
+          {
+            className: cx(sidebar_nav_default.uziSidebarNavSection, sectionClassName),
+            children: [
+              section.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: sidebar_nav_default.uziSidebarNavSectionLabel, children: section.label }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: sidebar_nav_default.uziSidebarNavSectionItems, children: section.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                SidebarNavEntry,
+                {
+                  item,
+                  active: getIsActive(item, currentPath),
+                  collapsed,
+                  itemClassName,
+                  onItemClick
+                },
+                `${section.id ?? sectionIndex}-${item.href ?? item.title ?? itemIndex}`
+              )) })
+            ]
+          },
+          section.id ?? `section-${sectionIndex}`
+        )) }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: sidebar_nav_default.uziSidebarNavFooter, children: footer }) : null
+      ]
+    }
+  );
+}
+function SidebarNavEntry({
+  item,
+  active,
+  collapsed,
+  itemClassName,
+  onItemClick
+}) {
+  const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
+  const title = item.title ?? (typeof item.label === "string" ? item.label : void 0);
+  const classes = cx(
+    sidebar_nav_default.uziSidebarNavItem,
+    active && sidebar_nav_default.uziSidebarNavItemActive,
+    collapsed && sidebar_nav_default.uziSidebarNavItemCollapsed,
+    item.disabled && sidebar_nav_default.uziSidebarNavItemDisabled,
+    itemClassName
+  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    item.icon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: sidebar_nav_default.uziSidebarNavIcon, children: item.icon }),
+    !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: sidebar_nav_default.uziSidebarNavItemBody, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: sidebar_nav_default.uziSidebarNavLabelRow, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: sidebar_nav_default.uziSidebarNavLabel, children: item.label }),
+        item.badge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: sidebar_nav_default.uziSidebarNavBadge, children: item.badge })
+      ] }),
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: sidebar_nav_default.uziSidebarNavDescription, children: item.description }) : null
+    ] }) : null
+  ] });
+  const handleClick = () => {
+    if (item.disabled) return;
+    item.onClick?.();
+    onItemClick?.(item);
+  };
+  if (!item.href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "button",
       {
-        className: cx(sidebar_nav_default.item, active && sidebar_nav_default.active, itemClassName),
-        href: item.href,
-        target: item.target,
-        rel,
+        type: "button",
+        className: classes,
         "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
+        "aria-disabled": item.disabled ? "true" : void 0,
+        disabled: item.disabled,
+        title: collapsed ? title : void 0,
+        onClick: handleClick,
+        children: content
+      }
     );
-  }) });
+  }
+  if (item.disabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        className: classes,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": "true",
+        title: collapsed ? title : void 0,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "a",
+    {
+      className: classes,
+      href: item.href,
+      target: item.target,
+      rel,
+      "aria-current": active ? "page" : void 0,
+      title: collapsed ? title : void 0,
+      onClick: handleClick,
+      children: content
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
   AppShell,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
   Button,
   Card,
+  Checkbox,
   Dropdown,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  Input,
+  Label,
   Modal,
+  ModalOverlay,
   Pill,
   SidebarNav,
+  ThemeProvider,
+  ThemeToggleButton,
   ToastProvider,
+  TopBar,
   cx,
+  useTheme,
   useToast
 });
 //# sourceMappingURL=index.cjs.map