@tomny-dev/uzi 0.1.7 → 0.1.9-pr.2.1.1

package/dist/index.js

@@ -546,105 +546,257 @@ 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);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: cx("wrapper", className), ref, children: [
-    /* @__PURE__ */ jsxs4(
-      "button",
+// src/components/multi-select/MultiSelect.tsx
+import * as React4 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Fragment, 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",
       {
-        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__ */ 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__ */ 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(Fragment, { 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
+                );
+              })
+            }
+          ) })
         ]
       }
-    ),
-    open && /* @__PURE__ */ jsxs4("div", { className: "menu", children: [
-      allowClear && /* @__PURE__ */ jsx11(
-        "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 { jsx as jsx12, jsxs as jsxs5 } from "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__ */ jsxs5("div", { className: cx("wrapper", fullWidth && "wrapper-fullWidth", className), children: [
+      /* @__PURE__ */ jsxs5(
+        "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__ */ jsx12("option", { value: "", disabled: !allowEmptyOption, children: placeholder }) : null,
+            options.map((opt) => /* @__PURE__ */ jsx12("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+          ]
         }
       ),
-      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
-      ))
-    ] })
-  ] });
-}
+      /* @__PURE__ */ jsx12("span", { 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" }) }) })
+    ] });
+  }
+);
+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 +810,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 +828,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 +842,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 +865,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 +882,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 +895,8 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.Separator,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.Separator,
     {
       className: cx("separator", className),
       ...props
@@ -757,15 +909,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 +925,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 +946,8 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
-    DropdownMenuPrimitive.SubContent,
+  return /* @__PURE__ */ jsx14(
+    DropdownMenuPrimitive2.SubContent,
     {
       className: cx("content", className),
       ...props
@@ -805,20 +957,20 @@ function DropdownMenuSubContent({
 
 // src/components/app-shell/AppShell.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect4,
   useId,
-  useRef as useRef4,
-  useState as useState4
+  useRef as useRef3,
+  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 useEffect3,
+  useMemo as useMemo3,
+  useState as useState2
 } from "react";
 
 // src/theme/constants.ts
@@ -828,7 +980,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 +1008,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");
+  useEffect3(() => {
     setSystemTheme(getSystemTheme());
     if (!disableStorage) {
       const storedTheme = window.localStorage.getItem(storageKey);
@@ -873,7 +1025,7 @@ function ThemeProvider({
   const currentTheme = isThemeControlled ? theme : internalTheme;
   const currentAccent = isAccentControlled ? accent : internalAccent;
   const resolvedTheme = currentTheme === "system" ? systemTheme : currentTheme;
-  useEffect4(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handleChange = () => setSystemTheme(mediaQuery.matches ? "dark" : "light");
@@ -881,7 +1033,7 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handleChange);
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     root.setAttribute(THEME_ATTRIBUTE, resolvedTheme);
@@ -889,7 +1041,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 +1051,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 +1061,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 +1075,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 +1084,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 +1098,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 +1121,7 @@ function ThemeToggleButton({
 }) {
   const { resolvedTheme, toggleTheme } = useTheme();
   const nextThemeLabel = resolvedTheme === "dark" ? lightLabel : darkLabel;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Button,
     {
       type: "button",
@@ -984,15 +1136,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 +1163,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 +1189,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 +1214,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 = useRef3(false);
+  const closeKeyRef = useRef3(closeSidebarOnChangeKey);
+  const sidebarRef = useRef3(null);
+  const hamburgerRef = useRef3(null);
+  const mainRef = useRef3(null);
   const sidebarId = useId();
-  useEffect5(() => {
+  useEffect4(() => {
     const desktop = getIsDesktop();
     setIsDesktop(desktop);
     setSidebarOpen(desktop);
@@ -1093,7 +1245,7 @@ function AppShell({
       window.removeEventListener("resize", handleResize);
     };
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     if (isDesktop || !sidebarOpen) return;
     const mainElement = mainRef.current;
     const closeSidebar = () => setSidebarOpen(false);
@@ -1118,13 +1270,13 @@ function AppShell({
       document.removeEventListener("touchmove", closeSidebar);
     };
   }, [sidebarOpen, isDesktop]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (!isDesktop && closeKeyRef.current !== closeSidebarOnChangeKey) {
       setSidebarOpen(false);
     }
     closeKeyRef.current = closeSidebarOnChangeKey;
   }, [closeSidebarOnChangeKey, isDesktop]);
-  useEffect5(() => {
+  useEffect4(() => {
     onSidebarToggle?.(sidebarOpen);
   }, [sidebarOpen, onSidebarToggle]);
   const toggleSidebar = () => setSidebarOpen((open) => !open);
@@ -1137,7 +1289,7 @@ function AppShell({
     className
   );
   const sidebarClasses = cx("appShellSidebar", sidebarOpen && "appShellSidebarOpen", sidebarClassName);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: shellClasses,
@@ -1146,11 +1298,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 +1312,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 +1324,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 Fragment2, 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 +1360,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 +1389,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 +1410,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(Fragment2, { 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 +1426,7 @@ function SidebarNavEntry({
     onItemClick?.(item);
   };
   if (!item.href) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       "button",
       {
         type: "button",
@@ -1289,7 +1441,7 @@ function SidebarNavEntry({
     );
   }
   if (item.disabled) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         className: classes,
@@ -1300,7 +1452,7 @@ function SidebarNavEntry({
       }
     );
   }
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     "a",
     {
       className: classes,
@@ -1314,6 +1466,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 +1546,12 @@ export {
   Label,
   Modal,
   ModalOverlay,
+  MultiSelect,
   Pill,
+  Progress,
+  Select,
   SidebarNav,
+  Skeleton,
   ThemeProvider,
   ThemeToggleButton,
   ToastProvider,