@mittwald/flow-react-components 0.2.0-alpha.497 → 0.2.0-alpha.499

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { FieldError } from \"@/components/FieldError\";\nimport clsx from \"clsx\";\n\nexport interface SegmentedControlProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\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    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n  };\n\n  return (\n    <Aria.RadioGroup {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n        <TunnelProvider>\n          {children}\n\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <TunnelExit id=\"segments\" />\n            </div>\n          </div>\n\n          <TunnelExit id=\"fieldDescription\" />\n          <TunnelExit id=\"fieldError\" />\n        </TunnelProvider>\n      </PropsContextProvider>\n      <FieldError className={formFieldStyles.fieldError} />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBO,MAAM,gBAAmB,GAAA,aAAA,CAAc,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC3E,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAA0B,GAAA,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,eAAgB,CAAA,SAAA;AAAA,IAChB,MAAO,CAAA,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAoC,CAAA,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA,gBAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA,gBAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAU,EAAA,UAAA;AAAA,MACV,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,KAAK,UAAL,EAAA,EAAiB,GAAG,IAAM,EAAA,SAAA,EAAW,eAAe,GACnD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,cAAc,CAAC,SAAS,GAAG,KAAO,EAAA,YAAA,EACtD,+BAAC,cACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBAEA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,kBACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UACrB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,UAAA,EAAW,GAC5B,CACF,EAAA,CAAA;AAAA,sBAEA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,kBAAmB,EAAA,CAAA;AAAA,sBAClC,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,YAAa,EAAA;AAAA,KAAA,EAC9B,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,GACrD,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SegmentedControl.mjs","sources":["../../../../../../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsWithContainerBreakpointSize } from \"@/lib/types/props\";\nimport React, { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./SegmentedControl.module.scss\";\nimport { getContainerBreakpointSizeClassName } from \"@/lib/getContainerBreakpointSizeClassName\";\nimport { type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { FieldError } from \"@/components/FieldError\";\nimport clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SegmentedControlProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    PropsWithContainerBreakpointSize {}\n\n/** @flr-generate all */\nexport const SegmentedControl = flowComponent(\"SegmentedControl\", (props) => {\n  const {\n    children,\n    className,\n    containerBreakpointSize = \"m\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.segmentedControlContainer,\n    className,\n    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)],\n  );\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    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup {...rest} className={rootClassName} ref={localRadioRef}>\n      <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n        <TunnelProvider>\n          {children}\n\n          <div className={styles.segmentedControl}>\n            <div className={styles.segments}>\n              <TunnelExit id=\"segments\" />\n            </div>\n          </div>\n\n          <TunnelExit id=\"fieldDescription\" />\n          <TunnelExit id=\"fieldError\" />\n        </TunnelProvider>\n      </PropsContextProvider>\n      <FieldError className={formFieldStyles.fieldError} />\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAM,gBAAmB,GAAA,aAAA,CAAc,kBAAoB,EAAA,CAAC,KAAU,KAAA;AAC3E,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAA0B,GAAA,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,eAAgB,CAAA,SAAA;AAAA,IAChB,MAAO,CAAA,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAoC,CAAA,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA,gBAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA,gBAAA;AAAA,MAC3B,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,OAAS,EAAA;AAAA,MACP,QAAU,EAAA,UAAA;AAAA,MACV,WAAW,MAAO,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EACE,uBAAA,IAAA,CAAC,KAAK,UAAL,EAAA,EAAiB,GAAG,IAAM,EAAA,SAAA,EAAW,aAAe,EAAA,GAAA,EAAK,aACxD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,cAAc,CAAC,SAAS,GAAG,KAAO,EAAA,YAAA,EACtD,+BAAC,cACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBAEA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,kBACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UACrB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,UAAA,EAAW,GAC5B,CACF,EAAA,CAAA;AAAA,sBAEA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,kBAAmB,EAAA,CAAA;AAAA,sBAClC,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,YAAa,EAAA;AAAA,KAAA,EAC9B,CACF,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,GACrD,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
 import * as Aria from 'react-aria-components';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
@@ -8,7 +9,6 @@ import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import { FieldError } from '../FieldError/FieldError.mjs';
 import styles from './Select.module.scss.mjs';
 import clsx from 'clsx';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
@@ -18,6 +18,8 @@ import { Options } from '../Options/Options.mjs';
 import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
 import 'mobx';
 import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const Select = flowComponent("Select", (props) => {
   const {
@@ -59,6 +61,11 @@ const Select = flowComponent("Select", (props) => {
   const controllerFromContext = useOverlayController("Select", {
     reuseControllerFromContext: true
   });
+  const localSelectRef = useObjectRef(ref);
+  const localButtonRef = useRef(null);
+  useMakeFocusable(localSelectRef, () => {
+    localButtonRef.current?.focus();
+  });
   const controller = controllerFromProps ?? controllerFromContext;
   const isOpen = controller.useIsOpen();
   return /* @__PURE__ */ jsx(
@@ -66,16 +73,24 @@ const Select = flowComponent("Select", (props) => {
     {
       ...rest,
       className: rootClassName,
-      ref,
+      ref: localSelectRef,
       onSelectionChange: isReadOnly ? void 0 : handleOnSelectionChange,
       onOpenChange: (isOpen2) => !isReadOnly && controller.setOpen(isOpen2),
       isOpen,
       "data-readonly": isReadOnly,
       children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
-        /* @__PURE__ */ jsxs(Aria.Button, { "data-readonly": isReadOnly, className: styles.toggle, children: [
-          /* @__PURE__ */ jsx(Aria.SelectValue, {}),
-          /* @__PURE__ */ jsx(IconChevronDown, {})
-        ] }),
+        /* @__PURE__ */ jsxs(
+          Aria.Button,
+          {
+            ref: localButtonRef,
+            "data-readonly": isReadOnly,
+            className: styles.toggle,
+            children: [
+              /* @__PURE__ */ jsx(Aria.SelectValue, {}),
+              /* @__PURE__ */ jsx(IconChevronDown, {})
+            ]
+          }
+        ),
         children,
         /* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) }),
         /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })

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

@@ -1 +1 @@
-{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps<{ example: string }>, \"children\" | \"className\">\n    >,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: string | number) => void;\n  /** An overlay controller to control the select option popover state. */\n  controller?: OverlayController;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    ref,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.select,\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 = (id: Key | null) => {\n    onChange(String(id));\n    onSelectionChange(id);\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      className={rootClassName}\n      ref={ref}\n      onSelectionChange={isReadOnly ? undefined : handleOnSelectionChange}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Aria.Button data-readonly={isReadOnly} className={styles.toggle}>\n            <Aria.SelectValue />\n            <IconChevronDown />\n          </Aria.Button>\n\n          {children}\n          <Options controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n\n          <FieldError className={formFieldStyles.fieldError} />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;AAgCO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAW,MAAM;AAAA,KAEjB;AAAA,IACA,oBAAoB,MAAM;AAAA,KAE1B;AAAA,IACA,UAAY,EAAA,mBAAA;AAAA,IACZ,GAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,eAAgB,CAAA,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,QAAU,EAAA;AAAA;AACZ,GACF;AAEA,EAAM,MAAA,uBAAA,GAA0B,CAAC,EAAmB,KAAA;AAClD,IAAS,QAAA,CAAA,MAAA,CAAO,EAAE,CAAC,CAAA;AACnB,IAAA,iBAAA,CAAkB,EAAE,CAAA;AAAA,GACtB;AAEA,EAAM,MAAA,qBAAA,GAAwB,qBAAqB,QAAU,EAAA;AAAA,IAC3D,0BAA4B,EAAA;AAAA,GAC7B,CAAA;AAED,EAAA,MAAM,aAAa,mBAAuB,IAAA,qBAAA;AAE1C,EAAM,MAAA,MAAA,GAAS,WAAW,SAAU,EAAA;AAEpC,EACE,uBAAA,GAAA;AAAA,IAAC,IAAK,CAAA,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAA,aAAA;AAAA,MACX,GAAA;AAAA,MACA,iBAAA,EAAmB,aAAa,MAAY,GAAA,uBAAA;AAAA,MAC5C,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAc,IAAA,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAe,EAAA,UAAA;AAAA,MAEf,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,+BAAC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAK,MAAL,EAAA,EAAY,iBAAe,UAAY,EAAA,SAAA,EAAW,OAAO,MACxD,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,8BACjB,eAAgB,EAAA,EAAA;AAAA,SACnB,EAAA,CAAA;AAAA,QAEC,QAAA;AAAA,4BACA,OAAQ,EAAA,EAAA,UAAA,EACP,8BAAC,UAAW,EAAA,EAAA,EAAA,EAAG,WAAU,CAC3B,EAAA,CAAA;AAAA,wBAEC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,UAAY,EAAA;AAAA,OAAA,EACrD,CACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Select.mjs","sources":["../../../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { type PropsWithChildren, useRef } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport * as Aria from \"react-aria-components\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport styles from \"./Select.module.scss\";\nimport clsx from \"clsx\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Options } from \"@/components/Options\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { type OverlayController, useOverlayController } from \"@/lib/controller\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SelectProps\n  extends PropsWithChildren<Omit<Aria.SelectProps, \"children\" | \"className\">>,\n    FlowComponentProps,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: string | number) => void;\n  /** An overlay controller to control the select option popover state. */\n  controller?: OverlayController;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Select = flowComponent(\"Select\", (props) => {\n  const {\n    children,\n    className,\n    onChange = () => {\n      // default: do nothing\n    },\n    onSelectionChange = () => {\n      // default: do nothing\n    },\n    controller: controllerFromProps,\n    ref,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.select,\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 = (id: Key | null) => {\n    onChange(String(id));\n    onSelectionChange(id);\n  };\n\n  const controllerFromContext = useOverlayController(\"Select\", {\n    reuseControllerFromContext: true,\n  });\n\n  const localSelectRef = useObjectRef(ref);\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n\n  useMakeFocusable(localSelectRef, () => {\n    localButtonRef.current?.focus();\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      className={rootClassName}\n      ref={localSelectRef}\n      onSelectionChange={isReadOnly ? undefined : handleOnSelectionChange}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          <Aria.Button\n            ref={localButtonRef}\n            data-readonly={isReadOnly}\n            className={styles.toggle}\n          >\n            <Aria.SelectValue />\n            <IconChevronDown />\n          </Aria.Button>\n\n          {children}\n          <Options controller={controller}>\n            <TunnelExit id=\"options\" />\n          </Options>\n\n          <FieldError className={formFieldStyles.fieldError} />\n        </TunnelProvider>\n      </PropsContextProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import * as Aria from 'react-aria-components';
 import clsx from 'clsx';
@@ -8,7 +9,6 @@ import styles from './Slider.module.scss.mjs';
 import '../../lib/propsContext/propsContext.mjs';
 import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
 import { Button } from '../Button/Button.mjs';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
@@ -16,6 +16,9 @@ import { IconMinus } from '../Icon/components/icons/IconMinus.mjs';
 import { IconPlus } from '../Icon/components/icons/IconPlus.mjs';
 import locales from '../../../../_virtual/_.locale.json@3ed2dc50f997451bdd85a713c54e1025.mjs';
 import { useLocalizedStringFormatter } from 'react-aria';
+import { TunnelExit } from '@mittwald/react-tunnel';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const Slider = flowComponent("Slider", (props) => {
   const {
@@ -26,6 +29,8 @@ const Slider = flowComponent("Slider", (props) => {
     defaultValue,
     showInitialMarker,
     isReadOnly,
+    ref,
+    inputRef,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -34,80 +39,96 @@ const Slider = flowComponent("Slider", (props) => {
     className
   );
   const stringFormatter = useLocalizedStringFormatter(locales);
+  const localSliderRef = useObjectRef(ref);
+  const localInputRef = useObjectRef(inputRef);
+  useMakeFocusable(localSliderRef, () => {
+    localInputRef.current?.focus();
+  });
   const propsContext = {
     Label: {
-      unstyled: true
+      unstyled: true,
+      tunnelId: "label"
     }
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(
     Aria.Slider,
     {
+      ...rest,
+      ref: localSliderRef,
       className: rootClassName,
       isDisabled,
       defaultValue,
-      ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", { className: styles.text, children: [
           /* @__PURE__ */ jsx(Aria.SliderOutput, { className: styles.value }),
-          /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+          /* @__PURE__ */ jsx(TunnelExit, { id: "label" })
         ] }),
-        /* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              onPress: () => state.decrementThumb(0),
-              "aria-label": stringFormatter.format("slider.decrement"),
-              variant: "plain",
-              color: "secondary",
-              className: styles.decrement,
-              isDisabled,
-              excludeFromTabOrder: true,
-              isReadOnly,
-              children: /* @__PURE__ */ jsx(IconMinus, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              onPress: () => state.incrementThumb(0),
-              "aria-label": stringFormatter.format("slider.increment"),
-              variant: "plain",
-              color: "secondary",
-              className: styles.increment,
-              isDisabled,
-              excludeFromTabOrder: true,
-              isReadOnly,
-              children: /* @__PURE__ */ jsx(IconPlus, {})
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: styles.fill,
-              style: { width: state.getThumbPercent(0) * 100 + "%" }
-            }
-          ),
-          showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: styles.initialMarker,
-              style: {
-                left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
+        /* @__PURE__ */ jsx(Aria.SliderTrack, { className: styles.track, children: ({ state }) => /* @__PURE__ */ jsxs(
+          PropsContextProvider,
+          {
+            props: {
+              Button: {
+                isPending: false,
+                isFailed: false,
+                isSucceeded: false,
+                isReadOnly,
+                excludeFromTabOrder: true,
+                isDisabled,
+                variant: "plain",
+                color: "secondary"
               }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Aria.SliderThumb,
-            {
-              name,
-              className: styles.handle,
-              isDisabled: isReadOnly
-            }
-          )
-        ] }) })
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onPress: () => state.decrementThumb(0),
+                  "aria-label": stringFormatter.format("slider.decrement"),
+                  className: styles.decrement,
+                  children: /* @__PURE__ */ jsx(IconMinus, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onPress: () => state.incrementThumb(0),
+                  "aria-label": stringFormatter.format("slider.increment"),
+                  className: styles.increment,
+                  children: /* @__PURE__ */ jsx(IconPlus, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles.fill,
+                  style: { width: state.getThumbPercent(0) * 100 + "%" }
+                }
+              ),
+              showInitialMarker && defaultValue && typeof defaultValue === "number" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles.initialMarker,
+                  style: {
+                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Aria.SliderThumb,
+                {
+                  inputRef: localInputRef,
+                  name,
+                  className: styles.handle,
+                  isDisabled: isReadOnly
+                }
+              )
+            ]
+          }
+        ) }),
+        children
       ]
     }
-  );
+  ) });
 });
 
 export { Slider, Slider as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\nexport interface SliderProps\n  extends FlowComponentProps<HTMLDivElement>,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"name\"> {\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const propsContext: PropsContext = {\n    Label: {\n      unstyled: true,\n    },\n  };\n\n  return (\n    <Aria.Slider\n      className={rootClassName}\n      isDisabled={isDisabled}\n      defaultValue={defaultValue}\n      {...rest}\n    >\n      <div className={styles.text}>\n        <Aria.SliderOutput className={styles.value} />\n\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </div>\n\n      <Aria.SliderTrack className={styles.track}>\n        {({ state }) => (\n          <>\n            <Button\n              onPress={() => state.decrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.decrement\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.decrement}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n              isReadOnly={isReadOnly}\n            >\n              <IconMinus />\n            </Button>\n\n            <Button\n              onPress={() => state.incrementThumb(0)}\n              aria-label={stringFormatter.format(\"slider.increment\")}\n              variant=\"plain\"\n              color=\"secondary\"\n              className={styles.increment}\n              isDisabled={isDisabled}\n              excludeFromTabOrder\n              isReadOnly={isReadOnly}\n            >\n              <IconPlus />\n            </Button>\n\n            <div\n              className={styles.fill}\n              style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n            />\n\n            {showInitialMarker &&\n              defaultValue &&\n              typeof defaultValue === \"number\" && (\n                <div\n                  className={styles.initialMarker}\n                  style={{\n                    left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                  }}\n                />\n              )}\n\n            <Aria.SliderThumb\n              name={name}\n              className={styles.handle}\n              isDisabled={isReadOnly}\n            />\n          </>\n        )}\n      </Aria.SliderTrack>\n    </Aria.Slider>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Slider.mjs","sources":["../../../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Slider.module.scss\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport { IconMinus, IconPlus } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SliderProps\n  extends FlowComponentProps,\n    PropsWithChildren<Aria.SliderProps>,\n    Pick<Aria.SliderThumbProps, \"inputRef\" | \"name\"> {\n  showInitialMarker?: boolean;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const Slider = flowComponent(\"Slider\", (props) => {\n  const {\n    className,\n    children,\n    name,\n    isDisabled,\n    defaultValue,\n    showInitialMarker,\n    isReadOnly,\n    ref,\n    inputRef,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.slider,\n    isDisabled && styles.disabled,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const localSliderRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localSliderRef, () => {\n    localInputRef.current?.focus();\n  });\n\n  const propsContext: PropsContext = {\n    Label: {\n      unstyled: true,\n      tunnelId: \"label\",\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <Aria.Slider\n        {...rest}\n        ref={localSliderRef}\n        className={rootClassName}\n        isDisabled={isDisabled}\n        defaultValue={defaultValue}\n      >\n        <div className={styles.text}>\n          <Aria.SliderOutput className={styles.value} />\n          <TunnelExit id=\"label\" />\n        </div>\n\n        <Aria.SliderTrack className={styles.track}>\n          {({ state }) => (\n            <PropsContextProvider\n              props={{\n                Button: {\n                  isPending: false,\n                  isFailed: false,\n                  isSucceeded: false,\n                  isReadOnly: isReadOnly,\n                  excludeFromTabOrder: true,\n                  isDisabled,\n                  variant: \"plain\",\n                  color: \"secondary\",\n                },\n              }}\n            >\n              <Button\n                onPress={() => state.decrementThumb(0)}\n                aria-label={stringFormatter.format(\"slider.decrement\")}\n                className={styles.decrement}\n              >\n                <IconMinus />\n              </Button>\n\n              <Button\n                onPress={() => state.incrementThumb(0)}\n                aria-label={stringFormatter.format(\"slider.increment\")}\n                className={styles.increment}\n              >\n                <IconPlus />\n              </Button>\n\n              <div\n                className={styles.fill}\n                style={{ width: state.getThumbPercent(0) * 100 + \"%\" }}\n              />\n\n              {showInitialMarker &&\n                defaultValue &&\n                typeof defaultValue === \"number\" && (\n                  <div\n                    className={styles.initialMarker}\n                    style={{\n                      left: `calc(${state.getValuePercent(defaultValue) * 100}% - 2px)`,\n                    }}\n                  />\n                )}\n\n              <Aria.SliderThumb\n                inputRef={localInputRef}\n                name={name}\n                className={styles.handle}\n                isDisabled={isReadOnly}\n              />\n            </PropsContextProvider>\n          )}\n        </Aria.SliderTrack>\n        {children}\n      </Aria.Slider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Slider;\n"],"names":[],"mappings":"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"}

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

@@ -1,17 +1,21 @@
 "use client"
 /* */
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react';
 import * as Aria from 'react-aria-components';
 import styles from './Switch.module.scss.mjs';
 import clsx from 'clsx';
-import 'react';
 import '@tabler/icons-react';
 import '../Icon/Icon.mjs';
 import '../../views/IconView.mjs';
 import { IconCheck } from '../Icon/components/icons/IconCheck.mjs';
 import { IconClose } from '../Icon/components/icons/IconClose.mjs';
-import { Label } from '../Label/Label.mjs';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelExit } from '@mittwald/react-tunnel';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
 
 const Switch = flowComponent("Switch", (props) => {
   const {
@@ -19,6 +23,7 @@ const Switch = flowComponent("Switch", (props) => {
     className,
     labelPosition = "trailing",
     ref,
+    inputRef,
     ...rest
   } = props;
   const rootClassName = clsx(
@@ -26,10 +31,38 @@ const Switch = flowComponent("Switch", (props) => {
     styles[`label-${labelPosition}`],
     className
   );
-  return /* @__PURE__ */ jsx(Aria.Switch, { ...rest, className: rootClassName, ref, children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
-    children && /* @__PURE__ */ jsx(Label, { className: styles.label, children })
-  ] }) });
+  const localSwitchRef = useObjectRef(ref);
+  const localInputRef = useObjectRef(inputRef);
+  useMakeFocusable(localSwitchRef, () => {
+    localInputRef.current?.focus();
+  });
+  return /* @__PURE__ */ jsxs(
+    PropsContextProvider,
+    {
+      props: {
+        Label: {
+          tunnelId: "label",
+          className: styles.label
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Aria.Switch,
+          {
+            ...rest,
+            className: rootClassName,
+            ref: localSwitchRef,
+            inputRef: localInputRef,
+            children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: styles.track, children: /* @__PURE__ */ jsx("div", { className: styles.handle, children: isSelected ? /* @__PURE__ */ jsx(IconCheck, { size: "s" }) : /* @__PURE__ */ jsx(IconClose, { size: "s" }) }) }),
+              /* @__PURE__ */ jsx(TunnelExit, { id: "label" })
+            ] })
+          }
+        ),
+        children
+      ]
+    }
+  );
 });
 
 export { Switch, Switch as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport { Label } from \"@/components/Label\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SwitchProps\n  extends PropsWithChildren<Omit<Aria.SwitchProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    styles[`label-${labelPosition}`],\n    className,\n  );\n\n  return (\n    <Aria.Switch {...rest} className={rootClassName} ref={ref}>\n      {({ isSelected }) => (\n        <>\n          <div className={styles.track}>\n            <div className={styles.handle}>\n              {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n            </div>\n          </div>\n          {children && <Label className={styles.label}>{children}</Label>}\n        </>\n      )}\n    </Aria.Switch>\n  );\n});\n\nexport default Switch;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAgB,GAAA,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,MAAA,CAAO,CAAS,MAAA,EAAA,aAAa,CAAE,CAAA,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,IAAA,CAAK,MAAL,EAAA,EAAa,GAAG,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,GAC9C,EAAA,QAAA,EAAA,CAAC,EAAE,UAAA,uBAEA,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EACrB,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,MACpB,EAAA,QAAA,EAAA,UAAA,uBAAc,SAAU,EAAA,EAAA,IAAA,EAAK,KAAI,CAAK,mBAAA,GAAA,CAAC,aAAU,IAAK,EAAA,GAAA,EAAI,GAC7D,CACF,EAAA,CAAA;AAAA,IACC,4BAAa,GAAA,CAAA,KAAA,EAAA,EAAM,SAAW,EAAA,MAAA,CAAO,OAAQ,QAAS,EAAA;AAAA,GAAA,EACzD,CAEJ,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Switch.mjs","sources":["../../../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./Switch.module.scss\";\nimport clsx from \"clsx\";\nimport { IconCheck, IconClose } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit } from \"@mittwald/react-tunnel\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface SwitchProps\n  extends PropsWithChildren<Omit<Aria.SwitchProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {\n  /**\n   * Whether the label should appear before or after the switch. @default\n   * \"trailing\"\n   */\n  labelPosition?: \"leading\" | \"trailing\";\n}\n\n/** @flr-generate all */\nexport const Switch = flowComponent(\"Switch\", (props) => {\n  const {\n    children,\n    className,\n    labelPosition = \"trailing\",\n    ref,\n    inputRef,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.switch,\n    styles[`label-${labelPosition}`],\n    className,\n  );\n\n  const localSwitchRef = useObjectRef(ref);\n  const localInputRef = useObjectRef(inputRef);\n\n  useMakeFocusable(localSwitchRef, () => {\n    localInputRef.current?.focus();\n  });\n\n  return (\n    <PropsContextProvider\n      props={{\n        Label: {\n          tunnelId: \"label\",\n          className: styles.label,\n        },\n      }}\n    >\n      <Aria.Switch\n        {...rest}\n        className={rootClassName}\n        ref={localSwitchRef}\n        inputRef={localInputRef}\n      >\n        {({ isSelected }) => (\n          <>\n            <div className={styles.track}>\n              <div className={styles.handle}>\n                {isSelected ? <IconCheck size=\"s\" /> : <IconClose size=\"s\" />}\n              </div>\n            </div>\n            <TunnelExit id=\"label\" />\n          </>\n        )}\n      </Aria.Switch>\n      {children}\n    </PropsContextProvider>\n  );\n});\n\nexport default Switch;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAgB,GAAA,UAAA;AAAA,IAChB,GAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,MAAA;AAAA,IACP,MAAA,CAAO,CAAS,MAAA,EAAA,aAAa,CAAE,CAAA,CAAA;AAAA,IAC/B;AAAA,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,aAAa,GAAG,CAAA;AACvC,EAAM,MAAA,aAAA,GAAgB,aAAa,QAAQ,CAAA;AAE3C,EAAA,gBAAA,CAAiB,gBAAgB,MAAM;AACrC,IAAA,aAAA,CAAc,SAAS,KAAM,EAAA;AAAA,GAC9B,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,KAAO,EAAA;AAAA,UACL,QAAU,EAAA,OAAA;AAAA,UACV,WAAW,MAAO,CAAA;AAAA;AACpB,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,IAAK,CAAA,MAAA;AAAA,UAAL;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,SAAW,EAAA,aAAA;AAAA,YACX,GAAK,EAAA,cAAA;AAAA,YACL,QAAU,EAAA,aAAA;AAAA,YAET,QAAC,EAAA,CAAA,EAAE,UAAW,EAAA,qBAEX,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,MAAO,CAAA,KAAA,EACrB,8BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,MACpB,EAAA,QAAA,EAAA,UAAA,uBAAc,SAAU,EAAA,EAAA,IAAA,EAAK,KAAI,CAAK,mBAAA,GAAA,CAAC,aAAU,IAAK,EAAA,GAAA,EAAI,GAC7D,CACF,EAAA,CAAA;AAAA,8BACA,GAAA,CAAC,UAAW,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA;AAAA,aACzB,EAAA;AAAA;AAAA,SAEJ;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/Table/components/TableCell/TableCell.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.mjs","sources":["../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table\";\n\nexport interface TableCellProps\n  extends Omit<Aria.CellProps, \"children\" | \"style\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"names":[],"mappings":";;;;;;;;AAkBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAkB,GAAA,OAAA;AAAA,IAClB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,IAAA;AAAA,IACP,MAAA,CAAO,CAAoB,iBAAA,EAAA,eAAe,CAAE,CAAA,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,uBACH,QAAS,EAAA,EAAA,QAAA,sBAAW,YAAa,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAAK,QAAS,EAAA,CAAA;AAGhE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,2BACG,WAAY,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,GAAG,MACxC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,WAAW,aAAgB,EAAA,GAAG,MACtC,QACH,EAAA,OAAA,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TableCell.mjs","sources":["../../../../../../../../src/components/Table/components/TableCell/TableCell.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport { Suspense } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"../../Table.module.scss\";\nimport { SkeletonText } from \"@/components/SkeletonText\";\nimport { TableColumn } from \"@/components/Table/components/TableColumn/TableColumn\";\n\nexport interface TableCellProps\n  extends Omit<Aria.CellProps, \"children\" | \"style\">,\n    PropsWithChildren {\n  /** Use cell as row header */\n  rowHeader?: boolean;\n  /** Horizontal alignment of the cell content @default \"start\" */\n  horizontalAlign?: \"start\" | \"center\" | \"end\";\n}\n\n/** @flr-generate all */\nexport const TableCell: FC<TableCellProps> = (props) => {\n  const {\n    children,\n    className,\n    rowHeader,\n    horizontalAlign = \"start\",\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.cell,\n    styles[`horizontal-align-${horizontalAlign}`],\n    className,\n  );\n\n  const content = (\n    <Suspense fallback={<SkeletonText width=\"100px\" />}>{children}</Suspense>\n  );\n\n  if (rowHeader) {\n    return (\n      <TableColumn className={rootClassName} {...rest}>\n        {content}\n      </TableColumn>\n    );\n  }\n\n  return (\n    <Aria.Cell className={rootClassName} {...rest}>\n      {content}\n    </Aria.Cell>\n  );\n};\n\nexport default TableCell;\n"],"names":[],"mappings":";;;;;;;;AAkBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAkB,GAAA,OAAA;AAAA,IAClB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,IAAA;AAAA,IACP,MAAA,CAAO,CAAoB,iBAAA,EAAA,eAAe,CAAE,CAAA,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,uBACH,QAAS,EAAA,EAAA,QAAA,sBAAW,YAAa,EAAA,EAAA,KAAA,EAAM,OAAQ,EAAA,CAAA,EAAK,QAAS,EAAA,CAAA;AAGhE,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,2BACG,WAAY,EAAA,EAAA,SAAA,EAAW,aAAgB,EAAA,GAAG,MACxC,QACH,EAAA,OAAA,EAAA,CAAA;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,KAAK,IAAL,EAAA,EAAU,WAAW,aAAgB,EAAA,GAAG,MACtC,QACH,EAAA,OAAA,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
 import * as Aria from 'react-aria-components';
 import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
 import '../../lib/propsContext/propsContext.mjs';
@@ -9,6 +10,8 @@ import formFieldStyles from '../FormField/FormField.module.scss.mjs';
 import { FieldError } from '../FieldError/FieldError.mjs';
 import clsx from 'clsx';
 import styles from './TimeField.module.scss.mjs';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useObjectRef } from '@react-aria/utils';
 
 const TimeField = flowComponent("TimeField", (props) => {
   const { children, errorMessage, className, ref, ...rest } = props;
@@ -26,10 +29,12 @@ const TimeField = flowComponent("TimeField", (props) => {
       className: formFieldStyles.customFieldError
     }
   };
+  const localRef = useObjectRef(ref);
+  useMakeFocusable(localRef);
   return /* @__PURE__ */ jsxs(
     Aria.TimeField,
     {
-      ref,
+      ref: localRef,
       hourCycle: 24,
       className: rootClassName,
       ...rest,

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.mjs","sources":["../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport clsx from \"clsx\";\nimport styles from \"./TimeField.module.scss\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n  extends PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /** An error message to be displayed below the field */\n  errorMessage?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n  const { children, errorMessage, className, ref, ...rest } = 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      isDisabled: rest.isDisabled,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  return (\n    <Aria.TimeField\n      ref={ref}\n      hourCycle={24}\n      className={rootClassName}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={formFieldStyles.fieldError}>\n        {errorMessage}\n      </FieldError>\n      <Aria.DateInput className={styles.dateInput}>\n        {(segment) => <Aria.DateSegment segment={segment} />}\n      </Aria.DateInput>\n    </Aria.TimeField>\n  );\n});\n\nexport default TimeField;\n"],"names":[],"mappings":";;;;;;;;;;AAqBO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAU,EAAA,YAAA,EAAc,WAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,eAAgB,CAAA,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA,UAAA;AAAA,MACjB,YAAY,IAAK,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,SAAA;AAAA,IAAL;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,YACpC,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,WAAW,MAAO,CAAA,SAAA,EAC/B,QAAC,EAAA,CAAA,OAAA,qBAAa,GAAA,CAAA,IAAA,CAAK,WAAL,EAAA,EAAiB,SAAkB,CACpD,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
+{"version":3,"file":"TimeField.mjs","sources":["../../../../../../src/components/TimeField/TimeField.tsx"],"sourcesContent":["import { type PropsWithChildren, type ReactNode } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { FieldError } from \"@/components/FieldError\";\nimport clsx from \"clsx\";\nimport styles from \"./TimeField.module.scss\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useObjectRef } from \"@react-aria/utils\";\n\nexport interface TimeFieldProps<T extends Aria.TimeValue = Aria.TimeValue>\n  extends PropsWithChildren<Omit<Aria.TimeFieldProps<T>, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /** An error message to be displayed below the field */\n  errorMessage?: ReactNode;\n}\n\n/** @flr-generate all */\nexport const TimeField = flowComponent(\"TimeField\", (props) => {\n  const { children, errorMessage, className, ref, ...rest } = 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      isDisabled: rest.isDisabled,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  const localRef = useObjectRef(ref);\n  useMakeFocusable(localRef);\n\n  return (\n    <Aria.TimeField\n      ref={localRef}\n      hourCycle={24}\n      className={rootClassName}\n      {...rest}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n      <FieldError className={formFieldStyles.fieldError}>\n        {errorMessage}\n      </FieldError>\n      <Aria.DateInput className={styles.dateInput}>\n        {(segment) => <Aria.DateSegment segment={segment} />}\n      </Aria.DateInput>\n    </Aria.TimeField>\n  );\n});\n\nexport default TimeField;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAuBO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAA,MAAM,EAAE,QAAU,EAAA,YAAA,EAAc,WAAW,GAAK,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,eAAgB,CAAA,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA,UAAA;AAAA,MACjB,YAAY,IAAK,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AACjC,EAAA,gBAAA,CAAiB,QAAQ,CAAA;AAEzB,EACE,uBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,SAAA;AAAA,IAAL;AAAA,MACC,GAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,EAAA;AAAA,MACX,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC1B,QACH,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,UAAA,EAAA,EAAW,SAAW,EAAA,eAAA,CAAgB,YACpC,QACH,EAAA,YAAA,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,CAAK,SAAL,EAAA,EAAe,WAAW,MAAO,CAAA,SAAA,EAC/B,QAAC,EAAA,CAAA,OAAA,qBAAa,GAAA,CAAA,IAAA,CAAK,WAAL,EAAA,EAAiB,SAAkB,CACpD,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.mjs

@@ -55,9 +55,13 @@ const useRegisterActionStateContext = (form) => {
     });
   }, [form.subscribe, action.state]);
   const registerSubmitResult = (result) => {
-    submitHandlerResultRef.current = result;
     if (isPromise(result)) {
       void action.state.onAsyncStart();
+      result.then((submitResult) => {
+        submitHandlerResultRef.current = submitResult;
+      });
+    } else {
+      submitHandlerResultRef.current = result;
     }
   };
   return {

package/dist/js/components/src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useRegisterActionStateContext.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useEffect, useRef } from \"react\";\nimport { isPromise } from \"remeda\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\n\nconst callAfterSubmitFunction = (result: unknown) => {\n  const callFn = (something: unknown) => {\n    if (typeof something === \"function\") {\n      something();\n    }\n  };\n\n  if (result instanceof Promise) {\n    result.then(callFn);\n  } else {\n    callFn(result);\n  }\n};\n\nexport const useRegisterActionStateContext = <T extends FieldValues>(\n  form: UseFormReturn<T>,\n) => {\n  const action = ActionModel.useNew({});\n  const trackedSubmitCount = useRef(0);\n  const submitHandlerResultRef = useRef<unknown>(null);\n\n  useEffect(() => {\n    return form.subscribe({\n      formState: {\n        errors: true,\n        isValid: true,\n      },\n      callback: ({\n        isValid,\n        isSubmitted = false,\n        isSubmitSuccessful = false,\n        submitCount = 0,\n        errors,\n      }) => {\n        if (submitCount === 0 && trackedSubmitCount.current > 0) {\n          trackedSubmitCount.current = 0;\n        }\n\n        if (trackedSubmitCount.current === submitCount) {\n          return;\n        }\n        trackedSubmitCount.current = submitCount;\n\n        if (isSubmitted) {\n          if (isSubmitSuccessful) {\n            void action.state.onSucceeded();\n\n            if (isValid) {\n              callAfterSubmitFunction(submitHandlerResultRef.current);\n            }\n          } else {\n            const hasFailedWithError =\n              isSubmitted && errors && Object.entries(errors).length > 0\n                ? errors\n                : undefined;\n\n            void action.state.onFailed(hasFailedWithError);\n          }\n        }\n      },\n    });\n  }, [form.subscribe, action.state]);\n\n  const registerSubmitResult = (result: unknown) => {\n    submitHandlerResultRef.current = result;\n\n    if (isPromise(result)) {\n      void action.state.onAsyncStart();\n    }\n  };\n\n  return {\n    action,\n    registerSubmitResult,\n  } as const;\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,uBAAA,GAA0B,CAAC,MAAoB,KAAA;AACnD,EAAM,MAAA,MAAA,GAAS,CAAC,SAAuB,KAAA;AACrC,IAAI,IAAA,OAAO,cAAc,UAAY,EAAA;AACnC,MAAU,SAAA,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,kBAAkB,OAAS,EAAA;AAC7B,IAAA,MAAA,CAAO,KAAK,MAAM,CAAA;AAAA,GACb,MAAA;AACL,IAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAEjB,CAAA;AAEa,MAAA,6BAAA,GAAgC,CAC3C,IACG,KAAA;AACH,EAAA,MAAM,MAAS,GAAA,WAAA,CAAY,MAAO,CAAA,EAAE,CAAA;AACpC,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAC,CAAA;AACnC,EAAM,MAAA,sBAAA,GAAyB,OAAgB,IAAI,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,KAAK,SAAU,CAAA;AAAA,MACpB,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA,IAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAAA,MACA,UAAU,CAAC;AAAA,QACT,OAAA;AAAA,QACA,WAAc,GAAA,KAAA;AAAA,QACd,kBAAqB,GAAA,KAAA;AAAA,QACrB,WAAc,GAAA,CAAA;AAAA,QACd;AAAA,OACI,KAAA;AACJ,QAAA,IAAI,WAAgB,KAAA,CAAA,IAAK,kBAAmB,CAAA,OAAA,GAAU,CAAG,EAAA;AACvD,UAAA,kBAAA,CAAmB,OAAU,GAAA,CAAA;AAAA;AAG/B,QAAI,IAAA,kBAAA,CAAmB,YAAY,WAAa,EAAA;AAC9C,UAAA;AAAA;AAEF,QAAA,kBAAA,CAAmB,OAAU,GAAA,WAAA;AAE7B,QAAA,IAAI,WAAa,EAAA;AACf,UAAA,IAAI,kBAAoB,EAAA;AACtB,YAAK,KAAA,MAAA,CAAO,MAAM,WAAY,EAAA;AAE9B,YAAA,IAAI,OAAS,EAAA;AACX,cAAA,uBAAA,CAAwB,uBAAuB,OAAO,CAAA;AAAA;AACxD,WACK,MAAA;AACL,YAAM,MAAA,kBAAA,GACJ,eAAe,MAAU,IAAA,MAAA,CAAO,QAAQ,MAAM,CAAA,CAAE,MAAS,GAAA,CAAA,GACrD,MACA,GAAA,MAAA;AAEN,YAAK,KAAA,MAAA,CAAO,KAAM,CAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC/C;AACF;AACF,KACD,CAAA;AAAA,KACA,CAAC,IAAA,CAAK,SAAW,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAEjC,EAAM,MAAA,oBAAA,GAAuB,CAAC,MAAoB,KAAA;AAChD,IAAA,sBAAA,CAAuB,OAAU,GAAA,MAAA;AAEjC,IAAI,IAAA,SAAA,CAAU,MAAM,CAAG,EAAA;AACrB,MAAK,KAAA,MAAA,CAAO,MAAM,YAAa,EAAA;AAAA;AACjC,GACF;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useRegisterActionStateContext.mjs","sources":["../../../../../../../../../src/integrations/react-hook-form/components/Form/lib/useRegisterActionStateContext.ts"],"sourcesContent":["import { ActionModel } from \"@/components/Action/models/ActionModel\";\nimport { useEffect, useRef } from \"react\";\nimport { isPromise } from \"remeda\";\nimport type { FieldValues, UseFormReturn } from \"react-hook-form\";\n\nconst callAfterSubmitFunction = (result: unknown) => {\n  const callFn = (something: unknown) => {\n    if (typeof something === \"function\") {\n      something();\n    }\n  };\n\n  if (result instanceof Promise) {\n    result.then(callFn);\n  } else {\n    callFn(result);\n  }\n};\n\nexport const useRegisterActionStateContext = <T extends FieldValues>(\n  form: UseFormReturn<T>,\n) => {\n  const action = ActionModel.useNew({});\n  const trackedSubmitCount = useRef(0);\n  const submitHandlerResultRef = useRef<unknown>(null);\n\n  useEffect(() => {\n    return form.subscribe({\n      formState: {\n        errors: true,\n        isValid: true,\n      },\n      callback: ({\n        isValid,\n        isSubmitted = false,\n        isSubmitSuccessful = false,\n        submitCount = 0,\n        errors,\n      }) => {\n        if (submitCount === 0 && trackedSubmitCount.current > 0) {\n          trackedSubmitCount.current = 0;\n        }\n\n        if (trackedSubmitCount.current === submitCount) {\n          return;\n        }\n        trackedSubmitCount.current = submitCount;\n\n        if (isSubmitted) {\n          if (isSubmitSuccessful) {\n            void action.state.onSucceeded();\n\n            if (isValid) {\n              callAfterSubmitFunction(submitHandlerResultRef.current);\n            }\n          } else {\n            const hasFailedWithError =\n              isSubmitted && errors && Object.entries(errors).length > 0\n                ? errors\n                : undefined;\n\n            void action.state.onFailed(hasFailedWithError);\n          }\n        }\n      },\n    });\n  }, [form.subscribe, action.state]);\n\n  const registerSubmitResult = (result: unknown) => {\n    if (isPromise(result)) {\n      void action.state.onAsyncStart();\n      result.then((submitResult) => {\n        submitHandlerResultRef.current = submitResult;\n      });\n    } else {\n      submitHandlerResultRef.current = result;\n    }\n  };\n\n  return {\n    action,\n    registerSubmitResult,\n  } as const;\n};\n"],"names":[],"mappings":";;;;AAKA,MAAM,uBAAA,GAA0B,CAAC,MAAoB,KAAA;AACnD,EAAM,MAAA,MAAA,GAAS,CAAC,SAAuB,KAAA;AACrC,IAAI,IAAA,OAAO,cAAc,UAAY,EAAA;AACnC,MAAU,SAAA,EAAA;AAAA;AACZ,GACF;AAEA,EAAA,IAAI,kBAAkB,OAAS,EAAA;AAC7B,IAAA,MAAA,CAAO,KAAK,MAAM,CAAA;AAAA,GACb,MAAA;AACL,IAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAEjB,CAAA;AAEa,MAAA,6BAAA,GAAgC,CAC3C,IACG,KAAA;AACH,EAAA,MAAM,MAAS,GAAA,WAAA,CAAY,MAAO,CAAA,EAAE,CAAA;AACpC,EAAM,MAAA,kBAAA,GAAqB,OAAO,CAAC,CAAA;AACnC,EAAM,MAAA,sBAAA,GAAyB,OAAgB,IAAI,CAAA;AAEnD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAO,KAAK,SAAU,CAAA;AAAA,MACpB,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA,IAAA;AAAA,QACR,OAAS,EAAA;AAAA,OACX;AAAA,MACA,UAAU,CAAC;AAAA,QACT,OAAA;AAAA,QACA,WAAc,GAAA,KAAA;AAAA,QACd,kBAAqB,GAAA,KAAA;AAAA,QACrB,WAAc,GAAA,CAAA;AAAA,QACd;AAAA,OACI,KAAA;AACJ,QAAA,IAAI,WAAgB,KAAA,CAAA,IAAK,kBAAmB,CAAA,OAAA,GAAU,CAAG,EAAA;AACvD,UAAA,kBAAA,CAAmB,OAAU,GAAA,CAAA;AAAA;AAG/B,QAAI,IAAA,kBAAA,CAAmB,YAAY,WAAa,EAAA;AAC9C,UAAA;AAAA;AAEF,QAAA,kBAAA,CAAmB,OAAU,GAAA,WAAA;AAE7B,QAAA,IAAI,WAAa,EAAA;AACf,UAAA,IAAI,kBAAoB,EAAA;AACtB,YAAK,KAAA,MAAA,CAAO,MAAM,WAAY,EAAA;AAE9B,YAAA,IAAI,OAAS,EAAA;AACX,cAAA,uBAAA,CAAwB,uBAAuB,OAAO,CAAA;AAAA;AACxD,WACK,MAAA;AACL,YAAM,MAAA,kBAAA,GACJ,eAAe,MAAU,IAAA,MAAA,CAAO,QAAQ,MAAM,CAAA,CAAE,MAAS,GAAA,CAAA,GACrD,MACA,GAAA,MAAA;AAEN,YAAK,KAAA,MAAA,CAAO,KAAM,CAAA,QAAA,CAAS,kBAAkB,CAAA;AAAA;AAC/C;AACF;AACF,KACD,CAAA;AAAA,KACA,CAAC,IAAA,CAAK,SAAW,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA;AAEjC,EAAM,MAAA,oBAAA,GAAuB,CAAC,MAAoB,KAAA;AAChD,IAAI,IAAA,SAAA,CAAU,MAAM,CAAG,EAAA;AACrB,MAAK,KAAA,MAAA,CAAO,MAAM,YAAa,EAAA;AAC/B,MAAO,MAAA,CAAA,IAAA,CAAK,CAAC,YAAiB,KAAA;AAC5B,QAAA,sBAAA,CAAuB,OAAU,GAAA,YAAA;AAAA,OAClC,CAAA;AAAA,KACI,MAAA;AACL,MAAA,sBAAA,CAAuB,OAAU,GAAA,MAAA;AAAA;AACnC,GACF;AAEA,EAAO,OAAA;AAAA,IACL,MAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist/js/components/src/lib/getContainerBreakpointSizeClassName.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"getContainerBreakpointSizeClassName.mjs","sources":["../../../../../src/lib/getContainerBreakpointSizeClassName.ts"],"sourcesContent":["import type { ContainerBreakpointSize } from \"@/lib/types/props\";\n\nexport const getContainerBreakpointSizeClassName = (\n  containerBreakpointSize: ContainerBreakpointSize,\n): string => `container-breakpoint-size-${containerBreakpointSize}`;\n"],"names":[],"mappings":"AAEO,MAAM,mCAAsC,GAAA,CACjD,uBACW,KAAA,CAAA,0BAAA,EAA6B,uBAAuB,CAAA;;;;"}
+{"version":3,"file":"getContainerBreakpointSizeClassName.mjs","sources":["../../../../../src/lib/getContainerBreakpointSizeClassName.ts"],"sourcesContent":["import type { ContainerBreakpointSize } from \"@/lib/types/props\";\n\nexport const getContainerBreakpointSizeClassName = (\n  containerBreakpointSize: ContainerBreakpointSize,\n) => `container-breakpoint-size-${containerBreakpointSize}`;\n"],"names":[],"mappings":"AAEO,MAAM,mCAAsC,GAAA,CACjD,uBACG,KAAA,CAAA,0BAAA,EAA6B,uBAAuB,CAAA;;;;"}

package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs

@@ -0,0 +1,28 @@
+"use client"
+/* */
+import { useEffect } from 'react';
+
+const useMakeFocusable = (ref, onFocus) => {
+  useEffect(() => {
+    const element = ref.current;
+    const shouldProcessElement = element && element instanceof HTMLElement;
+    if (!shouldProcessElement) {
+      return;
+    }
+    const onFocusHandler = () => onFocus?.();
+    element.addEventListener("focus", onFocusHandler);
+    const hasTabIndex = element.hasAttribute("tabIndex");
+    if (!hasTabIndex) {
+      element.setAttribute("tabIndex", "-1");
+    }
+    return () => {
+      element.removeEventListener("focus", onFocusHandler);
+      if (!hasTabIndex) {
+        element.removeAttribute("tabIndex");
+      }
+    };
+  }, [ref.current, onFocus]);
+};
+
+export { useMakeFocusable };
+//# sourceMappingURL=useMakeFocusable.mjs.map

package/dist/js/components/src/lib/hooks/dom/useMakeFocusable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMakeFocusable.mjs","sources":["../../../../../../../src/lib/hooks/dom/useMakeFocusable.ts"],"sourcesContent":["import { type RefObject, useEffect } from \"react\";\n\n/**\n * A hook that makes an element focusable and calls a callback when it receives\n * focus.\n */\nexport const useMakeFocusable = (\n  ref: RefObject<unknown>,\n  onFocus?: CallableFunction,\n) => {\n  useEffect(() => {\n    const element = ref.current;\n    const shouldProcessElement = element && element instanceof HTMLElement;\n\n    if (!shouldProcessElement) {\n      return;\n    }\n\n    const onFocusHandler = () => onFocus?.();\n    element.addEventListener(\"focus\", onFocusHandler);\n\n    const hasTabIndex = element.hasAttribute(\"tabIndex\");\n    if (!hasTabIndex) {\n      // when we have no tabIndex, we set it to -1 to make it focusable\n      element.setAttribute(\"tabIndex\", \"-1\");\n    }\n\n    return () => {\n      element.removeEventListener(\"focus\", onFocusHandler);\n      if (!hasTabIndex) {\n        element.removeAttribute(\"tabIndex\");\n      }\n    };\n  }, [ref.current, onFocus]);\n};\n"],"names":[],"mappings":";;AAMa,MAAA,gBAAA,GAAmB,CAC9B,GAAA,EACA,OACG,KAAA;AACH,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAI,CAAA,OAAA;AACpB,IAAM,MAAA,oBAAA,GAAuB,WAAW,OAAmB,YAAA,WAAA;AAE3D,IAAA,IAAI,CAAC,oBAAsB,EAAA;AACzB,MAAA;AAAA;AAGF,IAAM,MAAA,cAAA,GAAiB,MAAM,OAAU,IAAA;AACvC,IAAQ,OAAA,CAAA,gBAAA,CAAiB,SAAS,cAAc,CAAA;AAEhD,IAAM,MAAA,WAAA,GAAc,OAAQ,CAAA,YAAA,CAAa,UAAU,CAAA;AACnD,IAAA,IAAI,CAAC,WAAa,EAAA;AAEhB,MAAQ,OAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAAA;AAGvC,IAAA,OAAO,MAAM;AACX,MAAQ,OAAA,CAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA;AACnD,MAAA,IAAI,CAAC,WAAa,EAAA;AAChB,QAAA,OAAA,CAAQ,gBAAgB,UAAU,CAAA;AAAA;AACpC,KACF;AAAA,GACC,EAAA,CAAC,GAAI,CAAA,OAAA,EAAS,OAAO,CAAC,CAAA;AAC3B;;;;"}