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

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

@@ -0,0 +1,184 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { useStyletron as f, mergeOverrides as a } from "baseui";
+import { Block as d } from "baseui/block";
+import { MobileHeader as z } from "baseui/mobile-header";
+import v from "../../themes/typography.js";
+import w from "../button/button.js";
+import y from "../button-icon/button-icon.js";
+import H from "../icons/line/arrow-left/index.js";
+const I = "0px 8px 36px 0px rgba(0, 0, 0, 0.17)";
+function u(r) {
+  return {
+    BaseButton: {
+      style: ({ $theme: e }) => ({
+        ...r === "floating" && {
+          backgroundColor: e.colors.backgroundPrimary,
+          boxShadow: I
+        }
+      })
+    }
+  };
+}
+function p({
+  onClick: r,
+  label: e,
+  renderIcon: o,
+  iconProps: s,
+  overrides: i = {},
+  type: n
+}) {
+  const [, l] = f(), c = o;
+  return /* @__PURE__ */ t(
+    y,
+    {
+      kind: n === "floating" ? "secondary" : "tertiary",
+      onClick: r,
+      "aria-label": e,
+      overrides: a(u(n), i),
+      shape: "circle",
+      children: /* @__PURE__ */ t(c, { size: l.sizing.scale700, ...s || {} })
+    }
+  );
+}
+function M({
+  onClick: r,
+  label: e,
+  renderIcon: o,
+  iconProps: s,
+  overrides: i = {},
+  type: n
+}) {
+  return o ? /* @__PURE__ */ t(
+    p,
+    {
+      renderIcon: o,
+      onClick: r,
+      overrides: i,
+      label: e,
+      type: n,
+      iconProps: s
+    }
+  ) : /* @__PURE__ */ t(
+    w,
+    {
+      shape: "pill",
+      kind: "secondary",
+      onClick: r,
+      overrides: a(u(n), i),
+      children: e
+    }
+  );
+}
+function F(r, e, o) {
+  return e === "floating" ? {} : {
+    marginTop: r ? o.sizing.scale300 : o.sizing.scale800,
+    marginBottom: o.sizing.scale300
+  };
+}
+function P({
+  actionButtons: r,
+  expanded: e,
+  navButton: o = { onClick: () => {
+  }, label: "Back button" },
+  overrides: s,
+  type: i,
+  rootWrapperCss: n = {},
+  actionButtonsWrapperCss: l = {},
+  ...c
+}) {
+  const [m, h] = f();
+  return /* @__PURE__ */ k(
+    d,
+    {
+      className: m({
+        position: "relative",
+        transition: "margin 0.25s ease-in-out",
+        ...F(e, i, h),
+        ...n
+      }),
+      children: [
+        o && // We re-create our own nav button instead of passing this prop to the
+        // Base `MobileHeader` component, because there is no way to override the
+        // icon size using `HeaderButton`. Replacing the entire component only replaces
+        // the button and not the icon. Refer to the code here:
+        // https://github.com/uber/baseweb/blob/18f01efe00d634a22ab9964d109db6c31eb439e1/src/mobile-header/mobile-header.tsx#L24
+        /* @__PURE__ */ t(
+          d,
+          {
+            className: m({
+              position: "absolute",
+              top: 0,
+              left: 0
+            }),
+            children: /* @__PURE__ */ t(
+              p,
+              {
+                renderIcon: o.renderIcon || H,
+                type: i,
+                ...o
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          z,
+          {
+            expanded: e,
+            overrides: a(
+              {
+                Title: {
+                  style: () => ({
+                    ...v.HeadingLarge
+                  })
+                }
+              },
+              s
+            ),
+            type: i,
+            ...c
+          }
+        ),
+        r && r.length && // We create our own action buttons for the same aforementioned reason
+        /* @__PURE__ */ t(
+          d,
+          {
+            className: m({
+              position: "absolute",
+              right: 0,
+              top: 0,
+              ...l
+            }),
+            children: r.map(
+              ({
+                label: g,
+                overrides: b,
+                ...B
+              }) => /* @__PURE__ */ t(
+                M,
+                {
+                  label: g,
+                  type: i,
+                  overrides: a(
+                    {
+                      BaseButton: {
+                        style: ({ $theme: x }) => ({
+                          marginLeft: x.sizing.scale300
+                        })
+                      }
+                    },
+                    b
+                  ),
+                  ...B
+                },
+                g
+              )
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  P as MobileHeader
+};

package/dist/components/modal/index.js

@@ -0,0 +1,15 @@
+import { ROLE as d, SIZE as e, ModalBody as M } from "baseui/modal";
+import { Modal as r, ModalBodyWithImage as t, ModalButton as m, ModalClose as p, ModalFooter as B, ModalHeader as E, ModalHeaderWithImage as I, ModalSecondaryButtonWrapper as L } from "./modal.js";
+export {
+  d as MODAL_ROLE,
+  e as MODAL_SIZE,
+  r as Modal,
+  M as ModalBody,
+  t as ModalBodyWithImage,
+  m as ModalButton,
+  p as ModalClose,
+  B as ModalFooter,
+  E as ModalHeader,
+  I as ModalHeaderWithImage,
+  L as ModalSecondaryButtonWrapper
+};

package/dist/components/modal/modal.d.ts

@@ -19,6 +19,8 @@ export declare function ModalSecondaryButtonWrapper({ children }: PropsWithChild
 export type ModalButtonProps = ComponentProps<typeof BaseModalButton>;
 export declare function ModalButton({ overrides, ...restProps }: ModalButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function ModalClose(props: SharedStylePropsArg): import("react/jsx-runtime").JSX.Element;
-export type ModalProps = BaseModalProps;
-export declare function Modal({ overrides, ...restProps }: BaseModalProps): import("react/jsx-runtime").JSX.Element;
+export type ModalProps = BaseModalProps & {
+    id?: string;
+};
+export declare function Modal({ id, overrides, ...restProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/modal/modal.js

@@ -0,0 +1,193 @@
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { useStyletron as a, mergeOverrides as c } from "baseui";
+import { Block as l } from "baseui/block";
+import { ModalHeader as m, ModalBody as p, ModalFooter as f, ModalButton as M, StyledClose as y, Modal as z } from "baseui/modal";
+import u from "../../themes/typography.js";
+import $ from "../icons/line/close/index.js";
+function w(e) {
+  const [r, i] = a();
+  return /* @__PURE__ */ o(
+    m,
+    {
+      $style: {
+        marginTop: i.sizing.scale800,
+        ...u.HeadingMedium
+      },
+      ...e
+    }
+  );
+}
+function W({
+  imageSrc: e,
+  imageAriaLabel: r,
+  children: i,
+  ...t
+}) {
+  const [s, n] = a();
+  return /* @__PURE__ */ g(
+    m,
+    {
+      $style: {
+        marginTop: 0,
+        marginLeft: 0,
+        marginRight: 0,
+        lineHeight: 0
+      },
+      ...t,
+      children: [
+        /* @__PURE__ */ o(
+          "img",
+          {
+            className: s({
+              width: "100%",
+              borderTopLeftRadius: n.sizing.scale600,
+              borderTopRightRadius: n.sizing.scale600
+            }),
+            src: e,
+            "aria-label": r
+          }
+        ),
+        /* @__PURE__ */ o(
+          l,
+          {
+            $style: {
+              marginTop: n.sizing.scale800,
+              marginLeft: n.sizing.scale800,
+              marginRight: n.sizing.scale800,
+              ...u.HeadingMedium
+            },
+            children: i
+          }
+        )
+      ]
+    }
+  );
+}
+function _({
+  children: e,
+  imageSrc: r,
+  imageAriaLabel: i,
+  imageLayout: t = "right",
+  imageWidth: s
+}) {
+  const [n, d] = a(), h = s || `calc(100% - 80% - ${d.sizing.scale600})`;
+  return /* @__PURE__ */ g(
+    p,
+    {
+      $style: {
+        display: "flex",
+        flexDirection: t === "right" ? "row" : "row-reverse"
+      },
+      children: [
+        /* @__PURE__ */ o(l, { children: e }),
+        /* @__PURE__ */ o(
+          "img",
+          {
+            className: n({
+              width: h,
+              maxWidth: "100%",
+              [t === "right" ? "marginLeft" : "marginRight"]: d.sizing.scale600
+            }),
+            src: r,
+            "aria-label": i
+          }
+        )
+      ]
+    }
+  );
+}
+function k(e) {
+  const [r, i] = a();
+  return /* @__PURE__ */ o(
+    f,
+    {
+      $style: {
+        display: "flex",
+        justifyContent: "right",
+        marginTop: i.sizing.scale850,
+        marginBottom: i.sizing.scale500
+      },
+      ...e
+    }
+  );
+}
+function v({ children: e }) {
+  return /* @__PURE__ */ o(l, { marginRight: "auto", children: e });
+}
+function E({ overrides: e, ...r }) {
+  return /* @__PURE__ */ o(
+    M,
+    {
+      overrides: c(
+        {
+          BaseButton: {
+            style: ({ $theme: i }) => ({
+              ":not(:last-child)": {
+                [i.direction !== "rtl" ? "marginRight" : "marginLeft"]: i.sizing.scale600
+              }
+            })
+          }
+        },
+        e
+      ),
+      ...r
+    }
+  );
+}
+function B(e) {
+  const [r, i] = a(), t = i.direction === "rtl" ? "left" : "right";
+  return /* @__PURE__ */ o(
+    y,
+    {
+      ...e,
+      $style: {
+        backgroundColor: i.colors.backgroundTertiary,
+        width: i.sizing.scale950,
+        height: i.sizing.scale950,
+        borderRadius: i.sizing.scale950,
+        top: i.sizing.scale550,
+        [t]: i.sizing.scale550
+      },
+      children: /* @__PURE__ */ o($, { size: "16px", stroke: "currentColor" })
+    }
+  );
+}
+function L({ id: e, overrides: r, ...i }) {
+  return /* @__PURE__ */ o(
+    z,
+    {
+      overrides: c(
+        {
+          Root: {
+            props: {
+              id: `${e}_modal-root`
+            }
+          },
+          Dialog: {
+            props: {
+              id: e
+            }
+          },
+          Close: {
+            component: B,
+            props: {
+              id: `${e}_modal-close`
+            }
+          }
+        },
+        r
+      ),
+      ...i
+    }
+  );
+}
+export {
+  L as Modal,
+  _ as ModalBodyWithImage,
+  E as ModalButton,
+  B as ModalClose,
+  k as ModalFooter,
+  w as ModalHeader,
+  W as ModalHeaderWithImage,
+  v as ModalSecondaryButtonWrapper
+};

package/dist/components/page-control/index.d.ts

@@ -0,0 +1,3 @@
+export type { PageControlOverrides, Kind as PageControlKind, KIND as PAGECONTROL_KIND, } from 'baseui/page-control';
+export { default as PageControl } from './page-control';
+export type { PageControlProps } from './page-control';

package/dist/components/page-control/index.js

@@ -0,0 +1,4 @@
+import { default as e } from "./page-control.js";
+export {
+  e as PageControl
+};

package/dist/components/page-control/page-control.d.ts

@@ -0,0 +1,6 @@
+import { PageControlProps as BasePageControlProps } from 'baseui/page-control';
+export type PageControlProps = BasePageControlProps & {
+    id?: string;
+};
+declare function PageControl({ id, overrides, ...restProps }: PageControlProps): import("react/jsx-runtime").JSX.Element;
+export default PageControl;

package/dist/components/page-control/page-control.js

@@ -0,0 +1,59 @@
+import { jsx as u } from "react/jsx-runtime";
+import { mergeOverrides as f } from "baseui";
+import { PageControl as p, KIND as e } from "baseui/page-control";
+import { hexToRgba as s } from "../../utils/index.js";
+function l(r, t, n) {
+  if (n)
+    return r.colors.contentStateDisabled;
+  switch (t) {
+    case e.inverse:
+      return r.colors.contentInversePrimary;
+    case e.alwaysLight:
+      return r.colors.contentOnColorInverse;
+    case e.alwaysDark:
+      return r.colors.contentOnColor;
+    case e.default:
+    default:
+      return r.colors.contentPrimary;
+  }
+}
+function v({ id: r, overrides: t, ...n }) {
+  return /* @__PURE__ */ u(
+    p,
+    {
+      overrides: f(
+        {
+          Root: {
+            props: {
+              id: r
+            },
+            style: ({ $theme: o, $kind: a }) => ({
+              ":active": {
+                boxShadow: `999px 999px 0 ${s(l(o, a), 0.08)} inset`
+              }
+            })
+          },
+          Dot: {
+            props: (o) => ({
+              ...r && {
+                id: `${r}-${o["aria-label"].replace(/\s/g, "-")}`
+              },
+              ...o
+            }),
+            style: ({ $theme: o, $active: a, $disabled: c, $kind: i }) => ({
+              backgroundColor: s(
+                l(o, i, c),
+                a ? 1 : 0.4
+              )
+            })
+          }
+        },
+        t
+      ),
+      ...n
+    }
+  );
+}
+export {
+  v as default
+};

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

@@ -0,0 +1,3 @@
+export * from './pagination';
+export * from './types';
+export type { PaginationOverrides, Callbacks as PaginationCallbacks, StatefulContainerState as PaginationStatefulContainerState, StateReducerFn as PaginationStateReducerFn, } from 'baseui/pagination';

package/dist/components/pagination/index.js

@@ -0,0 +1,5 @@
+import { Pagination as i, StatefulPagination as n } from "./pagination.js";
+export {
+  i as Pagination,
+  n as StatefulPagination
+};

package/dist/components/pagination/pagination-without-dropdown.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps } from './types';
+declare function PaginationWithoutDropdown({ size, currentPage, numPages, onPageChange, onNextClick, onPrevClick, labels, disabled, id, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default PaginationWithoutDropdown;

package/dist/components/pagination/pagination-without-dropdown.js

@@ -0,0 +1,134 @@
+import { jsxs as N, jsx as d } from "react/jsx-runtime";
+import { useCallback as y } from "react";
+import { useStyletron as A } from "baseui";
+import { getButtonIconSize as B } from "../button/overrides.js";
+import u from "../button-icon/button-icon.js";
+import D from "../icons/solid/chevron-left/index.js";
+import b from "../icons/solid/chevron-right/index.js";
+function z({
+  size: p,
+  currentPage: o,
+  numPages: e,
+  onPageChange: f,
+  onNextClick: m,
+  onPrevClick: v,
+  labels: i,
+  disabled: s,
+  id: n
+}) {
+  const [S] = A(), c = y(
+    (t) => {
+      t >= 1 && t <= e && f && f({ nextPage: t, prevPage: o });
+    },
+    [o, e, f]
+  ), k = () => [...Array(e)].map((t, l) => {
+    const r = l + 1;
+    return /* @__PURE__ */ d(
+      u,
+      {
+        size: p,
+        shape: "square",
+        kind: "tertiary",
+        disabled: s,
+        onClick: () => c(r),
+        ...n && { id: `${n}-page-number-${r}` },
+        overrides: {
+          BaseButton: {
+            style: ({ $theme: a }) => {
+              const w = () => s ? a.colors.contentStateDisabled : r === o ? a.colors.contentInversePrimary : a.colors.contentPrimary, h = {
+                backgroundColor: r === o && !s ? a.colors.backgroundInversePrimary : "transparent",
+                boxShadow: "none",
+                color: w()
+              };
+              return {
+                ...h,
+                // Disable active and hover states for numbers
+                ":hover": h,
+                ":active": h
+              };
+            }
+          }
+        },
+        children: r
+      },
+      r
+    );
+  }), x = {
+    size: p,
+    shape: "square",
+    kind: "tertiary",
+    overrides: {
+      BaseButton: {
+        style: ({ $theme: t, $disabled: l }) => {
+          const r = {
+            backgroundColor: "transparent",
+            boxShadow: "none",
+            color: l ? t.colors.contentStateDisabled : t.colors.contentPrimary
+          };
+          return {
+            ":hover": r,
+            ":active": r
+          };
+        }
+      }
+    }
+  }, C = y(
+    (t) => {
+      o > 1 && (c(o - 1), v && v({ event: t }));
+    },
+    [o, c, v]
+  ), I = y(
+    (t) => {
+      o < e && (c(o + 1), m && m({ event: t }));
+    },
+    [o, e, c, m]
+  );
+  return /* @__PURE__ */ N(
+    "div",
+    {
+      id: n,
+      className: S({
+        display: "flex",
+        alignItems: "center"
+      }),
+      children: [
+        /* @__PURE__ */ d(
+          u,
+          {
+            ...x,
+            onClick: C,
+            disabled: s || o === 1,
+            ...n && { id: `${n}-prev-button` },
+            children: /* @__PURE__ */ d(
+              D,
+              {
+                size: B(p),
+                title: (i == null ? void 0 : i.prevButton) || "Previous"
+              }
+            )
+          }
+        ),
+        k(),
+        /* @__PURE__ */ d(
+          u,
+          {
+            ...x,
+            onClick: I,
+            disabled: s || o === e,
+            ...n && { id: `${n}-next-button` },
+            children: /* @__PURE__ */ d(
+              b,
+              {
+                size: B(p),
+                title: (i == null ? void 0 : i.nextButton) || "Next"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  z as default
+};

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,3 @@
+import { PaginationProps, StatefulPaginationProps } from './types';
+export declare function Pagination({ disabled, size, numPages, labels, overrides, id, ...restProps }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatefulPagination({ numPages, disabled, size, labels, overrides, id, ...restProps }: StatefulPaginationProps): import("react/jsx-runtime").JSX.Element;