@mittwald/flow-react-components 0.2.0-alpha.6 → 0.2.0-alpha.600

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/SearchField/SearchField.module.scss.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+const searchField = "flow--search-field";
+const clearButton = "flow--search-field--clear-button";
+const searchIcon = "flow--search-field--search-icon";
+const inputContainer = "flow--search-field--input-container";
+const input = "flow--search-field--input";
+const styles = {
+	searchField: searchField,
+	clearButton: clearButton,
+	searchIcon: searchIcon,
+	inputContainer: inputContainer,
+	input: input
+};
+
+export { clearButton, styles as default, input, inputContainer, searchField, searchIcon };
+//# sourceMappingURL=SearchField.module.scss.mjs.map

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

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

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/Section.module.scss.mjs

@@ -0,0 +1,13 @@
+"use client"
+/* */
+const section = "flow--section";
+const hideSeparator = "flow--section--hide-separator";
+const heading = "flow--section--heading";
+const styles = {
+	section: section,
+	hideSeparator: hideSeparator,
+	heading: heading
+};
+
+export { styles as default, heading, hideSeparator, section };
+//# sourceMappingURL=Section.module.scss.mjs.map

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

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

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/Section/components/SectionHeader/SectionHeader.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const sectionHeader = "flow--section--section-header";
+const actions = "flow--section--section-header--actions";
+const styles = {
+	sectionHeader: sectionHeader,
+	actions: actions
+};
+
+export { actions, styles as default, sectionHeader };
+//# sourceMappingURL=SectionHeader.module.scss.mjs.map

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

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

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/SegmentedControl.module.scss.mjs

@@ -0,0 +1,20 @@
+"use client"
+/* */
+const segmentedControl = "flow--segmented-control";
+const segments = "flow--segmented-control--segments";
+const segmentedControlContainer = "flow--segmented-control--segmented-control-container";
+const segment = "flow--segmented-control--segment";
+const styles = {
+	segmentedControl: segmentedControl,
+	segments: segments,
+	segmentedControlContainer: segmentedControlContainer,
+	"container-breakpoint-size-xs": "flow--segmented-control--container-breakpoint-size-xs",
+	segment: segment,
+	"container-breakpoint-size-s": "flow--segmented-control--container-breakpoint-size-s",
+	"container-breakpoint-size-m": "flow--segmented-control--container-breakpoint-size-m",
+	"container-breakpoint-size-l": "flow--segmented-control--container-breakpoint-size-l",
+	"container-breakpoint-size-xl": "flow--segmented-control--container-breakpoint-size-xl"
+};
+
+export { styles as default, segment, segmentedControl, segmentedControlContainer, segments };
+//# sourceMappingURL=SegmentedControl.module.scss.mjs.map

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

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

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/SegmentedControl/components/Segment/Segment.module.scss.mjs

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const segment = "flow--segmented-control--segment";
+const checkmark = "flow--segmented-control--segment--checkmark";
+const styles = {
+	segment: segment,
+	checkmark: checkmark
+};
+
+export { checkmark, styles as default, segment };
+//# sourceMappingURL=Segment.module.scss.mjs.map

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

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

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

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

@@ -0,0 +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 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 { useOverlayController } from \"@/lib/controller\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SelectProps\n  extends PropsWithChildren<\n      Omit<Aria.SelectProps, \"children\" | \"className\" | \"ref\">\n    >,\n    FlowComponentProps<HTMLButtonElement>,\n    PropsWithClassName {\n  /** Handler that is called when the selected value changes. */\n  onChange?: (value: Key | null) => void;\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    onSelectionChange,\n    isReadOnly,\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    styles.select,\n    formFieldStyles.formField,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Option: {\n      tunnelId: \"options\",\n    },\n    ...fieldPropsContext,\n  };\n\n  const controller = useOverlayController(\"Select\", {\n    reuseControllerFromContext: false,\n  });\n  const isOpen = controller.useIsOpen();\n\n  return (\n    <Aria.Select\n      {...rest}\n      {...fieldProps}\n      className={clsx(rootClassName, fieldProps.className)}\n      onChange={(value) => {\n        if (!isReadOnly) {\n          onChange?.(value);\n          onSelectionChange?.(value);\n        }\n      }}\n      onOpenChange={(isOpen) => !isReadOnly && controller.setOpen(isOpen)}\n      isOpen={isOpen}\n      data-readonly={isReadOnly}\n    >\n      <TunnelProvider>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.Button\n              data-readonly={isReadOnly}\n              className={styles.toggle}\n              ref={ref}\n            >\n              <Aria.SelectValue />\n              <IconChevronDown />\n            </Aria.Button>\n            {children}\n            <Options controller={controller}>\n              <TunnelExit id=\"options\" />\n            </Options>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </TunnelProvider>\n    </Aria.Select>\n  );\n});\n\nexport default Select;\n"],"names":["isOpen"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BO,MAAM,MAAA,GAAS,aAAA,CAAc,QAAA,EAAU,CAAC,KAAA,KAAU;AACvD,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,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,MAAA,CAAO,MAAA;AAAA,IACP,eAAA,CAAgB,SAAA;AAAA,IAChB;AAAA,GACF;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,UAAA,GAAa,qBAAqB,QAAA,EAAU;AAAA,IAChD,0BAAA,EAA4B;AAAA,GAC7B,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,WAAW,SAAA,EAAU;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,MAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,IAAI,CAAC,UAAA,EAAY;AACf,UAAA,QAAA,GAAW,KAAK,CAAA;AAChB,UAAA,iBAAA,GAAoB,KAAK,CAAA;AAAA,QAC3B;AAAA,MACF,CAAA;AAAA,MACA,cAAc,CAACA,OAAAA,KAAW,CAAC,UAAA,IAAc,UAAA,CAAW,QAAQA,OAAM,CAAA;AAAA,MAClE,MAAA;AAAA,MACA,eAAA,EAAe,UAAA;AAAA,MAEf,+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,IAAA;AAAA,YAAC,IAAA,CAAK,MAAA;AAAA,YAAL;AAAA,cACC,eAAA,EAAe,UAAA;AAAA,cACf,WAAW,MAAA,CAAO,MAAA;AAAA,cAClB,GAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,IAAA,CAAK,aAAL,EAAiB,CAAA;AAAA,oCACjB,eAAA,EAAA,EAAgB;AAAA;AAAA;AAAA,WACnB;AAAA,UACC,QAAA;AAAA,8BACA,OAAA,EAAA,EAAQ,UAAA,EACP,8BAAC,UAAA,EAAA,EAAW,EAAA,EAAG,WAAU,CAAA,EAC3B;AAAA,SAAA,EACF,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,11 @@
+"use client"
+/* */
+const select = "flow--select";
+const toggle = "flow--select--toggle";
+const styles = {
+	select: select,
+	toggle: toggle
+};
+
+export { styles as default, select, toggle };
+//# sourceMappingURL=Select.module.scss.mjs.map

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

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

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

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import clsx from 'clsx';
+import styles from './Separator.module.scss.mjs';
+import * as Aria from 'react-aria-components';
+
+const Separator = (props) => {
+  const { className, ...rest } = props;
+  const rootClassName = clsx(styles.separator, className);
+  return /* @__PURE__ */ jsx(Aria.Separator, { elementType: "hr", className: rootClassName, ...rest });
+};
+
+export { Separator, Separator as default };
+//# sourceMappingURL=Separator.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.mjs","sources":["../../../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./Separator.module.scss\";\nimport * as Aria from \"react-aria-components\";\n\nexport type SeparatorProps = Omit<Aria.SeparatorProps, \"orientation\">;\n\n/** @flr-generate all */\nexport const Separator: FC<SeparatorProps> = (props) => {\n  const { className, ...rest } = props;\n\n  const rootClassName = clsx(styles.separator, className);\n\n  return (\n    <Aria.Separator elementType=\"hr\" className={rootClassName} {...rest} />\n  );\n};\n\nexport default Separator;\n"],"names":[],"mappings":";;;;;;AASO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,SAAA,EAAW,SAAS,CAAA;AAEtD,EAAA,uBACE,GAAA,CAAC,KAAK,SAAA,EAAL,EAAe,aAAY,IAAA,EAAK,SAAA,EAAW,aAAA,EAAgB,GAAG,IAAA,EAAM,CAAA;AAEzE;;;;"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const separator = "flow--separator";
+const styles = {
+	separator: separator
+};
+
+export { styles as default, separator };
+//# sourceMappingURL=Separator.module.scss.mjs.map

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

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

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

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useRef, useMemo, useEffect } from 'react';
+import { autorun } from 'mobx';
+import { getAsyncResource } from '@mittwald/react-use-promise';
+import { SettingsStore } from './models/SettingsStore.mjs';
+import { settingsBackendFactory } from './backends/settingsBackendFactory.mjs';
+
+const context = createContext(void 0);
+const useSettings = () => useContext(context);
+const SettingsProvider = (props) => {
+  const { children, id, ...storeShape } = props;
+  const backend = settingsBackendFactory(storeShape);
+  const storedSettingsResource = getAsyncResource(() => backend.load(), [], {
+    loaderId: id
+  });
+  const storedSettings = storedSettingsResource.use();
+  const storingPromise = useRef(Promise.resolve());
+  const settingsStore = useMemo(
+    () => SettingsStore.fromJson(storedSettings),
+    [id]
+  );
+  const watchAndStoreSettings = () => {
+    const json = settingsStore.asJson;
+    storingPromise.current = storingPromise.current.then(async () => {
+      await backend.store(json);
+      storedSettingsResource.refresh();
+    });
+  };
+  useEffect(() => autorun(watchAndStoreSettings), [id]);
+  return /* @__PURE__ */ jsx(context.Provider, { value: settingsStore, children });
+};
+
+export { SettingsProvider, SettingsProvider as default, useSettings };
+//# sourceMappingURL=SettingsProvider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsProvider.mjs","sources":["../../../../../../src/components/SettingsProvider/SettingsProvider.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\nimport React, {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { SupportedSettingsBackend } from \"@/components/SettingsProvider/backends/types\";\nimport { autorun } from \"mobx\";\nimport { getAsyncResource } from \"@mittwald/react-use-promise\";\nimport { SettingsStore } from \"@/components/SettingsProvider/models/SettingsStore\";\nimport { settingsBackendFactory } from \"@/components/SettingsProvider/backends/settingsBackendFactory\";\n\ntype Props = PropsWithChildren &\n  SupportedSettingsBackend & {\n    id?: string;\n  };\n\nconst context = createContext<SettingsStore | undefined>(undefined);\n\nexport const useSettings = () => useContext(context);\n\nexport const SettingsProvider: FC<Props> = (props) => {\n  const { children, id, ...storeShape } = props;\n  const backend = settingsBackendFactory(storeShape);\n\n  const storedSettingsResource = getAsyncResource(() => backend.load(), [], {\n    loaderId: id,\n  });\n  const storedSettings = storedSettingsResource.use();\n  const storingPromise = useRef(Promise.resolve());\n\n  const settingsStore = useMemo(\n    () => SettingsStore.fromJson(storedSettings),\n    [id],\n  );\n\n  const watchAndStoreSettings = () => {\n    const json = settingsStore.asJson;\n    storingPromise.current = storingPromise.current.then(async () => {\n      await backend.store(json);\n      storedSettingsResource.refresh();\n    });\n  };\n\n  useEffect(() => autorun(watchAndStoreSettings), [id]);\n\n  return <context.Provider value={settingsStore}>{children}</context.Provider>;\n};\n\nexport default SettingsProvider;\n"],"names":[],"mappings":";;;;;;;AAmBA,MAAM,OAAA,GAAU,cAAyC,MAAS,CAAA;AAE3D,MAAM,WAAA,GAAc,MAAM,UAAA,CAAW,OAAO;AAE5C,MAAM,gBAAA,GAA8B,CAAC,KAAA,KAAU;AACpD,EAAA,MAAM,EAAE,QAAA,EAAU,EAAA,EAAI,GAAG,YAAW,GAAI,KAAA;AACxC,EAAA,MAAM,OAAA,GAAU,uBAAuB,UAAU,CAAA;AAEjD,EAAA,MAAM,yBAAyB,gBAAA,CAAiB,MAAM,QAAQ,IAAA,EAAK,EAAG,EAAC,EAAG;AAAA,IACxE,QAAA,EAAU;AAAA,GACX,CAAA;AACD,EAAA,MAAM,cAAA,GAAiB,uBAAuB,GAAA,EAAI;AAClD,EAAA,MAAM,cAAA,GAAiB,MAAA,CAAO,OAAA,CAAQ,OAAA,EAAS,CAAA;AAE/C,EAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,IACpB,MAAM,aAAA,CAAc,QAAA,CAAS,cAAc,CAAA;AAAA,IAC3C,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAA,MAAM,OAAO,aAAA,CAAc,MAAA;AAC3B,IAAA,cAAA,CAAe,OAAA,GAAU,cAAA,CAAe,OAAA,CAAQ,IAAA,CAAK,YAAY;AAC/D,MAAA,MAAM,OAAA,CAAQ,MAAM,IAAI,CAAA;AACxB,MAAA,sBAAA,CAAuB,OAAA,EAAQ;AAAA,IACjC,CAAC,CAAA;AAAA,EACH,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM,OAAA,CAAQ,qBAAqB,CAAA,EAAG,CAAC,EAAE,CAAC,CAAA;AAEpD,EAAA,2BAAQ,OAAA,CAAQ,QAAA,EAAR,EAAiB,KAAA,EAAO,eAAgB,QAAA,EAAS,CAAA;AAC3D;;;;"}