@mittwald/flow-react-components 0.2.0-alpha.523 → 0.2.0-alpha.525

package/dist/js/components/src/components/DatePicker/DatePicker.mjs

@@ -7,7 +7,6 @@ import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import * as Aria from 'react-aria-components';
 import { DateInput } from './components/DateInput/DateInput.mjs';
-import { FieldError } from '../FieldError/FieldError.mjs';
 import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import { Popover } from '../Popover/Popover.mjs';
 import 'mobx';
@@ -20,22 +19,12 @@ import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const DatePicker = flowComponent("DatePicker", (props) => {
-  const { children, className, errorMessage, onChange, ref, ...rest } = props;
+  const { children, className, onChange, ref, ...rest } = props;
+  const { FieldErrorView, fieldProps, fieldPropsContext } = useFieldComponent(props);
   const rootClassName = clsx(formFieldStyles.formField, className);
-  const propsContext = {
-    Label: {
-      className: formFieldStyles.label,
-      optional: !props.isRequired
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError
-    }
-  };
   const localRef = useObjectRef(ref);
   useMakeFocusable(localRef);
   const popoverController = useOverlayController("Popover");
@@ -44,7 +33,8 @@ const DatePicker = flowComponent("DatePicker", (props) => {
     {
       ref: localRef,
       ...rest,
-      className: rootClassName,
+      ...fieldProps,
+      className: clsx(fieldProps.className, rootClassName),
       onOpenChange: (v) => popoverController.setOpen(v),
       isOpen: popoverController.isOpen,
       onChange: (value) => {
@@ -55,8 +45,7 @@ const DatePicker = flowComponent("DatePicker", (props) => {
       },
       children: [
         /* @__PURE__ */ jsx(DateInput, { isDisabled: props.isDisabled }),
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }),
-        /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError, children: errorMessage }),
+        /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
         /* @__PURE__ */ jsx(
           Popover,
           {
@@ -65,7 +54,8 @@ const DatePicker = flowComponent("DatePicker", (props) => {
             controller: popoverController,
             children: /* @__PURE__ */ jsx(Calendar, {})
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }
   );

package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">>,\n    FlowComponentProps {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      ref={localRef}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <Calendar />\n      </Popover>\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,YAAA,EAAc,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEtE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAWA,eAAA,CAAO,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAA,CAAM;AAAA,KACnB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAWA,eAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAWA,eAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBACzC,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAWA,eAAA,CAAO,YAAa,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA;AACZ;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DatePicker.mjs","sources":["../../../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { DateInput } from \"./components/DateInput\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { Calendar } from \"@/components/Calendar\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DatePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DatePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DatePicker = flowComponent(\"DatePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const { FieldErrorView, fieldProps, fieldPropsContext } =\n    useFieldComponent(props);\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  return (\n    <Aria.DatePicker\n      ref={localRef}\n      {...rest}\n      {...fieldProps}\n      className={clsx(fieldProps.className, rootClassName)}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <Calendar />\n      </Popover>\n      <FieldErrorView />\n    </Aria.DatePicker>\n  );\n});\n\nexport default DatePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM,EAAE,cAAA,EAAgB,UAAA,EAAY,iBAAA,EAAkB,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,QAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,aAAa,CAAA;AAAA,MACnD,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBACzC,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,QAAA,EAAA,EAAS;AAAA;AAAA,SACZ;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs

@@ -1,7 +1,6 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
@@ -9,29 +8,18 @@ import * as Aria from 'react-aria-components';
 import { Popover } from '../Popover/Popover.mjs';
 import { RangeCalendar } from '../Calendar/RangeCalendar.mjs';
 import { DateRangeInput } from './components/DateRangeInput/DateRangeInput.mjs';
-import { FieldError } from '../FieldError/FieldError.mjs';
 import 'mobx';
 import 'react';
 import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 import { useObjectRef } from '@react-aria/utils';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const DateRangePicker = flowComponent("DateRangePicker", (props) => {
-  const { children, className, errorMessage, onChange, ref, ...rest } = props;
-  const rootClassName = clsx(formFieldStyles.formField, className);
-  const propsContext = {
-    Label: {
-      className: formFieldStyles.label,
-      optional: !props.isRequired
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError
-    }
-  };
+  const { children, className, onChange, ref, ...rest } = props;
+  const { FieldErrorView, fieldProps, fieldPropsContext } = useFieldComponent(props);
+  const rootClassName = clsx(fieldProps.className, className);
   const popoverController = useOverlayController("Popover");
   const localDateRangePickerRef = useObjectRef(ref);
   useMakeFocusable(localDateRangePickerRef);
@@ -51,8 +39,7 @@ const DateRangePicker = flowComponent("DateRangePicker", (props) => {
       },
       children: [
         /* @__PURE__ */ jsx(DateRangeInput, { isDisabled: props.isDisabled }),
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }),
-        /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError, children: errorMessage }),
+        /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children }),
         /* @__PURE__ */ jsx(
           Popover,
           {
@@ -61,7 +48,8 @@ const DateRangePicker = flowComponent("DateRangePicker", (props) => {
             controller: popoverController,
             children: /* @__PURE__ */ jsx(RangeCalendar, {})
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
       ]
     }
   );

package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport styles from \"../FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">>,\n    FlowComponentProps {\n  /** The error message that is displayed below the input. */\n  errorMessage?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, errorMessage, onChange, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: styles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: styles.fieldDescription,\n    },\n    FieldError: {\n      className: styles.customFieldError,\n    },\n  };\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  const localDateRangePickerRef = useObjectRef(ref);\n  useMakeFocusable(localDateRangePickerRef);\n\n  return (\n    <Aria.DateRangePicker\n      ref={localDateRangePickerRef}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateRangeInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={styles.fieldError}>{errorMessage}</FieldError>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <RangeCalendar />\n      </Popover>\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;AA0BO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,YAAA,EAAc,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEtE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAKA,eAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAWA,eAAA,CAAO,KAAA;AAAA,MAClB,QAAA,EAAU,CAAC,KAAA,CAAM;AAAA,KACnB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAWA,eAAA,CAAO;AAAA,KACpB;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAWA,eAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,MAAM,uBAAA,GAA0B,aAAa,GAAG,CAAA;AAChD,EAAA,gBAAA,CAAiB,uBAAuB,CAAA;AAExC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,eAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,uBAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBAC9C,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAWA,eAAA,CAAO,YAAa,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,wBACxD,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA;AACjB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"DateRangePicker.mjs","sources":["../../../../../../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover } from \"@/components/Popover/Popover\";\nimport { RangeCalendar } from \"../Calendar/RangeCalendar\";\nimport { DateRangeInput } from \"./components/DateRangeInput\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface DateRangePickerProps<T extends Aria.DateValue = Aria.DateValue>\n  extends PropsWithChildren<Omit<Aria.DateRangePickerProps<T>, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const DateRangePicker = flowComponent(\"DateRangePicker\", (props) => {\n  const { children, className, onChange, ref, ...rest } = props;\n\n  const { FieldErrorView, fieldProps, fieldPropsContext } =\n    useFieldComponent(props);\n\n  const rootClassName = clsx(fieldProps.className, className);\n\n  const popoverController = useOverlayController(\"Popover\");\n\n  const localDateRangePickerRef = useObjectRef(ref);\n  useMakeFocusable(localDateRangePickerRef);\n\n  return (\n    <Aria.DateRangePicker\n      ref={localDateRangePickerRef}\n      {...rest}\n      className={rootClassName}\n      onOpenChange={(v) => popoverController.setOpen(v)}\n      isOpen={popoverController.isOpen}\n      onChange={(value) => {\n        if (onChange) {\n          onChange(value);\n        }\n        popoverController.close();\n      }}\n    >\n      <DateRangeInput isDisabled={props.isDisabled} />\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n      </PropsContextProvider>\n      <Popover\n        placement=\"bottom end\"\n        isDialogContent\n        controller={popoverController}\n      >\n        <RangeCalendar />\n      </Popover>\n      <FieldErrorView />\n    </Aria.DateRangePicker>\n  );\n});\n\nexport default DateRangePicker;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAqBO,MAAM,eAAA,GAAkB,aAAA,CAAc,iBAAA,EAAmB,CAAC,KAAA,KAAU;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,UAAU,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAExD,EAAA,MAAM,EAAE,cAAA,EAAgB,UAAA,EAAY,iBAAA,EAAkB,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAE1D,EAAA,MAAM,iBAAA,GAAoB,qBAAqB,SAAS,CAAA;AAExD,EAAA,MAAM,uBAAA,GAA0B,aAAa,GAAG,CAAA;AAChD,EAAA,gBAAA,CAAiB,uBAAuB,CAAA;AAExC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,eAAA;AAAA,IAAL;AAAA,MACC,GAAA,EAAK,uBAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,YAAA,EAAc,CAAC,CAAA,KAAM,iBAAA,CAAkB,QAAQ,CAAC,CAAA;AAAA,MAChD,QAAQ,iBAAA,CAAkB,MAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,QAAA,EAAU;AACZ,UAAA,QAAA,CAAS,KAAK,CAAA;AAAA,QAChB;AACA,QAAA,iBAAA,CAAkB,KAAA,EAAM;AAAA,MAC1B,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,UAAA,EAAY,KAAA,CAAM,UAAA,EAAY,CAAA;AAAA,wBAC9C,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,eAAA,EAAe,IAAA;AAAA,YACf,UAAA,EAAY,iBAAA;AAAA,YAEZ,8BAAC,aAAA,EAAA,EAAc;AAAA;AAAA,SACjB;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FieldError/FieldError.mjs

@@ -1,23 +1,54 @@
 "use client"
 /* */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext, useMemo } from 'react';
 import styles from './FieldError.module.scss.mjs';
 import * as Aria from 'react-aria-components';
+import { FieldErrorContext } from 'react-aria-components';
 import clsx from 'clsx';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
 import { IconDanger } from '../Icon/components/icons/IconDanger.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { onlyText } from 'react-children-utilities';
 
 const FieldError = flowComponent("FieldError", (props) => {
   const { children, className, ref, ...rest } = props;
   const rootClassName = clsx(styles.fieldError, className);
-  return /* @__PURE__ */ jsx(Aria.FieldError, { ref, ...rest, className: rootClassName, children: ({ validationErrors }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(IconDanger, { size: "s" }),
-    /* @__PURE__ */ jsx("span", { children: children ? children : validationErrors.join(" ") })
-  ] }) });
+  const fieldErrorFromAriaContext = useContext(FieldErrorContext);
+  const mergedErrorState = useMemo(() => {
+    if (React.Children.count(children) >= 1) {
+      const textChildren = onlyText(children);
+      if (!textChildren) {
+        return fieldErrorFromAriaContext;
+      }
+      return {
+        isInvalid: true,
+        validationErrors: [textChildren],
+        validationDetails: {
+          valid: false,
+          badInput: false,
+          customError: true,
+          patternMismatch: false,
+          rangeOverflow: false,
+          rangeUnderflow: false,
+          stepMismatch: false,
+          tooLong: false,
+          tooShort: false,
+          valueMissing: false,
+          typeMismatch: false
+        }
+      };
+    }
+    return fieldErrorFromAriaContext;
+  }, [fieldErrorFromAriaContext, children]);
+  return /* @__PURE__ */ jsx(FieldErrorContext, { value: mergedErrorState, children: /* @__PURE__ */ jsx(Aria.FieldError, { ref, ...rest, className: rootClassName, children: ({ validationErrors }) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(IconDanger, { size: "s" }),
+      /* @__PURE__ */ jsx("span", { children: validationErrors.join(" ") })
+    ] });
+  } }) });
 });
 
 export { FieldError, FieldError as default };

package/dist/js/components/src/components/FieldError/FieldError.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n\n  return (\n    <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n      {({ validationErrors }) => (\n        <>\n          <IconDanger size=\"s\" />\n          <span>{children ? children : validationErrors.join(\" \")}</span>\n        </>\n      )}\n    </Aria.FieldError>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AAEvD,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,UAAA,EAAL,EAAgB,GAAA,EAAW,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAC7C,QAAA,EAAA,CAAC,EAAE,gBAAA,uBACF,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAK,GAAA,EAAI,CAAA;AAAA,wBACpB,MAAA,EAAA,EAAM,QAAA,EAAA,QAAA,GAAW,WAAW,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,EAAE;AAAA,GAAA,EAC1D,CAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FieldError.mjs","sources":["../../../../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext, useMemo } from \"react\";\nimport React from \"react\";\nimport styles from \"./FieldError.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconDanger } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { onlyText } from \"react-children-utilities\";\n\nexport interface FieldErrorProps\n  extends PropsWithChildren<Omit<Aria.FieldErrorProps, \"children\">>,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const FieldError = flowComponent(\"FieldError\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.fieldError, className);\n  const fieldErrorFromAriaContext = useContext(FieldErrorContext);\n\n  const mergedErrorState = useMemo(() => {\n    if (React.Children.count(children) >= 1) {\n      const textChildren = onlyText(children);\n      if (!textChildren) {\n        return fieldErrorFromAriaContext;\n      }\n\n      return {\n        isInvalid: true,\n        validationErrors: [textChildren],\n        validationDetails: {\n          valid: false,\n          badInput: false,\n          customError: true,\n          patternMismatch: false,\n          rangeOverflow: false,\n          rangeUnderflow: false,\n          stepMismatch: false,\n          tooLong: false,\n          tooShort: false,\n          valueMissing: false,\n          typeMismatch: false,\n        },\n      };\n    }\n\n    return fieldErrorFromAriaContext;\n  }, [fieldErrorFromAriaContext, children]);\n\n  return (\n    <FieldErrorContext value={mergedErrorState}>\n      <Aria.FieldError ref={ref} {...rest} className={rootClassName}>\n        {({ validationErrors }) => {\n          return (\n            <>\n              <IconDanger size=\"s\" />\n              <span>{validationErrors.join(\" \")}</span>\n            </>\n          );\n        }}\n      </Aria.FieldError>\n    </FieldErrorContext>\n  );\n});\n\nexport default FieldError;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,UAAA,EAAY,SAAS,CAAA;AACvD,EAAA,MAAM,yBAAA,GAA4B,WAAW,iBAAiB,CAAA;AAE9D,EAAA,MAAM,gBAAA,GAAmB,QAAQ,MAAM;AACrC,IAAA,IAAI,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,QAAQ,KAAK,CAAA,EAAG;AACvC,MAAA,MAAM,YAAA,GAAe,SAAS,QAAQ,CAAA;AACtC,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,OAAO,yBAAA;AAAA,MACT;AAEA,MAAA,OAAO;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,QACX,gBAAA,EAAkB,CAAC,YAAY,CAAA;AAAA,QAC/B,iBAAA,EAAmB;AAAA,UACjB,KAAA,EAAO,KAAA;AAAA,UACP,QAAA,EAAU,KAAA;AAAA,UACV,WAAA,EAAa,IAAA;AAAA,UACb,eAAA,EAAiB,KAAA;AAAA,UACjB,aAAA,EAAe,KAAA;AAAA,UACf,cAAA,EAAgB,KAAA;AAAA,UAChB,YAAA,EAAc,KAAA;AAAA,UACd,OAAA,EAAS,KAAA;AAAA,UACT,QAAA,EAAU,KAAA;AAAA,UACV,YAAA,EAAc,KAAA;AAAA,UACd,YAAA,EAAc;AAAA;AAChB,OACF;AAAA,IACF;AAEA,IAAA,OAAO,yBAAA;AAAA,EACT,CAAA,EAAG,CAAC,yBAAA,EAA2B,QAAQ,CAAC,CAAA;AAExC,EAAA,2BACG,iBAAA,EAAA,EAAkB,KAAA,EAAO,gBAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,KAAK,UAAA,EAAL,EAAgB,GAAA,EAAW,GAAG,MAAM,SAAA,EAAW,aAAA,EAC7C,QAAA,EAAA,CAAC,EAAE,kBAAiB,KAAM;AACzB,IAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAK,GAAA,EAAI,CAAA;AAAA,sBACrB,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA,EAAE;AAAA,KAAA,EACpC,CAAA;AAAA,EAEJ,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import * as Aria from 'react-aria-components';
 import { IllustratedMessage } from '../IllustratedMessage/IllustratedMessage.mjs';
@@ -10,6 +10,7 @@ import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const FileDropZone = flowComponent(
   "FileDropZone",
@@ -24,6 +25,12 @@ const FileDropZone = flowComponent(
       isDisabled,
       isReadOnly
     } = props;
+    const {
+      FieldErrorView,
+      FieldErrorResetContext,
+      fieldProps,
+      fieldPropsContext
+    } = useFieldComponent(props);
     const fileFieldRef = useRef(null);
     const rootClassName = clsx(
       styles.fileDropZone,
@@ -31,6 +38,7 @@ const FileDropZone = flowComponent(
       className
     );
     const propsContext = {
+      ...fieldPropsContext,
       FileField: {
         name,
         onChange: onChangeDropZone,
@@ -73,16 +81,19 @@ const FileDropZone = flowComponent(
         }
       }
     };
-    return /* @__PURE__ */ jsx(
-      Aria.DropZone,
-      {
-        className: rootClassName,
-        onDrop: onDropHandler,
-        isDisabled,
-        "data-readonly": isReadOnly,
-        children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) })
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
+      /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+        Aria.DropZone,
+        {
+          className: rootClassName,
+          onDrop: onDropHandler,
+          isDisabled,
+          "data-readonly": isReadOnly,
+          children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(FieldErrorView, {})
+    ] });
   }
 );
 

package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <Aria.DropZone\n        className={rootClassName}\n        onDrop={onDropHandler}\n        isDisabled={isDisabled}\n        data-readonly={isReadOnly}\n      >\n        <IllustratedMessage color=\"dark\">\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </IllustratedMessage>\n      </Aria.DropZone>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const {\n      FieldErrorView,\n      FieldErrorResetContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props);\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <div {...fieldProps}>\n        <FieldErrorResetContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorResetContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/FileField/FileField.mjs

@@ -1,7 +1,6 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFormValidation } from '@react-aria/form';
 import { useFormValidationState } from '@react-stately/form';
 import { InputContext, FieldErrorContext } from 'react-aria-components';
@@ -12,6 +11,7 @@ import { PropsContextProvider } from '../../lib/propsContext/components/PropsCon
 import { useObjectRef } from '@react-aria/utils';
 import { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const FileField = flowComponent("FileField", (props) => {
   const {
@@ -25,6 +25,12 @@ const FileField = flowComponent("FileField", (props) => {
     isReadOnly,
     ...restInputProps
   } = props;
+  const {
+    FieldErrorView,
+    FieldErrorResetContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
   const inputRef = useObjectRef(ref);
   const formValidationState = useFormValidationState({
     value: void 0,
@@ -37,18 +43,6 @@ const FileField = flowComponent("FileField", (props) => {
     "aria-invalid": formValidationState.displayValidation.isInvalid,
     value: void 0
   };
-  const propsContext = {
-    Label: {
-      className: formFieldStyles.label,
-      optional: !props.isRequired
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError
-    }
-  };
   const handleOnChange = (fileList) => {
     if (fileList && onChange) {
       Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(
@@ -57,25 +51,33 @@ const FileField = flowComponent("FileField", (props) => {
     }
   };
   useMakeFocusable(inputRef);
-  return /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
-    "div",
+  return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsxs(
+    FieldErrorContext.Provider,
     {
-      "data-readonly": isReadOnly,
-      "data-required": !!isRequired || void 0,
-      "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
-      className: formFieldStyles.formField,
-      children: /* @__PURE__ */ jsx(
-        FileInput,
-        {
-          ref: inputRef,
-          isReadOnly,
-          onChange: isReadOnly ? void 0 : handleOnChange,
-          isDisabled,
-          children
-        }
-      )
+      value: formValidationState.displayValidation,
+      children: [
+        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-readonly": isReadOnly,
+            "data-required": !!isRequired || void 0,
+            "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
+            children: /* @__PURE__ */ jsx(
+              FileInput,
+              {
+                ref: inputRef,
+                isReadOnly,
+                onChange: isReadOnly ? void 0 : handleOnChange,
+                isDisabled,
+                children
+              }
+            )
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
     }
-  ) }) }) });
+  ) }) });
 });
 
 export { FileField, FileField as default };

package/dist/js/components/src/components/FileField/FileField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  useMakeFocusable(inputRef);\n\n  return (\n    <InputContext.Provider value={inputProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <PropsContextProvider props={propsContext}>\n          <div\n            data-readonly={isReadOnly}\n            data-required={!!isRequired || undefined}\n            data-invalid={\n              formValidationState.displayValidation.isInvalid || undefined\n            }\n            className={formFieldStyles.formField}\n          >\n            <FileInput\n              ref={inputRef}\n              isReadOnly={isReadOnly}\n              onChange={isReadOnly ? undefined : handleOnChange}\n              isDisabled={isDisabled}\n            >\n              {children}\n            </FileInput>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorContext.Provider>\n    </InputContext.Provider>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAA,CAAM;AAAA,KACnB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB;AAAA,KAC7B;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,2BACG,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,YAC5B,QAAA,kBAAA,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA2B,OAAO,mBAAA,CAAoB,iBAAA,EACrD,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAe,UAAA;AAAA,MACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,MAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,MAErD,WAAW,eAAA,CAAgB,SAAA;AAAA,MAE3B,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,QAAA;AAAA,UACL,UAAA;AAAA,UACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,UACnC,UAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,GACF,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  useMakeFocusable(inputRef);\n\n  return (\n    <div {...fieldProps}>\n      <InputContext.Provider value={inputProps}>\n        <FieldErrorContext.Provider\n          value={formValidationState.displayValidation}\n        >\n          <FieldErrorResetContext>\n            <PropsContextProvider props={fieldPropsContext}>\n              <div\n                data-readonly={isReadOnly}\n                data-required={!!isRequired || undefined}\n                data-invalid={\n                  formValidationState.displayValidation.isInvalid || undefined\n                }\n              >\n                <FileInput\n                  ref={inputRef}\n                  isReadOnly={isReadOnly}\n                  onChange={isReadOnly ? undefined : handleOnChange}\n                  isDisabled={isDisabled}\n                >\n                  {children}\n                </FileInput>\n              </div>\n            </PropsContextProvider>\n          </FieldErrorResetContext>\n          <FieldErrorView />\n        </FieldErrorContext.Provider>\n      </InputContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AA8BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,cAAA,GAA2C,CAAC,QAAA,KAAa;AAC7D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EACP,8BAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,UAAA,EAC5B,QAAA,kBAAA,IAAA;AAAA,IAAC,iBAAA,CAAkB,QAAA;AAAA,IAAlB;AAAA,MACC,OAAO,mBAAA,CAAoB,iBAAA;AAAA,MAE3B,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,sBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,YAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,YAGrD,QAAA,kBAAA,GAAA;AAAA,cAAC,SAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,QAAA;AAAA,gBACL,UAAA;AAAA,gBACA,QAAA,EAAU,aAAa,MAAA,GAAY,cAAA;AAAA,gBACnC,UAAA;AAAA,gBAEC;AAAA;AAAA;AACH;AAAA,WAEJ,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,KAEpB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/FormField/FormField.module.scss.mjs

@@ -3,15 +3,13 @@
 const formField = "flow--form-field";
 const label = "flow--form-field--label";
 const fieldError = "flow--form-field--field-error";
-const customFieldError = "flow--form-field--custom-field-error";
 const fieldDescription = "flow--form-field--field-description";
 const formFieldStyles = {
 	formField: formField,
 	label: label,
 	fieldError: fieldError,
-	customFieldError: customFieldError,
 	fieldDescription: fieldDescription
 };
 
-export { customFieldError, formFieldStyles as default, fieldDescription, fieldError, formField, label };
+export { formFieldStyles as default, fieldDescription, fieldError, formField, label };
 //# sourceMappingURL=FormField.module.scss.mjs.map

package/dist/js/components/src/components/FormField/FormField.module.scss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"FormField.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/js/components/src/components/NumberField/NumberField.mjs

@@ -1,15 +1,14 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
 import * as Aria from 'react-aria-components';
 import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import styles from './NumberField.module.scss.mjs';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
-import { FieldError } from '../FieldError/FieldError.mjs';
 import { Button } from '../Button/Button.mjs';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
@@ -19,6 +18,7 @@ import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
 import { IconPlus } from '../Icon/components/icons/IconPlus.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const NumberField = flowComponent("NumberField", (props) => {
   const {
@@ -29,28 +29,20 @@ const NumberField = flowComponent("NumberField", (props) => {
     isWheelDisabled = true,
     ...rest
   } = props;
+  const { FieldErrorView, fieldProps, fieldPropsContext } = useFieldComponent(props);
   const rootClassName = clsx(formFieldStyles.formField, className);
-  const propsContext = {
-    Label: {
-      className: formFieldStyles.label,
-      optional: !props.isRequired
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError
-    }
-  };
   return /* @__PURE__ */ jsxs(
     Aria.NumberField,
     {
       ...rest,
       isWheelDisabled,
       defaultValue,
-      className: rootClassName,
+      className: clsx(rootClassName, fieldProps.className),
       children: [
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }),
+        /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
+          children,
+          /* @__PURE__ */ jsx(FieldErrorView, {})
+        ] }),
         /* @__PURE__ */ jsxs(Aria.Group, { className: styles.group, children: [
           /* @__PURE__ */ jsxs(
             Button,
@@ -88,8 +80,7 @@ const NumberField = flowComponent("NumberField", (props) => {
               ]
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
+        ] })
       ]
     }
   );

package/dist/js/components/src/components/NumberField/NumberField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","sources":["../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\n\nexport interface NumberFieldProps\n  extends PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  const {\n    children,\n    className,\n    ref,\n    defaultValue,\n    isWheelDisabled = true,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      defaultValue={defaultValue}\n      className={rootClassName}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <ReactAriaControlledValueFix\n          inputContext={Aria.InputContext}\n          props={props}\n        >\n          <Aria.Input className={styles.input} ref={ref} />\n        </ReactAriaControlledValueFix>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n      <FieldError className={formFieldStyles.fieldError} />\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAA,CAAM;AAAA,KACnB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB;AAAA,KAC7B;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,eAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA;AAAA,6BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,KAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,gCACjB,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA,WAClD;AAAA,0BACA,GAAA;AAAA,YAAC,2BAAA;AAAA,YAAA;AAAA,cACC,cAAc,IAAA,CAAK,YAAA;AAAA,cACnB,KAAA;AAAA,cAEA,8BAAC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,MAAA,CAAO,OAAO,GAAA,EAAU;AAAA;AAAA,WACjD;AAAA,0BACA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,gCACf,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA;AACjD,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,CAAgB,UAAA,EAAY;AAAA;AAAA;AAAA,GACrD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"NumberField.mjs","sources":["../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import React, { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface NumberFieldProps\n  extends PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  const {\n    children,\n    className,\n    ref,\n    defaultValue,\n    isWheelDisabled = true,\n    ...rest\n  } = props;\n\n  const { FieldErrorView, fieldProps, fieldPropsContext } =\n    useFieldComponent(props);\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      defaultValue={defaultValue}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        {children}\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <ReactAriaControlledValueFix\n          inputContext={Aria.InputContext}\n          props={props}\n        >\n          <Aria.Input className={styles.input} ref={ref} />\n        </ReactAriaControlledValueFix>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA,GAAkB,IAAA;AAAA,IAClB,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,cAAA,EAAgB,UAAA,EAAY,iBAAA,EAAkB,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,eAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,8BACA,cAAA,EAAA,EAAe;AAAA,SAAA,EAClB,CAAA;AAAA,6BACC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,OAAO,KAAA,EAC5B,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA;AAAA,gCACjB,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA,WAClD;AAAA,0BACA,GAAA;AAAA,YAAC,2BAAA;AAAA,YAAA;AAAA,cACC,cAAc,IAAA,CAAK,YAAA;AAAA,cACnB,KAAA;AAAA,cAEA,8BAAC,IAAA,CAAK,KAAA,EAAL,EAAW,SAAA,EAAW,MAAA,CAAO,OAAO,GAAA,EAAU;AAAA;AAAA,WACjD;AAAA,0BACA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,QAAA,EAAS,WAAA;AAAA,cACT,WAAW,MAAA,CAAO,eAAA;AAAA,cAClB,IAAA,EAAK,GAAA;AAAA,cACL,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,gCACf,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAW,MAAA,CAAO,iBAAA,EAAmB;AAAA;AAAA;AAAA;AACjD,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}