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

package/dist/components/callout-card/callout-card-subcomponents.js

@@ -0,0 +1,104 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useStyletron as m, mergeOverrides as u } from "baseui";
+import { Block as d } from "baseui/block";
+import c from "../button/button.js";
+import "baseui/card";
+import { CardFooter as C } from "../card/card.js";
+import { useCalloutCardContext as n } from "./context.js";
+import { CalloutCardBodySkeleton as p, CalloutCardFooterSkeleton as s } from "./skeletons.js";
+import { CardTitleSkeleton as y } from "../card/card-skeletons.js";
+function g({
+  $style: o = {},
+  children: r
+}) {
+  const [a, t] = m(), { kind: i, loading: l } = n();
+  return l ? /* @__PURE__ */ e(y, {}) : /* @__PURE__ */ e(
+    d,
+    {
+      className: a({
+        margin: 0,
+        marginBottom: t.sizing.scale500,
+        paddding: 0,
+        color: t.colors.contentPrimary,
+        ...t.typography[i === "tertiary" ? "HeadingXSmall" : "HeadingSmall"],
+        ...o
+      }),
+      children: r
+    }
+  );
+}
+g.displayName = "CalloutCardTitle";
+function f({
+  $style: o = {},
+  children: r
+}) {
+  const [a, t] = m(), { kind: i, loading: l } = n();
+  return l ? /* @__PURE__ */ e(p, {}) : /* @__PURE__ */ e(
+    d,
+    {
+      className: a({
+        marginBottom: t.sizing.scale600,
+        color: t.colors.contentPrimary,
+        ...t.typography[i === "tertiary" ? "ParagraphXSmall" : "ParagraphMedium"],
+        ...o
+      }),
+      children: r
+    }
+  );
+}
+f.displayName = "CalloutCardBody";
+function B({
+  justifyContent: o,
+  ...r
+}) {
+  const { kind: a, loading: t } = n();
+  return t ? /* @__PURE__ */ e(s, {}) : /* @__PURE__ */ e(
+    C,
+    {
+      justifyContent: o || (a === "tertiary" ? "start" : "end"),
+      ...r
+    }
+  );
+}
+B.displayName = "CalloutCardFooter";
+function k({ children: o }) {
+  const { loading: r } = n();
+  return r ? /* @__PURE__ */ e(s, {}) : /* @__PURE__ */ e(d, { children: o });
+}
+k.displayName = "CalloutCardAction";
+function v({
+  overrides: o,
+  ...r
+}) {
+  const { kind: a } = n();
+  return /* @__PURE__ */ e(
+    c,
+    {
+      kind: a,
+      size: a === "secondary" ? "medium" : "xsmall",
+      shape: "pill",
+      overrides: u(
+        {
+          BaseButton: {
+            style: ({ $theme: t }) => ({
+              ...a === "tertiary" && {
+                // We want to button text to align with the left edge of the card -
+                // This compensates for the xsmall button's padding
+                marginLeft: `-${t.sizing.scale300}`
+              }
+            })
+          }
+        },
+        o
+      ),
+      ...r
+    }
+  );
+}
+export {
+  k as CalloutCardAction,
+  f as CalloutCardBody,
+  B as CalloutCardFooter,
+  v as CalloutCardFooterButton,
+  g as CalloutCardTitle
+};

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

@@ -0,0 +1,11 @@
+import { CardProps } from '../card';
+import { ContentStep, ContentStepperProps, ContentStepperOverrides } from '../content-stepper';
+import { CalloutCardKind } from './types';
+export type CalloutCardProps = Omit<CardProps, "backgroundImage" | "loadingHeaderImageHeight" | "headerImage" | "thumbnail" | "hasThumbnail"> & Omit<ContentStepperProps, "steps" | "overrides" | "onClose" | "onStepsCompleted"> & {
+    kind?: CalloutCardKind;
+    steps?: ContentStep[];
+    contentStepperOverrides?: ContentStepperOverrides;
+    onClose?: () => void;
+    onStepsCompleted?: () => void;
+};
+export declare function CalloutCard({ action, children, kind, contentStepperOverrides, overrides, steps, withStepCount, onClose, onStepsCompleted, previousButtonAlwaysEnabled, loading, ...restProps }: CalloutCardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,132 @@
+import { jsx as o } from "react/jsx-runtime";
+import s, { useMemo as B } from "react";
+import { mergeOverrides as p } from "baseui";
+import i from "../../themes/typography.js";
+import "baseui/card";
+import { Card as v } from "../card/card.js";
+import { ContentStepper as x } from "../content-stepper/content-stepper.js";
+import { CalloutCardContext as S } from "./context.js";
+import { CalloutCardAction as A, CalloutCardBody as P } from "./callout-card-subcomponents.js";
+function H(t, a, r) {
+  return t === "tertiary" ? {
+    Body: {
+      style: {
+        ...i.ParagraphXSmall
+      }
+    },
+    Action: {
+      style: {
+        textAlign: "left"
+      }
+    }
+  } : a ? {
+    Contents: {
+      style: () => ({
+        ...!r && { margin: 0 }
+      })
+    },
+    Body: {
+      style: () => ({
+        marginBottom: 0
+      })
+    }
+  } : {
+    Title: {
+      style: {
+        ...i.HeadingSmall
+      }
+    },
+    Action: {
+      style: {
+        textAlign: "right"
+      }
+    }
+  };
+}
+function z(t) {
+  return typeof t == "string" || s.isValidElement(t) && t.type === s.Fragment ? /* @__PURE__ */ o(P, { children: t }) : t;
+}
+function V({
+  action: t,
+  children: a,
+  kind: r = "secondary",
+  contentStepperOverrides: d,
+  overrides: u,
+  steps: n,
+  withStepCount: y,
+  onClose: f,
+  onStepsCompleted: C,
+  previousButtonAlwaysEnabled: g = !1,
+  loading: e,
+  ...c
+}) {
+  const l = n && n.length > 0, m = {
+    shape: "pill",
+    size: "medium"
+  };
+  return /* @__PURE__ */ o(
+    S.Provider,
+    {
+      value: B(() => ({ kind: r, loading: e }), [r, e]),
+      children: /* @__PURE__ */ o(
+        v,
+        {
+          ...t && {
+            action: /* @__PURE__ */ o(A, { children: t })
+          },
+          overrides: p(
+            H(r, l, e),
+            u
+          ),
+          loading: e,
+          ...c,
+          children: l ? /* @__PURE__ */ o(
+            x,
+            {
+              steps: n,
+              onClose: f,
+              onStepsCompleted: C,
+              withStepCount: y,
+              previousButtonAlwaysEnabled: g,
+              loading: e,
+              overrides: p(
+                {
+                  Header: {
+                    style: {
+                      ...i.HeadingSmall
+                    }
+                  },
+                  Body: {
+                    style: ({ $theme: h }) => ({
+                      paddingTop: h.sizing.scale500
+                    })
+                  },
+                  StepCount: {
+                    style: {
+                      ...i.ParagraphMedium
+                    }
+                  },
+                  NextButton: {
+                    props: {
+                      kind: "secondary",
+                      ...m
+                    }
+                  },
+                  PrevButton: {
+                    props: {
+                      ...m
+                    }
+                  }
+                },
+                d
+              )
+            }
+          ) : z(a)
+        }
+      )
+    }
+  );
+}
+export {
+  V as CalloutCard
+};

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

@@ -0,0 +1,9 @@
+import { CalloutCardKind } from './types';
+export declare const CalloutCardContext: import('react').Context<{
+    kind: CalloutCardKind;
+    loading: boolean;
+}>;
+export declare const useCalloutCardContext: () => {
+    kind: CalloutCardKind;
+    loading: boolean;
+};

package/dist/components/callout-card/context.js

@@ -0,0 +1,13 @@
+import { createContext as o, useContext as r } from "react";
+import { checkForContextError as e } from "../../utils/index.js";
+const n = o({
+  kind: "secondary",
+  loading: !1
+}), c = () => {
+  const t = r(n);
+  return e(t, "CalloutCard"), t;
+};
+export {
+  n as CalloutCardContext,
+  c as useCalloutCardContext
+};

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

@@ -0,0 +1,4 @@
+export * from './callout-card';
+export * from './callout-card-subcomponents';
+export * from './context';
+export * from './types';

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

@@ -0,0 +1,13 @@
+import { CalloutCard as C } from "./callout-card.js";
+import { CalloutCardAction as a, CalloutCardBody as r, CalloutCardFooter as u, CalloutCardFooterButton as d, CalloutCardTitle as e } from "./callout-card-subcomponents.js";
+import { CalloutCardContext as n, useCalloutCardContext as f } from "./context.js";
+export {
+  C as CalloutCard,
+  a as CalloutCardAction,
+  r as CalloutCardBody,
+  n as CalloutCardContext,
+  u as CalloutCardFooter,
+  d as CalloutCardFooterButton,
+  e as CalloutCardTitle,
+  f as useCalloutCardContext
+};

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

@@ -0,0 +1,3 @@
+export { CardTitleSkeleton as CalloutCardTitleSkeleton } from '../card/card-skeletons';
+export declare function CalloutCardBodySkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function CalloutCardFooterSkeleton(): import("react/jsx-runtime").JSX.Element;

package/dist/components/callout-card/skeletons.js

@@ -0,0 +1,44 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Block as l } from "baseui/block";
+import { useStyletron as i } from "baseui";
+import { CardBodySkeleton as s, CardFooterSkeleton as d } from "../card/card-skeletons.js";
+import { CardTitleSkeleton as S } from "../card/card-skeletons.js";
+import r from "../skeleton/skeleton.js";
+import { useCalloutCardContext as n } from "./context.js";
+function k() {
+  const [, t] = i(), { kind: o } = n();
+  return o === "tertiary" ? /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        animation: !0,
+        height: t.sizing.scale600,
+        width: "80%",
+        overrides: {
+          Root: {
+            style: {
+              marginBottom: t.sizing.scale300
+            }
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(r, { animation: !0, height: t.sizing.scale600, width: "50%" })
+  ] }) : /* @__PURE__ */ e(s, { width: "80%" });
+}
+function y() {
+  const [, t] = i(), { kind: o } = n();
+  return /* @__PURE__ */ e(
+    d,
+    {
+      justifyContent: o === "tertiary" ? "start" : "end",
+      height: o === "tertiary" ? t.sizing.scale850 : void 0,
+      width: o === "tertiary" ? "40%" : void 0
+    }
+  );
+}
+export {
+  k as CalloutCardBodySkeleton,
+  y as CalloutCardFooterSkeleton,
+  S as CalloutCardTitleSkeleton
+};

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

@@ -0,0 +1 @@
+export type CalloutCardKind = "secondary" | "tertiary";

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

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { StyleObject } from 'styletron-react';
+export declare function CardTitleSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function CardBodySkeleton({ width }: {
+    width: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardBodyFullWidthSkeleton({ $style, }: {
+    $style?: StyleObject;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooterSkeleton({ justifyContent, width, height, }: {
+    justifyContent?: string;
+    width?: string;
+    height?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardThumbnailSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeaderImageSkeleton({ height, }: {
+    height?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function getCardSkeleton(component: ReactElement): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,123 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Block as c } from "baseui/block";
+import { useStyletron as s } from "baseui";
+import { getComponentName as d } from "../../utils/index.js";
+import a from "../skeleton/skeleton.js";
+import { useCardContext as m } from "./context.js";
+function g() {
+  const [t, e] = s();
+  return /* @__PURE__ */ i(c, { className: t({ marginBottom: e.sizing.scale600 }), children: /* @__PURE__ */ i(a, { animation: !0, height: e.sizing.scale900, width: "50%" }) });
+}
+function h({ width: t }) {
+  const [, e] = s();
+  return /* @__PURE__ */ i(a, { animation: !0, height: e.sizing.scale800, width: t });
+}
+function u({
+  $style: t = {}
+}) {
+  const [e, n] = s(), { format: o } = m(), r = o === "feed";
+  return /* @__PURE__ */ i(
+    c,
+    {
+      className: e({
+        marginTop: n.sizing.scale600,
+        marginBottom: n.sizing.scale600,
+        marginLeft: r ? 0 : `-${n.sizing.scale600}`,
+        width: r ? "100%" : `calc(100% + ${n.sizing.scale900})`,
+        ...t
+      }),
+      children: /* @__PURE__ */ i(a, { animation: !0, width: "100%", height: "216px" })
+    }
+  );
+}
+function f({
+  justifyContent: t = "center",
+  width: e,
+  height: n
+}) {
+  const [o, r] = s();
+  return /* @__PURE__ */ i(
+    c,
+    {
+      className: o({
+        display: "flex",
+        justifyContent: t,
+        marginTop: r.sizing.scale600
+      }),
+      children: /* @__PURE__ */ i(
+        a,
+        {
+          animation: !0,
+          width: e || r.sizing.scale2400,
+          height: n || r.sizing.scale1200
+        }
+      )
+    }
+  );
+}
+function z() {
+  const [t, e] = s();
+  return /* @__PURE__ */ i(
+    c,
+    {
+      className: t({
+        width: e.sizing.scale1400,
+        height: e.sizing.scale1400,
+        float: "right",
+        margin: `0 0 ${e.sizing.scale500} ${e.sizing.scale500}`
+      }),
+      children: /* @__PURE__ */ i(
+        a,
+        {
+          animation: !0,
+          width: e.sizing.scale1400,
+          height: e.sizing.scale1400
+        }
+      )
+    }
+  );
+}
+function B({
+  height: t = "220px"
+}) {
+  const [e, n] = s(), { format: o } = m(), r = o === "feed", l = `-${n.sizing[r ? "scale600" : "scale300"]}`;
+  return /* @__PURE__ */ i(
+    c,
+    {
+      className: e({
+        marginTop: l,
+        marginLeft: l,
+        marginBottom: n.sizing.scale600,
+        width: `calc(100% + ${n.sizing[r ? "scale900" : "scale600"]})`
+      }),
+      children: /* @__PURE__ */ i(
+        a,
+        {
+          animation: !0,
+          width: "100%",
+          height: t,
+          overrides: {
+            Root: {
+              style: {
+                borderRadius: r ? 0 : n.borders.radius300
+              }
+            }
+          }
+        }
+      )
+    }
+  );
+}
+function x(t) {
+  const e = d(t);
+  return e === "CardTitle" || e === "Title" ? /* @__PURE__ */ i(g, {}) : e === "CardFooter" || e === "Action" ? /* @__PURE__ */ i(f, {}) : e === "CardThumbnail" ? /* @__PURE__ */ i(z, {}) : e === "CardBodyFullWidth" ? /* @__PURE__ */ i(u, {}) : e === "ListItem" || e === "ContentStepper" || e != null && e.includes("CalloutCard") ? t : /* @__PURE__ */ i(h, { width: "79%" });
+}
+export {
+  u as CardBodyFullWidthSkeleton,
+  h as CardBodySkeleton,
+  f as CardFooterSkeleton,
+  B as CardHeaderImageSkeleton,
+  z as CardThumbnailSkeleton,
+  g as CardTitleSkeleton,
+  x as getCardSkeleton
+};

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

@@ -1,6 +1,28 @@
-import { CardProps as BaseUiCardProps } from 'baseui/card';
-export type CardProps = {
-    withBorder?: boolean;
-    backgroundColor?: string;
-} & BaseUiCardProps;
-export default function Card({ withBorder, backgroundColor, overrides, children, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import { StyledAction as BaseUiStyledAction, StyledThumbnail as BaseUiStyledThumbnail } from 'baseui/card';
+import { ButtonProps } from '../button';
+import { CardProps } from './types';
+export declare const CardTitle: import('styletron-react').StyletronComponent<"h1", {}>;
+export type CardTitleProps = ComponentProps<typeof CardTitle>;
+export declare function Card({ withBorder, backgroundColor, backgroundImage, loading, loadingHeaderImageHeight, format, overrides, title, children, headerImage, thumbnail, action, id, width, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export type CardBodyFullWidthProps = ComponentProps<typeof BaseUiStyledAction>;
+export declare function CardBodyFullWidth({ children, $style, ...restProps }: CardBodyFullWidthProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardBodyFullWidth {
+    var displayName: string;
+}
+export type CardFooterProps = ComponentProps<typeof BaseUiStyledAction> & {
+    justifyContent?: string;
+};
+export declare function CardFooter({ justifyContent, children, $style, ...restProps }: CardFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardFooter {
+    var displayName: string;
+}
+export declare function CardFooterButton({ children, ...restProps }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardFooterButton {
+    var displayName: string;
+}
+export type CardThumbnailProps = ComponentProps<typeof BaseUiStyledThumbnail>;
+export declare function CardThumbnail({ $style, ...restProps }: CardThumbnailProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CardThumbnail {
+    var displayName: string;
+}