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

package/dist/components/input/overrides.js

@@ -0,0 +1,181 @@
+import { jsx as p } from "react/jsx-runtime";
+import { withStyle as x, mergeOverrides as y } from "baseui";
+import { Spinner as b } from "baseui/spinner";
+import S from "../../themes/typography.js";
+import a from "../../themes/clay-light-theme.js";
+import { INPUT_TYPOGRAPHY as C, INPUT_VERTICAL_PADDING as I } from "./constants.js";
+import R from "../icons/solid/alert-circle/index.js";
+import w from "../icons/solid/x-circle/index.js";
+import T from "../icons/solid/eye/index.js";
+import k from "../icons/solid/eye-off/index.js";
+import { CheckCircle as E } from "../icons/solid/check-circle/index.js";
+const P = x(b, () => ({
+  borderTopColor: a.colors.borderAccent,
+  borderBottomColor: a.colors.white,
+  borderLeftColor: a.colors.white,
+  borderRightColor: a.colors.white,
+  marginRight: "8px",
+  borderWidth: "2px"
+}));
+function j({
+  incomplete: t,
+  complete: r,
+  loading: o,
+  loadingSpinnerSize: n = "12px"
+}) {
+  return t ? /* @__PURE__ */ p(R, { color: "negative", size: "auto" }) : r ? /* @__PURE__ */ p(E, { color: "positive", size: "auto" }) : o ? /* @__PURE__ */ p(P, { $size: n }) : null;
+}
+function O(t, r, o) {
+  if (r || o)
+    return "auto";
+  switch (t) {
+    case "small":
+      return "16px";
+    case "large":
+    case "xxlarge":
+      return "24px";
+    case "medium":
+    default:
+      return "20px";
+  }
+}
+function v(t, r) {
+  return r ? {
+    backgroundColor: t.colors.backgroundPrimary,
+    borderColor: t.colors.borderOpaque,
+    borderWidth: t.borders.inputBorderWidthReadOnly
+  } : {};
+}
+function A(t, r) {
+  return r === "search" ? {
+    borderRadius: t.borders.searchInputBorderRadius,
+    paddingLeft: "8px"
+  } : {};
+}
+function B(t, r) {
+  return r ? {
+    backgroundColor: t.colors.backgroundPrimary
+  } : {};
+}
+function L(t, r) {
+  return t !== "search" ? {} : r === "medium" ? { padding: "6px" } : r === "large" ? { padding: "8px" } : { padding: 0 };
+}
+function W(t, r, o) {
+  return t ? "16px" : r || o ? "8px" : 0;
+}
+function q({
+  overrides: t = {},
+  size: r,
+  loading: o,
+  readOnly: n,
+  endEnhancer: c,
+  complete: f,
+  incomplete: h,
+  type: l,
+  fontSize: s
+}) {
+  const g = I[r || "medium"], u = c && typeof c == "string", i = O(r, o, u), d = r === "large" ? "24px" : "20px", m = {
+    Root: {
+      style: ({ $theme: e }) => ({
+        borderWidth: e.borders.inputBorderWidth,
+        borderRadius: e.borders.radius400,
+        paddingRight: u ? "16px" : "8px",
+        ...v(e, n),
+        ...A(e, l),
+        ":focus": {
+          borderColor: e.colors.borderAccent
+        }
+      })
+    },
+    InputContainer: {
+      style: ({ $theme: e }) => ({
+        ...B(e, n),
+        // Font size needs to be set here for the fit text hook to work since
+        // the computed font set by `useFitText` is set as a percentage
+        fontSize: C[r || "medium"].fontSize
+      })
+    },
+    Input: {
+      style: {
+        paddingTop: g,
+        paddingBottom: g,
+        paddingLeft: "16px",
+        paddingRight: "8px",
+        textOverflow: "ellipsis",
+        // Only customize text for xxlarge, as the other sizes match base's
+        ...r === "xxlarge" && {
+          ...S.HeadingXXLarge,
+          fontWeight: 500
+        },
+        // Style the masked input dots with a custom font (make them bigger)
+        "input[type=password]:not(:placeholder-shown)": {
+          fontFamily: "Password, Roboto, Verdana, Helvetica, Arial, sans-serif",
+          fontSize: "18px",
+          letterSpacing: "2px"
+        },
+        // Hide the x button automatically added by webkit browsers
+        "input[type=search]::-webkit-search-cancel-button": {
+          display: "none"
+        },
+        ...s && { fontSize: s }
+      }
+    },
+    ClearIcon: {
+      component: w,
+      style: {
+        width: i,
+        height: i
+      }
+    },
+    ClearIconContainer: {
+      style: {
+        padding: 0
+      }
+    },
+    EndEnhancer: {
+      style: {
+        padding: 0,
+        width: i,
+        height: i,
+        alignSelf: "center"
+      }
+    },
+    MaskToggleButton: {
+      style: {
+        paddingLeft: "8px",
+        paddingRight: W(
+          o,
+          f,
+          h
+        )
+      }
+    },
+    MaskToggleHideIcon: {
+      component: T,
+      style: {
+        width: d,
+        height: d
+      }
+    },
+    MaskToggleShowIcon: {
+      component: k,
+      style: {
+        width: d,
+        height: d
+      }
+    },
+    StartEnhancer: {
+      style: {
+        ...L(l, r)
+      }
+    }
+  };
+  return y(m, t);
+}
+export {
+  P as InputLoadingSpinner,
+  j as getEndEnhancer,
+  B as getInputContainerReadOnlyStyles,
+  q as getInputOverrides,
+  v as getRootReadOnlyStyles
+};

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