@umami/react-zen 0.7.0 → 0.8.0

package/dist/index.mjs

@@ -25322,9 +25322,28 @@ function Form(props) {
 }
 
 // src/components/form/FormField.tsx
-import { Children, cloneElement } from "react";
+import { cloneElement as cloneElement2 } from "react";
 var import_classnames7 = __toESM(require_classnames());
 
+// src/lib/utils.ts
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement
+} from "react";
+function getFragmentChildren(children) {
+  return children?.type === Fragment ? children.props.children : children;
+}
+function mapChildren(children, handler) {
+  return Children.map(getFragmentChildren(children), (child, index) => {
+    if (!child?.props) {
+      return null;
+    }
+    return handler(child, index);
+  });
+}
+
 // src/components/form/FormField.module.css
 var FormField_default = {
   input: "FormField_input",
@@ -25339,9 +25358,8 @@ function FormField({ name, description, rules, className, children, ...props })
   const { field } = useController({ name, control, rules });
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
-  const child = Children.only(children);
   return /* @__PURE__ */ jsxs3("div", { ...props, className: (0, import_classnames7.default)(FormField_default.input, className), children: [
-    typeof child === "function" ? child(field) : cloneElement(child, field),
+    typeof children === "function" ? children(field) : mapChildren(children, (child) => child ? cloneElement2(child, field) : null),
     description && /* @__PURE__ */ jsx8("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ jsx8("div", { className: FormField_default.error, children: errorMessage })
   ] });
@@ -26480,10 +26498,10 @@ var Dialog_default = {
 };
 
 // src/components/Dialog.tsx
-import { Fragment, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function Dialog({ title, children, className, ...props }) {
   return /* @__PURE__ */ jsx15($de32f1b87079253c$export$3ddf2d174ce01153, { ...props, className: (0, import_classnames11.default)(Dialog_default.dialog, className), children: ({ close }) => {
-    return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
       title && /* @__PURE__ */ jsx15("div", { className: Dialog_default.title, children: title }),
       typeof children === "function" ? children({ close }) : children
     ] });
@@ -26606,10 +26624,10 @@ var Checkbox_default = {
 };
 
 // src/components/Checkbox.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function Checkbox({ className, children, ...props }) {
   return /* @__PURE__ */ jsx20($bc237834342dbd75$export$48513f6b9f8ce62d, { ...props, className: (0, import_classnames15.default)(Checkbox_default.checkbox, className), children: ({ isIndeterminate, isSelected }) => {
-    return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs11(Fragment3, { children: [
       /* @__PURE__ */ jsx20("div", { className: Checkbox_default.box, children: /* @__PURE__ */ jsx20(Icon, { className: Checkbox_default.icon, size: "xs", children: isIndeterminate ? /* @__PURE__ */ jsx20(Icons.Minus, {}) : isSelected ? /* @__PURE__ */ jsx20(Icons.Check, {}) : null }) }),
       children
     ] });
@@ -26767,12 +26785,13 @@ function TextField({
   useEffect3(() => {
     setInputValue(value);
   }, [value]);
-  return /* @__PURE__ */ jsxs14($bcdf0525bf22703d$export$2c73285ae9390cec, { ...props, className: (0, import_classnames21.default)(Input_default.field, className), children: [
+  return /* @__PURE__ */ jsxs14($bcdf0525bf22703d$export$2c73285ae9390cec, { className: (0, import_classnames21.default)(Input_default.field, className), children: [
     label && /* @__PURE__ */ jsx26($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
     /* @__PURE__ */ jsxs14("div", { className: Input_default.row, children: [
       /* @__PURE__ */ jsx26(
         Component,
         {
+          ...props,
           value: inputValue,
           className: (0, import_classnames21.default)(
             TextField_default.input,
@@ -26795,7 +26814,7 @@ var ConfirmationDialog_default = {
 };
 
 // src/components/ConfirmationDialog.tsx
-import { Fragment as Fragment3, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 function ConfirmationDialog({
   value,
   confirmMessage,
@@ -26814,7 +26833,7 @@ function ConfirmationDialog({
       className: (0, import_classnames22.default)(ConfirmationDialog_default.dialog, className),
       isConfirmDisabled: !canSave,
       children: ({ close }) => {
-        return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+        return /* @__PURE__ */ jsxs15(Fragment4, { children: [
           typeof children === "function" ? children({ close }) : children,
           /* @__PURE__ */ jsxs15(Text, { children: [
             confirmMessage || "Type the following value to confirm",
@@ -26830,7 +26849,7 @@ function ConfirmationDialog({
 
 // src/components/DataTable.tsx
 var import_classnames24 = __toESM(require_classnames());
-import { Children as Children2 } from "react";
+import { Children as Children3 } from "react";
 
 // src/components/Table.tsx
 var import_classnames23 = __toESM(require_classnames());
@@ -26887,7 +26906,7 @@ var DataTable_default = {
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function DataTable({ data = [], className, children, ...props }) {
-  const columns = Children2.map(children, (child) => {
+  const columns = Children3.map(children, (child) => {
     return { ...child.props, value: child.props.children };
   });
   return /* @__PURE__ */ jsxs16(Table, { ...props, className: (0, import_classnames24.default)(DataTable_default.datatable, className), children: [
@@ -27178,10 +27197,10 @@ var ProgressBar_default = {
 };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
 function ProgressBar({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx40($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames35.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs22(Fragment4, { children: [
+    return /* @__PURE__ */ jsxs22(Fragment5, { children: [
       /* @__PURE__ */ jsx40("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx40("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showValue && /* @__PURE__ */ jsx40("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -27200,13 +27219,13 @@ var ProgressCircle_default = {
 };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment5, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 function ProgressCircle({ className, showValue, ...props }) {
   return /* @__PURE__ */ jsx41($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames36.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__ */ jsxs23(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs23(Fragment6, { children: [
       /* @__PURE__ */ jsxs23("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx41("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx41(
@@ -27304,15 +27323,36 @@ var Select_default = {
 
 // src/components/Select.tsx
 import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
-function Select({ children, items = [], value, label, className, ...props }) {
-  return /* @__PURE__ */ jsxs25($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: (0, import_classnames39.default)(Input_default.field, className), children: [
-    label && /* @__PURE__ */ jsx44($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
-    /* @__PURE__ */ jsx44($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ jsxs25(Row, { justifyContent: "space-between", gap: "md", children: [
-      /* @__PURE__ */ jsx44($82d7e5349645de74$export$e288731fd71264f0, {}),
-      /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
-    ] }) }),
-    /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children }) })
-  ] });
+function Select({
+  children,
+  items = [],
+  value,
+  label,
+  className,
+  onSelectionChange,
+  onChange,
+  ...props
+}) {
+  const handleChange = (e) => {
+    onSelectionChange?.(e);
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxs25(
+    $82d7e5349645de74$export$ef9b1a59e592288f,
+    {
+      ...props,
+      className: (0, import_classnames39.default)(Input_default.field, className),
+      onSelectionChange: handleChange,
+      children: [
+        label && /* @__PURE__ */ jsx44($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
+        /* @__PURE__ */ jsx44($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ jsxs25(Row, { justifyContent: "space-between", gap: "md", children: [
+          /* @__PURE__ */ jsx44($82d7e5349645de74$export$e288731fd71264f0, {}),
+          /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
+        ] }) }),
+        /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children }) })
+      ]
+    }
+  );
 }
 
 // src/components/Slider.tsx
@@ -27329,14 +27369,14 @@ var Slider_default = {
 };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function Slider({ className, showValue = true, label, ...props }) {
   return /* @__PURE__ */ jsxs26($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames40.default)(Slider_default.slider, className), children: [
     label && /* @__PURE__ */ jsx45(Label, { className: Slider_default.label, children: label }),
     showValue && /* @__PURE__ */ jsx45($6f909507e6374d18$export$a590f758a961cb5b, { className: Slider_default.output }),
     /* @__PURE__ */ jsx45($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs26(Fragment6, { children: [
+      return /* @__PURE__ */ jsxs26(Fragment7, { children: [
         /* @__PURE__ */ jsx45(
           "div",
           {
@@ -27446,6 +27486,7 @@ var import_classnames44 = __toESM(require_classnames());
 
 // src/components/TextArea.module.css
 var TextArea_default = {
+  textarea: "TextArea_textarea",
   none: "TextArea_none",
   horizontal: "TextArea_horizontal",
   vertical: "TextArea_vertical"
@@ -27557,7 +27598,7 @@ function composeContextScopes(...scopes) {
 
 // node_modules/@radix-ui/react-toast/node_modules/@radix-ui/react-slot/dist/index.mjs
 import * as React7 from "react";
-import { Fragment as Fragment7, jsx as jsx52 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx52 } from "react/jsx-runtime";
 var Slot = React7.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
   const childrenArray = React7.Children.toArray(children);
@@ -27591,7 +27632,7 @@ var SlotClone = React7.forwardRef((props, forwardedRef) => {
 });
 SlotClone.displayName = "SlotClone";
 var Slottable = ({ children }) => {
-  return /* @__PURE__ */ jsx52(Fragment7, { children });
+  return /* @__PURE__ */ jsx52(Fragment8, { children });
 };
 function isSlottable(child) {
   return React7.isValidElement(child) && child.type === Slottable;
@@ -28180,7 +28221,7 @@ var VisuallyHidden = React17.forwardRef(
 VisuallyHidden.displayName = NAME;
 
 // node_modules/@radix-ui/react-toast/dist/index.mjs
-import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs29 } from "react/jsx-runtime";
 var PROVIDER_NAME = "ToastProvider";
 var [Collection, useCollection, createCollectionScope] = createCollection("Toast");
 var [createToastContext, createToastScope] = createContextScope("Toast", [createCollectionScope]);
@@ -28526,7 +28567,7 @@ var ToastImpl = React18.forwardRef(
       return node ? getAnnounceTextContent(node) : null;
     }, [node]);
     if (!context.viewport) return null;
-    return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    return /* @__PURE__ */ jsxs29(Fragment9, { children: [
       announceTextContent && /* @__PURE__ */ jsx58(
         ToastAnnounce,
         {
@@ -28646,7 +28687,7 @@ var ToastAnnounce = (props) => {
     const timer = window.setTimeout(() => setIsAnnounced(true), 1e3);
     return () => window.clearTimeout(timer);
   }, []);
-  return isAnnounced ? null : /* @__PURE__ */ jsx58(Portal, { asChild: true, children: /* @__PURE__ */ jsx58(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  return isAnnounced ? null : /* @__PURE__ */ jsx58(Portal, { asChild: true, children: /* @__PURE__ */ jsx58(VisuallyHidden, { ...announceProps, children: renderAnnounceText && /* @__PURE__ */ jsxs29(Fragment9, { children: [
     context.label,
     " ",
     children
@@ -28807,7 +28848,7 @@ var Toast_default = {
 };
 
 // src/components/Toast.tsx
-import { Fragment as Fragment9, jsx as jsx59, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx59, jsxs as jsxs30 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
 var icons = {
   info: Icons.Info,
@@ -28833,7 +28874,7 @@ function Toast2({
 }
 function Toaster(props) {
   const { toasts } = useToast();
-  return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
     toasts.map(({ id, message, props: props2 }) => {
       return /* @__PURE__ */ createElement4(Toast2, { ...props2, key: id, description: message });
     }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React components built by Umami.",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",
@@ -133,6 +133,6 @@
     "stylelint": "^16.7.0",
     "stylelint-config-prettier": "^9.0.5",
     "tsup": "^8.3.0",
-    "typescript": "^5"
+    "typescript": "^5.6.3"
   }
 }