@mittwald/flow-react-components 0.1.0-alpha.253 → 0.1.0-alpha.254

package/dist/Content-cYnXBHf-.js

@@ -0,0 +1,23 @@
+"use client"
+/* */
+import e from "react";
+import { C as i } from "./ClearPropsContext-CUvsbMn8.js";
+import "./propsContext-DzAKlmhS.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import { f as l } from "./flowComponent-CY2oW3O9.js";
+import { W as s } from "./Wrap-DGT1h1o3.js";
+const W = l("Content", (t) => {
+  const {
+    children: r,
+    elementType: o = "div",
+    refProp: n,
+    clearPropsContext: m = !0,
+    ...p
+  } = t, a = o;
+  return /* @__PURE__ */ e.createElement(s, { if: m }, /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(a, { ref: n, ...p }, r)));
+});
+export {
+  W as C
+};

package/dist/Content.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { C as o } from "./Content-CAZPjbt5.js";
+import { C as o } from "./Content-cYnXBHf-.js";
 export {
   o as Content,
   o as default

package/dist/List.js

@@ -31,7 +31,7 @@ import "./context-Cf7tqFtF.js";
 import { u as fe } from "./useOnChange-C1Quwyuz.js";
 import { S as be } from "./SearchField-CMvYWO_P.js";
 import { H as W } from "./Heading-FRIQlW19.js";
-import { S as Se } from "./Section-QApyOFfC.js";
+import { S as Se } from "./Section-DsyCp0AH.js";
 import { getProperty as ve } from "dot-prop";
 import { hash as vt } from "object-code";
 import O from "zod";

package/dist/Navigation.js

@@ -10,7 +10,7 @@ import "@react-aria/utils";
 import "remeda";
 import { TunnelProvider as u, TunnelExit as p } from "@mittwald/react-tunnel";
 import { A as x } from "./Accordion-CCq563rl.js";
-import { C as N } from "./Content-CAZPjbt5.js";
+import { C as N } from "./Content-cYnXBHf-.js";
 const C = "flow--navigation", I = "flow--navigation--item", b = "flow--navigation--icon", P = "flow--navigation--text", w = "flow--navigation--control-icon", r = {
   navigation: C,
   item: I,

package/dist/Section-DsyCp0AH.js

@@ -0,0 +1,53 @@
+"use client"
+/* */
+import e, { useId as u } from "react";
+import f from "clsx";
+import "./propsContext-DzAKlmhS.js";
+import { P as c } from "./PropsContextProvider-C6Z4XGp6.js";
+import "@react-aria/utils";
+import "remeda";
+import { f as i } from "./flowComponent-CY2oW3O9.js";
+import * as s from "react-aria-components";
+import { s as x } from "./ContextMenu.module-BZingr2B.js";
+const C = "flow--section", S = {
+  section: C
+}, E = i(
+  "ContextMenuSection",
+  (r) => {
+    const { children: t } = r, n = {
+      Heading: {
+        level: 5,
+        wrapWith: /* @__PURE__ */ e.createElement(s.Header, null)
+      }
+    };
+    return /* @__PURE__ */ e.createElement(s.Section, { className: x.section }, /* @__PURE__ */ e.createElement(c, { props: n, mergeInParentContext: !0 }, t));
+  }
+), y = i("Section", (r) => {
+  const {
+    children: t,
+    className: n,
+    refProp: a,
+    renderContextMenuSection: l,
+    ...m
+  } = r;
+  if (!t)
+    return null;
+  if (l)
+    return /* @__PURE__ */ e.createElement(E, null, t);
+  const p = f(S.section, n), o = u(), d = {
+    Heading: {
+      level: 2,
+      id: o
+    },
+    Header: {
+      renderSectionHeader: !0
+    },
+    List: {
+      "aria-labelledby": o
+    }
+  };
+  return /* @__PURE__ */ e.createElement("section", { ...m, className: p, ref: a }, /* @__PURE__ */ e.createElement(c, { props: d, mergeInParentContext: !0 }, t));
+});
+export {
+  y as S
+};

package/dist/Section.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { S as t } from "./Section-QApyOFfC.js";
+import { S as t } from "./Section-DsyCp0AH.js";
 export {
   t as Section,
   t as default

package/dist/Tabs.js

@@ -1,32 +1,33 @@
 "use client"
 /* */
-import e, { useRef as g, useState as v, useEffect as M, useId as w, createContext as h, useContext as I } from "react";
-import * as E from "react-aria-components";
+import e, { useRef as h, useState as w, useEffect as M, useId as N, createContext as I, useContext as P } from "react";
+import * as C from "react-aria-components";
 import u from "clsx";
-import { TunnelExit as C, TunnelProvider as P, TunnelEntry as f } from "@mittwald/react-tunnel";
-import { f as y } from "./flowComponent-CY2oW3O9.js";
-import { useCallbackRef as O } from "use-callback-ref";
-import { a as S, C as A } from "./ContextMenuTrigger-5-EjHDtY.js";
-import { M as B } from "./MenuItem-CFE7SA5J.js";
-import { B as K } from "./Button-BepCRVIi.js";
+import { TunnelExit as E, TunnelProvider as y, TunnelEntry as f } from "@mittwald/react-tunnel";
+import { f as O } from "./flowComponent-CY2oW3O9.js";
+import { useCallbackRef as S } from "use-callback-ref";
+import { a as A, C as B } from "./ContextMenuTrigger-5-EjHDtY.js";
+import { M as K } from "./MenuItem-CFE7SA5J.js";
+import { B as L } from "./Button-BepCRVIi.js";
 import "@tabler/icons-react";
 import "./Icon-cEgH3ZXQ.js";
-import { I as L } from "./IconContextMenu-DLHXM1Ph.js";
+import { I as W } from "./IconContextMenu-DLHXM1Ph.js";
 import { T as F } from "./Text-T_kNKeFe.js";
 import "./propsContext-DzAKlmhS.js";
 import { P as R } from "./PropsContextProvider-C6Z4XGp6.js";
 import "@react-aria/utils";
 import "remeda";
-const W = "flow--tabs", $ = "flow--tabs--list", k = {
-  tabs: W,
-  list: $
-}, j = "flow--tabs--tab-list", q = "flow--tabs--tab-list--context-menu-button", z = "flow--tabs--tab-list--titles", D = "flow--tabs--tab-list--collapsed", b = {
-  tabList: j,
-  contextMenuButton: q,
-  titles: z,
-  collapsed: D
-}, G = () => {
-  const s = g(), [n, r] = v(!1), o = O(null, (t) => {
+import { A as x } from "./Activity-CmfZpgOM.js";
+const $ = "flow--tabs", k = "flow--tabs--list", j = {
+  tabs: $,
+  list: k
+}, q = "flow--tabs--tab-list", z = "flow--tabs--tab-list--context-menu-button", D = "flow--tabs--tab-list--titles", G = "flow--tabs--tab-list--collapsed", b = {
+  tabList: q,
+  contextMenuButton: z,
+  titles: D,
+  collapsed: G
+}, H = () => {
+  const s = h(), [n, r] = w(!1), o = S(null, (t) => {
     l(), c(t);
   }), a = ([
     t
@@ -49,37 +50,37 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
     ref: o,
     isOverflowing: n
   };
-}, H = "flow--tabs--tab-title", J = "flow--tabs--tab-title--text", Q = "flow--tabs--tab-title--menu-item", p = {
-  tabTitle: H,
-  text: J,
-  menuItem: Q
-}, U = (s) => {
-  const { className: n, ...r } = s, o = u(n, p.tabTitle);
-  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(C, { id: "ActiveTitle" }));
+}, J = "flow--tabs--tab-title", Q = "flow--tabs--tab-title--text", U = "flow--tabs--tab-title--menu-item", p = {
+  tabTitle: J,
+  text: Q,
+  menuItem: U
 }, V = (s) => {
-  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = w(), c = G(), l = c.isOverflowing, t = u(b.tabList, l && b.collapsed), i = (x) => {
-    o(x);
-  }, m = /* @__PURE__ */ e.createElement(E.TabList, { className: b.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(C, { id: "Titles" })), d = l && /* @__PURE__ */ e.createElement(U, { id: a }), T = l && /* @__PURE__ */ e.createElement(S, null, /* @__PURE__ */ e.createElement(
-    K,
+  const { className: n, ...r } = s, o = u(n, p.tabTitle);
+  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(E, { id: "ActiveTitle" }));
+}, X = (s) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = N(), c = H(), l = c.isOverflowing, t = u(b.tabList, l && b.collapsed), i = (v) => {
+    o(v);
+  }, m = /* @__PURE__ */ e.createElement(C.TabList, { className: b.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(E, { id: "Titles" })), d = l && /* @__PURE__ */ e.createElement(V, { id: a }), T = l && /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement(
+    L,
     {
       variant: "soft",
       className: b.contextMenuButton,
       color: "secondary",
       "aria-labelledby": a
     },
-    /* @__PURE__ */ e.createElement(L, null)
+    /* @__PURE__ */ e.createElement(W, null)
   ), /* @__PURE__ */ e.createElement(
-    A,
+    B,
     {
       disabledKeys: r,
       selectedKeys: n ? [n] : void 0,
       selectionMode: "navigation",
-      onAction: (x) => i(x)
+      onAction: (v) => i(v)
     },
-    /* @__PURE__ */ e.createElement(C, { id: "ContextMenuItems" })
+    /* @__PURE__ */ e.createElement(E, { id: "ContextMenuItems" })
   ));
   return /* @__PURE__ */ e.createElement("div", { className: t }, m, d, T);
-}, Ce = y("Tabs", (s) => {
+}, Te = O("Tabs", (s) => {
   const {
     children: n,
     className: r,
@@ -87,11 +88,11 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
     disabledKeys: a,
     refProp: c,
     ...l
-  } = s, t = u(k.tabs, r), [i, m] = v(
+  } = s, t = u(j.tabs, r), [i, m] = w(
     o
   );
-  return /* @__PURE__ */ e.createElement(P, null, n, /* @__PURE__ */ e.createElement(
-    E.Tabs,
+  return /* @__PURE__ */ e.createElement(y, null, n, /* @__PURE__ */ e.createElement(
+    C.Tabs,
     {
       slot: null,
       className: t,
@@ -102,30 +103,30 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
       ref: c
     },
     /* @__PURE__ */ e.createElement(
-      V,
+      X,
       {
         selection: i,
         onContextMenuSelectionChange: m,
         disabledKeys: a
       }
     ),
-    /* @__PURE__ */ e.createElement(C, { id: "Panels" })
+    /* @__PURE__ */ e.createElement(E, { id: "Panels" })
   ));
-}), N = h({
+}), g = I({
   id: "undefined"
-}), X = () => I(N), Y = N.Provider, Ee = (s) => {
-  const { children: n, className: r, ...o } = s, { id: a } = X(), c = u(p.tabTitle, r);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(f, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(F, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: p.text }, n)), /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(B, { className: p.menuItem, id: a }, n)));
-}, Z = "flow--tabs--tab--tab-panel", _ = {
-  tabPanel: Z
-}, Te = (s) => {
-  const { children: n, className: r, id: o, ...a } = s, c = u(_.tabPanel, r), l = w(), t = o ?? l, i = (m) => {
+}), Y = () => P(g), Z = g.Provider, ve = (s) => {
+  const { children: n, className: r, ...o } = s, { id: a } = Y(), c = u(p.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(f, { id: "Titles" }, /* @__PURE__ */ e.createElement(C.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(F, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: p.text }, n)), /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(K, { className: p.menuItem, id: a }, n)));
+}, _ = "flow--tabs--tab--tab-panel", ee = {
+  tabPanel: _
+}, xe = (s) => {
+  const { children: n, className: r, id: o, ...a } = s, c = u(ee.tabPanel, r), l = N(), t = o ?? l, i = (m) => {
     const d = m.state.selectedKey === t, T = {
       Content: {
-        isActive: d
+        wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
       },
       Section: {
-        isActive: d
+        wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
       }
     };
     return /* @__PURE__ */ e.createElement(
@@ -137,8 +138,8 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
       n
     );
   };
-  return /* @__PURE__ */ e.createElement(f, { id: "Panels" }, /* @__PURE__ */ e.createElement(Y, { value: { id: t } }, /* @__PURE__ */ e.createElement(
-    E.TabPanel,
+  return /* @__PURE__ */ e.createElement(f, { id: "Panels" }, /* @__PURE__ */ e.createElement(Z, { value: { id: t } }, /* @__PURE__ */ e.createElement(
+    C.TabPanel,
     {
       className: c,
       shouldForceMount: !0,
@@ -149,8 +150,8 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
   )));
 };
 export {
-  Te as Tab,
-  Ee as TabTitle,
-  Ce as Tabs,
-  Ce as default
+  xe as Tab,
+  ve as TabTitle,
+  Te as Tabs,
+  Te as default
 };

package/dist/types/components/Content/Content.d.ts

@@ -2,7 +2,6 @@ import { PropsWithChildren, default as React } from 'react';
 import { PropsWithElementType } from '../../lib/types/props';
 import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 export interface ContentProps extends PropsWithChildren, PropsWithElementType<"div" | "section" | "span">, FlowComponentProps {
-    slot?: string;
 }
 export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<never>>;
 export default Content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.253",
+  "version": "0.1.0-alpha.254",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -313,7 +313,7 @@
     "@chakra-ui/live-region": "^2.1.0",
     "@internationalized/date": "^3.5.5",
     "@internationalized/string-compiler": "^3.2.4",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.253",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.254",
     "@mittwald/react-use-promise": "^2.5.0",
     "@react-aria/utils": "^3.25.2",
     "@react-types/shared": "^3.24.1",
@@ -340,7 +340,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^9.0.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.253",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.254",
     "@mittwald/react-use-promise": "^2.5.0",
     "@nx/storybook": "^19.7.4",
     "@storybook/addon-a11y": "^8.3.2",
@@ -418,5 +418,5 @@
       "optional": true
     }
   },
-  "gitHead": "625da382543f6960773d5e8b448677ac8fe75736"
+  "gitHead": "a879bdb296ef148c6e08420d6439a304ab529690"
 }

package/dist/Content-CAZPjbt5.js

@@ -1,25 +0,0 @@
-"use client"
-/* */
-import t from "react";
-import { C as c } from "./ClearPropsContext-CUvsbMn8.js";
-import "./propsContext-DzAKlmhS.js";
-import "@react-aria/utils";
-import "remeda";
-import "dot-prop";
-import { f as l } from "./flowComponent-CY2oW3O9.js";
-import { W as s } from "./Wrap-DGT1h1o3.js";
-import { A as f } from "./Activity-CmfZpgOM.js";
-const W = l("Content", (e) => {
-  const {
-    children: r,
-    elementType: o = "div",
-    refProp: m,
-    clearPropsContext: n = !0,
-    isActive: i = !0,
-    ...p
-  } = e, a = o;
-  return /* @__PURE__ */ t.createElement(s, { if: n }, /* @__PURE__ */ t.createElement(c, null, /* @__PURE__ */ t.createElement(f, { isActive: i }, /* @__PURE__ */ t.createElement(a, { ref: m, ...p }, r))));
-});
-export {
-  W as C
-};

package/dist/Section-QApyOFfC.js

@@ -1,55 +0,0 @@
-"use client"
-/* */
-import e, { useId as f } from "react";
-import x from "clsx";
-import "./propsContext-DzAKlmhS.js";
-import { P as i } from "./PropsContextProvider-C6Z4XGp6.js";
-import "@react-aria/utils";
-import "remeda";
-import { f as c } from "./flowComponent-CY2oW3O9.js";
-import { A as C } from "./Activity-CmfZpgOM.js";
-import * as s from "react-aria-components";
-import { s as S } from "./ContextMenu.module-BZingr2B.js";
-const E = "flow--section", P = {
-  section: E
-}, g = c(
-  "ContextMenuSection",
-  (r) => {
-    const { children: t } = r, o = {
-      Heading: {
-        level: 5,
-        wrapWith: /* @__PURE__ */ e.createElement(s.Header, null)
-      }
-    };
-    return /* @__PURE__ */ e.createElement(s.Section, { className: S.section }, /* @__PURE__ */ e.createElement(i, { props: o, mergeInParentContext: !0 }, t));
-  }
-), b = c("Section", (r) => {
-  const {
-    children: t,
-    className: o,
-    isActive: a = !0,
-    refProp: l,
-    renderContextMenuSection: m,
-    ...p
-  } = r;
-  if (!t)
-    return null;
-  if (m)
-    return /* @__PURE__ */ e.createElement(g, null, t);
-  const d = x(P.section, o), n = f(), u = {
-    Heading: {
-      level: 2,
-      id: n
-    },
-    Header: {
-      renderSectionHeader: !0
-    },
-    List: {
-      "aria-labelledby": n
-    }
-  };
-  return /* @__PURE__ */ e.createElement(C, { isActive: a }, /* @__PURE__ */ e.createElement("section", { ...p, className: d, ref: l }, /* @__PURE__ */ e.createElement(i, { props: u, mergeInParentContext: !0 }, t)));
-});
-export {
-  b as S
-};