@mittwald/flow-react-components 0.2.0-alpha.49 → 0.2.0-alpha.490

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+const fileCard = "flow--file-card";
+const link = "flow--file-card--link";
+const text = "flow--file-card--text";
+const title = "flow--file-card--title";
+const subTitle = "flow--file-card--sub-title";
+const failed = "flow--file-card--failed";
+const styles = {
+	fileCard: fileCard,
+	link: link,
+	text: text,
+	title: title,
+	subTitle: subTitle,
+	failed: failed
+};
+
+export { styles as default, failed, fileCard, link, subTitle, text, title };
+//# sourceMappingURL=FileCard.module.scss.mjs.map

package/dist/js/components/src/components/FileCard/components/Avatar/Avatar.mjs

@@ -0,0 +1,24 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { IconPhoto } from '@tabler/icons-react';
+import { Icon } from '../../../Icon/Icon.mjs';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconFile } from '../../../Icon/components/icons/IconFile.mjs';
+import { Avatar as Avatar$1 } from '../../../Avatar/Avatar.mjs';
+import { Image } from '../../../Image/Image.mjs';
+
+const Avatar = (props) => {
+  const { type, imageSrc, isFailed } = props;
+  if (isFailed) {
+    return /* @__PURE__ */ jsx(Avatar$1, { status: "danger" });
+  }
+  if (imageSrc) {
+    return /* @__PURE__ */ jsx(Avatar$1, { children: /* @__PURE__ */ jsx(Image, { src: imageSrc }) });
+  }
+  return /* @__PURE__ */ jsx(Avatar$1, { color: "blue", children: type?.startsWith("image") ? /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconPhoto, {}) }) : /* @__PURE__ */ jsx(IconFile, {}) });
+};
+
+export { Avatar, Avatar as default };
+//# sourceMappingURL=Avatar.mjs.map

package/dist/js/components/src/components/FileCard/components/Avatar/Avatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.mjs","sources":["../../../../../../../../src/components/FileCard/components/Avatar/Avatar.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { IconFile } from \"@/components/Icon/components/icons\";\nimport { Avatar as AvatarComponent } from \"@/components/Avatar\";\nimport { Image } from \"@/components/Image\";\nimport Icon from \"@/components/Icon\";\nimport { IconPhoto } from \"@tabler/icons-react\";\n\ninterface Props {\n  type?: string;\n  imageSrc?: string;\n  isFailed?: boolean;\n}\n\nexport const Avatar: FC<Props> = (props) => {\n  const { type, imageSrc, isFailed } = props;\n\n  if (isFailed) {\n    return <AvatarComponent status=\"danger\" />;\n  }\n\n  if (imageSrc) {\n    return (\n      <AvatarComponent>\n        <Image src={imageSrc} />\n      </AvatarComponent>\n    );\n  }\n\n  return (\n    <AvatarComponent color=\"blue\">\n      {type?.startsWith(\"image\") ? (\n        <Icon>\n          <IconPhoto />\n        </Icon>\n      ) : (\n        <IconFile />\n      )}\n    </AvatarComponent>\n  );\n};\nexport default Avatar;\n"],"names":["AvatarComponent"],"mappings":";;;;;;;;;AAca,MAAA,MAAA,GAAoB,CAAC,KAAU,KAAA;AAC1C,EAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,QAAA,EAAa,GAAA,KAAA;AAErC,EAAA,IAAI,QAAU,EAAA;AACZ,IAAO,uBAAA,GAAA,CAACA,QAAgB,EAAA,EAAA,MAAA,EAAO,QAAS,EAAA,CAAA;AAAA;AAG1C,EAAA,IAAI,QAAU,EAAA;AACZ,IAAA,2BACGA,QACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAM,EAAA,EAAA,GAAA,EAAK,UAAU,CACxB,EAAA,CAAA;AAAA;AAIJ,EAAA,2BACGA,QAAgB,EAAA,EAAA,KAAA,EAAM,MACpB,EAAA,QAAA,EAAA,IAAA,EAAM,WAAW,OAAO,CAAA,mBACtB,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,SAAU,EAAA,EAAA,CAAA,EACb,CAEA,mBAAA,GAAA,CAAC,YAAS,CAEd,EAAA,CAAA;AAEJ;;;;"}

package/dist/js/components/src/components/FileCard/components/DeleteButton/DeleteButton.mjs

@@ -0,0 +1,31 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../../Button/Button.mjs';
+import styles from '../../FileCard.module.scss.mjs';
+import '@tabler/icons-react';
+import '../../../Icon/Icon.mjs';
+import '../../../../lib/viewComponentContext/viewComponentContext.mjs';
+import { IconClose } from '../../../Icon/components/icons/IconClose.mjs';
+import locales from '../../../../../../_virtual/_.locale.json@c33938a00f4bfb40e033ada6b54e38f9.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+
+const DeleteButton = (props) => {
+  const { onDelete } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: styles.deleteButton,
+      "aria-label": stringFormatter.format(`fileCard.delete`),
+      variant: "plain",
+      color: "secondary",
+      onPress: onDelete,
+      children: /* @__PURE__ */ jsx(IconClose, {})
+    }
+  );
+};
+
+export { DeleteButton, DeleteButton as default };
+//# sourceMappingURL=DeleteButton.mjs.map

package/dist/js/components/src/components/FileCard/components/DeleteButton/DeleteButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteButton.mjs","sources":["../../../../../../../../src/components/FileCard/components/DeleteButton/DeleteButton.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Button } from \"@/components/Button\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport locales from \"../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\n\ninterface Props {\n  onDelete: () => void;\n}\n\nexport const DeleteButton: FC<Props> = (props) => {\n  const { onDelete } = props;\n  const stringFormatter = useLocalizedStringFormatter(locales);\n\n  return (\n    <Button\n      className={styles.deleteButton}\n      aria-label={stringFormatter.format(`fileCard.delete`)}\n      variant=\"plain\"\n      color=\"secondary\"\n      onPress={onDelete}\n    >\n      <IconClose />\n    </Button>\n  );\n};\n\nexport default DeleteButton;\n"],"names":[],"mappings":";;;;;;;;;;;AAYa,MAAA,YAAA,GAA0B,CAAC,KAAU,KAAA;AAChD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AACrB,EAAM,MAAA,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,YAAA;AAAA,MAClB,YAAA,EAAY,eAAgB,CAAA,MAAA,CAAO,CAAiB,eAAA,CAAA,CAAA;AAAA,MACpD,OAAQ,EAAA,OAAA;AAAA,MACR,KAAM,EAAA,WAAA;AAAA,MACN,OAAS,EAAA,QAAA;AAAA,MAET,8BAAC,SAAU,EAAA,EAAA;AAAA;AAAA,GACb;AAEJ;;;;"}

package/dist/js/components/src/components/FileCard/components/FileSizeText/FileSizeText.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSizeText.mjs","sources":["../../../../../../../../src/components/FileCard/components/FileSizeText/FileSizeText.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport React from \"react\";\nimport { Text } from \"@/components/Text\";\nimport styles from \"@/components/FileCard/FileCard.module.scss\";\n\ninterface Props {\n  sizeInBytes: number;\n}\n\nexport const FileSizeText: FC<Props> = (props) => {\n  const { sizeInBytes } = props;\n\n  return (\n    <Text className={styles.subTitle}>\n      {new Intl.NumberFormat(undefined, {\n        notation: \"compact\",\n        style: \"unit\",\n        unit: \"byte\",\n        unitDisplay: \"narrow\",\n      }).format(sizeInBytes)}\n    </Text>\n  );\n};\n\nexport default FileSizeText;\n"],"names":[],"mappings":";;;;;AASa,MAAA,YAAA,GAA0B,CAAC,KAAU,KAAA;AAChD,EAAM,MAAA,EAAE,aAAgB,GAAA,KAAA;AAExB,EACE,uBAAA,GAAA,CAAC,QAAK,SAAW,EAAA,MAAA,CAAO,UACrB,QAAI,EAAA,IAAA,IAAA,CAAK,aAAa,MAAW,EAAA;AAAA,IAChC,QAAU,EAAA,SAAA;AAAA,IACV,KAAO,EAAA,MAAA;AAAA,IACP,IAAM,EAAA,MAAA;AAAA,IACN,WAAa,EAAA;AAAA,GACd,CAAA,CAAE,MAAO,CAAA,WAAW,CACvB,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,18 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const FileCardList = flowComponent("FileCardList", (props) => {
+  const { className, ref, children, ...rest } = props;
+  const propsContext = {
+    FileCard: { elementType: "li" }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(ColumnLayout, { ref, elementType: "ul", className, ...rest, children }) });
+});
+
+export { FileCardList, FileCardList as default };
+//# sourceMappingURL=FileCardList.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileCardList.mjs","sources":["../../../../../../src/components/FileCardList/FileCardList.tsx"],"sourcesContent":["import type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\n\nexport type FileCardListProps = Omit<ColumnLayoutProps, \"elementType\"> &\n  FlowComponentProps<HTMLUListElement>;\n\n/** @flr-generate all */\nexport const FileCardList = flowComponent(\"FileCardList\", (props) => {\n  const { className, ref, children, ...rest } = props;\n\n  const propsContext: PropsContext = {\n    FileCard: { elementType: \"li\" },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <ColumnLayout ref={ref} elementType=\"ul\" className={className} {...rest}>\n        {children}\n      </ColumnLayout>\n    </PropsContextProvider>\n  );\n});\n\nexport default FileCardList;\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,YAAe,GAAA,aAAA,CAAc,cAAgB,EAAA,CAAC,KAAU,KAAA;AACnE,EAAA,MAAM,EAAE,SAAW,EAAA,GAAA,EAAK,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAE9C,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAK;AAAA,GAChC;AAEA,EAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,GAAU,EAAA,WAAA,EAAY,IAAK,EAAA,SAAA,EAAuB,GAAG,IAAA,EAChE,UACH,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,90 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import * as Aria from 'react-aria-components';
+import { IllustratedMessage } from '../IllustratedMessage/IllustratedMessage.mjs';
+import styles from './FileDropZone.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 { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
+
+const FileDropZone = flowComponent(
+  "FileDropZone",
+  (props) => {
+    const {
+      multiple,
+      accept,
+      className,
+      onChange: onChangeDropZone,
+      children,
+      name,
+      isDisabled,
+      isReadOnly
+    } = props;
+    const fileFieldRef = useRef(null);
+    const rootClassName = clsx(
+      styles.fileDropZone,
+      isDisabled && styles.disabled,
+      className
+    );
+    const propsContext = {
+      FileField: {
+        name,
+        onChange: onChangeDropZone,
+        ref: fileFieldRef,
+        accept,
+        multiple,
+        Button: { variant: "outline", color: "dark" },
+        isDisabled,
+        isReadOnly
+      },
+      Heading: {
+        className: styles.heading
+      },
+      Icon: { className: styles.icon },
+      Text: { className: styles.text }
+    };
+    const onDropHandler = async (event) => {
+      if (isReadOnly) {
+        return;
+      }
+      const fileDropItems = event.items.filter(
+        (file) => file.kind === "file"
+      );
+      const files = await Promise.all(
+        fileDropItems.filter((f) => !accept || accept?.includes(f.type)).map(async (f) => {
+          const file = await f.getFile();
+          return await addAwaitedArrayBuffer(file);
+        })
+      );
+      if (files.length > 0) {
+        const fileTransfer = new DataTransfer();
+        for (const file of multiple ? files : [files[0]]) {
+          if (file) {
+            fileTransfer.items.add(file);
+          }
+        }
+        onChangeDropZone?.(fileTransfer.files);
+        if (fileFieldRef.current) {
+          fileFieldRef.current.files = fileTransfer.files;
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Aria.DropZone,
+      {
+        className: rootClassName,
+        onDrop: onDropHandler,
+        isDisabled,
+        "data-readonly": isReadOnly,
+        children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) })
+      }
+    );
+  }
+);
+
+export { FileDropZone, FileDropZone as default };
+//# sourceMappingURL=FileDropZone.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.mjs","sources":["../../../../../../src/components/FileDropZone/FileDropZone.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { IllustratedMessage } from \"@/components/IllustratedMessage\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./FileDropZone.module.scss\";\nimport clsx from \"clsx\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { DropEvent, FocusableElement } from \"@react-types/shared\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileDropZoneProps\n  extends PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileDropZone: FC<FileDropZoneProps> = flowComponent(\n  \"FileDropZone\",\n  (props) => {\n    const {\n      multiple,\n      accept,\n      className,\n      onChange: onChangeDropZone,\n      children,\n      name,\n      isDisabled,\n      isReadOnly,\n    } = props;\n\n    const fileFieldRef = useRef<HTMLInputElement>(null);\n    const rootClassName = clsx(\n      styles.fileDropZone,\n      isDisabled && styles.disabled,\n      className,\n    );\n\n    const propsContext: PropsContext = {\n      FileField: {\n        name,\n        onChange: onChangeDropZone,\n        ref: fileFieldRef,\n        accept: accept,\n        multiple: multiple,\n        Button: { variant: \"outline\", color: \"dark\" },\n        isDisabled,\n        isReadOnly,\n      },\n      Heading: {\n        className: styles.heading,\n      },\n      Icon: { className: styles.icon },\n      Text: { className: styles.text },\n    };\n\n    const onDropHandler = async (event: DropEvent) => {\n      if (isReadOnly) {\n        return;\n      }\n\n      const fileDropItems = event.items.filter(\n        (file) => file.kind === \"file\",\n      ) as Aria.FileDropItem[];\n\n      const files = await Promise.all(\n        fileDropItems\n          .filter((f) => !accept || accept?.includes(f.type))\n          .map(async (f) => {\n            const file = await f.getFile();\n            return await addAwaitedArrayBuffer(file);\n          }),\n      );\n\n      if (files.length > 0) {\n        const fileTransfer = new DataTransfer();\n        for (const file of multiple ? files : [files[0]]) {\n          if (file) {\n            fileTransfer.items.add(file);\n          }\n        }\n\n        onChangeDropZone?.(fileTransfer.files);\n        if (fileFieldRef.current) {\n          fileFieldRef.current.files = fileTransfer.files;\n        }\n      }\n    };\n\n    return (\n      <Aria.DropZone\n        className={rootClassName}\n        onDrop={onDropHandler}\n        isDisabled={isDisabled}\n        data-readonly={isReadOnly}\n      >\n        <IllustratedMessage color=\"dark\">\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </IllustratedMessage>\n      </Aria.DropZone>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,MAAM,YAAsC,GAAA,aAAA;AAAA,EACjD,cAAA;AAAA,EACA,CAAC,KAAU,KAAA;AACT,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA;AAClD,IAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,MACpB,MAAO,CAAA,YAAA;AAAA,MACP,cAAc,MAAO,CAAA,QAAA;AAAA,MACrB;AAAA,KACF;AAEA,IAAA,MAAM,YAA6B,GAAA;AAAA,MACjC,SAAW,EAAA;AAAA,QACT,IAAA;AAAA,QACA,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,YAAA;AAAA,QACL,MAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAQ,EAAA,EAAE,OAAS,EAAA,SAAA,EAAW,OAAO,MAAO,EAAA;AAAA,QAC5C,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,OAAS,EAAA;AAAA,QACP,WAAW,MAAO,CAAA;AAAA,OACpB;AAAA,MACA,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK,EAAA;AAAA,MAC/B,IAAM,EAAA,EAAE,SAAW,EAAA,MAAA,CAAO,IAAK;AAAA,KACjC;AAEA,IAAM,MAAA,aAAA,GAAgB,OAAO,KAAqB,KAAA;AAChD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA;AAAA;AAGF,MAAM,MAAA,aAAA,GAAgB,MAAM,KAAM,CAAA,MAAA;AAAA,QAChC,CAAC,IAAS,KAAA,IAAA,CAAK,IAAS,KAAA;AAAA,OAC1B;AAEA,MAAM,MAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,GAAA;AAAA,QAC1B,aACG,CAAA,MAAA,CAAO,CAAC,CAAA,KAAM,CAAC,MAAU,IAAA,MAAA,EAAQ,QAAS,CAAA,CAAA,CAAE,IAAI,CAAC,CACjD,CAAA,GAAA,CAAI,OAAO,CAAM,KAAA;AAChB,UAAM,MAAA,IAAA,GAAO,MAAM,CAAA,CAAE,OAAQ,EAAA;AAC7B,UAAO,OAAA,MAAM,sBAAsB,IAAI,CAAA;AAAA,SACxC;AAAA,OACL;AAEA,MAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,QAAM,MAAA,YAAA,GAAe,IAAI,YAAa,EAAA;AACtC,QAAA,KAAA,MAAW,QAAQ,QAAW,GAAA,KAAA,GAAQ,CAAC,KAAM,CAAA,CAAC,CAAC,CAAG,EAAA;AAChD,UAAA,IAAI,IAAM,EAAA;AACR,YAAa,YAAA,CAAA,KAAA,CAAM,IAAI,IAAI,CAAA;AAAA;AAC7B;AAGF,QAAA,gBAAA,GAAmB,aAAa,KAAK,CAAA;AACrC,QAAA,IAAI,aAAa,OAAS,EAAA;AACxB,UAAa,YAAA,CAAA,OAAA,CAAQ,QAAQ,YAAa,CAAA,KAAA;AAAA;AAC5C;AACF,KACF;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,IAAK,CAAA,QAAA;AAAA,MAAL;AAAA,QACC,SAAW,EAAA,aAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,UAAA;AAAA,QACA,eAAe,EAAA,UAAA;AAAA,QAEf,QAAA,kBAAA,GAAA,CAAC,sBAAmB,KAAM,EAAA,MAAA,EACxB,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,CACF,EAAA;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

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

@@ -0,0 +1,17 @@
+"use client"
+/* */
+const fileDropZone = "flow--file-drop-zone";
+const disabled = "flow--file-drop-zone--disabled";
+const icon = "flow--file-drop-zone--icon";
+const heading = "flow--file-drop-zone--heading";
+const text = "flow--file-drop-zone--text";
+const styles = {
+	fileDropZone: fileDropZone,
+	disabled: disabled,
+	icon: icon,
+	heading: heading,
+	text: text
+};
+
+export { styles as default, disabled, fileDropZone, heading, icon, text };
+//# sourceMappingURL=FileDropZone.module.scss.mjs.map

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

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

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

@@ -0,0 +1,81 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import formFieldStyles from '../FormField/FormField.module.scss.mjs';
+import { useFormValidation } from '@react-aria/form';
+import { useFormValidationState } from '@react-stately/form';
+import { InputContext, FieldErrorContext } from 'react-aria-components';
+import { FileInput } from './components/FileInput.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { addAwaitedArrayBuffer } from '../../../../core/src/file.mjs';
+
+const FileField = flowComponent("FileField", (props) => {
+  const {
+    children,
+    ref,
+    isRequired,
+    isInvalid,
+    isDisabled,
+    validationBehavior,
+    onChange,
+    isReadOnly,
+    ...restInputProps
+  } = props;
+  const inputRef = useObjectRef(ref);
+  const formValidationState = useFormValidationState({
+    value: void 0,
+    validationBehavior,
+    isInvalid
+  });
+  useFormValidation({ validationBehavior }, formValidationState, inputRef);
+  const inputProps = {
+    ...restInputProps,
+    ref: inputRef,
+    "aria-invalid": formValidationState.displayValidation.isInvalid,
+    value: void 0
+  };
+  const propsContext = {
+    Label: {
+      className: formFieldStyles.label,
+      optional: !props.isRequired
+    },
+    FieldDescription: {
+      className: formFieldStyles.fieldDescription
+    },
+    FieldError: {
+      className: formFieldStyles.customFieldError
+    }
+  };
+  const handleOnChange = (fileList) => {
+    if (fileList && onChange) {
+      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(
+        () => onChange(fileList)
+      );
+    }
+  };
+  return /* @__PURE__ */ jsx(InputContext.Provider, { value: inputProps, children: /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-readonly": isReadOnly,
+      "data-required": !!isRequired || void 0,
+      "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
+      className: formFieldStyles.formField,
+      children: /* @__PURE__ */ jsx(
+        FileInput,
+        {
+          ref,
+          isReadOnly,
+          onChange: isReadOnly ? void 0 : handleOnChange,
+          isDisabled,
+          children
+        }
+      )
+    }
+  ) }) }) });
+});
+
+export { FileField, FileField as default };
+//# sourceMappingURL=FileField.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.mjs","sources":["../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport { useFormValidation } from \"@react-aria/form\";\nimport { useFormValidationState } from \"@react-stately/form\";\nimport type { PropsWithChildren } from \"react\";\nimport type * as Aria from \"react-aria-components\";\nimport { FieldErrorContext, InputContext } from \"react-aria-components\";\nimport type { FileInputOnChangeHandler } from \"@/components/FileField/components/FileInput\";\nimport { FileInput } from \"@/components/FileField/components/FileInput\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\n\nexport interface FileFieldProps\n  extends PropsWithChildren,\n    FlowComponentProps<HTMLInputElement>,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<\n      Aria.TextFieldProps,\n      \"isRequired\" | \"isInvalid\" | \"validationBehavior\" | \"isDisabled\"\n    > {\n  /** Handler that is called when the file input changes. */\n  onChange?: FileInputOnChangeHandler;\n  /** Whether the component is read only. */\n  isReadOnly?: boolean;\n}\n\n/** @flr-generate all */\nexport const FileField = flowComponent(\"FileField\", (props) => {\n  const {\n    children,\n    ref,\n    isRequired,\n    isInvalid,\n    isDisabled,\n    validationBehavior,\n    onChange,\n    isReadOnly,\n    ...restInputProps\n  } = props;\n  const inputRef = useObjectRef(ref);\n\n  const formValidationState = useFormValidationState({\n    value: undefined,\n    validationBehavior,\n    isInvalid,\n  });\n\n  useFormValidation({ validationBehavior }, formValidationState, inputRef);\n\n  const inputProps = {\n    ...restInputProps,\n    ref: inputRef,\n    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const propsContext: PropsContext = {\n    Label: {\n      className: formFieldStyles.label,\n      optional: !props.isRequired,\n    },\n    FieldDescription: {\n      className: formFieldStyles.fieldDescription,\n    },\n    FieldError: {\n      className: formFieldStyles.customFieldError,\n    },\n  };\n\n  const handleOnChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(() =>\n        onChange(fileList),\n      );\n    }\n  };\n\n  return (\n    <InputContext.Provider value={inputProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <PropsContextProvider props={propsContext}>\n          <div\n            data-readonly={isReadOnly}\n            data-required={!!isRequired || undefined}\n            data-invalid={\n              formValidationState.displayValidation.isInvalid || undefined\n            }\n            className={formFieldStyles.formField}\n          >\n            <FileInput\n              ref={ref}\n              isReadOnly={isReadOnly}\n              onChange={isReadOnly ? undefined : handleOnChange}\n              isDisabled={isDisabled}\n            >\n              {children}\n            </FileInput>\n          </div>\n        </PropsContextProvider>\n      </FieldErrorContext.Provider>\n    </InputContext.Provider>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BO,MAAM,SAAY,GAAA,aAAA,CAAc,WAAa,EAAA,CAAC,KAAU,KAAA;AAC7D,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AACJ,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAuB,CAAA;AAAA,IACjD,KAAO,EAAA,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAsB,EAAA,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,GAAK,EAAA,QAAA;AAAA,IACL,cAAA,EAAgB,oBAAoB,iBAAkB,CAAA,SAAA;AAAA,IACtD,KAAO,EAAA;AAAA,GACT;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,KAAO,EAAA;AAAA,MACL,WAAW,eAAgB,CAAA,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAM,CAAA;AAAA,KACnB;AAAA,IACA,gBAAkB,EAAA;AAAA,MAChB,WAAW,eAAgB,CAAA;AAAA,KAC7B;AAAA,IACA,UAAY,EAAA;AAAA,MACV,WAAW,eAAgB,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,cAAA,GAA2C,CAAC,QAAa,KAAA;AAC7D,IAAA,IAAI,YAAY,QAAU,EAAA;AACxB,MAAQ,OAAA,CAAA,GAAA,CAAI,MAAM,IAAK,CAAA,QAAQ,EAAE,GAAI,CAAA,qBAAqB,CAAC,CAAE,CAAA,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA;AACF,GACF;AAEA,EAAA,2BACG,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,YAC5B,QAAC,kBAAA,GAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,OAAO,mBAAoB,CAAA,iBAAA,EACrD,QAAC,kBAAA,GAAA,CAAA,oBAAA,EAAA,EAAqB,OAAO,YAC3B,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,eAAe,EAAA,UAAA;AAAA,MACf,eAAA,EAAe,CAAC,CAAC,UAAc,IAAA,MAAA;AAAA,MAC/B,cAAA,EACE,mBAAoB,CAAA,iBAAA,CAAkB,SAAa,IAAA,MAAA;AAAA,MAErD,WAAW,eAAgB,CAAA,SAAA;AAAA,MAE3B,QAAA,kBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,UAAA;AAAA,UACA,QAAA,EAAU,aAAa,MAAY,GAAA,cAAA;AAAA,UACnC,UAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF,EACF,GACF,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,47 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import * as Aria from 'react-aria-components';
+import { useObjectRef } from '@react-aria/utils';
+import '../../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../../lib/propsContext/components/PropsContextProvider.mjs';
+import styles from './FileInput.module.scss.mjs';
+
+const FileInput = (props) => {
+  const { children, isDisabled, onChange, isReadOnly, ref } = props;
+  const inputRef = useObjectRef(ref);
+  const handlePress = () => {
+    if (inputRef.current?.value) {
+      inputRef.current.value = "";
+      onChange?.(null);
+    }
+    inputRef.current?.click();
+  };
+  const handleChange = (event) => {
+    onChange?.(event.target.files);
+  };
+  const propsContext = {
+    Button: {
+      onPress: handlePress,
+      className: styles.trigger,
+      isDisabled,
+      isReadOnly
+    }
+  };
+  return /* @__PURE__ */ jsxs(PropsContextProvider, { props: propsContext, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Aria.Input,
+      {
+        style: { display: "none" },
+        type: "file",
+        ref: inputRef,
+        onChange: handleChange
+      }
+    )
+  ] });
+};
+
+export { FileInput };
+//# sourceMappingURL=FileInput.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.mjs","sources":["../../../../../../../src/components/FileField/components/FileInput.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport { type ChangeEvent } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./FileInput.module.scss\";\n\nexport type FileInputOnChangeHandler = (files: FileList | null) => void;\n\n/** @internal */\nexport interface FileInputProps extends PropsWithChildren {\n  onChange?: FileInputOnChangeHandler;\n  isDisabled?: boolean;\n  ref?: Ref<HTMLInputElement>;\n  isReadOnly?: boolean;\n}\n\n/** @internal */\nexport const FileInput: FC<FileInputProps> = (props) => {\n  const { children, isDisabled, onChange, isReadOnly, ref } = props;\n  const inputRef = useObjectRef(ref);\n\n  const handlePress = () => {\n    if (inputRef.current?.value) {\n      inputRef.current.value = \"\";\n      onChange?.(null);\n    }\n    inputRef.current?.click();\n  };\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.files);\n  };\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: handlePress,\n      className: styles.trigger,\n      isDisabled,\n      isReadOnly,\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        style={{ display: \"none\" }}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmBa,MAAA,SAAA,GAAgC,CAAC,KAAU,KAAA;AACtD,EAAA,MAAM,EAAE,QAAU,EAAA,UAAA,EAAY,QAAU,EAAA,UAAA,EAAY,KAAQ,GAAA,KAAA;AAC5D,EAAM,MAAA,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAI,IAAA,QAAA,CAAS,SAAS,KAAO,EAAA;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA;AAEjB,IAAA,QAAA,CAAS,SAAS,KAAM,EAAA;AAAA,GAC1B;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAW,QAAA,GAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,GAC/B;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,MAAQ,EAAA;AAAA,MACN,OAAS,EAAA,WAAA;AAAA,MACT,WAAW,MAAO,CAAA,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,IAAA,CAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAK,CAAA,KAAA;AAAA,MAAL;AAAA,QACC,KAAA,EAAO,EAAE,OAAA,EAAS,MAAO,EAAA;AAAA,QACzB,IAAK,EAAA,MAAA;AAAA,QACL,GAAK,EAAA,QAAA;AAAA,QACL,QAAU,EAAA;AAAA;AAAA;AACZ,GACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,51 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './Flex.module.scss.mjs';
+
+const Flex = (props) => {
+  const {
+    children,
+    className,
+    direction = "row",
+    align,
+    justify,
+    gap,
+    columnGap,
+    rowGap,
+    grow,
+    wrap = "nowrap",
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    elementType = "div"
+  } = props;
+  const rootClassName = clsx(styles.flex, className);
+  const Element = elementType;
+  return /* @__PURE__ */ jsx(
+    Element,
+    {
+      className: rootClassName,
+      style: {
+        flexDirection: direction,
+        alignItems: align === "end" ? "flex-end" : align === "start" ? "flex-start" : align,
+        justifyContent: justify === "end" ? "flex-end" : justify === "start" ? "flex-start" : justify,
+        columnGap: columnGap ? `var(--size-px--${columnGap})` : gap ? `var(--size-px--${gap})` : void 0,
+        rowGap: rowGap ? `var(--size-px--${rowGap})` : gap ? `var(--size-px--${gap})` : void 0,
+        flexGrow: grow ? 1 : void 0,
+        flexWrap: wrap,
+        paddingTop: paddingTop ? `var(--size-px--${paddingTop})` : padding ? `var(--size-px--${padding})` : void 0,
+        paddingBottom: paddingBottom ? `var(--size-px--${paddingBottom})` : padding ? `var(--size-px--${padding})` : void 0,
+        paddingLeft: paddingLeft ? `var(--size-px--${paddingLeft})` : padding ? `var(--size-px--${padding})` : void 0,
+        paddingRight: paddingRight ? `var(--size-px--${paddingRight})` : padding ? `var(--size-px--${padding})` : void 0
+      },
+      children
+    }
+  );
+};
+
+export { Flex, Flex as default };
+//# sourceMappingURL=Flex.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.mjs","sources":["../../../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import type { CSSProperties, FC, PropsWithChildren } from \"react\";\nimport type {\n  PropsWithClassName,\n  PropsWithElementType,\n} from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport styles from \"./Flex.module.scss\";\n\nexport interface FlexProps\n  extends PropsWithChildren,\n    PropsWithClassName,\n    PropsWithElementType<\n      | \"div\"\n      | \"aside\"\n      | \"ul\"\n      | \"li\"\n      | \"ol\"\n      | \"section\"\n      | \"main\"\n      | \"span\"\n      | \"p\"\n      | \"footer\"\n      | \"header\"\n    > {\n  /** The flexDirection value of the element. @default \"row\" */\n  direction?: CSSProperties[\"flexDirection\"];\n  /** The alignItems value of the element. @default \"start\" */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** The justifyContent value of the element. @default \"start\" */\n  justify?: \"start\" | \"end\" | \"center\";\n  /** The gap size of the element. */\n  gap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The columnGap size of the element. */\n  columnGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The rowGap size of the element. */\n  rowGap?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** Whether the element should grow. */\n  grow?: boolean;\n  /** The flexWrap value of the element. @default \"nowrap\" */\n  wrap?: CSSProperties[\"flexWrap\"];\n  /** The padding of the element. */\n  padding?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding top of the element. */\n  paddingTop?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding bottom of the element. */\n  paddingBottom?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding left of the element. */\n  paddingLeft?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n  /** The padding right of the element. */\n  paddingRight?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n}\n\n/** @flr-generate all */\nexport const Flex: FC<FlexProps> = (props) => {\n  const {\n    children,\n    className,\n    direction = \"row\",\n    align,\n    justify,\n    gap,\n    columnGap,\n    rowGap,\n    grow,\n    wrap = \"nowrap\",\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    elementType = \"div\",\n  } = props;\n\n  const rootClassName = clsx(styles.flex, className);\n\n  const Element = elementType;\n\n  return (\n    <Element\n      className={rootClassName}\n      style={{\n        flexDirection: direction,\n        alignItems:\n          align === \"end\"\n            ? \"flex-end\"\n            : align === \"start\"\n              ? \"flex-start\"\n              : align,\n        justifyContent:\n          justify === \"end\"\n            ? \"flex-end\"\n            : justify === \"start\"\n              ? \"flex-start\"\n              : justify,\n\n        columnGap: columnGap\n          ? `var(--size-px--${columnGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        rowGap: rowGap\n          ? `var(--size-px--${rowGap})`\n          : gap\n            ? `var(--size-px--${gap})`\n            : undefined,\n        flexGrow: grow ? 1 : undefined,\n        flexWrap: wrap,\n        paddingTop: paddingTop\n          ? `var(--size-px--${paddingTop})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingBottom: paddingBottom\n          ? `var(--size-px--${paddingBottom})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingLeft: paddingLeft\n          ? `var(--size-px--${paddingLeft})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n        paddingRight: paddingRight\n          ? `var(--size-px--${paddingRight})`\n          : padding\n            ? `var(--size-px--${padding})`\n            : undefined,\n      }}\n    >\n      {children}\n    </Element>\n  );\n};\nexport default Flex;\n"],"names":[],"mappings":";;;;AAqDa,MAAA,IAAA,GAAsB,CAAC,KAAU,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAc,GAAA;AAAA,GACZ,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA,CAAK,MAAO,CAAA,IAAA,EAAM,SAAS,CAAA;AAEjD,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,aAAA;AAAA,MACX,KAAO,EAAA;AAAA,QACL,aAAe,EAAA,SAAA;AAAA,QACf,YACE,KAAU,KAAA,KAAA,GACN,UACA,GAAA,KAAA,KAAU,UACR,YACA,GAAA,KAAA;AAAA,QACR,gBACE,OAAY,KAAA,KAAA,GACR,UACA,GAAA,OAAA,KAAY,UACV,YACA,GAAA,OAAA;AAAA,QAER,SAAA,EAAW,YACP,CAAkB,eAAA,EAAA,SAAS,MAC3B,GACE,GAAA,CAAA,eAAA,EAAkB,GAAG,CACrB,CAAA,CAAA,GAAA,MAAA;AAAA,QACN,MAAA,EAAQ,SACJ,CAAkB,eAAA,EAAA,MAAM,MACxB,GACE,GAAA,CAAA,eAAA,EAAkB,GAAG,CACrB,CAAA,CAAA,GAAA,MAAA;AAAA,QACN,QAAA,EAAU,OAAO,CAAI,GAAA,MAAA;AAAA,QACrB,QAAU,EAAA,IAAA;AAAA,QACV,UAAA,EAAY,aACR,CAAkB,eAAA,EAAA,UAAU,MAC5B,OACE,GAAA,CAAA,eAAA,EAAkB,OAAO,CACzB,CAAA,CAAA,GAAA,MAAA;AAAA,QACN,aAAA,EAAe,gBACX,CAAkB,eAAA,EAAA,aAAa,MAC/B,OACE,GAAA,CAAA,eAAA,EAAkB,OAAO,CACzB,CAAA,CAAA,GAAA,MAAA;AAAA,QACN,WAAA,EAAa,cACT,CAAkB,eAAA,EAAA,WAAW,MAC7B,OACE,GAAA,CAAA,eAAA,EAAkB,OAAO,CACzB,CAAA,CAAA,GAAA,MAAA;AAAA,QACN,YAAA,EAAc,eACV,CAAkB,eAAA,EAAA,YAAY,MAC9B,OACE,GAAA,CAAA,eAAA,EAAkB,OAAO,CACzB,CAAA,CAAA,GAAA;AAAA,OACR;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;;;;"}

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

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

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

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

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

@@ -0,0 +1,25 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { SectionHeader } from '../Section/components/SectionHeader/SectionHeader.mjs';
+
+const Header = flowComponent("Header", (props) => {
+  const {
+    children,
+    ref,
+    elementType = "header",
+    renderSectionHeader,
+    className,
+    ...rest
+  } = props;
+  if (renderSectionHeader) {
+    return /* @__PURE__ */ jsx(SectionHeader, { ref, className, children });
+  }
+  const Element = elementType;
+  return /* @__PURE__ */ jsx(Element, { ...rest, className, ref, children });
+});
+
+export { Header, Header as default };
+//# sourceMappingURL=Header.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.mjs","sources":["../../../../../../src/components/Header/Header.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport React from \"react\";\nimport type { PropsWithElementType } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport SectionHeader from \"@/components/Section/components/SectionHeader/SectionHeader\";\n\nexport interface HeaderProps\n  extends PropsWithChildren,\n    PropsWithElementType<\"div\" | \"header\" | \"span\">,\n    FlowComponentProps<HTMLDivElement | HTMLHeadElement | HTMLSpanElement> {\n  /** @internal */\n  renderSectionHeader?: boolean;\n}\n\n/** @flr-generate all */\nexport const Header = flowComponent(\"Header\", (props) => {\n  const {\n    children,\n    ref,\n    elementType = \"header\",\n    renderSectionHeader,\n    className,\n    ...rest\n  } = props;\n\n  if (renderSectionHeader) {\n    return (\n      <SectionHeader ref={ref as never} className={className}>\n        {children}\n      </SectionHeader>\n    );\n  }\n\n  const Element = elementType;\n\n  return (\n    <Element {...rest} className={className} ref={ref as never}>\n      {children}\n    </Element>\n  );\n});\n\nexport default Header;\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,MAAS,GAAA,aAAA,CAAc,QAAU,EAAA,CAAC,KAAU,KAAA;AACvD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,GAAA;AAAA,IACA,WAAc,GAAA,QAAA;AAAA,IACd,mBAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,IAAI,mBAAqB,EAAA;AACvB,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA,EAAc,GAAmB,EAAA,SAAA,EAC/B,QACH,EAAA,CAAA;AAAA;AAIJ,EAAA,MAAM,OAAU,GAAA,WAAA;AAEhB,EAAA,2BACG,OAAS,EAAA,EAAA,GAAG,IAAM,EAAA,SAAA,EAAsB,KACtC,QACH,EAAA,CAAA;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,32 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { dynamic } from '../../lib/propsContext/dynamicProps/dynamic.mjs';
+import '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import clsx from 'clsx';
+import styles from './HeaderNavigation.module.scss.mjs';
+import { Text } from '../Text/Text.mjs';
+
+const HeaderNavigation = (props) => {
+  const { children, className, color = "primary", ...rest } = props;
+  const rootClassName = clsx(styles.headerNavigation, styles[color], className);
+  const propsContext = {
+    Link: {
+      wrapWith: /* @__PURE__ */ jsx("li", {}),
+      className: styles.link,
+      unstyled: true,
+      children: dynamic((props2) => /* @__PURE__ */ jsx(Text, { emulateBoldWidth: true, children: props2.children }))
+    },
+    Button: {
+      className: styles.button,
+      color,
+      variant: "plain",
+      wrapWith: /* @__PURE__ */ jsx("li", {})
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { className: rootClassName, role: "navigation", ...rest, children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }) }) });
+};
+
+export { HeaderNavigation, HeaderNavigation as default };
+//# sourceMappingURL=HeaderNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderNavigation.mjs","sources":["../../../../../../src/components/HeaderNavigation/HeaderNavigation.tsx"],"sourcesContent":["import type { ComponentProps, FC, PropsWithChildren } from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport clsx from \"clsx\";\nimport styles from \"./HeaderNavigation.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { Text } from \"@/components/Text\";\n\nexport interface HeaderNavigationProps\n  extends PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName {\n  /** The color of the header navigation. @default \"primary\" */\n  color?: \"primary\" | \"dark\" | \"light\";\n}\n\n/** @flr-generate all */\nexport const HeaderNavigation: FC<HeaderNavigationProps> = (props) => {\n  const { children, className, color = \"primary\", ...rest } = props;\n\n  const rootClassName = clsx(styles.headerNavigation, styles[color], className);\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((props) => (\n        <Text emulateBoldWidth>{props.children}</Text>\n      )),\n    },\n    Button: {\n      className: styles.button,\n      color,\n      variant: \"plain\",\n      wrapWith: <li />,\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest}>\n      <ul>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n    </nav>\n  );\n};\n\nexport default HeaderNavigation;\n"],"names":["props"],"mappings":";;;;;;;;AAmBa,MAAA,gBAAA,GAA8C,CAAC,KAAU,KAAA;AACpE,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,QAAQ,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAE5D,EAAA,MAAM,gBAAgB,IAAK,CAAA,MAAA,CAAO,kBAAkB,MAAO,CAAA,KAAK,GAAG,SAAS,CAAA;AAE5E,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,QAAA,sBAAW,IAAG,EAAA,EAAA,CAAA;AAAA,MACd,WAAW,MAAO,CAAA,IAAA;AAAA,MAClB,QAAU,EAAA,IAAA;AAAA,MACV,QAAA,EAAU,OAAQ,CAAA,CAACA,MACjB,qBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,gBAAA,EAAgB,IAAE,EAAA,QAAA,EAAAA,MAAM,CAAA,QAAA,EAAS,CACxC;AAAA,KACH;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,WAAW,MAAO,CAAA,MAAA;AAAA,MAClB,KAAA;AAAA,MACA,OAAS,EAAA,OAAA;AAAA,MACT,QAAA,sBAAW,IAAG,EAAA,EAAA;AAAA;AAChB,GACF;AAEA,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,aAAe,EAAA,IAAA,EAAK,cAAc,GAAG,IAAA,EACnD,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,oBAAqB,EAAA,EAAA,KAAA,EAAO,YAC1B,EAAA,QAAA,EACH,GACF,CACF,EAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,64 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import styles from './Heading.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 * as Aria from 'react-aria-components';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+
+const Heading = flowComponent("Heading", (props) => {
+  const {
+    children,
+    className,
+    level = 2,
+    color = "primary",
+    wrap,
+    size,
+    ref,
+    ...rest
+  } = props;
+  const rootClassName = clsx(
+    styles.heading,
+    size && styles[size],
+    styles[color],
+    wrap && styles[`wrap-${wrap}`],
+    className
+  );
+  const propsContext = {
+    Icon: {
+      "aria-hidden": true,
+      className: styles.icon
+    },
+    AlertBadge: {
+      tunnelId: "headingContent"
+    },
+    Badge: {
+      tunnelId: "headingContent"
+    },
+    ContextualHelpTrigger: {
+      tunnelId: "headingContent",
+      Button: {
+        tunnelId: null
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
+    Aria.Heading,
+    {
+      level,
+      className: rootClassName,
+      ...rest,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.headingText, children }),
+        /* @__PURE__ */ jsx("span", { className: styles.headingContent, children: /* @__PURE__ */ jsx(TunnelExit, { id: "headingContent" }) })
+      ]
+    }
+  ) }) });
+});
+
+export { Heading, Heading as default };
+//# sourceMappingURL=Heading.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.mjs","sources":["../../../../../../src/components/Heading/Heading.tsx"],"sourcesContent":["export * from \"./view\";\nimport styles from \"./Heading.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 * as Aria from \"react-aria-components\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\n\nexport interface HeadingProps extends Aria.HeadingProps, FlowComponentProps {\n  /** The font size of the heading. */\n  size?: \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\";\n  /** The color of the heading. @default \"primary\" */\n  color?: \"primary\" | \"dark\" | \"light\";\n  /** The text-wrap property of the text. @default undefined */\n  wrap?: \"wrap\" | \"balance\";\n}\n\n/** @flr-generate all */\nexport const Heading = flowComponent(\"Heading\", (props) => {\n  const {\n    children,\n    className,\n    level = 2,\n    color = \"primary\",\n    wrap,\n    size,\n    ref,\n    ...rest\n  } = props;\n\n  const rootClassName = clsx(\n    styles.heading,\n    size && styles[size],\n    styles[color],\n    wrap && styles[`wrap-${wrap}`],\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      \"aria-hidden\": true,\n      className: styles.icon,\n    },\n    AlertBadge: {\n      tunnelId: \"headingContent\",\n    },\n    Badge: {\n      tunnelId: \"headingContent\",\n    },\n    ContextualHelpTrigger: {\n      tunnelId: \"headingContent\",\n      Button: {\n        tunnelId: null,\n      },\n    },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      <TunnelProvider>\n        <Aria.Heading\n          level={level}\n          className={rootClassName}\n          {...rest}\n          ref={ref}\n        >\n          <span className={styles.headingText}>{children}</span>\n          <span className={styles.headingContent}>\n            <TunnelExit id=\"headingContent\" />\n          </span>\n        </Aria.Heading>\n      </TunnelProvider>\n    </PropsContextProvider>\n  );\n});\n\nexport default Heading;\n"],"names":[],"mappings":";;;;;;;;;AAoBO,MAAM,OAAU,GAAA,aAAA,CAAc,SAAW,EAAA,CAAC,KAAU,KAAA;AACzD,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAQ,GAAA,CAAA;AAAA,IACR,KAAQ,GAAA,SAAA;AAAA,IACR,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,OAAA;AAAA,IACP,IAAA,IAAQ,OAAO,IAAI,CAAA;AAAA,IACnB,OAAO,KAAK,CAAA;AAAA,IACZ,IAAQ,IAAA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,IAC7B;AAAA,GACF;AAEA,EAAA,MAAM,YAA6B,GAAA;AAAA,IACjC,IAAM,EAAA;AAAA,MACJ,aAAe,EAAA,IAAA;AAAA,MACf,WAAW,MAAO,CAAA;AAAA,KACpB;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,KAAO,EAAA;AAAA,MACL,QAAU,EAAA;AAAA,KACZ;AAAA,IACA,qBAAuB,EAAA;AAAA,MACrB,QAAU,EAAA,gBAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA;AAAA;AACZ;AACF,GACF;AAEA,EAAA,uBACG,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,YAAA,EAC3B,8BAAC,cACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,IAAK,CAAA,OAAA;AAAA,IAAL;AAAA,MACC,KAAA;AAAA,MACA,SAAW,EAAA,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,WAAA,EAAc,QAAS,EAAA,CAAA;AAAA,wBAC/C,GAAA,CAAC,UAAK,SAAW,EAAA,MAAA,CAAO,gBACtB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EAAW,EAAG,EAAA,gBAAA,EAAiB,CAClC,EAAA;AAAA;AAAA;AAAA,KAEJ,CACF,EAAA,CAAA;AAEJ,CAAC;;;;"}