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

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

@@ -0,0 +1,22 @@
+import { ReactNode, ComponentType } from 'react';
+import { NumberedStepProps as BaseNumberedStepProps } from 'baseui/progress-steps';
+import { NumberedStepTitleOverrides } from './numbered-step-title';
+export declare function NumberedStepIcon(props: {
+    $isActive: boolean;
+    $isCompleted: boolean;
+    isPending: boolean;
+    hasError?: boolean;
+    $isCurrent: boolean;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type NumberedStepProps = BaseNumberedStepProps & {
+    id?: string;
+    subtitle?: ReactNode;
+    isPending?: boolean;
+    pendingText?: ReactNode;
+    hasError?: boolean;
+    errorText?: ReactNode;
+    endEnhancer?: ReactNode | ComponentType<any>;
+    titleOverrides?: NumberedStepTitleOverrides;
+};
+export declare function NumberedStep({ id, title, subtitle, isPending, hasError, pendingText, errorText, endEnhancer, children, overrides, titleOverrides, ...restProps }: NumberedStepProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,108 @@
+import { jsx as r, jsxs as z } from "react/jsx-runtime";
+import { mergeOverrides as v } from "baseui";
+import { NumberedStep as y, StyledNumberIcon as C } from "baseui/progress-steps";
+import { Spinner as N } from "../spinner/spinner.js";
+import { LabelMedium as $ } from "baseui/typography";
+import { NumberedStepTitle as k, NumberedStepSubtitle as f } from "./numbered-step-title.js";
+import x from "../icons/line/check/index.js";
+import I from "../icons/line/close/index.js";
+function L(l) {
+  const {
+    $isActive: e,
+    $isCompleted: i,
+    isPending: n,
+    hasError: t,
+    $isCurrent: s,
+    children: c,
+    ...p
+  } = l;
+  return /* @__PURE__ */ r(
+    C,
+    {
+      ...p,
+      $isActive: e,
+      $isCompleted: i,
+      $isCurrent: s,
+      children: i ? /* @__PURE__ */ r(x, { size: 16, stroke: "currentColor" }) : e && n ? /* @__PURE__ */ r(N, { $size: 16, ...p }) : e && t ? /* @__PURE__ */ r(I, { $size: 16, ...p, stroke: "currentColor" }) : c
+    }
+  );
+}
+function T({
+  id: l,
+  title: e,
+  subtitle: i,
+  isPending: n = !1,
+  hasError: t = !1,
+  pendingText: s = "Pending...",
+  errorText: c = "Error",
+  endEnhancer: p,
+  children: a,
+  overrides: g,
+  titleOverrides: b,
+  ...h
+}) {
+  const u = i || n || t ? "25px" : "15px", d = "42px", S = v(
+    {
+      Root: {
+        props: {
+          id: l
+        }
+      },
+      Icon: {
+        component: L,
+        props: {
+          isPending: n,
+          hasError: t
+        },
+        style: ({ $theme: o, $orientation: m }) => ({
+          width: o.sizing.scale950,
+          height: o.sizing.scale950,
+          borderRadius: o.sizing.scale950,
+          border: "none",
+          ":before": { border: "none" },
+          ...m === "vertical" ? {
+            marginTop: u
+          } : {
+            marginLeft: d
+          }
+        })
+      },
+      Description: {
+        style: ({ $theme: o }) => ({
+          marginBottom: o.sizing.scale200
+        })
+      },
+      Tail: {
+        style: ({ $orientation: o, $theme: m }) => ({
+          ...o === "vertical" ? {
+            height: "100%",
+            left: "25px",
+            top: 0,
+            marginTop: `calc(${m.sizing.scale950}  + ${u})`
+          } : {
+            top: m.sizing.scale600,
+            marginLeft: `-${d}`,
+            marginRight: `-${d}`
+          }
+        })
+      }
+    },
+    g
+  );
+  return /* @__PURE__ */ r(
+    y,
+    {
+      ...h,
+      overrides: S,
+      title: /* @__PURE__ */ z(k, { endEnhancer: p, overrides: b, children: [
+        typeof e == "string" ? /* @__PURE__ */ r($, { children: e }) : e,
+        n ? typeof s == "string" ? /* @__PURE__ */ r(f, { children: s }) : s : t ? typeof c == "string" ? /* @__PURE__ */ r(f, { color: "negative", children: c }) : c : typeof i == "string" ? /* @__PURE__ */ r(f, { children: i }) : i
+      ] }),
+      children: a
+    }
+  );
+}
+export {
+  T as NumberedStep,
+  L as NumberedStepIcon
+};

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

@@ -0,0 +1,5 @@
+import { ProgressStepsProps as BaseProgressStepsProps } from 'baseui/progress-steps';
+export type ProgressStepsProps = BaseProgressStepsProps & {
+    id?: string;
+};
+export declare function ProgressSteps({ id, overrides, ...restProps }: ProgressStepsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,28 @@
+import { jsx as s } from "react/jsx-runtime";
+import { mergeOverrides as t } from "baseui";
+import { ProgressSteps as p } from "baseui/progress-steps";
+function g({
+  id: r,
+  overrides: o,
+  ...e
+}) {
+  return /* @__PURE__ */ s(
+    p,
+    {
+      overrides: t(
+        {
+          Root: {
+            props: {
+              id: r
+            }
+          }
+        },
+        o
+      ),
+      ...e
+    }
+  );
+}
+export {
+  g as ProgressSteps
+};

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

@@ -0,0 +1,6 @@
+import { StepProps as BaseStepProps } from 'baseui/progress-steps';
+export type StepProps = BaseStepProps & {
+    id?: string;
+};
+export declare function Step({ id, overrides, ...restProps }: StepProps): import("react/jsx-runtime").JSX.Element;
+export default Step;

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

@@ -0,0 +1,54 @@
+import { jsx as n } from "react/jsx-runtime";
+import { mergeOverrides as l } from "baseui";
+import { Step as a } from "baseui/progress-steps";
+function d({ id: s, overrides: r, ...t }) {
+  return /* @__PURE__ */ n(
+    a,
+    {
+      overrides: l(
+        {
+          Root: {
+            props: {
+              id: s
+            }
+          },
+          Icon: {
+            style: ({ $theme: i, $isActive: o }) => {
+              const e = i.sizing[o ? "scale600" : "scale400"];
+              return {
+                width: e,
+                height: e,
+                lineHeight: e,
+                borderRadius: e
+              };
+            }
+          },
+          InnerIcon: {
+            style: ({ $theme: i }) => ({
+              width: i.sizing.scale100,
+              height: i.sizing.scale100,
+              lineHeight: i.sizing.scale100,
+              borderRadius: i.sizing.scale100
+            })
+          },
+          Description: {
+            style: ({ $theme: i }) => ({
+              marginBottom: i.sizing.scale200
+            })
+          },
+          Tail: {
+            style: ({ $orientation: i }) => ({
+              ...i === "vertical" && { height: "100%" }
+            })
+          }
+        },
+        r
+      ),
+      ...t
+    }
+  );
+}
+export {
+  d as Step,
+  d as default
+};

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

@@ -1,3 +1,3 @@
-export type { RadioProps, RadioGroupProps } from 'baseui/radio';
+export type { RadioGroupProps } from 'baseui/radio';
 export { RadioGroup } from 'baseui/radio';
 export * from './radio';

package/dist/components/radio/index.js

@@ -0,0 +1,6 @@
+import { RadioGroup as p } from "baseui/radio";
+import { Radio as d } from "./radio.js";
+export {
+  d as Radio,
+  p as RadioGroup
+};

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

@@ -0,0 +1,17 @@
+export declare const radioMarkOverrides: {
+    RadioMarkOuter: {
+        style: ({ $theme }: {
+            $theme: any;
+        }) => {
+            height: any;
+            width: any;
+        };
+    };
+    RadioMarkInner: {
+        style: ({ $checked }: {
+            $checked: any;
+        }) => {
+            transform: string;
+        };
+    };
+};

package/dist/components/radio/overrides.js

@@ -0,0 +1,16 @@
+const r = {
+  RadioMarkOuter: {
+    style: ({ $theme: a }) => ({
+      height: a.sizing.scale800,
+      width: a.sizing.scale800
+    })
+  },
+  RadioMarkInner: {
+    style: ({ $checked: a }) => ({
+      transform: a ? "scale(.3)" : "scale(.8)"
+    })
+  }
+};
+export {
+  r as radioMarkOverrides
+};

package/dist/components/radio/radio.d.ts

@@ -1,2 +1,5 @@
 import { RadioProps as BaseRadioProps } from 'baseui/radio';
-export declare function Radio({ overrides, ...restProps }: BaseRadioProps): import("react/jsx-runtime").JSX.Element;
+export type RadioProps = BaseRadioProps & {
+    id?: string;
+};
+export declare function Radio({ id, overrides, ...restProps }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio/radio.js

@@ -0,0 +1,31 @@
+import { jsx as n } from "react/jsx-runtime";
+import { mergeOverrides as a } from "baseui";
+import { Radio as m } from "baseui/radio";
+import { radioMarkOverrides as s } from "./overrides.js";
+function c({ id: i, overrides: o, ...e }) {
+  return /* @__PURE__ */ n(
+    m,
+    {
+      overrides: a(
+        {
+          Input: {
+            props: {
+              id: i
+            }
+          },
+          ...s,
+          Description: {
+            style: ({ $theme: r, $align: t }) => ({
+              [`margin${r.direction === "rtl" ? "Right" : "Left"}`]: t === "horizontal" ? null : r.sizing.scale950
+            })
+          }
+        },
+        o
+      ),
+      ...e
+    }
+  );
+}
+export {
+  c as Radio
+};

package/dist/components/section-heading/index.d.ts

@@ -0,0 +1 @@
+export * from './section-heading';

package/dist/components/section-heading/index.js

@@ -0,0 +1,4 @@
+import { SectionHeading as i } from "./section-heading.js";
+export {
+  i as SectionHeading
+};

package/dist/components/section-heading/section-heading.d.ts

@@ -0,0 +1,5 @@
+import { ListHeadingProps } from '../list';
+export type SectionHeadingProps = ListHeadingProps & {
+    headingLevel?: 1 | 2 | 3;
+};
+export declare function SectionHeading({ headingLevel, overrides, ...restProps }: SectionHeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/section-heading/section-heading.js

@@ -0,0 +1,75 @@
+import { jsx as t } from "react/jsx-runtime";
+import { mergeOverrides as i } from "baseui";
+import a from "../../themes/typography.js";
+import p from "../list/list-heading.js";
+import "baseui/list";
+const s = {
+  1: "HeadingLarge",
+  2: "HeadingMedium",
+  3: "HeadingSmall"
+}, m = {
+  1: "ParagraphLarge",
+  2: "ParagraphMedium",
+  3: "ParagraphSmall"
+}, g = {
+  1: "LabelLarge",
+  2: "LabelLarge",
+  3: "LabelMedium"
+}, d = {
+  1: "ParagraphMedium",
+  2: "ParagraphMedium",
+  3: "ParagraphSmall"
+};
+function N({
+  headingLevel: r = 1,
+  overrides: e,
+  ...n
+}) {
+  return /* @__PURE__ */ t(
+    p,
+    {
+      overrides: i(
+        {
+          Root: {
+            props: {
+              $as: "header"
+            }
+          },
+          Content: {
+            style: ({ $theme: o }) => ({
+              paddingTop: o.sizing.scale800
+            })
+          },
+          HeadingContainer: {
+            props: {
+              $as: `h${r}`
+            },
+            style: () => ({
+              ...a[s[r]]
+            })
+          },
+          SubHeadingContainer: {
+            style: () => ({
+              ...a[m[r]]
+            })
+          },
+          EndEnhancerContainer: {
+            style: () => ({
+              ...a[g[r]]
+            })
+          },
+          EndEnhancerDescriptionContainer: {
+            style: () => ({
+              ...a[d[r]]
+            })
+          }
+        },
+        e
+      ),
+      ...n
+    }
+  );
+}
+export {
+  N as SectionHeading
+};

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

@@ -1,3 +1 @@
-export { Segment } from 'baseui/segmented-control';
-export type { SegmentProps, SegmentedControlProps, } from 'baseui/segmented-control';
 export * from './segmented-control';

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

@@ -0,0 +1,5 @@
+import { Segment as t, SegmentedControl as m } from "./segmented-control.js";
+export {
+  t as Segment,
+  m as SegmentedControl
+};

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

@@ -1,2 +1,9 @@
-import { SegmentedControlProps as BaseSegmentedControlProps } from 'baseui/segmented-control';
-export declare function SegmentedControl({ children, disabled, overrides, width, ...restProps }: BaseSegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+import { SegmentProps as BaseSegmentProps, SegmentedControlProps as BaseSegmentedControlProps } from 'baseui/segmented-control';
+export type SegmentProps = BaseSegmentProps & {
+    id?: string;
+};
+export type SegmentedControlProps = BaseSegmentedControlProps & {
+    id?: string;
+};
+export declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControl({ children, disabled, overrides, width, id, ...restProps }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,78 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Children as u } from "react";
+import { mergeOverrides as c } from "baseui";
+import { Segment as p, SegmentedControl as a } from "baseui/segmented-control";
+function d(t) {
+  return /* @__PURE__ */ n(p, { ...t });
+}
+function k({
+  children: t,
+  disabled: o,
+  overrides: l,
+  width: m,
+  id: s,
+  ...i
+}) {
+  return /* @__PURE__ */ n(
+    a,
+    {
+      overrides: c(
+        {
+          Root: {
+            style: () => ({
+              width: m || "auto"
+            })
+          },
+          SegmentList: {
+            props: {
+              id: s
+            }
+          },
+          Active: {
+            style: ({ $theme: r }) => ({
+              borderColor: o ? r.colors.backgroundPrimary : r.colors.contentPrimary,
+              cursor: o ? "not-allowed" : "pointer"
+            })
+          }
+        },
+        l
+      ),
+      disabled: o,
+      width: m,
+      ...i,
+      children: u.map(t, (r, g) => r ? /* @__PURE__ */ n(
+        p,
+        {
+          overrides: c(
+            {
+              Segment: {
+                props: {
+                  id: r.props.id || `${s}-${r.key || g}`
+                },
+                style: () => ({
+                  cursor: o ? "not-allowed" : "pointer"
+                })
+              },
+              Badge: {
+                style: ({ $theme: e }) => ({
+                  backgroundColor: e.colors.borderAccent
+                })
+              },
+              Label: {
+                style: ({ $theme: e }) => ({
+                  color: o ? e.colors.contentStateDisabled : e.colors.contentPrimary
+                })
+              }
+            },
+            l
+          ),
+          ...r.props
+        }
+      ) : null)
+    }
+  );
+}
+export {
+  d as Segment,
+  k as SegmentedControl
+};

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

@@ -0,0 +1 @@
+export * from './segmented-progress-bar';

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

@@ -0,0 +1,4 @@
+import { SegmentedProgressBar as o } from "./segmented-progress-bar.js";
+export {
+  o as SegmentedProgressBar
+};

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

@@ -0,0 +1,2 @@
+import { SegmentedProgressBarProps } from './types';
+export declare function SegmentedProgressBar({ value, min, max, blockWidth, blockHeight, blockGap, blockRadius, colors, labelProps, overrides, ...restProps }: SegmentedProgressBarProps): import("react/jsx-runtime").JSX.Element;