@mezo-org/mezo-clay 0.1.0-dev.9 → 0.2.0-dev.1

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

@@ -1,12 +1,15 @@
 import { default as React } from 'react';
-import { AccordionProps as BaseAccordionProps } from 'baseui/accordion';
+import { AccordionProps as BaseAccordionProps, PanelProps as BasePanelProps } from 'baseui/accordion';
 import { Icon } from 'baseui/icon';
 import { ACCORDION_SIZE, PANEL_ARTWORK_SIZE } from './constants';
 export interface AccordionProps extends BaseAccordionProps {
+    id?: string;
     size: keyof typeof ACCORDION_SIZE;
     toggleIcon?: React.ReactElement<typeof Icon>;
 }
-export type { PanelProps } from 'baseui/accordion';
+export type PanelProps = BasePanelProps & {
+    id?: string;
+};
 export interface PanelTitleProps {
     artwork?: React.ReactNode;
     artworkSize?: keyof typeof PANEL_ARTWORK_SIZE;

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,22 @@
+import { ComponentType } from 'react';
+import { AvatarProps as BaseAvatarProps } from 'baseui/avatar';
+import { IconProps } from 'baseui/icon';
+export type AvatarSize = "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | string;
+export type AvatarProps = Omit<BaseAvatarProps, "size"> & {
+    size?: AvatarSize;
+    backgroundColor?: string;
+};
+export declare const AVATAR_SIZE: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+    xxlarge: string;
+};
+export declare function Avatar({ backgroundColor, initials, name, overrides, size, src, }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type IconAvatarProps = Omit<AvatarProps, "initials"> & {
+    icon?: ComponentType<IconProps>;
+    iconProps?: IconProps;
+};
+export declare function IconAvatar({ overrides, size, src, icon, iconProps, ...restProps }: IconAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/avatar/avatar.js

@@ -0,0 +1,102 @@
+import { jsx as m } from "react/jsx-runtime";
+import { mergeOverrides as p } from "baseui";
+import { Avatar as s, StyledInitials as d } from "baseui/avatar";
+import g from "../../themes/typography.js";
+import { getInitials as A } from "../../utils/index.js";
+import { User01 as c } from "../icons/solid/user/index.js";
+const u = {
+  xsmall: "24px",
+  small: "36px",
+  medium: "48px",
+  large: "64px",
+  xlarge: "80px",
+  xxlarge: "116px"
+}, I = {
+  xsmall: "LabelXSmall",
+  small: "LabelMedium",
+  medium: "HeadingXSmall",
+  large: "HeadingMedium",
+  xlarge: "DisplayXSmall",
+  xxlarge: "DisplayMedium"
+};
+function f({
+  backgroundColor: e,
+  initials: l,
+  name: a,
+  overrides: i,
+  size: r,
+  src: o
+}) {
+  return /* @__PURE__ */ m(
+    s,
+    {
+      initials: r === "xsmall" && !l ? A(a).charAt(0) : l,
+      name: a,
+      size: u[r] || r,
+      src: o,
+      overrides: p(
+        {
+          Root: {
+            style: ({ $theme: t }) => {
+              const x = t.colors[e] || e || t.colors.borderAccent;
+              return { backgroundColor: o ? "transparent" : x };
+            }
+          },
+          Initials: {
+            style: () => ({
+              ...g[I[r] || "HeadingXSmall"]
+            })
+          }
+        },
+        i
+      )
+    }
+  );
+}
+const n = {
+  xsmall: "12px",
+  small: "16px",
+  medium: "20px",
+  large: "26px",
+  xlarge: "32px",
+  xxlarge: "48px"
+};
+function T({
+  overrides: e,
+  size: l,
+  src: a,
+  icon: i = c,
+  iconProps: r = {},
+  ...o
+}) {
+  const t = i;
+  return /* @__PURE__ */ m(
+    f,
+    {
+      overrides: p(
+        {
+          Initials: {
+            ...!a && {
+              component: (x) => /* @__PURE__ */ m(d, { ...x, children: /* @__PURE__ */ m(
+                t,
+                {
+                  size: n[l] || n.medium,
+                  ...r
+                }
+              ) })
+            }
+          }
+        },
+        e
+      ),
+      size: l,
+      src: a,
+      ...o
+    }
+  );
+}
+export {
+  u as AVATAR_SIZE,
+  f as Avatar,
+  T as IconAvatar
+};

package/dist/components/avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './avatar';

package/dist/components/avatar/index.js

@@ -0,0 +1,6 @@
+import { AVATAR_SIZE as r, Avatar as o, IconAvatar as t } from "./avatar.js";
+export {
+  r as AVATAR_SIZE,
+  o as Avatar,
+  t as IconAvatar
+};

package/dist/components/badge/hint.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import { HintDot as d } from "baseui/badge";
+import { mergeOverrides as m } from "baseui";
+function c({
+  style: r = "accent",
+  overrides: e,
+  ...o
+}) {
+  const t = m(
+    {
+      Badge: {
+        style: () => ({
+          borderWidth: "2px"
+        })
+      }
+    },
+    e
+  );
+  return /* @__PURE__ */ i(d, { overrides: t, ...o, color: r });
+}
+export {
+  c as default
+};

package/dist/components/badge/index.js

@@ -0,0 +1,6 @@
+import { default as e } from "./hint.js";
+import { default as f } from "./notification.js";
+export {
+  e as HintBadge,
+  f as NotificationBadge
+};

package/dist/components/badge/notification.js

@@ -0,0 +1,32 @@
+import { jsx as a } from "react/jsx-runtime";
+import { NotificationCircle as t } from "baseui/badge";
+import { mergeOverrides as c } from "baseui";
+function m({
+  size: r = "small",
+  style: s = "positive",
+  overrides: o,
+  ...e
+}) {
+  const l = c(
+    {
+      Badge: {
+        style: ({ $theme: i }) => ({
+          width: r === "small" ? i.sizing.scale600 : i.sizing.scale700,
+          height: r === "small" ? i.sizing.scale600 : i.sizing.scale700
+        })
+      }
+    },
+    o
+  );
+  return /* @__PURE__ */ a(
+    t,
+    {
+      overrides: l,
+      ...e,
+      color: s
+    }
+  );
+}
+export {
+  m as default
+};

package/dist/components/banner/banner.d.ts

@@ -1,8 +1,10 @@
 import { BannerProps, BannerVariantProps } from './types';
 export declare const useBannerContext: () => {
     actionLabel: BannerProps["actionLabel"];
+    actionButtonId: BannerProps["actionButtonId"];
     artworkType: BannerProps["artworkType"];
     hierarchy: BannerProps["hierarchy"];
+    id: BannerProps["id"];
     kind?: BannerProps["kind"];
     onClick: BannerProps["onClick"];
 };
@@ -10,8 +12,8 @@ export declare function BannerCloseIcon({ size }: {
     size: string;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function BannerTrailingButtonContainer(): import("react/jsx-runtime").JSX.Element;
-export default function Banner({ actionIcon, actionLabel, artworkIcon, artworkType, children, hierarchy, kind, onClick, overrides, nested, title, }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export default function Banner({ actionIcon, actionLabel, actionButtonId, artworkIcon, artworkType, children, hierarchy, id, kind, onClick, overrides, nested, title, }: BannerProps): import("react/jsx-runtime").JSX.Element;
 export declare function BannerInfo({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
 export declare function BannerNegative({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
 export declare function BannerPositive({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
-export declare function BannerWarning({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerWarning({ artworkType, children, overrides, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/banner/banner.js

@@ -0,0 +1,282 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useMemo as m, createContext as I, useContext as y } from "react";
+import { mergeOverrides as k, useStyletron as v } from "baseui";
+import { Banner as x, StyledTrailingButtonContainer as S } from "baseui/banner";
+import { Button as M } from "baseui/button";
+import { checkForContextError as T } from "../../utils/index.js";
+import A from "../icons/line/close/index.js";
+import { InfoCircleBadge as O, InfoCircle as P } from "../icons/solid/info-circle/index.js";
+import { CheckCircle as h } from "../icons/solid/check-circle/index.js";
+import { AlertTriangleBadge as _, AlertTriangle as L } from "../icons/solid/alert-triangle/index.js";
+const C = I({
+  actionLabel: void 0,
+  actionButtonId: void 0,
+  artworkType: void 0,
+  hierarchy: "low",
+  id: void 0,
+  kind: "info",
+  onClick: void 0
+}), a = () => {
+  const o = y(C);
+  return T(o, "Banner"), o;
+};
+function U({ size: o }) {
+  const { hierarchy: t, kind: n } = a(), r = t === "low" || n === "warning" ? "black" : "white";
+  return /* @__PURE__ */ c(
+    A,
+    {
+      size: o,
+      overrides: {
+        Svg: {
+          style: ({ $theme: e }) => ({ stroke: e.colors[r] })
+        }
+      }
+    }
+  );
+}
+function R(o, t, n) {
+  const r = t === "low", { colors: e } = n, i = r ? e.black : e.white;
+  return o === "warning" ? {
+    backgroundColor: e.yellow400,
+    color: e.black
+  } : o === "negative" ? {
+    backgroundColor: r ? e.red100 : e.red700,
+    color: i
+  } : o === "positive" ? {
+    backgroundColor: r ? e.green100 : e.green700,
+    color: i
+  } : {
+    backgroundColor: r ? e.blue400 : e.blue700,
+    color: i
+  };
+}
+function W() {
+  const [o, t] = v(), { actionLabel: n, actionButtonId: r, hierarchy: e, id: i, kind: s, onClick: l } = a();
+  return /* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(
+    M,
+    {
+      id: r || i && `${i}_action-button`,
+      colors: R(s, e, t),
+      onClick: l,
+      size: "compact",
+      shape: "pill",
+      overrides: { BaseButton: { style: { whiteSpace: "nowrap" } } },
+      children: n
+    }
+  ) });
+}
+function u({
+  actionIcon: o,
+  actionLabel: t,
+  actionButtonId: n,
+  artworkIcon: r,
+  artworkType: e,
+  children: i,
+  hierarchy: s,
+  id: l,
+  kind: d,
+  onClick: g,
+  overrides: p,
+  nested: b,
+  title: w
+}) {
+  return /* @__PURE__ */ c(
+    C.Provider,
+    {
+      value: m(
+        () => ({
+          actionLabel: t,
+          actionButtonId: n,
+          artworkType: e,
+          hierarchy: s,
+          id: l,
+          kind: d,
+          onClick: g
+        }),
+        [
+          t,
+          n,
+          e,
+          s,
+          l,
+          d,
+          g
+        ]
+      ),
+      children: /* @__PURE__ */ c(
+        x,
+        {
+          action: { icon: o, label: t, onClick: g },
+          artwork: r && { icon: r, type: e } || void 0,
+          hierarchy: s,
+          kind: d,
+          overrides: k(
+            {
+              Root: {
+                props: {
+                  id: l
+                },
+                style: ({ $theme: f }) => ({
+                  color: s === "low" ? f.colors.contentOnColorInverse : f.colors.white
+                })
+              },
+              TrailingButtonContainer: {
+                component: W
+              },
+              TrailingIconButton: {
+                props: {
+                  id: n || l && `${l}_action-button`
+                }
+              }
+            },
+            p
+          ),
+          nested: b,
+          title: w,
+          children: i
+        }
+      )
+    }
+  );
+}
+function B({ size: o }) {
+  const { artworkType: t, hierarchy: n, kind: r } = a();
+  function e(i) {
+    return n === "high" ? i.colors.white : r === "negative" ? i.colors.red300 : i.colors.blue400;
+  }
+  return t === "badge" ? /* @__PURE__ */ c(
+    O,
+    {
+      size: o,
+      overrides: {
+        Svg: {
+          style: ({ $theme: i }) => ({
+            color: i.colors.black,
+            stroke: e(i)
+          })
+        }
+      }
+    }
+  ) : /* @__PURE__ */ c(P, {});
+}
+function V({
+  artworkType: o,
+  children: t,
+  ...n
+}) {
+  return /* @__PURE__ */ c(
+    u,
+    {
+      artworkIcon: o ? B : void 0,
+      artworkType: o,
+      kind: "info",
+      ...n,
+      children: t
+    }
+  );
+}
+function X({
+  artworkType: o,
+  children: t,
+  ...n
+}) {
+  return /* @__PURE__ */ c(
+    u,
+    {
+      artworkIcon: o ? B : void 0,
+      artworkType: o,
+      kind: "negative",
+      ...n,
+      children: t
+    }
+  );
+}
+function j({ size: o }) {
+  const { artworkType: t, hierarchy: n } = a(), [, r] = v(), e = n === "high" ? r.colors.white : r.colors.green200;
+  return t === "badge" ? /* @__PURE__ */ c(
+    h,
+    {
+      size: o,
+      color: r.colors.black,
+      borderColor: e,
+      checkMarkStrokeWidth: "2px",
+      checkMarkColor: e
+    }
+  ) : /* @__PURE__ */ c(
+    h,
+    {
+      borderColor: n === "high" ? r.colors.white : r.colors.black,
+      checkMarkColor: n === "high" ? r.colors.positive : r.colors.backgroundPositiveLight
+    }
+  );
+}
+function Y({
+  artworkType: o,
+  children: t,
+  ...n
+}) {
+  return /* @__PURE__ */ c(
+    u,
+    {
+      artworkIcon: o ? j : void 0,
+      artworkType: o,
+      kind: "positive",
+      ...n,
+      children: t
+    }
+  );
+}
+function z({ size: o }) {
+  const { artworkType: t, hierarchy: n } = a();
+  return t === "badge" ? /* @__PURE__ */ c(
+    _,
+    {
+      size: o,
+      overrides: {
+        Svg: {
+          style: ({ $theme: r }) => ({
+            color: r.colors.black,
+            stroke: n === "high" ? r.colors.white : r.colors.yellow400
+          })
+        }
+      }
+    }
+  ) : /* @__PURE__ */ c(L, {});
+}
+function Z({
+  artworkType: o,
+  children: t,
+  overrides: n,
+  ...r
+}) {
+  return /* @__PURE__ */ c(
+    u,
+    {
+      artworkIcon: o ? z : void 0,
+      artworkType: o,
+      kind: "warning",
+      overrides: k(
+        {
+          Root: {
+            style: ({ $theme: e }) => ({
+              color: e.colors.contentOnColorInverse
+            })
+          }
+        },
+        n
+      ),
+      ...r,
+      children: t
+    }
+  );
+}
+export {
+  U as BannerCloseIcon,
+  V as BannerInfo,
+  X as BannerNegative,
+  Y as BannerPositive,
+  W as BannerTrailingButtonContainer,
+  Z as BannerWarning,
+  u as default,
+  a as useBannerContext
+};

package/dist/components/banner/index.js

@@ -0,0 +1,13 @@
+import { default as a, BannerCloseIcon as r, BannerInfo as o, BannerNegative as t, BannerPositive as i, BannerTrailingButtonContainer as B, BannerWarning as T } from "./banner.js";
+import { ARTWORK_TYPE as R, StyledTrailingButtonContainer as f } from "baseui/banner";
+export {
+  R as BANNER_ARTWORK_TYPE,
+  a as Banner,
+  r as BannerCloseIcon,
+  o as BannerInfo,
+  t as BannerNegative,
+  i as BannerPositive,
+  B as BannerTrailingButtonContainer,
+  T as BannerWarning,
+  f as StyledTrailingButtonContainer
+};

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

@@ -2,9 +2,11 @@ import { BannerProps as BaseBannerProps, ActionContent as BaseActionContent, Art
 export interface BannerProps extends Omit<Omit<BaseBannerProps, "action">, "artwork"> {
     actionIcon?: BaseActionContent["icon"];
     actionLabel?: BaseActionContent["label"];
+    actionButtonId?: string;
     onClick?: BaseActionContent["onClick"];
     artworkIcon?: BaseArtworkContent["icon"];
     artworkType?: BaseArtworkContent["type"];
+    id?: string;
 }
 export interface BannerVariantProps extends Omit<Omit<BannerProps, "artworkIcon">, "kind"> {
 }