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

package/dist/components/menu/menu-items.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType, ReactNode } from 'react';
+import { IconProps } from 'baseui/icon';
+export type MenuListItemProps = {
+    artwork?: ComponentType<IconProps>;
+    artworkProps?: IconProps;
+    endEnhancer?: ReactNode;
+    label: ReactNode;
+    id?: string;
+};
+export type MenuProfileItemProps = {
+    title: string;
+    subtitle?: string;
+    body?: string;
+    imgUrl?: string;
+    id?: string;
+};
+export declare function MenuListItem({ artwork, artworkProps, endEnhancer, label, id, }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuProfileItem({ title, subtitle, body, imgUrl, id, }: MenuProfileItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/menu-items.js

@@ -0,0 +1,143 @@
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { Block as r } from "baseui/block";
+import { StyledProfileImg as S, StyledProfileLabelsContainer as z, StyledProfileTitle as P, StyledProfileSubtitle as I, StyledProfileBody as x } from "baseui/menu";
+import { useStyletron as p } from "baseui";
+import o from "../../themes/typography.js";
+import { toTitleCase as y, getInitials as L } from "../../utils/index.js";
+import { useMenuContext as u } from "./context.js";
+function A({
+  artwork: a,
+  artworkProps: c = {},
+  endEnhancer: t,
+  label: m,
+  id: g
+}) {
+  const [i, e] = p(), { size: s } = u(), n = a, d = {
+    small: e.sizing.scale600,
+    medium: e.sizing.scale700,
+    large: e.sizing.scale800
+  }, h = {
+    display: "inline-flex",
+    alignItems: "center"
+  };
+  return /* @__PURE__ */ f(r, { className: i({ display: "flex", alignItems: "center" }), id: g, children: [
+    a && /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          marginRight: e.sizing.scale600
+        }),
+        children: /* @__PURE__ */ l(n, { size: d[s], ...c })
+      }
+    ),
+    /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          ...o[`Paragraph${y(s)}`]
+        }),
+        children: m
+      }
+    ),
+    t && /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          marginLeft: "auto",
+          paddingLeft: e.sizing.scale600
+        }),
+        children: t
+      }
+    )
+  ] });
+}
+function B({
+  title: a,
+  subtitle: c,
+  body: t,
+  imgUrl: m,
+  id: g
+}) {
+  const [i, e] = p(), { size: s } = u(), n = s === "large" ? e.sizing.scale1200 : e.sizing.scale950, d = {
+    small: "ParagraphXSmall",
+    medium: "ParagraphSmall",
+    large: "ParagraphMedium"
+  };
+  return /* @__PURE__ */ f(
+    r,
+    {
+      id: g,
+      className: i({
+        display: "flex",
+        alignItems: "center",
+        margin: `${s === "large" ? e.sizing.scale300 : e.sizing.scale0} 0`
+      }),
+      children: [
+        /* @__PURE__ */ l(
+          r,
+          {
+            className: i({
+              display: "inline-flex",
+              alignItems: "center"
+            }),
+            children: m ? /* @__PURE__ */ l(
+              S,
+              {
+                src: m,
+                alt: a,
+                $style: {
+                  width: n,
+                  height: n
+                }
+              }
+            ) : /* @__PURE__ */ l(
+              r,
+              {
+                className: i({
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: n,
+                  height: n,
+                  borderRadius: "9999px",
+                  backgroundColor: e.colors.borderAccent,
+                  color: e.colors.contentOnColor,
+                  ...s === "large" ? o.HeadingXSmall : o.LabelMedium
+                }),
+                children: L(a)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ f(z, { $style: { alignSelf: "auto" }, children: [
+          a && /* @__PURE__ */ l(
+            P,
+            {
+              $style: {
+                ...o[`Label${y(s)}`]
+              },
+              children: a
+            }
+          ),
+          c && /* @__PURE__ */ l(
+            I,
+            {
+              $style: {
+                ...o[d[s]]
+              },
+              children: c
+            }
+          ),
+          t && /* @__PURE__ */ l(x, { children: t })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  A as MenuListItem,
+  B as MenuProfileItem
+};

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { StatefulMenuProps as BaseStatefulMenuProps } from 'baseui/menu';
+import { MenuSize } from './types';
+import { MenuListItemProps, MenuProfileItemProps } from './menu-items';
+export type MenuProps = BaseStatefulMenuProps & {
+    id?: string;
+    noResultsMsg?: ReactNode;
+    size?: MenuSize;
+};
+export declare function Menu({ id, overrides, size, noResultsMsg, ...restProps }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export type ArrayMenuListItems = ReadonlyArray<MenuListItemProps>;
+export type GroupedMenuListItems = {
+    __ungrouped: ArrayMenuListItems;
+    [x: string]: ArrayMenuListItems;
+};
+export type MenuListProps = Omit<MenuProps, "items"> & {
+    items: ArrayMenuListItems | GroupedMenuListItems;
+};
+export declare function MenuList({ overrides, ...restProps }: MenuListProps): import("react/jsx-runtime").JSX.Element;
+export type ArrayMenuProfileItems = ReadonlyArray<MenuProfileItemProps>;
+export type GroupedMenuProfileItems = {
+    __ungrouped: ArrayMenuProfileItems;
+    [x: string]: ArrayMenuProfileItems;
+};
+export type MenuProfileProps = Omit<MenuProps, "items"> & {
+    items: ArrayMenuProfileItems | GroupedMenuProfileItems;
+};
+export declare function MenuProfile({ overrides, ...restProps }: MenuProfileProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/menu.js

@@ -0,0 +1,104 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { mergeOverrides as n } from "baseui";
+import { StatefulMenu as u } from "baseui/menu";
+import s from "../../themes/typography.js";
+import { toTitleCase as c } from "../../utils/index.js";
+import { MenuListItem as a, MenuProfileItem as f } from "./menu-items.js";
+import { MenuContext as g } from "./context.js";
+function p({
+  id: t,
+  overrides: i,
+  size: o = "medium",
+  noResultsMsg: l = "No results found",
+  ...m
+}) {
+  return /* @__PURE__ */ e(g.Provider, { value: d(() => ({ size: o }), [o]), children: /* @__PURE__ */ e(
+    u,
+    {
+      overrides: n(
+        {
+          List: {
+            props: {
+              id: t
+            }
+          },
+          Option: {
+            props: {
+              overrides: {
+                ListItem: {
+                  style: ({ $theme: r }) => ({
+                    ":active": {
+                      border: `3px solid ${r.colors.borderSelected}`
+                    },
+                    ":focus": {
+                      border: `3px solid ${r.colors.borderAccent}`
+                    }
+                  })
+                }
+              }
+            }
+          },
+          OptgroupHeader: {
+            style: ({ $theme: r }) => ({
+              color: r.colors.contentTertiary,
+              paddingLeft: r.sizing.scale600,
+              paddingRight: r.sizing.scale600,
+              ...s[`Label${c(o)}`]
+            })
+          },
+          EmptyState: {
+            style: ({ $theme: r }) => ({
+              color: r.colors.contentPrimary,
+              ...s.HeadingXSmall
+            })
+          }
+        },
+        i
+      ),
+      noResultsMsg: l,
+      ...m
+    }
+  ) });
+}
+function P({ overrides: t, ...i }) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      overrides: n(
+        {
+          Option: {
+            props: {
+              getItemLabel: (o) => /* @__PURE__ */ e(a, { ...o })
+            }
+          }
+        },
+        t
+      ),
+      ...i
+    }
+  );
+}
+function S({ overrides: t, ...i }) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      overrides: n(
+        {
+          Option: {
+            props: {
+              getItemLabel: (o) => /* @__PURE__ */ e(f, { ...o })
+            }
+          }
+        },
+        t
+      ),
+      ...i
+    }
+  );
+}
+export {
+  p as Menu,
+  P as MenuList,
+  S as MenuProfile
+};

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

@@ -0,0 +1 @@
+export type MenuSize = "small" | "medium" | "large";

package/dist/components/message-card/index.d.ts

@@ -1,2 +1,2 @@
 export { default as MessageCard } from './message-card';
-export type { MessageCardProps } from 'baseui/message-card';
+export type { MessageCardProps } from './message-card';

package/dist/components/message-card/index.js

@@ -0,0 +1,4 @@
+import { default as r } from "./message-card.js";
+export {
+  r as MessageCard
+};

package/dist/components/message-card/message-card.d.ts

@@ -1,5 +1,6 @@
 import { MessageCardProps as MessageCardPropsBaseUi } from 'baseui/message-card';
 export type MessageCardProps = MessageCardPropsBaseUi & {
+    id?: string;
     isLoading?: boolean;
 };
-export default function MessageCard({ onClick, onDismiss, heading, paragraph, buttonLabel, buttonKind, backgroundColor, backgroundColorType, image, overrides, isLoading, }: MessageCardProps): import("react/jsx-runtime").JSX.Element;
+export default function MessageCard({ onClick, onDismiss, heading, paragraph, buttonLabel, buttonKind, backgroundColor, backgroundColorType, image, overrides, isLoading, id, }: MessageCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message-card/message-card.js

@@ -0,0 +1,51 @@
+import { jsx as e } from "react/jsx-runtime";
+import { MessageCard as M } from "baseui/message-card";
+import { useStyletron as l } from "baseui";
+import S from "../skeleton/skeleton.js";
+import { getMessageCardOverrides as v } from "./overrides.js";
+function n({ width: t }) {
+  return /* @__PURE__ */ e(S, { animation: !0, width: t, height: "1em" });
+}
+function O({
+  onClick: t,
+  onDismiss: p,
+  heading: s,
+  paragraph: m,
+  buttonLabel: h,
+  buttonKind: o,
+  backgroundColor: a,
+  backgroundColorType: f,
+  image: i,
+  overrides: d,
+  isLoading: r = !1,
+  id: u
+}) {
+  const [, x] = l();
+  return /* @__PURE__ */ e(
+    M,
+    {
+      onClick: t,
+      onDismiss: p,
+      heading: s && r ? /* @__PURE__ */ e(n, { width: "148px" }) : s,
+      paragraph: m && r ? /* @__PURE__ */ e(n, { width: "100%" }) : m,
+      buttonLabel: h,
+      buttonKind: o,
+      backgroundColor: a,
+      backgroundColorType: f,
+      image: i,
+      overrides: v({
+        overrides: d,
+        image: i,
+        buttonKind: o,
+        backgroundColor: a,
+        backgroundColorType: f,
+        isLoading: r,
+        id: u,
+        theme: x
+      })
+    }
+  );
+}
+export {
+  O as default
+};

package/dist/components/message-card/overrides.d.ts

@@ -1,3 +1,4 @@
+import { Theme } from 'baseui/styles';
 import { MessageCardOverrides as MessageCardOverridesBaseUi, MessageCardProps } from 'baseui/message-card';
 type MessageCardOverrides = {
     overrides: MessageCardOverridesBaseUi;
@@ -6,6 +7,8 @@ type MessageCardOverrides = {
     backgroundColorType: "light" | "dark";
     isLoading?: boolean;
     image: MessageCardProps["image"];
+    id?: string;
+    theme: Theme;
 };
-export declare function getMessageCardOverrides({ overrides, image, buttonKind, backgroundColor, backgroundColorType, isLoading, }: MessageCardOverrides): import('baseui/helpers/overrides').Overrides<any>;
+export declare function getMessageCardOverrides({ overrides, image, buttonKind, backgroundColor, backgroundColorType, isLoading, id, theme, }: MessageCardOverrides): import('baseui/helpers/overrides').Overrides<any>;
 export {};

package/dist/components/message-card/overrides.js

@@ -0,0 +1,165 @@
+import { jsx as a } from "react/jsx-runtime";
+import { mergeOverrides as y } from "baseui";
+import { hexToRgba as f } from "../../utils/index.js";
+import { getButtonHoverStyles as v, getButtonActiveStyles as b } from "../button/overrides.js";
+import k from "../button-icon/button-icon.js";
+import g from "../skeleton/skeleton.js";
+import m from "../icons/line/close/index.js";
+function B() {
+  return /* @__PURE__ */ a(
+    g,
+    {
+      animation: !0,
+      width: "96px",
+      height: "36px",
+      overrides: {
+        Root: {
+          style: ({ $theme: o }) => ({
+            borderRadius: o.borders.radius300,
+            marginTop: o.sizing.scale600
+          })
+        }
+      }
+    }
+  );
+}
+function S({
+  layout: o
+}) {
+  const r = o === "top" ? { height: "132px", width: "100%" } : { width: "112px", order: "1" };
+  return /* @__PURE__ */ a(
+    g,
+    {
+      animation: !0,
+      height: "auto",
+      overrides: {
+        Root: {
+          style: () => r
+        }
+      }
+    }
+  );
+}
+function x(o, r, n) {
+  const e = {
+    border: 0,
+    boxShadow: "none"
+  };
+  return n === "light" ? {
+    color: o.colors.black,
+    ...e
+  } : n === "dark" ? {
+    color: o.colors.white,
+    ...e
+  } : {
+    backgroundColor: o.colors[r] || o.colors.backgroundPrimary,
+    color: o.colors.contentPrimary
+  };
+}
+function C(o, r, n) {
+  return o === "tertiary" ? {
+    color: r.colors.contentPrimary,
+    backgroundColor: "transparent",
+    marginLeft: "12px"
+  } : n === "light" ? {
+    color: r.colors.white,
+    backgroundColor: r.colors.black
+  } : {
+    color: r.colors.contentPrimary,
+    backgroundColor: r.colors.backgroundTertiary
+  };
+}
+function A({
+  overrides: o,
+  image: r,
+  buttonKind: n,
+  backgroundColor: e,
+  backgroundColorType: c,
+  isLoading: l,
+  id: i,
+  theme: t
+}) {
+  const u = (r.layout || "top") === "top", d = "112px", p = {
+    Root: {
+      props: {
+        id: i
+      },
+      style: () => {
+        const s = {
+          display: "none"
+        };
+        return {
+          ...x(t, e, c),
+          ":focus": {
+            outline: "none"
+          },
+          ":hover:after": s,
+          ":active:after": s
+        };
+      }
+    },
+    ContentContainer: {
+      style: () => ({
+        paddingRight: u ? t.sizing.scale600 : t.sizing.scale300,
+        width: u ? "100%" : `calc(100% - ${d})`
+      })
+    },
+    Button: {
+      component: l ? B : void 0,
+      props: {
+        id: i && `${i}_cta-button`,
+        endEnhancer: n === "secondary" ? void 0 : "→",
+        overrides: {
+          BaseButton: {
+            style: () => ({
+              ...C(n, t, c),
+              ":hover": {
+                ...v(t, n)
+              },
+              ":active": {
+                ...b(t, n),
+                backgroundColor: t.colors.backgroundInversePrimary
+              }
+            })
+          },
+          EndEnhancer: {
+            style: () => ({
+              marginLeft: "4px"
+            })
+          }
+        }
+      }
+    },
+    DismissButton: {
+      props: {
+        id: i && `${i}_dismiss-button`,
+        overrides: {
+          BaseButton: {
+            style: () => ({
+              backgroundColor: f(t.colors.backgroundPrimary, "0.6"),
+              position: "absolute",
+              top: t.sizing.scale200,
+              right: t.sizing.scale200,
+              // using a pseudo-element to acheive a 48px tap target
+              ":after": {
+                content: '""',
+                position: "absolute",
+                height: t.sizing.scale1200,
+                width: t.sizing.scale1200
+              }
+            })
+          }
+        }
+      },
+      component: (s) => /* @__PURE__ */ a(k, { ...s, size: "small", children: /* @__PURE__ */ a(m, { stroke: "currentColor" }) })
+    },
+    Image: {
+      component: l ? S : void 0,
+      props: { layout: r.layout }
+    }
+  };
+  return y(p, o);
+}
+export {
+  A as getMessageCardOverrides
+};

package/dist/components/mobile-header/index.d.ts

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

package/dist/components/mobile-header/index.js

@@ -0,0 +1,4 @@
+import { MobileHeader as r } from "./mobile-header.js";
+export {
+  r as MobileHeader
+};

package/dist/components/mobile-header/mobile-header.d.ts

@@ -0,0 +1,15 @@
+import { MobileHeaderProps as BaseMobileHeaderProps, IconButton as BaseIconButton } from 'baseui/mobile-header';
+import { IconProps } from 'baseui/icon';
+import { StyleObject } from 'styletron-react';
+import { ButtonIconProps } from '../button-icon';
+export type MobileHeaderButton = BaseIconButton & {
+    iconProps?: IconProps;
+    overrides?: ButtonIconProps["overrides"];
+};
+export interface MobileHeaderProps extends Omit<Omit<BaseMobileHeaderProps, "navButton">, "actionButtons"> {
+    navButton?: MobileHeaderButton;
+    actionButtons?: [MobileHeaderButton?, MobileHeaderButton?];
+    rootWrapperCss?: StyleObject;
+    actionButtonsWrapperCss?: StyleObject;
+}
+export declare function MobileHeader({ actionButtons, expanded, navButton, overrides, type, rootWrapperCss, actionButtonsWrapperCss, ...restProps }: MobileHeaderProps): import("react/jsx-runtime").JSX.Element;