@mittwald/flow-react-components 0.2.0-alpha.61 → 0.2.0-alpha.611

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

@@ -0,0 +1,66 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './RadioGroup.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const RadioGroup = flowComponent("RadioGroup", (props) => {
+  const { children, className, s, m, l, ref, ...rest } = props;
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(formFieldStyles.formField, className);
+  const propsContext = {
+    RadioButton: {
+      tunnelId: "radioButtons"
+    },
+    Radio: {
+      tunnelId: "radios"
+    },
+    ...fieldPropsContext
+  };
+  const localRadioRef = useObjectRef(ref);
+  useMakeFocusable(localRadioRef);
+  return /* @__PURE__ */ jsx(
+    Aria.RadioGroup,
+    {
+      ...rest,
+      className: clsx(rootClassName, fieldProps.className),
+      ref: localRadioRef,
+      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+          /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "radioButtons" }) }),
+          /* @__PURE__ */ jsx(
+            ColumnLayout,
+            {
+              s: s ?? [1],
+              m: m ?? [1],
+              l: l ?? [1],
+              rowGap: "s",
+              className: styles.radioGroup,
+              children: /* @__PURE__ */ jsx(TunnelExit, { id: "radios" })
+            }
+          ),
+          children
+        ] }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] })
+    }
+  );
+});
+
+export { RadioGroup, RadioGroup as default };
+//# sourceMappingURL=RadioGroup.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","sources":["../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface RadioGroupProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n    FlowComponentProps,\n    Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n  const { children, className, s, m, l, ref, ...rest } = props;\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n  const propsContext: PropsContext = {\n    RadioButton: {\n      tunnelId: \"radioButtons\",\n    },\n    Radio: {\n      tunnelId: \"radios\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const localRadioRef = useObjectRef(ref);\n  useMakeFocusable(localRadioRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={localRadioRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n              <TunnelExit id=\"radioButtons\" />\n            </ColumnLayout>\n\n            <ColumnLayout\n              s={s ?? [1]}\n              m={m ?? [1]}\n              l={l ?? [1]}\n              rowGap=\"s\"\n              className={styles.radioGroup}\n            >\n              <TunnelExit id=\"radios\" />\n            </ColumnLayout>\n\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default RadioGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAC/D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,aAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,UAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAA,EAAe,CAAA,EAChC,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,UAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS;AAAA;AAAA,WAC1B;AAAA,UAEC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/RadioGroup/components/Radio/Radio.mjs

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import styles from './Radio.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+import clsx from 'clsx';
+import 'react';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../views/IconView.mjs';
+import { IconRadioOff } from '../../../Icon/components/icons/IconRadioOff.mjs';
+import { IconRadioOn } from '../../../Icon/components/icons/IconRadioOn.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+
+const Radio = flowComponent("Radio", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const rootClassName = clsx(styles.radio, className);
+  return /* @__PURE__ */ jsx(Aria.Radio, { ...rest, className: rootClassName, ref, children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelected ? /* @__PURE__ */ jsx(IconRadioOn, { className: styles.icon }) : /* @__PURE__ */ jsx(IconRadioOff, { className: styles.icon }),
+    children
+  ] }) });
+});
+
+export { Radio, Radio as default };
+//# sourceMappingURL=Radio.mjs.map

package/dist/js/components/src/components/RadioGroup/components/Radio/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","sources":["../../../../../../../../src/components/RadioGroup/components/Radio/Radio.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Radio.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconRadioOff, IconRadioOn } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface RadioProps\n  extends PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Radio = flowComponent(\"Radio\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radio, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {({ isSelected }) => (\n        <>\n          {isSelected ? (\n            <IconRadioOn className={styles.icon} />\n          ) : (\n            <IconRadioOff className={styles.icon} />\n          )}\n          {children}\n        </>\n      )}\n    </Aria.Radio>\n  );\n});\n\nexport default Radio;\n"],"names":[],"mappings":";;;;;;;;;;;;AAaO,MAAM,KAAA,GAAQ,aAAA,CAAc,OAAA,EAAS,CAAC,KAAA,KAAU;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,KAAA,EAAO,SAAS,CAAA;AAElD,EAAA,uBACE,GAAA,CAAC,IAAA,CAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC7C,QAAA,EAAA,CAAC,EAAE,UAAA,uBACF,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,UAAA,mBACC,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,oBAErC,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,MAAA,CAAO,IAAA,EAAM,CAAA;AAAA,IAEvC;AAAA,GAAA,EACH,CAAA,EAEJ,CAAA;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs

@@ -0,0 +1,27 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import styles from './RadioButton.module.scss.mjs';
+import clsx from 'clsx';
+import '../../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import '../../RadioGroup.mjs';
+import { Radio } from '../Radio/Radio.mjs';
+import { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+
+const RadioButton = flowComponent("RadioButton", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const rootClassName = clsx(styles.radioButton, className);
+  const propsContext = {
+    Text: {
+      className: styles.label
+    },
+    Content: {
+      className: styles.content
+    }
+  };
+  return /* @__PURE__ */ jsx(Radio, { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+});
+
+export { RadioButton, RadioButton as default };
+//# sourceMappingURL=RadioButton.mjs.map

package/dist/js/components/src/components/RadioGroup/components/RadioButton/RadioButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButton.mjs","sources":["../../../../../../../../src/components/RadioGroup/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import styles from \"./RadioButton.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { RadioProps } from \"@/components/RadioGroup\";\nimport { Radio } from \"@/components/RadioGroup\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport type RadioButtonProps = RadioProps;\n\n/** @flr-generate all */\nexport const RadioButton = flowComponent(\"RadioButton\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.radioButton, 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    <Radio {...rest} className={rootClassName} ref={ref}>\n      <PropsContextProvider props={propsContext}>\n        {children}\n      </PropsContextProvider>\n    </Radio>\n  );\n});\n\nexport default RadioButton;\n"],"names":[],"mappings":";;;;;;;;;AAWO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,WAAA,EAAa,SAAS,CAAA;AAExD,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,KAAA,EAAA,EAAO,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EACzC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,41 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconStar } from '../Icon/components/icons/IconStar.mjs';
+import { IconStarFilled } from '../Icon/components/icons/IconStarFilled.mjs';
+import styles from './Rating.module.scss.mjs';
+import clsx from 'clsx';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../_virtual/_.locale.json@656bcfe2b7d48c4324cbdf14a4866b19.mjs';
+
+const Rating = (props) => {
+  const { value = 0, size = "m" } = props;
+  const rootClassName = clsx(styles.rating, styles[`size-${size}`]);
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const stars = Array(5).fill("").map(
+    (_, index) => index < value ? /* @__PURE__ */ jsx(
+      IconStarFilled,
+      {
+        "aria-hidden": true,
+        size,
+        className: styles.starFilled
+      },
+      index
+    ) : /* @__PURE__ */ jsx(IconStar, { "aria-hidden": true, size, className: styles.star }, index)
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": stringFormatter.format(`rating.${value}`),
+      className: rootClassName,
+      children: stars
+    }
+  );
+};
+
+export { Rating, Rating as default };
+//# sourceMappingURL=Rating.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.mjs","sources":["../../../../../../src/components/Rating/Rating.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { IconStar, IconStarFilled } from \"@/components/Icon/components/icons\";\nimport styles from \"./Rating.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport locales from \"./locales/*.locale.json\";\n\nexport interface RatingProps extends PropsWithClassName {\n  /** The value sets the amount of filled stars. @default: 0 */\n  value?: 0 | 1 | 2 | 3 | 4 | 5;\n  /** The size of the component. @default: \"m\" */\n  size?: \"s\" | \"m\";\n}\n\n/** @flr-generate all */\nexport const Rating: FC<RatingProps> = (props) => {\n  const { value = 0, size = \"m\" } = props;\n\n  const rootClassName = clsx(styles.rating, styles[`size-${size}`]);\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  const stars = Array(5)\n    .fill(\"\")\n    .map((_, index) =>\n      index < value ? (\n        <IconStarFilled\n          key={index}\n          aria-hidden\n          size={size}\n          className={styles.starFilled}\n        />\n      ) : (\n        <IconStar key={index} aria-hidden size={size} className={styles.star} />\n      ),\n    );\n\n  return (\n    <div\n      aria-label={stringFormatter.format(`rating.${value}`)}\n      className={rootClassName}\n    >\n      {stars}\n    </div>\n  );\n};\n\nexport default Rating;\n"],"names":[],"mappings":";;;;;;;;;;;;AAgBO,MAAM,MAAA,GAA0B,CAAC,KAAA,KAAU;AAChD,EAAA,MAAM,EAAE,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,KAAI,GAAI,KAAA;AAElC,EAAA,MAAM,aAAA,GAAgB,KAAK,MAAA,CAAO,MAAA,EAAQ,OAAO,CAAA,KAAA,EAAQ,IAAI,EAAE,CAAC,CAAA;AAEhE,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,QAAQ,KAAA,CAAM,CAAC,CAAA,CAClB,IAAA,CAAK,EAAE,CAAA,CACP,GAAA;AAAA,IAAI,CAAC,CAAA,EAAG,KAAA,KACP,KAAA,GAAQ,KAAA,mBACN,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QAEC,aAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QACA,WAAW,MAAA,CAAO;AAAA,OAAA;AAAA,MAHb;AAAA,KAIP,uBAEC,QAAA,EAAA,EAAqB,aAAA,EAAW,MAAC,IAAA,EAAY,SAAA,EAAW,MAAA,CAAO,IAAA,EAAA,EAAjD,KAAuD;AAAA,GAE1E;AAEF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,OAAA,EAAU,KAAK,CAAA,CAAE,CAAA;AAAA,MACpD,SAAA,EAAW,aAAA;AAAA,MAEV,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ;;;;"}

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

@@ -0,0 +1,15 @@
+"use client"
+/* */
+const rating = "flow--rating";
+const star = "flow--rating--star";
+const starFilled = "flow--rating--star-filled";
+const styles = {
+	rating: rating,
+	star: star,
+	starFilled: starFilled,
+	"size-s": "flow--rating--size-s",
+	"size-m": "flow--rating--size-m"
+};
+
+export { styles as default, rating, star, starFilled };
+//# sourceMappingURL=Rating.module.scss.mjs.map

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

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

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

@@ -0,0 +1,74 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as Aria from 'react-aria-components';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import styles from './SearchField.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Button } from '../Button/Button.mjs';
+import 'react';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconClose } from '../Icon/components/icons/IconClose.mjs';
+import { IconSearch } from '../Icon/components/icons/IconSearch.mjs';
+import locales from '../../../../_virtual/_.locale.json@e940efc6da10fdf09417eb079b65a343.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+
+const SearchField = flowComponent("SearchField", (props) => {
+  const { children, className, ref, ...rest } = useControlledHostValueProps(props);
+  const {
+    FieldErrorView,
+    FieldErrorCaptureContext,
+    fieldProps,
+    fieldPropsContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(
+    formFieldStyles.formField,
+    styles.searchField,
+    className
+  );
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  const searchText = stringFormatter.format(`searchField.search`);
+  return /* @__PURE__ */ jsxs(
+    Aria.SearchField,
+    {
+      ...rest,
+      ...fieldProps,
+      "aria-label": searchText,
+      className: clsx(rootClassName, fieldProps.className),
+      children: [
+        /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
+          /* @__PURE__ */ jsx(IconSearch, { className: styles.searchIcon }),
+          /* @__PURE__ */ jsx(
+            Aria.Input,
+            {
+              placeholder: searchText,
+              className: styles.input,
+              ref
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: styles.clearButton,
+              variant: "plain",
+              color: "secondary",
+              children: /* @__PURE__ */ jsx(IconClose, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ]
+    }
+  );
+});
+
+export { SearchField, SearchField as default };
+//# sourceMappingURL=SearchField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.mjs","sources":["../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface SearchFieldProps\n  extends PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n  const { children, className, ref, ...rest } =\n    useControlledHostValueProps(props);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\n  const rootClassName = clsx(\n    formFieldStyles.formField,\n    styles.searchField,\n    className,\n  );\n\n  const stringFormatter = useLocalizedStringFormatter(locales);\n  const searchText = stringFormatter.format(`searchField.search`);\n\n  return (\n    <Aria.SearchField\n      {...rest}\n      {...fieldProps}\n      aria-label={searchText}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n      </PropsContextProvider>\n      <div className={styles.inputContainer}>\n        <IconSearch className={styles.searchIcon} />\n        <Aria.Input\n          placeholder={searchText}\n          className={styles.input}\n          ref={ref}\n        />\n        <Button\n          className={styles.clearButton}\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconClose />\n        </Button>\n      </div>\n      <FieldErrorView />\n    </Aria.SearchField>\n  );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,GAAA,EAAK,GAAG,IAAA,EAAK,GACxC,4BAA4B,KAAK,CAAA;AAEnC,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,WAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,CAAoB,CAAA;AAE9D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,YAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,wBAAA,EAAA,EAA0B,UAAS,CAAA,EACtC,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,0BAC1C,GAAA;AAAA,YAAC,IAAA,CAAK,KAAA;AAAA,YAAL;AAAA,cACC,WAAA,EAAa,UAAA;AAAA,cACb,WAAW,MAAA,CAAO,KAAA;AAAA,cAClB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,WAAA;AAAA,cAClB,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,56 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import styles from './Section.module.scss.mjs';
+import clsx from 'clsx';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import ContextMenuSectionView from '../../views/ContextMenuSectionView.mjs';
+
+const Section = flowComponent(
+  "Section",
+  (props) => {
+    const {
+      children,
+      className,
+      ref,
+      renderContextMenuSection,
+      hideSeparator,
+      ...rest
+    } = props;
+    if (!children) {
+      return null;
+    }
+    if (renderContextMenuSection) {
+      return /* @__PURE__ */ jsx(ContextMenuSectionView, { ref, children });
+    }
+    const rootClassName = clsx(
+      styles.section,
+      className,
+      hideSeparator && styles.hideSeparator
+    );
+    const headingId = useId();
+    const propsContext = {
+      Heading: {
+        level: 2,
+        id: headingId,
+        className: styles.heading
+      },
+      Header: {
+        renderSectionHeader: true
+      },
+      List: {
+        "aria-labelledby": headingId
+      }
+    };
+    return /* @__PURE__ */ jsx("section", { ...rest, className: rootClassName, ref, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) });
+  },
+  {
+    type: "layout"
+  }
+);
+
+export { Section, Section as default };
+//# sourceMappingURL=Section.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","sources":["../../../../../../src/components/Section/Section.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport { useId } from \"react\";\nimport styles from \"./Section.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport ContextMenuSectionView from \"@/views/ContextMenuSectionView\";\n\nexport interface SectionProps\n  extends PropsWithChildren<ComponentProps<\"section\">>,\n    FlowComponentProps<HTMLElement> {\n  /** @internal */\n  renderContextMenuSection?: boolean;\n  /** @internal */\n  hideSeparator?: boolean;\n}\n\n/** @flr-generate all */\nexport const Section = flowComponent(\n  \"Section\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      renderContextMenuSection,\n      hideSeparator,\n      ...rest\n    } = props;\n\n    if (!children) {\n      return null;\n    }\n\n    if (renderContextMenuSection) {\n      return (\n        <ContextMenuSectionView ref={ref as never}>\n          {children}\n        </ContextMenuSectionView>\n      );\n    }\n\n    const rootClassName = clsx(\n      styles.section,\n      className,\n      hideSeparator && styles.hideSeparator,\n    );\n\n    const headingId = useId();\n\n    const propsContext: PropsContext = {\n      Heading: {\n        level: 2,\n        id: headingId,\n        className: styles.heading,\n      },\n      Header: {\n        renderSectionHeader: true,\n      },\n      List: {\n        \"aria-labelledby\": headingId,\n      },\n    };\n\n    return (\n      <section {...rest} className={rootClassName} ref={ref}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </section>\n    );\n  },\n  {\n    type: \"layout\",\n  },\n);\n\nexport default Section;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,OAAA,GAAU,aAAA;AAAA,EACrB,SAAA;AAAA,EACA,CAAC,KAAA,KAAU;AACT,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAA;AAAA,MACA,wBAAA;AAAA,MACA,aAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,IAAI,CAAC,QAAA,EAAU;AACb,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,IAAI,wBAAA,EAA0B;AAC5B,MAAA,uBACE,GAAA,CAAC,sBAAA,EAAA,EAAuB,GAAA,EACrB,QAAA,EACH,CAAA;AAAA,IAEJ;AAEA,IAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,MACpB,MAAA,CAAO,OAAA;AAAA,MACP,SAAA;AAAA,MACA,iBAAiB,MAAA,CAAO;AAAA,KAC1B;AAEA,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,MAAM,YAAA,GAA6B;AAAA,MACjC,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,CAAA;AAAA,QACP,EAAA,EAAI,SAAA;AAAA,QACJ,WAAW,MAAA,CAAO;AAAA,OACpB;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,mBAAA,EAAqB;AAAA,OACvB;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,iBAAA,EAAmB;AAAA;AACrB,KACF;AAEA,IAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EAAS,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAC3C,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AAAA,EACA;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;;;;"}

package/dist/js/components/src/components/Section/components/SectionHeader/SectionHeader.mjs

@@ -0,0 +1,61 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './SectionHeader.module.scss.mjs';
+import clsx from 'clsx';
+import '../../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+
+const SectionHeader = (props) => {
+  const { children, className, ref } = props;
+  const rootClassName = clsx(styles.sectionHeader, className);
+  const propsContext = {
+    Switch: {
+      labelPosition: "leading",
+      tunnelId: "actions"
+    },
+    Button: {
+      size: "s",
+      tunnelId: "actions"
+    },
+    FileField: { tunnelId: "actions", Button: { size: "s" } },
+    ContextMenuTrigger: {
+      tunnelId: "actions",
+      Button: {
+        tunnelId: null
+      }
+    },
+    PopoverTrigger: {
+      tunnelId: "actions",
+      Button: {
+        tunnelId: null
+      }
+    },
+    ContextualHelpTrigger: {
+      tunnelId: "actions",
+      Button: {
+        tunnelId: null
+      }
+    },
+    Action: {
+      tunnelId: "actions",
+      Button: {
+        tunnelId: null
+      }
+    },
+    Heading: {
+      level: 2
+    },
+    Link: {
+      tunnelId: "actions"
+    }
+  };
+  return /* @__PURE__ */ jsx("header", { ref, className: rootClassName, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+    children,
+    /* @__PURE__ */ jsx("div", { className: styles.actions, children: /* @__PURE__ */ jsx(TunnelExit, { id: "actions" }) })
+  ] }) }) });
+};
+
+export { SectionHeader, SectionHeader as default };
+//# sourceMappingURL=SectionHeader.mjs.map

package/dist/js/components/src/components/Section/components/SectionHeader/SectionHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.mjs","sources":["../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, RefAttributes } from \"react\";\nimport styles from \"./SectionHeader.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport type SectionHeaderProps = PropsWithChildren &\n  PropsWithClassName &\n  RefAttributes<HTMLHeadingElement>;\n\nexport const SectionHeader: FC<SectionHeaderProps> = (props) => {\n  const { children, className, ref } = props;\n\n  const rootClassName = clsx(styles.sectionHeader, className);\n\n  const propsContext: PropsContext = {\n    Switch: {\n      labelPosition: \"leading\",\n      tunnelId: \"actions\",\n    },\n    Button: {\n      size: \"s\",\n      tunnelId: \"actions\",\n    },\n    FileField: { tunnelId: \"actions\", Button: { size: \"s\" } },\n    ContextMenuTrigger: {\n      tunnelId: \"actions\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    PopoverTrigger: {\n      tunnelId: \"actions\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    ContextualHelpTrigger: {\n      tunnelId: \"actions\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    Action: {\n      tunnelId: \"actions\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n    Heading: {\n      level: 2,\n    },\n    Link: {\n      tunnelId: \"actions\",\n    },\n  };\n\n  return (\n    <header ref={ref} className={rootClassName}>\n      <PropsContextProvider props={propsContext}>\n        <TunnelProvider>\n          {children}\n          <div className={styles.actions}>\n            <TunnelExit id=\"actions\" />\n          </div>\n        </TunnelProvider>\n      </PropsContextProvider>\n    </header>\n  );\n};\n\nexport default SectionHeader;\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAI,GAAI,KAAA;AAErC,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,aAAA,EAAe,SAAS,CAAA;AAE1D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,aAAA,EAAe,SAAA;AAAA,MACf,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,IAAA,EAAM,GAAA;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,SAAA,EAAW,EAAE,QAAA,EAAU,SAAA,EAAW,QAAQ,EAAE,IAAA,EAAM,KAAI,EAAE;AAAA,IACxD,kBAAA,EAAoB;AAAA,MAClB,QAAA,EAAU,SAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,SAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU,SAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU,SAAA;AAAA,MACV,MAAA,EAAQ;AAAA,QACN,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,KACT;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,QAAA,EAAA,EAAO,GAAA,EAAU,SAAA,EAAW,aAAA,EAC3B,8BAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,SACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,SAAA,EAAU,CAAA,EAC3B;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,65 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import 'react';
+import * as Aria from 'react-aria-components';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import styles from './SegmentedControl.module.scss.mjs';
+import { getContainerBreakpointSizeClassName } from '../../lib/getContainerBreakpointSizeClassName.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 { useObjectRef } from '@react-aria/utils';
+import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const SegmentedControl = flowComponent("SegmentedControl", (props) => {
+  const {
+    children,
+    className,
+    containerBreakpointSize = "m",
+    ref,
+    ...rest
+  } = props;
+  const {
+    FieldErrorView,
+    fieldPropsContext,
+    fieldProps,
+    FieldErrorCaptureContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(
+    formFieldStyles.formField,
+    styles.segmentedControlContainer,
+    className,
+    styles[getContainerBreakpointSizeClassName(containerBreakpointSize)]
+  );
+  const propsContext = {
+    Segment: {
+      tunnelId: "segments",
+      className: styles.segment
+    },
+    ...fieldPropsContext
+  };
+  const objectRef = useObjectRef(ref);
+  useMakeFocusable(objectRef);
+  return /* @__PURE__ */ jsx(
+    Aria.RadioGroup,
+    {
+      ...rest,
+      className: clsx(rootClassName, fieldProps.className),
+      ref: objectRef,
+      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { dependencies: ["segment"], props: propsContext, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.segmentedControl, children: /* @__PURE__ */ jsx("div", { className: styles.segments, children: /* @__PURE__ */ jsx(TunnelExit, { id: "segments" }) }) }),
+          children
+        ] }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] })
+    }
+  );
+});
+
+export { SegmentedControl, SegmentedControl as default };
+//# sourceMappingURL=SegmentedControl.mjs.map

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

@@ -0,0 +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 clsx from \"clsx\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SegmentedControlProps\n  extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\" | \"ref\">>,\n    FlowComponentProps<HTMLDivElement>,\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 {\n    FieldErrorView,\n    fieldPropsContext,\n    fieldProps,\n    FieldErrorCaptureContext,\n  } = useFieldComponent(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    Segment: {\n      tunnelId: \"segments\",\n      className: styles.segment,\n    },\n    ...fieldPropsContext,\n  };\n\n  const objectRef = useObjectRef(ref);\n  useMakeFocusable(objectRef);\n\n  return (\n    <Aria.RadioGroup\n      {...rest}\n      className={clsx(rootClassName, fieldProps.className)}\n      ref={objectRef}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider dependencies={[\"segment\"]} props={propsContext}>\n            <div className={styles.segmentedControl}>\n              <div className={styles.segments}>\n                <TunnelExit id=\"segments\" />\n              </div>\n            </div>\n            {children}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.RadioGroup>\n  );\n});\n\nexport default SegmentedControl;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,aAAA,CAAc,kBAAA,EAAoB,CAAC,KAAA,KAAU;AAC3E,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,uBAAA,GAA0B,GAAA;AAAA,IAC1B,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,yBAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,mCAAA,CAAoC,uBAAuB,CAAC;AAAA,GACrE;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,OAAA,EAAS;AAAA,MACP,QAAA,EAAU,UAAA;AAAA,MACV,WAAW,MAAA,CAAO;AAAA,KACpB;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,SAAA,GAAY,aAAa,GAAG,CAAA;AAClC,EAAA,gBAAA,CAAiB,SAAS,CAAA;AAE1B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,SAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,SAAS,CAAA,EAAG,OAAO,YAAA,EACtD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAA,EACrB,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,QAAA,EACrB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,UAAA,EAAW,GAC5B,CAAA,EACF,CAAA;AAAA,UACC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Segment.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+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 { flowComponent } from '../../../../lib/componentFactory/flowComponent.mjs';
+
+const Segment = flowComponent("Segment", (props) => {
+  const { children, className, ref, ...rest } = props;
+  const rootClassName = clsx(styles.segment, className);
+  return /* @__PURE__ */ jsxs(Aria.Radio, { ...rest, className: rootClassName, ref, children: [
+    children,
+    /* @__PURE__ */ jsx(IconCheck, { className: styles.checkmark })
+  ] });
+});
+
+export { Segment, Segment as default };
+//# sourceMappingURL=Segment.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Segment.mjs","sources":["../../../../../../../../src/components/SegmentedControl/components/Segment/Segment.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Segment.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface SegmentProps\n  extends PropsWithChildren<Omit<Aria.RadioProps, \"children\">>,\n    FlowComponentProps<HTMLLabelElement> {}\n\n/** @flr-generate all */\nexport const Segment = flowComponent(\"Segment\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.segment, className);\n\n  return (\n    <Aria.Radio {...rest} className={rootClassName} ref={ref}>\n      {children}\n      <IconCheck className={styles.checkmark} />\n    </Aria.Radio>\n  );\n});\n\nexport default Segment;\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,OAAA,GAAU,aAAA,CAAc,SAAA,EAAW,CAAC,KAAA,KAAU;AACzD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAEpD,EAAA,uBACE,IAAA,CAAC,KAAK,KAAA,EAAL,EAAY,GAAG,IAAA,EAAM,SAAA,EAAW,eAAe,GAAA,EAC7C,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,MAAA,CAAO,SAAA,EAAW;AAAA,GAAA,EAC1C,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,92 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import styles from './Select.module.scss.mjs';
+import clsx from 'clsx';
+import '@tabler/icons-react';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconChevronDown } from '../Icon/components/icons/IconChevronDown.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { Options } from '../Options/Options.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+import 'mobx';
+import { useOverlayController } from '../../lib/controller/overlay/useOverlayController.mjs';
+import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+
+const Select = flowComponent("Select", (props) => {
+  const {
+    children,
+    className,
+    onChange,
+    onSelectionChange,
+    isReadOnly,
+    ref,
+    ...rest
+  } = props;
+  const {
+    FieldErrorView,
+    fieldPropsContext,
+    fieldProps,
+    FieldErrorCaptureContext
+  } = useFieldComponent(props);
+  const rootClassName = clsx(
+    styles.select,
+    formFieldStyles.formField,
+    className
+  );
+  const propsContext = {
+    Option: {
+      tunnelId: "options"
+    },
+    ...fieldPropsContext
+  };
+  const controller = useOverlayController("Select", {
+    reuseControllerFromContext: false
+  });
+  const isOpen = controller.useIsOpen();
+  return /* @__PURE__ */ jsx(
+    Aria.Select,
+    {
+      ...rest,
+      ...fieldProps,
+      className: clsx(rootClassName, fieldProps.className),
+      onChange: (value) => {
+        if (!isReadOnly) {
+          onChange?.(value);
+          onSelectionChange?.(value);
+        }
+      },
+      onOpenChange: (isOpen2) => !isReadOnly && controller.setOpen(isOpen2),
+      isOpen,
+      "data-readonly": isReadOnly,
+      children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+        /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+          /* @__PURE__ */ jsxs(
+            Aria.Button,
+            {
+              "data-readonly": isReadOnly,
+              className: styles.toggle,
+              ref,
+              children: [
+                /* @__PURE__ */ jsx(Aria.SelectValue, {}),
+                /* @__PURE__ */ jsx(IconChevronDown, {})
+              ]
+            }
+          ),
+          children,
+          /* @__PURE__ */ jsx(Options, { controller, children: /* @__PURE__ */ jsx(TunnelExit, { id: "options" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(FieldErrorView, {})
+      ] })
+    }
+  );
+});
+
+export { Select, Select as default };
+//# sourceMappingURL=Select.mjs.map