@raxrai/stylelab-ui 0.3.0 → 0.3.2

package/dist/index.d.mts

@@ -217,13 +217,15 @@ type DropdownProps = {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** When true, the dropdown does not open and the trigger is non-interactive. */
+    disabled?: boolean;
     className?: string;
     style?: React.CSSProperties;
     theme?: StyleLabTheme;
     /** Slot classNames for trigger, popover, and item. */
     classNames?: DropdownClassNames;
 };
-declare function Dropdown({ trigger: triggerProp, placeholder, items, value: controlledValue, defaultValue, onValueChange, className, style, theme: themeProp, classNames, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ trigger: triggerProp, placeholder, items, value: controlledValue, defaultValue, onValueChange, disabled, className, style, theme: themeProp, classNames, }: DropdownProps): react.JSX.Element;
 
 type FlashcardProps = {
     question: string;
@@ -415,11 +417,13 @@ type ThemeContextValue = {
     theme: StyleLabTheme;
     setTheme: (theme: StyleLabTheme) => void;
 };
-declare function ThemeProvider({ children, defaultTheme, storageKey, }: {
+declare function ThemeProvider({ children, defaultTheme, storageKey, persistTheme, }: {
     children: ReactNode;
     defaultTheme?: StyleLabTheme;
     /** localStorage key for persisting theme. Defaults to "stylelab-theme". */
     storageKey?: string;
+    /** When false, theme is not read from or written to localStorage. */
+    persistTheme?: boolean;
 }): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 

package/dist/index.d.ts

@@ -217,13 +217,15 @@ type DropdownProps = {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    /** When true, the dropdown does not open and the trigger is non-interactive. */
+    disabled?: boolean;
     className?: string;
     style?: React.CSSProperties;
     theme?: StyleLabTheme;
     /** Slot classNames for trigger, popover, and item. */
     classNames?: DropdownClassNames;
 };
-declare function Dropdown({ trigger: triggerProp, placeholder, items, value: controlledValue, defaultValue, onValueChange, className, style, theme: themeProp, classNames, }: DropdownProps): react.JSX.Element;
+declare function Dropdown({ trigger: triggerProp, placeholder, items, value: controlledValue, defaultValue, onValueChange, disabled, className, style, theme: themeProp, classNames, }: DropdownProps): react.JSX.Element;
 
 type FlashcardProps = {
     question: string;
@@ -415,11 +417,13 @@ type ThemeContextValue = {
     theme: StyleLabTheme;
     setTheme: (theme: StyleLabTheme) => void;
 };
-declare function ThemeProvider({ children, defaultTheme, storageKey, }: {
+declare function ThemeProvider({ children, defaultTheme, storageKey, persistTheme, }: {
     children: ReactNode;
     defaultTheme?: StyleLabTheme;
     /** localStorage key for persisting theme. Defaults to "stylelab-theme". */
     storageKey?: string;
+    /** When false, theme is not read from or written to localStorage. */
+    persistTheme?: boolean;
 }): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 

package/dist/index.mjs

@@ -285,12 +285,14 @@ function getStoredTheme(storageKey, defaultTheme) {
 function ThemeProvider({
   children,
   defaultTheme = "minimal",
-  storageKey = "stylelab-theme"
+  storageKey = "stylelab-theme",
+  persistTheme = true
 }) {
   const [theme, setThemeState] = useState(defaultTheme);
   useEffect(() => {
+    if (!persistTheme) return;
     setThemeState((prev) => getStoredTheme(storageKey, prev));
-  }, [storageKey]);
+  }, [storageKey, persistTheme]);
   useEffect(() => {
     if (typeof document !== "undefined") {
       try {
@@ -305,12 +307,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 = useMemo(
     () => ({ theme, setTheme }),
@@ -4950,6 +4952,7 @@ function Dropdown({
   value: controlledValue,
   defaultValue,
   onValueChange,
+  disabled = false,
   className,
   style,
   theme: themeProp,
@@ -4985,10 +4988,13 @@ function Dropdown({
     });
   }, []);
   useLayoutEffect(() => {
-    if (open) {
+    if (open && !disabled) {
       updatePosition();
     }
-  }, [open, updatePosition, items.length]);
+  }, [open, disabled, updatePosition, items.length]);
+  useEffect6(() => {
+    if (disabled && open) setOpen(false);
+  }, [disabled, open]);
   useEffect6(() => {
     if (!open) return;
     const onScrollOrResize = () => updatePosition();
@@ -5031,6 +5037,7 @@ function Dropdown({
   }, [open, displayValue, items]);
   const handleKeyDown = useCallback6(
     (e) => {
+      if (disabled) return;
       if (!open) {
         if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
           e.preventDefault();
@@ -5063,15 +5070,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__ */ jsxs13(
     "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: [
@@ -5081,7 +5090,7 @@ function Dropdown({
     }
   );
   const trigger = triggerProp ?? defaultTrigger;
-  const popover = open ? /* @__PURE__ */ jsx15(
+  const popover = open && !disabled ? /* @__PURE__ */ jsx15(
     "ul",
     {
       ref: listRef,
@@ -5127,11 +5136,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
           }
         ),