@mittwald/flow-react-components 0.1.0-alpha.396 → 0.1.0-alpha.398

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.1.0-alpha.398](https://github.com/mittwald/flow/compare/0.1.0-alpha.397...0.1.0-alpha.398) (2025-01-22)
+
+### Features
+
+- **List:** add tile view
+  ([2058342](https://github.com/mittwald/flow/commit/205834235c856b649b0fd1be26b9693f86cbb9dc))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [0.1.0-alpha.397](https://github.com/mittwald/flow/compare/0.1.0-alpha.396...0.1.0-alpha.397) (2025-01-21)
+
+### Features
+
+- **Section:** support file field in section header
+  ([#1115](https://github.com/mittwald/flow/issues/1115))
+  ([e2d26ae](https://github.com/mittwald/flow/commit/e2d26aecad6b2a3d67c673042e3a19f50d436a2b))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [0.1.0-alpha.396](https://github.com/mittwald/flow/compare/0.1.0-alpha.395...0.1.0-alpha.396) (2025-01-21)
 
 ### Bug Fixes

package/dist/css/List.css

@@ -1 +1 @@
-@charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:start}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title   " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title   " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--sub-title)){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--sub-title)):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}
+@charset "UTF-8";.flow--list--items--item--view{display:flex;padding:var(--list-item--padding);gap:var(--list-item--spacing);align-items:center;flex-wrap:wrap}.flow--list--items--item--view .flow--list--items--item--view--content{display:flex;flex-wrap:wrap;gap:var(--list-item--spacing);align-items:center;flex-grow:1}.flow--list--items--item--view .flow--list--items--item--view--title{order:0;flex-grow:1;display:grid;grid-column-gap:var(--list-item--avatar-to-title-spacing);grid-template-areas:"avatar title   " "avatar subtitle";grid-template-columns:auto 1fr}.flow--list--items--item--view .flow--list--items--item--view--title:empty,.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title:empty{display:none}.flow--list--items--item--view .flow--list--items--item--view--title:not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title   " "subtitle";grid-template-columns:1fr}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty){grid-template-areas:"avatar title"}.flow--list--items--item--view .flow--list--items--item--view--title:has(.flow--list--items--item--view--sub-title:empty):not(:has(.flow--list--items--item--view--avatar)){grid-template-areas:"title"}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--avatar{grid-area:avatar;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--heading{grid-area:title;align-self:center}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title{grid-area:subtitle;font-size:var(--list-item--subtitle-font-size)}.flow--list--items--item--view .flow--list--items--item--view--title .flow--list--items--item--view--sub-title .flow--list--items--item--view--text:not(:last-child):after{content:"–";display:inline-block;margin:0 var(--size-rem--s)}.flow--list--items--item--view .flow--list--items--item--view--top-content{order:2}.flow--list--items--item--view .flow--list--items--item--view--action{margin-left:auto}.flow--list--items--item--view .flow--list--items--item--view--bottom-content{order:4;width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile{padding:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--action{display:none}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar-container{width:100%;overflow:hidden;border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style);border-top-left-radius:var(--corner-radius--default);border-top-right-radius:var(--corner-radius--default);aspect-ratio:16/9}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar{width:100%;height:100%;border-radius:0}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--icon{width:var(--size-px--xxl);height:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--avatar .flow--avatar--initials{font-size:var(--size-px--xxl)}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--content{display:flex;justify-content:space-between;align-items:start;padding-inline:var(--list-item--spacing);padding-bottom:var(--list-item--spacing);width:100%}.flow--list--items--item--view.flow--list--items--item--view--tile .flow--list--items--item--view--top-content{width:100%}.flow--list--list-summary{border-width:var(--list-item--border-width);border-bottom-width:0;border-style:var(--list-item--border-style);border-color:var(--list-item--border-color);padding:var(--list-item--padding);border-top-left-radius:var(--list-item--corner-radius);border-top-right-radius:var(--list-item--corner-radius)}.flow--list--header{display:flex;flex-direction:column;row-gap:var(--list--spacing)}.flow--list--header .flow--list--header--picker-list-and-search{display:flex;gap:var(--list--block-to-block-spacing);align-items:center;justify-content:space-between;flex-wrap:wrap-reverse}.flow--list--header .flow--list--header--picker-list{display:flex;flex-wrap:wrap;gap:var(--list--spacing)}.flow--list--header .flow--list--header--search-and-actions{display:flex;flex-grow:1;gap:var(--list--spacing);flex-wrap:wrap-reverse;justify-content:end}.flow--list--header .flow--list--header--search-field{max-width:180px;flex-grow:1;transition:max-width var(--transition--duration--default)}.flow--list--header .flow--list--header--search-field:has(input:focus){max-width:600px}.flow--list--header--active-filters{display:flex;flex-direction:row;column-gap:var(--list--spacing);row-gap:var(--list--spacing);flex-wrap:wrap;align-items:center}.flow--list--header--active-filters .flow--list--header--active-filters--clear-button{margin-inline-start:auto}.flow--list{display:flex;flex-direction:column;row-gap:var(--list--block-to-block-spacing);container-type:inline-size}.flow--list :has(.flow--list--list-summary) .flow--list--items,.flow--list :has(.flow--list--list-summary) .flow--list--table{border-top-left-radius:0;border-top-right-radius:0}.flow--list--items{display:flex;flex-direction:column;border-radius:var(--list-item--corner-radius);border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);overflow:hidden}.flow--list--items:empty{display:none}.flow--list--items.flow--list--items--is-loading{pointer-events:none;opacity:.5}.flow--list--items[data-empty=true]{border:none}.flow--list--items.flow--list--items--tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));border:none;gap:var(--list-item--spacing)}.flow--list--items--item{cursor:default;background-color:var(--list-item--background-color--default)}.flow--list--items--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--list--items--item[data-focused],.flow--list--items--item:focus{outline-style:none}.flow--list--items--item[data-focus-visible],.flow--list--items--item:focus-visible{outline-style:auto}.flow--list--items--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--list--items--item.flow--list--items--item{outline-offset:calc(var(--size-px--xs) * -1)}.flow--list--items--item:where(.flow--list--items--item--is-selected){background-color:var(--list-item--background-color--pressed)}.flow--list--items--item:not(:last-child){border-bottom-color:var(--list-item--border-color);border-bottom-width:var(--list-item--border-width);border-bottom-style:var(--list-item--border-style)}.flow--list--items--item:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--items--item:where(.flow--list--items--item--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}.flow--list--items--item.flow--list--items--item--tile{border-color:var(--list-item--border-color);border-width:var(--list-item--border-width);border-style:var(--list-item--border-style);border-radius:var(--list-item--corner-radius)}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action):not(.flow--list--items--item--is-selected):hover .flow--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--list--items--item.flow--list--items--item--tile:where(.flow--list--items--item--has-action)[data-pressed] .flow--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--list--footer{font-size:var(--font-size-text--s);display:flex;flex-direction:column;align-items:center;row-gap:var(--list--spacing)}.flow--list--table.flow--list--table--is-loading{pointer-events:none;opacity:.5}.flow--list--table--row.flow--list--table--is-selected{background-color:var(--list-item--background-color--pressed)}.flow--list--table--row:where(.flow--list--table--has-action){cursor:default}.flow--list--table--row:where(.flow--list--table--has-action):not(.flow--list--table--is-selected):hover{background-color:var(--list-item--background-color--hover)}.flow--list--table--row:where(.flow--list--table--has-action)[data-pressed]{background-color:var(--list-item--background-color--pressed)}

package/dist/js/ContextMenu.js

@@ -1,9 +1,9 @@
 "use client"
 /* */
-import { C as t } from "./ContextMenuTrigger-BAV29sr-.js";
-import { a as n } from "./ContextMenuTrigger-BAV29sr-.js";
+import { C as t } from "./ContextMenuTrigger-C6ZCPTHC.js";
+import { a as n } from "./ContextMenuTrigger-C6ZCPTHC.js";
 import { M as x } from "./MenuItem-D5BsewlU.js";
-import { C as f } from "./ContextMenuSection-CmajFz_f.js";
+import { C as f } from "./ContextMenuSection-kLzjPKqH.js";
 export {
   t as ContextMenu,
   f as ContextMenuSection,

package/dist/js/{ContextMenuSection-CmajFz_f.js → ContextMenuSection-kLzjPKqH.js}

@@ -3,41 +3,41 @@
 import * as o from "react-aria-components";
 import t from "react";
 import "./propsContext-DzAKlmhS.js";
-import { PropsContextProvider as m } from "./PropsContextProvider.js";
+import { PropsContextProvider as l } from "./PropsContextProvider.js";
 import "@react-aria/utils";
 import "remeda";
-import { f as l } from "./flowComponent-BQs9wMX_.js";
+import { f as m } from "./flowComponent-BQs9wMX_.js";
 import { A as r } from "./Action-Bm7dBV7s.js";
 const p = "flow--context-menu", u = "flow--context-menu--section", x = {
   contextMenu: p,
   section: u
-}, g = (e) => e === "navigation" ? "none" : e === "switch" ? "multiple" : e, f = (e) => e === "single" || e === "multiple" ? "control" : e, C = (e) => e === "single" || e === "navigation" ? "ContextMenu" : void 0, d = l(
+}, f = (e) => e === "navigation" ? "none" : e === "switch" ? "multiple" : e, C = (e) => e === "single" || e === "multiple" ? "control" : e, g = (e) => e === "multiple" ? void 0 : "ContextMenu", A = m(
   "ContextMenuSection",
   (e) => {
-    const { children: i, selectionMode: n, ...s } = e, a = f(n), c = {
+    const { children: s, selectionMode: n, ...c } = e, i = C(n), a = {
       Heading: {
         level: 5,
         wrapWith: /* @__PURE__ */ t.createElement(o.Header, null)
       },
       MenuItem: {
-        selectionVariant: a
+        selectionVariant: i
       }
     };
     return /* @__PURE__ */ t.createElement(
       o.MenuSection,
       {
-        ...s,
-        selectionMode: g(n),
+        ...c,
+        selectionMode: f(n),
         className: x.section
       },
-      /* @__PURE__ */ t.createElement(m, { props: c, mergeInParentContext: !0 }, /* @__PURE__ */ t.createElement(r, { skip: !0 }, /* @__PURE__ */ t.createElement(r, { closeOverlay: C(n) }, i)))
+      /* @__PURE__ */ t.createElement(l, { props: a, mergeInParentContext: !0 }, /* @__PURE__ */ t.createElement(r, { skip: !0 }, /* @__PURE__ */ t.createElement(r, { closeOverlay: g(n) }, s)))
     );
   }
 );
 export {
-  d as C,
-  C as a,
-  f as b,
-  g,
+  A as C,
+  g as a,
+  C as b,
+  f as g,
   x as s
 };

package/dist/js/{ContextMenuTrigger-BAV29sr-.js → ContextMenuTrigger-C6ZCPTHC.js}

@@ -2,7 +2,7 @@
 /* */
 import e from "react";
 import * as a from "react-aria-components";
-import { s as f, g as y, a as d, b as v } from "./ContextMenuSection-CmajFz_f.js";
+import { s as f, g as y, a as d, b as v } from "./ContextMenuSection-kLzjPKqH.js";
 import { f as s } from "./flowComponent-BQs9wMX_.js";
 import { P } from "./Popover-3qM_-J3x.js";
 import { C as A } from "./ClearPropsContext-CUvsbMn8.js";

package/dist/js/{Header-DfOH31lw.js → Header-BggXDvGJ.js}

@@ -21,6 +21,7 @@ const f = "flow--section--section-header", g = "flow--section--section-header--a
       size: "s",
       tunnelId: "actions"
     },
+    FileField: { tunnelId: "actions", Button: { size: "s" } },
     ContextMenuTrigger: {
       tunnelId: "actions",
       Button: {
@@ -66,13 +67,13 @@ const f = "flow--section--section-header", g = "flow--section--section-header--a
     refProp: o,
     elementType: r = "header",
     renderSectionHeader: l,
-    className: a,
-    ...i
+    className: i,
+    ...a
   } = t;
   if (l)
-    return /* @__PURE__ */ e.createElement(H, { className: a }, n);
+    return /* @__PURE__ */ e.createElement(H, { className: i }, n);
   const c = r;
-  return /* @__PURE__ */ e.createElement(c, { ...i, className: a, ref: o }, n);
+  return /* @__PURE__ */ e.createElement(c, { ...a, className: i, ref: o }, n);
 });
 export {
   v as H

package/dist/js/Header.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { H as e } from "./Header-DfOH31lw.js";
+import { H as e } from "./Header-BggXDvGJ.js";
 export {
   e as Header,
   e as default