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

package/dist/components/tabs/tab-title.js

@@ -0,0 +1,27 @@
+import { jsxs as i, Fragment as n, jsx as a } from "react/jsx-runtime";
+import o from "../badge/notification.js";
+function f({
+  title: e,
+  badgeContent: r
+}) {
+  return r ? /* @__PURE__ */ i(n, { children: [
+    e,
+    /* @__PURE__ */ a(
+      o,
+      {
+        content: r,
+        style: "accent",
+        overrides: {
+          Badge: {
+            style: ({ $theme: t }) => ({
+              marginLeft: t.sizing.scale300
+            })
+          }
+        }
+      }
+    )
+  ] }) : e;
+}
+export {
+  f as default
+};

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,9 @@
+import { TabProps as BaseTabProps, TabsProps as BaseTabsProps } from 'baseui/tabs-motion';
+export type TabProps = BaseTabProps & {
+    id?: string;
+};
+export type TabsProps = BaseTabsProps & {
+    id?: string;
+};
+export declare function Tabs({ id, activeKey, overrides, children, ...restProps }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tab(props: TabProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/tabs.js

@@ -0,0 +1,58 @@
+import { jsx as p } from "react/jsx-runtime";
+import { mergeOverrides as t } from "baseui";
+import { Tabs as T, Tab as a } from "baseui/tabs-motion";
+import { mapChildren as f } from "../../utils/index.js";
+function x({
+  id: r,
+  activeKey: s,
+  overrides: e,
+  children: i,
+  ...m
+}) {
+  return /* @__PURE__ */ p(
+    T,
+    {
+      overrides: t(
+        {
+          TabList: {
+            props: {
+              id: r
+            }
+          }
+        },
+        e
+      ),
+      activeKey: s,
+      ...m,
+      children: f(i, (o, b) => {
+        if (!o) return null;
+        const n = o.key || b;
+        return /* @__PURE__ */ p(
+          a,
+          {
+            overrides: t(
+              {
+                Tab: {
+                  props: {
+                    id: o.props.id || `${r}-${n}`
+                  }
+                }
+              },
+              e
+            ),
+            activeKey: s,
+            ...o.props
+          },
+          n
+        );
+      })
+    }
+  );
+}
+function c(r) {
+  return /* @__PURE__ */ p(a, { ...r });
+}
+export {
+  c as Tab,
+  x as Tabs
+};

package/dist/components/tag/constants.js

@@ -0,0 +1,77 @@
+import { SIZE as o } from "baseui/tag";
+const r = {
+  gray: {
+    backgroundPrimary: "gray500",
+    backgroundPrimaryDisabled: "gray50",
+    fontPrimary: "contentOnColor",
+    fontPrimaryDisabled: "gray300",
+    backgroundSecondary: "gray50",
+    backgroundSecondaryDisabled: "gray50",
+    fontSecondary: "gray700",
+    fontSecondaryDisabled: "gray300"
+  },
+  red: {
+    backgroundPrimary: "red500",
+    backgroundPrimaryDisabled: "red50",
+    fontPrimary: "red50",
+    fontPrimaryDisabled: "red300",
+    backgroundSecondary: "red50",
+    backgroundSecondaryDisabled: "red300",
+    fontSecondary: "red700",
+    fontSecondaryDisabled: "red50"
+  },
+  brown: {
+    backgroundPrimary: "brown600",
+    backgroundPrimaryDisabled: "brown300",
+    fontPrimary: "brown300",
+    fontPrimaryDisabled: "brown500",
+    backgroundSecondary: "brown300",
+    backgroundSecondaryDisabled: "brown300",
+    fontSecondary: "brown700",
+    fontSecondaryDisabled: "brown400"
+  },
+  yellow: {
+    backgroundPrimary: "yellow500",
+    backgroundPrimaryDisabled: "yellow300",
+    fontPrimary: "black",
+    fontPrimaryDisabled: "yellow500",
+    backgroundSecondary: "yellow300",
+    backgroundSecondaryDisabled: "yellow300",
+    fontSecondary: "yellow700",
+    fontSecondaryDisabled: "yellow400"
+  },
+  green: {
+    backgroundPrimary: "green600",
+    backgroundPrimaryDisabled: "green50",
+    fontPrimary: "green50",
+    fontPrimaryDisabled: "green500",
+    backgroundSecondary: "green50",
+    backgroundSecondaryDisabled: "green50",
+    fontSecondary: "green700",
+    fontSecondaryDisabled: "green300"
+  },
+  blue: {
+    backgroundPrimary: "blue600",
+    backgroundPrimaryDisabled: "blue300",
+    fontPrimary: "blue300",
+    fontPrimaryDisabled: "blue600",
+    backgroundSecondary: "blue300",
+    backgroundSecondaryDisabled: "blue300",
+    fontSecondary: "blue700",
+    fontSecondaryDisabled: "blue400"
+  },
+  purple: {
+    backgroundPrimary: "purple600",
+    backgroundPrimaryDisabled: "purple300",
+    fontPrimary: "purple300",
+    fontPrimaryDisabled: "purple600",
+    backgroundSecondary: "purple300",
+    backgroundSecondaryDisabled: "purple300",
+    fontSecondary: "purple700",
+    fontSecondaryDisabled: "purple400"
+  }
+};
+export {
+  r as COLOR,
+  o as SIZE
+};

package/dist/components/tag/index.js

@@ -0,0 +1,8 @@
+import { default as a } from "./tag.js";
+import { COLOR as f } from "./constants.js";
+import { SIZE as O } from "baseui/tag";
+export {
+  f as TAG_COLOR,
+  O as TAG_SIZE,
+  a as Tag
+};

package/dist/components/tag/overrides.js

@@ -0,0 +1,68 @@
+import { SIZE as i } from "baseui/tag";
+import { mergeOverrides as p } from "baseui";
+import { toTitleCase as g } from "../../utils/index.js";
+import { COLOR as u } from "./constants.js";
+import m from "../icons/solid/x-circle/index.js";
+function f(o, r, e) {
+  const n = `background${g(r)}${e ? "Disabled" : ""}`;
+  return u[o][n] || "gray500";
+}
+function h(o, r, e, t) {
+  const n = f(r, e, t);
+  return o.colors[n];
+}
+function d(o, r, e, t) {
+  const c = `font${g(e)}${t ? "Disabled" : ""}`;
+  return o.colors[u[r][c] || "contentOnColor"];
+}
+function x(o) {
+  switch (o) {
+    case i.large:
+      return "20px";
+    case i.medium:
+      return "16px";
+    case i.small:
+    default:
+      return "12px";
+  }
+}
+function O({
+  overrides: o,
+  color: r,
+  size: e,
+  disabled: t,
+  hierarchy: n,
+  onClick: c
+}) {
+  const a = x(e), l = !t && c !== void 0;
+  return p({
+    Root: {
+      style: ({ $theme: s }) => ({
+        // We're setting the border-radius here because the relevant theme
+        // tokens that control this also affect other components that require
+        // different border radii
+        borderRadius: "500px",
+        // pill shape
+        backgroundColor: h(s, r, n, t),
+        color: d(s, r, n, t),
+        ":hover": l ? {
+          boxShadow: "999px 999px 0px 0px rgba(255, 255, 255, 0.20) inset"
+        } : {}
+      })
+    },
+    ActionIcon: {
+      // Replace base's close icon with our own
+      component: m
+    },
+    StartEnhancerContainer: {
+      style: {
+        width: a,
+        height: a
+      }
+    }
+  }, o);
+}
+export {
+  f as getBgColorKey,
+  O as getTagOverrides
+};

package/dist/components/tag/tag.js

@@ -0,0 +1,58 @@
+import { jsx as v } from "react/jsx-runtime";
+import { Tag as x } from "baseui/tag";
+import { getTagOverrides as d } from "./overrides.js";
+function $({
+  overrides: m = {},
+  /** Include or exclude the "x" button and click action. */
+  closeable: g,
+  /** Disable control from being changed. */
+  disabled: r,
+  /** Component or String value for label of tag. Default is empty string. */
+  children: e,
+  /** The color theme to be applied to a Tag. Default is `KIND.primary`. */
+  color: f = "gray",
+  hierarchy: o = "primary",
+  /** Text to display in native OS tooltip on long hover. */
+  title: p,
+  /** onClick handler for the action button element. */
+  onActionClick: T,
+  /** keydown handler for the action button element. */
+  onActionKeyDown: i,
+  /** onClick handler for the tag. Passing an onClick handler also makes the tag clickable. */
+  onClick: t,
+  /** onkeydown handler for the tag. */
+  onKeyDown: s,
+  /** Determines the size of the Tag. */
+  size: a,
+  startEnhancer: u,
+  contentMaxWidth: n
+}) {
+  return /* @__PURE__ */ v(
+    x,
+    {
+      overrides: d({
+        overrides: m,
+        color: f,
+        size: a,
+        disabled: r,
+        hierarchy: o,
+        onClick: t
+      }),
+      closeable: g,
+      disabled: r,
+      hierarchy: o,
+      title: p,
+      onActionClick: T,
+      onActionKeyDown: i,
+      onClick: t,
+      onKeyDown: s,
+      size: a,
+      startEnhancer: u,
+      contentMaxWidth: n,
+      children: e
+    }
+  );
+}
+export {
+  $ as default
+};

package/dist/components/textarea/index.js

@@ -0,0 +1,6 @@
+import { default as r } from "./textarea.js";
+import { SIZE as t } from "../input/constants.js";
+export {
+  t as TEXTAREA_SIZE,
+  r as Textarea
+};

package/dist/components/textarea/overrides.js

@@ -0,0 +1,62 @@
+import { mergeOverrides as l } from "baseui";
+import { getRootReadOnlyStyles as d, getInputContainerReadOnlyStyles as p } from "../input/overrides.js";
+import g from "../icons/solid/x-circle/index.js";
+function u(t) {
+  return t === "small" ? "16px" : t === "large" ? "24px" : "20px";
+}
+function f(t) {
+  return parseInt(t.replace(/^\D+/g, ""), 10);
+}
+function m(t, n) {
+  const r = `${f(n) + 16}px`;
+  return t ? `calc(100% - ${r})` : "100%";
+}
+function h({
+  overrides: t,
+  size: n,
+  readOnly: r,
+  loading: i,
+  incomplete: c,
+  complete: a
+}) {
+  const o = u(n), s = i || c || a;
+  return l({
+    Root: {
+      style: ({ $theme: e }) => ({
+        borderWidth: e.borders.inputBorderWidth,
+        ...d(e, r),
+        ":focus": {
+          borderColor: e.colors.borderAccent
+        }
+      })
+    },
+    InputContainer: {
+      style: ({ $theme: e }) => ({
+        ...p(e, r)
+      })
+    },
+    Input: {
+      style: ({ $theme: e }) => ({
+        padding: e.sizing.scale600,
+        maxWidth: m(s, o)
+      })
+    },
+    ClearIcon: {
+      component: g,
+      style: {
+        width: o,
+        height: o
+      }
+    },
+    ClearIconContainer: {
+      style: ({ $theme: e }) => ({
+        padding: e.sizing.scale600
+      })
+    }
+  }, t);
+}
+export {
+  u as getIconSize,
+  f as getSizeAsNumber,
+  h as getTextareaOverrides
+};

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