@mittwald/flow-react-components 0.2.0-experimental.776 → 1.0.1

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

@@ -1,18 +1,25 @@
 "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 }) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { ColumnLayout } from "../ColumnLayout/ColumnLayout.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/FileCardList/FileCardList.tsx
+/** @flr-generate all */
+var FileCardList = flowComponent("FileCardList", (props) => {
+	const { className, ref, children, ...rest } = props;
+	return /* @__PURE__ */ jsx(PropsContextProvider, {
+		props: { FileCard: { elementType: "li" } },
+		children: /* @__PURE__ */ jsx(ColumnLayout, {
+			ref,
+			elementType: "ul",
+			className,
+			...rest,
+			children
+		})
+	});
 });
+//#endregion
+export { FileCardList, FileCardList as default };
 
-export { FileCardList };
-//# sourceMappingURL=FileCardList.mjs.map
+//# sourceMappingURL=FileCardList.mjs.map

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

@@ -1 +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,YAAA,GAAe,aAAA,CAAc,cAAA,EAAgB,CAAC,KAAA,KAAU;AACnE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,QAAA,EAAU,EAAE,WAAA,EAAa,IAAA;AAAK,GAChC;AAEA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,GAAA,EAAU,WAAA,EAAY,IAAA,EAAK,SAAA,EAAuB,GAAG,IAAA,EAChE,UACH,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileCardList.mjs","names":[],"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"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,cAAc,iBAAiB,UAAU;CACnE,MAAM,EAAE,WAAW,KAAK,UAAU,GAAG,SAAS;CAM9C,OACE,oBAAC,sBAAD;EAAsB,OAAO,EAJ7B,UAAU,EAAE,aAAa,KAAK,EAID;EAC3B,UAAA,oBAAC,cAAD;GAAmB;GAAK,aAAY;GAAgB;GAAW,GAAI;GAChE;EACW,CAAA;CACM,CAAA;AAE1B,CAAC"}

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

@@ -1,103 +1,71 @@
 "use client"
 /* */
-import { jsxs, 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';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { IllustratedMessage } from "../IllustratedMessage/IllustratedMessage.mjs";
+import FileDropZone_module_default from "./FileDropZone.module.mjs";
+import clsx from "clsx";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/FileDropZone/FileDropZone.tsx
+/** @flr-generate all */
+var FileDropZone = flowComponent("FileDropZone", (props) => {
+	const { multiple, accept, className, onChange: onChangeDropZone, children, name, isDisabled, isReadOnly } = props;
+	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileDropZone");
+	const fileFieldRef = useRef(null);
+	const rootClassName = clsx(FileDropZone_module_default.fileDropZone, isDisabled && FileDropZone_module_default.disabled, className);
+	const propsContext = {
+		...fieldPropsContext,
+		IllustratedMessage: {
+			FileField: {
+				name,
+				onChange: onChangeDropZone,
+				ref: fileFieldRef,
+				accept,
+				multiple,
+				Button: {
+					variant: "outline",
+					color: "dark"
+				},
+				isDisabled,
+				isReadOnly
+			},
+			Heading: { className: FileDropZone_module_default.heading },
+			Icon: { className: FileDropZone_module_default.icon },
+			Text: { className: FileDropZone_module_default.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) => await f.getFile()));
+		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__ */ jsxs("div", {
+		...fieldProps,
+		children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
+			props: propsContext,
+			children: /* @__PURE__ */ jsx(Aria.DropZone, {
+				className: rootClassName,
+				onDrop: onDropHandler,
+				isDisabled,
+				"data-readonly": isReadOnly,
+				children: /* @__PURE__ */ jsx(IllustratedMessage, {
+					color: "dark",
+					children
+				})
+			})
+		}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+	});
+});
+//#endregion
+export { FileDropZone, FileDropZone as default };
 
-const FileDropZone = flowComponent(
-  "FileDropZone",
-  (props) => {
-    const {
-      multiple,
-      accept,
-      className,
-      onChange: onChangeDropZone,
-      children,
-      name,
-      isDisabled,
-      isReadOnly
-    } = props;
-    const {
-      FieldErrorView,
-      FieldErrorCaptureContext,
-      fieldProps,
-      fieldPropsContext
-    } = useFieldComponent(props);
-    const fileFieldRef = useRef(null);
-    const rootClassName = clsx(
-      styles.fileDropZone,
-      isDisabled && styles.disabled,
-      className
-    );
-    const propsContext = {
-      ...fieldPropsContext,
-      IllustratedMessage: {
-        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__ */ jsxs("div", { ...fieldProps, children: [
-      /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children: /* @__PURE__ */ jsx(
-        Aria.DropZone,
-        {
-          className: rootClassName,
-          onDrop: onDropHandler,
-          isDisabled,
-          "data-readonly": isReadOnly,
-          children: /* @__PURE__ */ jsx(IllustratedMessage, { color: "dark", children })
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx(FieldErrorView, {})
-    ] });
-  }
-);
-
-export { FileDropZone };
-//# sourceMappingURL=FileDropZone.mjs.map
+//# sourceMappingURL=FileDropZone.mjs.map

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

@@ -1 +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\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends\n    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 {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(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      ...fieldPropsContext,\n      IllustratedMessage: {\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\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      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FileDropZone.mjs","names":[],"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 { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileDropZoneProps\n  extends\n    PropsWithClassName,\n    FlowComponentProps<FocusableElement>,\n    PropsWithChildren,\n    Pick<Aria.InputProps, \"accept\" | \"multiple\" | \"name\">,\n    Pick<Aria.DropZoneProps, \"isDisabled\"> {\n  /** Called with the dropped or selected files whenever the selection changes. */\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 {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent(props, \"FileDropZone\");\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      ...fieldPropsContext,\n      IllustratedMessage: {\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\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) => await f.getFile()),\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      <div {...fieldProps}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={propsContext}>\n            <Aria.DropZone\n              className={rootClassName}\n              onDrop={onDropHandler}\n              isDisabled={isDisabled}\n              data-readonly={isReadOnly}\n            >\n              <IllustratedMessage color=\"dark\">{children}</IllustratedMessage>\n            </Aria.DropZone>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </div>\n    );\n  },\n);\n\nexport default FileDropZone;\n"],"mappings":";;;;;;;;;;;;;AA8BA,IAAa,eAAsC,cACjD,iBACC,UAAU;CACT,MAAM,EACJ,UACA,QACA,WACA,UAAU,kBACV,UACA,MACA,YACA,eACE;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,cAAc;CAE3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,gBAAgB,KACpB,4BAAO,cACP,cAAc,4BAAO,UACrB,SACF;CAEA,MAAM,eAA6B;EACjC,GAAG;EACH,oBAAoB;GAClB,WAAW;IACT;IACA,UAAU;IACV,KAAK;IACG;IACE;IACV,QAAQ;KAAE,SAAS;KAAW,OAAO;IAAO;IAC5C;IACA;GACF;GACA,SAAS,EACP,WAAW,4BAAO,QACpB;GACA,MAAM,EAAE,WAAW,4BAAO,KAAK;GAC/B,MAAM,EAAE,WAAW,4BAAO,KAAK;EACjC;CACF;CAEA,MAAM,gBAAgB,OAAO,UAAqB;EAChD,IAAI,YACF;EAGF,MAAM,gBAAgB,MAAM,MAAM,QAC/B,SAAS,KAAK,SAAS,MAC1B;EAEA,MAAM,QAAQ,MAAM,QAAQ,IAC1B,cACG,QAAQ,MAAM,CAAC,UAAU,QAAQ,SAAS,EAAE,IAAI,CAAC,CAAC,CAClD,IAAI,OAAO,MAAM,MAAM,EAAE,QAAQ,CAAC,CACvC;EAEA,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,eAAe,IAAI,aAAa;GACtC,KAAK,MAAM,QAAQ,WAAW,QAAQ,CAAC,MAAM,EAAE,GAC7C,IAAI,MACF,aAAa,MAAM,IAAI,IAAI;GAI/B,mBAAmB,aAAa,KAAK;GACrC,IAAI,aAAa,SACf,aAAa,QAAQ,QAAQ,aAAa;EAE9C;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAT,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,OAAO;GAC3B,UAAA,oBAAC,KAAK,UAAN;IACE,WAAW;IACX,QAAQ;IACI;IACZ,iBAAe;IAEf,UAAA,oBAAC,oBAAD;KAAoB,OAAM;KAAQ;IAA6B,CAAA;GAClD,CAAA;EACK,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACd;;AAET,CACF"}

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

@@ -0,0 +1,19 @@
+"use client"
+/* */
+//#region src/components/FileDropZone/FileDropZone.module.scss
+var fileDropZone = "flow--file-drop-zone";
+var disabled = "flow--file-drop-zone--disabled";
+var icon = "flow--file-drop-zone--icon";
+var heading = "flow--file-drop-zone--heading";
+var text = "flow--file-drop-zone--text";
+var FileDropZone_module_default = {
+	fileDropZone,
+	disabled,
+	icon,
+	heading,
+	text
+};
+//#endregion
+export { FileDropZone_module_default as default, disabled, fileDropZone, heading, icon, text };
+
+//# sourceMappingURL=FileDropZone.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.module.mjs","names":[],"sources":["../../../../../../../src/components/FileDropZone/FileDropZone.module.scss"],"sourcesContent":[".fileDropZone {\n  border-style: var(--file-drop-zone--border-style--default);\n  border-width: var(--file-drop-zone--border-width);\n  border-color: var(--file-drop-zone--border-color--default);\n  background-color: var(--file-drop-zone--background-color--default);\n  border-radius: var(--file-drop-zone--corner-radius);\n  padding: var(--file-drop-zone--padding);\n  transition-property: background-color, border-color;\n  transition-duration: var(--transition--duration--default);\n\n  &[data-focus-visible],\n  &[data-drop-target]:where(:not([data-readonly])) {\n    border-color: var(--file-drop-zone--border-color--target);\n    border-style: var(--file-drop-zone--border-style--target);\n  }\n\n  &[data-drop-target]:where(:not([data-readonly])) {\n    background-color: var(--file-drop-zone--background-color--target);\n  }\n\n  :global(.flow--form-field) {\n    align-items: center;\n  }\n\n  &.disabled {\n    background-color: var(--file-drop-zone--background-color--disabled);\n    border-color: var(--file-drop-zone--border-color--disabled);\n\n    .icon,\n    .heading,\n    .text {\n      color: var(--file-drop-zone--content-color--disabled);\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1,77 +1,61 @@
 "use client"
 /* */
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useFormValidation } from '@react-aria/form';
-import { useFormValidationState } from '@react-stately/form';
-import { 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';
-import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
-
-const FileField = flowComponent("FileField", (props) => {
-  const {
-    children,
-    ref,
-    isRequired,
-    isInvalid,
-    isDisabled,
-    validationBehavior,
-    onChange,
-    isReadOnly,
-    ...restInputProps
-  } = props;
-  const {
-    FieldErrorView,
-    FieldErrorCaptureContext,
-    fieldProps,
-    fieldPropsContext
-  } = useFieldComponent(props);
-  const inputRef = useObjectRef(ref);
-  const formValidationState = useFormValidationState({
-    value: void 0,
-    validationBehavior,
-    isInvalid
-  });
-  useFormValidation({ validationBehavior }, formValidationState, inputRef);
-  const inputProps = {
-    ...restInputProps,
-    "aria-invalid": formValidationState.displayValidation.isInvalid,
-    value: void 0
-  };
-  const handleChange = (fileList) => {
-    if (fileList && onChange) {
-      Promise.all(Array.from(fileList).map(addAwaitedArrayBuffer)).then(
-        () => onChange(fileList)
-      );
-    }
-  };
-  return /* @__PURE__ */ jsx("div", { ...fieldProps, children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, { value: formValidationState.displayValidation, children: [
-    /* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-readonly": isReadOnly,
-        "data-required": !!isRequired || void 0,
-        "data-invalid": formValidationState.displayValidation.isInvalid || void 0,
-        children: /* @__PURE__ */ jsx(
-          FileInput,
-          {
-            ref: inputRef,
-            isReadOnly,
-            onChange: isReadOnly ? void 0 : handleChange,
-            isDisabled,
-            ...inputProps,
-            children
-          }
-        )
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(FieldErrorView, {})
-  ] }) });
+import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
+import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { FileInput } from "./components/FileInput.mjs";
+import FileField_module_default from "./FileField.module.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
+import { FieldErrorContext } from "react-aria-components";
+import { useFormValidation } from "@react-aria/form";
+import { useFormValidationState } from "@react-stately/form";
+//#region src/components/FileField/FileField.tsx
+/** @flr-generate all */
+var FileField = flowComponent("FileField", (props) => {
+	const { children, ref, isRequired, isInvalid, isDisabled, validationBehavior, onChange, isReadOnly, ...restInputProps } = props;
+	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "FileField");
+	const inputRef = useObjectRef(ref);
+	const formValidationState = useFormValidationState({
+		value: void 0,
+		validationBehavior,
+		isInvalid
+	});
+	useFormValidation({ validationBehavior }, formValidationState, inputRef);
+	const inputProps = {
+		...restInputProps,
+		"aria-invalid": formValidationState.displayValidation.isInvalid,
+		value: void 0
+	};
+	const handleChange = (fileList) => {
+		if (fileList && onChange) onChange(fileList);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...fieldProps,
+		className: clsx(fieldProps.className, FileField_module_default.fileField),
+		children: /* @__PURE__ */ jsxs(FieldErrorContext.Provider, {
+			value: formValidationState.displayValidation,
+			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children: /* @__PURE__ */ jsx(PropsContextProvider, {
+				props: fieldPropsContext,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-readonly": isReadOnly,
+					"data-required": !!isRequired || void 0,
+					"data-invalid": formValidationState.displayValidation.isInvalid || void 0,
+					children: /* @__PURE__ */ jsx(FileInput, {
+						ref: inputRef,
+						isReadOnly,
+						onChange: isReadOnly ? void 0 : handleChange,
+						isDisabled,
+						...inputProps,
+						children
+					})
+				})
+			}) }), /* @__PURE__ */ jsx(FieldErrorView, {})]
+		})
+	});
 });
+//#endregion
+export { FileField, FileField as default };
 
-export { FileField };
-//# sourceMappingURL=FileField.mjs.map
+//# sourceMappingURL=FileField.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileField.mjs","sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { 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 } 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 { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { addAwaitedArrayBuffer } from \"@mittwald/flow-core\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface FileFieldProps\n  extends\n    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\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props);\n\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    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: 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    <div {...fieldProps}>\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BO,MAAM,SAAA,GAAY,aAAA,CAAc,WAAA,EAAa,CAAC,KAAA,KAAU;AAC7D,EAAA,MAAM;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,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,wBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,sBAAsB,sBAAA,CAAuB;AAAA,IACjD,KAAA,EAAO,MAAA;AAAA,IACP,kBAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,iBAAA,CAAkB,EAAE,kBAAA,EAAmB,EAAG,mBAAA,EAAqB,QAAQ,CAAA;AAEvE,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,GAAG,cAAA;AAAA,IACH,cAAA,EAAgB,oBAAoB,iBAAA,CAAkB,SAAA;AAAA,IACtD,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,MAAM,YAAA,GAAyC,CAAC,QAAA,KAAa;AAC3D,IAAA,IAAI,YAAY,QAAA,EAAU;AACxB,MAAA,OAAA,CAAQ,GAAA,CAAI,MAAM,IAAA,CAAK,QAAQ,EAAE,GAAA,CAAI,qBAAqB,CAAC,CAAA,CAAE,IAAA;AAAA,QAAK,MAChE,SAAS,QAAQ;AAAA,OACnB;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAK,GAAG,UAAA,EACP,QAAA,kBAAA,IAAA,CAAC,kBAAkB,QAAA,EAAlB,EAA2B,KAAA,EAAO,mBAAA,CAAoB,iBAAA,EACrD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,wBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAe,UAAA;AAAA,QACf,eAAA,EAAe,CAAC,CAAC,UAAA,IAAc,MAAA;AAAA,QAC/B,cAAA,EACE,mBAAA,CAAoB,iBAAA,CAAkB,SAAA,IAAa,MAAA;AAAA,QAGrD,QAAA,kBAAA,GAAA;AAAA,UAAC,SAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,QAAA;AAAA,YACL,UAAA;AAAA,YACA,QAAA,EAAU,aAAa,MAAA,GAAY,YAAA;AAAA,YACnC,UAAA;AAAA,YACC,GAAG,UAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,OAEJ,CAAA,EACF,CAAA;AAAA,wBACC,cAAA,EAAA,EAAe;AAAA,GAAA,EAClB,CAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FileField.mjs","names":[],"sources":["../../../../../../../src/components/FileField/FileField.tsx"],"sourcesContent":["import { 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 } 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 { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport styles from \"./FileField.module.scss\";\nimport clsx from \"clsx\";\n\nexport interface FileFieldProps\n  extends\n    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\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"FileField\");\n\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    \"aria-invalid\": formValidationState.displayValidation.isInvalid,\n    value: undefined,\n  };\n\n  const handleChange: FileInputOnChangeHandler = (fileList) => {\n    if (fileList && onChange) {\n      onChange(fileList);\n    }\n  };\n\n  return (\n    <div\n      {...fieldProps}\n      className={clsx(fieldProps.className, styles.fileField)}\n    >\n      <FieldErrorContext.Provider value={formValidationState.displayValidation}>\n        <FieldErrorCaptureContext>\n          <PropsContextProvider props={fieldPropsContext}>\n            <div\n              data-readonly={isReadOnly}\n              data-required={!!isRequired || undefined}\n              data-invalid={\n                formValidationState.displayValidation.isInvalid || undefined\n              }\n            >\n              <FileInput\n                ref={inputRef}\n                isReadOnly={isReadOnly}\n                onChange={isReadOnly ? undefined : handleChange}\n                isDisabled={isDisabled}\n                {...inputProps}\n              >\n                {children}\n              </FileInput>\n            </div>\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </FieldErrorContext.Provider>\n    </div>\n  );\n});\nexport default FileField;\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,IAAa,YAAY,cAAc,cAAc,UAAU;CAC7D,MAAM,EACJ,UACA,KACA,YACA,WACA,YACA,oBACA,UACA,YACA,GAAG,mBACD;CAEJ,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,WAAW;CAExC,MAAM,WAAW,aAAa,GAAG;CAEjC,MAAM,sBAAsB,uBAAuB;EACjD,OAAO,KAAA;EACP;EACA;CACF,CAAC;CAED,kBAAkB,EAAE,mBAAmB,GAAG,qBAAqB,QAAQ;CAEvE,MAAM,aAAa;EACjB,GAAG;EACH,gBAAgB,oBAAoB,kBAAkB;EACtD,OAAO,KAAA;CACT;CAEA,MAAM,gBAA0C,aAAa;EAC3D,IAAI,YAAY,UACd,SAAS,QAAQ;CAErB;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,KAAK,WAAW,WAAW,yBAAO,SAAS;EAEtD,UAAA,qBAAC,kBAAkB,UAAnB;GAA4B,OAAO,oBAAoB;GAAvD,UAAA,CACE,oBAAC,0BAAD,EAAA,UACE,oBAAC,sBAAD;IAAsB,OAAO;IAC3B,UAAA,oBAAC,OAAD;KACE,iBAAe;KACf,iBAAe,CAAC,CAAC,cAAc,KAAA;KAC/B,gBACE,oBAAoB,kBAAkB,aAAa,KAAA;KAGrD,UAAA,oBAAC,WAAD;MACE,KAAK;MACO;MACZ,UAAU,aAAa,KAAA,IAAY;MACvB;MACZ,GAAI;MAEH;KACQ,CAAA;IACR,CAAA;GACe,CAAA,EACE,CAAA,GAC1B,oBAAC,gBAAD,CAAiB,CAAA,CACS;;CACzB,CAAA;AAET,CAAC"}

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

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/FileField/FileField.module.scss
+var fileField = "flow--file-field";
+var FileField_module_default = { fileField };
+//#endregion
+export { FileField_module_default as default, fileField };
+
+//# sourceMappingURL=FileField.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.module.mjs","names":[],"sources":["../../../../../../../src/components/FileField/FileField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.fileField {\n  @include formControl.formHiddenInputScrollBehaviorFix;\n}\n"],"mappings":""}

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

@@ -1,48 +1,49 @@
 "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, ...restInputProps } = 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,
-      {
-        ...restInputProps,
-        className: styles.FileInput,
-        type: "file",
-        ref: inputRef,
-        onChange: handleChange
-      }
-    )
-  ] });
+import { PropsContextProvider } from "../../../lib/propsContext/components/PropsContextProvider.mjs";
+import FileInput_module_default from "./FileInput.module.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useObjectRef } from "@react-aria/utils";
+import * as Aria from "react-aria-components";
+import { useVisuallyHidden } from "react-aria";
+//#region src/components/FileField/components/FileInput.tsx
+/** @internal */
+var FileInput = (props) => {
+	const { children, isDisabled, onChange, isReadOnly, ref, ...restInputProps } = props;
+	const inputRef = useObjectRef(ref);
+	const { visuallyHiddenProps } = useVisuallyHidden();
+	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: FileInput_module_default.trigger,
+			isDisabled,
+			isReadOnly
+		},
+		FieldDescription: { className: FileInput_module_default.fieldDescription }
+	};
+	return /* @__PURE__ */ jsxs(PropsContextProvider, {
+		props: propsContext,
+		children: [children, /* @__PURE__ */ jsx(Aria.Input, {
+			...restInputProps,
+			...visuallyHiddenProps,
+			type: "file",
+			ref: inputRef,
+			onChange: handleChange
+		})]
+	});
 };
-
+//#endregion
 export { FileInput };
-//# sourceMappingURL=FileInput.mjs.map
+
+//# sourceMappingURL=FileInput.mjs.map

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

@@ -1 +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, ...restInputProps } =\n    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        {...restInputProps}\n        className={styles.FileInput}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,SAAA,GAAgC,CAAC,KAAA,KAAU;AACtD,EAAA,MAAM,EAAE,UAAU,UAAA,EAAY,QAAA,EAAU,YAAY,GAAA,EAAK,GAAG,gBAAe,GACzE,KAAA;AACF,EAAA,MAAM,QAAA,GAAW,aAAa,GAAG,CAAA;AAEjC,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,IAAI,QAAA,CAAS,SAAS,KAAA,EAAO;AAC3B,MAAA,QAAA,CAAS,QAAQ,KAAA,GAAQ,EAAA;AACzB,MAAA,QAAA,GAAW,IAAI,CAAA;AAAA,IACjB;AACA,IAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,EAC1B,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAyC;AAC7D,IAAA,QAAA,GAAW,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,EAC/B,CAAA;AAEA,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,MAAA,EAAQ;AAAA,MACN,OAAA,EAAS,WAAA;AAAA,MACT,WAAW,MAAA,CAAO,OAAA;AAAA,MAClB,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,IAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,oBACD,GAAA;AAAA,MAAC,IAAA,CAAK,KAAA;AAAA,MAAL;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,WAAW,MAAA,CAAO,SAAA;AAAA,QAClB,IAAA,EAAK,MAAA;AAAA,QACL,GAAA,EAAK,QAAA;AAAA,QACL,QAAA,EAAU;AAAA;AAAA;AACZ,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FileInput.mjs","names":[],"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\";\nimport { useVisuallyHidden } from \"react-aria\";\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, ...restInputProps } =\n    props;\n  const inputRef = useObjectRef(ref);\n  const { visuallyHiddenProps } = useVisuallyHidden();\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    FieldDescription: { className: styles.fieldDescription },\n  };\n\n  return (\n    <PropsContextProvider props={propsContext}>\n      {children}\n      <Aria.Input\n        {...restInputProps}\n        {...visuallyHiddenProps}\n        type=\"file\"\n        ref={inputRef}\n        onChange={handleChange}\n      />\n    </PropsContextProvider>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,aAAiC,UAAU;CACtD,MAAM,EAAE,UAAU,YAAY,UAAU,YAAY,KAAK,GAAG,mBAC1D;CACF,MAAM,WAAW,aAAa,GAAG;CACjC,MAAM,EAAE,wBAAwB,kBAAkB;CAElD,MAAM,oBAAoB;EACxB,IAAI,SAAS,SAAS,OAAO;GAC3B,SAAS,QAAQ,QAAQ;GACzB,WAAW,IAAI;EACjB;EACA,SAAS,SAAS,MAAM;CAC1B;CAEA,MAAM,gBAAgB,UAAyC;EAC7D,WAAW,MAAM,OAAO,KAAK;CAC/B;CAEA,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS;GACT,WAAW,yBAAO;GAClB;GACA;EACF;EACA,kBAAkB,EAAE,WAAW,yBAAO,iBAAiB;CACzD;CAEA,OACE,qBAAC,sBAAD;EAAsB,OAAO;EAA7B,UAAA,CACG,UACD,oBAAC,KAAK,OAAN;GACE,GAAI;GACJ,GAAI;GACJ,MAAK;GACL,KAAK;GACL,UAAU;EACX,CAAA,CACmB;;AAE1B"}

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

@@ -0,0 +1,13 @@
+"use client"
+/* */
+//#region src/components/FileField/components/FileInput.module.scss
+var trigger = "flow--file-field--trigger";
+var fieldDescription = "flow--file-field--field-description";
+var FileInput_module_default = {
+	trigger,
+	fieldDescription
+};
+//#endregion
+export { FileInput_module_default as default, fieldDescription, trigger };
+
+//# sourceMappingURL=FileInput.module.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.module.mjs","names":[],"sources":["../../../../../../../../src/components/FileField/components/FileInput.module.scss"],"sourcesContent":[".trigger {\n  order: 2;\n\n  &[data-disabled=\"true\"] ~ .fieldDescription {\n    color: var(--label--color--disabled);\n  }\n}\n"],"mappings":""}