@umami/react-zen 0.93.0 → 0.95.0

package/README.md

@@ -2,16 +2,16 @@
 
 **zen** is a modern, minimalist React component library.
 
+- Beautifully-designed components
 - Built on top of [React Aria](https://react-spectrum.adobe.com/react-aria/) primitives.
 - No Tailwind, pure CSS.
-- Out-of-the-box accessibility.
 
 [Learn more](https://zen.umami.is/)
 
 ## Installation
 
 ```shell
-yarn add @umami/react-zen
+npm install @umami/react-zen
 ```
 
 ## Usage

package/dist/index.css

@@ -3714,56 +3714,59 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:eedba9fc7e3d8030bbd07387da49f358 */
-.Table_table__YWNjZ {
+.Table_table__MjczZ {
   font-size: var(--font-size);
   color: var(--font-color);
   border-collapse: collapse;
   width: 100%;
   position: relative;
 }
-.Table_table__YWNjZ th,
-.Table_table__YWNjZ td {
+.Table_table__MjczZ th,
+.Table_table__MjczZ td {
   min-width: 0;
 }
-.Table_header__NDRkN,
-.Table_body__MTcyZ {
+.Table_header__YjU3M,
+.Table_body__MzgxM {
   display: contents;
 }
-.Table_header__NDRkN tr {
-  display: flex;
+.Table_header__YjU3M {
+  display: grid;
   border-bottom: 1px solid var(--border-color);
 }
-.Table_row__MDBjM {
-  display: flex;
+.Table_header__YjU3M tr {
+  display: contents;
+}
+.Table_row__MTdmZ {
+  display: grid;
   border-bottom: 1px solid color-mix(in srgb, var(--border-color), 50% transparent);
 }
-.Table_header__NDRkN .Table_column__YmI1M:first-child,
-.Table_row__MDBjM .Table_cell__Y2ZiM:first-child {
+.Table_header__YjU3M .Table_column__ZDFlM:first-child,
+.Table_row__MTdmZ .Table_cell__NzhiM:first-child {
   padding-left: 0;
 }
-.Table_header__NDRkN .Table_column__YmI1M:last-child,
-.Table_row__MDBjM .Table_cell__Y2ZiM:last-child {
+.Table_header__YjU3M .Table_column__ZDFlM:last-child,
+.Table_row__MTdmZ .Table_cell__NzhiM:last-child {
   padding-right: 0;
 }
-.Table_column__YmI1M {
+.Table_column__ZDFlM {
   display: flex;
   padding: var(--padding);
   text-align: left;
   font-weight: 700;
   flex: 1;
 }
-.Table_cell__Y2ZiM {
+.Table_cell__NzhiM {
   display: flex;
   padding: var(--padding);
   flex: 1;
 }
-.Table_start__NjIyN {
+.Table_start__ODJiN {
   justify-content: flex-start;
 }
-.Table_center__NGM2N {
+.Table_center__MTI5M {
   justify-content: center;
 }
-.Table_end__MDhhO {
+.Table_end__MjE3N {
   justify-content: flex-end;
 }
 

package/dist/index.d.ts

@@ -109,16 +109,14 @@ declare module '@umami/react-zen/forms/FormButtons' {
 declare module '@umami/react-zen/forms/FormField' {
     import { HTMLAttributes } from 'react';
     import { RegisterOptions, UseFormReturn, FieldValues } from 'react-hook-form';
-    interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseFormReturn> {
+    export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseFormReturn> {
         name: string;
         description?: string;
         label?: string;
         rules?: RegisterOptions<FieldValues, string>;
         children: any;
     }
-    const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<any>>;
-    export { FormField };
-    export type { FormFieldProps };
+    export const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<any>>;
 }
 
 declare module '@umami/react-zen/forms/FormResetButton' {
@@ -437,20 +435,19 @@ declare module '@umami/react-zen/Dialog' {
 declare module '@umami/react-zen/DataTable' {
     import { ReactNode } from 'react';
     import { ColumnProps, TableProps } from 'react-aria-components';
-    interface DataTableProps extends TableProps {
+    export interface DataTableProps extends TableProps {
         data?: any[];
+        columns?: string;
     }
-    function DataTable({ data, className, children, ...props }: DataTableProps): import("react").JSX.Element;
-    interface DataColumnProps extends ColumnProps {
+    export function DataTable({ data, className, children, ...props }: DataTableProps): import("react").JSX.Element;
+    export interface DataColumnProps extends ColumnProps {
         id: string;
         label?: ReactNode;
         align?: 'start' | 'center' | 'end';
         as?: string;
         hidden?: boolean;
     }
-    function DataColumn(props: DataColumnProps): null;
-    export { DataTable, DataColumn };
-    export type { DataTableProps, DataColumnProps };
+    export function DataColumn(props: DataColumnProps): null;
 }
 
 declare module '@umami/react-zen/Dots' {
@@ -776,6 +773,7 @@ declare module '@umami/react-zen/Select' {
     interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
         items?: any[];
         value?: string;
+        defaultValue?: string;
         label?: string;
         isLoading?: boolean;
         allowSearch?: boolean;
@@ -887,9 +885,9 @@ declare module '@umami/react-zen/Table' {
         align?: 'start' | 'center' | 'end';
     }
     function Table({ children, className, ...props }: TableProps): import("react").JSX.Element;
-    function TableHeader({ children, className, ...props }: TableHeaderProps<any>): import("react").JSX.Element;
+    function TableHeader({ children, className, style, ...props }: TableHeaderProps<any>): import("react").JSX.Element;
     function TableBody({ children, className, ...props }: TableBodyProps<any>): import("react").JSX.Element;
-    function TableRow({ children, className, ...props }: RowProps<any>): import("react").JSX.Element;
+    function TableRow({ children, className, style, ...props }: RowProps<any>): import("react").JSX.Element;
     function TableColumn({ children, className, align, ...props }: TableColumnProps): import("react").JSX.Element;
     function TableCell({ children, className, align, ...props }: TableCellProps): import("react").JSX.Element;
     export { Table, TableHeader, TableBody, TableRow, TableColumn, TableCell };

package/dist/index.js

@@ -30290,21 +30290,38 @@ var import_react179 = require("react");
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Table.module.css
-var Table_default = { "table": "Table_table__YWNjZ", "header": "Table_header__NDRkN", "body": "Table_body__MTcyZ", "row": "Table_row__MDBjM", "column": "Table_column__YmI1M", "cell": "Table_cell__Y2ZiM", "start": "Table_start__NjIyN", "center": "Table_center__NGM2N", "end": "Table_end__MDhhO" };
+var Table_default = { "table": "Table_table__MjczZ", "header": "Table_header__YjU3M", "body": "Table_body__MzgxM", "row": "Table_row__MTdmZ", "column": "Table_column__ZDFlM", "cell": "Table_cell__NzhiM", "start": "Table_start__ODJiN", "center": "Table_center__MTI5M", "end": "Table_end__MjE3N" };
 
 // src/components/Table.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
+var gridTemplateColumns = "repeat(auto-fit, minmax(140px, 1fr))";
 function Table2({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames23.default)(Table_default.table, className), "aria-label": "Table", children });
 }
-function TableHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames23.default)(Table_default.header, className), children });
+function TableHeader({ children, className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    $1910c06f0ca9905e$export$f850895b287ef28e,
+    {
+      ...props,
+      className: (0, import_classnames23.default)(Table_default.header, className),
+      style: { gridTemplateColumns, ...style },
+      children
+    }
+  );
 }
 function TableBody({ children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames23.default)(Table_default.body, className), children });
 }
-function TableRow({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames23.default)(Table_default.row, className), children });
+function TableRow({ children, className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    $1910c06f0ca9905e$export$b59bdbef9ce70de2,
+    {
+      ...props,
+      className: (0, import_classnames23.default)(Table_default.row, className),
+      style: { gridTemplateColumns, ...style },
+      children
+    }
+  );
 }
 function TableColumn({ children, className, align, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -30329,18 +30346,21 @@ var import_jsx_runtime33 = require("react/jsx-runtime");
 var import_react180 = require("react");
 function DataTable({ data = [], className, children, ...props }) {
   const items = data.length && data?.[0]?.id === void 0 ? data.map((record, id) => ({ ...record, id })) : data;
+  const widths = [];
   const columns = import_react179.Children.map(children, (child) => {
+    widths.push(child?.props?.width || "1fr");
     return { ...child.props };
   });
+  const gridTemplateColumns2 = widths.join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Table2, { ...props, className: (0, import_classnames24.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHeader, { children: columns.filter((n) => n).map(({ id, label, as, hidden, ...columnProps }) => {
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns.filter((n) => n).map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ (0, import_react180.createElement)(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableBody, { items, children: (row) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
         const value = typeof children2 === "function" ? children2(row) : children2 || row[id];
         return /* @__PURE__ */ (0, import_react180.createElement)(
           TableCell,
@@ -31027,6 +31047,7 @@ var Select2 = (0, import_react189.forwardRef)(
   ({
     items = [],
     value,
+    defaultValue,
     label,
     isLoading,
     allowSearch,
@@ -31052,35 +31073,46 @@ var Select2 = (0, import_react189.forwardRef)(
       setSearch(value2);
       onSearch?.(value2);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)($82d7e5349645de74$export$ef9b1a59e592288f, { "aria-label": "Select", ...props, ref, onSelectionChange: handleChange, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Chevron, {}) }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-        allowSearch && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          SearchField2,
-          {
-            value: search,
-            onSearch: handleSearch,
-            delay: searchDelay,
-            defaultValue: searchValue,
-            autoFocus: true
-          }
-        ) }),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-          List,
-          {
-            ...listProps,
-            items,
-            style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-            children
-          }
-        )
-      ] }) }) })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      $82d7e5349645de74$export$ef9b1a59e592288f,
+      {
+        "aria-label": "Select",
+        ...props,
+        ref,
+        selectedKey: value,
+        defaultSelectedKey: defaultValue,
+        onSelectionChange: handleChange,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Chevron, {}) }) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Column, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+            allowSearch && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Box, { marginBottom: "2", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              SearchField2,
+              {
+                value: search,
+                onSearch: handleSearch,
+                delay: searchDelay,
+                defaultValue: searchValue,
+                autoFocus: true
+              }
+            ) }),
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              List,
+              {
+                ...listProps,
+                items,
+                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+                children
+              }
+            )
+          ] }) }) })
+        ]
+      }
+    );
   }
 );
 

package/dist/index.mjs

@@ -30179,21 +30179,38 @@ import { Children as Children2, createElement as createElement5 } from "react";
 var import_classnames23 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Table.module.css
-var Table_default = { "table": "Table_table__YWNjZ", "header": "Table_header__NDRkN", "body": "Table_body__MTcyZ", "row": "Table_row__MDBjM", "column": "Table_column__YmI1M", "cell": "Table_cell__Y2ZiM", "start": "Table_start__NjIyN", "center": "Table_center__NGM2N", "end": "Table_end__MDhhO" };
+var Table_default = { "table": "Table_table__MjczZ", "header": "Table_header__YjU3M", "body": "Table_body__MzgxM", "row": "Table_row__MTdmZ", "column": "Table_column__ZDFlM", "cell": "Table_cell__NzhiM", "start": "Table_start__ODJiN", "center": "Table_center__MTI5M", "end": "Table_end__MjE3N" };
 
 // src/components/Table.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
+var gridTemplateColumns = "repeat(auto-fit, minmax(140px, 1fr))";
 function Table2({ children, className, ...props }) {
   return /* @__PURE__ */ jsx32($1910c06f0ca9905e$export$54ec01a60f47d33d, { ...props, className: (0, import_classnames23.default)(Table_default.table, className), "aria-label": "Table", children });
 }
-function TableHeader({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx32($1910c06f0ca9905e$export$f850895b287ef28e, { ...props, className: (0, import_classnames23.default)(Table_default.header, className), children });
+function TableHeader({ children, className, style, ...props }) {
+  return /* @__PURE__ */ jsx32(
+    $1910c06f0ca9905e$export$f850895b287ef28e,
+    {
+      ...props,
+      className: (0, import_classnames23.default)(Table_default.header, className),
+      style: { gridTemplateColumns, ...style },
+      children
+    }
+  );
 }
 function TableBody({ children, className, ...props }) {
   return /* @__PURE__ */ jsx32($1910c06f0ca9905e$export$76ccd210b9029917, { ...props, className: (0, import_classnames23.default)(Table_default.body, className), children });
 }
-function TableRow({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx32($1910c06f0ca9905e$export$b59bdbef9ce70de2, { ...props, className: (0, import_classnames23.default)(Table_default.row, className), children });
+function TableRow({ children, className, style, ...props }) {
+  return /* @__PURE__ */ jsx32(
+    $1910c06f0ca9905e$export$b59bdbef9ce70de2,
+    {
+      ...props,
+      className: (0, import_classnames23.default)(Table_default.row, className),
+      style: { gridTemplateColumns, ...style },
+      children
+    }
+  );
 }
 function TableColumn({ children, className, align, ...props }) {
   return /* @__PURE__ */ jsx32(
@@ -30218,18 +30235,21 @@ import { jsx as jsx33, jsxs as jsxs16 } from "react/jsx-runtime";
 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 widths = [];
   const columns = Children2.map(children, (child) => {
+    widths.push(child?.props?.width || "1fr");
     return { ...child.props };
   });
+  const gridTemplateColumns2 = widths.join(" ");
   return /* @__PURE__ */ jsxs16(Table2, { ...props, className: (0, import_classnames24.default)(DataTable_default.datatable, className), children: [
-    /* @__PURE__ */ jsx33(TableHeader, { children: columns.filter((n) => n).map(({ id, label, as, hidden, ...columnProps }) => {
+    /* @__PURE__ */ jsx33(TableHeader, { style: { gridTemplateColumns: gridTemplateColumns2 }, children: columns.filter((n) => n).map(({ id, label, as, hidden, width, ...columnProps }) => {
       if (hidden) {
         return null;
       }
       return /* @__PURE__ */ createElement6(TableColumn, { ...columnProps, key: id, id }, label);
     }) }),
     /* @__PURE__ */ jsx33(TableBody, { items, children: (row) => {
-      return /* @__PURE__ */ jsx33(TableRow, { children: columns.map(({ id, as, hidden, className: className2, children: children2, ...cellProps }) => {
+      return /* @__PURE__ */ jsx33(TableRow, { style: { gridTemplateColumns: gridTemplateColumns2 }, 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,
@@ -30920,6 +30940,7 @@ var Select2 = forwardRef9(
   ({
     items = [],
     value,
+    defaultValue,
     label,
     isLoading,
     allowSearch,
@@ -30945,35 +30966,46 @@ var Select2 = forwardRef9(
       setSearch(value2);
       onSearch?.(value2);
     };
-    return /* @__PURE__ */ jsxs30($82d7e5349645de74$export$ef9b1a59e592288f, { "aria-label": "Select", ...props, ref, onSelectionChange: handleChange, children: [
-      label && /* @__PURE__ */ jsx53(Label2, { children: label }),
-      /* @__PURE__ */ jsx53(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
-        /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
-        /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ jsx53(Icons.Chevron, {}) }) })
-      ] }) }),
-      /* @__PURE__ */ jsx53(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx53(Column, { children: /* @__PURE__ */ jsxs30(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
-        allowSearch && /* @__PURE__ */ jsx53(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx53(
-          SearchField2,
-          {
-            value: search,
-            onSearch: handleSearch,
-            delay: searchDelay,
-            defaultValue: searchValue,
-            autoFocus: true
-          }
-        ) }),
-        isLoading && /* @__PURE__ */ jsx53(Loading, { icon: "dots", position: "center", size: "sm" }),
-        /* @__PURE__ */ jsx53(
-          List,
-          {
-            ...listProps,
-            items,
-            style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
-            children
-          }
-        )
-      ] }) }) })
-    ] });
+    return /* @__PURE__ */ jsxs30(
+      $82d7e5349645de74$export$ef9b1a59e592288f,
+      {
+        "aria-label": "Select",
+        ...props,
+        ref,
+        selectedKey: value,
+        defaultSelectedKey: defaultValue,
+        onSelectionChange: handleChange,
+        children: [
+          label && /* @__PURE__ */ jsx53(Label2, { children: label }),
+          /* @__PURE__ */ jsx53(Button2, { variant: "outline", ...buttonProps, children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
+            /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
+            /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { rotate: 90, size: "xs", children: /* @__PURE__ */ jsx53(Icons.Chevron, {}) }) })
+          ] }) }),
+          /* @__PURE__ */ jsx53(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsx53(Column, { children: /* @__PURE__ */ jsxs30(Box, { padding: "2", border: true, borderRadius: true, backgroundColor: true, shadow: "3", children: [
+            allowSearch && /* @__PURE__ */ jsx53(Box, { marginBottom: "2", children: /* @__PURE__ */ jsx53(
+              SearchField2,
+              {
+                value: search,
+                onSearch: handleSearch,
+                delay: searchDelay,
+                defaultValue: searchValue,
+                autoFocus: true
+              }
+            ) }),
+            isLoading && /* @__PURE__ */ jsx53(Loading, { icon: "dots", position: "center", size: "sm" }),
+            /* @__PURE__ */ jsx53(
+              List,
+              {
+                ...listProps,
+                items,
+                style: { ...listProps?.style, display: isLoading ? "none" : void 0 },
+                children
+              }
+            )
+          ] }) }) })
+        ]
+      }
+    );
   }
 );
 

package/package.json

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

package/styles.css

@@ -4030,56 +4030,59 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:eedba9fc7e3d8030bbd07387da49f358 */
-.Table_table__YWNjZ {
+.Table_table__MjczZ {
   font-size: var(--font-size);
   color: var(--font-color);
   border-collapse: collapse;
   width: 100%;
   position: relative;
 }
-.Table_table__YWNjZ th,
-.Table_table__YWNjZ td {
+.Table_table__MjczZ th,
+.Table_table__MjczZ td {
   min-width: 0;
 }
-.Table_header__NDRkN,
-.Table_body__MTcyZ {
+.Table_header__YjU3M,
+.Table_body__MzgxM {
   display: contents;
 }
-.Table_header__NDRkN tr {
-  display: flex;
+.Table_header__YjU3M {
+  display: grid;
   border-bottom: 1px solid var(--border-color);
 }
-.Table_row__MDBjM {
-  display: flex;
+.Table_header__YjU3M tr {
+  display: contents;
+}
+.Table_row__MTdmZ {
+  display: grid;
   border-bottom: 1px solid color-mix(in srgb, var(--border-color), 50% transparent);
 }
-.Table_header__NDRkN .Table_column__YmI1M:first-child,
-.Table_row__MDBjM .Table_cell__Y2ZiM:first-child {
+.Table_header__YjU3M .Table_column__ZDFlM:first-child,
+.Table_row__MTdmZ .Table_cell__NzhiM:first-child {
   padding-left: 0;
 }
-.Table_header__NDRkN .Table_column__YmI1M:last-child,
-.Table_row__MDBjM .Table_cell__Y2ZiM:last-child {
+.Table_header__YjU3M .Table_column__ZDFlM:last-child,
+.Table_row__MTdmZ .Table_cell__NzhiM:last-child {
   padding-right: 0;
 }
-.Table_column__YmI1M {
+.Table_column__ZDFlM {
   display: flex;
   padding: var(--padding);
   text-align: left;
   font-weight: 700;
   flex: 1;
 }
-.Table_cell__Y2ZiM {
+.Table_cell__NzhiM {
   display: flex;
   padding: var(--padding);
   flex: 1;
 }
-.Table_start__NjIyN {
+.Table_start__ODJiN {
   justify-content: flex-start;
 }
-.Table_center__NGM2N {
+.Table_center__MTI5M {
   justify-content: center;
 }
-.Table_end__MDhhO {
+.Table_end__MjE3N {
   justify-content: flex-end;
 }