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

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
@@ -15,9 +15,10 @@ import { Text } from '../Text/Text.mjs';
 import styles from './Autocomplete.module.scss.mjs';
 import { useLocalizedStringFormatter, useFocusWithin, UNSAFE_PortalProvider } from 'react-aria';
 import { emitElementValueChange } from '../../lib/react/emitElementValueChange.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const Autocomplete = flowComponent("Autocomplete", (props) => {
-  const { children, ...rest } = props;
+  const { children, isInvalid, ...rest } = props;
   const { contains } = Aria.useFilter({ sensitivity: "base" });
   const stringFormatter = useLocalizedStringFormatter(locales);
   const container = useRef(null);
@@ -34,19 +35,10 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
         e.preventDefault();
       }
     },
+    isInvalid,
     ref: triggerRef
   };
   const renderEmptyState = () => /* @__PURE__ */ jsx(Text, { className: styles.empty, children: stringFormatter.format("autocomplete.empty") });
-  const propsContext = {
-    SearchField: inputProps,
-    TextField: inputProps,
-    Option: {
-      tunnelId: "options"
-    },
-    Popover: {
-      className: styles.popover
-    }
-  };
   const handleOnInputChange = (value) => {
     if (!value) {
       controller.close();
@@ -61,30 +53,50 @@ const Autocomplete = flowComponent("Autocomplete", (props) => {
     }
     controller.close();
   };
-  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
-    Aria.Autocomplete,
-    {
-      onInputChange: handleOnInputChange,
-      filter: contains,
-      disableAutoFocusFirst: true,
-      ...rest,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          Options,
-          {
-            onAction: handleOptionAction,
-            triggerRef,
-            controller,
-            renderEmptyState,
-            isNonModal: true,
-            placement: "bottom start",
-            children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
-          }
-        )
-      ]
-    }
-  ) }) }) });
+  const {
+    FieldErrorView,
+    FieldErrorResetContext,
+    fieldPropsContext,
+    fieldProps
+  } = useFieldComponent(props);
+  const propsContext = {
+    SearchField: inputProps,
+    TextField: inputProps,
+    Option: {
+      tunnelId: "options"
+    },
+    Popover: {
+      className: styles.popover
+    },
+    ...fieldPropsContext
+  };
+  return /* @__PURE__ */ jsxs("div", { ...fieldProps, children: [
+    /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx("div", { ...focusWithin.focusWithinProps, ref: container, children: /* @__PURE__ */ jsx(UNSAFE_PortalProvider, { getContainer: () => container.current, children: /* @__PURE__ */ jsxs(
+      Aria.Autocomplete,
+      {
+        onInputChange: handleOnInputChange,
+        filter: contains,
+        disableAutoFocusFirst: true,
+        ...rest,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Options,
+            {
+              onAction: handleOptionAction,
+              triggerRef,
+              controller,
+              renderEmptyState,
+              isNonModal: true,
+              placement: "bottom start",
+              children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
+            }
+          )
+        ]
+      }
+    ) }) }) }) }),
+    /* @__PURE__ */ jsx(FieldErrorView, {})
+  ] });
 });
 
 export { Autocomplete, Autocomplete as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nexport interface AutocompleteProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    Omit<Aria.AutocompleteProps, \"children\" | \"onInputChange\" | \"inputValue\"> {}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, ...rest } = props;\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n  const triggerRef = useRef<HTMLInputElement>(null);\n\n  const controller = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: controller.close,\n  });\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && controller.isOpen) {\n        e.preventDefault();\n      }\n    },\n    ref: triggerRef,\n  };\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnelId: \"options\",\n    },\n    Popover: {\n      className: styles.popover,\n    },\n  };\n\n  const handleOnInputChange = (value: string) => {\n    if (!value) {\n      controller.close();\n    } else if (!controller.isOpen) {\n      controller.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const inputElement = triggerRef.current;\n    if (inputElement) {\n      // Set value on input element and trigger change event\n      emitElementValueChange(inputElement, String(key));\n    }\n    controller.close();\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <div {...focusWithin.focusWithinProps} ref={container}>\n        <UNSAFE_PortalProvider getContainer={() => container.current}>\n          <Aria.Autocomplete\n            onInputChange={handleOnInputChange}\n            filter={contains}\n            disableAutoFocusFirst\n            {...rest}\n          >\n            {children}\n            <Options\n              onAction={handleOptionAction}\n              triggerRef={triggerRef}\n              controller={controller}\n              renderEmptyState={renderEmptyState}\n              isNonModal\n              placement=\"bottom start\"\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </Aria.Autocomplete>\n        </UNSAFE_PortalProvider>\n      </div>\n    </PropsContextProvider>\n  );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.mjs","sources":["../../../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useRef, type PropsWithChildren } from \"react\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport * as Aria from \"react-aria-components\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { SearchFieldProps } from \"@/components/SearchField\";\nimport type { TextFieldProps } from \"@/components/TextField\";\nimport Options from \"@/components/Options\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport locales from \"./locales/*.locale.json\";\nimport Text from \"@/components/Text\";\nimport styles from \"./Autocomplete.module.scss\";\nimport {\n  UNSAFE_PortalProvider,\n  useFocusWithin,\n  useLocalizedStringFormatter,\n} from \"react-aria\";\nimport { emitElementValueChange } from \"@/lib/react/emitElementValueChange\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nexport interface AutocompleteProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    FlowComponentProps,\n    Omit<Aria.AutocompleteProps, \"children\" | \"onInputChange\" | \"inputValue\"> {\n  isInvalid?: boolean;\n}\n\n/** @flr-generate all */\nexport const Autocomplete = flowComponent(\"Autocomplete\", (props) => {\n  const { children, isInvalid, ...rest } = props;\n\n  const { contains } = Aria.useFilter({ sensitivity: \"base\" });\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const container = useRef(null);\n  const triggerRef = useRef<HTMLInputElement>(null);\n\n  const controller = useOverlayController(\"Popover\", {\n    reuseControllerFromContext: false,\n  });\n\n  const focusWithin = useFocusWithin({\n    onBlurWithin: controller.close,\n  });\n\n  const inputProps: SearchFieldProps & TextFieldProps = {\n    onKeyDown: (e) => {\n      if (e.key === \"Enter\" && controller.isOpen) {\n        e.preventDefault();\n      }\n    },\n    isInvalid,\n    ref: triggerRef,\n  };\n\n  const renderEmptyState = () => (\n    <Text className={styles.empty}>\n      {stringFormatter.format(\"autocomplete.empty\")}\n    </Text>\n  );\n\n  const handleOnInputChange = (value: string) => {\n    if (!value) {\n      controller.close();\n    } else if (!controller.isOpen) {\n      controller.open();\n    }\n  };\n\n  const handleOptionAction = (key: Aria.Key) => {\n    const inputElement = triggerRef.current;\n    if (inputElement) {\n      // Set value on input element and trigger change event\n      emitElementValueChange(inputElement, String(key));\n    }\n    controller.close();\n  };\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldPropsContext,\n    fieldProps,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    SearchField: inputProps,\n    TextField: inputProps,\n    Option: {\n      tunnelId: \"options\",\n    },\n    Popover: {\n      className: styles.popover,\n    },\n    ...fieldPropsContext,\n  };\n\n  return (\n    <div {...fieldProps}>\n      <FieldErrorResetContext>\n        <PropsContextProvider props={propsContext}>\n          <div {...focusWithin.focusWithinProps} ref={container}>\n            <UNSAFE_PortalProvider getContainer={() => container.current}>\n              <Aria.Autocomplete\n                onInputChange={handleOnInputChange}\n                filter={contains}\n                disableAutoFocusFirst\n                {...rest}\n              >\n                {children}\n                <Options\n                  onAction={handleOptionAction}\n                  triggerRef={triggerRef}\n                  controller={controller}\n                  renderEmptyState={renderEmptyState}\n                  isNonModal\n                  placement=\"bottom start\"\n                >\n                  <TunnelExit id=\"options\" />\n                </Options>\n              </Aria.Autocomplete>\n            </UNSAFE_PortalProvider>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorResetContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Autocomplete;\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
@@ -12,14 +12,32 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import clsx from 'clsx';
 import * as Aria from 'react-aria-components';
 import styles from './Checkbox.module.scss.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const Checkbox = flowComponent("Checkbox", (props) => {
-  const { children, className, ref, ...rest } = props;
-  const rootClassName = clsx(styles.checkbox, className);
-  return /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: rootClassName, ref, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: styles.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: styles.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: styles.icon }),
-    children
-  ] }) });
+  const { children, className, ref, inputClassName, ...rest } = props;
+  const { FieldErrorView, fieldPropsContext, fieldProps } = useFieldComponent(props);
+  const localCheckboxRef = useObjectRef(ref);
+  useMakeFocusable(localCheckboxRef);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...fieldProps,
+      className: clsx(styles.checkbox, className, fieldProps.className),
+      ref: localCheckboxRef,
+      children: [
+        /* @__PURE__ */ jsx(Aria.Checkbox, { ...rest, className: clsx(inputClassName, styles.input), children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs(PropsContextProvider, { props: fieldPropsContext, children: [
+          isSelected ? /* @__PURE__ */ jsx(IconCheckboxChecked, { className: styles.icon }) : isIndeterminate ? /* @__PURE__ */ jsx(IconCheckboxIndeterminate, { className: styles.icon }) : /* @__PURE__ */ jsx(IconCheckboxEmpty, { className: styles.icon }),
+          children
+        ] }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
+    }
+  );
 });
 
 export { Checkbox, Checkbox as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkbox, className);\n\n  return (\n    <Aria.Checkbox {...rest} className={rootClassName} ref={ref}>\n      {({ isSelected, isIndeterminate }) => (\n        <>\n          {isSelected ? (\n            <IconCheckboxChecked className={styles.icon} />\n          ) : isIndeterminate ? (\n            <IconCheckboxIndeterminate className={styles.icon} />\n          ) : (\n            <IconCheckboxEmpty className={styles.icon} />\n          )}\n          {children}\n        </>\n      )}\n    </Aria.Checkbox>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAChD,QAAA,EAAA,CAAC,EAAE,UAAA,EAAY,eAAA,uBACd,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,IAE5C;AAAA,GAAA,EACH,CAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Checkbox.mjs","sources":["../../../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  IconCheckboxChecked,\n  IconCheckboxEmpty,\n  IconCheckboxIndeterminate,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Checkbox.module.scss\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxProps\n  extends PropsWithChildren<Omit<Aria.CheckboxProps, \"children\">>,\n    FlowComponentProps {\n  inputClassName?: string;\n}\n\n/** @flr-generate all */\nexport const Checkbox = flowComponent(\"Checkbox\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const { FieldErrorView, fieldPropsContext, fieldProps } =\n    useFieldComponent(props);\n\n  const localCheckboxRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(styles.checkbox, className, fieldProps.className)}\n      ref={localCheckboxRef}\n    >\n      <Aria.Checkbox {...rest} className={clsx(inputClassName, styles.input)}>\n        {({ isSelected, isIndeterminate }) => (\n          <PropsContextProvider props={fieldPropsContext}>\n            {isSelected ? (\n              <IconCheckboxChecked className={styles.icon} />\n            ) : isIndeterminate ? (\n              <IconCheckboxIndeterminate className={styles.icon} />\n            ) : (\n              <IconCheckboxEmpty className={styles.icon} />\n            )}\n            {children}\n          </PropsContextProvider>\n        )}\n      </Aria.Checkbox>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default Checkbox;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAuBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM,EAAE,cAAA,EAAgB,iBAAA,EAAmB,UAAA,EAAW,GACpD,kBAAkB,KAAK,CAAA;AAEzB,EAAA,MAAM,gBAAA,GAAmB,aAAa,GAAG,CAAA;AACzC,EAAA,gBAAA,CAAiB,gBAAgB,CAAA;AAEjC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAA,EAAW,WAAW,SAAS,CAAA;AAAA,MAChE,GAAA,EAAK,gBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAK,QAAA,EAAL,EAAe,GAAG,IAAA,EAAM,SAAA,EAAW,KAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA,EAClE,QAAA,EAAA,CAAC,EAAE,UAAA,EAAY,eAAA,uBACd,IAAA,CAAC,oBAAA,EAAA,EAAqB,OAAO,iBAAA,EAC1B,QAAA,EAAA;AAAA,UAAA,UAAA,uBACE,mBAAA,EAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,IAC3C,eAAA,mBACF,GAAA,CAAC,yBAAA,EAAA,EAA0B,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA,uBAElD,iBAAA,EAAA,EAAkB,SAAA,EAAW,OAAO,IAAA,EAAM,CAAA;AAAA,UAE5C;AAAA,SAAA,EACH,CAAA,EAEJ,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

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

@@ -1,11 +1,13 @@
 "use client"
 /* */
 const checkbox = "flow--checkbox";
+const input = "flow--checkbox--input";
 const icon = "flow--checkbox--icon";
 const styles = {
 	checkbox: checkbox,
+	input: input,
 	icon: icon
 };
 
-export { checkbox, styles as default, icon };
+export { checkbox, styles as default, icon, input };
 //# sourceMappingURL=Checkbox.module.scss.mjs.map

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

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

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

@@ -1,25 +1,47 @@
 "use client"
 /* */
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styles from './CheckboxButton.module.scss.mjs';
 import clsx from 'clsx';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import { Checkbox } from '../Checkbox/Checkbox.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const CheckboxButton = flowComponent("CheckboxButton", (props) => {
-  const { children, className, ref, ...rest } = props;
-  const rootClassName = clsx(styles.checkboxButton, className);
-  const propsContext = {
+  const { children, className, ref, inputClassName, ...rest } = props;
+  const {
+    fieldPropsContext,
+    fieldProps,
+    FieldErrorView,
+    FieldErrorResetContext
+  } = useFieldComponent(props);
+  const mergedPropsContext = {
     Text: {
       className: styles.label
     },
     Content: {
       className: styles.content
-    }
+    },
+    ...fieldPropsContext
   };
-  return /* @__PURE__ */ jsx(Checkbox, { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  const localCheckboxButtonRef = useObjectRef(ref);
+  useMakeFocusable(localCheckboxButtonRef);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...fieldProps,
+      className: clsx(fieldProps.className, styles.checkboxButton, className),
+      ref: localCheckboxButtonRef,
+      children: [
+        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsx(Checkbox, { ...rest, inputClassName: clsx(inputClassName, styles.input), children: /* @__PURE__ */ jsx(PropsContextProvider, { props: mergedPropsContext, clear: true, children }) }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
+    }
+  );
 });
 
 export { CheckboxButton, CheckboxButton as default };

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.checkboxButton, className);\n\n  const propsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n  };\n\n  return (\n    <Checkbox {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Checkbox>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;AAcO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,cAAA,EAAgB,SAAS,CAAA;AAE3D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC5C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxButton.mjs","sources":["../../../../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import styles from \"./CheckboxButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { CheckboxProps } from \"@/components/Checkbox\";\nimport { Checkbox } from \"@/components/Checkbox\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxButtonProps\n  extends CheckboxProps,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxButton = flowComponent(\"CheckboxButton\", (props) => {\n  const { children, className, ref, inputClassName, ...rest } = props;\n\n  const {\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorView,\n    FieldErrorResetContext,\n  } = useFieldComponent(props);\n\n  const mergedPropsContext: PropsContext = {\n    Text: {\n      className: styles.label,\n    },\n    Content: {\n      className: styles.content,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxButtonRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxButtonRef);\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.checkboxButton, className)}\n      ref={localCheckboxButtonRef}\n    >\n      <FieldErrorResetContext>\n        <Checkbox {...rest} inputClassName={clsx(inputClassName, styles.input)}>\n          <PropsContextProvider props={mergedPropsContext} clear>\n            {children}\n          </PropsContextProvider>\n        </Checkbox>\n      </FieldErrorResetContext>\n      <FieldErrorView />\n    </div>\n  );\n});\n\nexport default CheckboxButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAiBO,MAAM,cAAA,GAAiB,aAAA,CAAc,gBAAA,EAAkB,CAAC,KAAA,KAAU;AACvE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,KAAK,cAAA,EAAgB,GAAG,MAAK,GAAI,KAAA;AAE9D,EAAA,MAAM;AAAA,IACJ,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,kBAAA,GAAmC;AAAA,IACvC,IAAA,EAAM;AAAA,MACJ,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,OAAA,EAAS;AAAA,MACP,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,sBAAA,GAAyB,aAAa,GAAG,CAAA;AAC/C,EAAA,gBAAA,CAAiB,sBAAsB,CAAA;AAEvC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,WAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,MAAA,CAAO,gBAAgB,SAAS,CAAA;AAAA,MACtE,GAAA,EAAK,sBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,0BACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAU,GAAG,IAAA,EAAM,cAAA,EAAgB,KAAK,cAAA,EAAgB,MAAA,CAAO,KAAK,CAAA,EACnE,QAAA,kBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,kBAAA,EAAoB,OAAK,IAAA,EACnD,QAAA,EACH,GACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

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

@@ -1,13 +1,15 @@
 "use client"
 /* */
 const checkboxButton = "flow--checkbox-button";
-const label = "flow--checkbox-button--label";
+const input = "flow--checkbox-button--input";
 const content = "flow--checkbox-button--content";
+const label = "flow--checkbox-button--label";
 const styles = {
 	checkboxButton: checkboxButton,
-	label: label,
-	content: content
+	input: input,
+	content: content,
+	label: label
 };
 
-export { checkboxButton, content, styles as default, label };
+export { checkboxButton, content, styles as default, input, label };
 //# sourceMappingURL=CheckboxButton.module.scss.mjs.map

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

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

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

@@ -1,53 +1,51 @@
 "use client"
 /* */
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
-import { FieldError } from '../FieldError/FieldError.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import clsx from 'clsx';
 import * as Aria from 'react-aria-components';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import styles from './CheckboxGroup.module.scss.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
-  const { children, className, s, m, l, ref, ...rest } = props;
-  const rootClassName = clsx(formFieldStyles.formField, className);
+  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;
+  const {
+    FieldErrorView,
+    fieldPropsContext,
+    fieldProps,
+    FieldErrorResetContext
+  } = useFieldComponent(props);
   const propsContext = {
-    Label: {
-      className: formFieldStyles.label
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription,
-      tunnelId: "fieldDescription"
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError,
-      tunnelId: "fieldError"
-    },
     Checkbox: {
+      isInvalid,
       tunnelId: "checkboxes",
       className: styles.checkbox
     },
     CheckboxButton: {
+      isInvalid,
       tunnelId: "checkboxButtons",
       className: styles.checkboxButton
-    }
+    },
+    ...fieldPropsContext
   };
   const localCheckboxGroupRef = useObjectRef(ref);
   useMakeFocusable(localCheckboxGroupRef);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Aria.CheckboxGroup,
     {
       ...rest,
-      className: rootClassName,
+      ...fieldProps,
+      isInvalid,
+      className: clsx(fieldProps.className, className),
       ref: localCheckboxGroupRef,
-      children: [
-        /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, clear: true, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, clear: true, children: [
           children,
           /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.checkboxGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "checkboxButtons" }) }),
           /* @__PURE__ */ jsx(
@@ -60,12 +58,10 @@ const CheckboxGroup = flowComponent("CheckboxGroup", (props) => {
               className: styles.checkboxGroup,
               children: /* @__PURE__ */ jsx(TunnelExit, { id: "checkboxes" })
             }
-          ),
-          /* @__PURE__ */ jsx(TunnelExit, { id: "fieldDescription" }),
-          /* @__PURE__ */ jsx(TunnelExit, { id: "fieldError" })
+          )
         ] }) }),
-        /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
-      ]
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] })
     }
   );
 });

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport { FieldError } from \"@/components/FieldError\";\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 { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface CheckboxGroupProps\n  extends PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n      tunnelId: \"fieldDescription\",\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n      tunnelId: \"fieldError\",\n    },\n    Checkbox: {\n      tunnelId: \"checkboxes\",\n      className: styles.checkbox,\n    },\n    CheckboxButton: {\n      tunnelId: \"checkboxButtons\",\n      className: styles.checkboxButton,\n    },\n  };\n\n  const localCheckboxGroupRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxGroupRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      className={rootClassName}\n      ref={localCheckboxGroupRef}\n    >\n      <PropsContextProvider props={propsContext} clear>\n        <TunnelProvider>\n          {children}\n\n          <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n            <TunnelExit id=\"checkboxButtons\" />\n          </ColumnLayout>\n\n          <ColumnLayout\n            s={s ?? [1]}\n            m={m ?? [1]}\n            l={l ?? [1]}\n            rowGap=\"s\"\n            className={styles.checkboxGroup}\n          >\n            <TunnelExit id=\"checkboxes\" />\n          </ColumnLayout>\n\n          <TunnelExit id=\"fieldDescription\" />\n          <TunnelExit id=\"fieldError\" />\n        </TunnelProvider>\n      </PropsContextProvider>\n      <FieldError className={formFieldStyles.fieldError} />\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvD,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;AAAA,KAC7B;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB,gBAAA;AAAA,MAC3B,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,eAAA,CAAgB,gBAAA;AAAA,MAC3B,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,QAAA,EAAU;AAAA,MACR,QAAA,EAAU,YAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,iBAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA;AACpB,GACF;AAEA,EAAA,MAAM,qBAAA,GAAwB,aAAa,GAAG,CAAA;AAC9C,EAAA,gBAAA,CAAiB,qBAAqB,CAAA;AAEtC,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,qBAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,YAAA,EAAc,KAAA,EAAK,IAAA,EAC9C,+BAAC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BAED,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,aAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAA,EAAkB,CAAA,EACnC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA;AAAA,WAC9B;AAAA,0BAEA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,kBAAA,EAAmB,CAAA;AAAA,0BAClC,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA,SAAA,EAC9B,CAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,CAAgB,UAAA,EAAY;AAAA;AAAA;AAAA,GACrD;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.mjs","sources":["../../../../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\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 { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport clsx from \"clsx\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./CheckboxGroup.module.scss\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface CheckboxGroupProps\n  extends PropsWithChildren<Omit<Aria.CheckboxGroupProps, \"children\">>,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\">,\n    FlowComponentProps {}\n\n/** @flr-generate all */\nexport const CheckboxGroup = flowComponent(\"CheckboxGroup\", (props) => {\n  const { children, className, isInvalid, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorResetContext,\n  } = useFieldComponent(props);\n\n  const propsContext: PropsContext = {\n    Checkbox: {\n      isInvalid,\n      tunnelId: \"checkboxes\",\n      className: styles.checkbox,\n    },\n    CheckboxButton: {\n      isInvalid,\n      tunnelId: \"checkboxButtons\",\n      className: styles.checkboxButton,\n    },\n    ...fieldPropsContext,\n  };\n\n  const localCheckboxGroupRef = useObjectRef(ref);\n  useMakeFocusable(localCheckboxGroupRef);\n\n  return (\n    <Aria.CheckboxGroup\n      {...rest}\n      {...fieldProps}\n      isInvalid={isInvalid}\n      className={clsx(fieldProps.className, className)}\n      ref={localCheckboxGroupRef}\n    >\n      <TunnelProvider>\n        <FieldErrorResetContext>\n          <PropsContextProvider props={propsContext} clear>\n            {children}\n            <ColumnLayout s={s} m={m} l={l} className={styles.checkboxGroup}>\n              <TunnelExit id=\"checkboxButtons\" />\n            </ColumnLayout>\n\n            <ColumnLayout\n              s={s ?? [1]}\n              m={m ?? [1]}\n              l={l ?? [1]}\n              rowGap=\"s\"\n              className={styles.checkboxGroup}\n            >\n              <TunnelExit id=\"checkboxes\" />\n            </ColumnLayout>\n          </PropsContextProvider>\n        </FieldErrorResetContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.CheckboxGroup>\n  );\n});\n\nexport default CheckboxGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqBO,MAAM,aAAA,GAAgB,aAAA,CAAc,eAAA,EAAiB,CAAC,KAAA,KAAU;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAElE,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA,QAAA,EAAU,YAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,SAAA;AAAA,MACA,QAAA,EAAU,iBAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,qBAAA,GAAwB,aAAa,GAAG,CAAA;AAC9C,EAAA,gBAAA,CAAiB,qBAAqB,CAAA;AAEtC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,aAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,SAAA,EAAW,SAAS,CAAA;AAAA,MAC/C,GAAA,EAAK,qBAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,0BACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAAc,OAAK,IAAA,EAC7C,QAAA,EAAA;AAAA,UAAA,QAAA;AAAA,0BACD,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,aAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,iBAAA,EAAkB,CAAA,EACnC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,aAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA;AAAA;AAC9B,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -14,7 +14,6 @@ import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import clsx from 'clsx';
 import styles from './ComboBox.module.scss.mjs';
-import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import locales from '../../../../_virtual/_.locale.json@51dcf4944c990e2cbe26472300dae78d.mjs';
 import { useLocalizedStringFormatter } from 'react-aria';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
@@ -22,6 +21,7 @@ import 'mobx';
 import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
 import { useObjectRef } from '@react-aria/utils';
 import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
 
 const ComboBox = flowComponent("ComboBox", (props) => {
   const {
@@ -38,26 +38,19 @@ const ComboBox = flowComponent("ComboBox", (props) => {
     renderEmptyState,
     ...rest
   } = props;
+  const {
+    FieldErrorView,
+    FieldErrorResetContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
   const stringFormatter = useLocalizedStringFormatter(locales);
-  const rootClassName = clsx(
-    styles.comboBox,
-    formFieldStyles.formField,
-    className
-  );
+  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);
   const propsContext = {
-    Label: {
-      className: formFieldStyles.label,
-      optional: !props.isRequired
-    },
-    FieldDescription: {
-      className: formFieldStyles.fieldDescription
-    },
-    FieldError: {
-      className: formFieldStyles.customFieldError
-    },
     Option: {
       tunnelId: "options"
-    }
+    },
+    ...fieldPropsContext
   };
   const handleOnSelectionChange = (key) => {
     if (key === null) {
@@ -75,6 +68,7 @@ const ComboBox = flowComponent("ComboBox", (props) => {
   return /* @__PURE__ */ jsx(
     Aria.ComboBox,
     {
+      ...fieldProps,
       menuTrigger,
       className: rootClassName,
       ...rest,
@@ -82,21 +76,31 @@ const ComboBox = flowComponent("ComboBox", (props) => {
       onSelectionChange: handleOnSelectionChange,
       onOpenChange: (isOpen) => controller.setOpen(isOpen),
       children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.input, children: [
-          /* @__PURE__ */ jsx(Aria.Input, { placeholder }),
+        /* @__PURE__ */ jsxs(FieldErrorResetContext, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.input, children: [
+            /* @__PURE__ */ jsx(Aria.Input, { placeholder }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: styles.toggle,
+                "aria-label": stringFormatter.format("comboBox.showOptions"),
+                variant: "plain",
+                color: "secondary",
+                children: /* @__PURE__ */ jsx(IconChevronDown, {})
+              }
+            )
+          ] }),
+          children,
           /* @__PURE__ */ jsx(
-            Button,
+            Options,
             {
-              className: styles.toggle,
-              "aria-label": stringFormatter.format("comboBox.showOptions"),
-              variant: "plain",
-              color: "secondary",
-              children: /* @__PURE__ */ jsx(IconChevronDown, {})
+              controller,
+              renderEmptyState,
+              children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" })
             }
           )
         ] }),
-        children,
-        /* @__PURE__ */ jsx(Options, { controller, renderEmptyState, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) })
+        /* @__PURE__ */ jsx(FieldErrorView, {})
       ] }) })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(\n    styles.comboBox,\n    formFieldStyles.formField,\n    className,\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    Option: {\n      tunnelId: \"options\",\n    },\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  useMakeFocusable(localComboBoxRef);\n\n  return (\n    <Aria.ComboBox\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <div className={styles.input}>\n            <Aria.Input placeholder={placeholder} />\n            <Button\n              className={styles.toggle}\n              aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n              variant=\"plain\"\n              color=\"secondary\"\n            >\n              <IconChevronDown />\n            </Button>\n          </div>\n\n          {children}\n\n          <Options controller={controller} renderEmptyState={renderEmptyState}>\n            <TunnelExit id=\"options\" />\n          </Options>\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ComboBox.mjs","sources":["../../../../../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Options } from \"@/components/Options\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./ComboBox.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport type { OptionsProps } from \"@/components/Options/Options\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface ComboBoxProps\n  extends Omit<Aria.ComboBoxProps<never>, \"children\">,\n    Pick<Aria.InputProps, \"placeholder\">,\n    Pick<OptionsProps, \"renderEmptyState\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  onChange?: (value: string) => void;\n  controller?: OverlayController;\n}\n\n/** @flr-generate all */\nexport const ComboBox = flowComponent(\"ComboBox\", (props) => {\n  const {\n    children,\n    className,\n    menuTrigger = \"focus\",\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    placeholder,\n    ref,\n    renderEmptyState,\n\n    ...rest\n  } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorResetContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const rootClassName = clsx(fieldProps.className, styles.comboBox, className);\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const handleOnSelectionChange = (key: Key | null) => {\n    if (key === null) {\n      return;\n    }\n    onChange(String(key));\n    onSelectionChange(key);\n  };\n\n  const controllerFromContext = useOverlayController(\"ComboBox\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const localComboBoxRef = useObjectRef(ref);\n  useMakeFocusable(localComboBoxRef);\n\n  return (\n    <Aria.ComboBox\n      {...fieldProps}\n      menuTrigger={menuTrigger}\n      className={rootClassName}\n      {...rest}\n      ref={localComboBoxRef}\n      onSelectionChange={handleOnSelectionChange}\n      onOpenChange={(isOpen) => controller.setOpen(isOpen)}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <FieldErrorResetContext>\n            <div className={styles.input}>\n              <Aria.Input placeholder={placeholder} />\n              <Button\n                className={styles.toggle}\n                aria-label={stringFormatter.format(\"comboBox.showOptions\")}\n                variant=\"plain\"\n                color=\"secondary\"\n              >\n                <IconChevronDown />\n              </Button>\n            </div>\n\n            {children}\n\n            <Options\n              controller={controller}\n              renderEmptyState={renderEmptyState}\n            >\n              <TunnelExit id=\"options\" />\n            </Options>\n          </FieldErrorResetContext>\n          <FieldErrorView />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.ComboBox>\n  );\n});\n\nexport default ComboBox;\n"],"names":[],"mappings":"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"}