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

package/dist/components/textarea/textarea.js

@@ -0,0 +1,144 @@
+import { jsxs as K, jsx as o } from "react/jsx-runtime";
+import { useStyletron as b } from "baseui";
+import { Textarea as L } from "baseui/textarea";
+import { getBaseInputSize as M } from "../input/input.js";
+import { getEndEnhancer as O } from "../input/overrides.js";
+import { getTextareaOverrides as P, getSizeAsNumber as Q, getIconSize as R } from "./overrides.js";
+function U({
+  loading: a,
+  incomplete: i,
+  complete: t,
+  size: s
+}) {
+  const [n] = b();
+  if (!a && !i && !t)
+    return null;
+  const e = R(s), r = `${Q(e) - 4}px`;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: n({
+        position: "absolute",
+        right: "16px",
+        top: "19px",
+        width: e,
+        height: e
+      }),
+      children: O({
+        loading: a,
+        incomplete: i,
+        complete: t,
+        loadingSpinnerSize: r
+      })
+    }
+  );
+}
+function ee({
+  value: a,
+  onChange: i,
+  disabled: t,
+  error: s,
+  positive: n,
+  readOnly: e,
+  size: r,
+  type: p,
+  clearable: m,
+  clearOnEscape: u,
+  inputMode: x,
+  "aria-label": f,
+  "aria-labelledby": h,
+  "aria-describedby": S,
+  adjoined: g,
+  autoComplete: v,
+  autoFocus: z,
+  pattern: T,
+  placeholder: y,
+  id: E,
+  inputRef: N,
+  name: j,
+  min: I,
+  max: $,
+  step: w,
+  maxLength: A,
+  onBlur: B,
+  onKeyDown: k,
+  onKeyPress: q,
+  onKeyUp: C,
+  onFocus: D,
+  required: F,
+  resize: G,
+  overrides: H,
+  incomplete: c,
+  complete: d,
+  loading: l
+}) {
+  const [J] = b();
+  return /* @__PURE__ */ K(
+    "div",
+    {
+      className: J({
+        position: "relative"
+      }),
+      children: [
+        /* @__PURE__ */ o(
+          L,
+          {
+            overrides: P({
+              overrides: H,
+              size: r,
+              readOnly: e,
+              loading: l,
+              incomplete: c,
+              complete: d
+            }),
+            value: a,
+            onChange: i,
+            disabled: t,
+            error: s,
+            positive: n,
+            readOnly: e,
+            size: M(r),
+            type: p,
+            clearable: m,
+            clearOnEscape: u,
+            inputMode: x,
+            "aria-label": f,
+            "aria-labelledby": h,
+            "aria-describedby": S,
+            adjoined: g,
+            autoComplete: v,
+            autoFocus: z,
+            pattern: T,
+            placeholder: y,
+            id: E,
+            inputRef: N,
+            name: j,
+            min: I,
+            max: $,
+            step: w,
+            maxLength: A,
+            onBlur: B,
+            onKeyDown: k,
+            onKeyPress: q,
+            onKeyUp: C,
+            onFocus: D,
+            required: F,
+            resize: G
+          }
+        ),
+        /* @__PURE__ */ o(
+          U,
+          {
+            loading: l,
+            incomplete: c,
+            complete: d,
+            size: r
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ee as default
+};

package/dist/components/tile/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const TILE_LEADING_CONTENT_SIZE: {
+    small: string;
+    medium: string;
+    large: string;
+};

package/dist/components/tile/constants.js

@@ -0,0 +1,8 @@
+const p = {
+  small: "24px",
+  medium: "36px",
+  large: "48px"
+};
+export {
+  p as TILE_LEADING_CONTENT_SIZE
+};

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

@@ -0,0 +1,9 @@
+export type { TileOverrides, TileGroupOverrides } from 'baseui/tile';
+export { ALIGNMENT as TILE_ALIGNMENT, TILE_KIND, TILE_GROUP_KIND, } from 'baseui/tile';
+export { StyledTileRoot as TileRoot, StyledHeaderContainer as TileHeaderContainer, StyledBodyContainer as TileBodyContainer, StyledBodyContainerContent as TileBodyContainerContent, StyledTileGroupRoot as TileGroupRoot, StyledLabel as TileLabel, } from 'baseui/tile';
+export * from './constants';
+export * from './styled-components';
+export { default as Tile } from './tile';
+export type { TileProps } from './tile';
+export { default as TileGroup } from './tile-group';
+export type { TileGroupProps } from './tile-group';

package/dist/components/tile/index.js

@@ -0,0 +1,20 @@
+import { ALIGNMENT as t, TILE_GROUP_KIND as r, TILE_KIND as a, StyledBodyContainer as l, StyledBodyContainerContent as T, StyledTileGroupRoot as i, StyledHeaderContainer as n, StyledLabel as d, StyledTileRoot as y } from "baseui/tile";
+import { TILE_LEADING_CONTENT_SIZE as p } from "./constants.js";
+import { TileParagraph as E } from "./styled-components.js";
+import { Tile as N } from "./tile.js";
+import { default as G } from "./tile-group.js";
+export {
+  t as TILE_ALIGNMENT,
+  r as TILE_GROUP_KIND,
+  a as TILE_KIND,
+  p as TILE_LEADING_CONTENT_SIZE,
+  N as Tile,
+  l as TileBodyContainer,
+  T as TileBodyContainerContent,
+  G as TileGroup,
+  i as TileGroupRoot,
+  n as TileHeaderContainer,
+  d as TileLabel,
+  E as TileParagraph,
+  y as TileRoot
+};

package/dist/components/tile/skeletons.d.ts

@@ -0,0 +1,7 @@
+import { TILE_LEADING_CONTENT_SIZE } from './constants';
+export declare function TileTextSkeleton({ width }: {
+    width?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TileArtworkSkeleton({ size, }: {
+    size: keyof typeof TILE_LEADING_CONTENT_SIZE;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/tile/skeletons.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useStyletron as r } from "baseui";
+import i from "../skeleton/skeleton.js";
+import { TILE_LEADING_CONTENT_SIZE as n } from "./constants.js";
+function a({ width: e = "80px" }) {
+  const [, t] = r();
+  return /* @__PURE__ */ o(i, { animation: !0, width: e, height: t.sizing.scale600 });
+}
+function f({
+  size: e
+}) {
+  const t = n[e || "small"];
+  return /* @__PURE__ */ o(i, { animation: !0, width: t, height: t });
+}
+export {
+  f as TileArtworkSkeleton,
+  a as TileTextSkeleton
+};

package/dist/components/tile/styled-components.d.ts

@@ -0,0 +1,3 @@
+export declare const TileParagraph: import('styletron-react').StyletronComponent<"div", {
+    $disabled?: boolean;
+}>;

package/dist/components/tile/styled-components.js

@@ -0,0 +1,11 @@
+import { styled as r } from "baseui";
+const l = r("div", ({ $theme: a, $disabled: o }) => ({
+  ...a.typography.ParagraphSmall,
+  color: o ? a.colors.contentStateDisabled : a.colors.contentSecondary,
+  marginTop: a.sizing.scale100,
+  marginBottom: 0
+}));
+l.displayName = "TileParagraph";
+export {
+  l as TileParagraph
+};

package/dist/components/tile/tile-group.d.ts

@@ -0,0 +1,7 @@
+import { TileGroupProps as BaseTileGroupProps } from 'baseui/tile';
+export type TileGroupProps = BaseTileGroupProps & {
+    id?: string;
+    loading?: boolean;
+};
+declare function TileGroup({ children, disabled, id, loading, overrides, ...restProps }: TileGroupProps): import("react/jsx-runtime").JSX.Element;
+export default TileGroup;

package/dist/components/tile/tile-group.js

@@ -0,0 +1,67 @@
+import { jsx as n } from "react/jsx-runtime";
+import c, { isValidElement as d } from "react";
+import { mergeOverrides as u } from "baseui";
+import { TileGroup as f } from "baseui/tile";
+import { mapChildren as k } from "../../utils/index.js";
+import { Checkbox as g } from "../checkbox/checkbox.js";
+import { radioMarkOverrides as y } from "../radio/overrides.js";
+function T({
+  children: a,
+  disabled: e,
+  id: t,
+  loading: l,
+  overrides: p,
+  ...s
+}) {
+  return /* @__PURE__ */ n(
+    f,
+    {
+      overrides: u(
+        {
+          Root: {
+            props: {
+              id: t
+            }
+          },
+          Checkmark: {
+            component: ({ $checked: r, ...o }) => /* @__PURE__ */ n(
+              g,
+              {
+                ...o,
+                disabled: e,
+                checked: r
+              }
+            )
+          },
+          ...y,
+          // Have to do this specifically because disabled state isn't working
+          // automatically
+          RadioMarkOuter: {
+            style: ({ $theme: r }) => ({
+              height: r.sizing.scale800,
+              width: r.sizing.scale800,
+              ...e && {
+                backgroundColor: r.colors.contentStateDisabled
+              }
+            })
+          }
+        },
+        p
+      ),
+      ...s,
+      children: k(a, (r, o) => {
+        if (!r || !d(r)) return null;
+        const m = r.key || o, i = r.props;
+        return c.cloneElement(r, {
+          disabled: e || i.disabled,
+          id: i.id || t && `${t}-tile-${o}`,
+          key: m,
+          loading: l || i.loading
+        });
+      })
+    }
+  );
+}
+export {
+  T as default
+};

package/dist/components/tile/tile.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TileProps as BaseTileProps } from 'baseui/tile';
+export type TileProps = BaseTileProps & {
+    id?: string;
+    loading?: boolean;
+};
+export declare const Tile: React.ForwardRefExoticComponent<BaseTileProps & {
+    id?: string;
+    loading?: boolean;
+} & React.RefAttributes<HTMLElement>>;
+export default Tile;

package/dist/components/tile/tile.js

@@ -0,0 +1,72 @@
+import { jsx as n } from "react/jsx-runtime";
+import T from "react";
+import { mergeOverrides as y } from "baseui";
+import { Tile as S } from "baseui/tile";
+import { TileArtworkSkeleton as f, TileTextSkeleton as d } from "./skeletons.js";
+import { TileParagraph as m } from "./styled-components.js";
+function b(r, t, i) {
+  return i && r ? /* @__PURE__ */ n(m, { $style: { marginTop: "8px" }, children: /* @__PURE__ */ n(d, { width: "100px" }) }) : typeof r == "string" ? /* @__PURE__ */ n(m, { $disabled: t, children: r }) : r;
+}
+function k({
+  children: r,
+  disabled: t,
+  id: i,
+  label: c,
+  leadingContent: a,
+  loading: e,
+  overrides: u,
+  selected: l,
+  tileKind: s,
+  trailingContent: p,
+  ...x
+}, g) {
+  return /* @__PURE__ */ n(
+    S,
+    {
+      leadingContent: e && a ? f : a,
+      label: e && c ? d : c,
+      disabled: t,
+      selected: l,
+      tileKind: s,
+      trailingContent: e && p ? f : p,
+      overrides: y(
+        {
+          Root: {
+            props: {
+              id: i
+            },
+            style: ({ $theme: o }) => ({
+              color: o.colors.contentSecondary,
+              ":disabled": {
+                backgroundColor: o.colors[s === "action" ? "backgroundStateDisabled" : "backgroundPrimary"]
+              },
+              ...!t && !l && {
+                ":focus": {
+                  boxShadow: `inset 0px 0px 0px 3px ${o.colors.borderAccent}`
+                }
+              }
+            })
+          },
+          BodyContainerContent: {
+            style: ({ $theme: o }) => ({
+              color: o.colors[t ? "contentStateDisabled" : "contentSecondary"]
+            })
+          },
+          TrailingContent: {
+            style: ({ $theme: o }) => ({
+              color: o.colors.contentStateDisabled
+            })
+          }
+        },
+        u
+      ),
+      ...x,
+      children: b(r, t, e)
+    }
+  );
+}
+const A = T.forwardRef(k);
+export {
+  A as Tile,
+  A as default
+};

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

@@ -0,0 +1,3 @@
+export * from './tooltip';
+export * from './types';
+export { TRIGGER_TYPE } from 'baseui/popover';

package/dist/components/tooltip/index.js

@@ -0,0 +1,6 @@
+import { Tooltip as p } from "./tooltip.js";
+import { TRIGGER_TYPE as T } from "baseui/popover";
+export {
+  T as TRIGGER_TYPE,
+  p as Tooltip
+};

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from 'react';
+import { StatefulTooltipProps } from 'baseui/tooltip';
+import { IconProps } from 'baseui/icon';
+import { TooltipPosition } from './types';
+export type TooltipProps = Omit<StatefulTooltipProps, "placement" | "content"> & {
+    content: ReactNode | string;
+    position?: TooltipPosition;
+    backgroundColor?: string;
+    color?: string;
+    CloseIcon?: ComponentType<IconProps>;
+    iconProps?: IconProps;
+};
+export declare function Tooltip({ children, content, position, overrides, popoverMargin, backgroundColor, color, CloseIcon, iconProps, triggerType, ...restProps }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,109 @@
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { StatefulTooltip as b } from "baseui/tooltip";
+import { useStyletron as v, mergeOverrides as C } from "baseui";
+import { Block as n } from "baseui/block";
+import { LabelSmall as l } from "baseui/typography";
+import { FlexGrid as B, FlexGridItem as d } from "baseui/flex-grid";
+function S({
+  children: s,
+  content: e,
+  position: c = "top",
+  overrides: p,
+  popoverMargin: a = 12,
+  backgroundColor: u,
+  color: m,
+  CloseIcon: i,
+  iconProps: g,
+  triggerType: h = "hover",
+  ...x
+}) {
+  const [, f] = v(), y = ({ close: t }) => i ? /* @__PURE__ */ k(
+    B,
+    {
+      flexGridColumnCount: 2,
+      paddingLeft: "16px",
+      alignItems: "center",
+      overrides: {
+        Block: {
+          style: () => ({ flexWrap: "nowrap", alignItems: "center" })
+        }
+      },
+      children: [
+        /* @__PURE__ */ r(d, { children: typeof e == "string" ? /* @__PURE__ */ r(l, { color: "inherit", children: e }) : e }),
+        /* @__PURE__ */ r(
+          d,
+          {
+            overrides: {
+              Block: {
+                style: () => ({
+                  flexGrow: 0,
+                  minWidth: "48px",
+                  height: "47px",
+                  paddingBottom: "2px"
+                })
+              }
+            },
+            children: /* @__PURE__ */ r(
+              n,
+              {
+                height: "48px",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                overrides: { Block: { style: () => ({ cursor: "pointer" }) } },
+                onClick: t,
+                children: /* @__PURE__ */ r(i, { size: 16, ...g })
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ r(n, { padding: "16px", children: /* @__PURE__ */ r(l, { color: "inherit", children: e }) }), o = u ?? f.colors.backgroundInversePrimary;
+  return /* @__PURE__ */ r(
+    b,
+    {
+      ignoreBoundary: !0,
+      content: y,
+      placement: c,
+      showArrow: !0,
+      autoFocus: !0,
+      popoverMargin: a,
+      triggerType: h,
+      overrides: C(
+        {
+          Body: {
+            style: () => ({
+              outline: `${o} solid`,
+              backgroundColor: o,
+              padding: 0,
+              width: "auto",
+              borderRadius: "8px"
+            })
+          },
+          Inner: {
+            style: ({ $theme: t }) => ({
+              outline: `${o} solid`,
+              padding: 0,
+              backgroundColor: o,
+              color: m ?? t.colors.contentInversePrimary,
+              borderRadius: "8px"
+            })
+          },
+          Arrow: {
+            style: () => ({
+              outline: `${o} solid`,
+              backgroundColor: o
+            })
+          }
+        },
+        p
+      ),
+      ...x,
+      children: s
+    }
+  );
+}
+export {
+  S as Tooltip
+};

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

@@ -0,0 +1 @@
+export type TooltipPosition = "top" | "bottom" | "left" | "right";

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

@@ -0,0 +1,3 @@
+export type { NavItem as TopNavItem } from 'baseui/app-nav-bar';
+export { setItemActive as setTopNavItemActive } from 'baseui/app-nav-bar';
+export * from './top-navigation';

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

@@ -0,0 +1,6 @@
+import { setItemActive as o } from "baseui/app-nav-bar";
+import { TopNavigation as i } from "./top-navigation.js";
+export {
+  i as TopNavigation,
+  o as setTopNavItemActive
+};

package/dist/components/top-navigation/mobile-menu.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TopNavigationOverrides } from './types';
+export type MobileMenuProps = {
+    children: ReactNode;
+    overrides?: TopNavigationOverrides;
+};
+export default function MobileMenu({ children, overrides, }: MobileMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/top-navigation/mobile-menu.js

@@ -0,0 +1,45 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Block as l } from "baseui/block";
+import { getOverrides as m } from "baseui/helpers/overrides";
+import { StatefulPopover as a, PLACEMENT as c, TRIGGER_TYPE as u } from "baseui/popover";
+import { useStyletron as p } from "baseui";
+import { getButtonIconSize as f } from "../button/overrides.js";
+import d from "../button-icon/button-icon.js";
+import { StyledMobileMenuContentContainer as C } from "./styled-components.js";
+import M from "../icons/line/dots-grid/index.js";
+function G({
+  children: t,
+  overrides: o = {}
+}) {
+  const [i, n] = p(), [r, s] = m(
+    o.MobileMenuContentContainer,
+    C
+  );
+  return /* @__PURE__ */ e(
+    l,
+    {
+      className: i({
+        display: "flex",
+        flexGrow: 1,
+        justifyContent: "flex-end",
+        marginRight: n.sizing.scale500
+      }),
+      children: /* @__PURE__ */ e(
+        a,
+        {
+          content: () => /* @__PURE__ */ e(r, { ...s, children: t }),
+          autoFocus: !1,
+          accessibilityType: "tooltip",
+          dismissOnEsc: !0,
+          dismissOnClickOutside: !0,
+          placement: c.bottomRight,
+          triggerType: u.click,
+          children: /* @__PURE__ */ e(d, { size: "small", shape: "square", kind: "secondary", children: /* @__PURE__ */ e(M, { size: f("small") }) })
+        }
+      )
+    }
+  );
+}
+export {
+  G as default
+};

package/dist/components/top-navigation/styled-components.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledRoot: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledNavContainer: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPrimaryMenuContainer: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPrimaryMenuItem: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPageTitle: import('styletron-react').StyletronComponent<"h1", {}>;
+export declare const StyledMobileMenuContentContainer: import('styletron-react').StyletronComponent<"div", {}>;

package/dist/components/top-navigation/styled-components.js

@@ -0,0 +1,60 @@
+import { styled as o } from "baseui";
+import { getMediaQueryMargins as e } from "../../styles/helpers.js";
+import n from "../../themes/typography.js";
+const r = o("div", ({ $theme: i }) => ({
+  ...i.typography.ParagraphMedium,
+  boxSizing: "border-box",
+  backgroundColor: i.colors.backgroundPrimary,
+  borderBottomWidth: "1px",
+  borderBottomStyle: "solid",
+  borderBottomColor: `${i.colors.borderOpaque}`,
+  paddingInlineStart: i.sizing.scale800,
+  ...e(i, ["paddingInlineEnd"])
+}));
+r.displayName = "StyledRoot";
+const l = o("div", ({ $theme: i }) => ({
+  alignItems: "center",
+  display: "flex",
+  justifyContent: "space-between",
+  margin: "auto",
+  maxWidth: `${i.grid.maxWidth}px`,
+  paddingBlockStart: i.sizing.scale700,
+  paddingBlockEnd: i.sizing.scale700
+}));
+r.displayName = "StyledDesktopMenu";
+const s = o("div", () => ({
+  boxSizing: "border-box",
+  height: "100%",
+  display: "flex",
+  flexDirection: "row",
+  flexGrow: 1,
+  flexWrap: "nowrap",
+  justifyContent: "flex-end",
+  alignItems: "stretch"
+}));
+r.displayName = "StyledPrimaryMenuContainer";
+const y = o("div", ({ $theme: i }) => ({
+  marginInlineEnd: i.sizing.scale500
+}));
+r.displayName = "StyledPrimaryMenuItem";
+const p = o("h1", () => ({
+  display: "flex",
+  ...n.HeadingMedium,
+  marginBlock: 0,
+  marginInlineStart: "135px"
+})), g = o("div", ({ $theme: i }) => ({
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: i.colors.backgroundPrimary,
+  borderRadius: i.borders.radius300,
+  padding: i.sizing.scale600
+}));
+r.displayName = "StyledDesktopMenu";
+export {
+  g as StyledMobileMenuContentContainer,
+  l as StyledNavContainer,
+  p as StyledPageTitle,
+  s as StyledPrimaryMenuContainer,
+  y as StyledPrimaryMenuItem,
+  r as StyledRoot
+};