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

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
+};

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { StatefulPopoverProps } from 'baseui/popover';
+import { ContentStepperOverrides } from '../content-stepper';
+export type PopoverStep = {
+    title?: ReactNode;
+    body: ReactNode;
+    withCloseButton?: boolean;
+};
+export type StepperPopoverProps = Omit<StatefulPopoverProps, "content"> & {
+    steps: PopoverStep[];
+    contentStepperOverrides: ContentStepperOverrides;
+    withStepCount?: boolean;
+};
+export declare function StepperPopover({ children, contentStepperOverrides, steps, withStepCount, ...restProps }: StepperPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ContentStepper as f } from "../content-stepper/content-stepper.js";
+import { StatefulPopover as i } from "./popover.js";
+function v({
+  children: t,
+  contentStepperOverrides: r,
+  steps: p,
+  withStepCount: n = !0,
+  ...m
+}) {
+  return /* @__PURE__ */ e(
+    i,
+    {
+      content: ({ close: o }) => /* @__PURE__ */ e(
+        f,
+        {
+          steps: p,
+          withStepCount: n,
+          onClose: o,
+          overrides: r,
+          onStepsCompleted: o
+        }
+      ),
+      ...m,
+      children: t
+    }
+  );
+}
+export {
+  v as StepperPopover
+};

package/dist/components/progress-bar/index.d.ts

@@ -1,2 +1,2 @@
-export type { ProgressBarProps, ProgressBarRoundedProps, } from 'baseui/progress-bar';
+export type { ProgressBarRoundedProps } from 'baseui/progress-bar';
 export * from './progress-bar';

package/dist/components/progress-bar/index.js

@@ -0,0 +1,6 @@
+import { ProgressBar as e } from "./progress-bar.js";
+import { ProgressBarRounded as a } from "baseui/progress-bar";
+export {
+  e as ProgressBar,
+  a as ProgressBarRounded
+};

package/dist/components/progress-bar/progress-bar.d.ts

@@ -1,3 +1,6 @@
 import { ProgressBarProps as BaseProgressBarProps } from 'baseui/progress-bar';
-export declare function ProgressBar({ overrides, ...restProps }: BaseProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export type ProgressBarProps = BaseProgressBarProps & {
+    stepAnimationIterationCount?: number | string;
+};
+export declare function ProgressBar({ overrides, stepAnimationIterationCount, ...restProps }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
 export { ProgressBarRounded } from 'baseui/progress-bar';

package/dist/components/progress-bar/progress-bar.js

@@ -0,0 +1,91 @@
+import { jsx as g } from "react/jsx-runtime";
+import { mergeOverrides as p } from "baseui";
+import { ProgressBar as b } from "baseui/progress-bar";
+import { ProgressBarRounded as M } from "baseui/progress-bar";
+import s from "../../themes/typography.js";
+function y(e) {
+  return e === "small" ? s.LabelSmall : e === "large" ? s.LabelLarge : s.LabelMedium;
+}
+function h({
+  overrides: e,
+  stepAnimationIterationCount: i = 1,
+  ...l
+}) {
+  return /* @__PURE__ */ g(
+    b,
+    {
+      overrides: p(
+        {
+          Bar: {
+            style: ({ $theme: r }) => ({
+              borderRadius: r.sizing.scale600
+            })
+          },
+          BarProgress: {
+            style: ({
+              $value: r,
+              $successValue: o,
+              $steps: t,
+              $index: m,
+              $maxValue: u,
+              $minValue: a = 0
+            }) => {
+              if (t > 1) {
+                const n = u || o, c = (n - a) / t, d = (r - a) / (n - a) * 100, f = Math.floor(d / c);
+                if (m === f)
+                  return {
+                    animationIterationCount: i,
+                    animationFillMode: "both",
+                    animationName: {
+                      "0%": {
+                        transform: "translateX(-102%)",
+                        opacity: 1
+                      },
+                      "50%": {
+                        transform: "translateX(0%)",
+                        opacity: 1
+                      },
+                      "100%": {
+                        transform: "translateX(0%)",
+                        opacity: typeof i == "number" ? 1 : 0
+                      }
+                    }
+                  };
+              }
+              return {};
+            }
+          },
+          BarContainer: {
+            style: ({ $theme: r, $size: o }) => ({
+              marginBottom: o === "small" ? r.sizing.scale500 : r.sizing.scale550
+            })
+          },
+          InfiniteBar: {
+            style: ({ $theme: r, $isLeft: o }) => {
+              const t = r.sizing.scale600;
+              return o ? {
+                borderTopLeftRadius: t,
+                borderBottomLeftRadius: t
+              } : {
+                borderTopRightRadius: t,
+                borderBottomRightRadius: t
+              };
+            }
+          },
+          Label: {
+            style: ({ $theme: r, $size: o }) => ({
+              color: r.colors.contentPrimary,
+              ...y(o)
+            })
+          }
+        },
+        e
+      ),
+      ...l
+    }
+  );
+}
+export {
+  h as ProgressBar,
+  M as ProgressBarRounded
+};

package/dist/components/progress-steps/index.d.ts

@@ -0,0 +1,7 @@
+export type { Orientation, ProgressStepsOverrides, StepOverrides, NumberedStepOverrides, StyleProps as ProgressStepsStyleProps, } from 'baseui/progress-steps';
+export { StyledProgressSteps, StyledStep, StyledIconContainer, StyledIcon, StyledInnerIcon, StyledContent, StyledContentTitle, StyledContentTail, StyledContentDescription, StyledNumberStep, StyledNumberIcon, StyledNumberContentTail, ORIENTATION as PROGRESS_STEPS_ORIENTATION, } from 'baseui//progress-steps';
+export * from './progress-steps';
+export * from './step';
+export { NumberedStep as ClayNumberedStep } from './numbered-step';
+export type { NumberedStepProps as ClayNumberedStepProps } from './numbered-step';
+export * from './numbered-step-title';

package/dist/components/progress-steps/index.js

@@ -0,0 +1,25 @@
+import { ORIENTATION as S, StyledContent as r, StyledContentDescription as o, StyledContentTail as n, StyledContentTitle as l, StyledIcon as d, StyledIconContainer as p, StyledInnerIcon as y, StyledNumberContentTail as m, StyledNumberIcon as N, StyledNumberStep as s, StyledProgressSteps as I, StyledStep as T } from "baseui//progress-steps";
+import { ProgressSteps as i } from "./progress-steps.js";
+import { Step as C } from "./step.js";
+import { NumberedStep as c } from "./numbered-step.js";
+import { NumberedStepSubtitle as x, NumberedStepTitle as O } from "./numbered-step-title.js";
+export {
+  c as ClayNumberedStep,
+  x as NumberedStepSubtitle,
+  O as NumberedStepTitle,
+  S as PROGRESS_STEPS_ORIENTATION,
+  i as ProgressSteps,
+  C as Step,
+  r as StyledContent,
+  o as StyledContentDescription,
+  n as StyledContentTail,
+  l as StyledContentTitle,
+  d as StyledIcon,
+  p as StyledIconContainer,
+  y as StyledInnerIcon,
+  m as StyledNumberContentTail,
+  N as StyledNumberIcon,
+  s as StyledNumberStep,
+  I as StyledProgressSteps,
+  T as StyledStep
+};

package/dist/components/progress-steps/numbered-step-title.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, ComponentType } from 'react';
+import { BlockProps } from 'baseui/block';
+import { Override } from 'baseui/helpers/overrides';
+export type NumberedStepTitleOverrides = {
+    Root?: Override;
+    ContentContainer?: Override;
+    EndEnhancerContainer?: Override;
+};
+export type NumberedStepTitleProps = {
+    children: ReactNode;
+    endEnhancer?: ReactNode | ComponentType<any>;
+    overrides?: NumberedStepTitleOverrides;
+};
+export declare function NumberedStepTitle({ children, endEnhancer, overrides, }: NumberedStepTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberedStepSubtitle({ children, ...restProps }: BlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-steps/numbered-step-title.js

@@ -0,0 +1,41 @@
+import { jsxs as f, jsx as i } from "react/jsx-runtime";
+import u from "react";
+import { getOverrides as o } from "baseui/helpers/overrides";
+import { styled as r } from "baseui";
+import { ParagraphSmall as d } from "baseui/typography";
+function j({
+  children: e,
+  endEnhancer: t,
+  overrides: n = {}
+}) {
+  const [a, m] = o(
+    n.Root,
+    r("div", {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between"
+    })
+  ), [p, s] = o(
+    n.ContentContainer,
+    r("div", {})
+  ), [l, c] = o(
+    n.EndEnhancerContainer,
+    r("div", {
+      display: "flex",
+      alignItems: "center",
+      minWidth: "70px",
+      justifyContent: "center"
+    })
+  );
+  return /* @__PURE__ */ f(a, { ...m, children: [
+    /* @__PURE__ */ i(p, { ...s, children: e }),
+    t && t !== 0 && /* @__PURE__ */ i(l, { ...c, children: typeof t == "function" ? u.createElement(t) : t })
+  ] });
+}
+function P({ children: e, ...t }) {
+  return /* @__PURE__ */ i(d, { marginTop: "scale200", marginBottom: "0", ...t, children: e });
+}
+export {
+  P as NumberedStepSubtitle,
+  j as NumberedStepTitle
+};