@mittwald/flow-react-components 0.1.0-alpha.115 → 0.1.0-alpha.116

package/dist/Tabs.js

@@ -1,71 +1,75 @@
 "use client"
 /* */
-import e, { useRef as h, useState as C, useEffect as M, useId as p, createContext as I, useContext as y } from "react";
-import * as E from "react-aria-components";
-import { MenuTrigger as O } from "react-aria-components";
-import m from "clsx";
-import { TunnelExit as f, TunnelProvider as P, TunnelEntry as b } from "@mittwald/react-tunnel";
-import { f as S } from "./flowComponent-MjC63Rjp.js";
+import e, { useRef as h, useState as x, useEffect as M, useId as g, createContext as I, useContext as P } from "react";
+import * as C from "react-aria-components";
+import { MenuTrigger as y } from "react-aria-components";
+import d from "clsx";
+import { TunnelExit as p, TunnelProvider as S, TunnelEntry as b } from "@mittwald/react-tunnel";
+import { f as O } from "./flowComponent-D-odaa-x.js";
 import { useCallbackRef as B } from "use-callback-ref";
-import { C as K } from "./ContextMenu-BHan4xr7.js";
-import { M as L } from "./MenuItem-D0wwxHmB.js";
-import { B as F } from "./Button-D59Yuz6-.js";
+import { C as K } from "./ContextMenu-kfsMEIUy.js";
+import { M as A } from "./MenuItem-D4OlNY0-.js";
+import { B as L } from "./Button-_8JcP9d1.js";
 import "@tabler/icons-react";
-import "./Icon-CA9DycKJ.js";
-import { I as A } from "./IconContextMenu-CdytNL-c.js";
-import { T as R } from "./Text-D94bUNze.js";
-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", u = {
-  tabList: j,
-  contextMenuButton: q,
-  titles: z,
-  collapsed: D
-}, G = () => {
-  const s = h(), [n, r] = C(!1), o = B(null, (t) => {
-    a(), c(t);
-  }), l = ([
+import "./Icon-DAE3MVF2.js";
+import { I as F } from "./IconContextMenu-CscpZMqu.js";
+import { T as R } from "./Text-CMf42YK8.js";
+import "./propsContext-CauylOgH.js";
+import { P as W } from "./PropsContextProvider-DZvwqHLP.js";
+import "@react-aria/utils";
+import "remeda";
+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", u = {
+  tabList: q,
+  contextMenuButton: z,
+  titles: D,
+  collapsed: G
+}, H = () => {
+  const s = h(), [n, r] = x(!1), o = B(null, (t) => {
+    l(), c(t);
+  }), a = ([
     t
   ]) => {
     t && r(!t.isIntersecting);
   }, c = (t = o.current) => {
     if (t && t instanceof Element) {
-      const i = new IntersectionObserver(l, {
+      const i = new IntersectionObserver(a, {
         root: t.parentElement,
         // 1 = invoke callback when the element is 100% visible within the parent element
         threshold: 1
       });
       s.current = i, i.observe(t);
     }
-  }, a = () => {
+  }, l = () => {
     var t;
     (t = s.current) == null || t.disconnect();
   };
-  return M(() => (c(), a), [s.current]), {
+  return M(() => (c(), l), [s.current]), {
     ref: o,
     isOverflowing: n
   };
-}, H = "flow--tabs--tab-title", J = "flow--tabs--tab-title--text", Q = "flow--tabs--tab-title--menu-item", d = {
-  tabTitle: H,
-  text: J,
-  menuItem: Q
-}, U = (s) => {
-  const { className: n, ...r } = s, o = m(n, d.tabTitle);
-  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }));
+}, J = "flow--tabs--tab-title", Q = "flow--tabs--tab-title--text", U = "flow--tabs--tab-title--menu-item", f = {
+  tabTitle: J,
+  text: Q,
+  menuItem: U
 }, V = (s) => {
-  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, l = p(), c = G(), a = c.isOverflowing, t = m(u.tabList, a && u.collapsed), i = (N) => {
-    const [T] = N;
-    T && o(T);
-  }, v = /* @__PURE__ */ e.createElement(E.TabList, { className: u.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(f, { id: "Titles" })), g = a && /* @__PURE__ */ e.createElement(U, { id: l }), w = a && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
-    F,
+  const { className: n, ...r } = s, o = d(n, f.tabTitle);
+  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(p, { id: "ActiveTitle" }));
+}, X = (s) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = g(), c = H(), l = c.isOverflowing, t = d(u.tabList, l && u.collapsed), i = (N) => {
+    const [v] = N;
+    v && o(v);
+  }, E = /* @__PURE__ */ e.createElement(C.TabList, { className: u.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(p, { id: "Titles" })), m = l && /* @__PURE__ */ e.createElement(V, { id: a }), T = l && /* @__PURE__ */ e.createElement(y, null, /* @__PURE__ */ e.createElement(
+    L,
     {
       variant: "soft",
       className: u.contextMenuButton,
       color: "secondary",
-      "aria-labelledby": l
+      "aria-labelledby": a
     },
-    /* @__PURE__ */ e.createElement(A, null)
+    /* @__PURE__ */ e.createElement(F, null)
   ), /* @__PURE__ */ e.createElement(
     K,
     {
@@ -74,62 +78,73 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
       selectionMode: "navigation",
       onSelectionChange: i
     },
-    /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" })
+    /* @__PURE__ */ e.createElement(p, { id: "ContextMenuItems" })
   ));
-  return /* @__PURE__ */ e.createElement("div", { className: t }, v, g, w);
-}, de = S("Tabs", (s) => {
-  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: l, ...c } = s, a = m(k.tabs, r), [t, i] = C(
+  return /* @__PURE__ */ e.createElement("div", { className: t }, E, m, T);
+}, Te = O("Tabs", (s) => {
+  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: a, ...c } = s, l = d(j.tabs, r), [t, i] = x(
     o
   );
-  return /* @__PURE__ */ e.createElement(P, null, n, /* @__PURE__ */ e.createElement(
-    E.Tabs,
+  return /* @__PURE__ */ e.createElement(S, null, n, /* @__PURE__ */ e.createElement(
+    C.Tabs,
     {
       slot: null,
-      className: a,
+      className: l,
       ...c,
       selectedKey: t,
       onSelectionChange: i,
-      disabledKeys: l
+      disabledKeys: a
     },
     /* @__PURE__ */ e.createElement(
-      V,
+      X,
       {
         selection: t,
         onContextMenuSelectionChange: i,
-        disabledKeys: l
+        disabledKeys: a
       }
     ),
-    /* @__PURE__ */ e.createElement(f, { id: "Panels" })
+    /* @__PURE__ */ e.createElement(p, { id: "Panels" })
   ));
-}), x = I({
+}), w = I({
   id: "undefined"
-}), X = () => y(x), Y = x.Provider, fe = (s) => {
-  const { children: n, className: r, ...o } = s, { id: l } = X(), c = m(d.tabTitle, r);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: l, className: c }, (a) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: d.text }, n)), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, a.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { className: d.menuItem, id: l }, n)));
-}, Z = "flow--tabs--tab--tab-panel", _ = {
-  tabPanel: Z
-}, Ee = (s) => {
-  const {
-    children: n,
-    className: r,
-    shouldForceMount: o = !0,
-    id: l,
-    ...c
-  } = s, a = m(_.tabPanel, r), t = p(), i = l ?? t;
-  return /* @__PURE__ */ e.createElement(b, { id: "Panels" }, /* @__PURE__ */ e.createElement(
-    E.TabPanel,
+}), Y = () => P(w), Z = w.Provider, ve = (s) => {
+  const { children: n, className: r, ...o } = s, { id: a } = Y(), c = d(f.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(C.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: f.text }, n)), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(A, { className: f.menuItem, id: a }, n)));
+}, _ = "flow--tabs--tab--tab-panel", ee = {
+  tabPanel: _
+}, xe = (s) => {
+  const { children: n, className: r, id: o, ...a } = s, c = d(ee.tabPanel, r), l = g(), t = o ?? l, i = (E) => {
+    const m = E.state.selectedKey === t, T = {
+      Content: {
+        isActive: m
+      },
+      Section: {
+        isActive: m
+      }
+    };
+    return /* @__PURE__ */ e.createElement(
+      W,
+      {
+        props: T,
+        dependencies: [m, n]
+      },
+      n
+    );
+  };
+  return /* @__PURE__ */ e.createElement(b, { id: "Panels" }, /* @__PURE__ */ e.createElement(Z, { value: { id: t } }, /* @__PURE__ */ e.createElement(
+    C.TabPanel,
     {
-      className: a,
-      shouldForceMount: o,
-      id: i,
-      ...c
+      className: c,
+      shouldForceMount: !0,
+      id: t,
+      ...a
     },
-    /* @__PURE__ */ e.createElement(Y, { value: { id: i } }, n)
-  ));
+    i
+  )));
 };
 export {
-  Ee as Tab,
-  fe as TabTitle,
-  de as Tabs,
-  de as default
+  xe as Tab,
+  ve as TabTitle,
+  Te as Tabs,
+  Te as default
 };

package/dist/{Text-D94bUNze.js → Text-CMf42YK8.js}

@@ -8,7 +8,7 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import u from "invariant";
-import { f as T } from "./flowComponent-MjC63Rjp.js";
+import { f as T } from "./flowComponent-D-odaa-x.js";
 import { E as d } from "./EmulatedBoldText-Dtox8Wd1.js";
 import { W as C } from "./Wrap-DGT1h1o3.js";
 const A = T("Text", (r) => {

package/dist/Text.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { T as a } from "./Text-D94bUNze.js";
+import { T as a } from "./Text-CMf42YK8.js";
 export {
   a as Text,
   a as default

package/dist/TextArea.js

@@ -2,13 +2,13 @@
 /* */
 import e from "react";
 import * as n from "react-aria-components";
-import { T as p } from "./TextFieldBase-DLi7NvGk.js";
+import { T as p } from "./TextFieldBase-DFFlaU7o.js";
 import { C as i } from "./ClearPropsContext-CeCMjUK9.js";
 import "./propsContext-CauylOgH.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as c } from "./flowComponent-MjC63Rjp.js";
+import { f as c } from "./flowComponent-D-odaa-x.js";
 const f = "flow--text-area", x = {
   textArea: f
 }, y = c("TextArea", (t) => {

package/dist/TextField.js

@@ -2,13 +2,13 @@
 /* */
 import t from "react";
 import * as s from "react-aria-components";
-import { T as a } from "./TextFieldBase-DLi7NvGk.js";
+import { T as a } from "./TextFieldBase-DFFlaU7o.js";
 import { C as n } from "./ClearPropsContext-CeCMjUK9.js";
 import "./propsContext-CauylOgH.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { f as p } from "./flowComponent-MjC63Rjp.js";
+import { f as p } from "./flowComponent-D-odaa-x.js";
 const c = "flow--text-field", f = {
   textField: c
 }, w = p("TextField", (e) => {

package/dist/{TextFieldBase-DLi7NvGk.js → TextFieldBase-DFFlaU7o.js}

@@ -9,7 +9,7 @@ import { P as f } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
-import { F as E } from "./FieldError-T1bvZYZU.js";
+import { F as E } from "./FieldError-ef2wRBhJ.js";
 const g = c(
   (o, F) => {
     const { children: t, className: s, input: a, ...i } = o, l = p(e.formField, s), m = {

package/dist/{flowComponent-MjC63Rjp.js → flowComponent-D-odaa-x.js}

@@ -6,7 +6,7 @@ import "./propsContext-CauylOgH.js";
 import "@react-aria/utils";
 import "remeda";
 import "dot-prop";
-import { u } from "./useProps-CjWcmgf3.js";
+import { u } from "./useProps-L-mDIVx4.js";
 import { TunnelEntry as C } from "@mittwald/react-tunnel";
 function d(e, o) {
   return a((i, s) => {

package/dist/react-hook-form.js

@@ -7,7 +7,7 @@ import { P as v } from "./PropsContextProvider-DZvwqHLP.js";
 import "@react-aria/utils";
 import "remeda";
 import { d as E } from "./dynamic-ClpUSmEt.js";
-import { F as P } from "./FieldError-T1bvZYZU.js";
+import { F as P } from "./FieldError-ef2wRBhJ.js";
 const d = x({}), b = d.Provider, g = () => F(d);
 function k(o) {
   var l;

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

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+
+interface Props extends PropsWithChildren {
+    isActive?: boolean;
+    inactiveDelay?: number;
+}
+export declare const Activity: FC<Props>;
+export {};

package/dist/types/components/Activity/Activity.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Activity/index.d.ts

@@ -0,0 +1,4 @@
+import { Activity } from './Activity';
+
+export * from './Activity';
+export default Activity;

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

@@ -2,7 +2,7 @@ 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 {
+export interface ContentProps extends PropsWithChildren, PropsWithElementType<"div" | "section" | "span">, FlowComponentProps<"Content"> {
 }
 export declare const Content: React.ForwardRefExoticComponent<ContentProps & React.RefAttributes<never>>;
 export default Content;

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

@@ -1,5 +1,7 @@
-import { ComponentProps, FC, PropsWithChildren } from 'react';
+import { ComponentProps, PropsWithChildren, default as React } from 'react';
+import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
 
-export type SectionProps = PropsWithChildren<ComponentProps<"section">>;
-export declare const Section: FC<SectionProps>;
+export interface SectionProps extends PropsWithChildren<ComponentProps<"section">>, FlowComponentProps<"Section"> {
+}
+export declare const Section: React.ForwardRefExoticComponent<Omit<SectionProps, "ref"> & React.RefAttributes<never>>;
 export default Section;

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

@@ -29,6 +29,7 @@ import { CheckboxProps } from '../Checkbox';
 import { CheckboxButtonProps } from '../CheckboxButton';
 import { TabsProps } from '../Tabs';
 import { ModalProps } from '../Modal';
+import { SectionProps } from '../Section';
 
 export * from './types';
 export interface FlowComponentPropsTypes {
@@ -60,6 +61,7 @@ export interface FlowComponentPropsTypes {
     Radio: RadioProps;
     RadioButton: RadioButtonProps;
     RadioGroup: RadioGroupProps;
+    Section: SectionProps;
     Select: SelectProps;
     StatusBadge: StatusBadgeProps;
     Switch: SwitchProps;

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

@@ -29,6 +29,7 @@ export declare const propsContext: import('react').Context<Partial<{
     Radio: import('./types').ComponentPropsContext<"Radio">;
     RadioButton: import('./types').ComponentPropsContext<"RadioButton">;
     RadioGroup: import('./types').ComponentPropsContext<"RadioGroup">;
+    Section: import('./types').ComponentPropsContext<"Section">;
     Select: import('./types').ComponentPropsContext<"Select">;
     StatusBadge: import('./types').ComponentPropsContext<"StatusBadge">;
     Switch: import('./types').ComponentPropsContext<"Switch">;

package/dist/{useProps-CjWcmgf3.js → useProps-L-mDIVx4.js}

@@ -34,6 +34,7 @@ const l = {
   Option: !0,
   RadioButton: !0,
   RadioGroup: !0,
+  Section: !0,
   Select: !0,
   StatusBadge: !0,
   Switch: !0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "0.1.0-alpha.115",
+  "version": "0.1.0-alpha.116",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://mittwald.github.io/flow",
@@ -251,7 +251,7 @@
   },
   "dependencies": {
     "@chakra-ui/live-region": "^2.1.0",
-    "@mittwald/react-tunnel": "^0.1.0-alpha.115",
+    "@mittwald/react-tunnel": "^0.1.0-alpha.116",
     "@mittwald/react-use-promise": "^2.3.13",
     "@react-aria/utils": "^3.24.0",
     "@react-types/shared": "^3.23.0",
@@ -275,7 +275,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@mittwald/flow-design-tokens": "^0.1.0-alpha.115",
+    "@mittwald/flow-design-tokens": "^0.1.0-alpha.116",
     "@mittwald/react-use-promise": "^2.3.13",
     "@nx/storybook": "^19.0.3",
     "@storybook/addon-a11y": "^8.1.0",
@@ -351,5 +351,5 @@
       "optional": true
     }
   },
-  "gitHead": "df23f3e3496ffaf3881a32e1e82209f5be473c6b"
+  "gitHead": "aa76f67de660988456e4db3f8cb9a5dbc469327d"
 }

package/dist/Accordion-DsX7RI_p.js

@@ -1,76 +0,0 @@
-"use client"
-/* */
-import n, { useState as E, useId as a } from "react";
-import I from "clsx";
-import "./propsContext-CauylOgH.js";
-import { P as N } from "./PropsContextProvider-DZvwqHLP.js";
-import "@react-aria/utils";
-import "remeda";
-import { d } from "./dynamic-ClpUSmEt.js";
-import { B as w } from "./Button-D59Yuz6-.js";
-import "@tabler/icons-react";
-import "./Icon-CA9DycKJ.js";
-import { I as B } from "./IconChevronDown-DvDzDLHn.js";
-import { TunnelProvider as C, TunnelExit as P } from "@mittwald/react-tunnel";
-const b = "flow--accordion", y = "flow--accordion--header", g = "flow--accordion--header-button", A = "flow--accordion--content", T = "flow--accordion--content-inner", D = "flow--accordion--chevron", H = "flow--accordion--expanded", e = {
-  accordion: b,
-  header: y,
-  headerButton: g,
-  content: A,
-  contentInner: T,
-  chevron: D,
-  expanded: H
-}, O = (s) => {
-  const { children: l, className: i, defaultExpanded: m = !1, ...p } = s, [t, h] = E(m), u = I(
-    e.accordion,
-    t && e.expanded,
-    i
-  ), f = a(), r = a(), c = (o) => /* @__PURE__ */ n.createElement(
-    w,
-    {
-      unstyled: !0,
-      "aria-expanded": t,
-      className: e.headerButton,
-      onPress: () => h((v) => !v),
-      "aria-controls": r
-    },
-    o,
-    /* @__PURE__ */ n.createElement(B, { className: e.chevron })
-  ), x = {
-    Content: {
-      className: e.contentInner,
-      tunnelId: "content"
-    },
-    Heading: {
-      className: e.header,
-      level: 4,
-      children: d((o) => c(o.children))
-    },
-    Label: {
-      className: e.header,
-      children: d((o) => c(o.children))
-    }
-  };
-  return /* @__PURE__ */ n.createElement("div", { ...p, className: u }, /* @__PURE__ */ n.createElement(
-    N,
-    {
-      mergeInParentContext: !0,
-      props: x,
-      dependencies: [t]
-    },
-    /* @__PURE__ */ n.createElement(C, null, l, /* @__PURE__ */ n.createElement(
-      "div",
-      {
-        "aria-labelledby": f,
-        id: r,
-        role: "region",
-        hidden: !t,
-        className: e.content
-      },
-      /* @__PURE__ */ n.createElement(P, { id: "content" })
-    ))
-  ));
-};
-export {
-  O as A
-};

package/dist/Content-DT3Soml6.js

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