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

package/dist/components/input/password-input.js

@@ -0,0 +1,89 @@
+import { jsx as G } from "react/jsx-runtime";
+import { getInputOverrides as H, getEndEnhancer as J } from "./overrides.js";
+import K from "./input.js";
+function Q({
+  value: i,
+  onChange: s,
+  disabled: b,
+  error: l,
+  positive: n,
+  incomplete: r = !1,
+  complete: a = !1,
+  loading: e = !1,
+  readOnly: t,
+  size: d,
+  clearable: o,
+  clearOnEscape: f,
+  "aria-label": p,
+  "aria-labelledby": u,
+  "aria-describedby": m,
+  adjoined: y,
+  autoComplete: c,
+  autoFocus: x,
+  pattern: E,
+  placeholder: I,
+  id: h,
+  inputRef: v,
+  name: w,
+  min: g,
+  max: j,
+  step: M,
+  maxLength: P,
+  onBlur: k,
+  onKeyDown: q,
+  onKeyPress: A,
+  onKeyUp: B,
+  onFocus: C,
+  required: D,
+  overrides: F
+}) {
+  return /* @__PURE__ */ G(
+    K,
+    {
+      overrides: H({
+        overrides: F,
+        size: d,
+        loading: e,
+        readOnly: t,
+        complete: a,
+        incomplete: r
+      }),
+      value: i,
+      onChange: s,
+      disabled: b,
+      error: l,
+      positive: n,
+      readOnly: t,
+      size: d,
+      type: "password",
+      clearable: o,
+      clearOnEscape: f,
+      endEnhancer: J({ incomplete: r, complete: a, loading: e }),
+      inputMode: "text",
+      "aria-label": p,
+      "aria-labelledby": u,
+      "aria-describedby": m,
+      adjoined: y,
+      autoComplete: c,
+      autoFocus: x,
+      pattern: E,
+      placeholder: I,
+      id: h,
+      inputRef: v,
+      name: w,
+      min: g,
+      max: j,
+      step: M,
+      maxLength: P,
+      onBlur: k,
+      onKeyDown: q,
+      onKeyPress: A,
+      onKeyUp: B,
+      onFocus: C,
+      required: D
+    }
+  );
+}
+export {
+  Q as default
+};

package/dist/components/input/search-input.js

@@ -0,0 +1,85 @@
+import { jsx as r } from "react/jsx-runtime";
+import { getInputOverrides as k, getEndEnhancer as q } from "./overrides.js";
+import w from "./input.js";
+import { SearchSmall as z, SearchLarge as A, SearchMedium as B } from "../icons/solid/search/index.js";
+function C(e) {
+  return e === "small" ? /* @__PURE__ */ r(z, { size: 20 }) : e === "large" ? /* @__PURE__ */ r(A, { size: 24 }) : /* @__PURE__ */ r(B, { size: 20 });
+}
+function J({
+  value: e,
+  onChange: l,
+  disabled: n,
+  loading: a = !1,
+  size: t,
+  clearOnEscape: i,
+  "aria-label": c,
+  "aria-labelledby": o,
+  "aria-describedby": m,
+  adjoined: p,
+  autoComplete: s,
+  autoFocus: f,
+  pattern: u,
+  placeholder: b,
+  id: d,
+  inputRef: h,
+  name: y,
+  min: S,
+  max: E,
+  step: I,
+  maxLength: g,
+  onBlur: x,
+  onKeyDown: v,
+  onKeyPress: M,
+  onKeyUp: j,
+  onFocus: L,
+  overrides: O
+}) {
+  return /* @__PURE__ */ r(
+    w,
+    {
+      overrides: k({
+        overrides: O,
+        size: t,
+        loading: a,
+        type: "search"
+      }),
+      value: e,
+      onChange: l,
+      disabled: n,
+      size: t,
+      type: "search",
+      clearable: !a,
+      clearOnEscape: i,
+      startEnhancer: C(t),
+      endEnhancer: q({
+        complete: !1,
+        incomplete: !1,
+        loading: a
+      }),
+      inputMode: "text",
+      "aria-label": c,
+      "aria-labelledby": o,
+      "aria-describedby": m,
+      adjoined: p,
+      autoComplete: s,
+      autoFocus: f,
+      pattern: u,
+      placeholder: b,
+      id: d,
+      inputRef: h,
+      name: y,
+      min: S,
+      max: E,
+      step: I,
+      maxLength: g,
+      onBlur: x,
+      onKeyDown: v,
+      onKeyPress: M,
+      onKeyUp: j,
+      onFocus: L
+    }
+  );
+}
+export {
+  J as default
+};

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

@@ -1,12 +1,15 @@
 import { InputProps as BaseInputProps } from 'baseui/input';
-import { SIZE } from './constants';
+import { SIZE_EXTENDED } from './constants';
 export interface InputProps extends Omit<BaseInputProps, "size"> {
-    size?: keyof typeof SIZE;
+    size?: keyof typeof SIZE_EXTENDED;
     loading?: boolean;
     complete?: boolean;
     incomplete?: boolean;
+    withFluidFontSize?: boolean;
+    minFluidFontSize?: number;
+    "data-attr"?: string;
 }
-export interface PasswordInputProps extends Omit<Omit<Omit<Omit<InputProps, "type">, "inputMode">, "startEnhancer">, "endEnhancer"> {
+export interface PasswordInputProps extends Omit<InputProps, "type" | "inputMode" | "startEnhancer" | "endEnhancer" | "withFluidFontSize" | "minFluidFontSize"> {
 }
-export interface SearchInputProps extends Omit<Omit<Omit<Omit<Omit<Omit<PasswordInputProps, "clearable">, "complete">, "error">, "incomplete">, "positive">, "required"> {
+export interface SearchInputProps extends Omit<PasswordInputProps, "clearable" | "complete" | "error" | "incomplete" | "positive" | "required" | "withFluidFontSize" | "minFluidFontSize"> {
 }

package/dist/components/input-group/index.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from 'react';
+export declare const InputGroup: import('styletron-react').StyletronComponent<"div", {}>;
+export type InputGroupProps = ComponentProps<typeof InputGroup> & {
+    id?: string;
+};

package/dist/components/input-group/index.js

@@ -0,0 +1,10 @@
+import { styled as p } from "baseui";
+const i = p("div", ({ $theme: o }) => ({
+  display: "grid",
+  gap: o.sizing.scale300,
+  gridAutoFlow: "column"
+}));
+i.displayName = "InputGroup";
+export {
+  i as InputGroup
+};

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

@@ -0,0 +1,2 @@
+export { Layer, LayersManager, LayersContext, TetherBehavior, TETHER_PLACEMENT, } from 'baseui/layer';
+export type { LayerProps, LayersManagerProps, LayersContextProps, TetherProps, TetherPlacement, } from 'baseui/layer';

package/dist/components/layer/index.js

@@ -0,0 +1,8 @@
+import { Layer as a, LayersContext as o, LayersManager as t, TETHER_PLACEMENT as E, TetherBehavior as L } from "baseui/layer";
+export {
+  a as Layer,
+  o as LayersContext,
+  t as LayersManager,
+  E as TETHER_PLACEMENT,
+  L as TetherBehavior
+};

package/dist/components/layout-grid/index.d.ts

@@ -0,0 +1,2 @@
+export { Grid, Cell } from 'baseui/layout-grid';
+export type { GridProps, CellProps } from 'baseui/layout-grid';

package/dist/components/layout-grid/index.js

@@ -0,0 +1,5 @@
+import { Cell as l, Grid as o } from "baseui/layout-grid";
+export {
+  l as Cell,
+  o as Grid
+};

package/dist/components/link/index.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import { StyledLink as n } from "baseui/link";
+import { useStyletron as a } from "baseui";
+import m from "../../themes/typography.js";
+function d({ children: l, size: t, ...s }) {
+  const [c, e] = a(), i = m[{
+    xsmall: "LabelXSmall",
+    small: "LabelSmall",
+    medium: "LabelMedium",
+    large: "LabelLarge"
+  }[t]] || {}, o = {
+    outline: `${e.sizing.scale0} solid ${e.colors.borderAccent}`,
+    outlineOffset: e.sizing.scale0,
+    textDecoration: "underline",
+    borderRadius: e.sizing.scale0
+  };
+  return /* @__PURE__ */ r(
+    n,
+    {
+      $style: {
+        ...i,
+        ":focus": o,
+        ":focus-visible": o
+      },
+      ...s,
+      children: l
+    }
+  );
+}
+export {
+  d as Link
+};

package/dist/components/list/index.js

@@ -0,0 +1,11 @@
+import { default as a } from "./list-heading.js";
+import { default as r } from "./list.js";
+import { default as m } from "./list-item-label.js";
+import { ARTWORK_SIZES as d, SHAPE as i } from "baseui/list";
+export {
+  d as ARTWORK_SIZES,
+  a as ListHeading,
+  r as ListItem,
+  m as ListItemLabel,
+  i as SHAPE
+};

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

@@ -0,0 +1,53 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ListHeading as m } from "baseui/list";
+import { mergeOverrides as g } from "baseui";
+import s from "../skeleton/skeleton.js";
+function d({
+  maxLines: n,
+  ...a
+}) {
+  return /* @__PURE__ */ i(s, { animation: !0, rows: n, height: "1em", ...a });
+}
+const r = (n) => ({
+  $as: n ? "div" : void 0
+});
+function l({
+  isFetching: n,
+  overrides: a,
+  ...e
+}) {
+  const o = g(
+    {
+      HeadingContainer: {
+        props: r(n)
+      },
+      SubHeadingContainer: {
+        props: r(n),
+        style: ({ $theme: t }) => ({
+          marginTop: n ? t.sizing.scale300 : 0
+        })
+      },
+      EndEnhancerContainer: {
+        props: r(n),
+        style: {
+          alignSelf: "stretch"
+          // So end enhancer is centered vertically
+        }
+      }
+    },
+    a
+  );
+  return /* @__PURE__ */ i(
+    m,
+    {
+      ...e,
+      overrides: o,
+      heading: n ? /* @__PURE__ */ i(d, { maxLines: e.maxLines, width: "153px" }) : e.heading,
+      subHeading: n && e.subHeading ? /* @__PURE__ */ i(d, { width: "216px" }) : e.subHeading,
+      endEnhancer: n && e.endEnhancer ? /* @__PURE__ */ i(d, { width: "64px" }) : e.endEnhancer
+    }
+  );
+}
+export {
+  l as default
+};

package/dist/components/list/list-item-label.js

@@ -0,0 +1,44 @@
+import { jsx as t } from "react/jsx-runtime";
+import { ListItemLabel as d } from "baseui/list";
+import { mergeOverrides as l } from "baseui";
+import { useListItemContext as p } from "./list.js";
+import c from "../skeleton/skeleton.js";
+function r({ width: i }) {
+  return /* @__PURE__ */ t(c, { animation: !0, width: i, height: "1em" });
+}
+function v({
+  children: i,
+  overrides: n,
+  ...o
+}) {
+  const { state: s } = p(), e = s === "loading", a = l(
+    {
+      LabelContent: {
+        props: { $as: e ? "div" : void 0 },
+        style: () => ({
+          color: "inherit"
+        })
+      },
+      LabelDescription: {
+        props: { $as: e ? "div" : void 0 },
+        style: ({ $theme: m }) => e ? {
+          color: "inherit",
+          marginTop: m.sizing.scale500
+        } : { color: "inherit" }
+      }
+    },
+    n
+  );
+  return /* @__PURE__ */ t(
+    d,
+    {
+      overrides: a,
+      ...o,
+      description: e && o.description ? /* @__PURE__ */ t(r, { width: "100px" }) : o.description,
+      children: e ? /* @__PURE__ */ t(r, { width: "80px" }) : i
+    }
+  );
+}
+export {
+  v as default
+};

package/dist/components/list/list.d.ts

@@ -2,9 +2,13 @@ import { ListProps } from 'baseui/list';
 type State = "enabled" | "disabled" | "loading";
 export type ListItemProps = ListProps & {
     state?: State;
+    withBottomBorder?: boolean;
 };
 export declare const useListItemContext: () => {
     state: State;
 };
-export default function ListItem({ children, overrides, state, ...restProps }: ListItemProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare function ListItem({ children, overrides, state, withBottomBorder, ...restProps }: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ListItem {
+    var displayName: string;
+}
+export default ListItem;

package/dist/components/list/list.js

@@ -0,0 +1,76 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { createContext as d, useContext as h } from "react";
+import { Block as u } from "baseui/block";
+import { ListItem as f } from "baseui/list";
+import { mergeOverrides as x } from "baseui";
+import { checkForContextError as g } from "../../utils/index.js";
+import i from "../skeleton/skeleton.js";
+const a = d({ state: "enabled" }), D = () => {
+  const t = h(a);
+  return g(t, "ListItem"), t;
+};
+function k({ ...t }) {
+  return /* @__PURE__ */ e(i, { animation: !0, height: "1em", ...t });
+}
+function L({ size: t }) {
+  const n = `${t}px`;
+  return /* @__PURE__ */ e(k, { width: n, height: n });
+}
+function I() {
+  return /* @__PURE__ */ c(u, { display: "flex", alignItems: "end", flexDirection: "column", children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        animation: !0,
+        height: "1em",
+        width: "80px",
+        overrides: {
+          Root: {
+            style: ({ $theme: t }) => ({
+              marginBottom: t.sizing.scale500
+            })
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ e(i, { animation: !0, height: "1em", width: "64px" })
+  ] });
+}
+const p = (t) => ({ $theme: n }) => t === "disabled" ? {
+  color: n.colors.contentStateDisabled
+} : {};
+function S({
+  children: t,
+  overrides: n,
+  state: r = "enabled",
+  withBottomBorder: s = !0,
+  ...o
+}) {
+  const m = r === "loading", l = x(
+    {
+      Root: { style: p(r) },
+      ...!s && {
+        Content: { style: { borderBottom: 0 } }
+      }
+    },
+    n
+  );
+  return (
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    /* @__PURE__ */ e(a.Provider, { value: { state: r }, children: /* @__PURE__ */ e(
+      f,
+      {
+        overrides: l,
+        ...o,
+        artwork: m && o.artwork ? L : o.artwork,
+        endEnhancer: m && o.endEnhancer ? () => /* @__PURE__ */ e(I, {}) : o.endEnhancer,
+        children: t
+      }
+    ) })
+  );
+}
+S.displayName = "ListItem";
+export {
+  S as default,
+  D as useListItemContext
+};

package/dist/components/menu/context.d.ts

@@ -0,0 +1,7 @@
+import { MenuSize } from './types';
+export declare const MenuContext: import('react').Context<{
+    size: MenuSize;
+}>;
+export declare const useMenuContext: () => {
+    size: MenuSize;
+};

package/dist/components/menu/context.js

@@ -0,0 +1,10 @@
+import { createContext as e, useContext as o } from "react";
+import { checkForContextError as n } from "../../utils/index.js";
+const r = e({ size: "medium" }), x = () => {
+  const t = o(r);
+  return n(t, "Menu"), t;
+};
+export {
+  r as MenuContext,
+  x as useMenuContext
+};

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

@@ -0,0 +1,4 @@
+export * from './menu';
+export * from './menu-items';
+export * from './types';
+export { NestedMenus } from 'baseui/menu';

package/dist/components/menu/index.js

@@ -0,0 +1,11 @@
+import { Menu as r, MenuList as t, MenuProfile as n } from "./menu.js";
+import { MenuListItem as M, MenuProfileItem as f } from "./menu-items.js";
+import { NestedMenus as i } from "baseui/menu";
+export {
+  r as Menu,
+  t as MenuList,
+  M as MenuListItem,
+  n as MenuProfile,
+  f as MenuProfileItem,
+  i as NestedMenus
+};

package/dist/components/menu/menu-items.d.ts

@@ -0,0 +1,18 @@
+import { ComponentType, ReactNode } from 'react';
+import { IconProps } from 'baseui/icon';
+export type MenuListItemProps = {
+    artwork?: ComponentType<IconProps>;
+    artworkProps?: IconProps;
+    endEnhancer?: ReactNode;
+    label: ReactNode;
+    id?: string;
+};
+export type MenuProfileItemProps = {
+    title: string;
+    subtitle?: string;
+    body?: string;
+    imgUrl?: string;
+    id?: string;
+};
+export declare function MenuListItem({ artwork, artworkProps, endEnhancer, label, id, }: MenuListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuProfileItem({ title, subtitle, body, imgUrl, id, }: MenuProfileItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/menu/menu-items.js

@@ -0,0 +1,143 @@
+import { jsxs as f, jsx as l } from "react/jsx-runtime";
+import { Block as r } from "baseui/block";
+import { StyledProfileImg as S, StyledProfileLabelsContainer as z, StyledProfileTitle as P, StyledProfileSubtitle as I, StyledProfileBody as x } from "baseui/menu";
+import { useStyletron as p } from "baseui";
+import o from "../../themes/typography.js";
+import { toTitleCase as y, getInitials as L } from "../../utils/index.js";
+import { useMenuContext as u } from "./context.js";
+function A({
+  artwork: a,
+  artworkProps: c = {},
+  endEnhancer: t,
+  label: m,
+  id: g
+}) {
+  const [i, e] = p(), { size: s } = u(), n = a, d = {
+    small: e.sizing.scale600,
+    medium: e.sizing.scale700,
+    large: e.sizing.scale800
+  }, h = {
+    display: "inline-flex",
+    alignItems: "center"
+  };
+  return /* @__PURE__ */ f(r, { className: i({ display: "flex", alignItems: "center" }), id: g, children: [
+    a && /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          marginRight: e.sizing.scale600
+        }),
+        children: /* @__PURE__ */ l(n, { size: d[s], ...c })
+      }
+    ),
+    /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          ...o[`Paragraph${y(s)}`]
+        }),
+        children: m
+      }
+    ),
+    t && /* @__PURE__ */ l(
+      r,
+      {
+        className: i({
+          ...h,
+          marginLeft: "auto",
+          paddingLeft: e.sizing.scale600
+        }),
+        children: t
+      }
+    )
+  ] });
+}
+function B({
+  title: a,
+  subtitle: c,
+  body: t,
+  imgUrl: m,
+  id: g
+}) {
+  const [i, e] = p(), { size: s } = u(), n = s === "large" ? e.sizing.scale1200 : e.sizing.scale950, d = {
+    small: "ParagraphXSmall",
+    medium: "ParagraphSmall",
+    large: "ParagraphMedium"
+  };
+  return /* @__PURE__ */ f(
+    r,
+    {
+      id: g,
+      className: i({
+        display: "flex",
+        alignItems: "center",
+        margin: `${s === "large" ? e.sizing.scale300 : e.sizing.scale0} 0`
+      }),
+      children: [
+        /* @__PURE__ */ l(
+          r,
+          {
+            className: i({
+              display: "inline-flex",
+              alignItems: "center"
+            }),
+            children: m ? /* @__PURE__ */ l(
+              S,
+              {
+                src: m,
+                alt: a,
+                $style: {
+                  width: n,
+                  height: n
+                }
+              }
+            ) : /* @__PURE__ */ l(
+              r,
+              {
+                className: i({
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  width: n,
+                  height: n,
+                  borderRadius: "9999px",
+                  backgroundColor: e.colors.borderAccent,
+                  color: e.colors.contentOnColor,
+                  ...s === "large" ? o.HeadingXSmall : o.LabelMedium
+                }),
+                children: L(a)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ f(z, { $style: { alignSelf: "auto" }, children: [
+          a && /* @__PURE__ */ l(
+            P,
+            {
+              $style: {
+                ...o[`Label${y(s)}`]
+              },
+              children: a
+            }
+          ),
+          c && /* @__PURE__ */ l(
+            I,
+            {
+              $style: {
+                ...o[d[s]]
+              },
+              children: c
+            }
+          ),
+          t && /* @__PURE__ */ l(x, { children: t })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  A as MenuListItem,
+  B as MenuProfileItem
+};