@umami/react-zen 0.183.0 → 0.185.0

package/dist/index.css

@@ -3987,49 +3987,48 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
-.Dots_dots__ZjI3Y {
+.Dots_dots__ZTc4M {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  min-height: 50px;
-  &.Dots_size-sm__ZTRjY {
+  &.Dots_size-sm__YmFiM {
     gap: 4px;
   }
-  &.Dots_size-md__MmRkZ {
+  &.Dots_size-md__MThiY {
     gap: 6px;
   }
-  &.Dots_size-lg__MGJmY {
+  &.Dots_size-lg__MTNlO {
     gap: 8px;
   }
 }
-.Dots_dot__ZDRiM {
+.Dots_dot__YTQ4Y {
   width: 8px;
   height: 8px;
   border-radius: 100%;
   background: color-mix(in srgb, var(--font-color), 50% transparent);
-  animation: Dots_dots-blink__MWU4Z 1.2s infinite;
+  animation: Dots_dots-blink__MjFjZ 1.2s infinite;
   animation-fill-mode: both;
 }
-.Dots_size-sm__ZTRjY .Dots_dot__ZDRiM {
+.Dots_size-sm__YmFiM .Dots_dot__YTQ4Y {
   height: 6px;
   width: 6px;
 }
-.Dots_size-md__MmRkZ .Dots_dot__ZDRiM {
+.Dots_size-md__MThiY .Dots_dot__YTQ4Y {
   height: 8px;
   width: 8px;
 }
-.Dots_size-lg__MGJmY .Dots_dot__ZDRiM {
+.Dots_size-lg__MTNlO .Dots_dot__YTQ4Y {
   height: 12px;
   width: 12px;
 }
-.Dots_dot__ZDRiM:nth-child(2) {
+.Dots_dot__YTQ4Y:nth-child(2) {
   animation-delay: 0.2s;
 }
-.Dots_dot__ZDRiM:nth-child(3) {
+.Dots_dot__YTQ4Y:nth-child(3) {
   animation-delay: 0.4s;
 }
-@keyframes Dots_dots-blink__MWU4Z {
+@keyframes Dots_dots-blink__MjFjZ {
   0% {
     opacity: 0.2;
   }

package/dist/index.d.mts

@@ -172,7 +172,7 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     rules?: RegisterOptions<FieldValues, string>;
     children: (props: any) => ReactNode;
 }
-declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
+declare function FormFieldArray({ id, name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';

package/dist/index.d.ts

@@ -172,7 +172,7 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
     rules?: RegisterOptions<FieldValues, string>;
     children: (props: any) => ReactNode;
 }
-declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
+declare function FormFieldArray({ id, name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
     variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';

package/dist/index.js

@@ -28589,6 +28589,7 @@ function FormField({
 var import_classnames8 = __toESM(require_classnames());
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function FormFieldArray({
+  id,
   name,
   description,
   label,
@@ -28597,16 +28598,18 @@ function FormFieldArray({
   children,
   ...props
 }) {
+  const fieldId = useFieldId(id);
   const context = useFormContext();
-  const { formState, control } = context;
+  const { formState, control, register } = context;
   const fieldProps = useFieldArray({
     control,
     name
   });
+  register(name, rules);
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2, { children: label }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2, { htmlFor: fieldId, children: label }),
     description && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: FormField_default.error, children: errorMessage }),
     children({ ...context, ...fieldProps })
@@ -28710,7 +28713,7 @@ function FormSubmitButton({
   ...props
 }) {
   const {
-    formState: { isDirty, isValid, isSubmitting, isLoading: formLoading }
+    formState: { isDirty, isValid, isSubmitting }
   } = useFormContext();
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     LoadingButton,
@@ -28719,7 +28722,7 @@ function FormSubmitButton({
       type: "submit",
       variant,
       isDisabled: isDisabled ?? (!isDirty || !isValid || isSubmitting),
-      isLoading: isLoading ?? (formLoading || isSubmitting),
+      isLoading: isLoading ?? isSubmitting,
       children
     }
   );
@@ -33307,7 +33310,7 @@ function DataColumn(props) {
 var import_classnames29 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Dots.module.css
-var Dots_default = { "dots": "Dots_dots__ZjI3Y", "size-sm": "Dots_size-sm__ZTRjY", "size-md": "Dots_size-md__MmRkZ", "size-lg": "Dots_size-lg__MGJmY", "dot": "Dots_dot__ZDRiM", "dots-blink": "Dots_dots-blink__MWU4Z" };
+var Dots_default = { "dots": "Dots_dots__ZTc4M", "size-sm": "Dots_size-sm__YmFiM", "size-md": "Dots_size-md__MThiY", "size-lg": "Dots_size-lg__MTNlO", "dot": "Dots_dot__YTQ4Y", "dots-blink": "Dots_dots-blink__MjFjZ" };
 
 // src/components/Dots.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -28470,6 +28470,7 @@ function FormField({
 var import_classnames8 = __toESM(require_classnames());
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function FormFieldArray({
+  id,
   name,
   description,
   label,
@@ -28478,16 +28479,18 @@ function FormFieldArray({
   children,
   ...props
 }) {
+  const fieldId = useFieldId(id);
   const context = useFormContext();
-  const { formState, control } = context;
+  const { formState, control, register } = context;
   const fieldProps = useFieldArray({
     control,
     name
   });
+  register(name, rules);
   const errors = formState?.errors || {};
   const errorMessage = errors[name]?.message;
   return /* @__PURE__ */ jsxs7("div", { ...props, className: (0, import_classnames8.default)(FormField_default.input, className), children: [
-    label && /* @__PURE__ */ jsx15(Label2, { children: label }),
+    label && /* @__PURE__ */ jsx15(Label2, { htmlFor: fieldId, children: label }),
     description && /* @__PURE__ */ jsx15("div", { className: FormField_default.description, children: description }),
     errorMessage && /* @__PURE__ */ jsx15("div", { className: FormField_default.error, children: errorMessage }),
     children({ ...context, ...fieldProps })
@@ -28591,7 +28594,7 @@ function FormSubmitButton({
   ...props
 }) {
   const {
-    formState: { isDirty, isValid, isSubmitting, isLoading: formLoading }
+    formState: { isDirty, isValid, isSubmitting }
   } = useFormContext();
   return /* @__PURE__ */ jsx20(
     LoadingButton,
@@ -28600,7 +28603,7 @@ function FormSubmitButton({
       type: "submit",
       variant,
       isDisabled: isDisabled ?? (!isDirty || !isValid || isSubmitting),
-      isLoading: isLoading ?? (formLoading || isSubmitting),
+      isLoading: isLoading ?? isSubmitting,
       children
     }
   );
@@ -33188,7 +33191,7 @@ function DataColumn(props) {
 var import_classnames29 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Dots.module.css
-var Dots_default = { "dots": "Dots_dots__ZjI3Y", "size-sm": "Dots_size-sm__ZTRjY", "size-md": "Dots_size-md__MmRkZ", "size-lg": "Dots_size-lg__MGJmY", "dot": "Dots_dot__ZDRiM", "dots-blink": "Dots_dots-blink__MWU4Z" };
+var Dots_default = { "dots": "Dots_dots__ZTc4M", "size-sm": "Dots_size-sm__YmFiM", "size-md": "Dots_size-md__MThiY", "size-lg": "Dots_size-lg__MTNlO", "dot": "Dots_dot__YTQ4Y", "dots-blink": "Dots_dots-blink__MjFjZ" };
 
 // src/components/Dots.tsx
 import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";

package/package.json

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

package/styles.css

@@ -4305,49 +4305,48 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:e66162403f9946d7217dc462fee28120 */
-.Dots_dots__ZjI3Y {
+.Dots_dots__ZTc4M {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  min-height: 50px;
-  &.Dots_size-sm__ZTRjY {
+  &.Dots_size-sm__YmFiM {
     gap: 4px;
   }
-  &.Dots_size-md__MmRkZ {
+  &.Dots_size-md__MThiY {
     gap: 6px;
   }
-  &.Dots_size-lg__MGJmY {
+  &.Dots_size-lg__MTNlO {
     gap: 8px;
   }
 }
-.Dots_dot__ZDRiM {
+.Dots_dot__YTQ4Y {
   width: 8px;
   height: 8px;
   border-radius: 100%;
   background: color-mix(in srgb, var(--font-color), 50% transparent);
-  animation: Dots_dots-blink__MWU4Z 1.2s infinite;
+  animation: Dots_dots-blink__MjFjZ 1.2s infinite;
   animation-fill-mode: both;
 }
-.Dots_size-sm__ZTRjY .Dots_dot__ZDRiM {
+.Dots_size-sm__YmFiM .Dots_dot__YTQ4Y {
   height: 6px;
   width: 6px;
 }
-.Dots_size-md__MmRkZ .Dots_dot__ZDRiM {
+.Dots_size-md__MThiY .Dots_dot__YTQ4Y {
   height: 8px;
   width: 8px;
 }
-.Dots_size-lg__MGJmY .Dots_dot__ZDRiM {
+.Dots_size-lg__MTNlO .Dots_dot__YTQ4Y {
   height: 12px;
   width: 12px;
 }
-.Dots_dot__ZDRiM:nth-child(2) {
+.Dots_dot__YTQ4Y:nth-child(2) {
   animation-delay: 0.2s;
 }
-.Dots_dot__ZDRiM:nth-child(3) {
+.Dots_dot__YTQ4Y:nth-child(3) {
   animation-delay: 0.4s;
 }
-@keyframes Dots_dots-blink__MWU4Z {
+@keyframes Dots_dots-blink__MjFjZ {
   0% {
     opacity: 0.2;
   }