@umami/react-zen 0.60.0 → 0.61.0

package/dist/index.mjs

@@ -25627,9 +25627,6 @@ function useForm(props = {}) {
 // src/components/forms/Form.tsx
 var import_classnames5 = __toESM(require_classnames());
 
-// css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
-var Form_default = { "form": "Form_form__ZjMwZ", "text": "Form_text__NDc1Y", "icon": "Form_icon__ZGE1Z" };
-
 // src/components/AlertBanner.tsx
 var import_classnames2 = __toESM(require_classnames());
 import { createElement } from "react";
@@ -25926,7 +25923,7 @@ var Icons = {
 };
 
 // css-modules:E:\dev\umami-react-zen\src\components\AlertBanner.module.css
-var AlertBanner_default = { "banner": "AlertBanner_banner__NTQ1Y", "message": "AlertBanner_message__NDNiZ", "title": "AlertBanner_title__ZWUwM", "close": "AlertBanner_close__MzEwM", "error": "AlertBanner_error__YWZmN", "info": "AlertBanner_info__ZmE3M", "start": "AlertBanner_start__MTRkZ", "end": "AlertBanner_end__MWIwO", "center": "AlertBanner_center__OTkwZ" };
+var AlertBanner_default = { "banner": "AlertBanner_banner__NDQ0Z", "message": "AlertBanner_message__MzQ3Y", "title": "AlertBanner_title__MDI0M", "close": "AlertBanner_close__YzE5M", "error": "AlertBanner_error__NDVmM", "start": "AlertBanner_start__YTlmZ", "end": "AlertBanner_end__ZmJlM", "center": "AlertBanner_center__Y2ZmN" };
 
 // src/components/AlertBanner.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -25953,7 +25950,7 @@ function AlertBanner({
         align && AlertBanner_default[align]
       ),
       children: [
-        (icon || variant) && /* @__PURE__ */ jsx2(Icon, { size: "md", children: variant ? createElement(AlertIcons[variant]) : icon }),
+        (icon || variant) && /* @__PURE__ */ jsx2(Icon, { size: "sm", children: variant ? createElement(AlertIcons[variant]) : icon }),
         /* @__PURE__ */ jsxs("div", { className: AlertBanner_default.message, children: [
           title && /* @__PURE__ */ jsx2("div", { className: AlertBanner_default.title, children: title }),
           description && /* @__PURE__ */ jsx2("div", { className: AlertBanner_default.description, children: description })
@@ -26250,6 +26247,9 @@ function Column({ reverse, children, ...props }) {
   return /* @__PURE__ */ jsx5(Flexbox, { ...props, direction: reverse ? "column-reverse" : "column", children });
 }
 
+// css-modules:E:\dev\umami-react-zen\src\components\forms\Form.module.css
+var Form_default = { "form": "Form_form__ZjMwZ", "text": "Form_text__NDc1Y", "icon": "Form_icon__ZGE1Z" };
+
 // src/components/forms/Form.tsx
 import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function Form({
@@ -26310,7 +26310,7 @@ function Form({
       {
         variant: "error",
         align: "center",
-        description: error instanceof Error ? error?.message : error
+        title: error instanceof Error ? error?.message : error
       }
     ),
     /* @__PURE__ */ jsx6(
@@ -26335,7 +26335,7 @@ function Row({ reverse, children, ...props }) {
 
 // src/components/forms/FormButtons.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-function FormButtons({ children, ...props }) {
+function FormButtons({ fill, children, ...props }) {
   return /* @__PURE__ */ jsx8(Row, { paddingTop: "3", gap: "3", justifyContent: "flex-end", ...props, children });
 }
 
@@ -26344,7 +26344,7 @@ import { cloneElement as cloneElement2, forwardRef, Children } from "react";
 var import_classnames6 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\forms\FormField.module.css
-var FormField_default = { "field": "FormField_field__NzY5Y", "description": "FormField_description__OGY3Y", "error": "FormField_error__NmEzO" };
+var FormField_default = { "field": "FormField_field__YTM1N", "description": "FormField_description__ZjFiM", "error": "FormField_error__NWZhM" };
 
 // src/components/forms/FormField.tsx
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -26453,9 +26453,9 @@ function LoadingButton({ isLoading, children, ...props }) {
 import { jsx as jsx14 } from "react/jsx-runtime";
 function FormSubmitButton({
   variant = "primary",
-  children,
-  disabled,
+  isDisabled,
   isLoading,
+  children,
   ...props
 }) {
   const {
@@ -26467,7 +26467,7 @@ function FormSubmitButton({
       ...props,
       type: "submit",
       variant,
-      disabled: disabled !== void 0 ? disabled : !isDirty || !isValid || isSubmitting || isSubmitted,
+      disabled: isDisabled !== void 0 ? isDisabled : !isDirty || !isValid || isSubmitting || isSubmitted,
       isLoading: isLoading !== void 0 ? isLoading : isValid && isSubmitSuccessful && (isSubmitting || isSubmitted),
       children
     }
@@ -26476,7 +26476,6 @@ function FormSubmitButton({
 
 // src/components/toast/Toast.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { createElement as createElement2 } from "react";
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
 var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ", "title": "Toast_title__OGRhM", "description": "Toast_description__MDBkN", "action": "Toast_action__MjUxO", "close": "Toast_close__ZDVjN", "info": "Toast_info__ZDRhY", "error": "Toast_error__NmEwO" };
@@ -26484,10 +26483,6 @@ var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ"
 // src/components/toast/Toast.tsx
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOAST_CLOSE_ACTION = "close";
-var icons = {
-  info: Icons.Info,
-  error: Icons.Alert
-};
 function Toast({
   id,
   message,
@@ -26502,7 +26497,6 @@ function Toast({
 }) {
   const hasActions = actions?.length > 0;
   return /* @__PURE__ */ jsxs6("div", { ...props, className: (0, import_classnames9.default)(Toast_default.toast, className, variant && Toast_default[variant]), children: [
-    /* @__PURE__ */ jsx15(Icon, { className: Toast_default.icon, size: "md", children: variant && createElement2(icons[variant]) }),
     title && /* @__PURE__ */ jsx15("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ jsx15("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
@@ -26681,12 +26675,12 @@ function eachSafely(values, each2) {
 }
 
 // node_modules/@react-spring/shared/dist/react-spring_shared.modern.mjs
+import { useRef } from "react";
+import { useState } from "react";
 import { useRef as useRef2 } from "react";
-import { useState as useState2 } from "react";
-import { useRef as useRef22 } from "react";
-import { useEffect as useEffect3, useLayoutEffect } from "react";
-import { useEffect as useEffect22, useRef as useRef3, useState as useState22 } from "react";
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect2, useLayoutEffect } from "react";
+import { useEffect as useEffect22, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { useEffect as useEffect4, useRef as useRef4 } from "react";
 import { useState as useState3 } from "react";
 var __defProp2 = Object.defineProperty;
@@ -27448,9 +27442,9 @@ function isAnimatedString(value) {
   return is.str(value) && (value[0] == "#" || /\d/.test(value) || // Do not identify a CSS variable as an AnimatedString if its SSR
   !isSSR() && cssVariableRegex.test(value) || value in (colors || {}));
 }
-var useIsomorphicLayoutEffect = isSSR() ? useEffect3 : useLayoutEffect;
+var useIsomorphicLayoutEffect = isSSR() ? useEffect2 : useLayoutEffect;
 var useIsMounted = () => {
-  const isMounted = useRef22(false);
+  const isMounted = useRef2(false);
   useIsomorphicLayoutEffect(() => {
     isMounted.current = true;
     return () => {
@@ -27460,7 +27454,7 @@ var useIsMounted = () => {
   return isMounted;
 };
 function useForceUpdate() {
-  const update3 = useState2()[1];
+  const update3 = useState()[1];
   const isMounted = useIsMounted();
   return () => {
     if (isMounted.current) {
@@ -27469,7 +27463,7 @@ function useForceUpdate() {
   };
 }
 function useMemoOne(getResult, inputs) {
-  const [initial] = useState22(
+  const [initial] = useState2(
     () => ({
       inputs,
       result: getResult()
@@ -27510,7 +27504,7 @@ function areInputsEqual(next, prev) {
   }
   return true;
 }
-var useOnce = (effect) => useEffect32(effect, emptyDeps);
+var useOnce = (effect) => useEffect3(effect, emptyDeps);
 var emptyDeps = [];
 function usePrev(value) {
   const prevRef = useRef4();
@@ -27827,8 +27821,8 @@ import * as React5 from "react";
 import { useContext } from "react";
 import { useState as useState4 } from "react";
 import * as React22 from "react";
-import { useContext as useContext3, useRef as useRef23, useMemo as useMemo2 } from "react";
-import { useRef as useRef32, useState as useState23 } from "react";
+import { useContext as useContext3, useRef as useRef22, useMemo as useMemo2 } from "react";
+import { useRef as useRef32, useState as useState22 } from "react";
 function callProp(value, ...args) {
   return is.fun(value) ? value(...args) : value;
 }
@@ -29392,7 +29386,7 @@ function useTransition(data, props, deps) {
   );
   const items = toArray(data);
   const transitions = [];
-  const usedTransitions = useRef23(null);
+  const usedTransitions = useRef22(null);
   const prevTransitions = reset ? null : usedTransitions.current;
   useIsomorphicLayoutEffect(() => {
     usedTransitions.current = transitions;
@@ -29463,8 +29457,8 @@ function useTransition(data, props, deps) {
   const forceUpdate = useForceUpdate();
   const defaultProps = getDefaultProps(props);
   const changes = /* @__PURE__ */ new Map();
-  const exitingTransitions = useRef23(/* @__PURE__ */ new Map());
-  const forceChange = useRef23(false);
+  const exitingTransitions = useRef22(/* @__PURE__ */ new Map());
+  const forceChange = useRef22(false);
   each(transitions, (t, i) => {
     const key = t.key;
     const prevPhase = t.phase;
@@ -30150,10 +30144,10 @@ import { useContext as useContext4 } from "react";
 import { createContext as createContext2 } from "react";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var ToastContext = createContext2({});
-function ToastProvider({ children, ...config2 }) {
-  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value: config2, children: [
+function ToastProvider({ children, ...props }) {
+  return /* @__PURE__ */ jsxs7(ToastContext.Provider, { value: props, children: [
     children,
-    /* @__PURE__ */ jsx16(Toaster, { ...config2 })
+    /* @__PURE__ */ jsx16(Toaster, { ...props })
   ] });
 }
 
@@ -30517,7 +30511,7 @@ var Checkbox = forwardRef4(
 );
 
 // css-modules:E:\dev\umami-react-zen\src\components\Code.module.css
-var Code_default = { "code": "Code_code__OGIyN" };
+var Code_default = { "code": "Code_code__YTUzN" };
 
 // src/components/Code.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -30668,10 +30662,10 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\styles\input.module.css
-var input_default = { "field": "input_field__ZTk4Z", "row": "input_row__ZGY2N", "input": "input_input__ODNmN", "icon": "input_icon__MTEwY" };
+var input_default = { "field": "input_field__Zjk2M", "row": "input_row__NTFhN", "input": "input_input__NTExY", "icon": "input_icon__ZGI5Y" };
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "allowCopy": "TextField_allowCopy__Yjc3Y", "icon": "TextField_icon__OWIxY" };
+var TextField_default = { "allowCopy": "TextField_allowCopy__NmUxY", "icon": "TextField_icon__OTcxO" };
 
 // src/components/TextField.tsx
 import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -30763,7 +30757,7 @@ function ConfirmationDialog({
 
 // src/components/DataTable.tsx
 var import_classnames27 = __toESM(require_classnames());
-import { Children as Children2, createElement as createElement6 } from "react";
+import { Children as Children2, createElement as createElement5 } from "react";
 
 // src/components/Table.tsx
 var import_classnames26 = __toESM(require_classnames());
@@ -30785,27 +30779,27 @@ function TableBody({ children, className, ...props }) {
 function TableRow({ children, className, ...props }) {
   return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames26.default)(Table_default.row, className), children });
 }
-function TableColumn({ children, className, alignment, ...props }) {
+function TableColumn({ children, className, align, ...props }) {
   return /* @__PURE__ */ jsx35(
     $1910c06f0ca9905e$export$816b5d811295e6bc,
     {
       ...props,
-      className: (0, import_classnames26.default)(Table_default.column, className, alignment && Table_default[alignment]),
+      className: (0, import_classnames26.default)(Table_default.column, className, align && Table_default[align]),
       isRowHeader: true,
       children
     }
   );
 }
-function TableCell({ children, className, alignment, ...props }) {
-  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, alignment && Table_default[alignment]), children });
+function TableCell({ children, className, align, ...props }) {
+  return /* @__PURE__ */ jsx35($1910c06f0ca9905e$export$f6f0c3fe4ec306ea, { ...props, className: (0, import_classnames26.default)(Table_default.cell, className, align && Table_default[align]), children });
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\DataTable.module.css
-var DataTable_default = { "datatable": "DataTable_datatable__MWRkN", "cell": "DataTable_cell__MmMyM" };
+var DataTable_default = { "datatable": "DataTable_datatable__ZmQ3Z", "cell": "DataTable_cell__NzZlM", "hidden": "DataTable_hidden__M2MxN" };
 
 // src/components/DataTable.tsx
 import { jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
-import { createElement as createElement7 } from "react";
+import { createElement as createElement6 } from "react";
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((record, id) => ({ ...record, id })) : data;
   const columns = Children2.map(children, (child) => {
@@ -30816,13 +30810,20 @@ function DataTable({ data = [], className, children, ...props }) {
       if (hidden) {
         return null;
       }
-      return /* @__PURE__ */ createElement7(TableColumn, { ...columnProps, key: id, id }, label);
+      return /* @__PURE__ */ createElement6(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ jsx36(TableBody, { items, children: (row) => {
-      return /* @__PURE__ */ jsx36(TableRow, { children: columns.map(({ id, as, children: children2, className: className2, ...cellProps }) => {
-        const value = typeof children2 === "function" ? children2(row, id) : children2 || row[id];
-        const Component = as || "div";
-        return /* @__PURE__ */ createElement7(TableCell, { ...cellProps, key: id, className: (0, import_classnames27.default)(DataTable_default.cell, className2) }, as ? createElement6(as, {}, value) : value);
+      return /* @__PURE__ */ jsx36(TableRow, { children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+        const value = typeof children2 === "function" ? children2(row) : children2 || row[id];
+        return /* @__PURE__ */ createElement6(
+          TableCell,
+          {
+            ...cellProps,
+            key: id,
+            className: (0, import_classnames27.default)(DataTable_default.cell, className2, hidden && DataTable_default.hidden)
+          },
+          as ? createElement5(as, {}, value) : value
+        );
       }) });
     } })
   ] });
@@ -31119,7 +31120,7 @@ function Loading(props) {
 var import_classnames34 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__YWZhN", "separator": "Menu_separator__MzA3M", "section": "Menu_section__OGY0Z", "header": "Menu_header__NjgyY", "item": "Menu_item__NWNhZ", "check": "Menu_check__M2IyM" };
+var Menu_default = { "menu": "Menu_menu__YmUyN", "separator": "Menu_separator__NDFlO", "section": "Menu_section__YjJjY", "header": "Menu_header__NDVjN", "item": "Menu_item__YjBiN", "check": "Menu_check__YmVhZ" };
 
 // src/components/Menu.tsx
 import { jsx as jsx44, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -31313,7 +31314,7 @@ import { useState as useState15, useEffect as useEffect11, forwardRef as forward
 var import_classnames41 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\SearchField.module.css
-var SearchField_default = { "search": "SearchField_search__N2VmN", "input": "SearchField_input__MTQ2Y", "close": "SearchField_close__MmUwM" };
+var SearchField_default = { "search": "SearchField_search__MzkwY", "input": "SearchField_input__OGFiY", "close": "SearchField_close__NmJkM" };
 
 // src/components/SearchField.tsx
 import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
@@ -31321,8 +31322,7 @@ var SearchField = forwardRef8(
   ({ label, placeholder, value, delay = 0, onSearch, className, ...props }, ref) => {
     const [search, setSearch] = useState15(value ?? "");
     const searchValue = useDebounce(search, delay);
-    const handleChange = (e) => {
-      const { value: value2 } = e.target;
+    const handleChange = (value2) => {
       setSearch(value2);
       if (delay === 0 || value2 === "") {
         onSearch?.(value2);
@@ -31336,31 +31336,39 @@ var SearchField = forwardRef8(
       if (delay > 0) {
         onSearch?.(searchValue);
       }
-    }, [searchValue, delay, onSearch]);
-    return /* @__PURE__ */ jsx51($440f4836bcb56932$export$b94867ecbd698f21, { ...props, ref, className: (0, import_classnames41.default)(input_default.field, className), children: ({ state }) => {
-      return /* @__PURE__ */ jsxs29(Fragment8, { children: [
-        label && /* @__PURE__ */ jsx51(Label, { children: label }),
-        /* @__PURE__ */ jsxs29("div", { className: input_default.row, children: [
-          /* @__PURE__ */ jsx51(Icons.MagnifyingGlass, { className: (0, import_classnames41.default)(SearchField_default.search, input_default.icon) }),
-          /* @__PURE__ */ jsx51(
-            $3985021b0ad6602f$export$f5b8910cec6cf069,
-            {
-              className: (0, import_classnames41.default)(SearchField_default.input, input_default.input),
-              placeholder,
-              onChange: handleChange
-            }
-          ),
-          state.value && /* @__PURE__ */ jsx51(
-            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-            {
-              className: (0, import_classnames41.default)(SearchField_default.close, input_default.icon),
-              onPress: resetSearch,
-              children: /* @__PURE__ */ jsx51(Icon, { children: /* @__PURE__ */ jsx51(Icons.Close, {}) })
-            }
-          )
-        ] })
-      ] });
-    } });
+    }, [searchValue, delay]);
+    return /* @__PURE__ */ jsx51(
+      $440f4836bcb56932$export$b94867ecbd698f21,
+      {
+        ...props,
+        ref,
+        className: (0, import_classnames41.default)(input_default.field, className),
+        onChange: handleChange,
+        children: ({ state }) => {
+          return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+            label && /* @__PURE__ */ jsx51(Label, { children: label }),
+            /* @__PURE__ */ jsxs29("div", { className: input_default.row, children: [
+              /* @__PURE__ */ jsx51(Icon, { className: (0, import_classnames41.default)(SearchField_default.search, input_default.icon), children: /* @__PURE__ */ jsx51(Icons.MagnifyingGlass, {}) }),
+              /* @__PURE__ */ jsx51(
+                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                {
+                  className: (0, import_classnames41.default)(SearchField_default.input, input_default.input),
+                  placeholder
+                }
+              ),
+              state.value && /* @__PURE__ */ jsx51(
+                $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                {
+                  className: (0, import_classnames41.default)(SearchField_default.close, input_default.icon),
+                  onPress: resetSearch,
+                  children: /* @__PURE__ */ jsx51(Icon, { size: "sm", children: /* @__PURE__ */ jsx51(Icons.Close, {}) })
+                }
+              )
+            ] })
+          ] });
+        }
+      }
+    );
   }
 );
 
@@ -31688,8 +31696,11 @@ function Tooltip({ children, className, ...props }) {
 
 // src/components/ZenProvider.tsx
 import { jsx as jsx63 } from "react/jsx-runtime";
+var defaultToastCofig = {
+  duration: 3e3
+};
 function ZenProvider({ children, ...props }) {
-  const { toast } = props;
+  const { toast = defaultToastCofig } = props;
   return /* @__PURE__ */ jsx63(ToastProvider, { ...toast, children });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",