@mittwald/flow-react-components 0.1.0-alpha.85 → 0.1.0-alpha.86

package/dist/InlineAlert.js

@@ -7,7 +7,7 @@ import "@react-aria/utils";
 import "./propsContext-CauylOgH.js";
 import "remeda";
 import p from "clsx";
-import { S as u } from "./StatusIcon-DYuGj4gU.js";
+import { S as u } from "./StatusIcon-BMyHmLNg.js";
 import { f as d } from "./flowComponent-dvQga3NG.js";
 const w = "flow--inline-alert", g = "flow--inline-alert--status-icon", C = "flow--inline-alert--heading", I = "flow--inline-alert--content", N = "flow--inline-alert--info", h = "flow--inline-alert--warning", x = "flow--inline-alert--danger", A = "flow--inline-alert--success", n = {
   inlineAlert: w,

package/dist/StatusBadge.js

@@ -2,7 +2,7 @@
 /* */
 import t from "react";
 import l from "clsx";
-import { S as f } from "./StatusIcon-DYuGj4gU.js";
+import { S as f } from "./StatusIcon-BMyHmLNg.js";
 import { T as i } from "./Text-CKd46eHq.js";
 import { C as u } from "./ClearPropsContext-CeCMjUK9.js";
 import "./propsContext-CauylOgH.js";

package/dist/StatusIcon-BMyHmLNg.js

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import t from "react";
+import "@tabler/icons-react";
+import "./Icon-DwHDa4pA.js";
+import { I as m } from "./IconDanger-MdCt1mDP.js";
+import { I as f, a as l, b as I } from "./IconWarning-Dbq3oj5j.js";
+import { useLocalizedStringFormatter as g } from "react-aria";
+import { C as p } from "./ClearPropsContext-CeCMjUK9.js";
+import "./propsContext-CauylOgH.js";
+import "@react-aria/utils";
+import "remeda";
+import "dot-prop";
+import w from "clsx";
+const S = {
+  "de-DE": {
+    "statusIcon.danger": "Status Fehler",
+    "statusIcon.info": "Status Information",
+    "statusIcon.success": "Status Erfolg",
+    "statusIcon.warning": "Status Warnung"
+  },
+  "en-EN": {
+    "statusIcon.danger": "Status error",
+    "statusIcon.info": "Status information",
+    "statusIcon.success": "Status success",
+    "statusIcon.warning": "Status warning"
+  }
+}, d = "flow--status-icon--info", E = "flow--status-icon", C = "flow--status-icon--warning", N = "flow--status-icon--danger", x = "flow--status-icon--success", o = {
+  info: d,
+  statusIcon: E,
+  warning: C,
+  danger: N,
+  success: x
+}, F = {
+  danger: m,
+  info: f,
+  success: l,
+  warning: I
+}, q = (n) => {
+  const { status: s = "info", className: a, ...c } = n, r = w(o.statusIcon, o[s], a), e = g(S), i = F[s], u = {
+    className: r,
+    "aria-label": e.format(`statusIcon.${s}`),
+    ...c
+  };
+  return /* @__PURE__ */ t.createElement(p, null, /* @__PURE__ */ t.createElement(i, { ...u }));
+};
+export {
+  q as S
+};

package/dist/StatusIcon.js

@@ -1,6 +1,6 @@
 "use client"
 /* */
-import { S as a } from "./StatusIcon-DYuGj4gU.js";
+import { S as a } from "./StatusIcon-BMyHmLNg.js";
 export {
   a as StatusIcon,
   a as default

package/dist/Tabs.js

@@ -1,10 +1,10 @@
 "use client"
 /* */
-import e, { useRef as M, useState as T, useEffect as N, useId as C, createContext as y, useContext as I } from "react";
-import * as f from "react-aria-components";
+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 u, TunnelProvider as P, TunnelEntry as b } from "@mittwald/react-tunnel";
+import { TunnelExit as f, TunnelProvider as P, TunnelEntry as u } from "@mittwald/react-tunnel";
 import { f as S } from "./flowComponent-dvQga3NG.js";
 import { useCallbackRef as B } from "use-callback-ref";
 import { C as K } from "./ContextMenu-BeySGa4K.js";
@@ -17,51 +17,53 @@ import { T as R } from "./Text-CKd46eHq.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", d = {
+}, 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 = M(), [n, r] = T(!1), o = B(null, (t) => {
-    a(), c(t);
-  }), l = ([
+  const s = h(), [n, r] = C(!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 N(() => (c(), a), [s.current]), {
+  return M(() => (c(), l), [s.current]), {
     ref: o,
     isOverflowing: n
   };
-}, H = "flow--tabs--tab-title", p = {
-  tabTitle: H
-}, J = (s) => {
-  const { className: n, ...r } = s, o = m(n, p.tabTitle);
-  return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(u, { id: "ActiveTitle" }));
-}, Q = (s) => {
-  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, l = C(), c = G(), a = c.isOverflowing, t = m(d.tabList, a && d.collapsed), i = (w) => {
-    const [E] = w;
-    E && o(E);
-  }, x = /* @__PURE__ */ e.createElement(f.TabList, { className: d.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(u, { id: "Titles" })), g = a && /* @__PURE__ */ e.createElement(J, { id: l }), h = a && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
+}, 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" }));
+}, V = (s) => {
+  const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = p(), c = G(), l = c.isOverflowing, t = m(b.tabList, l && b.collapsed), i = (N) => {
+    const [T] = N;
+    T && o(T);
+  }, v = /* @__PURE__ */ e.createElement(E.TabList, { className: b.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(f, { id: "Titles" })), g = l && /* @__PURE__ */ e.createElement(U, { id: a }), w = l && /* @__PURE__ */ e.createElement(O, null, /* @__PURE__ */ e.createElement(
     F,
     {
       style: "soft",
-      className: d.contextMenuButton,
+      className: b.contextMenuButton,
       variant: "secondary",
-      "aria-labelledby": l
+      "aria-labelledby": a
     },
     /* @__PURE__ */ e.createElement(A, null)
   ), /* @__PURE__ */ e.createElement(
@@ -72,60 +74,60 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
       selectionMode: "navigation",
       onSelectionChange: i
     },
-    /* @__PURE__ */ e.createElement(u, { id: "ContextMenuItems" })
+    /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" })
   ));
-  return /* @__PURE__ */ e.createElement("div", { className: t }, x, g, h);
+  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] = T(
+  const { children: n, className: r, defaultSelectedKey: o, disabledKeys: a, ...c } = s, l = m(k.tabs, r), [t, i] = C(
     o
   );
   return /* @__PURE__ */ e.createElement(P, null, n, /* @__PURE__ */ e.createElement(
-    f.Tabs,
+    E.Tabs,
     {
-      className: a,
+      className: l,
       ...c,
       selectedKey: t,
       onSelectionChange: i,
-      disabledKeys: l
+      disabledKeys: a
     },
     /* @__PURE__ */ e.createElement(
-      Q,
+      V,
       {
         selection: t,
         onContextMenuSelectionChange: i,
-        disabledKeys: l
+        disabledKeys: a
       }
     ),
-    /* @__PURE__ */ e.createElement(u, { id: "Panels" })
+    /* @__PURE__ */ e.createElement(f, { id: "Panels" })
   ));
-}), v = y({
+}), x = I({
   id: "undefined"
-}), U = () => I(v), V = v.Provider, be = (s) => {
-  const { children: n, className: r, ...o } = s, { id: l } = U(), c = m(p.tabTitle, r);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(b, { id: "Titles" }, /* @__PURE__ */ e.createElement(f.Tab, { ...o, id: l, className: c }, (a) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, n), /* @__PURE__ */ e.createElement(b, { id: "ActiveTitle" }, a.isSelected && n)))), /* @__PURE__ */ e.createElement(b, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { id: l }, n)));
-}, X = "flow--tabs--tab--tab-panel", Y = {
-  tabPanel: X
-}, ue = (s) => {
+}), X = () => y(x), Y = x.Provider, fe = (s) => {
+  const { children: n, className: r, ...o } = s, { id: a } = X(), c = m(d.tabTitle, r);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(u, { id: "Titles" }, /* @__PURE__ */ e.createElement(E.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(R, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: d.text }, n)), /* @__PURE__ */ e.createElement(u, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(u, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(L, { className: d.menuItem, id: a }, n)));
+}, Z = "flow--tabs--tab--tab-panel", _ = {
+  tabPanel: Z
+}, Ee = (s) => {
   const {
     children: n,
     className: r,
     shouldForceMount: o = !0,
-    id: l,
+    id: a,
     ...c
-  } = s, a = m(Y.tabPanel, r), t = C(), i = l ?? t;
-  return /* @__PURE__ */ e.createElement(b, { id: "Panels" }, /* @__PURE__ */ e.createElement(
-    f.TabPanel,
+  } = s, l = m(_.tabPanel, r), t = p(), i = a ?? t;
+  return /* @__PURE__ */ e.createElement(u, { id: "Panels" }, /* @__PURE__ */ e.createElement(
+    E.TabPanel,
     {
-      className: a,
+      className: l,
       shouldForceMount: o,
       id: i,
       ...c
     },
-    /* @__PURE__ */ e.createElement(V, { value: { id: i } }, n)
+    /* @__PURE__ */ e.createElement(Y, { value: { id: i } }, n)
   ));
 };
 export {
-  ue as Tab,
-  be as TabTitle,
+  Ee as Tab,
+  fe as TabTitle,
   de as Tabs
 };