@tomny-dev/uzi 0.1.8 → 0.1.9-pr.2.2.1

package/dist/index.cjs

@@ -58,8 +58,12 @@ __export(index_exports, {
   Label: () => Label,
   Modal: () => Modal,
   ModalOverlay: () => ModalOverlay,
+  MultiSelect: () => MultiSelect,
   Pill: () => Pill,
+  Progress: () => Progress,
+  Select: () => Select,
   SidebarNav: () => SidebarNav,
+  Skeleton: () => Skeleton,
   ThemeProvider: () => ThemeProvider,
   ThemeToggleButton: () => ThemeToggleButton,
   ToastProvider: () => ToastProvider,
@@ -220,36 +224,20 @@ function Pill({
 }
 
 // src/components/modal/Modal.tsx
-var import_react = require("react");
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 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_runtime5.jsx)(
-    "div",
+    DialogPrimitive.Root,
     {
-      className: cx("backdrop", className),
-      role: "dialog",
-      "aria-modal": "true",
-      onMouseDown: (e) => {
-        mouseDownOnBackdrop.current = e.target === e.currentTarget;
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose();
       },
-      onMouseUp: (e) => {
-        if (mouseDownOnBackdrop.current && e.target === e.currentTarget) onClose();
-        mouseDownOnBackdrop.current = false;
-      },
-      children
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "portalLayer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Overlay, { className: cx("backdrop", className) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Content, { className: "overlayContent", children })
+      ] }) })
     }
   );
 }
@@ -257,13 +245,13 @@ 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", `size-${size}`), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "titles", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "title", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "subtitle", children: subtitle })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Title, { className: "title", children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Description, { className: "subtitle", children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "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)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "closeButton", "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: "body", children }),
     footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "footer", children: footer })
@@ -283,7 +271,8 @@ function Alert({ tone, children, className }) {
 }
 
 // src/components/toast/ToastContext.tsx
-var import_react2 = require("react");
+var import_react = require("react");
+var ToastPrimitive = __toESM(require("@radix-ui/react-toast"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_CONFIG = {
   position: "top-right",
@@ -292,17 +281,17 @@ var DEFAULT_CONFIG = {
   pauseOnHover: true,
   pauseOnFocusLoss: true
 };
-var ToastContext = (0, import_react2.createContext)(void 0);
+var ToastContext = (0, import_react.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)(
+  const [toasts, setToasts] = (0, import_react.useState)([]);
+  const [isPaused, setIsPaused] = (0, import_react.useState)(false);
+  const merged = (0, import_react.useMemo)(() => ({ ...DEFAULT_CONFIG, ...config }), [config]);
+  const push = (0, import_react.useCallback)(
     (message, options = {}) => {
       const id = generateToastId();
       setToasts((prev) => {
@@ -324,37 +313,37 @@ function ToastProvider({
     },
     [merged.defaultDuration, merged.maxToasts]
   );
-  const success = (0, import_react2.useCallback)(
+  const success = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "success" }),
     [push]
   );
-  const error = (0, import_react2.useCallback)(
+  const error = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "error", duration: options?.duration ?? 6e3 }),
     [push]
   );
-  const warning = (0, import_react2.useCallback)(
+  const warning = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "warning" }),
     [push]
   );
-  const info = (0, import_react2.useCallback)(
+  const info = (0, import_react.useCallback)(
     (message, options) => push(message, { ...options, type: "info" }),
     [push]
   );
-  const dismiss = (0, import_react2.useCallback)((id) => {
+  const dismiss = (0, import_react.useCallback)((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const dismissAll = (0, import_react2.useCallback)(() => setToasts([]), []);
-  (0, import_react2.useEffect)(() => {
+  const dismissAll = (0, import_react.useCallback)(() => setToasts([]), []);
+  (0, import_react.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)(
+  const value = (0, import_react.useMemo)(
     () => ({ toasts, push, success, error, warning, info, dismiss, dismissAll }),
     [toasts, push, success, error, warning, info, dismiss, dismissAll]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ToastPrimitive.Provider, { swipeDirection: "right", children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ToastContainer,
@@ -367,10 +356,10 @@ function ToastProvider({
         onPauseChange: setIsPaused
       }
     )
-  ] });
+  ] }) });
 }
 function useToast() {
-  const ctx = (0, import_react2.useContext)(ToastContext);
+  const ctx = (0, import_react.useContext)(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a ToastProvider");
   return ctx;
 }
@@ -399,26 +388,29 @@ function ToastContainer({
         return "topRight";
     }
   })();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: cx("stack", posClass),
-      role: "presentation",
-      onMouseEnter: () => pauseOnHover && onPauseChange(true),
-      onMouseLeave: () => pauseOnHover && onPauseChange(false),
-      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastItem, { toast, isPaused, onDismiss }, toast.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ToastPrimitive.Viewport,
+      {
+        className: cx("stack", posClass),
+        label: "Notifications",
+        onMouseEnter: () => pauseOnHover && onPauseChange(true),
+        onMouseLeave: () => pauseOnHover && onPauseChange(false)
+      }
+    )
+  ] });
 }
 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 [open, setOpen] = (0, import_react.useState)(true);
+  const timerRef = (0, import_react.useRef)(null);
+  const startRef = (0, import_react.useRef)(0);
+  const remainingRef = (0, import_react.useRef)(toast.duration ?? 0);
+  const closingRef = (0, import_react.useRef)(false);
   const palette = getPalette(toast.type);
   const styleVars = {
     ["--toast-bg"]: palette.background,
@@ -435,12 +427,14 @@ function ToastItem({
       timerRef.current = null;
     }
   };
-  const triggerDismiss = (0, import_react2.useCallback)(() => {
-    setExiting(true);
+  const triggerDismiss = (0, import_react.useCallback)(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setOpen(false);
     stopTimer();
     window.setTimeout(() => onDismiss(toast.id), 160);
   }, [onDismiss, toast.id]);
-  const schedule = (0, import_react2.useCallback)(
+  const schedule = (0, import_react.useCallback)(
     (delay) => {
       if (!delay || delay <= 0) {
         triggerDismiss();
@@ -452,12 +446,12 @@ function ToastItem({
     },
     [triggerDismiss]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!toast.duration || toast.duration <= 0) return void 0;
     schedule(toast.duration);
     return stopTimer;
   }, [schedule, toast.duration]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!toast.duration || toast.duration <= 0) return;
     if (isPaused) {
       const elapsed = performance.now() - startRef.current;
@@ -468,42 +462,60 @@ function ToastItem({
     }
   }, [isPaused, schedule, toast.duration]);
   const icon = getIcon(toast.type);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cx("toast", exiting && "exit"), style: styleVars, role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "icon", "aria-hidden": true, children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "message", children: toast.message }),
-      toast.action && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "actionButton",
-          onClick: () => {
-            toast.action?.onClick();
-            triggerDismiss();
-          },
-          children: toast.action.label
-        }
-      ) })
-    ] }),
-    toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "closeButton",
-        onClick: triggerDismiss,
-        "aria-label": "Dismiss notification",
-        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",
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    ToastPrimitive.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) triggerDismiss();
+      },
+      duration: 2147483647,
+      className: "toast",
+      style: styleVars,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastPrimitive.Description, { className: "message", children: toast.message }),
+          toast.action && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ToastPrimitive.Action,
+            {
+              asChild: true,
+              altText: toast.action.label,
+              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "actionButton",
+                  onClick: () => {
+                    toast.action?.onClick();
+                    triggerDismiss();
+                  },
+                  children: toast.action.label
+                }
+              )
+            }
+          ) })
+        ] }),
+        toast.dismissible !== false && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
           {
-            d: "M11 3L3 11M3 3l8 8",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            type: "button",
+            className: "closeButton",
+            "aria-label": "Dismiss notification",
+            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",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
           }
         ) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function getPalette(type) {
   switch (type) {
@@ -608,105 +620,376 @@ var Checkbox = React3.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 
-// src/components/dropdown/Dropdown.tsx
-var import_react3 = require("react");
+// src/components/multi-select/MultiSelect.tsx
+var React4 = __toESM(require("react"), 1);
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
 var import_jsx_runtime11 = 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);
+var MultiSelect = React4.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder = "Select options",
+    fullWidth = true,
+    maxVisibleValues = 2,
+    className,
+    disabled = false,
+    name,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const selectedSet = React4.useMemo(() => new Set(value), [value]);
+    const selectedOptions = React4.useMemo(
+      () => options.filter((opt) => selectedSet.has(opt.value)),
+      [options, selectedSet]
+    );
+    const toggleValue = React4.useCallback(
+      (nextValue) => {
+        if (selectedSet.has(nextValue)) {
+          onChange(value.filter((entry) => entry !== nextValue));
+          return;
+        }
+        onChange([...value, nextValue]);
+      },
+      [onChange, selectedSet, value]
+    );
+    const visibleCount = Math.max(1, maxVisibleValues);
+    const visibleOptions = selectedOptions.slice(0, visibleCount);
+    const overflowCount = Math.max(
+      0,
+      selectedOptions.length - visibleOptions.length
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Root, { modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: cx("wrapper", fullWidth && "wrapper-fullWidth", className),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "button",
+            {
+              ref,
+              type: "button",
+              className: cx(
+                "trigger",
+                selectedOptions.length > 0 && "trigger-hasValue"
+              ),
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              disabled,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "value", children: selectedOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "placeholder", children: placeholder }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                  visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "chip", children: option.label }, option.value)),
+                  overflowCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "chip chip-summary", children: [
+                    "+",
+                    overflowCount
+                  ] }) : null
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "chevron", "aria-hidden": "true", 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"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          name ? value.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { type: "hidden", name, value: entry }, entry)) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            DropdownMenuPrimitive.Content,
+            {
+              className: "menu",
+              sideOffset: 4,
+              align: "start",
+              children: options.map((option) => {
+                const selected = selectedSet.has(option.value);
+                return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  DropdownMenuPrimitive.CheckboxItem,
+                  {
+                    className: cx(
+                      "option",
+                      selected && "option-selected",
+                      option.disabled && "option-disabled"
+                    ),
+                    checked: selected,
+                    disabled: option.disabled,
+                    onCheckedChange: () => toggleValue(option.value),
+                    onSelect: (event) => event.preventDefault(),
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                        "span",
+                        {
+                          className: cx(
+                            "indicator",
+                            selected && "indicator-selected",
+                            option.disabled && "indicator-disabled"
+                          ),
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuPrimitive.ItemIndicator, { forceMount: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            "svg",
+                            {
+                              viewBox: "0 0 16 16",
+                              width: "16",
+                              height: "16",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                                "path",
+                                {
+                                  d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                                  stroke: "currentColor",
+                                  strokeWidth: "1.8",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ) })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "option-label", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          ) })
+        ]
       }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cx("wrapper", className), ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "button",
+    ) });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+// src/components/dropdown/Dropdown.tsx
+var React6 = __toESM(require("react"), 1);
+
+// src/components/select/Select.tsx
+var React5 = __toESM(require("react"), 1);
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var EMPTY_OPTION_VALUE = "__uzi_select_empty__";
+var Select = React5.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder,
+    allowEmptyOption = false,
+    fullWidth = true,
+    className,
+    id,
+    name,
+    disabled,
+    required,
+    autoComplete,
+    form,
+    title,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    onBlur,
+    onFocus
+  }, ref) => {
+    const internalValue = value === "" && allowEmptyOption ? EMPTY_OPTION_VALUE : value;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      SelectPrimitive.Root,
       {
-        type: "button",
-        className: cx("trigger", isActive && "trigger-active"),
-        onClick: () => setOpen((o) => !o),
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
+        value: internalValue,
+        onValueChange: (nextValue) => onChange(nextValue === EMPTY_OPTION_VALUE ? "" : nextValue),
+        name,
+        disabled,
+        required,
+        autoComplete,
         children: [
-          selected ? selected.label : placeholder,
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cx("chevron", open && "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" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            SelectPrimitive.Trigger,
+            {
+              ref,
+              id,
+              className: "select",
+              form,
+              title,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              onBlur,
+              onFocus,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Icon, { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(
+                      "path",
+                      {
+                        d: "M2 3.5L5 6.5L8 3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            SelectPrimitive.Content,
+            {
+              className: "content",
+              position: "popper",
+              sideOffset: 4,
+              align: "start",
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SelectPrimitive.Viewport, { className: "viewport", children: [
+                placeholder && allowEmptyOption ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  SelectPrimitive.Item,
+                  {
+                    value: EMPTY_OPTION_VALUE,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "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"
+                            }
+                          )
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemText, { children: placeholder })
+                    ]
+                  }
+                ) : null,
+                options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  SelectPrimitive.Item,
+                  {
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "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"
+                            }
+                          )
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectPrimitive.ItemText, { children: opt.label })
+                    ]
+                  },
+                  opt.value
+                ))
+              ] })
+            }
+          ) })
         ]
       }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu", children: [
-      allowClear && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cx("option", value === "" && "option-selected"),
-          onClick: () => {
-            onChange("");
-            setOpen(false);
-          },
-          children: placeholder
-        }
-      ),
-      options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cx("option", value === opt.value && "option-selected"),
-          onClick: () => {
-            onChange(opt.value);
-            setOpen(false);
-          },
-          children: opt.label
-        },
-        opt.value
-      ))
-    ] })
-  ] });
-}
+    ) });
+  }
+);
+Select.displayName = "Select";
+
+// src/components/dropdown/Dropdown.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Dropdown = React6.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder = "All",
+    allowClear = true,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      Select,
+      {
+        ref,
+        options,
+        value,
+        onChange,
+        placeholder,
+        allowEmptyOption: allowClear,
+        fullWidth: false,
+        ...rest
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
 
 // src/components/dropdown-menu/DropdownMenu.tsx
-var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var DropdownMenuPrimitive2 = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DropdownMenu(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Root, { ...props });
 }
 function DropdownMenuTrigger(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Trigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Trigger, { ...props });
 }
 function DropdownMenuGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Group, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Group, { ...props });
 }
 function DropdownMenuPortal(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Portal, { ...props });
 }
 function DropdownMenuSub(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.Sub, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Sub, { ...props });
 }
 function DropdownMenuRadioGroup(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.RadioGroup, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.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,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownMenuPrimitive2.Content,
     {
       sideOffset,
       className: cx("content", className),
@@ -720,8 +1003,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    DropdownMenuPrimitive.Item,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownMenuPrimitive2.Item,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx(
@@ -738,13 +1021,13 @@ function DropdownMenuCheckboxItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    DropdownMenuPrimitive.CheckboxItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownMenuPrimitive2.CheckboxItem,
     {
       className: cx("item", "insetItem", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "svg",
           {
             viewBox: "0 0 16 16",
@@ -752,7 +1035,7 @@ function DropdownMenuCheckboxItem({
             height: "16",
             "aria-hidden": "true",
             className: "indicatorIcon",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "path",
               {
                 d: "M3.5 8.5 6.5 11.5 12.5 4.5",
@@ -775,13 +1058,13 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    DropdownMenuPrimitive.RadioItem,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownMenuPrimitive2.RadioItem,
     {
       className: cx("item", "insetItem", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "radioDot" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "indicator", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "radioDot" }) }) }),
         children
       ]
     }
@@ -792,8 +1075,8 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    DropdownMenuPrimitive.Label,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownMenuPrimitive2.Label,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx("label", className),
@@ -805,8 +1088,8 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    DropdownMenuPrimitive.Separator,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownMenuPrimitive2.Separator,
     {
       className: cx("separator", className),
       ...props
@@ -819,15 +1102,15 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    DropdownMenuPrimitive.SubTrigger,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    DropdownMenuPrimitive2.SubTrigger,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx("item", className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "svg",
           {
             viewBox: "0 0 16 16",
@@ -835,7 +1118,7 @@ function DropdownMenuSubTrigger({
             height: "16",
             "aria-hidden": "true",
             className: "chevron",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "path",
               {
                 d: "M6 3.5 10.5 8 6 12.5",
@@ -856,8 +1139,8 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    DropdownMenuPrimitive.SubContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DropdownMenuPrimitive2.SubContent,
     {
       className: cx("content", className),
       ...props
@@ -866,10 +1149,10 @@ function DropdownMenuSubContent({
 }
 
 // src/components/app-shell/AppShell.tsx
-var import_react5 = require("react");
+var import_react3 = require("react");
 
 // src/theme/ThemeProvider.tsx
-var import_react4 = require("react");
+var import_react2 = require("react");
 
 // src/theme/constants.ts
 var UZI_THEMES = ["light", "dark", "system"];
@@ -878,12 +1161,12 @@ 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 import_jsx_runtime15 = 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);
+var ThemeContext = (0, import_react2.createContext)(void 0);
 function isTheme(value) {
   return UZI_THEMES.includes(value);
 }
@@ -906,10 +1189,10 @@ function ThemeProvider({
   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)(() => {
+  const [internalTheme, setInternalTheme] = (0, import_react2.useState)(defaultTheme);
+  const [internalAccent, setInternalAccent] = (0, import_react2.useState)(defaultAccent);
+  const [systemTheme, setSystemTheme] = (0, import_react2.useState)("light");
+  (0, import_react2.useEffect)(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -923,7 +1206,7 @@ function ThemeProvider({
   const currentTheme = isThemeControlled ? theme : internalTheme;
   const currentAccent = isAccentControlled ? accent : internalAccent;
   const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -931,7 +1214,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -939,7 +1222,7 @@ function ThemeProvider({
     root.style.colorScheme = resolvedTheme;
     root.classList.toggle("dark", resolvedTheme === "dark");
   }, [currentAccent, resolvedTheme]);
-  const setTheme = (0, import_react4.useCallback)(
+  const setTheme = (0, import_react2.useCallback)(
     (nextTheme) => {
       if (!isThemeControlled) setInternalTheme(nextTheme);
       if (!disableStorage && typeof window !== "undefined") {
@@ -949,7 +1232,7 @@ function ThemeProvider({
     },
     [disableStorage, isThemeControlled, onThemeChange, storageKey]
   );
-  const setAccent = (0, import_react4.useCallback)(
+  const setAccent = (0, import_react2.useCallback)(
     (nextAccent) => {
       if (!isAccentControlled) setInternalAccent(nextAccent);
       if (!disableStorage && typeof window !== "undefined") {
@@ -959,10 +1242,10 @@ function ThemeProvider({
     },
     [accentStorageKey, disableStorage, isAccentControlled, onAccentChange]
   );
-  const toggleTheme = (0, import_react4.useCallback)(() => {
+  const toggleTheme = (0, import_react2.useCallback)(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   }, [resolvedTheme, setTheme]);
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react2.useMemo)(
     () => ({
       theme: currentTheme,
       resolvedTheme,
@@ -973,18 +1256,18 @@ function ThemeProvider({
     }),
     [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
-  const context = (0, import_react4.useContext)(ThemeContext);
+  const context = (0, import_react2.useContext)(ThemeContext);
   if (!context) throw new Error("useTheme must be used within a ThemeProvider");
   return context;
 }
 
 // src/components/theme-toggle-button/ThemeToggleButton.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "path",
     {
       d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
@@ -996,9 +1279,9 @@ function MoonIcon() {
   ) });
 }
 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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.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",
@@ -1019,7 +1302,7 @@ function ThemeToggleButton({
 }) {
   const { resolvedTheme, toggleTheme } = useTheme();
   const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     Button,
     {
       type: "button",
@@ -1034,15 +1317,15 @@ function ThemeToggleButton({
       },
       ...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 })
+        resolvedTheme === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SunIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MoonIcon, {}),
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: nextThemeLabel })
       ]
     }
   );
 }
 
 // src/components/top-bar/TopBar.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function TopBar({
   leading,
   brand,
@@ -1061,24 +1344,24 @@ function TopBar({
   ...rest
 }) {
   const shouldStick = isSticky ?? sticky;
-  const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: brandHref, className: "topBarBrand", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "topBarBrandContent", children: brand }) }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "topBarBrand", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "topBarBrandContent", children: brand }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("a", { href: brandHref, className: "topBarBrand", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "topBarBrandContent", children: brand }) }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "topBarBrand", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "topBarBrandContent", children: brand }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "header",
     {
       className: cx("topBar", !shouldStick && "topBarStatic", className),
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cx("topBarInner", innerClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "topBarStart", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx("topBarInner", innerClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "topBarStart", children: [
           leading,
           brandingLocation === "left" && brandNode,
           start
         ] }),
-        brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "topBarCenter", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "topBarCenterGroup", children: [
+        brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "topBarCenter", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "topBarCenterGroup", children: [
           brandingLocation === "center" && brandNode,
           center ?? children
         ] }) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "topBarActions", children: [
-          showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ThemeToggleButton, { ...themeToggleProps }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "topBarActions", children: [
+          showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ThemeToggleButton, { ...themeToggleProps }),
           actions
         ] })
       ] })
@@ -1087,7 +1370,7 @@ function TopBar({
 }
 
 // src/components/app-shell/AppShell.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var DESKTOP_BREAKPOINT = 960;
 function getIsDesktop() {
   if (typeof window === "undefined") return false;
@@ -1112,16 +1395,16 @@ function AppShell({
   hamburgerLabel = "Toggle navigation",
   onSidebarToggle
 }) {
-  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 [isDesktop, setIsDesktop] = (0, import_react3.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react3.useState)(false);
+  const [transitionsReady, setTransitionsReady] = (0, import_react3.useState)(false);
+  const prevIsDesktopRef = (0, import_react3.useRef)(false);
+  const closeKeyRef = (0, import_react3.useRef)(closeSidebarOnChangeKey);
+  const sidebarRef = (0, import_react3.useRef)(null);
+  const hamburgerRef = (0, import_react3.useRef)(null);
+  const mainRef = (0, import_react3.useRef)(null);
+  const sidebarId = (0, import_react3.useId)();
+  (0, import_react3.useEffect)(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1143,7 +1426,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1168,13 +1451,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
@@ -1187,7 +1470,7 @@ function AppShell({
     className
   );
   const sidebarClasses = cx("appShellSidebar", sidebarOpen && "appShellSidebarOpen", sidebarClassName);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       className: shellClasses,
@@ -1196,11 +1479,11 @@ function AppShell({
       "data-desktop": isDesktop ? "true" : "false",
       "data-sidebar-open": sidebarOpen ? "true" : "false",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           TopBar,
           {
             className: cx("appShellTopbar", topbarClassName),
-            leading: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            leading: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "button",
               {
                 ref: hamburgerRef,
@@ -1210,7 +1493,7 @@ function AppShell({
                 "aria-label": hamburgerLabel,
                 "aria-expanded": sidebarOpen,
                 "aria-controls": sidebarId,
-                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" }) })
+                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) })
               }
             ),
             brand,
@@ -1222,16 +1505,16 @@ function AppShell({
             themeToggleProps
           }
         ),
-        !isDesktop && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "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("appShellMain", mainClassName), children })
+        !isDesktop && sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "appShellBackdrop", onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { ref: mainRef, className: cx("appShellMain", mainClassName), children })
       ]
     }
   );
 }
 
 // src/components/sidebar-nav/SidebarNav.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var defaultIsActive = (item, path) => {
   if (item.active !== void 0) return item.active;
   if (!item.href) return false;
@@ -1258,21 +1541,21 @@ function SidebarNav({
   const style = iconSize !== void 0 ? {
     ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "nav",
     {
       className: cx("uziSidebarNav", collapsed && "uziSidebarNavCollapsed", className),
       "aria-label": ariaLabel,
       style,
       children: [
-        header ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uziSidebarNavHeader", children: header }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uziSidebarNavSections", children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+        header ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uziSidebarNavHeader", children: header }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uziSidebarNavSections", children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
           "div",
           {
             className: cx("uziSidebarNavSection", sectionClassName),
             children: [
-              section.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uziSidebarNavSectionLabel", children: section.label }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uziSidebarNavSectionItems", children: section.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              section.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uziSidebarNavSectionLabel", children: section.label }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uziSidebarNavSectionItems", children: section.items.map((item, itemIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                 SidebarNavEntry,
                 {
                   item,
@@ -1287,7 +1570,7 @@ function SidebarNav({
           },
           section.id ?? `section-${sectionIndex}`
         )) }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uziSidebarNavFooter", children: footer }) : null
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uziSidebarNavFooter", children: footer }) : null
       ]
     }
   );
@@ -1308,14 +1591,14 @@ function SidebarNavEntry({
     item.disabled && "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: "uziSidebarNavIcon", children: item.icon }),
-    !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "uziSidebarNavItemBody", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "uziSidebarNavLabelRow", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uziSidebarNavLabel", children: item.label }),
-        item.badge && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uziSidebarNavBadge", children: item.badge })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    item.icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uziSidebarNavIcon", children: item.icon }),
+    !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "uziSidebarNavItemBody", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "uziSidebarNavLabelRow", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uziSidebarNavLabel", children: item.label }),
+        item.badge && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uziSidebarNavBadge", children: item.badge })
       ] }),
-      item.description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "uziSidebarNavDescription", children: item.description }) : null
+      item.description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uziSidebarNavDescription", children: item.description }) : null
     ] }) : null
   ] });
   const handleClick = () => {
@@ -1324,7 +1607,7 @@ function SidebarNavEntry({
     onItemClick?.(item);
   };
   if (!item.href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "button",
       {
         type: "button",
@@ -1339,7 +1622,7 @@ function SidebarNavEntry({
     );
   }
   if (item.disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         className: classes,
@@ -1350,7 +1633,7 @@ function SidebarNavEntry({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "a",
     {
       className: classes,
@@ -1364,6 +1647,58 @@ function SidebarNavEntry({
     }
   );
 }
+
+// src/components/skeleton/Skeleton.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Skeleton({
+  width,
+  height,
+  radius = "md",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      className: cx("skeleton", `radius-${radius}`, className),
+      style: { width, height, ...style },
+      "aria-hidden": "true",
+      ...rest
+    }
+  );
+}
+
+// src/components/progress/Progress.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Progress({
+  value,
+  tone = "default",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      className: cx("track", className),
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": ariaLabel,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        "div",
+        {
+          className: cx("fill", `tone-${tone}`),
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -1393,8 +1728,12 @@ function SidebarNavEntry({
   Label,
   Modal,
   ModalOverlay,
+  MultiSelect,
   Pill,
+  Progress,
+  Select,
   SidebarNav,
+  Skeleton,
   ThemeProvider,
   ThemeToggleButton,
   ToastProvider,