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

package/dist/index.js

@@ -150,36 +150,20 @@ function Pill({
 }
 
 // src/components/modal/Modal.tsx
-import { useRef, useEffect } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function ModalOverlay({ open, onClose, className, children }) {
-  const mouseDownOnBackdrop = useRef(false);
-  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__ */ jsx5(
-    "div",
+    DialogPrimitive.Root,
     {
-      className: cx("backdrop", className),
-      role: "dialog",
-      "aria-modal": "true",
-      onMouseDown: (e) => {
-        mouseDownOnBackdrop.current = e.target === e.currentTarget;
-      },
-      onMouseUp: (e) => {
-        if (mouseDownOnBackdrop.current && e.target === e.currentTarget) onClose();
-        mouseDownOnBackdrop.current = false;
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) onClose();
       },
-      children
+      children: /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs2("div", { className: "portalLayer", children: [
+        /* @__PURE__ */ jsx5(DialogPrimitive.Overlay, { className: cx("backdrop", className) }),
+        /* @__PURE__ */ jsx5(DialogPrimitive.Content, { className: "overlayContent", children })
+      ] }) })
     }
   );
 }
@@ -187,13 +171,13 @@ function Modal({ open, onClose, title, subtitle, size = "md", children, footer }
   return /* @__PURE__ */ jsx5(ModalOverlay, { open, onClose, children: /* @__PURE__ */ jsxs2("div", { className: cx("modal", `size-${size}`), children: [
     /* @__PURE__ */ jsxs2("div", { className: "header", children: [
       /* @__PURE__ */ jsxs2("div", { className: "titles", children: [
-        /* @__PURE__ */ jsx5("div", { className: "title", children: title }),
-        subtitle && /* @__PURE__ */ jsx5("div", { className: "subtitle", children: subtitle })
+        /* @__PURE__ */ jsx5(DialogPrimitive.Title, { className: "title", children: title }),
+        subtitle ? /* @__PURE__ */ jsx5(DialogPrimitive.Description, { className: "subtitle", children: subtitle }) : null
       ] }),
-      /* @__PURE__ */ jsx5("button", { className: "closeButton", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsx5(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx5("button", { className: "closeButton", "aria-label": "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
         /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
         /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-      ] }) })
+      ] }) }) })
     ] }),
     /* @__PURE__ */ jsx5("div", { className: "body", children }),
     footer && /* @__PURE__ */ jsx5("div", { className: "footer", children: footer })
@@ -217,12 +201,13 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect as useEffect2,
+  useEffect,
   useMemo,
-  useRef as useRef2,
+  useRef,
   useState
 } from "react";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var DEFAULT_CONFIG = {
   position: "top-right",
   maxToasts: 5,
@@ -282,7 +267,7 @@ function ToastProvider({
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const dismissAll = useCallback(() => setToasts([]), []);
-  useEffect2(() => {
+  useEffect(() => {
     if (!merged.pauseOnFocusLoss) return;
     const handleVisibility = () => setIsPaused(document.visibilityState !== "visible");
     document.addEventListener("visibilitychange", handleVisibility);
@@ -292,7 +277,7 @@ function ToastProvider({
     () => ({ toasts, push, success, error, warning, info, dismiss, dismissAll }),
     [toasts, push, success, error, warning, info, dismiss, dismissAll]
   );
-  return /* @__PURE__ */ jsxs3(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsx7(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs3(ToastPrimitive.Provider, { swipeDirection: "right", children: [
     children,
     /* @__PURE__ */ jsx7(
       ToastContainer,
@@ -305,7 +290,7 @@ function ToastProvider({
         onPauseChange: setIsPaused
       }
     )
-  ] });
+  ] }) });
 }
 function useToast() {
   const ctx = useContext(ToastContext);
@@ -337,26 +322,29 @@ function ToastContainer({
         return "topRight";
     }
   })();
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: cx("stack", posClass),
-      role: "presentation",
-      onMouseEnter: () => pauseOnHover && onPauseChange(true),
-      onMouseLeave: () => pauseOnHover && onPauseChange(false),
-      children: toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, isPaused, onDismiss }, toast.id))
-    }
-  );
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    toasts.map((toast) => /* @__PURE__ */ jsx7(ToastItem, { toast, isPaused, onDismiss }, toast.id)),
+    /* @__PURE__ */ jsx7(
+      ToastPrimitive.Viewport,
+      {
+        className: cx("stack", posClass),
+        label: "Notifications",
+        onMouseEnter: () => pauseOnHover && onPauseChange(true),
+        onMouseLeave: () => pauseOnHover && onPauseChange(false)
+      }
+    )
+  ] });
 }
 function ToastItem({
   toast,
   isPaused,
   onDismiss
 }) {
-  const [exiting, setExiting] = useState(false);
-  const timerRef = useRef2(null);
-  const startRef = useRef2(0);
-  const remainingRef = useRef2(toast.duration ?? 0);
+  const [open, setOpen] = useState(true);
+  const timerRef = useRef(null);
+  const startRef = useRef(0);
+  const remainingRef = useRef(toast.duration ?? 0);
+  const closingRef = useRef(false);
   const palette = getPalette(toast.type);
   const styleVars = {
     ["--toast-bg"]: palette.background,
@@ -374,7 +362,9 @@ function ToastItem({
     }
   };
   const triggerDismiss = useCallback(() => {
-    setExiting(true);
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setOpen(false);
     stopTimer();
     window.setTimeout(() => onDismiss(toast.id), 160);
   }, [onDismiss, toast.id]);
@@ -390,12 +380,12 @@ function ToastItem({
     },
     [triggerDismiss]
   );
-  useEffect2(() => {
+  useEffect(() => {
     if (!toast.duration || toast.duration <= 0) return void 0;
     schedule(toast.duration);
     return stopTimer;
   }, [schedule, toast.duration]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!toast.duration || toast.duration <= 0) return;
     if (isPaused) {
       const elapsed = performance.now() - startRef.current;
@@ -406,42 +396,60 @@ function ToastItem({
     }
   }, [isPaused, schedule, toast.duration]);
   const icon = getIcon(toast.type);
-  return /* @__PURE__ */ jsxs3("div", { className: cx("toast", exiting && "exit"), style: styleVars, role: "status", "aria-live": "polite", children: [
-    /* @__PURE__ */ jsx7("span", { className: "icon", "aria-hidden": true, children: icon }),
-    /* @__PURE__ */ jsxs3("div", { className: "body", children: [
-      /* @__PURE__ */ jsx7("div", { className: "message", children: toast.message }),
-      toast.action && /* @__PURE__ */ jsx7("div", { className: "actions", children: /* @__PURE__ */ jsx7(
-        "button",
-        {
-          type: "button",
-          className: "actionButton",
-          onClick: () => {
-            toast.action?.onClick();
-            triggerDismiss();
-          },
-          children: toast.action.label
-        }
-      ) })
-    ] }),
-    toast.dismissible !== false && /* @__PURE__ */ jsx7(
-      "button",
-      {
-        type: "button",
-        className: "closeButton",
-        onClick: triggerDismiss,
-        "aria-label": "Dismiss notification",
-        children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
-          "path",
+  return /* @__PURE__ */ jsxs3(
+    ToastPrimitive.Root,
+    {
+      open,
+      onOpenChange: (nextOpen) => {
+        if (!nextOpen) triggerDismiss();
+      },
+      duration: 2147483647,
+      className: "toast",
+      style: styleVars,
+      children: [
+        /* @__PURE__ */ jsx7("span", { className: "icon", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsxs3("div", { className: "body", children: [
+          /* @__PURE__ */ jsx7(ToastPrimitive.Description, { className: "message", children: toast.message }),
+          toast.action && /* @__PURE__ */ jsx7("div", { className: "actions", children: /* @__PURE__ */ jsx7(
+            ToastPrimitive.Action,
+            {
+              asChild: true,
+              altText: toast.action.label,
+              children: /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  className: "actionButton",
+                  onClick: () => {
+                    toast.action?.onClick();
+                    triggerDismiss();
+                  },
+                  children: toast.action.label
+                }
+              )
+            }
+          ) })
+        ] }),
+        toast.dismissible !== false && /* @__PURE__ */ jsx7(ToastPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+          "button",
           {
-            d: "M11 3L3 11M3 3l8 8",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round"
+            type: "button",
+            className: "closeButton",
+            "aria-label": "Dismiss notification",
+            children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
+              "path",
+              {
+                d: "M11 3L3 11M3 3l8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+              }
+            ) })
           }
         ) })
-      }
-    )
-  ] });
+      ]
+    }
+  );
 }
 function getPalette(type) {
   switch (type) {
@@ -546,105 +554,376 @@ var Checkbox = React3.forwardRef(
 );
 Checkbox.displayName = "Checkbox";
 
-// src/components/dropdown/Dropdown.tsx
-import { useState as useState2, useRef as useRef3, useEffect as useEffect3 } from "react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
-function Dropdown({
-  options,
-  value,
-  onChange,
-  placeholder = "All",
-  className,
-  allowClear = true,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-label": ariaLabel
-}) {
-  const [open, setOpen] = useState2(false);
-  const ref = useRef3(null);
-  const selected = options.find((o) => o.value === value);
-  const isActive = allowClear && value !== "";
-  useEffect3(() => {
-    function handleClickOutside(e) {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
+// src/components/multi-select/MultiSelect.tsx
+import * as React4 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+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__ */ jsx11(DropdownMenuPrimitive.Root, { modal: false, children: /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cx("wrapper", fullWidth && "wrapper-fullWidth", className),
+        children: [
+          /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              ref,
+              type: "button",
+              className: cx(
+                "trigger",
+                selectedOptions.length > 0 && "trigger-hasValue"
+              ),
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              disabled,
+              children: [
+                /* @__PURE__ */ jsx11("span", { className: "value", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx11("span", { className: "placeholder", children: placeholder }) : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  visibleOptions.map((option) => /* @__PURE__ */ jsx11("span", { className: "chip", children: option.label }, option.value)),
+                  overflowCount > 0 ? /* @__PURE__ */ jsxs4("span", { className: "chip chip-summary", children: [
+                    "+",
+                    overflowCount
+                  ] }) : null
+                ] }) }),
+                /* @__PURE__ */ jsx11("span", { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(
+                  "svg",
+                  {
+                    viewBox: "0 0 10 10",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    children: /* @__PURE__ */ jsx11(
+                      "path",
+                      {
+                        d: "M2 3.5L5 6.5L8 3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ) }),
+          name ? value.map((entry) => /* @__PURE__ */ jsx11("input", { type: "hidden", name, value: entry }, entry)) : null,
+          /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+            DropdownMenuPrimitive.Content,
+            {
+              className: "menu",
+              sideOffset: 4,
+              align: "start",
+              children: options.map((option) => {
+                const selected = selectedSet.has(option.value);
+                return /* @__PURE__ */ jsxs4(
+                  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__ */ jsx11(
+                        "span",
+                        {
+                          className: cx(
+                            "indicator",
+                            selected && "indicator-selected",
+                            option.disabled && "indicator-disabled"
+                          ),
+                          "aria-hidden": "true",
+                          children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { forceMount: true, children: /* @__PURE__ */ jsx11(
+                            "svg",
+                            {
+                              viewBox: "0 0 16 16",
+                              width: "16",
+                              height: "16",
+                              fill: "none",
+                              xmlns: "http://www.w3.org/2000/svg",
+                              children: /* @__PURE__ */ jsx11(
+                                "path",
+                                {
+                                  d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                                  stroke: "currentColor",
+                                  strokeWidth: "1.8",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round"
+                                }
+                              )
+                            }
+                          ) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11("span", { className: "option-label", children: option.label })
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          ) })
+        ]
       }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: cx("wrapper", className), ref, children: [
-    /* @__PURE__ */ jsxs4(
-      "button",
+    ) });
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+
+// src/components/dropdown/Dropdown.tsx
+import * as React6 from "react";
+
+// src/components/select/Select.tsx
+import * as React5 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { jsx as jsx12, jsxs as jsxs5 } from "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__ */ jsx12("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: /* @__PURE__ */ jsxs5(
+      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__ */ jsx11("span", { className: cx("chevron", open && "chevron-open"), children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", children: /* @__PURE__ */ jsx11("path", { d: "M2 3.5L5 6.5L8 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+          /* @__PURE__ */ jsxs5(
+            SelectPrimitive.Trigger,
+            {
+              ref,
+              id,
+              className: "select",
+              form,
+              title,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              onBlur,
+              onFocus,
+              children: [
+                /* @__PURE__ */ jsx12(SelectPrimitive.Value, { placeholder }),
+                /* @__PURE__ */ jsx12(SelectPrimitive.Icon, { className: "chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    viewBox: "0 0 10 10",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    children: /* @__PURE__ */ jsx12(
+                      "path",
+                      {
+                        d: "M2 3.5L5 6.5L8 3.5",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx12(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+            SelectPrimitive.Content,
+            {
+              className: "content",
+              position: "popper",
+              sideOffset: 4,
+              align: "start",
+              children: /* @__PURE__ */ jsxs5(SelectPrimitive.Viewport, { className: "viewport", children: [
+                placeholder && allowEmptyOption ? /* @__PURE__ */ jsxs5(
+                  SelectPrimitive.Item,
+                  {
+                    value: EMPTY_OPTION_VALUE,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ jsx12(
+                            "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__ */ jsx12(SelectPrimitive.ItemText, { children: placeholder })
+                    ]
+                  }
+                ) : null,
+                options.map((opt) => /* @__PURE__ */ jsxs5(
+                  SelectPrimitive.Item,
+                  {
+                    value: opt.value,
+                    disabled: opt.disabled,
+                    className: "item",
+                    children: [
+                      /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          width: "16",
+                          height: "16",
+                          "aria-hidden": "true",
+                          className: "indicatorIcon",
+                          children: /* @__PURE__ */ jsx12(
+                            "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__ */ jsx12(SelectPrimitive.ItemText, { children: opt.label })
+                    ]
+                  },
+                  opt.value
+                ))
+              ] })
+            }
+          ) })
         ]
       }
-    ),
-    open && /* @__PURE__ */ jsxs4("div", { className: "menu", children: [
-      allowClear && /* @__PURE__ */ jsx11(
-        "button",
-        {
-          type: "button",
-          className: cx("option", value === "" && "option-selected"),
-          onClick: () => {
-            onChange("");
-            setOpen(false);
-          },
-          children: placeholder
-        }
-      ),
-      options.map((opt) => /* @__PURE__ */ jsx11(
-        "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
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Dropdown = React6.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder = "All",
+    allowClear = true,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx13(
+      Select,
+      {
+        ref,
+        options,
+        value,
+        onChange,
+        placeholder,
+        allowEmptyOption: allowClear,
+        fullWidth: false,
+        ...rest
+      }
+    );
+  }
+);
+Dropdown.displayName = "Dropdown";
 
 // src/components/dropdown-menu/DropdownMenu.tsx
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive2 from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function DropdownMenu(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Root, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Root, { ...props });
 }
 function DropdownMenuTrigger(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Trigger, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Trigger, { ...props });
 }
 function DropdownMenuGroup(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Group, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Group, { ...props });
 }
 function DropdownMenuPortal(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Portal, { ...props });
 }
 function DropdownMenuSub(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Sub, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Sub, { ...props });
 }
 function DropdownMenuRadioGroup(props) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.RadioGroup, { ...props });
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.RadioGroup, { ...props });
 }
 function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.Content,
+  return /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.Portal, { children: /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.Content,
     {
       sideOffset,
       className: cx("content", className),
@@ -658,8 +937,8 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.Item,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.Item,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx(
@@ -676,13 +955,13 @@ function DropdownMenuCheckboxItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
-    DropdownMenuPrimitive.CheckboxItem,
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive2.CheckboxItem,
     {
       className: cx("item", "insetItem", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx14("span", { className: "indicator", children: /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx14(
           "svg",
           {
             viewBox: "0 0 16 16",
@@ -690,7 +969,7 @@ function DropdownMenuCheckboxItem({
             height: "16",
             "aria-hidden": "true",
             className: "indicatorIcon",
-            children: /* @__PURE__ */ jsx12(
+            children: /* @__PURE__ */ jsx14(
               "path",
               {
                 d: "M3.5 8.5 6.5 11.5 12.5 4.5",
@@ -713,13 +992,13 @@ function DropdownMenuRadioItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
-    DropdownMenuPrimitive.RadioItem,
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive2.RadioItem,
     {
       className: cx("item", "insetItem", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12("span", { className: "radioDot" }) }) }),
+        /* @__PURE__ */ jsx14("span", { className: "indicator", children: /* @__PURE__ */ jsx14(DropdownMenuPrimitive2.ItemIndicator, { children: /* @__PURE__ */ jsx14("span", { className: "radioDot" }) }) }),
         children
       ]
     }
@@ -730,8 +1009,8 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.Label,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.Label,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx("label", className),
@@ -743,8 +1022,8 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.Separator,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.Separator,
     {
       className: cx("separator", className),
       ...props
@@ -757,15 +1036,15 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
-    DropdownMenuPrimitive.SubTrigger,
+  return /* @__PURE__ */ jsxs6(
+    DropdownMenuPrimitive2.SubTrigger,
     {
       "data-inset": inset ? "true" : void 0,
       className: cx("item", className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx14(
           "svg",
           {
             viewBox: "0 0 16 16",
@@ -773,7 +1052,7 @@ function DropdownMenuSubTrigger({
             height: "16",
             "aria-hidden": "true",
             className: "chevron",
-            children: /* @__PURE__ */ jsx12(
+            children: /* @__PURE__ */ jsx14(
               "path",
               {
                 d: "M6 3.5 10.5 8 6 12.5",
@@ -794,8 +1073,8 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.SubContent,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.SubContent,
     {
       className: cx("content", className),
       ...props
@@ -805,20 +1084,20 @@ function DropdownMenuSubContent({
 
 // src/components/app-shell/AppShell.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect3,
   useId,
-  useRef as useRef4,
-  useState as useState4
+  useRef as useRef2,
+  useState as useState3
 } from "react";
 
 // src/theme/ThemeProvider.tsx
 import {
   createContext as createContext2,
-  useCallback as useCallback2,
+  useCallback as useCallback3,
   useContext as useContext2,
-  useEffect as useEffect4,
-  useMemo as useMemo2,
-  useState as useState3
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useState as useState2
 } from "react";
 
 // src/theme/constants.ts
@@ -828,7 +1107,7 @@ var THEME_STORAGE_KEY = "uzi-theme";
 var ACCENT_STORAGE_KEY = "uzi-accent";
 
 // src/theme/ThemeProvider.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var THEME_STORAGE_KEY2 = THEME_STORAGE_KEY;
 var ACCENT_STORAGE_KEY2 = ACCENT_STORAGE_KEY;
 var THEME_ATTRIBUTE = "data-uzi-theme";
@@ -856,10 +1135,10 @@ function ThemeProvider({
   accentStorageKey = ACCENT_STORAGE_KEY2,
   disableStorage = false
 }) {
-  const [internalTheme, setInternalTheme] = useState3(defaultTheme);
-  const [internalAccent, setInternalAccent] = useState3(defaultAccent);
-  const [systemTheme, setSystemTheme] = useState3("light");
-  useEffect4(() => {
+  const [internalTheme, setInternalTheme] = useState2(defaultTheme);
+  const [internalAccent, setInternalAccent] = useState2(defaultAccent);
+  const [systemTheme, setSystemTheme] = useState2("light");
+  useEffect2(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -873,7 +1152,7 @@ function ThemeProvider({
   const currentTheme = isThemeControlled ? theme : internalTheme;
   const currentAccent = isAccentControlled ? accent : internalAccent;
   const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
-  useEffect4(() => {
+  useEffect2(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -881,7 +1160,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  useEffect4(() => {
+  useEffect2(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -889,7 +1168,7 @@ function ThemeProvider({
     root.style.colorScheme = resolvedTheme;
     root.classList.toggle("dark", resolvedTheme === "dark");
   }, [currentAccent, resolvedTheme]);
-  const setTheme = useCallback2(
+  const setTheme = useCallback3(
     (nextTheme) => {
       if (!isThemeControlled) setInternalTheme(nextTheme);
       if (!disableStorage && typeof window !== "undefined") {
@@ -899,7 +1178,7 @@ function ThemeProvider({
     },
     [disableStorage, isThemeControlled, onThemeChange, storageKey]
   );
-  const setAccent = useCallback2(
+  const setAccent = useCallback3(
     (nextAccent) => {
       if (!isAccentControlled) setInternalAccent(nextAccent);
       if (!disableStorage && typeof window !== "undefined") {
@@ -909,10 +1188,10 @@ function ThemeProvider({
     },
     [accentStorageKey, disableStorage, isAccentControlled, onAccentChange]
   );
-  const toggleTheme = useCallback2(() => {
+  const toggleTheme = useCallback3(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   }, [resolvedTheme, setTheme]);
-  const value = useMemo2(
+  const value = useMemo3(
     () => ({
       theme: currentTheme,
       resolvedTheme,
@@ -923,7 +1202,7 @@ function ThemeProvider({
     }),
     [currentAccent, currentTheme, resolvedTheme, setAccent, setTheme, toggleTheme]
   );
-  return /* @__PURE__ */ jsx13(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx15(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   const context = useContext2(ThemeContext);
@@ -932,9 +1211,9 @@ function useTheme() {
 }
 
 // src/components/theme-toggle-button/ThemeToggleButton.tsx
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function MoonIcon() {
-  return /* @__PURE__ */ jsx14("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx16(
     "path",
     {
       d: "M20 15.2A8.5 8.5 0 0 1 8.8 4 9 9 0 1 0 20 15.2Z",
@@ -946,9 +1225,9 @@ function MoonIcon() {
   ) });
 }
 function SunIcon() {
-  return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: [
-    /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.8" }),
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs7("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: "16", height: "16", fill: "none", children: [
+    /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "4", stroke: "currentColor", strokeWidth: "1.8" }),
+    /* @__PURE__ */ jsx16(
       "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",
@@ -969,7 +1248,7 @@ function ThemeToggleButton({
 }) {
   const { resolvedTheme, toggleTheme } = useTheme();
   const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Button,
     {
       type: "button",
@@ -984,15 +1263,15 @@ function ThemeToggleButton({
       },
       ...rest,
       children: [
-        resolvedTheme === "dark" ? /* @__PURE__ */ jsx14(SunIcon, {}) : /* @__PURE__ */ jsx14(MoonIcon, {}),
-        showLabel && /* @__PURE__ */ jsx14("span", { children: nextThemeLabel })
+        resolvedTheme === "dark" ? /* @__PURE__ */ jsx16(SunIcon, {}) : /* @__PURE__ */ jsx16(MoonIcon, {}),
+        showLabel && /* @__PURE__ */ jsx16("span", { children: nextThemeLabel })
       ]
     }
   );
 }
 
 // src/components/top-bar/TopBar.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function TopBar({
   leading,
   brand,
@@ -1011,24 +1290,24 @@ function TopBar({
   ...rest
 }) {
   const shouldStick = isSticky ?? sticky;
-  const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx15("a", { href: brandHref, className: "topBarBrand", children: /* @__PURE__ */ jsx15("span", { className: "topBarBrandContent", children: brand }) }) : /* @__PURE__ */ jsx15("div", { className: "topBarBrand", children: /* @__PURE__ */ jsx15("span", { className: "topBarBrandContent", children: brand }) });
-  return /* @__PURE__ */ jsx15(
+  const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx17("a", { href: brandHref, className: "topBarBrand", children: /* @__PURE__ */ jsx17("span", { className: "topBarBrandContent", children: brand }) }) : /* @__PURE__ */ jsx17("div", { className: "topBarBrand", children: /* @__PURE__ */ jsx17("span", { className: "topBarBrandContent", children: brand }) });
+  return /* @__PURE__ */ jsx17(
     "header",
     {
       className: cx("topBar", !shouldStick && "topBarStatic", className),
       ...rest,
-      children: /* @__PURE__ */ jsxs7("div", { className: cx("topBarInner", innerClassName), children: [
-        /* @__PURE__ */ jsxs7("div", { className: "topBarStart", children: [
+      children: /* @__PURE__ */ jsxs8("div", { className: cx("topBarInner", innerClassName), children: [
+        /* @__PURE__ */ jsxs8("div", { className: "topBarStart", children: [
           leading,
           brandingLocation === "left" && brandNode,
           start
         ] }),
-        brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx15("div", { className: "topBarCenter", children: /* @__PURE__ */ jsxs7("div", { className: "topBarCenterGroup", children: [
+        brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx17("div", { className: "topBarCenter", children: /* @__PURE__ */ jsxs8("div", { className: "topBarCenterGroup", children: [
           brandingLocation === "center" && brandNode,
           center ?? children
         ] }) }) : null,
-        /* @__PURE__ */ jsxs7("div", { className: "topBarActions", children: [
-          showThemeToggle && /* @__PURE__ */ jsx15(ThemeToggleButton, { ...themeToggleProps }),
+        /* @__PURE__ */ jsxs8("div", { className: "topBarActions", children: [
+          showThemeToggle && /* @__PURE__ */ jsx17(ThemeToggleButton, { ...themeToggleProps }),
           actions
         ] })
       ] })
@@ -1037,7 +1316,7 @@ function TopBar({
 }
 
 // src/components/app-shell/AppShell.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 var DESKTOP_BREAKPOINT = 960;
 function getIsDesktop() {
   if (typeof window === "undefined") return false;
@@ -1062,16 +1341,16 @@ function AppShell({
   hamburgerLabel = "Toggle navigation",
   onSidebarToggle
 }) {
-  const [isDesktop, setIsDesktop] = useState4(false);
-  const [sidebarOpen, setSidebarOpen] = useState4(false);
-  const [transitionsReady, setTransitionsReady] = useState4(false);
-  const prevIsDesktopRef = useRef4(false);
-  const closeKeyRef = useRef4(closeSidebarOnChangeKey);
-  const sidebarRef = useRef4(null);
-  const hamburgerRef = useRef4(null);
-  const mainRef = useRef4(null);
+  const [isDesktop, setIsDesktop] = useState3(false);
+  const [sidebarOpen, setSidebarOpen] = useState3(false);
+  const [transitionsReady, setTransitionsReady] = useState3(false);
+  const prevIsDesktopRef = useRef2(false);
+  const closeKeyRef = useRef2(closeSidebarOnChangeKey);
+  const sidebarRef = useRef2(null);
+  const hamburgerRef = useRef2(null);
+  const mainRef = useRef2(null);
   const sidebarId = useId();
-  useEffect5(() => {
+  useEffect3(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1093,7 +1372,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  useEffect5(() => {
+  useEffect3(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1118,13 +1397,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  useEffect5(() => {
+  useEffect3(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  useEffect5(() => {
+  useEffect3(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
@@ -1137,7 +1416,7 @@ function AppShell({
     className
   );
   const sidebarClasses = cx("appShellSidebar", sidebarOpen && "appShellSidebarOpen", sidebarClassName);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: shellClasses,
@@ -1146,11 +1425,11 @@ function AppShell({
       "data-desktop": isDesktop ? "true" : "false",
       "data-sidebar-open": sidebarOpen ? "true" : "false",
       children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           TopBar,
           {
             className: cx("appShellTopbar", topbarClassName),
-            leading: /* @__PURE__ */ jsx16(
+            leading: /* @__PURE__ */ jsx18(
               "button",
               {
                 ref: hamburgerRef,
@@ -1160,7 +1439,7 @@ function AppShell({
                 "aria-label": hamburgerLabel,
                 "aria-expanded": sidebarOpen,
                 "aria-controls": sidebarId,
-                children: /* @__PURE__ */ jsx16("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx16("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) })
+                children: /* @__PURE__ */ jsx18("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("path", { d: "M3 6h18M3 12h18M3 18h18", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) })
               }
             ),
             brand,
@@ -1172,16 +1451,16 @@ function AppShell({
             themeToggleProps
           }
         ),
-        !isDesktop && sidebarOpen && /* @__PURE__ */ jsx16("div", { className: "appShellBackdrop", onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx16("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
-        /* @__PURE__ */ jsx16("main", { ref: mainRef, className: cx("appShellMain", mainClassName), children })
+        !isDesktop && sidebarOpen && /* @__PURE__ */ jsx18("div", { className: "appShellBackdrop", onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx18("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
+        /* @__PURE__ */ jsx18("main", { ref: mainRef, className: cx("appShellMain", mainClassName), children })
       ]
     }
   );
 }
 
 // src/components/sidebar-nav/SidebarNav.tsx
-import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultIsActive = (item, path) => {
   if (item.active !== void 0) return item.active;
   if (!item.href) return false;
@@ -1208,21 +1487,21 @@ function SidebarNav({
   const style = iconSize !== void 0 ? {
     ["--sidebar-nav-icon-size"]: typeof iconSize === "number" ? `${iconSize}px` : iconSize
   } : void 0;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "nav",
     {
       className: cx("uziSidebarNav", collapsed && "uziSidebarNavCollapsed", className),
       "aria-label": ariaLabel,
       style,
       children: [
-        header ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavHeader", children: header }) : null,
-        /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSections", children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs9(
+        header ? /* @__PURE__ */ jsx19("div", { className: "uziSidebarNavHeader", children: header }) : null,
+        /* @__PURE__ */ jsx19("div", { className: "uziSidebarNavSections", children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs10(
           "div",
           {
             className: cx("uziSidebarNavSection", sectionClassName),
             children: [
-              section.label && !collapsed ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSectionLabel", children: section.label }) : null,
-              /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSectionItems", children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx17(
+              section.label && !collapsed ? /* @__PURE__ */ jsx19("div", { className: "uziSidebarNavSectionLabel", children: section.label }) : null,
+              /* @__PURE__ */ jsx19("div", { className: "uziSidebarNavSectionItems", children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx19(
                 SidebarNavEntry,
                 {
                   item,
@@ -1237,7 +1516,7 @@ function SidebarNav({
           },
           section.id ?? `section-${sectionIndex}`
         )) }),
-        footer ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavFooter", children: footer }) : null
+        footer ? /* @__PURE__ */ jsx19("div", { className: "uziSidebarNavFooter", children: footer }) : null
       ]
     }
   );
@@ -1258,14 +1537,14 @@ function SidebarNavEntry({
     item.disabled && "uziSidebarNavItemDisabled",
     itemClassName
   );
-  const content = /* @__PURE__ */ jsxs9(Fragment, { children: [
-    item.icon && /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavIcon", children: item.icon }),
-    !collapsed ? /* @__PURE__ */ jsxs9("span", { className: "uziSidebarNavItemBody", children: [
-      /* @__PURE__ */ jsxs9("span", { className: "uziSidebarNavLabelRow", children: [
-        /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavLabel", children: item.label }),
-        item.badge && /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavBadge", children: item.badge })
+  const content = /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    item.icon && /* @__PURE__ */ jsx19("span", { className: "uziSidebarNavIcon", children: item.icon }),
+    !collapsed ? /* @__PURE__ */ jsxs10("span", { className: "uziSidebarNavItemBody", children: [
+      /* @__PURE__ */ jsxs10("span", { className: "uziSidebarNavLabelRow", children: [
+        /* @__PURE__ */ jsx19("span", { className: "uziSidebarNavLabel", children: item.label }),
+        item.badge && /* @__PURE__ */ jsx19("span", { className: "uziSidebarNavBadge", children: item.badge })
       ] }),
-      item.description ? /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavDescription", children: item.description }) : null
+      item.description ? /* @__PURE__ */ jsx19("span", { className: "uziSidebarNavDescription", children: item.description }) : null
     ] }) : null
   ] });
   const handleClick = () => {
@@ -1274,7 +1553,7 @@ function SidebarNavEntry({
     onItemClick?.(item);
   };
   if (!item.href) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
@@ -1289,7 +1568,7 @@ function SidebarNavEntry({
     );
   }
   if (item.disabled) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         className: classes,
@@ -1300,7 +1579,7 @@ function SidebarNavEntry({
       }
     );
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "a",
     {
       className: classes,
@@ -1314,6 +1593,58 @@ function SidebarNavEntry({
     }
   );
 }
+
+// src/components/skeleton/Skeleton.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function Skeleton({
+  width,
+  height,
+  radius = "md",
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: cx("skeleton", `radius-${radius}`, className),
+      style: { width, height, ...style },
+      "aria-hidden": "true",
+      ...rest
+    }
+  );
+}
+
+// src/components/progress/Progress.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Progress({
+  value,
+  tone = "default",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const clamped = Math.max(0, Math.min(100, value));
+  return /* @__PURE__ */ jsx21(
+    "div",
+    {
+      className: cx("track", className),
+      role: "progressbar",
+      "aria-valuenow": clamped,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": ariaLabel,
+      ...rest,
+      children: /* @__PURE__ */ jsx21(
+        "div",
+        {
+          className: cx("fill", `tone-${tone}`),
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+}
 export {
   Alert,
   AppShell,
@@ -1342,8 +1673,12 @@ export {
   Label,
   Modal,
   ModalOverlay,
+  MultiSelect,
   Pill,
+  Progress,
+  Select,
   SidebarNav,
+  Skeleton,
   ThemeProvider,
   ThemeToggleButton,
   ToastProvider,