@mittwald/flow-react-components 0.1.0-alpha.312 → 0.1.0-alpha.314

package/dist/js/{flowComponent-E-Gp2Toe.js → flowComponent-CdFTojQw.js}

@@ -31,6 +31,7 @@ const k = {
   DateRangePicker: !0,
   FieldDescription: !0,
   FieldError: !0,
+  FileField: !0,
   Header: !0,
   Heading: !0,
   Icon: !0,
@@ -74,33 +75,33 @@ function a(t) {
 function d(t) {
   return typeof t == "string" && l.includes(t);
 }
-function A(t) {
+function F(t) {
   return !d(t);
 }
-const B = (t, o) => {
+const A = (t, o) => {
   const r = {};
   for (const e in t)
-    if (A(e)) {
+    if (F(e)) {
       const n = t[e];
       a(n) && (r[e] = n.__dynamicProp(o));
     }
   return r;
 };
-function w(t) {
+function B(t) {
   return !!t && typeof t == "object" && "children" in t && !!t.children;
 }
-const F = (t) => v(t, (o, r) => d(r)), I = (t, o) => {
-  if (!w(o))
+const w = (t) => v(t, (o, r) => d(r)), I = (t, o) => {
+  if (!B(o))
     return {};
   const r = o.children;
   if (!Array.isArray(r) && !x(r))
     return {};
-  const e = F(t);
+  const e = w(t);
   return Object.keys(e).length === 0 ? {} : {
     children: /* @__PURE__ */ s.createElement(b, { props: e, mergeInParentContext: !0 }, r)
   };
 }, M = (t, o) => {
-  const e = h()[t], n = e ? B(e, o) : void 0, i = e ? I(e, o) : void 0;
+  const e = h()[t], n = e ? A(e, o) : void 0, i = e ? I(e, o) : void 0;
   return T(
     e && S(
       e,

package/dist/js/react-hook-form.js

@@ -1,15 +1,15 @@
 "use client"
 /* */
-import n, { createContext as F, useContext as v, useEffect as S, useRef as k } from "react";
+import n, { createContext as x, useContext as v, useEffect as S, useRef as k } from "react";
 import { Controller as g, useFormState as h } from "react-hook-form";
 import "./propsContext-DzAKlmhS.js";
 import { PropsContextProvider as b } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { d as C } from "./dynamic-ClpUSmEt.js";
-import { F as A } from "./FieldError-BZ6oyvAN.js";
-import { a as P, A as y } from "./Action-CiJBykBu.js";
-const E = F({}), V = E.Provider, f = () => v(E);
+import { d as F } from "./dynamic-ClpUSmEt.js";
+import { F as A } from "./FieldError-BVaFR2ma.js";
+import { a as P, A as y } from "./Action-CVaW6nwX.js";
+const C = x({}), V = C.Provider, f = () => v(C);
 function D(t) {
   var i;
   const { children: r, control: o, ...s } = t, l = (i = f().form) == null ? void 0 : i.control;
@@ -28,13 +28,14 @@ function D(t) {
           isRequired: !!((p = s.rules) != null && p.required),
           isInvalid: m,
           validationBehavior: "aria",
-          children: C((x) => /* @__PURE__ */ n.createElement(n.Fragment, null, x.children, /* @__PURE__ */ n.createElement(A, null, u == null ? void 0 : u.message))),
+          children: F((E) => /* @__PURE__ */ n.createElement(n.Fragment, null, E.children, /* @__PURE__ */ n.createElement(A, null, u == null ? void 0 : u.message))),
           ref: void 0,
           refProp: c.ref
         }, d = {
           Checkbox: e,
           CheckboxGroup: e,
           CheckboxButton: e,
+          FileField: e,
           NumberField: e,
           RadioGroup: e,
           Switch: e,
@@ -81,7 +82,7 @@ const _ = (t) => D, I = (t) => {
 }, T = (t) => {
   const { children: r, isAsyncSubmit: o } = t, s = {
     ActionGroup: {
-      children: C((l) => /* @__PURE__ */ n.createElement(R, { isAsyncSubmit: o }, l.children))
+      children: F((l) => /* @__PURE__ */ n.createElement(R, { isAsyncSubmit: o }, l.children))
     }
   };
   return /* @__PURE__ */ n.createElement(b, { props: s, mergeInParentContext: !0 }, r);

package/dist/js/types/components/FileField/FileField.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren, default as React } from 'react';
+import { FileInputOnChangeHandler } from './components/FileInput';
+import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
+import type * as Aria from "react-aria-components";
+export interface FileFieldProps extends PropsWithChildren, FlowComponentProps, Pick<Aria.InputProps, "accept" | "multiple" | "name">, Pick<Aria.TextFieldProps, "isRequired" | "isInvalid" | "validationBehavior" | "isDisabled"> {
+    onChange?: FileInputOnChangeHandler;
+}
+export declare const FileField: React.ForwardRefExoticComponent<FileFieldProps & React.RefAttributes<never>>;

package/dist/js/types/components/FileField/components/FileInput.d.ts

@@ -0,0 +1 @@
+export type FileInputOnChangeHandler = (files: FileList | null) => void;

package/dist/js/types/components/FileField/index.d.ts

@@ -0,0 +1,3 @@
+import { FileField } from './FileField';
+export { FileField, type FileFieldProps } from './FileField';
+export default FileField;

package/dist/js/types/components/FileField/stories/Default.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FileField } from '..';
+declare const meta: Meta<typeof FileField>;
+export default meta;
+type Story = StoryObj<typeof FileField>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithError: Story;
+export declare const IconButton: Story;
+export declare const WithHandler: Story;
+export declare const WithReactHookForm: Story;

package/dist/js/types/components/propTypes/index.d.ts

@@ -47,6 +47,7 @@ import { AlertIconProps } from '../AlertIcon';
 import { ListSummaryProps } from '../List/components/ListSummary/ListSummary';
 import { SegmentedControlProps } from '../SegmentedControl';
 import { SegmentProps } from 'src/components/SegmentedControl/components/Segment';
+import { FileFieldProps } from '../FileField';
 import type * as Aria from "react-aria-components";
 export * from './types';
 export interface FlowComponentPropsTypes {
@@ -73,6 +74,7 @@ export interface FlowComponentPropsTypes {
     DateRangePicker: DateRangePickerProps<Aria.DateValue>;
     FieldDescription: FieldDescriptionProps;
     FieldError: FieldErrorProps;
+    FileField: FileFieldProps;
     Header: HeaderProps;
     Heading: HeadingProps;
     Icon: IconProps;

package/dist/js/types/lib/controller/overlay/context.d.ts

@@ -27,6 +27,7 @@ export declare const overlayContext: import('react').Context<Partial<{
     DateRangePicker: OverlayController | undefined;
     FieldDescription: OverlayController | undefined;
     FieldError: OverlayController | undefined;
+    FileField: OverlayController | undefined;
     Header: OverlayController | undefined;
     Heading: OverlayController | undefined;
     Icon: OverlayController | undefined;

package/dist/js/types/lib/propsContext/propsContext.d.ts

@@ -23,6 +23,7 @@ export declare const propsContext: import('react').Context<Partial<{
     DateRangePicker: import('./types').ComponentPropsContext<"DateRangePicker">;
     FieldDescription: import('./types').ComponentPropsContext<"FieldDescription">;
     FieldError: import('./types').ComponentPropsContext<"FieldError">;
+    FileField: import('./types').ComponentPropsContext<"FileField">;
     Header: import('./types').ComponentPropsContext<"Header">;
     Heading: import('./types').ComponentPropsContext<"Heading">;
     Icon: import('./types').ComponentPropsContext<"Icon">;
@@ -82,6 +83,7 @@ export declare const PropsContextProvider: import('react').Provider<Partial<{
     DateRangePicker: import('./types').ComponentPropsContext<"DateRangePicker">;
     FieldDescription: import('./types').ComponentPropsContext<"FieldDescription">;
     FieldError: import('./types').ComponentPropsContext<"FieldError">;
+    FileField: import('./types').ComponentPropsContext<"FileField">;
     Header: import('./types').ComponentPropsContext<"Header">;
     Heading: import('./types').ComponentPropsContext<"Heading">;
     Icon: import('./types').ComponentPropsContext<"Icon">;

package/dist/js/types/lib/slotContext/slotContext.d.ts

@@ -23,6 +23,7 @@ export declare const slotContext: import('react').Context<Partial<{
     DateRangePicker: string;
     FieldDescription: string;
     FieldError: string;
+    FileField: string;
     Header: string;
     Heading: string;
     Icon: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.312",
+  "version": "0.1.0-alpha.314",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -131,6 +131,11 @@
       "types": "./dist/js/types/components/FieldError/index.d.ts",
       "import": "./dist/js/FieldError.js"
     },
+    "./FileField/styles.css": "./dist/css/FileField.css",
+    "./FileField": {
+      "types": "./dist/js/types/components/FileField/index.d.ts",
+      "import": "./dist/js/FileField.js"
+    },
     "./Header/styles.css": "./dist/css/Header.css",
     "./Header": {
       "types": "./dist/js/types/components/Header/index.d.ts",
@@ -391,9 +396,11 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.6",
     "@internationalized/string-compiler": "^3.2.5",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.312",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.314",
     "@mittwald/react-use-promise": "^2.5.0",
+    "@react-aria/form": "^3.0.10",
     "@react-aria/utils": "^3.25.3",
+    "@react-stately/form": "^3.0.6",
     "@react-types/shared": "^3.25.0",
     "@tabler/icons-react": "^3.19.0",
     "@tanstack/react-table": "^8.20.5",
@@ -419,7 +426,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.312",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.314",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -514,5 +521,5 @@
       }
     }
   },
-  "gitHead": "a403e913511d45131266c2ababd62e9768362c59"
+  "gitHead": "1dfabddca1406bb7baa5c39e217e81e936288c00"
 }