@raxrai/stylelab-ui 0.3.0 → 0.3.1

package/README.md

@@ -191,6 +191,7 @@ Implements focus trap and scroll lock when open.
 | `items`       | `{ value, label, disabled? }[]` | — | Options               |
 | `value` / `defaultValue` | `string`        | —       | Controlled / initial     |
 | `onValueChange`| `(value: string) => void` | —     | Selection callback       |
+| `disabled`     | `boolean`       | `false` | When true, does not open; trigger is non-interactive |
 
 Keyboard: Enter/Space to open, Arrows to move, Enter to select, Escape to close.
 
@@ -212,6 +213,10 @@ import { cn, useFocusTrap, useClickOutside, useKeyboardNavigation, getNextListIn
 
 ## Changelog
 
+### [0.3.1]
+
+- **Dropdown** — `disabled` prop: when true, the dropdown does not open and the trigger is non-interactive (opacity, cursor, no popover). Use for empty or loading state.
+
 ### [0.2.0]
 
 - **Navbar** — Optional responsive API: pass `logo`, `items` (`{ href, label }[]`), and `right` (e.g. theme switcher). On small screens nav links become a hamburger menu that opens as an overlay (no layout shift), with the theme’s navbar background; glass and clay use an opaque panel so content doesn’t show through. Desktop shows full nav row. Menu closes on link click or outside click. You can still pass `children` for a custom layout. Exported types: `NavbarItem`, `NavbarProps`.

package/dist/index.cjs

@@ -4993,6 +4993,7 @@ function Dropdown({
   value: controlledValue,
   defaultValue,
   onValueChange,
+  disabled = false,
   className,
   style,
   theme: themeProp,
@@ -5028,10 +5029,13 @@ function Dropdown({
     });
   }, []);
   (0, import_react15.useLayoutEffect)(() => {
-    if (open) {
+    if (open && !disabled) {
       updatePosition();
     }
-  }, [open, updatePosition, items.length]);
+  }, [open, disabled, updatePosition, items.length]);
+  (0, import_react15.useEffect)(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   (0, import_react15.useEffect)(() => {
     if (!open) return;
     const onScrollOrResize = () => updatePosition();
@@ -5074,6 +5078,7 @@ function Dropdown({
   }, [open, displayValue, items]);
   const handleKeyDown = (0, import_react15.useCallback)(
     (e) => {
+      if (disabled) return;
       if (!open) {
         if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
           e.preventDefault();
@@ -5106,15 +5111,17 @@ function Dropdown({
         selectIndex(highlightedIndex);
       }
     },
-    [open, highlightedIndex, items.length, selectIndex]
+    [disabled, open, highlightedIndex, items.length, selectIndex]
   );
   const selectedLabel = displayValue ? items.find((i) => i.value === displayValue)?.label ?? displayValue : placeholder;
   const defaultTrigger = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "span",
     {
       className: cn(
-        "inline-flex min-w-[8rem] cursor-pointer items-center justify-between rounded-lg border border-transparent px-3 py-2 text-sm font-medium transition-colors",
-        itemHighlightClass,
+        "inline-flex min-w-[8rem] items-center justify-between rounded-lg border border-transparent px-3 py-2 text-sm font-medium transition-colors",
+        !disabled && "cursor-pointer",
+        !disabled && itemHighlightClass,
+        disabled && "cursor-not-allowed opacity-60",
         classNames.trigger
       ),
       children: [
@@ -5124,7 +5131,7 @@ function Dropdown({
     }
   );
   const trigger = triggerProp ?? defaultTrigger;
-  const popover = open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const popover = open && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "ul",
     {
       ref: listRef,
@@ -5170,11 +5177,13 @@ function Dropdown({
           {
             ref: triggerRef,
             role: "button",
-            tabIndex: 0,
+            tabIndex: disabled ? -1 : 0,
             "aria-haspopup": "listbox",
             "aria-expanded": open,
+            "aria-disabled": disabled,
             "aria-activedescendant": open && items[highlightedIndex] ? `dropdown-option-${items[highlightedIndex].value}` : void 0,
-            onClick: () => setOpen((o) => !o),
+            onClick: () => !disabled && setOpen((o) => !o),
+            className: disabled ? "cursor-not-allowed" : void 0,
             children: trigger
           }
         ),