@mittwald/flow-react-components 0.1.0-alpha.24 → 0.1.0-alpha.25

package/dist/InlineAlert.d.ts

@@ -6,13 +6,13 @@ declare const InlineAlert: FC<InlineAlertProps>;
 export { InlineAlert }
 export default InlineAlert;
 
-export declare interface InlineAlertProps extends PropsWithChildren<ComponentProps<"aside">>, PropsWithVariant {
+export declare interface InlineAlertProps extends PropsWithChildren<ComponentProps<"aside">>, PropsWithStatus {
 }
 
-declare type PropsWithVariant<T extends Variant = Variant, P = unknown> = P & {
-    variant?: T;
+declare type PropsWithStatus<T extends Status = Status, P = unknown> = P & {
+    status?: T;
 };
 
-declare type Variant = "info" | "success" | "warning" | "danger";
+declare type Status = "info" | "success" | "warning" | "danger";
 
 export { }

package/dist/InlineAlert.js

@@ -5,10 +5,10 @@ import "./propsContext-Dx7WKmmM.js";
 import { P as c } from "./PropsContextProvider-CEoxD8yK.js";
 import { u as m } from "./useProps-C7GIMcgB.js";
 import { c as f } from "./clsx-DB4S2d7J.js";
-import { S as p } from "./StatusIcon-BBNE68gH.js";
-const d = "flow--inline-alert", u = "flow--inline-alert--content", g = "flow--inline-alert--status-icon", w = "flow--inline-alert--heading", I = "flow--inline-alert--info", N = "flow--inline-alert--warning", h = "flow--inline-alert--danger", A = "flow--inline-alert--success", n = {
-  inlineAlert: d,
-  content: u,
+import { S as p } from "./StatusIcon-BVWjvT3I.js";
+const u = "flow--inline-alert", d = "flow--inline-alert--content", g = "flow--inline-alert--status-icon", w = "flow--inline-alert--heading", I = "flow--inline-alert--info", N = "flow--inline-alert--warning", h = "flow--inline-alert--danger", A = "flow--inline-alert--success", n = {
+  inlineAlert: u,
+  content: d,
   statusIcon: g,
   heading: w,
   info: I,
@@ -18,10 +18,10 @@ const d = "flow--inline-alert", u = "flow--inline-alert--content", g = "flow--in
 }, y = (s) => {
   const {
     children: o,
-    className: a,
-    variant: t = "info",
-    ...l
-  } = m("InlineAlert", s), i = f(n.inlineAlert, n[t], a), r = {
+    className: l,
+    status: t = "info",
+    ...a
+  } = m("InlineAlert", s), i = f(n.inlineAlert, n[t], l), r = {
     Heading: {
       className: n.heading,
       level: 3
@@ -30,7 +30,7 @@ const d = "flow--inline-alert", u = "flow--inline-alert--content", g = "flow--in
       className: n.content
     }
   };
-  return /* @__PURE__ */ e.createElement("aside", { ...l, className: i }, /* @__PURE__ */ e.createElement(p, { className: n.statusIcon, variant: t }), /* @__PURE__ */ e.createElement(c, { props: r }, o));
+  return /* @__PURE__ */ e.createElement("aside", { ...a, className: i }, /* @__PURE__ */ e.createElement(p, { className: n.statusIcon, status: t }), /* @__PURE__ */ e.createElement(c, { props: r }, o));
 };
 export {
   y as InlineAlert,

package/dist/Navigation.d.ts

@@ -1,21 +1,19 @@
-import { AriaMenuProps } from 'react-aria';
+import * as Aria from 'react-aria-components';
 import { ComponentProps } from 'react';
-import { ComponentType } from 'react';
-import { ItemProps } from 'react-stately';
-import { default as React_2 } from 'react';
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
 
-declare function Navigation<T extends object>(props: NavigationProps<T>): React_2.JSX.Element;
+declare const Navigation: FC<NavigationProps>;
 export { Navigation }
 export default Navigation;
 
-export declare const NavigationItem: ComponentType<NavigationItemProps<never>>;
+export declare const NavigationItem: FC<NavigationItemProps>;
 
-export declare interface NavigationItemProps<T = never> extends ItemProps<T> {
+export declare interface NavigationItemProps extends PropsWithChildren<Omit<Aria.LinkProps, "children">> {
     isCurrent?: boolean;
-    linkComponent?: ComponentType<Omit<ComponentProps<"a">, "ref">>;
 }
 
-export declare interface NavigationProps<T = never> extends AriaMenuProps<T> {
+export declare interface NavigationProps extends PropsWithChildren<ComponentProps<"nav">> {
     className?: string;
 }
 

package/dist/Navigation.js

@@ -1,53 +1,41 @@
 "use client"
 /* */
-import a from "react";
-import { useTreeState as p, Item as v } from "react-stately";
+import t from "react";
+import { c as r } from "./clsx-DB4S2d7J.js";
 import "./propsContext-Dx7WKmmM.js";
-import { P as g } from "./PropsContextProvider-CEoxD8yK.js";
+import { P as m } from "./PropsContextProvider-CEoxD8yK.js";
 import "@react-aria/utils";
-import * as l from "remeda";
-import { useMenuItem as f, useMenu as I } from "react-aria";
-import { c as N } from "./clsx-DB4S2d7J.js";
-const x = "flow--navigation", c = {
-  navigation: x
-}, P = "flow--navigation--navigation-item", y = "flow--navigation--navigation-item--icon", k = "flow--navigation--navigation-item--text", r = {
-  navigationItem: P,
-  icon: y,
-  text: k
-}, C = (e, n, o) => {
-  const t = f(e, n, o);
-  return t.menuItemProps = l.omit(t.menuItemProps, ["role"]), t;
-};
-function E(e) {
-  const { item: n, state: o } = e, { isCurrent: t, linkComponent: m = "a" } = n.props, i = a.useRef(null), { menuItemProps: s } = C({ key: n.key }, o, i), u = {
+import * as v from "react-aria-components";
+const g = "flow--navigation", p = {
+  navigation: g
+}, w = (a) => {
+  const { className: n, children: o, ...e } = a, i = r(p.navigation, n);
+  return /* @__PURE__ */ t.createElement("nav", { className: i, role: "navigation", ...e }, /* @__PURE__ */ t.createElement("ul", null, o));
+}, f = "flow--navigation--navigation-item", N = "flow--navigation--navigation-item--icon", x = "flow--navigation--navigation-item--text", s = {
+  navigationItem: f,
+  icon: N,
+  text: x
+}, P = (a) => {
+  const { children: n, isCurrent: o, className: e, ...i } = a, c = r(s.navigationItem, e), l = {
     Text: {
-      className: r.text
+      className: s.text
     },
     Icon: {
-      className: r.icon
+      className: s.icon
     }
   };
-  return /* @__PURE__ */ a.createElement("li", { className: r.navigationItem }, /* @__PURE__ */ a.createElement(
-    m,
+  return /* @__PURE__ */ t.createElement("li", null, /* @__PURE__ */ t.createElement(
+    v.Link,
     {
-      ...s,
-      ref: i,
-      "aria-current": t ? "page" : !1
+      className: c,
+      "aria-current": o ? "page" : !1,
+      ...i
     },
-    /* @__PURE__ */ a.createElement(g, { props: u }, n.rendered)
+    /* @__PURE__ */ t.createElement(m, { props: l }, n)
   ));
-}
-const d = (e, n, o) => {
-  const t = I(e, n, o);
-  return t.menuProps = l.omit(t.menuProps, ["role"]), t;
 };
-function $(e) {
-  const { className: n } = e, o = p(e), t = a.useRef(null), { menuProps: m } = d(e, o, t), i = N(c.navigation, n);
-  return /* @__PURE__ */ a.createElement("nav", { ...m, className: i, ref: t }, /* @__PURE__ */ a.createElement("ul", { className: c.list }, Array.from(o.collection).map((s) => /* @__PURE__ */ a.createElement(E, { state: o, item: s, key: s.key }))));
-}
-const b = v;
 export {
-  $ as Navigation,
-  b as NavigationItem,
-  $ as default
+  w as Navigation,
+  P as NavigationItem,
+  w as default
 };

package/dist/StatusBadge.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
+
+declare type PropsWithStatus<T extends Status = Status, P = unknown> = P & {
+    status?: T;
+};
+
+declare type Status = "info" | "success" | "warning" | "danger";
+
+declare const StatusBadge: FC<StatusBadgeProps>;
+export { StatusBadge }
+export default StatusBadge;
+
+export declare interface StatusBadgeProps extends PropsWithChildren, PropsWithStatus {
+    className?: string;
+}
+
+export { }

package/dist/StatusBadge.js

@@ -0,0 +1,21 @@
+"use client"
+/* */
+import t from "react";
+import { c as l } from "./clsx-DB4S2d7J.js";
+import { S as u } from "./StatusIcon-BVWjvT3I.js";
+import { T as d } from "./Text--ofl9X5e.js";
+const g = "flow--status-badge", m = "flow--status-badge--text", f = "flow--status-badge--info", i = "flow--status-badge--success", w = "flow--status-badge--warning", x = "flow--status-badge--danger", s = {
+  statusBadge: g,
+  text: m,
+  info: f,
+  success: i,
+  warning: w,
+  danger: x
+}, E = (e) => {
+  const { children: o, className: n, status: a = "info", ...c } = e, r = l(s.statusBadge, s[a], n);
+  return /* @__PURE__ */ t.createElement("div", { className: r, ...c }, /* @__PURE__ */ t.createElement(u, { size: "s", className: s.statusIcon, status: a }), /* @__PURE__ */ t.createElement(d, { className: s.text }, o));
+};
+export {
+  E as StatusBadge,
+  E as default
+};

package/dist/{StatusIcon-BBNE68gH.js → StatusIcon-BVWjvT3I.js}

@@ -26,8 +26,8 @@ const m = {
   info: e,
   success: i,
   warning: u
-}, W = (t) => {
-  const { variant: n = "info", ...o } = t, s = I(m).format(`statusIcon.${n}`), r = g[n];
+}, W = (n) => {
+  const { status: t = "info", ...o } = n, s = I(m).format(`statusIcon.${t}`), r = g[t];
   return /* @__PURE__ */ a.createElement(r, { "aria-label": s, ...o });
 };
 export {

package/dist/StatusIcon.d.ts

@@ -7,19 +7,19 @@ declare interface IconProps extends PropsWithChildren<Omit<SvgAttributeProps, "n
     size?: "s" | "m" | "l";
 }
 
-declare type PropsWithVariant<T extends Variant = Variant, P = unknown> = P & {
-    variant?: T;
+declare type PropsWithStatus<T extends Status = Status, P = unknown> = P & {
+    status?: T;
 };
 
+declare type Status = "info" | "success" | "warning" | "danger";
+
 declare const StatusIcon: FC<StatusIconProps>;
 export { StatusIcon }
 export default StatusIcon;
 
-export declare interface StatusIconProps extends PropsWithVariant, IconProps {
+export declare interface StatusIconProps extends PropsWithStatus, IconProps {
 }
 
 declare type SvgAttributeProps = SVGAttributes<SVGSVGElement>;
 
-declare type Variant = "info" | "success" | "warning" | "danger";
-
 export { }

package/dist/StatusIcon.js

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