@umami/react-zen 0.218.0 → 0.220.0

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());
     })();
@@ -30900,6 +30900,77 @@ var letterSpacingMap = {
   wider: "tracking-wider",
   widest: "tracking-widest"
 };
+var lineHeightMap = {
+  none: "leading-none",
+  tight: "leading-tight",
+  snug: "leading-snug",
+  normal: "leading-normal",
+  relaxed: "leading-relaxed",
+  loose: "leading-loose",
+  "3": "leading-3",
+  "4": "leading-4",
+  "5": "leading-5",
+  "6": "leading-6",
+  "7": "leading-7",
+  "8": "leading-8",
+  "9": "leading-9",
+  "10": "leading-10"
+};
+var whitespaceMap = {
+  normal: "whitespace-normal",
+  nowrap: "whitespace-nowrap",
+  pre: "whitespace-pre",
+  "pre-line": "whitespace-pre-line",
+  "pre-wrap": "whitespace-pre-wrap",
+  "break-spaces": "whitespace-break-spaces"
+};
+var wordBreakMap = {
+  normal: "break-normal",
+  words: "break-words",
+  all: "break-all",
+  keep: "break-keep"
+};
+var verticalAlignMap = {
+  baseline: "align-baseline",
+  top: "align-top",
+  middle: "align-middle",
+  bottom: "align-bottom",
+  "text-top": "align-text-top",
+  "text-bottom": "align-text-bottom",
+  sub: "align-sub",
+  super: "align-super"
+};
+var textDecorationStyleMap = {
+  solid: "decoration-solid",
+  double: "decoration-double",
+  dotted: "decoration-dotted",
+  dashed: "decoration-dashed",
+  wavy: "decoration-wavy"
+};
+var textIndentMap = {
+  "0": "indent-0",
+  px: "indent-px",
+  "0.5": "indent-0.5",
+  "1": "indent-1",
+  "1.5": "indent-1.5",
+  "2": "indent-2",
+  "2.5": "indent-2.5",
+  "3": "indent-3",
+  "3.5": "indent-3.5",
+  "4": "indent-4",
+  "5": "indent-5",
+  "6": "indent-6",
+  "7": "indent-7",
+  "8": "indent-8",
+  "9": "indent-9",
+  "10": "indent-10",
+  "11": "indent-11",
+  "12": "indent-12",
+  "14": "indent-14",
+  "16": "indent-16",
+  "20": "indent-20",
+  "24": "indent-24"
+};
 var gridAutoFlowMap = {
   row: "grid-flow-row",
   column: "grid-flow-col",
@@ -30907,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",
@@ -31043,9 +31146,33 @@ function mapTextTransform(value) {
 function mapLetterSpacing(value) {
   return mapResponsive(value, (v) => letterSpacingMap[v]);
 }
+function mapLineHeight(value) {
+  return mapResponsive(value, (v) => lineHeightMap[v]);
+}
+function mapWhitespace(value) {
+  return mapResponsive(value, (v) => whitespaceMap[v]);
+}
+function mapWordBreak(value) {
+  return mapResponsive(value, (v) => wordBreakMap[v]);
+}
+function mapVerticalAlign(value) {
+  return mapResponsive(value, (v) => verticalAlignMap[v]);
+}
+function mapTextDecorationStyle(value) {
+  return mapResponsive(value, (v) => textDecorationStyleMap[v]);
+}
+function mapTextIndent(value) {
+  return mapResponsive(value, (v) => textIndentMap[v]);
+}
 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)]);
 }
@@ -31413,15 +31540,22 @@ import { jsx as jsx3 } from "react/jsx-runtime";
 function Text({
   color,
   size = "base",
-  spacing,
   weight,
   align,
+  spacing,
+  lineHeight,
   wrap,
+  whitespace,
+  wordBreak,
   transform,
+  indent,
+  verticalAlign,
   truncate,
   italic,
   underline,
   strikethrough,
+  decorationStyle,
+  decorationColor,
   as = "span",
   render,
   className,
@@ -31430,19 +31564,27 @@ function Text({
 }) {
   const Component = as;
   const colorStr = color === true ? "true" : color;
+  const decorationColorStr = decorationColor === true ? "true" : decorationColor;
   const classes = cn(
     "text-foreground-primary",
     mapFontSize(size),
-    mapTextAlign(align),
-    mapTextWrap(wrap),
     mapFontWeight(weight),
+    mapTextAlign(align),
     mapLetterSpacing(spacing),
+    mapLineHeight(lineHeight),
+    mapTextWrap(wrap),
+    mapWhitespace(whitespace),
+    mapWordBreak(wordBreak),
     mapTextTransform(transform),
+    mapTextIndent(indent),
+    mapVerticalAlign(verticalAlign),
     mapTextColor(colorStr),
     truncate && "truncate",
     italic && "italic",
     underline && "underline",
     strikethrough && "line-through",
+    mapTextDecorationStyle(decorationStyle),
+    decorationColorStr && `decoration-${decorationColorStr}`,
     className
   );
   const renderProps = {
@@ -32401,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),
@@ -32411,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
@@ -32634,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";
@@ -39776,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") {
@@ -39794,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: {
@@ -39811,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.218.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 {