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

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

@@ -5,9 +5,11 @@ export declare function getLowHierarchyStory(renderFn: RenderFn): {
     args: {
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         artworkType: any;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -20,9 +22,11 @@ export declare function getLowHierarchyWithActionButtonStory(renderFn: RenderFn)
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         artworkType: any;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -34,9 +38,11 @@ export declare function getLowHierarchyWithActionIconStory(renderFn: RenderFn):
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         artworkType: any;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -48,8 +54,10 @@ export declare function getLowHierarchyWithArtworkWithBadgeStory(renderFn: Rende
         artworkType: "badge";
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -63,8 +71,10 @@ export declare function getLowHierarchyWithArtworkWithBadgeAndButtonStory(render
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -77,8 +87,10 @@ export declare function getLowHierarchyWithArtworkWithBadgeAndCloseStory(renderF
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -90,8 +102,10 @@ export declare function getLowHierarchyWithArtworkWithIconStory(renderFn: Render
         artworkType: "icon";
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -105,8 +119,10 @@ export declare function getLowHierarchyWithArtworkWithIconAndButtonStory(renderF
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -119,8 +135,10 @@ export declare function getLowHierarchyWithArtworkWithIconAndCloseStory(renderFn
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         children: string;
         hierarchy: BannerVariantProps["hierarchy"];
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -132,8 +150,10 @@ export declare function getHighHierarchyStory(renderFn: RenderFn): {
         hierarchy: import('baseui/banner').Hierarchy;
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         artworkType: any;
         children: string;
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -147,8 +167,10 @@ export declare function getHighHierarchyWithActionButtonStory(renderFn: RenderFn
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         artworkType: any;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -161,8 +183,10 @@ export declare function getHighHierarchyWithActionIconStory(renderFn: RenderFn):
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         artworkType: any;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -175,7 +199,9 @@ export declare function getHighHierarchyWithArtworkWithBadgeStory(renderFn: Rend
         artworkType: "badge";
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         children: string;
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -190,7 +216,9 @@ export declare function getHighHierarchyWithArtworkWithBadgeAndButtonStory(rende
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -204,7 +232,9 @@ export declare function getHighHierarchyWithArtworkWithBadgeAndCloseStory(render
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -217,7 +247,9 @@ export declare function getHighHierarchyWithArtworkWithIconStory(renderFn: Rende
         artworkType: "icon";
         actionIcon: any;
         actionLabel: any;
+        actionButtonId: string;
         children: string;
+        id: string;
         onClick: any;
         overrides: {};
         nested: boolean;
@@ -232,7 +264,9 @@ export declare function getHighHierarchyWithArtworkWithIconAndButtonStory(render
         actionLabel: string;
         onClick: () => void;
         actionIcon: any;
+        actionButtonId: string;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;
@@ -246,7 +280,9 @@ export declare function getHighHierarchyWithArtworkWithIconAndCloseStory(renderF
         actionLabel: string;
         actionIcon: typeof BannerCloseIcon;
         onClick: () => void;
+        actionButtonId: string;
         children: string;
+        id: string;
         overrides: {};
         nested: boolean;
         title: string;

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

@@ -1 +1,2 @@
+export { Block } from 'baseui/block';
 export type { BlockProps } from 'baseui/block';

package/dist/components/block/index.js

@@ -0,0 +1,4 @@
+import { Block as c } from "baseui/block";
+export {
+  c as Block
+};

package/dist/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,51 @@
+import { jsx as s } from "react/jsx-runtime";
+import c, { Children as p, cloneElement as a } from "react";
+import { useStyletron as f, mergeOverrides as l } from "baseui";
+import { Breadcrumbs as u } from "baseui/breadcrumbs";
+import d from "../icons/solid/chevron-left/index.js";
+import g from "../icons/solid/chevron-right/index.js";
+function x({
+  children: o,
+  icon: e,
+  overrides: t,
+  ...m
+}) {
+  const [, n] = f();
+  function i() {
+    return e ? () => e : n.direction === "rtl" ? d : g;
+  }
+  return /* @__PURE__ */ s(
+    u,
+    {
+      ...m,
+      overrides: l(
+        {
+          Icon: {
+            component: i(),
+            props: {
+              overrides: {
+                Svg: {
+                  style: ({ $theme: r }) => ({
+                    color: r.colors.contentPrimary,
+                    marginTop: `-${r.sizing.scale0}`
+                  })
+                }
+              }
+            }
+          }
+        },
+        t
+      ),
+      // We're making sure the link children are correctly sized to match Figma specs
+      children: p.map(
+        o,
+        (r) => c.isValidElement(r) ? a(r, {
+          size: "medium"
+        }) : r
+      )
+    }
+  );
+}
+export {
+  x as Breadcrumbs
+};

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import { Breadcrumbs as a } from "./breadcrumbs.js";
+import { StyledSeparator as t } from "baseui/breadcrumbs";
+export {
+  t as BreadcrumbStyledSeparator,
+  a as Breadcrumbs
+};

package/dist/components/button/button.d.ts

@@ -1,3 +1,6 @@
 import { ButtonProps } from './types';
+import * as React from "react";
 export declare function getBaseButtonSize(size: any): any;
-export default function Button({ $as, children, colors, disabled, endEnhancer, href, isLoading, isSelected, kind, onClick, overrides, shape, size, startEnhancer, target, type, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ id, "data-attr": dataAttr, disabled, kind, overrides, size, forwardedRef, width, whiteSpace, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const ForwardedButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+export default ForwardedButton;

package/dist/components/button/button.js

@@ -0,0 +1,48 @@
+import { jsx as a } from "react/jsx-runtime";
+import * as s from "react";
+import { SIZE as B, Button as c } from "baseui/button";
+import { SIZE as p } from "./constants.js";
+import { getButtonOverrides as S } from "./overrides.js";
+function l(t) {
+  return Object.values(B).includes(t) ? t : p[t] || "default";
+}
+function v({
+  id: t,
+  "data-attr": o,
+  disabled: r,
+  kind: e,
+  overrides: u,
+  size: f,
+  forwardedRef: n,
+  width: m,
+  whiteSpace: d,
+  ...i
+}) {
+  return /* @__PURE__ */ a(
+    c,
+    {
+      id: t,
+      "data-attr": o,
+      disabled: r,
+      kind: e,
+      overrides: S({
+        overrides: u,
+        kind: e,
+        disabled: r,
+        width: m,
+        whiteSpace: d
+      }),
+      forwardedRef: n,
+      size: l(f),
+      ...i
+    }
+  );
+}
+const Z = s.forwardRef(
+  ({ children: t, ...o }, r) => /* @__PURE__ */ a(v, { forwardedRef: r, ...o, children: t })
+);
+export {
+  v as Button,
+  Z as default,
+  l as getBaseButtonSize
+};

package/dist/components/button/constants.js

@@ -0,0 +1,16 @@
+import { SIZE as l } from "baseui/button";
+import { KIND as r } from "baseui/button";
+const m = {
+  xsmall: l.mini,
+  small: l.compact,
+  medium: l.default,
+  large: l.large
+}, t = {
+  default: "default",
+  pill: "pill"
+};
+export {
+  r as KIND,
+  t as SHAPE,
+  m as SIZE
+};

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

@@ -1,4 +1,4 @@
 export { default as Button, getBaseButtonSize } from './button';
 export { KIND as BUTTON_KIND, SIZE as BUTTON_SIZE, SHAPE as BUTTON_SHAPE, } from './constants';
-export { getButtonHoverStyles, getButtonActiveStyles } from './overrides';
+export { getButtonHoverStyles, getButtonActiveStyles, getButtonIconSize, } from './overrides';
 export * from './types';

package/dist/components/button/index.js

@@ -0,0 +1,14 @@
+import { default as o, getBaseButtonSize as r } from "./button.js";
+import { SHAPE as S, SIZE as s } from "./constants.js";
+import { getButtonActiveStyles as n, getButtonHoverStyles as u, getButtonIconSize as T } from "./overrides.js";
+import { KIND as I } from "baseui/button";
+export {
+  I as BUTTON_KIND,
+  S as BUTTON_SHAPE,
+  s as BUTTON_SIZE,
+  o as Button,
+  r as getBaseButtonSize,
+  n as getButtonActiveStyles,
+  u as getButtonHoverStyles,
+  T as getButtonIconSize
+};

package/dist/components/button/overrides.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from './types';
-export declare function getButtonHoverStyles(kind: any, disabled?: boolean): {
+export declare function getButtonHoverStyles($theme: any, kind: any, disabled?: boolean): {
     boxShadow?: undefined;
 } | {
     boxShadow: string;
@@ -14,4 +14,5 @@ export declare function getButtonActiveStyles($theme: any, kind: any, disabled?:
     color: any;
     boxShadow?: undefined;
 };
-export declare function getButtonOverrides({ overrides, kind, disabled }: ButtonProps): import('baseui/helpers/overrides').Overrides<any>;
+export declare function getButtonIconSize(size: ButtonProps["size"]): "16px" | "24px" | "20px" | "12px";
+export declare function getButtonOverrides({ overrides, kind, disabled, width, whiteSpace, }: ButtonProps): import('baseui/helpers/overrides').Overrides<any>;

package/dist/components/button/overrides.js

@@ -0,0 +1,47 @@
+import { mergeOverrides as a } from "baseui";
+import { hexToRgba as n } from "../../utils/index.js";
+function c(r, t, e = !1) {
+  return e ? {} : t === "primary" ? {
+    boxShadow: `999px 999px 0 ${n(r.colors.contentInversePrimary, 0.2)} inset`
+  } : {
+    boxShadow: `999px 999px 0 ${n(r.colors.contentPrimary, 0.08)} inset`
+  };
+}
+function f(r, t, e = !1) {
+  return e ? {} : t === "primary" ? {
+    boxShadow: "none"
+  } : {
+    color: r.colors.contentInversePrimary
+  };
+}
+function x(r) {
+  return r === "xsmall" ? "12px" : r === "small" ? "16px" : r === "large" ? "24px" : "20px";
+}
+function m({
+  overrides: r,
+  kind: t,
+  disabled: e,
+  width: i,
+  whiteSpace: u
+}) {
+  return a({
+    BaseButton: {
+      style: ({ $theme: o }) => ({
+        width: i || "auto",
+        whiteSpace: u || "normal",
+        ":hover": {
+          ...c(o, t, e)
+        },
+        ":active": {
+          ...f(o, t, e)
+        }
+      })
+    }
+  }, r);
+}
+export {
+  f as getButtonActiveStyles,
+  c as getButtonHoverStyles,
+  x as getButtonIconSize,
+  m as getButtonOverrides
+};

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

@@ -1,9 +1,14 @@
-import { default as React } from 'react';
+import { default as React, ForwardedRef } from 'react';
 import { ButtonProps as BaseButtonProps } from 'baseui/button';
 import { SIZE, SHAPE } from './constants';
 export interface ButtonProps extends Omit<Omit<BaseButtonProps, "size">, "shape"> {
     size?: keyof typeof SIZE;
     shape?: keyof typeof SHAPE;
     $as?: React.ElementType;
+    "data-attr"?: string;
+    id?: string;
+    forwardedRef?: ForwardedRef<HTMLElement>;
+    width?: string;
+    whiteSpace?: string;
 }
 export type { ButtonOverrides, CustomColors, SharedStyleProps, } from 'baseui/button';

package/dist/components/button-group/button-group.js

@@ -0,0 +1,61 @@
+import { jsx as f } from "react/jsx-runtime";
+import { ButtonGroup as s, StatefulButtonGroup as m } from "baseui/button-group";
+import { getBaseButtonSize as l } from "../button/button.js";
+function b({
+  ariaLabel: t,
+  children: o,
+  disabled: u,
+  mode: r,
+  onClick: a,
+  overrides: e,
+  selected: n,
+  shape: i,
+  size: p
+}) {
+  return /* @__PURE__ */ f(
+    s,
+    {
+      "aria-label": t,
+      disabled: u,
+      mode: r,
+      onClick: a,
+      overrides: e,
+      selected: n,
+      shape: i,
+      size: l(p),
+      children: o
+    }
+  );
+}
+function c({
+  ariaLabel: t,
+  children: o,
+  disabled: u,
+  initialState: r,
+  mode: a,
+  onClick: e,
+  overrides: n,
+  shape: i,
+  size: p,
+  stateReducer: B
+}) {
+  return /* @__PURE__ */ f(
+    m,
+    {
+      "aria-label": t,
+      disabled: u,
+      initialState: r,
+      mode: a,
+      onClick: e,
+      overrides: n,
+      shape: i,
+      size: l(p),
+      stateReducer: B,
+      children: o
+    }
+  );
+}
+export {
+  c as StatefulButtonGroup,
+  b as default
+};

package/dist/components/button-group/index.d.ts

@@ -1,3 +1,3 @@
 export { default as ButtonGroup, StatefulButtonGroup } from './button-group';
-export { SHAPE as BUTTON_GROUP_SHAPE, SIZE as BUTTON_GROUP_SIZE, } from './constants';
+export { SHAPE as BUTTON_GROUP_SHAPE, SIZE as BUTTON_GROUP_SIZE, } from '../button/constants';
 export type { ButtonGroupProps, StatefulButtonGroupProps } from './types';

package/dist/components/button-group/index.js

@@ -0,0 +1,8 @@
+import { default as r, StatefulButtonGroup as u } from "./button-group.js";
+import { SHAPE as S, SIZE as e } from "../button/constants.js";
+export {
+  S as BUTTON_GROUP_SHAPE,
+  e as BUTTON_GROUP_SIZE,
+  r as ButtonGroup,
+  u as StatefulButtonGroup
+};

package/dist/components/button-group/types.d.ts

@@ -1,8 +1,7 @@
 import { ButtonGroupProps as BaseButtonGroupProps, StateReducer } from 'baseui/button-group';
-import { BUTTON_SHAPE } from '../button';
-import { SIZE } from './constants';
+import { BUTTON_SHAPE, BUTTON_SIZE } from '../button';
 export interface ButtonGroupProps extends Omit<Omit<BaseButtonGroupProps, "size">, "shape"> {
-    size?: keyof typeof SIZE;
+    size?: keyof typeof BUTTON_SIZE;
     shape?: keyof typeof BUTTON_SHAPE;
 }
 export interface StatefulButtonGroupProps extends Omit<ButtonGroupProps, "selected"> {

package/dist/components/button-icon/button-icon.d.ts

@@ -1,2 +1,5 @@
+import { default as React, ReactNode } from 'react';
 import { ButtonIconProps } from './types';
-export default function IconButton({ $as, children, colors, disabled, href, isLoading, isSelected, kind, onClick, overrides, shape, size, target, type, }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function formatButtonLabel(label: ReactNode): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>;
+declare const ForwardedButtonIcon: React.ForwardRefExoticComponent<ButtonIconProps & React.RefAttributes<HTMLElement>>;
+export default ForwardedButtonIcon;

package/dist/components/button-icon/button-icon.js

@@ -0,0 +1,57 @@
+import { jsx as i } from "react/jsx-runtime";
+import f from "react";
+import { mergeOverrides as p } from "baseui";
+import c from "../button/button.js";
+function x(r) {
+  return typeof r == "string" ? r.slice(0, 2) : r;
+}
+const d = {
+  small: "36px",
+  medium: "48px",
+  large: "56px"
+}, m = {
+  small: "10px",
+  medium: "14px",
+  large: "16px"
+};
+function l({
+  children: r,
+  kind: t = "secondary",
+  overrides: e,
+  shape: u,
+  size: o,
+  ...a
+}) {
+  return /* @__PURE__ */ i(
+    c,
+    {
+      kind: t,
+      size: o,
+      overrides: p(
+        {
+          BaseButton: {
+            style: () => {
+              const s = m[o] || m.medium, n = d[o] || d.medium;
+              return {
+                borderRadius: u === "square" ? "8px" : "50%",
+                padding: s,
+                width: n,
+                height: n
+              };
+            }
+          }
+        },
+        e
+      ),
+      ...a,
+      children: x(r)
+    }
+  );
+}
+const O = f.forwardRef(
+  ({ children: r, ...t }, e) => /* @__PURE__ */ i(l, { forwardedRef: e, ...t, children: r })
+);
+export {
+  O as default,
+  x as formatButtonLabel
+};

package/dist/components/button-icon/constants.js

@@ -0,0 +1,17 @@
+import { KIND as a, SIZE as r, SHAPE as e } from "baseui/button";
+const s = {
+  secondary: a.secondary,
+  tertiary: a.tertiary
+}, t = {
+  small: r.compact,
+  medium: r.default,
+  large: r.large
+}, o = {
+  square: e.square,
+  circle: e.circle
+};
+export {
+  s as KIND,
+  o as SHAPE,
+  t as SIZE
+};

package/dist/components/button-icon/index.d.ts

@@ -1,4 +1,3 @@
 export { default as ButtonIcon } from './button-icon';
 export { KIND as BUTTON_ICON_KIND, SHAPE as BUTTON_ICON_SHAPE, SIZE as BUTTON_ICON_SIZE, } from './constants';
-export { getIconSize } from './overrides';
 export type { ButtonIconProps } from './types';

package/dist/components/button-icon/index.js

@@ -0,0 +1,8 @@
+import { default as o } from "./button-icon.js";
+import { KIND as T, SHAPE as _, SIZE as a } from "./constants.js";
+export {
+  T as BUTTON_ICON_KIND,
+  _ as BUTTON_ICON_SHAPE,
+  a as BUTTON_ICON_SIZE,
+  o as ButtonIcon
+};

package/dist/components/callout-card/callout-card-subcomponents.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { StyleObject } from 'styletron-react';
+import { ButtonProps } from '../button';
+import { CardFooterProps } from '../card';
+export type CalloutCardTitleProps = {
+    $style?: StyleObject;
+    children: ReactNode;
+};
+export declare function CalloutCardTitle({ $style, children, }: CalloutCardTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CalloutCardTitle {
+    var displayName: string;
+}
+export type CalloutCardBodyProps = {
+    $style?: StyleObject;
+    children: ReactNode;
+};
+export declare function CalloutCardBody({ $style, children, }: CalloutCardBodyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CalloutCardBody {
+    var displayName: string;
+}
+export type CalloutCardFooterProps = CardFooterProps;
+export declare function CalloutCardFooter({ justifyContent, ...restProps }: CalloutCardFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CalloutCardFooter {
+    var displayName: string;
+}
+export declare function CalloutCardAction({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare namespace CalloutCardAction {
+    var displayName: string;
+}
+export type CalloutCardFooterButtonProps = Omit<ButtonProps, "size" | "kind" | "shape">;
+export declare function CalloutCardFooterButton({ overrides, ...restProps }: CalloutCardFooterButtonProps): import("react/jsx-runtime").JSX.Element;