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

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

@@ -0,0 +1,164 @@
+import { jsxs as E, jsx as f } from "react/jsx-runtime";
+import { useMemo as m, useCallback as F } from "react";
+import { Block as M } from "baseui/block";
+import { useStyletron as W, mergeOverrides as Y } from "baseui";
+import { ParagraphSmall as x } from "baseui/typography";
+function O({
+  value: h,
+  min: l = 0,
+  max: e = 100,
+  blockWidth: L = 8,
+  blockHeight: H = 20,
+  blockGap: C = 10,
+  blockRadius: J = 4,
+  colors: n,
+  labelProps: b = {},
+  overrides: S,
+  ...r
+}) {
+  var z, $, B, j, R, T, A, I, V, X, _, q;
+  const [o, i] = W(), t = m(
+    () => Y(
+      {
+        Root: {},
+        SegmentsContainer: {},
+        Segment: {},
+        LabelsContainer: {},
+        MinLabel: {},
+        MidLabel: {},
+        MaxLabel: {}
+      },
+      S
+    ),
+    [S]
+  ), c = F(
+    (a) => a ? typeof a == "function" ? a({
+      $theme: i
+    }) : typeof a == "object" ? a : {} : {},
+    [i]
+  ), { normalizedMin: w, normalizedMax: k, percentage: p } = m(() => {
+    if (l === e)
+      return {
+        normalizedMin: l,
+        normalizedMax: e,
+        percentage: h >= l ? 100 : 0
+      };
+    const a = Math.min(l, e), u = Math.max(l, e), y = u - a, s = (h - a) / y * 100;
+    return {
+      normalizedMin: a,
+      normalizedMax: u,
+      percentage: s
+    };
+  }, [l, e, h]), N = m(() => {
+    const { width: a } = r;
+    return typeof a == "string" ? parseInt(a.replace(/px$/, ""), 10) : typeof a == "number" ? a : 360;
+  }, [r]), g = Math.floor(
+    (N + C) / (L + C)
+  ), K = Math.round(p / 100 * g), Q = F(
+    (a) => a ? p <= 0 ? n != null && n.inactive ? i.colors[n.inactive] : i.colors.backgroundNegativeLight : p > 100 ? n != null && n.warning ? i.colors[n.warning] : i.colors.warning : p === 100 ? n != null && n.complete ? i.colors[n.complete] : i.colors.accent : n != null && n.active ? i.colors[n.active] : i.colors.accent : n != null && n.inactive ? i.colors[n.inactive] : i.colors.backgroundTertiary,
+    [n, p, i.colors]
+  ), U = (w + k) / 2;
+  return /* @__PURE__ */ E(
+    M,
+    {
+      width: `${N}px`,
+      className: o({ ...c((z = t == null ? void 0 : t.Root) == null ? void 0 : z.style) }),
+      ...(($ = t == null ? void 0 : t.Root) == null ? void 0 : $.props) || {},
+      ...r,
+      children: [
+        /* @__PURE__ */ f(
+          M,
+          {
+            className: o({
+              display: "flex",
+              justifyContent: "space-between",
+              marginBottom: i.sizing.scale400,
+              width: "100%",
+              ...c((B = t == null ? void 0 : t.SegmentsContainer) == null ? void 0 : B.style)
+            }),
+            ...((j = t == null ? void 0 : t.SegmentsContainer) == null ? void 0 : j.props) || {},
+            children: Array.from({ length: g }, (a, u) => {
+              var s, D;
+              const y = u < K;
+              return /* @__PURE__ */ f(
+                M,
+                {
+                  className: o({
+                    width: `${L}px`,
+                    height: `${H}px`,
+                    backgroundColor: Q(y),
+                    borderRadius: `${J}px`,
+                    transition: "background-color 0.3s ease",
+                    ...c((s = t == null ? void 0 : t.Segment) == null ? void 0 : s.style)
+                  }),
+                  ...((D = t == null ? void 0 : t.Segment) == null ? void 0 : D.props) || {}
+                },
+                `block-${u}`
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ E(
+          M,
+          {
+            className: o({
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              position: "relative",
+              ...c((R = t == null ? void 0 : t.LabelsContainer) == null ? void 0 : R.style)
+            }),
+            ...((T = t == null ? void 0 : t.LabelsContainer) == null ? void 0 : T.props) || {},
+            children: [
+              /* @__PURE__ */ f(
+                x,
+                {
+                  color: "contentTertiary",
+                  margin: 0,
+                  className: o({
+                    ...c((A = t == null ? void 0 : t.MinLabel) == null ? void 0 : A.style)
+                  }),
+                  ...((I = t == null ? void 0 : t.MinLabel) == null ? void 0 : I.props) || {},
+                  ...b,
+                  children: w
+                }
+              ),
+              /* @__PURE__ */ f(
+                x,
+                {
+                  color: "contentTertiary",
+                  margin: 0,
+                  className: o({
+                    position: "absolute",
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    ...c((V = t == null ? void 0 : t.MidLabel) == null ? void 0 : V.style)
+                  }),
+                  ...((X = t == null ? void 0 : t.MidLabel) == null ? void 0 : X.props) || {},
+                  ...b,
+                  children: U
+                }
+              ),
+              /* @__PURE__ */ f(
+                x,
+                {
+                  color: "contentTertiary",
+                  margin: 0,
+                  className: o({
+                    ...c((_ = t == null ? void 0 : t.MaxLabel) == null ? void 0 : _.style)
+                  }),
+                  ...((q = t == null ? void 0 : t.MaxLabel) == null ? void 0 : q.props) || {},
+                  ...b,
+                  children: k
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  O as SegmentedProgressBar
+};

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

@@ -0,0 +1,53 @@
+import { default as React } from 'react';
+import { BlockProps } from 'baseui/block';
+import { Theme } from 'baseui';
+import { Override } from 'baseui/helpers/overrides';
+import { ParagraphSmall } from '../typography';
+export interface SegmentedProgressBarColors {
+    /** Color for inactive/empty blocks (theme color key) */
+    inactive?: keyof Theme["colors"];
+    /** Color for active blocks when in progress (theme color key) */
+    active?: keyof Theme["colors"];
+    /** Color for blocks when at 100% (theme color key) */
+    complete?: keyof Theme["colors"];
+    /** Color for blocks when over 100% (theme color key) */
+    warning?: keyof Theme["colors"];
+}
+export interface SegmentedProgressBarProps extends Omit<BlockProps, "overrides"> {
+    /** Current value */
+    value: number;
+    /** Minimum value (default: 0) */
+    min?: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Width of individual blocks in pixels (default: 8) */
+    blockWidth?: number;
+    /** Height of individual blocks in pixels (default: 20) */
+    blockHeight?: number;
+    /** Gap between blocks in pixels (default: 10) */
+    blockGap?: number;
+    /** Border radius for blocks in pixels (default: 4) */
+    blockRadius?: number;
+    /** Custom colors for different states */
+    colors?: SegmentedProgressBarColors;
+    /** Props to pass to all value labels (min, middle, max) */
+    labelProps?: React.ComponentProps<typeof ParagraphSmall>;
+    /** Style/prop overrides for internal elements */
+    overrides?: SegmentedProgressBarOverrides;
+}
+export type SegmentedProgressBarOverrides = {
+    /** Outer wrapper container */
+    Root?: Override;
+    /** Flex row that contains the segments */
+    SegmentsContainer?: Override;
+    /** Individual segment block */
+    Segment?: Override;
+    /** Container row for the labels */
+    LabelsContainer?: Override;
+    /** Min label */
+    MinLabel?: Override;
+    /** Mid label */
+    MidLabel?: Override;
+    /** Max label */
+    MaxLabel?: Override;
+};

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

@@ -0,0 +1,3 @@
+export type { ChangeAction as SelectChangeAction, Type as SelectType, Option as SelectOption, Value as SelectValue, Optgroups as SelectOptGroups, Options as SelectOptions, OnChangeParams as SelectOnChangeParams, SelectOverrides, OverridesDropdown as SelectOverridesDropdown, ImperativeMethods as SelectImperativeMethods, ControlRef as SelectControlRef, SharedStylePropsArg as SelectSharedStylePropsArg, } from 'baseui/select';
+export * from './select';
+export { getSelectOverrides } from './overrides';

package/dist/components/select/index.js

@@ -0,0 +1,6 @@
+import { Select as t } from "./select.js";
+import { getSelectOverrides as c } from "./overrides.js";
+export {
+  t as Select,
+  c as getSelectOverrides
+};

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

@@ -0,0 +1,90 @@
+import { Theme } from 'baseui';
+import { INPUT_SIZE } from '../input';
+export declare function getSelectOverrides(theme: Theme, size: keyof typeof INPUT_SIZE, disabled: boolean, readOnly?: boolean): {
+    ControlContainer: {
+        style: ({ $theme }: {
+            $theme: any;
+        }) => {
+            ":active": {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            backgroundColor: any;
+            borderColor: any;
+            cursor: string;
+            borderWidth: string;
+            borderRadius: string;
+        };
+    };
+    ValueContainer: {
+        style: ({ $theme }: {
+            $theme: any;
+        }) => {
+            paddingTop: any;
+            paddingBottom: any;
+            paddingLeft: any;
+        };
+    };
+    IconsContainer: {
+        style: ({ $theme }: {
+            $theme: any;
+        }) => {
+            paddingRight: any;
+        };
+    };
+    SelectArrow: {
+        props: {
+            overrides: {
+                Svg: {
+                    component: import('react').ForwardRefExoticComponent<import('react').SVGAttributes<SVGElement> & {
+                        children?: import('react').ReactNode;
+                        size?: import('baseui/icon').Size;
+                        color?: import('baseui/icon').Color;
+                        title?: string | null;
+                        overrides?: import('baseui/icon').IconOverrides;
+                    } & import('baseui/icon').StyledComponentArgs & import('react').RefAttributes<SVGSVGElement>>;
+                };
+            };
+        };
+    };
+    Dropdown: {
+        style: () => {
+            boxShadow: string;
+            borderRadius: string;
+        };
+    };
+    Popover: {
+        props: {
+            overrides: {
+                Body: {
+                    style: {
+                        backgroundColor: string;
+                        borderRadius: string;
+                    };
+                };
+                Inner: {
+                    style: {
+                        backgroundColor: string;
+                        borderRadius: string;
+                    };
+                };
+            };
+        };
+        style: {
+            borderRadius: string;
+        };
+    };
+    LoadingIndicator: {
+        style: ({ $theme }: {
+            $theme: any;
+        }) => {
+            borderRightColor: any;
+            borderBottomColor: any;
+            borderLeftColor: any;
+            borderTopColor: any;
+            marginRight: any;
+            width: any;
+            height: any;
+        };
+    };
+};

package/dist/components/select/overrides.js

@@ -0,0 +1,91 @@
+import c from "../icons/solid/chevron-down/index.js";
+const i = {
+  small: "scale300",
+  medium: "scale500",
+  large: "scale500"
+};
+function g(a, d, l, e = !1) {
+  const r = { borderRadius: a.borders.radius400 }, n = {
+    ...r,
+    backgroundColor: "transparent"
+  };
+  return {
+    ControlContainer: {
+      style: ({ $theme: o }) => ({
+        ...r,
+        borderWidth: "3px",
+        ...e && {
+          backgroundColor: o.colors.backgroundPrimary,
+          borderColor: o.colors.borderOpaque,
+          cursor: "default"
+        },
+        ...!e && !l && {
+          ":active": {
+            backgroundColor: "#d5d5d5",
+            // not a theme color
+            borderColor: "#d5d5d5"
+          }
+        }
+      })
+    },
+    ValueContainer: {
+      style: ({ $theme: o }) => {
+        const s = o.sizing[i[d] || i.medium];
+        return {
+          paddingTop: s,
+          paddingBottom: s,
+          paddingLeft: o.sizing.scale600
+        };
+      }
+    },
+    IconsContainer: {
+      style: ({ $theme: o }) => ({
+        paddingRight: o.sizing.scale550
+      })
+    },
+    SelectArrow: {
+      props: {
+        overrides: {
+          Svg: {
+            component: c
+          }
+        }
+      }
+    },
+    Dropdown: {
+      style: () => ({
+        ...r,
+        boxShadow: "none"
+      })
+    },
+    Popover: {
+      props: {
+        overrides: {
+          Body: {
+            style: n
+          },
+          Inner: {
+            style: n
+          }
+        }
+      },
+      style: {
+        ...r
+      }
+    },
+    LoadingIndicator: {
+      style: ({ $theme: o }) => ({
+        borderRightColor: o.colors.backgroundPrimary,
+        borderBottomColor: o.colors.backgroundPrimary,
+        borderLeftColor: o.colors.backgroundPrimary,
+        borderTopColor: o.colors.borderAccent,
+        marginRight: d === "large" ? o.sizing.scale700 : o.sizing.scale600,
+        width: o.sizing.scale500,
+        height: o.sizing.scale500
+      })
+    }
+  };
+}
+export {
+  g as getSelectOverrides
+};

package/dist/components/select/select.d.ts

@@ -0,0 +1,9 @@
+import { SelectProps as BaseSelectProps } from 'baseui/select';
+import { INPUT_SIZE } from '../input';
+export type SelectProps = Omit<BaseSelectProps, "size"> & {
+    size?: keyof typeof INPUT_SIZE;
+    complete?: boolean;
+    incomplete?: boolean;
+    readOnly?: boolean;
+};
+export declare function Select({ size, overrides, complete, incomplete, isLoading, readOnly, disabled, clearable, ...restProps }: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/select/select.js

@@ -0,0 +1,62 @@
+import { jsxs as S, jsx as m } from "react/jsx-runtime";
+import { useStyletron as g, mergeOverrides as d } from "baseui";
+import { Block as n } from "baseui/block";
+import { Select as u } from "baseui/select";
+import { getButtonIconSize as v } from "../button/overrides.js";
+import { getBaseInputSize as x } from "../input/input.js";
+import { getEndEnhancer as B } from "../input/overrides.js";
+import { getSelectOverrides as b } from "./overrides.js";
+function O({
+  size: e,
+  overrides: c,
+  complete: r = !1,
+  incomplete: t = !1,
+  isLoading: s,
+  readOnly: i = !1,
+  disabled: a,
+  clearable: f,
+  ...p
+}) {
+  const [l, h] = g(), o = v(e);
+  return /* @__PURE__ */ S(
+    n,
+    {
+      className: l({
+        position: "relative"
+      }),
+      children: [
+        /* @__PURE__ */ m(
+          u,
+          {
+            size: x(e),
+            isLoading: s,
+            clearable: t || r ? !1 : f,
+            disabled: i || a,
+            overrides: d(
+              b(h, e, a, i),
+              c
+            ),
+            ...p
+          }
+        ),
+        !!((t || r) && !s) && /* @__PURE__ */ m(
+          n,
+          {
+            className: l({
+              position: "absolute",
+              width: o,
+              height: o,
+              right: `calc(${o} + 32px)`,
+              top: "50%",
+              transform: "translateY(-50%)"
+            }),
+            children: B({ incomplete: t, complete: r, loading: !1 })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  O as Select
+};

package/dist/components/side-navigation/index.d.ts

@@ -1,3 +1,3 @@
 export { default as SideNavigation, SideNavItemTitle, SideNavLeadingIcon, } from './side-navigation';
+export type { SideNavigationItemProps, SideNavigationProps, } from './side-navigation';
 export { NavItem as SideNavItem } from 'baseui/side-navigation';
-export type { NavigationProps as SideNavigationProps } from 'baseui/side-navigation';

package/dist/components/side-navigation/index.js

@@ -0,0 +1,8 @@
+import { SideNavItemTitle as i, SideNavLeadingIcon as t, default as d } from "./side-navigation.js";
+import { NavItem as m } from "baseui/side-navigation";
+export {
+  m as SideNavItem,
+  i as SideNavItemTitle,
+  t as SideNavLeadingIcon,
+  d as SideNavigation
+};

package/dist/components/side-navigation/overrides.d.ts

@@ -1,3 +1,4 @@
-export declare function getSideNavigationOverrides({ overrides }: {
+export declare function getSideNavigationOverrides({ overrides, id }: {
     overrides: any;
+    id: any;
 }): import('baseui/helpers/overrides').Overrides<any>;

package/dist/components/side-navigation/overrides.js

@@ -0,0 +1,39 @@
+import { mergeOverrides as c } from "baseui";
+function d(o) {
+  return o === 2 ? "52px" : o === 3 ? "88px" : "24px";
+}
+function p({ overrides: o, id: e }) {
+  return c({
+    Root: {
+      props: {
+        id: e
+      },
+      style: ({ $theme: r }) => ({
+        color: r.colors.contentSecondary
+      })
+    },
+    NavItem: {
+      // Using props as a function generates a warning from Base that we ignore
+      // Refer to the `filterWarnings` function in #/utils/console
+      props: ({ item: r, ...t }) => ({
+        // Applies id to the nav item, but not to the nav link
+        // (unfortunately, trying to pass the id to the nav link in the same way
+        // doesn't work)
+        id: r.id,
+        ...t
+      }),
+      style: ({ $theme: r, $active: t, $disabled: n, $level: a }) => ({
+        backgroundColor: t ? r.colors.backgroundTertiary : "transparent",
+        backgroundImage: "none",
+        ":hover": t || n ? {} : {
+          backgroundColor: "rgba(0, 0, 0, 0.04)",
+          color: r.colors.contentSecondary
+        },
+        paddingLeft: d(a)
+      })
+    }
+  }, o);
+}
+export {
+  p as getSideNavigationOverrides
+};

package/dist/components/side-navigation/side-navigation.d.ts

@@ -1,5 +1,17 @@
 import { default as React } from 'react';
-import { NavigationProps as BaseSideNavigationProps } from 'baseui/side-navigation';
-export default function SideNavigation({ activeItemId, activePredicate, items, itemMemoizationComparator, onChange, overrides, mapItem, }: BaseSideNavigationProps): import("react/jsx-runtime").JSX.Element;
-export declare function SideNavItemTitle({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+import { NavigationProps as BaseSideNavigationProps, Item as BaseItemProps } from 'baseui/side-navigation';
+export type SideNavigationItemProps = Omit<BaseItemProps, "subNav"> & {
+    id?: string;
+    subNav?: SideNavigationItemProps[];
+};
+export type SideNavigationProps = Omit<BaseSideNavigationProps, "items"> & {
+    id?: string;
+    items?: SideNavigationItemProps[];
+};
+export default function SideNavigation({ activeItemId, activePredicate, items, itemMemoizationComparator, onChange, overrides, mapItem, id, }: SideNavigationProps): import("react/jsx-runtime").JSX.Element;
+export type SideNavigationItemTitleProps = React.PropsWithChildren & {
+    id?: string;
+    "data-attr"?: string;
+};
+export declare function SideNavItemTitle({ children, ...restProps }: SideNavigationItemTitleProps): import("react/jsx-runtime").JSX.Element;
 export declare function SideNavLeadingIcon({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/components/side-navigation/side-navigation.js

@@ -0,0 +1,68 @@
+import { jsx as n } from "react/jsx-runtime";
+import t from "react";
+import { Navigation as s } from "baseui/side-navigation";
+import { getSideNavigationOverrides as f } from "./overrides.js";
+function c({
+  activeItemId: i,
+  activePredicate: e,
+  items: r,
+  itemMemoizationComparator: a,
+  onChange: o,
+  overrides: m,
+  mapItem: l,
+  id: d
+}) {
+  return /* @__PURE__ */ n(
+    s,
+    {
+      activeItemId: i,
+      activePredicate: e,
+      items: r,
+      itemMemoizationComparator: a,
+      onChange: o,
+      overrides: f({ overrides: m, id: d }),
+      mapItem: l
+    }
+  );
+}
+function x({
+  children: i,
+  ...e
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center"
+      },
+      ...e,
+      children: i
+    }
+  );
+}
+function N({ children: i }) {
+  return /* @__PURE__ */ n(
+    "span",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        marginLeft: "-8px",
+        marginRight: "16px"
+      },
+      children: t.Children.map(
+        i,
+        (e) => t.isValidElement(e) ? (
+          // @ts-expect-error child does not expect size prop
+          t.cloneElement(e, { size: "20px" })
+        ) : e
+      )
+    }
+  );
+}
+export {
+  x as SideNavItemTitle,
+  N as SideNavLeadingIcon,
+  c as default
+};

package/dist/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./skeleton.js";
+export {
+  t as Skeleton
+};

package/dist/components/skeleton/skeleton.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps } from 'react';
 import { Skeleton as SkeletonBaseUi } from 'baseui/skeleton';
 export type SkeletonProps = ComponentProps<typeof SkeletonBaseUi>;
-export default function Skeleton(props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default function Skeleton({ overrides, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import { mergeOverrides as s } from "baseui";
+import { Skeleton as m } from "baseui/skeleton";
+const o = ({ $theme: e }) => ({
+  borderRadius: e.borders.radius200
+});
+function l({ overrides: e, ...r }) {
+  return /* @__PURE__ */ t(
+    m,
+    {
+      overrides: s(
+        {
+          Root: {
+            style: o
+          },
+          Row: {
+            style: o
+          }
+        },
+        e
+      ),
+      ...r
+    }
+  );
+}
+export {
+  l as default
+};

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

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

package/dist/components/slider/index.js

@@ -0,0 +1,4 @@
+import { Slider as o } from "./slider.js";
+export {
+  o as Slider
+};