@raxrai/stylelab-ui 0.3.0 → 0.3.2

package/README.md

@@ -49,6 +49,8 @@ export default function RootLayout({ children }) {
 }
 ```
 
+Optional props: `storageKey` (default `"stylelab-theme"`) for the localStorage key; `persistTheme` (default `true`). When `persistTheme={false}`, the provider does not read or write localStorage (theme is fixed to `defaultTheme` unless you change it in memory).
+
 ### 3. Use components
 
 ```tsx
@@ -191,6 +193,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 +215,14 @@ import { cn, useFocusTrap, useClickOutside, useKeyboardNavigation, getNextListIn
 
 ## Changelog
 
+### [0.3.2]
+
+- **ThemeProvider** — Optional `persistTheme` prop (default `true`). When `persistTheme={false}`, the provider does not read from or write to localStorage: theme stays at `defaultTheme` unless changed in memory. Use for fixed-theme pages (e.g. landing, docs) or nested providers where only the inner tree should persist. Optional `storageKey` (default `"stylelab-theme"`) still applies when `persistTheme` is true.
+
+### [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

@@ -341,12 +341,14 @@ function getStoredTheme(storageKey, defaultTheme) {
 function ThemeProvider({
   children,
   defaultTheme = "minimal",
-  storageKey = "stylelab-theme"
+  storageKey = "stylelab-theme",
+  persistTheme = true
 }) {
   const [theme, setThemeState] = (0, import_react.useState)(defaultTheme);
   (0, import_react.useEffect)(() => {
+    if (!persistTheme) return;
     setThemeState((prev) => getStoredTheme(storageKey, prev));
-  }, [storageKey]);
+  }, [storageKey, persistTheme]);
   (0, import_react.useEffect)(() => {
     if (typeof document !== "undefined") {
       try {
@@ -361,12 +363,12 @@ function ThemeProvider({
       if (typeof document !== "undefined") {
         try {
           document.documentElement.dataset.stylelabTheme = next;
-          localStorage.setItem(storageKey, next);
+          if (persistTheme) localStorage.setItem(storageKey, next);
         } catch (_) {
         }
       }
     },
-    [storageKey]
+    [storageKey, persistTheme]
   );
   const value = (0, import_react.useMemo)(
     () => ({ theme, setTheme }),
@@ -4993,6 +4995,7 @@ function Dropdown({
   value: controlledValue,
   defaultValue,
   onValueChange,
+  disabled = false,
   className,
   style,
   theme: themeProp,
@@ -5028,10 +5031,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 +5080,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 +5113,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 +5133,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 +5179,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
           }
         ),