@tomny-dev/uzi 0.1.8 → 0.1.9-pr.2.1.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,
@@ -608,105 +612,257 @@ 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);
-      }
-    }
-    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",
+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",
       {
-        type: "button",
-        className: cx("trigger", isActive && "trigger-active"),
-        onClick: () => setOpen((o) => !o),
-        "aria-labelledby": ariaLabelledBy,
-        "aria-label": ariaLabel,
+        className: cx("wrapper", fullWidth && "wrapper-fullWidth", className),
         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_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
+                );
+              })
+            }
+          ) })
         ]
       }
-    ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu", children: [
-      allowClear && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "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 import_jsx_runtime12 = require("react/jsx-runtime");
+var Select = React5.forwardRef(
+  ({
+    options,
+    value,
+    onChange,
+    placeholder,
+    allowEmptyOption = false,
+    fullWidth = true,
+    className,
+    ...rest
+  }, ref) => {
+    const isPlaceholderShown = Boolean(placeholder) && value === "";
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "select",
         {
-          type: "button",
-          className: cx("option", value === "" && "option-selected"),
-          onClick: () => {
-            onChange("");
-            setOpen(false);
-          },
-          children: placeholder
+          ref,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          className: cx("select", isPlaceholderShown && "select-placeholder"),
+          "data-placeholder-shown": isPlaceholderShown ? "true" : void 0,
+          ...rest,
+          children: [
+            placeholder ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", disabled: !allowEmptyOption, children: placeholder }) : null,
+            options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+          ]
         }
       ),
-      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
-      ))
-    ] })
-  ] });
-}
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { 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" }) }) })
+    ] });
+  }
+);
+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 +876,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 +894,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 +908,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 +931,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 +948,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 +961,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 +975,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 +991,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 +1012,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 +1022,10 @@ function DropdownMenuSubContent({
 }
 
 // src/components/app-shell/AppShell.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/theme/ThemeProvider.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/theme/constants.ts
 var UZI_THEMES = ["light", "dark", "system"];
@@ -878,12 +1034,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_react3.createContext)(void 0);
 function isTheme(value) {
   return UZI_THEMES.includes(value);
 }
@@ -906,10 +1062,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_react3.useState)(defaultTheme);
+  const [internalAccent, setInternalAccent] = (0, import_react3.useState)(defaultAccent);
+  const [systemTheme, setSystemTheme] = (0, import_react3.useState)("light");
+  (0, import_react3.useEffect)(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -923,7 +1079,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_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -931,7 +1087,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -939,7 +1095,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_react3.useCallback)(
     (nextTheme) => {
       if (!isThemeControlled) setInternalTheme(nextTheme);
       if (!disableStorage && typeof window !== "undefined") {
@@ -949,7 +1105,7 @@ function ThemeProvider({
     },
     [disableStorage, isThemeControlled, onThemeChange, storageKey]
   );
-  const setAccent = (0, import_react4.useCallback)(
+  const setAccent = (0, import_react3.useCallback)(
     (nextAccent) => {
       if (!isAccentControlled) setInternalAccent(nextAccent);
       if (!disableStorage && typeof window !== "undefined") {
@@ -959,10 +1115,10 @@ function ThemeProvider({
     },
     [accentStorageKey, disableStorage, isAccentControlled, onAccentChange]
   );
-  const toggleTheme = (0, import_react4.useCallback)(() => {
+  const toggleTheme = (0, import_react3.useCallback)(() => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   }, [resolvedTheme, setTheme]);
-  const value = (0, import_react4.useMemo)(
+  const value = (0, import_react3.useMemo)(
     () => ({
       theme: currentTheme,
       resolvedTheme,
@@ -973,18 +1129,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_react3.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 +1152,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 +1175,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 +1190,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 +1217,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 +1243,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 +1268,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_react4.useState)(false);
+  const [sidebarOpen, setSidebarOpen] = (0, import_react4.useState)(false);
+  const [transitionsReady, setTransitionsReady] = (0, import_react4.useState)(false);
+  const prevIsDesktopRef = (0, import_react4.useRef)(false);
+  const closeKeyRef = (0, import_react4.useRef)(closeSidebarOnChangeKey);
+  const sidebarRef = (0, import_react4.useRef)(null);
+  const hamburgerRef = (0, import_react4.useRef)(null);
+  const mainRef = (0, import_react4.useRef)(null);
+  const sidebarId = (0, import_react4.useId)();
+  (0, import_react4.useEffect)(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1143,7 +1299,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1168,13 +1324,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
@@ -1187,7 +1343,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 +1352,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 +1366,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 +1378,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 +1414,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 +1443,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 +1464,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 +1480,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 +1495,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 +1506,7 @@ function SidebarNavEntry({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "a",
     {
       className: classes,
@@ -1364,6 +1520,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 +1601,12 @@ function SidebarNavEntry({
   Label,
   Modal,
   ModalOverlay,
+  MultiSelect,
   Pill,
+  Progress,
+  Select,
   SidebarNav,
+  Skeleton,
   ThemeProvider,
   ThemeToggleButton,
   ToastProvider,