@umami/react-zen 0.127.0 → 0.128.0

package/dist/index.d.mts

@@ -152,6 +152,12 @@ interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseForm
 }
 declare function FormField({ name, description, label, rules, className, children, ...props }: FormFieldProps): react.JSX.Element;
 
+interface FormFieldArrayProps {
+    name: string;
+    children: (props: any) => ReactNode;
+}
+declare function FormFieldArray({ name, children }: FormFieldArrayProps): ReactNode;
+
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -311,7 +317,7 @@ interface ContainerProps extends BoxProps {
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react.JSX.Element;
 
 interface ConfirmationDialogProps extends AlertDialogProps {
-    value?: string;
+    value: string;
     confirmMessage?: ReactNode;
 }
 declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
@@ -502,14 +508,14 @@ declare function PasswordField({ label, className, ...props }: PasswordFieldProp
 declare function Popover({ children, className, ...props }: PopoverProps): react.JSX.Element;
 
 interface ProgressBarProps extends ProgressBarProps$1 {
-    showValue?: boolean;
+    showPercentage?: boolean;
 }
-declare function ProgressBar({ className, showValue, ...props }: ProgressBarProps): react.JSX.Element;
+declare function ProgressBar({ className, showPercentage, ...props }: ProgressBarProps): react.JSX.Element;
 
 interface ProgressCircleProps extends ProgressBarProps$1 {
-    showValue?: boolean;
+    showPercentage?: boolean;
 }
-declare function ProgressCircle({ className, showValue, ...props }: ProgressCircleProps): react.JSX.Element;
+declare function ProgressCircle({ className, showPercentage, ...props }: ProgressCircleProps): react.JSX.Element;
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
@@ -680,4 +686,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.d.ts

@@ -152,6 +152,12 @@ interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseForm
 }
 declare function FormField({ name, description, label, rules, className, children, ...props }: FormFieldProps): react.JSX.Element;
 
+interface FormFieldArrayProps {
+    name: string;
+    children: (props: any) => ReactNode;
+}
+declare function FormFieldArray({ name, children }: FormFieldArrayProps): ReactNode;
+
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -311,7 +317,7 @@ interface ContainerProps extends BoxProps {
 declare function Container({ isCentered, isFluid, className, children, ...props }: ContainerProps): react.JSX.Element;
 
 interface ConfirmationDialogProps extends AlertDialogProps {
-    value?: string;
+    value: string;
     confirmMessage?: ReactNode;
 }
 declare function ConfirmationDialog({ value, confirmMessage, className, children, ...props }: ConfirmationDialogProps): react.JSX.Element;
@@ -502,14 +508,14 @@ declare function PasswordField({ label, className, ...props }: PasswordFieldProp
 declare function Popover({ children, className, ...props }: PopoverProps): react.JSX.Element;
 
 interface ProgressBarProps extends ProgressBarProps$1 {
-    showValue?: boolean;
+    showPercentage?: boolean;
 }
-declare function ProgressBar({ className, showValue, ...props }: ProgressBarProps): react.JSX.Element;
+declare function ProgressBar({ className, showPercentage, ...props }: ProgressBarProps): react.JSX.Element;
 
 interface ProgressCircleProps extends ProgressBarProps$1 {
-    showValue?: boolean;
+    showPercentage?: boolean;
 }
-declare function ProgressCircle({ className, showValue, ...props }: ProgressCircleProps): react.JSX.Element;
+declare function ProgressCircle({ className, showPercentage, ...props }: ProgressCircleProps): react.JSX.Element;
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
@@ -680,4 +686,4 @@ interface ZenProviderProps {
 }
 declare function ZenProvider({ children, ...props }: ZenProviderProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AlertBanner, type AlertBannerProps, AlertDialog, type AlertDialogProps, Blockquote, type BlockquoteProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Code, type CodeProps, Column, type ColumnProps, ConfirmationDialog, type ConfirmationDialogProps, Container, type ContainerProps, DataColumn, type DataColumnProps, DataTable, type DataTableProps, Dialog, type DialogProps, Dots, type DotsProps, Flexbox, type FlexboxProps, FloatingTooltip, type FloatingTooltipProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldArray, type FormFieldArrayProps, type FormFieldProps, type FormProps, FormResetButton, type FormResetButtonProps, FormSubmitButton, Grid, type GridProps, Heading, type HeadingProps, type HoverButtonProps, HoverTrigger, Icon, type IconProps, Image, type ImageProps, InlineEditField, type InlineEditFieldProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, ListSection, type ListSectionProps, ListSeparator, Loading, LoadingButton, type LoadingButtonProps, type LoadingProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, Modal, type ModalProps, NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navbar, NavbarContext, NavbarItem, type NavbarItemProps, type NavbarProps, type NavigationContext, PasswordField, type PasswordFieldProps, Popover, ProgressBar, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, Radio, RadioGroup, type RadioGroupProps, Row, type RowProps, SearchField, type SearchFieldProps, Select, type SelectProps, Sidebar, SidebarHeader, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, StatusLight, type StatusLightProps, Switch, type SwitchProps, Tab, TabList, TabPanel, Table, TableBody, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, TableRow, Tabs, Text, TextField, type TextFieldProps, type TextProps, ThemeButton, type ThemeButtonProps, Toast, type ToastProps, ToastProvider, type ToastProviderProps, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipBubble, type TooltipBubbleProps, type TooltipProps, ZenProvider, type ZenProviderProps, useDebounce, useNavigationContext, useTheme, useToast };

package/dist/index.js

@@ -251,6 +251,7 @@ __export(index_exports, {
   Form: () => Form,
   FormButtons: () => FormButtons,
   FormField: () => FormField,
+  FormFieldArray: () => FormFieldArray,
   FormResetButton: () => FormResetButton,
   FormSubmitButton: () => FormSubmitButton,
   Grid: () => Grid,
@@ -25245,6 +25246,236 @@ function createFormControl(props = {}) {
     formControl: methods
   };
 }
+var generateId = () => {
+  const d = typeof performance === "undefined" ? Date.now() : performance.now() * 1e3;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r2 = (Math.random() * 16 + d) % 16 | 0;
+    return (c == "x" ? r2 : r2 & 3 | 8).toString(16);
+  });
+};
+var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus) ? options.focusName || `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.` : "";
+var appendAt = (data, value) => [
+  ...data,
+  ...convertToArrayPayload(value)
+];
+var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => void 0) : void 0;
+function insert(data, index, value) {
+  return [
+    ...data.slice(0, index),
+    ...convertToArrayPayload(value),
+    ...data.slice(index)
+  ];
+}
+var moveArrayAt = (data, from, to2) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  if (isUndefined(data[to2])) {
+    data[to2] = void 0;
+  }
+  data.splice(to2, 0, data.splice(from, 1)[0]);
+  return data;
+};
+var prependAt = (data, value) => [
+  ...convertToArrayPayload(value),
+  ...convertToArrayPayload(data)
+];
+function removeAtIndexes(data, indexes) {
+  let i = 0;
+  const temp = [...data];
+  for (const index of indexes) {
+    temp.splice(index - i, 1);
+    i++;
+  }
+  return compact(temp).length ? temp : [];
+}
+var removeArrayAt = (data, index) => isUndefined(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
+var swapArrayAt = (data, indexA, indexB) => {
+  [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
+};
+var updateAt = (fieldValues, index, value) => {
+  fieldValues[index] = value;
+  return fieldValues;
+};
+function useFieldArray(props) {
+  const methods = useFormContext();
+  const { control = methods.control, name, keyName = "id", shouldUnregister, rules } = props;
+  const [fields, setFields] = import_react147.default.useState(control._getFieldArray(name));
+  const ids = import_react147.default.useRef(control._getFieldArray(name).map(generateId));
+  const _fieldIds = import_react147.default.useRef(fields);
+  const _name = import_react147.default.useRef(name);
+  const _actioned = import_react147.default.useRef(false);
+  _name.current = name;
+  _fieldIds.current = fields;
+  control._names.array.add(name);
+  rules && control.register(name, rules);
+  import_react147.default.useEffect(() => control._subjects.array.subscribe({
+    next: ({ values, name: fieldArrayName }) => {
+      if (fieldArrayName === _name.current || !fieldArrayName) {
+        const fieldValues = get(values, _name.current);
+        if (Array.isArray(fieldValues)) {
+          setFields(fieldValues);
+          ids.current = fieldValues.map(generateId);
+        }
+      }
+    }
+  }).unsubscribe, [control]);
+  const updateValues = import_react147.default.useCallback((updatedFieldArrayValues) => {
+    _actioned.current = true;
+    control._setFieldArray(name, updatedFieldArrayValues);
+  }, [control, name]);
+  const append = (value, options) => {
+    const appendValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
+    control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+    ids.current = appendAt(ids.current, appendValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const prepend = (value, options) => {
+    const prependValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
+    control._names.focus = getFocusFieldName(name, 0, options);
+    ids.current = prependAt(ids.current, prependValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const remove = (index) => {
+    const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+    ids.current = removeArrayAt(ids.current, index);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    !Array.isArray(get(control._fields, name)) && set(control._fields, name, void 0);
+    control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
+      argA: index
+    });
+  };
+  const insert$1 = (index, value, options) => {
+    const insertValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+    control._names.focus = getFocusFieldName(name, index, options);
+    ids.current = insert(ids.current, index, insertValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, insert, {
+      argA: index,
+      argB: fillEmptyArray(value)
+    });
+  };
+  const swap = (indexA, indexB) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+    swapArrayAt(ids.current, indexA, indexB);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
+      argA: indexA,
+      argB: indexB
+    }, false);
+  };
+  const move = (from, to2) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    moveArrayAt(updatedFieldArrayValues, from, to2);
+    moveArrayAt(ids.current, from, to2);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
+      argA: from,
+      argB: to2
+    }, false);
+  };
+  const update3 = (index, value) => {
+    const updateValue = cloneObject(value);
+    const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
+    ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+    updateValues(updatedFieldArrayValues);
+    setFields([...updatedFieldArrayValues]);
+    control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
+      argA: index,
+      argB: updateValue
+    }, true, false);
+  };
+  const replace = (value) => {
+    const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
+    ids.current = updatedFieldArrayValues.map(generateId);
+    updateValues([...updatedFieldArrayValues]);
+    setFields([...updatedFieldArrayValues]);
+    control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
+  };
+  import_react147.default.useEffect(() => {
+    control._state.action = false;
+    isWatched(name, control._names) && control._subjects.state.next({
+      ...control._formState
+    });
+    if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted) && !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+      if (control._options.resolver) {
+        control._runSchema([name]).then((result) => {
+          const error = get(result.errors, name);
+          const existingError = get(control._formState.errors, name);
+          if (existingError ? !error && existingError.type || error && (existingError.type !== error.type || existingError.message !== error.message) : error && error.type) {
+            error ? set(control._formState.errors, name, error) : unset(control._formState.errors, name);
+            control._subjects.state.next({
+              errors: control._formState.errors
+            });
+          }
+        });
+      } else {
+        const field = get(control._fields, name);
+        if (field && field._f && !(getValidationModes(control._options.reValidateMode).isOnSubmit && getValidationModes(control._options.mode).isOnSubmit)) {
+          validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) && control._subjects.state.next({
+            errors: updateFieldArrayRootError(control._formState.errors, error, name)
+          }));
+        }
+      }
+    }
+    control._subjects.state.next({
+      name,
+      values: cloneObject(control._formValues)
+    });
+    control._names.focus && iterateFieldsByAction(control._fields, (ref, key) => {
+      if (control._names.focus && key.startsWith(control._names.focus) && ref.focus) {
+        ref.focus();
+        return 1;
+      }
+      return;
+    });
+    control._names.focus = "";
+    control._setValid();
+    _actioned.current = false;
+  }, [fields, name, control]);
+  import_react147.default.useEffect(() => {
+    !get(control._formValues, name) && control._setFieldArray(name);
+    return () => {
+      const updateMounted = (name2, value) => {
+        const field = get(control._fields, name2);
+        if (field && field._f) {
+          field._f.mount = value;
+        }
+      };
+      control._options.shouldUnregister || shouldUnregister ? control.unregister(name) : updateMounted(name, false);
+    };
+  }, [name, control, keyName, shouldUnregister]);
+  return {
+    swap: import_react147.default.useCallback(swap, [updateValues, name, control]),
+    move: import_react147.default.useCallback(move, [updateValues, name, control]),
+    prepend: import_react147.default.useCallback(prepend, [updateValues, name, control]),
+    append: import_react147.default.useCallback(append, [updateValues, name, control]),
+    remove: import_react147.default.useCallback(remove, [updateValues, name, control]),
+    insert: import_react147.default.useCallback(insert$1, [updateValues, name, control]),
+    update: import_react147.default.useCallback(update3, [updateValues, name, control]),
+    replace: import_react147.default.useCallback(replace, [updateValues, name, control]),
+    fields: import_react147.default.useMemo(() => fields.map((field, index) => ({
+      ...field,
+      [keyName]: ids.current[index] || generateId()
+    })), [fields, keyName])
+  };
+}
 function useForm(props = {}) {
   const _formControl = import_react147.default.useRef(void 0);
   const _values = import_react147.default.useRef(void 0);
@@ -26132,6 +26363,17 @@ function FormField({
   ] });
 }
 
+// src/components/forms/FormFieldArray.tsx
+function FormFieldArray({ name, children }) {
+  const context = useFormContext();
+  const { control } = context;
+  const { fields, append, prepend, remove, swap, move, insert: insert2 } = useFieldArray({
+    control,
+    name
+  });
+  return children({ context, fields, append, prepend, remove, swap, move, insert: insert2 });
+}
+
 // src/components/Button.tsx
 var import_classnames7 = __toESM(require_classnames());
 
@@ -31193,11 +31435,11 @@ var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "tr
 
 // src/components/ProgressBar.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
-function ProgressBar2({ className, showValue, ...props }) {
+function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: ProgressBar_default.value, children: valueText })
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -31210,7 +31452,7 @@ var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle_
 
 // src/components/ProgressCircle.tsx
 var import_jsx_runtime55 = require("react/jsx-runtime");
-function ProgressCircle({ className, showValue, ...props }) {
+function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
@@ -31230,7 +31472,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
+      showPercentage && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }

package/dist/index.mjs

@@ -25132,6 +25132,236 @@ function createFormControl(props = {}) {
     formControl: methods
   };
 }
+var generateId = () => {
+  const d = typeof performance === "undefined" ? Date.now() : performance.now() * 1e3;
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r2 = (Math.random() * 16 + d) % 16 | 0;
+    return (c == "x" ? r2 : r2 & 3 | 8).toString(16);
+  });
+};
+var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus) ? options.focusName || `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.` : "";
+var appendAt = (data, value) => [
+  ...data,
+  ...convertToArrayPayload(value)
+];
+var fillEmptyArray = (value) => Array.isArray(value) ? value.map(() => void 0) : void 0;
+function insert(data, index, value) {
+  return [
+    ...data.slice(0, index),
+    ...convertToArrayPayload(value),
+    ...data.slice(index)
+  ];
+}
+var moveArrayAt = (data, from, to2) => {
+  if (!Array.isArray(data)) {
+    return [];
+  }
+  if (isUndefined(data[to2])) {
+    data[to2] = void 0;
+  }
+  data.splice(to2, 0, data.splice(from, 1)[0]);
+  return data;
+};
+var prependAt = (data, value) => [
+  ...convertToArrayPayload(value),
+  ...convertToArrayPayload(data)
+];
+function removeAtIndexes(data, indexes) {
+  let i = 0;
+  const temp = [...data];
+  for (const index of indexes) {
+    temp.splice(index - i, 1);
+    i++;
+  }
+  return compact(temp).length ? temp : [];
+}
+var removeArrayAt = (data, index) => isUndefined(index) ? [] : removeAtIndexes(data, convertToArrayPayload(index).sort((a, b) => a - b));
+var swapArrayAt = (data, indexA, indexB) => {
+  [data[indexA], data[indexB]] = [data[indexB], data[indexA]];
+};
+var updateAt = (fieldValues, index, value) => {
+  fieldValues[index] = value;
+  return fieldValues;
+};
+function useFieldArray(props) {
+  const methods = useFormContext();
+  const { control = methods.control, name, keyName = "id", shouldUnregister, rules } = props;
+  const [fields, setFields] = React__default.useState(control._getFieldArray(name));
+  const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
+  const _fieldIds = React__default.useRef(fields);
+  const _name = React__default.useRef(name);
+  const _actioned = React__default.useRef(false);
+  _name.current = name;
+  _fieldIds.current = fields;
+  control._names.array.add(name);
+  rules && control.register(name, rules);
+  React__default.useEffect(() => control._subjects.array.subscribe({
+    next: ({ values, name: fieldArrayName }) => {
+      if (fieldArrayName === _name.current || !fieldArrayName) {
+        const fieldValues = get(values, _name.current);
+        if (Array.isArray(fieldValues)) {
+          setFields(fieldValues);
+          ids.current = fieldValues.map(generateId);
+        }
+      }
+    }
+  }).unsubscribe, [control]);
+  const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
+    _actioned.current = true;
+    control._setFieldArray(name, updatedFieldArrayValues);
+  }, [control, name]);
+  const append = (value, options) => {
+    const appendValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = appendAt(control._getFieldArray(name), appendValue);
+    control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+    ids.current = appendAt(ids.current, appendValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, appendAt, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const prepend = (value, options) => {
+    const prependValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = prependAt(control._getFieldArray(name), prependValue);
+    control._names.focus = getFocusFieldName(name, 0, options);
+    ids.current = prependAt(ids.current, prependValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, prependAt, {
+      argA: fillEmptyArray(value)
+    });
+  };
+  const remove = (index) => {
+    const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+    ids.current = removeArrayAt(ids.current, index);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    !Array.isArray(get(control._fields, name)) && set(control._fields, name, void 0);
+    control._setFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
+      argA: index
+    });
+  };
+  const insert$1 = (index, value, options) => {
+    const insertValue = convertToArrayPayload(cloneObject(value));
+    const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+    control._names.focus = getFocusFieldName(name, index, options);
+    ids.current = insert(ids.current, index, insertValue.map(generateId));
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, insert, {
+      argA: index,
+      argB: fillEmptyArray(value)
+    });
+  };
+  const swap = (indexA, indexB) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+    swapArrayAt(ids.current, indexA, indexB);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, swapArrayAt, {
+      argA: indexA,
+      argB: indexB
+    }, false);
+  };
+  const move = (from, to2) => {
+    const updatedFieldArrayValues = control._getFieldArray(name);
+    moveArrayAt(updatedFieldArrayValues, from, to2);
+    moveArrayAt(ids.current, from, to2);
+    updateValues(updatedFieldArrayValues);
+    setFields(updatedFieldArrayValues);
+    control._setFieldArray(name, updatedFieldArrayValues, moveArrayAt, {
+      argA: from,
+      argB: to2
+    }, false);
+  };
+  const update3 = (index, value) => {
+    const updateValue = cloneObject(value);
+    const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, updateValue);
+    ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+    updateValues(updatedFieldArrayValues);
+    setFields([...updatedFieldArrayValues]);
+    control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
+      argA: index,
+      argB: updateValue
+    }, true, false);
+  };
+  const replace = (value) => {
+    const updatedFieldArrayValues = convertToArrayPayload(cloneObject(value));
+    ids.current = updatedFieldArrayValues.map(generateId);
+    updateValues([...updatedFieldArrayValues]);
+    setFields([...updatedFieldArrayValues]);
+    control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
+  };
+  React__default.useEffect(() => {
+    control._state.action = false;
+    isWatched(name, control._names) && control._subjects.state.next({
+      ...control._formState
+    });
+    if (_actioned.current && (!getValidationModes(control._options.mode).isOnSubmit || control._formState.isSubmitted) && !getValidationModes(control._options.reValidateMode).isOnSubmit) {
+      if (control._options.resolver) {
+        control._runSchema([name]).then((result) => {
+          const error = get(result.errors, name);
+          const existingError = get(control._formState.errors, name);
+          if (existingError ? !error && existingError.type || error && (existingError.type !== error.type || existingError.message !== error.message) : error && error.type) {
+            error ? set(control._formState.errors, name, error) : unset(control._formState.errors, name);
+            control._subjects.state.next({
+              errors: control._formState.errors
+            });
+          }
+        });
+      } else {
+        const field = get(control._fields, name);
+        if (field && field._f && !(getValidationModes(control._options.reValidateMode).isOnSubmit && getValidationModes(control._options.mode).isOnSubmit)) {
+          validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) && control._subjects.state.next({
+            errors: updateFieldArrayRootError(control._formState.errors, error, name)
+          }));
+        }
+      }
+    }
+    control._subjects.state.next({
+      name,
+      values: cloneObject(control._formValues)
+    });
+    control._names.focus && iterateFieldsByAction(control._fields, (ref, key) => {
+      if (control._names.focus && key.startsWith(control._names.focus) && ref.focus) {
+        ref.focus();
+        return 1;
+      }
+      return;
+    });
+    control._names.focus = "";
+    control._setValid();
+    _actioned.current = false;
+  }, [fields, name, control]);
+  React__default.useEffect(() => {
+    !get(control._formValues, name) && control._setFieldArray(name);
+    return () => {
+      const updateMounted = (name2, value) => {
+        const field = get(control._fields, name2);
+        if (field && field._f) {
+          field._f.mount = value;
+        }
+      };
+      control._options.shouldUnregister || shouldUnregister ? control.unregister(name) : updateMounted(name, false);
+    };
+  }, [name, control, keyName, shouldUnregister]);
+  return {
+    swap: React__default.useCallback(swap, [updateValues, name, control]),
+    move: React__default.useCallback(move, [updateValues, name, control]),
+    prepend: React__default.useCallback(prepend, [updateValues, name, control]),
+    append: React__default.useCallback(append, [updateValues, name, control]),
+    remove: React__default.useCallback(remove, [updateValues, name, control]),
+    insert: React__default.useCallback(insert$1, [updateValues, name, control]),
+    update: React__default.useCallback(update3, [updateValues, name, control]),
+    replace: React__default.useCallback(replace, [updateValues, name, control]),
+    fields: React__default.useMemo(() => fields.map((field, index) => ({
+      ...field,
+      [keyName]: ids.current[index] || generateId()
+    })), [fields, keyName])
+  };
+}
 function useForm(props = {}) {
   const _formControl = React__default.useRef(void 0);
   const _values = React__default.useRef(void 0);
@@ -26019,6 +26249,17 @@ function FormField({
   ] });
 }
 
+// src/components/forms/FormFieldArray.tsx
+function FormFieldArray({ name, children }) {
+  const context = useFormContext();
+  const { control } = context;
+  const { fields, append, prepend, remove, swap, move, insert: insert2 } = useFieldArray({
+    control,
+    name
+  });
+  return children({ context, fields, append, prepend, remove, swap, move, insert: insert2 });
+}
+
 // src/components/Button.tsx
 var import_classnames7 = __toESM(require_classnames());
 
@@ -31084,11 +31325,11 @@ var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "tr
 
 // src/components/ProgressBar.tsx
 import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
-function ProgressBar2({ className, showValue, ...props }) {
+function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx54($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames40.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
     return /* @__PURE__ */ jsxs29(Fragment9, { children: [
       /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
-      showValue && /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.value, children: valueText })
+      showPercentage && /* @__PURE__ */ jsx54("div", { className: ProgressBar_default.value, children: valueText })
     ] });
   } });
 }
@@ -31101,7 +31342,7 @@ var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle_
 
 // src/components/ProgressCircle.tsx
 import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
-function ProgressCircle({ className, showValue, ...props }) {
+function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx55($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
@@ -31121,7 +31362,7 @@ function ProgressCircle({ className, showValue, ...props }) {
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsx55("label", { className: ProgressCircle_default.value, children: valueText })
+      showPercentage && /* @__PURE__ */ jsx55("label", { className: ProgressCircle_default.value, children: valueText })
     ] });
   } });
 }
@@ -31635,6 +31876,7 @@ export {
   Form,
   FormButtons,
   FormField,
+  FormFieldArray,
   FormResetButton,
   FormSubmitButton,
   Grid,

package/package.json

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