@umami/react-zen 0.219.0 → 0.220.0

package/dist/index.d.mts

@@ -93,8 +93,8 @@ type FlexGrow = string | number;
 type FlexShrink = string | number;
 type GridDisplay = 'none' | 'grid' | 'inline-grid';
 type GridAutoFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
-type GridTemplateRows = string;
-type GridTemplateColumns = string;
+type GridColumns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
+type GridRows = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
 type GridTemplateAreas = string;
 type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
 type JustifyItems = 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline';
@@ -386,8 +386,8 @@ interface GridProps extends Omit<BoxProps, 'display'> {
     gapX?: Responsive<Gap>;
     gapY?: Responsive<Gap>;
     autoFlow?: Responsive<GridAutoFlow>;
-    rows?: GridTemplateRows;
-    columns?: GridTemplateColumns;
+    rows?: Responsive<GridRows> | string;
+    columns?: Responsive<GridColumns> | string;
     areas?: GridTemplateAreas;
 }
 declare function Grid({ display, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, autoFlow, rows, columns, areas, className, style, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
@@ -429,7 +429,7 @@ declare function Tooltip({ children, className, showArrow, ...props }: TooltipPr
 interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
     showArrow?: boolean;
 }
-declare function TooltipBubble({ showArrow, children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
+declare function TooltipBubble({ children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingTooltipProps extends TooltipBubbleProps {
 }

package/dist/index.d.ts

@@ -93,8 +93,8 @@ type FlexGrow = string | number;
 type FlexShrink = string | number;
 type GridDisplay = 'none' | 'grid' | 'inline-grid';
 type GridAutoFlow = 'row' | 'column' | 'dense' | 'row-dense' | 'column-dense';
-type GridTemplateRows = string;
-type GridTemplateColumns = string;
+type GridColumns = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
+type GridRows = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'none' | 'subgrid';
 type GridTemplateAreas = string;
 type JustifyContent = 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
 type JustifyItems = 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline';
@@ -386,8 +386,8 @@ interface GridProps extends Omit<BoxProps, 'display'> {
     gapX?: Responsive<Gap>;
     gapY?: Responsive<Gap>;
     autoFlow?: Responsive<GridAutoFlow>;
-    rows?: GridTemplateRows;
-    columns?: GridTemplateColumns;
+    rows?: Responsive<GridRows> | string;
+    columns?: Responsive<GridColumns> | string;
     areas?: GridTemplateAreas;
 }
 declare function Grid({ display, justifyContent, justifyItems, alignContent, alignItems, gap, gapX, gapY, autoFlow, rows, columns, areas, className, style, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
@@ -429,7 +429,7 @@ declare function Tooltip({ children, className, showArrow, ...props }: TooltipPr
 interface TooltipBubbleProps extends HTMLAttributes<HTMLDivElement> {
     showArrow?: boolean;
 }
-declare function TooltipBubble({ showArrow, children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
+declare function TooltipBubble({ children, className, color: _color, ...props }: TooltipBubbleProps): react_jsx_runtime.JSX.Element;
 
 interface FloatingTooltipProps extends TooltipBubbleProps {
 }

package/dist/index.js

@@ -41,7 +41,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState18 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
@@ -54,7 +54,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -115,7 +115,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -141,7 +141,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = import_react204.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = import_react204.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -31102,6 +31102,38 @@ var gridAutoFlowMap = {
   "row-dense": "grid-flow-row-dense",
   "column-dense": "grid-flow-col-dense"
 };
+var gridColumnsMap = {
+  "1": "grid-cols-1",
+  "2": "grid-cols-2",
+  "3": "grid-cols-3",
+  "4": "grid-cols-4",
+  "5": "grid-cols-5",
+  "6": "grid-cols-6",
+  "7": "grid-cols-7",
+  "8": "grid-cols-8",
+  "9": "grid-cols-9",
+  "10": "grid-cols-10",
+  "11": "grid-cols-11",
+  "12": "grid-cols-12",
+  none: "grid-cols-none",
+  subgrid: "grid-cols-subgrid"
+};
+var gridRowsMap = {
+  "1": "grid-rows-1",
+  "2": "grid-rows-2",
+  "3": "grid-rows-3",
+  "4": "grid-rows-4",
+  "5": "grid-rows-5",
+  "6": "grid-rows-6",
+  "7": "grid-rows-7",
+  "8": "grid-rows-8",
+  "9": "grid-rows-9",
+  "10": "grid-rows-10",
+  "11": "grid-rows-11",
+  "12": "grid-rows-12",
+  none: "grid-rows-none",
+  subgrid: "grid-rows-subgrid"
+};
 var borderMap = {
   true: "border border-edge",
   none: "border-0",
@@ -31259,6 +31291,12 @@ function mapTextIndent(value) {
 function mapGridAutoFlow(value) {
   return mapResponsive(value, (v) => gridAutoFlowMap[v]);
 }
+function mapGridColumns(value) {
+  return mapResponsive(value, (v) => gridColumnsMap[v]);
+}
+function mapGridRows(value) {
+  return mapResponsive(value, (v) => gridRowsMap[v]);
+}
 function mapBorder(value) {
   return mapResponsive(value, (v) => borderMap[String(v)]);
 }
@@ -32627,6 +32665,12 @@ function Grid({
   children,
   ...props
 }) {
+  const isCustomColumns = typeof columns === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
+    columns
+  );
+  const isCustomRows = typeof rows === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
+    rows
+  );
   const classes = cn(
     mapDisplay(display),
     mapJustifyContent(justifyContent),
@@ -32637,16 +32681,18 @@ function Grid({
     mapGap(gapX, "x"),
     mapGap(gapY, "y"),
     mapGridAutoFlow(autoFlow),
+    !isCustomColumns && mapGridColumns(columns),
+    !isCustomRows && mapGridRows(rows),
     className
   );
   const inlineStyles = {
     ...style,
-    ...rows && { gridTemplateRows: rows },
-    ...columns && { gridTemplateColumns: columns },
+    ...isCustomColumns && { gridTemplateColumns: columns },
+    ...isCustomRows && { gridTemplateRows: rows },
     ...areas && { gridTemplateAreas: areas }
   };
-  const hasInlineStyles = Object.keys(inlineStyles).length > (style ? Object.keys(style).length : 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { ...props, className: classes, style: hasInlineStyles || style ? inlineStyles : void 0, children });
+  const hasInlineStyles = isCustomColumns || isCustomRows || areas || style && Object.keys(style).length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Box, { ...props, className: classes, style: hasInlineStyles ? inlineStyles : void 0, children });
 }
 
 // src/lib/utils.ts
@@ -32857,14 +32903,27 @@ var import_react171 = require("react");
 // src/components/Tooltip.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn(tooltip(), className), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipBubble, { showArrow, children }) });
-}
-function TooltipBubble({ showArrow, children, className, color: _color, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Box, { ...props, className, children: [
-    showArrow && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: "fill-surface-inverted", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn("group", tooltip(), className), children: [
+    showArrow && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)($44f671af83e7d9e0$export$746d02f47f4d381, { className: "w-2 h-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "svg",
+      {
+        viewBox: "0 0 8 8",
+        className: cn(
+          "block fill-surface-inverted",
+          "group-data-[placement=bottom]:rotate-180",
+          "group-data-[placement=left]:-rotate-90",
+          "group-data-[placement=right]:rotate-90"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M0 0 L4 4 L8 0" })
+      }
+    ) }),
+    children,
+    "for"
   ] });
 }
+function TooltipBubble({ children, className, color: _color, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Box, { ...props, className, children });
+}
 
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -39997,6 +40056,9 @@ function TabPanel2({ children, className, ...props }) {
 // src/components/ThemeButton.tsx
 var import_react203 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
+function getElement(target) {
+  return "current" in target ? target.current : target;
+}
 function applyTheme2(element, theme) {
   element.setAttribute("data-theme", theme);
   if (theme === "dark") {
@@ -40013,9 +40075,20 @@ function ThemeButton({
   ...props
 }) {
   const globalTheme = useTheme();
-  const [localTheme, setLocalTheme] = (0, import_react203.useState)("light");
+  const [localTheme, setLocalTheme] = (0, import_react203.useState)(null);
+  const initializedRef = (0, import_react203.useRef)(false);
   const isLocal = !!target;
-  const theme = isLocal ? localTheme : globalTheme.theme;
+  (0, import_react203.useEffect)(() => {
+    if (isLocal && target && !initializedRef.current) {
+      const element = getElement(target);
+      if (element) {
+        initializedRef.current = true;
+        setLocalTheme(globalTheme.theme);
+        applyTheme2(element, globalTheme.theme);
+      }
+    }
+  }, [isLocal, target, globalTheme.theme]);
+  const theme = isLocal ? localTheme ?? globalTheme.theme : globalTheme.theme;
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -40030,8 +40103,8 @@ function ThemeButton({
   });
   function handleClick(e) {
     const newTheme = theme === "light" ? "dark" : "light";
-    if (isLocal) {
-      const element = "current" in target ? target.current : target;
+    if (isLocal && target) {
+      const element = getElement(target);
       if (element) {
         applyTheme2(element, newTheme);
         setLocalTheme(newTheme);

package/dist/index.mjs

@@ -35,7 +35,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is2;
     var useState18 = React5.useState;
-    var useEffect12 = React5.useEffect;
+    var useEffect13 = React5.useEffect;
     var useLayoutEffect3 = React5.useLayoutEffect;
     var useDebugValue = React5.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
@@ -48,7 +48,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
         },
         [subscribe, value, getSnapshot]
       );
-      useEffect12(
+      useEffect13(
         function() {
           checkIfSnapshotChanged(inst) && forceUpdate({ inst });
           return subscribe(function() {
@@ -109,7 +109,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           },
           [subscribe, value, getSnapshot]
         );
-        useEffect12(
+        useEffect13(
           function() {
             checkIfSnapshotChanged(inst) && forceUpdate({ inst });
             return subscribe(function() {
@@ -135,7 +135,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect12 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React5 = __import_react2, objectIs = "function" === typeof Object.is ? Object.is : is2, useState18 = React5.useState, useEffect13 = React5.useEffect, useLayoutEffect3 = React5.useLayoutEffect, useDebugValue = React5.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports.useSyncExternalStore = void 0 !== React5.useSyncExternalStore ? React5.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     })();
@@ -30978,6 +30978,38 @@ var gridAutoFlowMap = {
   "row-dense": "grid-flow-row-dense",
   "column-dense": "grid-flow-col-dense"
 };
+var gridColumnsMap = {
+  "1": "grid-cols-1",
+  "2": "grid-cols-2",
+  "3": "grid-cols-3",
+  "4": "grid-cols-4",
+  "5": "grid-cols-5",
+  "6": "grid-cols-6",
+  "7": "grid-cols-7",
+  "8": "grid-cols-8",
+  "9": "grid-cols-9",
+  "10": "grid-cols-10",
+  "11": "grid-cols-11",
+  "12": "grid-cols-12",
+  none: "grid-cols-none",
+  subgrid: "grid-cols-subgrid"
+};
+var gridRowsMap = {
+  "1": "grid-rows-1",
+  "2": "grid-rows-2",
+  "3": "grid-rows-3",
+  "4": "grid-rows-4",
+  "5": "grid-rows-5",
+  "6": "grid-rows-6",
+  "7": "grid-rows-7",
+  "8": "grid-rows-8",
+  "9": "grid-rows-9",
+  "10": "grid-rows-10",
+  "11": "grid-rows-11",
+  "12": "grid-rows-12",
+  none: "grid-rows-none",
+  subgrid: "grid-rows-subgrid"
+};
 var borderMap = {
   true: "border border-edge",
   none: "border-0",
@@ -31135,6 +31167,12 @@ function mapTextIndent(value) {
 function mapGridAutoFlow(value) {
   return mapResponsive(value, (v) => gridAutoFlowMap[v]);
 }
+function mapGridColumns(value) {
+  return mapResponsive(value, (v) => gridColumnsMap[v]);
+}
+function mapGridRows(value) {
+  return mapResponsive(value, (v) => gridRowsMap[v]);
+}
 function mapBorder(value) {
   return mapResponsive(value, (v) => borderMap[String(v)]);
 }
@@ -32505,6 +32543,12 @@ function Grid({
   children,
   ...props
 }) {
+  const isCustomColumns = typeof columns === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
+    columns
+  );
+  const isCustomRows = typeof rows === "string" && !["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "none", "subgrid"].includes(
+    rows
+  );
   const classes = cn(
     mapDisplay(display),
     mapJustifyContent(justifyContent),
@@ -32515,16 +32559,18 @@ function Grid({
     mapGap(gapX, "x"),
     mapGap(gapY, "y"),
     mapGridAutoFlow(autoFlow),
+    !isCustomColumns && mapGridColumns(columns),
+    !isCustomRows && mapGridRows(rows),
     className
   );
   const inlineStyles = {
     ...style,
-    ...rows && { gridTemplateRows: rows },
-    ...columns && { gridTemplateColumns: columns },
+    ...isCustomColumns && { gridTemplateColumns: columns },
+    ...isCustomRows && { gridTemplateRows: rows },
     ...areas && { gridTemplateAreas: areas }
   };
-  const hasInlineStyles = Object.keys(inlineStyles).length > (style ? Object.keys(style).length : 0);
-  return /* @__PURE__ */ jsx26(Box, { ...props, className: classes, style: hasInlineStyles || style ? inlineStyles : void 0, children });
+  const hasInlineStyles = isCustomColumns || isCustomRows || areas || style && Object.keys(style).length > 0;
+  return /* @__PURE__ */ jsx26(Box, { ...props, className: classes, style: hasInlineStyles ? inlineStyles : void 0, children });
 }
 
 // src/lib/utils.ts
@@ -32738,14 +32784,27 @@ import { useEffect as useEffect2, useState as useState5 } from "react";
 // src/components/Tooltip.tsx
 import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 function Tooltip2({ children, className, showArrow, ...props }) {
-  return /* @__PURE__ */ jsx31($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn(tooltip(), className), children: /* @__PURE__ */ jsx31(TooltipBubble, { showArrow, children }) });
-}
-function TooltipBubble({ showArrow, children, className, color: _color, ...props }) {
-  return /* @__PURE__ */ jsxs15(Box, { ...props, className, children: [
-    showArrow && /* @__PURE__ */ jsx31($44f671af83e7d9e0$export$746d02f47f4d381, { className: "fill-surface-inverted", children: /* @__PURE__ */ jsx31("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx31("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    /* @__PURE__ */ jsx31(Box, { children })
+  return /* @__PURE__ */ jsxs15($4e3b923658d69c60$export$28c660c63b792dea, { ...props, className: cn("group", tooltip(), className), children: [
+    showArrow && /* @__PURE__ */ jsx31($44f671af83e7d9e0$export$746d02f47f4d381, { className: "w-2 h-2", children: /* @__PURE__ */ jsx31(
+      "svg",
+      {
+        viewBox: "0 0 8 8",
+        className: cn(
+          "block fill-surface-inverted",
+          "group-data-[placement=bottom]:rotate-180",
+          "group-data-[placement=left]:-rotate-90",
+          "group-data-[placement=right]:rotate-90"
+        ),
+        children: /* @__PURE__ */ jsx31("path", { d: "M0 0 L4 4 L8 0" })
+      }
+    ) }),
+    children,
+    "for"
   ] });
 }
+function TooltipBubble({ children, className, color: _color, ...props }) {
+  return /* @__PURE__ */ jsx31(Box, { ...props, className, children });
+}
 
 // src/components/FloatingTooltip.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -39880,8 +39939,11 @@ function TabPanel2({ children, className, ...props }) {
 }
 
 // src/components/ThemeButton.tsx
-import { useState as useState17 } from "react";
+import { useEffect as useEffect12, useRef as useRef7, useState as useState17 } from "react";
 import { jsx as jsx68, jsxs as jsxs42 } from "react/jsx-runtime";
+function getElement(target) {
+  return "current" in target ? target.current : target;
+}
 function applyTheme2(element, theme) {
   element.setAttribute("data-theme", theme);
   if (theme === "dark") {
@@ -39898,9 +39960,20 @@ function ThemeButton({
   ...props
 }) {
   const globalTheme = useTheme();
-  const [localTheme, setLocalTheme] = useState17("light");
+  const [localTheme, setLocalTheme] = useState17(null);
+  const initializedRef = useRef7(false);
   const isLocal = !!target;
-  const theme = isLocal ? localTheme : globalTheme.theme;
+  useEffect12(() => {
+    if (isLocal && target && !initializedRef.current) {
+      const element = getElement(target);
+      if (element) {
+        initializedRef.current = true;
+        setLocalTheme(globalTheme.theme);
+        applyTheme2(element, globalTheme.theme);
+      }
+    }
+  }, [isLocal, target, globalTheme.theme]);
+  const theme = isLocal ? localTheme ?? globalTheme.theme : globalTheme.theme;
   const transitions = useTransition(theme, {
     initial: { opacity: 1 },
     from: {
@@ -39915,8 +39988,8 @@ function ThemeButton({
   });
   function handleClick(e) {
     const newTheme = theme === "light" ? "dark" : "light";
-    if (isLocal) {
-      const element = "current" in target ? target.current : target;
+    if (isLocal && target) {
+      const element = getElement(target);
       if (element) {
         applyTheme2(element, newTheme);
         setLocalTheme(newTheme);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.219.0",
+  "version": "0.220.0",
   "description": "Modern, minimalist React component library",
   "homepage": "https://zen.umami.is",
   "repository": {

package/styles.css

@@ -68,6 +68,8 @@
 
 [data-theme="dark"],
 .dark {
+  color-scheme: dark;
+
   /* === SURFACES === */
   --surface-base: oklch(0.205 0 0); /* neutral-900 */
   --surface-raised: oklch(0.269 0 0); /* neutral-800 */
@@ -119,6 +121,65 @@
   --status-error-text: oklch(0.936 0.032 17.717); /* red-100 */
 }
 
+/* Light theme - for overriding dark parent (must come after dark) */
+[data-theme="light"] {
+  color-scheme: light;
+
+  /* === SURFACES (backgrounds) === */
+  --surface-base: #ffffff;
+  --surface-raised: oklch(0.985 0 0); /* neutral-50 */
+  --surface-sunken: oklch(0.97 0 0); /* neutral-100 */
+  --surface-overlay: #ffffff;
+  --surface-inverted: oklch(0.205 0 0); /* neutral-900 */
+  --surface-disabled: oklch(0.985 0 0); /* neutral-50 */
+
+  /* === TEXT === */
+  --text-primary: oklch(0.205 0 0); /* neutral-900 */
+  --text-secondary: oklch(0.439 0 0); /* neutral-600 */
+  --text-muted: oklch(0.556 0 0); /* neutral-500 */
+  --text-disabled: oklch(0.708 0 0); /* neutral-400 */
+  --text-inverted: oklch(0.985 0 0); /* neutral-50 */
+  --text-on-primary: #ffffff;
+
+  /* === BORDERS === */
+  --border-default: oklch(0.87 0 0); /* neutral-300 */
+  --border-muted: oklch(0.922 0 0); /* neutral-200 */
+  --border-strong: oklch(0.708 0 0); /* neutral-400 */
+  --border-inverted: oklch(0.205 0 0); /* neutral-900 */
+
+  /* === INTERACTIVE STATES === */
+  --interactive-bg: oklch(0.97 0 0); /* neutral-100 */
+  --interactive-bg-hover: oklch(0.922 0 0); /* neutral-200 */
+  --interactive-bg-pressed: oklch(0.87 0 0); /* neutral-300 */
+  --interactive-bg-selected: oklch(0.205 0 0); /* neutral-900 */
+  --interactive-text-selected: #ffffff;
+
+  /* === FOCUS === */
+  --focus-ring: oklch(0.708 0 0); /* neutral-400 */
+  --focus-ring-offset: #ffffff;
+
+  /* === TRACKS (sliders, progress) === */
+  --track-bg: oklch(0.922 0 0); /* neutral-200 */
+  --track-fill: oklch(0.205 0 0); /* neutral-900 */
+
+  /* === STATUS COLORS === */
+  --status-info: oklch(0.623 0.214 259.815); /* blue-500 */
+  --status-info-bg: oklch(0.97 0.014 254.604); /* blue-50 */
+  --status-info-text: oklch(0.379 0.146 265.522); /* blue-900 */
+
+  --status-success: oklch(0.723 0.219 149.579); /* green-500 */
+  --status-success-bg: oklch(0.982 0.018 155.826); /* green-50 */
+  --status-success-text: oklch(0.393 0.095 152.535); /* green-900 */
+
+  --status-warning: oklch(0.795 0.184 86.047); /* yellow-500 */
+  --status-warning-bg: oklch(0.987 0.026 102.212); /* yellow-50 */
+  --status-warning-text: oklch(0.421 0.095 57.708); /* yellow-900 */
+
+  --status-error: oklch(0.637 0.237 25.331); /* red-500 */
+  --status-error-bg: oklch(0.971 0.013 17.38); /* red-50 */
+  --status-error-text: oklch(0.396 0.141 25.723); /* red-900 */
+}
+
 
 /* ./src/components/Dots.css */
 .zen-dot {