@umami/react-zen 0.192.0 → 0.195.0

package/dist/index.d.mts

@@ -405,17 +405,18 @@ declare function Grid({ display, justifyContent, justifyItems, alignContent, ali
 
 interface DataCardProps extends GridProps {
     data?: {
-        id: string;
-        label: string;
-        value: string;
+        label: ReactNode;
+        value: any;
     }[];
+    labelWidth?: string;
 }
-declare function DataCard({ data, ...props }: DataCardProps): react.JSX.Element;
+declare function DataCard({ data, labelWidth, ...props }: DataCardProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
+    displayMode?: 'table' | 'cards';
 }
-declare function DataTable({ data, className, children, ...props }: DataTableProps): react.JSX.Element;
+declare function DataTable({ data, displayMode, className, children, ...props }: DataTableProps): react.JSX.Element;
 interface DataColumnProps extends Omit<HTMLAttributes<any>, 'children'> {
     id: string;
     label?: ReactNode;

package/dist/index.d.ts

@@ -405,17 +405,18 @@ declare function Grid({ display, justifyContent, justifyItems, alignContent, ali
 
 interface DataCardProps extends GridProps {
     data?: {
-        id: string;
-        label: string;
-        value: string;
+        label: ReactNode;
+        value: any;
     }[];
+    labelWidth?: string;
 }
-declare function DataCard({ data, ...props }: DataCardProps): react.JSX.Element;
+declare function DataCard({ data, labelWidth, ...props }: DataCardProps): react.JSX.Element;
 
 interface DataTableProps extends TableProps {
     data?: any[];
+    displayMode?: 'table' | 'cards';
 }
-declare function DataTable({ data, className, children, ...props }: DataTableProps): react.JSX.Element;
+declare function DataTable({ data, displayMode, className, children, ...props }: DataTableProps): react.JSX.Element;
 interface DataColumnProps extends Omit<HTMLAttributes<any>, 'children'> {
     id: string;
     label?: ReactNode;

package/dist/index.js

@@ -34,8 +34,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js
 var require_use_sync_external_store_shim_production = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.production.js"(exports) {
-    var import_react199 = __toESM(require("react"));
-    var React5 = import_react199.default;
+    var import_react200 = __toESM(require("react"));
+    var React5 = import_react200.default;
     function is2(x, y) {
       return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
     }
@@ -87,7 +87,7 @@ var require_use_sync_external_store_shim_production = __commonJS({
 // node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js
 var require_use_sync_external_store_shim_development = __commonJS({
   "node_modules/.pnpm/use-sync-external-store@1.5.0_react@19.1.1/node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) {
-    var import_react199 = __toESM(require("react"));
+    var import_react200 = __toESM(require("react"));
     (function() {
       function is2(x, y) {
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
@@ -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_react199.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState20 = 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;
+      var React5 = import_react200.default, objectIs = "function" === typeof Object.is ? Object.is : is2, useState20 = 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());
     })();
@@ -33271,20 +33271,21 @@ function Container({
 }
 
 // src/components/DataCard.tsx
+var import_react188 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-function DataCard({ data = [], ...props }) {
+function DataCard({ data = [], labelWidth = "auto", ...props }) {
   const rows = mapIdProperty(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Grid, { width: "100%", ...props, children: rows.map((row) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(Grid, { columns: "180px 1fr", border: "bottom", gapX: "3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", weight: "bold", children: row?.label }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", children: row?.value }) })
-    ] }, row?.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Grid, { width: "100%", columns: `${labelWidth} 1fr`, border: true, borderRadius: "3", padding: "6", ...props, children: rows.map((row, index) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react188.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", border: "bottom", borderColor: "4", paddingRight: "6", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", weight: "bold", children: row?.label }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Row, { paddingY: "3", border: "bottom", borderColor: "4", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Text, { size: "3", children: row?.value }) })
+    ] }, index);
   }) });
 }
 
 // src/components/DataTable.tsx
 var import_classnames28 = __toESM(require_classnames());
-var import_react188 = require("react");
+var import_react189 = require("react");
 
 // src/components/Table.tsx
 var import_classnames27 = __toESM(require_classnames());
@@ -33343,11 +33344,17 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 
 // src/components/DataTable.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var import_react189 = require("react");
-function DataTable({ data = [], className, children, ...props }) {
+var import_react190 = require("react");
+function DataTable({
+  data = [],
+  displayMode = "table",
+  className,
+  children,
+  ...props
+}) {
   const rows = mapIdProperty(data);
   const widths = [];
-  const columns = import_react188.Children.map(children, (child) => {
+  const columns = import_react189.Children.map(children, (child) => {
     if (child) {
       widths.push(child?.props?.width || "1fr");
       return { ...child?.props };
@@ -33355,12 +33362,21 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
+  if (displayMode === "cards") {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Grid, { id: "grid", width: "100%", gap: "6", children: rows.map((row, index) => {
+      const items = columns?.filter(({ hidden }) => !hidden).map(({ id, label, children: children2 }) => {
+        const value = typeof children2 === "function" ? children2(row, index) : children2 ?? row[id];
+        return { id, label, value };
+      });
+      return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DataCard, { data: items }, `${row.id}-${index}`);
+    }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ (0, import_react189.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ (0, import_react190.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableBody, { children: rows.map((row, index) => {
       return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
@@ -33368,14 +33384,14 @@ function DataTable({ data = [], className, children, ...props }) {
           return null;
         }
         const value = typeof children2 === "function" ? children2(row, index) : children2 || row[id];
-        return /* @__PURE__ */ (0, import_react189.createElement)(
+        return /* @__PURE__ */ (0, import_react190.createElement)(
           TableCell,
           {
             ...cellProps,
             key: id,
             className: (0, import_classnames28.default)(DataTable_default.cell, className2)
           },
-          as ? (0, import_react188.createElement)(as, {}, value) : value
+          as ? (0, import_react189.createElement)(as, {}, value) : value
         );
       }) }, index);
     }) })
@@ -33402,7 +33418,7 @@ function Dots({ size = "md", className, ...props }) {
 }
 
 // src/components/FloatingTooltip.tsx
-var import_react190 = require("react");
+var import_react191 = require("react");
 var import_classnames31 = __toESM(require_classnames());
 
 // src/components/Tooltip.tsx
@@ -33429,8 +33445,8 @@ var FloatingTooltip_default = { "floating": "FloatingTooltip_floating__ZjM4N" };
 // src/components/FloatingTooltip.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function FloatingTooltip({ className, style, children, ...props }) {
-  const [position, setPosition] = (0, import_react190.useState)({ x: -1e3, y: -1e3 });
-  (0, import_react190.useEffect)(() => {
+  const [position, setPosition] = (0, import_react191.useState)({ x: -1e3, y: -1e3 });
+  (0, import_react191.useEffect)(() => {
     const handler = (e) => {
       setPosition({ x: e.clientX, y: e.clientY });
     };
@@ -33486,7 +33502,7 @@ function Heading2({
 }
 
 // src/components/HoverTrigger.tsx
-var import_react191 = require("react");
+var import_react192 = require("react");
 
 // css-modules:E:\dev\umami-react-zen\src\components\HoverTrigger.module.css
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
@@ -33502,12 +33518,12 @@ function HoverTrigger({
   children
 }) {
   const [triggerElement, popupElement] = children;
-  const triggerRef = (0, import_react191.useRef)(null);
-  const [open, setOpen] = (0, import_react191.useState)(isOpen);
-  const isOverMenu = (0, import_react191.useRef)(false);
-  const isOverButton = (0, import_react191.useRef)(false);
-  const timeout = (0, import_react191.useRef)(null);
-  (0, import_react191.useEffect)(() => {
+  const triggerRef = (0, import_react192.useRef)(null);
+  const [open, setOpen] = (0, import_react192.useState)(isOpen);
+  const isOverMenu = (0, import_react192.useRef)(false);
+  const isOverButton = (0, import_react192.useRef)(false);
+  const timeout = (0, import_react192.useRef)(null);
+  (0, import_react192.useEffect)(() => {
     if (isOpen !== open) {
       setOpen(isOpen);
     }
@@ -33615,7 +33631,7 @@ function Image({
 }
 
 // src/components/InlineEditField.tsx
-var import_react192 = require("react");
+var import_react193 = require("react");
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\InlineEditField.module.css
@@ -33634,8 +33650,8 @@ function InlineEditField({
   onCancel,
   ...props
 }) {
-  const [value, setValue] = (0, import_react192.useState)(defaultValue);
-  const [edit, setEdit] = (0, import_react192.useState)(defaultEdit);
+  const [value, setValue] = (0, import_react193.useState)(defaultValue);
+  const [edit, setEdit] = (0, import_react193.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
   const handleChange = (e) => {
     const val = e.target.value;
@@ -33646,7 +33662,7 @@ function InlineEditField({
     setEdit(false);
     onCommit?.(value);
   };
-  const handleCancel = (0, import_react192.useCallback)(() => {
+  const handleCancel = (0, import_react193.useCallback)(() => {
     setEdit(false);
     setValue(defaultValue);
     onCancel?.();
@@ -33786,7 +33802,7 @@ function Modal2({
 }
 
 // src/components/Navbar.tsx
-var import_react193 = require("react");
+var import_react194 = require("react");
 var import_classnames38 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Navbar.module.css
@@ -33794,16 +33810,16 @@ var Navbar_default = { "nav": "Navbar_nav__ZjEwM", "item": "Navbar_item__MWVhZ",
 
 // src/components/Navbar.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-var NavbarContext = (0, import_react193.createContext)(void 0);
+var NavbarContext = (0, import_react194.createContext)(void 0);
 var useNavigationContext = () => {
-  const context = (0, import_react193.useContext)(NavbarContext);
+  const context = (0, import_react194.useContext)(NavbarContext);
   if (!context) {
     throw new Error("useNavigationContext must be used within a Navbar");
   }
   return context;
 };
 function Navbar({ showArrow = true, className, children, ...props }) {
-  const [activeMenu, setActiveMenu] = (0, import_react193.useState)("");
+  const [activeMenu, setActiveMenu] = (0, import_react194.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NavbarContext.Provider, { value: { activeMenu, setActiveMenu }, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { ...props, className: (0, import_classnames38.default)(Navbar_default.nav, className), children }) });
 }
 function NavbarItem({ label, children, className, ...props }) {
@@ -33821,7 +33837,7 @@ function NavbarItem({ label, children, className, ...props }) {
 }
 
 // src/components/NavMenu.tsx
-var import_react194 = require("react");
+var import_react195 = require("react");
 var import_classnames39 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\NavMenu.module.css
@@ -33829,7 +33845,7 @@ var NavMenu_default = { "navmenu": "NavMenu_navmenu__MzRmN", "item": "NavMenu_it
 
 // src/components/NavMenu.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var NavMenuContext = (0, import_react194.createContext)(null);
+var NavMenuContext = (0, import_react195.createContext)(null);
 function NavMenu({
   itemBackgroundColor = "2",
   muteItems,
@@ -33855,7 +33871,7 @@ function NavMenuGroup({
   children,
   ...props
 }) {
-  const [minimized, setMinimized] = (0, import_react194.useState)(!!isMinimized);
+  const [minimized, setMinimized] = (0, import_react195.useState)(!!isMinimized);
   const handleClick = () => {
     if (allowMinimize) {
       setMinimized((state) => !state);
@@ -33891,7 +33907,7 @@ function NavMenuGroup({
   );
 }
 function NavMenuItem({ isSelected, className, children, ...props }) {
-  const { itemBackgroundColor } = (0, import_react194.useContext)(NavMenuContext);
+  const { itemBackgroundColor } = (0, import_react195.useContext)(NavMenuContext);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Row,
     {
@@ -33905,11 +33921,11 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 }
 
 // src/components/PasswordField.tsx
-var import_react195 = require("react");
+var import_react196 = require("react");
 var import_classnames40 = __toESM(require_classnames());
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function PasswordField({ label, className, ...props }) {
-  const [show, setShow] = (0, import_react195.useState)(false);
+  const [show, setShow] = (0, import_react196.useState)(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
@@ -34016,7 +34032,7 @@ function Radio2({ children, className, ...props }) {
 }
 
 // src/components/SearchField.tsx
-var import_react196 = require("react");
+var import_react197 = require("react");
 var import_classnames45 = __toESM(require_classnames());
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function SearchField2({
@@ -34030,7 +34046,7 @@ function SearchField2({
   className,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react196.useState)(defaultValue);
+  const [search, setSearch] = (0, import_react197.useState)(defaultValue);
   const searchValue = useDebounce(search, delay);
   const handleChange = (value2) => {
     setSearch(value2);
@@ -34044,7 +34060,7 @@ function SearchField2({
     onSearch?.("");
     onChange?.("");
   };
-  (0, import_react196.useEffect)(() => {
+  (0, import_react197.useEffect)(() => {
     if (delay > 0) {
       onSearch?.(searchValue);
     }
@@ -34069,7 +34085,7 @@ function SearchField2({
 }
 
 // src/components/Select.tsx
-var import_react197 = require("react");
+var import_react198 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Select.module.css
@@ -34097,7 +34113,7 @@ function Select2({
   children,
   ...props
 }) {
-  const [search, setSearch] = (0, import_react197.useState)("");
+  const [search, setSearch] = (0, import_react198.useState)("");
   const handleChange = (e) => {
     onSelectionChange?.(e);
     onChange?.(e);
@@ -34162,7 +34178,7 @@ function Select2({
 }
 
 // src/components/Sidebar.tsx
-var import_react198 = require("react");
+var import_react199 = require("react");
 var import_classnames47 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Sidebar.module.css
@@ -34170,7 +34186,7 @@ var Sidebar_default = { "sidebar": "Sidebar_sidebar__NDg2N", "header": "Sidebar_
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var SidebarContext = (0, import_react198.createContext)(null);
+var SidebarContext = (0, import_react199.createContext)(null);
 function Sidebar({
   itemBackgroundColor = "2",
   isCollapsed,
@@ -34226,7 +34242,7 @@ function SidebarItem({
   children,
   ...props
 }) {
-  const { isCollapsed, itemBackgroundColor } = (0, import_react198.useContext)(SidebarContext);
+  const { isCollapsed, itemBackgroundColor } = (0, import_react199.useContext)(SidebarContext);
   return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)($4e3b923658d69c60$export$8c610744efcf8a1d, { delay: 0, closeDelay: 0, isDisabled: !isCollapsed, children: [
     /* @__PURE__ */ (0, import_jsx_runtime64.jsx)($f645667febf57a63$export$35a3bebf7ef2d934, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
       Row,

package/dist/index.mjs

@@ -33149,14 +33149,15 @@ function Container({
 }
 
 // src/components/DataCard.tsx
+import { Fragment as Fragment8 } from "react";
 import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
-function DataCard({ data = [], ...props }) {
+function DataCard({ data = [], labelWidth = "auto", ...props }) {
   const rows = mapIdProperty(data);
-  return /* @__PURE__ */ jsx41(Grid, { width: "100%", ...props, children: rows.map((row) => {
-    return /* @__PURE__ */ jsxs22(Grid, { columns: "180px 1fr", border: "bottom", gapX: "3", children: [
-      /* @__PURE__ */ jsx41(Row, { paddingY: "3", children: /* @__PURE__ */ jsx41(Text, { size: "3", weight: "bold", children: row?.label }) }),
-      /* @__PURE__ */ jsx41(Row, { paddingY: "3", children: /* @__PURE__ */ jsx41(Text, { size: "3", children: row?.value }) })
-    ] }, row?.id);
+  return /* @__PURE__ */ jsx41(Grid, { width: "100%", columns: `${labelWidth} 1fr`, border: true, borderRadius: "3", padding: "6", ...props, children: rows.map((row, index) => {
+    return /* @__PURE__ */ jsxs22(Fragment8, { children: [
+      /* @__PURE__ */ jsx41(Row, { paddingY: "3", border: "bottom", borderColor: "4", paddingRight: "6", children: /* @__PURE__ */ jsx41(Text, { size: "3", weight: "bold", children: row?.label }) }),
+      /* @__PURE__ */ jsx41(Row, { paddingY: "3", border: "bottom", borderColor: "4", children: /* @__PURE__ */ jsx41(Text, { size: "3", children: row?.value }) })
+    ] }, index);
   }) });
 }
 
@@ -33222,7 +33223,13 @@ var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "Da
 // src/components/DataTable.tsx
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
 import { createElement as createElement8 } from "react";
-function DataTable({ data = [], className, children, ...props }) {
+function DataTable({
+  data = [],
+  displayMode = "table",
+  className,
+  children,
+  ...props
+}) {
   const rows = mapIdProperty(data);
   const widths = [];
   const columns = Children2.map(children, (child) => {
@@ -33233,6 +33240,15 @@ function DataTable({ data = [], className, children, ...props }) {
     return null;
   })?.filter((n) => n);
   const gridTemplateColumns2 = widths.join(" ");
+  if (displayMode === "cards") {
+    return /* @__PURE__ */ jsx43(Grid, { id: "grid", width: "100%", gap: "6", children: rows.map((row, index) => {
+      const items = columns?.filter(({ hidden }) => !hidden).map(({ id, label, children: children2 }) => {
+        const value = typeof children2 === "function" ? children2(row, index) : children2 ?? row[id];
+        return { id, label, value };
+      });
+      return /* @__PURE__ */ jsx43(DataCard, { data: items }, `${row.id}-${index}`);
+    }) });
+  }
   return /* @__PURE__ */ jsxs23(Table2, { ...props, className: (0, import_classnames28.default)(DataTable_default.datatable, className), children: [
     /* @__PURE__ */ jsx43(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns?.map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
@@ -33370,7 +33386,7 @@ import { useRef as useRef8, useState as useState13, useEffect as useEffect11 } f
 var HoverTrigger_default = { "wrapper": "HoverTrigger_wrapper__NGFlN" };
 
 // src/components/HoverTrigger.tsx
-import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs26 } from "react/jsx-runtime";
 var CLOSE_DELAY = 500;
 function HoverTrigger({
   isOpen,
@@ -33421,7 +33437,7 @@ function HoverTrigger({
       }
     }, closeDelay);
   };
-  return /* @__PURE__ */ jsxs26(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs26(Fragment9, { children: [
     /* @__PURE__ */ jsx48("div", { ref: triggerRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: triggerElement }),
     /* @__PURE__ */ jsx48(Popover2, { isOpen: open, isNonModal: true, triggerRef, children: /* @__PURE__ */ jsx48(
       "div",
@@ -33590,7 +33606,7 @@ var import_classnames36 = __toESM(require_classnames());
 var Menu_default = { "menu": "Menu_menu__YTM5N", "separator": "Menu_separator__YjFhN", "section": "Menu_section__NWFlM", "header": "Menu_header__YzJkN", "item": "Menu_item__NGRkO", "checkmark": "Menu_checkmark__MWQ1O", "hideCheckmark": "Menu_hideCheckmark__YzBhM", "label": "Menu_label__NGMxM", "content": "Menu_content__MTA2O" };
 
 // src/components/Menu.tsx
-import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 function Menu2({ className, children, ...props }) {
   return /* @__PURE__ */ jsx53($3674c52c6b3c5bce$export$d9b273488cd8ce6f, { ...props, className: (0, import_classnames36.default)(Menu_default.menu, className), children });
 }
@@ -33624,7 +33640,7 @@ function MenuSection({
     maxHeight,
     overflow: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
     title && /* @__PURE__ */ jsx53($72a5793c14baf454$export$8b251419efc915eb, { className: Menu_default.header, children: title }),
     /* @__PURE__ */ jsx53(
       $3674c52c6b3c5bce$export$4b1545b4f2016d26,
@@ -33789,12 +33805,12 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 import { useState as useState17 } from "react";
 var import_classnames40 = __toESM(require_classnames());
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs33 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState17(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs33(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment11, { children: [
     label && /* @__PURE__ */ jsx57(Label2, { children: label }),
     /* @__PURE__ */ jsxs33($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames40.default)(TextField_default.field, className), children: [
       /* @__PURE__ */ jsx57($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
@@ -33822,10 +33838,10 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs34 } from "react/jsx-runtime";
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx59($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs34(Fragment11, { children: [
+    return /* @__PURE__ */ jsxs34(Fragment12, { children: [
       /* @__PURE__ */ jsx59("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx59("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showPercentage && /* @__PURE__ */ jsx59("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -33839,13 +33855,13 @@ var import_classnames43 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx60, jsxs as jsxs35 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx60($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames43.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs35(Fragment12, { children: [
+    return /* @__PURE__ */ jsxs35(Fragment13, { children: [
       /* @__PURE__ */ jsxs35("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx60("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx60(
@@ -33900,7 +33916,7 @@ function Radio2({ children, className, ...props }) {
 // src/components/SearchField.tsx
 import { useState as useState18, useEffect as useEffect12 } from "react";
 var import_classnames45 = __toESM(require_classnames());
-import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -33931,7 +33947,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs37(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs37(Fragment14, { children: [
     label && /* @__PURE__ */ jsx62(Label2, { children: label }),
     /* @__PURE__ */ jsxs37(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -34135,7 +34151,7 @@ var import_classnames48 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment14, jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx65, jsxs as jsxs40 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
   return /* @__PURE__ */ jsxs40($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames48.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ jsxs40("div", { className: Slider_default.header, children: [
@@ -34144,7 +34160,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
     ] }),
     /* @__PURE__ */ jsx65($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs40(Fragment14, { children: [
+      return /* @__PURE__ */ jsxs40(Fragment15, { children: [
         /* @__PURE__ */ jsx65(
           "div",
           {
@@ -34269,10 +34285,10 @@ var import_classnames52 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment15, jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx70, jsxs as jsxs44 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs44(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment16, { children: [
     label && /* @__PURE__ */ jsx70(Label2, { children: label }),
     /* @__PURE__ */ jsx70(
       $efde0372d7a700fe$export$d2b052e7b4be1756,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.192.0",
+  "version": "0.195.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",