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

package/dist/components/pagination/pagination.js

@@ -0,0 +1,187 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useStyletron as d, mergeOverrides as g } from "baseui";
+import { Pagination as S, StatefulPagination as h } from "baseui/pagination";
+import B from "../../themes/typography.js";
+import { toTitleCase as C } from "../../utils/index.js";
+import m from "../button/button.js";
+import { getButtonIconSize as l } from "../button/overrides.js";
+import { getBaseInputSize as s } from "../input/input.js";
+import { Select as P } from "../select/select.js";
+import x from "./pagination-without-dropdown.js";
+import k from "./stateful-pagination-without-dropdown.js";
+import f from "../icons/solid/chevron-left/index.js";
+import v from "../icons/solid/chevron-right/index.js";
+function y({ size: o, disabled: r, labels: n, theme: c, id: e }) {
+  const a = {
+    backgroundColor: "transparent",
+    color: c.colors.contentStateDisabled
+  }, u = {
+    BaseButton: {
+      style: {
+        ...r && {
+          ":hover": a,
+          ":active": a
+        }
+      }
+    }
+  };
+  return {
+    Root: {
+      props: {
+        id: e
+      }
+    },
+    DropdownContainer: {
+      style: () => ({
+        outline: "none"
+      })
+    },
+    Select: {
+      // Use Clay's `Select` with correct size type
+      component: (t) => /* @__PURE__ */ i(
+        P,
+        {
+          ...t,
+          disabled: r,
+          size: o,
+          ...e && { id: `${e}-select` }
+        }
+      ),
+      props: {
+        overrides: {
+          ControlContainer: {
+            style: ({ $theme: t }) => {
+              const p = {
+                backgroundColor: t.colors.backgroundPrimary,
+                borderColor: t.colors.contentPrimary
+              };
+              return {
+                backgroundColor: t.colors.backgroundTertiary,
+                ...!r && {
+                  ":hover": p,
+                  ":active": p
+                }
+              };
+            }
+          },
+          SingleValue: {
+            props: ({ value: t, ...p }) => ({
+              ...e && { id: `${e}-current-page-number-${t}` },
+              ...p
+            }),
+            style: ({ $theme: t }) => ({
+              color: r ? t.colors.contentStateDisabled : t.colors.contentTertiary,
+              ...B[`Paragraph${C(o)}`]
+            })
+          }
+        }
+      }
+    },
+    MaxLabel: {
+      style: ({ $theme: t }) => ({
+        color: r ? t.colors.contentStateDisabled : t.colors.contentPrimary
+      })
+    },
+    NextButton: {
+      // We need to override to whole component to customize the icon
+      component: (t) => /* @__PURE__ */ i(
+        m,
+        {
+          ...t,
+          ...e && { id: `${e}-next-button` },
+          size: o,
+          kind: "tertiary",
+          disabled: t.$disabled || r,
+          endEnhancer: c.direction === "rtl" ? /* @__PURE__ */ i(f, { title: "", size: l(o) }) : /* @__PURE__ */ i(v, { title: "", size: l(o) }),
+          overrides: u,
+          children: (n == null ? void 0 : n.nextButton) || "Next"
+        }
+      )
+    },
+    PrevButton: {
+      // We need to override to whole component to customize the icon
+      component: (t) => /* @__PURE__ */ i(
+        m,
+        {
+          ...t,
+          ...e && { id: `${e}-prev-button` },
+          size: o,
+          kind: "tertiary",
+          disabled: t.$disabled || r,
+          startEnhancer: c.direction === "rtl" ? /* @__PURE__ */ i(v, { title: "", size: l(o) }) : /* @__PURE__ */ i(f, { title: "", size: l(o) }),
+          overrides: u,
+          children: (n == null ? void 0 : n.prevButton) || "Prev"
+        }
+      )
+    }
+  };
+}
+function F({
+  disabled: o = !1,
+  size: r,
+  numPages: n,
+  labels: c,
+  overrides: e,
+  id: a,
+  ...u
+}) {
+  const [, t] = d();
+  return n < 10 ? /* @__PURE__ */ i(
+    x,
+    {
+      id: a,
+      size: r,
+      numPages: n,
+      disabled: o,
+      ...u
+    }
+  ) : /* @__PURE__ */ i(
+    S,
+    {
+      size: s(r),
+      numPages: n,
+      overrides: g(
+        y({ size: r, disabled: o, labels: c, theme: t, id: a }),
+        e
+      ),
+      ...u
+    }
+  );
+}
+function H({
+  numPages: o,
+  disabled: r = !1,
+  size: n,
+  labels: c,
+  overrides: e,
+  id: a,
+  ...u
+}) {
+  const [, t] = d();
+  return o < 10 ? /* @__PURE__ */ i(
+    k,
+    {
+      id: a,
+      size: n,
+      numPages: o,
+      disabled: r,
+      ...u
+    }
+  ) : /* @__PURE__ */ i(
+    h,
+    {
+      numPages: o,
+      size: s(n),
+      labels: c,
+      overrides: g(
+        y({ size: n, disabled: r, labels: c, theme: t, id: a }),
+        e
+      ),
+      ...u
+    }
+  );
+}
+export {
+  F as Pagination,
+  H as StatefulPagination
+};

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

@@ -0,0 +1,2 @@
+import { StatefulPaginationProps } from './types';
+export default function StatefulPaginationWithoutDropdown({ numPages, initialState, stateReducer, onPageChange, ...props }: StatefulPaginationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { StatefulContainer as p } from "baseui/pagination";
+import u from "./pagination-without-dropdown.js";
+function h({
+  numPages: t,
+  initialState: n = { currentPage: 1 },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  stateReducer: i = (o, f) => f,
+  onPageChange: a,
+  ...e
+}) {
+  return /* @__PURE__ */ r(
+    p,
+    {
+      numPages: t,
+      initialState: n,
+      stateReducer: i,
+      onPageChange: a,
+      children: (o) => /* @__PURE__ */ r(
+        u,
+        {
+          numPages: t,
+          ...o,
+          ...e
+        }
+      )
+    }
+  );
+}
+export {
+  h as default
+};

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

@@ -0,0 +1,9 @@
+import { PaginationProps as BasePaginationProps, StatefulPaginationProps as BaseStatefulPaginationProps } from 'baseui/pagination';
+export type PaginationSize = "small" | "medium" | "large";
+export type SharedPaginationProps = {
+    size: PaginationSize;
+    disabled?: boolean;
+    id?: string;
+};
+export type PaginationProps = Omit<BasePaginationProps, "size"> & SharedPaginationProps;
+export type StatefulPaginationProps = Omit<BaseStatefulPaginationProps, "size"> & SharedPaginationProps;

package/dist/components/phone-input/default-args.d.ts

@@ -0,0 +1,27 @@
+import { PhoneInputProps } from '.';
+export declare const defaultArgs: {
+    "aria-label": string;
+    "aria-labelledby": any;
+    "aria-describedby": any;
+    country: {
+        readonly label: "United States";
+        readonly id: "US";
+        readonly dialCode: "+1";
+    };
+    disabled: boolean;
+    error: boolean;
+    id: string;
+    maxDropdownHeight: string;
+    maxDropdownWidth: string;
+    mapIsoToLabel: any;
+    name: string;
+    onCountryChange: () => void;
+    onTextChange: () => void;
+    overrides: {};
+    placeholder: string;
+    positive: boolean;
+    required: boolean;
+    size: PhoneInputProps["size"];
+    text: string;
+    clearable: boolean;
+};

package/dist/components/phone-input/index.d.ts

@@ -0,0 +1,4 @@
+export { COUNTRIES, DEFAULT_MAX_DROPDOWN_WIDTH, DEFAULT_MAX_DROPDOWN_HEIGHT, Flag, StyledFlag, STATE_CHANGE_TYPE as PHONE_INPUT_STATE_CHANGE_TYPE, } from 'baseui/phone-input';
+export type { Country, CountryIso, Countries, FlagProps, State as PhoneInputState, StateChange as PhoneInputStateChange, StateReducer as PhoneInputStateReducer, mapIsoToLabel, CountrySelectDropdownProps, CountrySelectProps, PhoneInputOverrides, } from 'baseui/phone-input';
+export * from './phone-input';
+export * from './stateful-phone-input';

package/dist/components/phone-input/index.js

@@ -0,0 +1,13 @@
+import { COUNTRIES as E, DEFAULT_MAX_DROPDOWN_HEIGHT as o, DEFAULT_MAX_DROPDOWN_WIDTH as t, Flag as A, STATE_CHANGE_TYPE as P, StyledFlag as e } from "baseui/phone-input";
+import { PhoneInput as N } from "./phone-input.js";
+import { StatefulPhoneInput as H } from "./stateful-phone-input.js";
+export {
+  E as COUNTRIES,
+  o as DEFAULT_MAX_DROPDOWN_HEIGHT,
+  t as DEFAULT_MAX_DROPDOWN_WIDTH,
+  A as Flag,
+  P as PHONE_INPUT_STATE_CHANGE_TYPE,
+  N as PhoneInput,
+  H as StatefulPhoneInput,
+  e as StyledFlag
+};

package/dist/components/phone-input/overrides.d.ts

@@ -0,0 +1,9 @@
+import { Theme } from 'baseui';
+import { PhoneInputOverrides } from 'baseui/phone-input';
+import { INPUT_SIZE } from '../input';
+export declare function getPhoneInputOverrides(theme: Theme, { size, disabled, id, overrides, }: {
+    size: keyof typeof INPUT_SIZE;
+    disabled?: boolean;
+    id?: string;
+    overrides?: PhoneInputOverrides;
+}): import('baseui/helpers/overrides').Overrides<any>;

package/dist/components/phone-input/overrides.js

@@ -0,0 +1,50 @@
+import { mergeOverrides as n } from "baseui";
+import { getInputOverrides as d } from "../input/overrides.js";
+import { getSelectOverrides as u } from "../select/overrides.js";
+function a(r, {
+  size: e,
+  disabled: o,
+  id: t,
+  overrides: i
+}) {
+  const p = n(
+    u(r, e, o),
+    {
+      ControlContainer: {
+        style: {
+          padding: 0,
+          borderRadius: r.borders.radius300,
+          cursor: o ? "not-allowed" : "pointer"
+        }
+      },
+      IconsContainer: {
+        style: ({ $theme: s }) => ({
+          paddingRight: s.sizing.scale600
+        })
+      }
+    }
+  );
+  return n(
+    {
+      Root: {
+        props: {
+          id: t && `${t}-phone-input-root`
+        }
+      },
+      CountrySelect: {
+        props: {
+          overrides: p
+        }
+      },
+      Input: {
+        props: {
+          overrides: d({ size: e })
+        }
+      }
+    },
+    i
+  );
+}
+export {
+  a as getPhoneInputOverrides
+};

package/dist/components/phone-input/phone-input.d.ts

@@ -0,0 +1,7 @@
+import { PhoneInputProps as BasePhoneInputProps } from 'baseui/phone-input';
+import { INPUT_SIZE } from '../input';
+export type PhoneInputSize = keyof typeof INPUT_SIZE;
+export type PhoneInputProps = Omit<BasePhoneInputProps, "size"> & {
+    size: PhoneInputSize;
+};
+export declare function PhoneInput({ disabled, id, size, overrides, ...restProps }: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/phone-input/phone-input.js

@@ -0,0 +1,32 @@
+import { jsx as p } from "react/jsx-runtime";
+import { PhoneInput as u } from "baseui/phone-input";
+import { useStyletron as i } from "baseui";
+import { getBaseInputSize as f } from "../input/input.js";
+import { getPhoneInputOverrides as s } from "./overrides.js";
+function v({
+  disabled: o,
+  id: t,
+  size: e = "medium",
+  overrides: r,
+  ...n
+}) {
+  const [, m] = i();
+  return /* @__PURE__ */ p(
+    u,
+    {
+      id: t,
+      size: f(e),
+      disabled: o,
+      overrides: s(m, {
+        size: e,
+        disabled: o,
+        id: t,
+        overrides: r
+      }),
+      ...n
+    }
+  );
+}
+export {
+  v as PhoneInput
+};

package/dist/components/phone-input/stateful-phone-input.d.ts

@@ -0,0 +1,6 @@
+import { StatefulPhoneInputProps as BaseStatefulPhoneInputProps } from 'baseui/phone-input';
+import { INPUT_SIZE } from '../input';
+export type StatefulPhoneInputProps = Omit<BaseStatefulPhoneInputProps, "size"> & {
+    size: keyof typeof INPUT_SIZE;
+};
+export declare function StatefulPhoneInput({ disabled, id, size, overrides, ...restProps }: StatefulPhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/phone-input/stateful-phone-input.js

@@ -0,0 +1,32 @@
+import { jsx as u } from "react/jsx-runtime";
+import { StatefulPhoneInput as p } from "baseui/phone-input";
+import { useStyletron as f } from "baseui";
+import { getBaseInputSize as i } from "../input/input.js";
+import { getPhoneInputOverrides as s } from "./overrides.js";
+function l({
+  disabled: t,
+  id: e,
+  size: o = "medium",
+  overrides: r,
+  ...n
+}) {
+  const [, m] = f();
+  return /* @__PURE__ */ u(
+    p,
+    {
+      id: e,
+      size: i(o),
+      disabled: t,
+      overrides: s(m, {
+        size: o,
+        disabled: t,
+        id: e,
+        overrides: r
+      }),
+      ...n
+    }
+  );
+}
+export {
+  l as StatefulPhoneInput
+};

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

@@ -1 +1,9 @@
+export { default as PopoverHeader, PopoverCloseButton } from './popover-header';
+export type { PopoverHeaderProps, PopoverCloseButtonProps, } from './popover-header';
+export { default as PopoverBody } from './popover-body';
+export type { PopoverBodyProps } from './popover-body';
+export { default as PopoverFooter } from './popover-footer';
+export type { PopoverFooterProps } from './popover-footer';
+export * from './popover';
+export * from './stepper-popover';
 export type { PopoverProps, StatefulPopoverProps } from 'baseui/popover';

package/dist/components/popover/index.js

@@ -0,0 +1,14 @@
+import { PopoverCloseButton as r, default as p } from "./popover-header.js";
+import { default as f } from "./popover-body.js";
+import { default as v } from "./popover-footer.js";
+import { Popover as d, StatefulPopover as l } from "./popover.js";
+import { StepperPopover as u } from "./stepper-popover.js";
+export {
+  d as Popover,
+  f as PopoverBody,
+  r as PopoverCloseButton,
+  v as PopoverFooter,
+  p as PopoverHeader,
+  l as StatefulPopover,
+  u as StepperPopover
+};

package/dist/components/popover/popover-body.d.ts

@@ -0,0 +1,3 @@
+import { BlockProps } from 'baseui/block';
+export type PopoverBodyProps = BlockProps;
+export default function PopoverBody({ children, ...restProps }: PopoverBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover-body.js

@@ -0,0 +1,27 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Block as s } from "baseui/block";
+import { useStyletron as e } from "baseui";
+import p from "../../themes/typography.js";
+function c({
+  children: i,
+  ...t
+}) {
+  const [a, o] = e();
+  return /* @__PURE__ */ r(
+    s,
+    {
+      className: a({
+        paddingLeft: o.sizing.scale600,
+        paddingRight: o.sizing.scale600,
+        paddingTop: o.sizing.scale300,
+        paddingBottom: o.sizing.scale600,
+        ...p.ParagraphMedium
+      }),
+      ...t,
+      children: i
+    }
+  );
+}
+export {
+  c as default
+};

package/dist/components/popover/popover-footer.d.ts

@@ -0,0 +1,3 @@
+import { BlockProps } from 'baseui/block';
+export type PopoverFooterProps = BlockProps;
+export default function PopoverFooter({ children, ...restProps }: PopoverFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover-footer.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Block as r } from "baseui/block";
+import { useStyletron as n } from "baseui";
+function p({
+  children: t,
+  ...e
+}) {
+  const [i, o] = n();
+  return /* @__PURE__ */ s(
+    r,
+    {
+      className: i({
+        paddingLeft: o.sizing.scale600,
+        paddingRight: o.sizing.scale600,
+        paddingBottom: o.sizing.scale600
+      }),
+      ...e,
+      children: t
+    }
+  );
+}
+export {
+  p as default
+};

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

@@ -0,0 +1,20 @@
+import { ComponentType, ReactNode } from 'react';
+import { BlockProps } from 'baseui/block';
+import { IconProps } from 'baseui/icon';
+import { ButtonOverrides } from '../button';
+export type PopoverCloseButtonProps = {
+    overrides?: ButtonOverrides;
+    CloseIcon?: ComponentType<IconProps>;
+    iconProps?: IconProps;
+    onClick: () => void;
+};
+export declare function PopoverCloseButton({ overrides, CloseIcon, iconProps, onClick, }: PopoverCloseButtonProps): import("react/jsx-runtime").JSX.Element;
+export type PopoverHeaderProps = {
+    blockProps?: BlockProps;
+    children?: ReactNode;
+    closeButtonOverrides?: ButtonOverrides;
+    CloseIcon?: ComponentType<IconProps>;
+    iconProps?: IconProps;
+    onCloseIconClick?: () => void;
+};
+export default function PopoverHeader({ blockProps, children, closeButtonOverrides, onCloseIconClick, CloseIcon, iconProps, }: PopoverHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,95 @@
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { useStyletron as l, mergeOverrides as d } from "baseui";
+import { Block as p } from "baseui/block";
+import g from "../button-icon/button-icon.js";
+import { HeadingXSmall as u } from "baseui/typography";
+import f from "../icons/line/close/index.js";
+function v({
+  overrides: n,
+  CloseIcon: o,
+  iconProps: s,
+  onClick: e
+}) {
+  const [, r] = l(), a = o || f, t = {
+    backgroundColor: "transparent",
+    color: r.colors.contentPrimary,
+    boxShadow: "none"
+  };
+  return /* @__PURE__ */ i(
+    g,
+    {
+      kind: "tertiary",
+      onClick: e,
+      overrides: d(
+        {
+          BaseButton: {
+            style: () => ({
+              ":hover": t,
+              ":active": t
+            })
+          }
+        },
+        n
+      ),
+      children: /* @__PURE__ */ i(
+        a,
+        {
+          size: r.sizing.scale600,
+          ...!o && { stroke: "currentColor" },
+          ...s
+        }
+      )
+    }
+  );
+}
+function S({
+  blockProps: n,
+  children: o,
+  closeButtonOverrides: s,
+  onCloseIconClick: e,
+  CloseIcon: r,
+  iconProps: a = {}
+}) {
+  const [t, c] = l();
+  return /* @__PURE__ */ m(
+    p,
+    {
+      className: t({
+        position: "relative",
+        paddingTop: c.sizing.scale600,
+        paddingLeft: c.sizing.scale600,
+        paddingRight: "72px"
+        // Make space for close button
+      }),
+      ...n,
+      children: [
+        /* @__PURE__ */ i(u, { margin: 0, children: o }),
+        e && /* @__PURE__ */ i(
+          v,
+          {
+            onClick: e,
+            CloseIcon: r,
+            iconProps: a,
+            overrides: d(
+              {
+                BaseButton: {
+                  style: () => ({
+                    position: "absolute",
+                    top: "7px",
+                    // Vertically centers to the title
+                    right: c.sizing.scale300
+                  })
+                }
+              },
+              s
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  v as PopoverCloseButton,
+  S as default
+};

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps, StatefulPopoverProps } from 'baseui/popover';
+export declare function Popover({ overrides, ...restProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function StatefulPopover({ overrides, ...restProps }: StatefulPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/popover/popover.js

@@ -0,0 +1,48 @@
+import { jsx as e } from "react/jsx-runtime";
+import { mergeOverrides as s } from "baseui";
+import { Popover as d, StatefulPopover as i } from "baseui/popover";
+const a = {
+  Body: {
+    style: ({ $theme: r }) => ({
+      backgroundColor: r.colors.backgroundPrimary,
+      borderRadius: r.borders.radius500,
+      boxShadow: r.lighting.shallowBelow
+    })
+  },
+  Inner: {
+    style: ({ $theme: r }) => ({
+      backgroundColor: r.colors.backgroundPrimary,
+      borderRadius: r.borders.radius500
+    })
+  },
+  Arrow: {
+    style: ({ $theme: r }) => ({
+      backgroundColor: r.colors.backgroundPrimary
+    })
+  }
+};
+function t({ overrides: r, ...o }) {
+  return /* @__PURE__ */ e(
+    d,
+    {
+      overrides: s(a, r),
+      ...o
+    }
+  );
+}
+function c({
+  overrides: r,
+  ...o
+}) {
+  return /* @__PURE__ */ e(
+    i,
+    {
+      overrides: s(a, r),
+      ...o
+    }
+  );
+}
+export {
+  t as Popover,
+  c as StatefulPopover
+};