@mittwald/flow-react-components 0.1.0-alpha.318 → 0.1.0-alpha.319

package/dist/js/{flowComponent-CdFTojQw.js → flowComponent-1wOIvUIq.js}

@@ -7,7 +7,7 @@ import { pickBy as v, omitBy as S } from "remeda";
 import "dot-prop";
 import { PropsContextProvider as b } from "./PropsContextProvider.js";
 import { TunnelEntry as E } from "@mittwald/react-tunnel";
-const k = {
+const F = {
   Action: !0,
   ActionGroup: !0,
   Avatar: !0,
@@ -31,6 +31,7 @@ const k = {
   DateRangePicker: !0,
   FieldDescription: !0,
   FieldError: !0,
+  FileCard: !0,
   FileField: !0,
   Header: !0,
   Heading: !0,
@@ -67,44 +68,44 @@ const k = {
   TextField: !0,
   TimeField: !0
 }, l = Object.keys(
-  k
+  F
 );
-function a(t) {
-  return !!t && typeof t == "object" && "__dynamicProp" in t;
+function a(e) {
+  return !!e && typeof e == "object" && "__dynamicProp" in e;
 }
-function d(t) {
-  return typeof t == "string" && l.includes(t);
+function d(e) {
+  return typeof e == "string" && l.includes(e);
 }
-function F(t) {
-  return !d(t);
+function k(e) {
+  return !d(e);
 }
-const A = (t, o) => {
+const A = (e, o) => {
   const r = {};
-  for (const e in t)
-    if (F(e)) {
-      const n = t[e];
-      a(n) && (r[e] = n.__dynamicProp(o));
+  for (const t in e)
+    if (k(t)) {
+      const n = e[t];
+      a(n) && (r[t] = n.__dynamicProp(o));
     }
   return r;
 };
-function B(t) {
-  return !!t && typeof t == "object" && "children" in t && !!t.children;
+function B(e) {
+  return !!e && typeof e == "object" && "children" in e && !!e.children;
 }
-const w = (t) => v(t, (o, r) => d(r)), I = (t, o) => {
+const w = (e) => v(e, (o, r) => d(r)), I = (e, o) => {
   if (!B(o))
     return {};
   const r = o.children;
   if (!Array.isArray(r) && !x(r))
     return {};
-  const e = w(t);
-  return Object.keys(e).length === 0 ? {} : {
-    children: /* @__PURE__ */ s.createElement(b, { props: e, mergeInParentContext: !0 }, r)
+  const t = w(e);
+  return Object.keys(t).length === 0 ? {} : {
+    children: /* @__PURE__ */ s.createElement(b, { props: t, mergeInParentContext: !0 }, r)
   };
-}, M = (t, o) => {
-  const e = h()[t], n = e ? A(e, o) : void 0, i = e ? I(e, o) : void 0;
+}, M = (e, o) => {
+  const t = h()[e], n = t ? A(t, o) : void 0, i = t ? I(t, o) : void 0;
   return T(
-    e && S(
-      e,
+    t && S(
+      t,
       (c, p) => l.includes(
         p
       ) || a(c)
@@ -113,24 +114,24 @@ const w = (t) => v(t, (o, r) => d(r)), I = (t, o) => {
     n,
     i
   );
-}, m = f({}), R = () => P(m), D = (t) => {
-  const { slot: o, component: r, children: e } = t, i = {
+}, m = f({}), R = () => P(m), D = (e) => {
+  const { slot: o, component: r, children: t } = e, i = {
     ...R(),
     [r]: o
   };
-  return /* @__PURE__ */ s.createElement(m.Provider, { value: i }, e);
+  return /* @__PURE__ */ s.createElement(m.Provider, { value: i }, t);
 };
-function O(t, o) {
-  return y((r, e) => {
+function O(e, o) {
+  return y((r, t) => {
     const { tunnelId: n, wrapWith: i, ...c } = M(
-      t,
+      e,
       r
     ), C = {
-      refProp: e,
+      refProp: t,
       ...c
     };
     let u = /* @__PURE__ */ s.createElement(o, { ...C });
-    return "slot" in r && r.slot && (u = /* @__PURE__ */ s.createElement(D, { slot: r.slot, component: t }, u)), i && (u = g(i, void 0, u)), n && (u = /* @__PURE__ */ s.createElement(E, { id: n }, u)), u;
+    return "slot" in r && r.slot && (u = /* @__PURE__ */ s.createElement(D, { slot: r.slot, component: e }, u)), i && (u = g(i, void 0, u)), n && (u = /* @__PURE__ */ s.createElement(E, { id: n }, u)), u;
   });
 }
 export {

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

@@ -7,8 +7,8 @@ import { PropsContextProvider as b } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as F } from "./dynamic-ClpUSmEt.js";
-import { F as A } from "./FieldError-nM97A_ZI.js";
-import { a as P, A as y } from "./Action-CVaW6nwX.js";
+import { F as A } from "./FieldError-BvH18haz.js";
+import { a as P, A as y } from "./Action-DsQVttvF.js";
 const C = x({}), V = C.Provider, f = () => v(C);
 function D(t) {
   var i;

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

@@ -1,7 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
-import { PropsWithClassName } from '../../lib/types/props';
+import { PropsWithClassName, PropsWithElementType } from '../../lib/types/props';
 type GapSize = "s" | "m" | "l";
-export interface ColumnLayoutProps extends PropsWithChildren, PropsWithClassName {
+export interface ColumnLayoutProps extends PropsWithChildren, PropsWithElementType<"div" | "ul">, PropsWithClassName {
     s?: number[];
     m?: number[];
     l?: number[];

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { PropsWithClassName, PropsWithElementType } from '../../lib/types/props';
+export interface FileCardProps extends PropsWithClassName, PropsWithElementType<"div" | "li"> {
+    name: string;
+    type?: string;
+    onDelete?: () => void;
+    sizeInBytes?: number;
+}
+export declare const FileCard: React.ForwardRefExoticComponent<FileCardProps & React.RefAttributes<never>>;
+export default FileCard;

package/dist/js/types/components/FileCard/components/FileSizeText/FileSizeText.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface Props {
+    sizeInBytes: number;
+}
+export declare const FileSizeText: FC<Props>;
+export default FileSizeText;

package/dist/js/types/components/FileCard/components/FileSizeText/index.d.ts

@@ -0,0 +1 @@
+export * from './FileSizeText';

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FileCard } from '..';
+declare const meta: Meta<typeof FileCard>;
+export default meta;
+type Story = StoryObj<typeof FileCard>;
+export declare const Default: Story;
+export declare const WithType: Story;
+export declare const WithSize: Story;
+export declare const WithOnDelete: Story;

package/dist/js/types/components/FileCard/stories/EdgeCases.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FileCard } from '..';
+declare const meta: Meta<typeof FileCard>;
+export default meta;
+type Story = StoryObj<typeof FileCard>;
+export declare const LongName: Story;

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ColumnLayoutProps } from '../ColumnLayout';
+export type FileCardListProps = Omit<ColumnLayoutProps, "elementType">;
+export declare const FileCardList: FC<FileCardListProps>;
+export default FileCardList;

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

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

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { FileCardList } from '..';
+declare const meta: Meta<typeof FileCardList>;
+export default meta;
+type Story = StoryObj<typeof FileCardList>;
+export declare const Default: Story;

package/dist/js/types/components/Icon/components/icons/IconFile.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+import { Icon } from '../..';
+export declare const IconFile: FC<Omit<ComponentProps<typeof Icon>, "children">>;
+export default IconFile;

package/dist/js/types/components/Icon/components/icons/IconImage.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps, FC } from 'react';
+import { Icon } from '../..';
+export declare const IconImage: FC<Omit<ComponentProps<typeof Icon>, "children">>;
+export default IconImage;

package/dist/js/types/components/Icon/components/icons/index.d.ts

@@ -33,9 +33,11 @@ export { IconEmail } from './IconEmail';
 export { IconExtension } from './IconExtension';
 export { IconExternalLink } from './IconExternalLink';
 export { IconFailed } from './IconFailed';
+export { IconFile } from './IconFile';
 export { IconFilter } from './IconFilter';
 export { IconHide } from './IconHide';
 export { IconHome } from './IconHome';
+export { IconImage } from './IconImage';
 export { IconInfo } from './IconInfo';
 export { IconInbox } from './IconInbox';
 export { IconInvoice } from './IconInvoice';

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 { FileCardProps } from '../FileCard';
 import { FileFieldProps } from '../FileField';
 import type * as Aria from "react-aria-components";
 export * from './types';
@@ -74,6 +75,7 @@ export interface FlowComponentPropsTypes {
     DateRangePicker: DateRangePickerProps<Aria.DateValue>;
     FieldDescription: FieldDescriptionProps;
     FieldError: FieldErrorProps;
+    FileCard: FileCardProps;
     FileField: FileFieldProps;
     Header: HeaderProps;
     Heading: HeadingProps;

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;
+    FileCard: OverlayController | undefined;
     FileField: OverlayController | undefined;
     Header: OverlayController | undefined;
     Heading: 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">;
+    FileCard: import('./types').ComponentPropsContext<"FileCard">;
     FileField: import('./types').ComponentPropsContext<"FileField">;
     Header: import('./types').ComponentPropsContext<"Header">;
     Heading: import('./types').ComponentPropsContext<"Heading">;
@@ -83,6 +84,7 @@ export declare const PropsContextProvider: import('react').Provider<Partial<{
     DateRangePicker: import('./types').ComponentPropsContext<"DateRangePicker">;
     FieldDescription: import('./types').ComponentPropsContext<"FieldDescription">;
     FieldError: import('./types').ComponentPropsContext<"FieldError">;
+    FileCard: import('./types').ComponentPropsContext<"FileCard">;
     FileField: import('./types').ComponentPropsContext<"FileField">;
     Header: import('./types').ComponentPropsContext<"Header">;
     Heading: import('./types').ComponentPropsContext<"Heading">;

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;
+    FileCard: string;
     FileField: string;
     Header: string;
     Heading: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.318",
+  "version": "0.1.0-alpha.319",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -131,6 +131,15 @@
       "types": "./dist/js/types/components/FieldError/index.d.ts",
       "import": "./dist/js/FieldError.js"
     },
+    "./FileCard/styles.css": "./dist/css/FileCard.css",
+    "./FileCard": {
+      "types": "./dist/js/types/components/FileCard/index.d.ts",
+      "import": "./dist/js/FileCard.js"
+    },
+    "./FileCardList": {
+      "types": "./dist/js/types/components/FileCardList/index.d.ts",
+      "import": "./dist/js/FileCardList.js"
+    },
     "./FileField/styles.css": "./dist/css/FileField.css",
     "./FileField": {
       "types": "./dist/js/types/components/FileField/index.d.ts",
@@ -396,7 +405,7 @@
     "@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.318",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.319",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/form": "^3.0.10",
     "@react-aria/utils": "^3.25.3",
@@ -426,7 +435,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.3",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.318",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.319",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^20.0.0",
     "@storybook/addon-a11y": "^8.3.5",
@@ -521,5 +530,5 @@
       }
     }
   },
-  "gitHead": "b5e6a5c600397f6bdd42fb8c2e385d6ff23539ef"
+  "gitHead": "a6da762f147a12affae23f0d365b32c2e7d08638"
 }

package/dist/js/ColumnLayout-Bvw578tz.js

@@ -1,33 +0,0 @@
-"use client"
-/* */
-import e from "react";
-import g from "clsx";
-const d = "flow--column-layout--column-layout-container", v = "flow--column-layout", y = {
-  columnLayoutContainer: d,
-  columnLayout: v
-}, a = (o) => {
-  if (o.length < 1)
-    throw new Error("Column layout array is empty");
-  return o.map((l) => `${l}fr`).join(" ");
-}, h = (o) => {
-  const {
-    children: u,
-    className: l,
-    s: n,
-    m: t,
-    l: c,
-    gap: m = "m",
-    rowGap: i = m,
-    columnGap: p = m
-  } = o, s = n ? a(n) : void 0, r = t ? a(t) : n ? s : void 0, f = c ? a(c) : t || n ? r : void 0, C = {
-    "--column-layout--columns-s": s,
-    "--column-layout--columns-m": r,
-    "--column-layout--columns-l": f,
-    "--column-layout--row-gap": `var(--column-layout--gap--${i})`,
-    "--column-layout--column-gap": `var(--column-layout--gap--${p})`
-  }, L = g(y.columnLayoutContainer, l);
-  return /* @__PURE__ */ e.createElement("div", { className: L, style: C }, /* @__PURE__ */ e.createElement("div", { className: y.columnLayout }, u));
-};
-export {
-  h as C
-};