@weng-lab/ui-components 2.0.0 → 2.0.1

package/dist/ui-components.es203.js

@@ -1,340 +1,262 @@
-import * as h from "react";
-import o from "./ui-components.es81.js";
-import { clsx as po } from "./ui-components.es80.js";
-import fo from "./ui-components.es327.js";
-import bo, { getButtonBaseUtilityClass as mo } from "./ui-components.es328.js";
-import { j as F } from "./ui-components.es12.js";
-import { useDefaultProps as ho } from "./ui-components.es85.js";
-import yo from "./ui-components.es329.js";
-import K from "./ui-components.es170.js";
-import x from "./ui-components.es171.js";
-import P from "./ui-components.es175.js";
-import Ro from "./ui-components.es40.js";
-import To from "./ui-components.es86.js";
-import go from "./ui-components.es198.js";
-import Mo from "./ui-components.es131.js";
-const Co = (y) => {
+import l from "./ui-components.es283.js";
+import I from "./ui-components.es284.js";
+import s from "./ui-components.es285.js";
+import c from "./ui-components.es286.js";
+import f from "./ui-components.es287.js";
+import d from "./ui-components.es288.js";
+import g from "./ui-components.es289.js";
+import m from "./ui-components.es290.js";
+import P from "./ui-components.es213.js";
+import { getContrastRatio as k, lighten as S, darken as U } from "./ui-components.es48.js";
+import v from "./ui-components.es201.js";
+function D() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: "rgba(0, 0, 0, 0.87)",
+      // Secondary text.
+      secondary: "rgba(0, 0, 0, 0.6)",
+      // Disabled text have even lower visual prominence.
+      disabled: "rgba(0, 0, 0, 0.38)"
+    },
+    // The color used to divide different elements.
+    divider: "rgba(0, 0, 0, 0.12)",
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: l.white,
+      default: l.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: "rgba(0, 0, 0, 0.54)",
+      // The color of an hovered action.
+      hover: "rgba(0, 0, 0, 0.04)",
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: "rgba(0, 0, 0, 0.08)",
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: "rgba(0, 0, 0, 0.26)",
+      // The background color of a disabled action.
+      disabledBackground: "rgba(0, 0, 0, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(0, 0, 0, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+const V = D();
+function E() {
+  return {
+    text: {
+      primary: l.white,
+      secondary: "rgba(255, 255, 255, 0.7)",
+      disabled: "rgba(255, 255, 255, 0.5)",
+      icon: "rgba(255, 255, 255, 0.5)"
+    },
+    divider: "rgba(255, 255, 255, 0.12)",
+    background: {
+      paper: "#121212",
+      default: "#121212"
+    },
+    action: {
+      active: l.white,
+      hover: "rgba(255, 255, 255, 0.08)",
+      hoverOpacity: 0.08,
+      selected: "rgba(255, 255, 255, 0.16)",
+      selectedOpacity: 0.16,
+      disabled: "rgba(255, 255, 255, 0.3)",
+      disabledBackground: "rgba(255, 255, 255, 0.12)",
+      disabledOpacity: 0.38,
+      focus: "rgba(255, 255, 255, 0.12)",
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+const w = E();
+function O(r, e, u, i) {
+  const h = i.light || i, y = i.dark || i * 1.5;
+  r[e] || (r.hasOwnProperty(u) ? r[e] = r[u] : e === "light" ? r.light = S(r.main, h) : e === "dark" && (r.dark = U(r.main, y)));
+}
+function _(r = "light") {
+  return r === "dark" ? {
+    main: d[200],
+    light: d[50],
+    dark: d[400]
+  } : {
+    main: d[700],
+    light: d[400],
+    dark: d[800]
+  };
+}
+function B(r = "light") {
+  return r === "dark" ? {
+    main: s[200],
+    light: s[50],
+    dark: s[400]
+  } : {
+    main: s[500],
+    light: s[300],
+    dark: s[700]
+  };
+}
+function L(r = "light") {
+  return r === "dark" ? {
+    main: c[500],
+    light: c[300],
+    dark: c[700]
+  } : {
+    main: c[700],
+    light: c[400],
+    dark: c[800]
+  };
+}
+function R(r = "light") {
+  return r === "dark" ? {
+    main: g[400],
+    light: g[300],
+    dark: g[700]
+  } : {
+    main: g[700],
+    light: g[500],
+    dark: g[900]
+  };
+}
+function W(r = "light") {
+  return r === "dark" ? {
+    main: m[400],
+    light: m[300],
+    dark: m[700]
+  } : {
+    main: m[800],
+    light: m[500],
+    dark: m[900]
+  };
+}
+function j(r = "light") {
+  return r === "dark" ? {
+    main: f[400],
+    light: f[300],
+    dark: f[700]
+  } : {
+    main: "#ed6c02",
+    // closest to orange[800] that pass 3:1.
+    light: f[500],
+    dark: f[900]
+  };
+}
+function tr(r) {
   const {
-    disabled: l,
-    focusVisible: u,
-    focusVisibleClassName: i,
-    classes: c
-  } = y, R = To({
-    root: ["root", l && "disabled", u && "focusVisible"]
-  }, mo, c);
-  return u && i && (R.root += ` ${i}`), R;
-}, xo = Ro("button", {
-  name: "MuiButtonBase",
-  slot: "Root"
-})({
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  position: "relative",
-  boxSizing: "border-box",
-  WebkitTapHighlightColor: "transparent",
-  backgroundColor: "transparent",
-  // Reset default value
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-  border: 0,
-  margin: 0,
-  // Remove the margin in Safari
-  borderRadius: 0,
-  padding: 0,
-  // Remove the padding in Firefox
-  cursor: "pointer",
-  userSelect: "none",
-  verticalAlign: "middle",
-  MozAppearance: "none",
-  // Reset
-  WebkitAppearance: "none",
-  // Reset
-  textDecoration: "none",
-  // So we take precedent over the style of a native <a /> element.
-  color: "inherit",
-  "&::-moz-focus-inner": {
-    borderStyle: "none"
-    // Remove Firefox dotted outline.
-  },
-  [`&.${bo.disabled}`]: {
-    pointerEvents: "none",
-    // Disable link interactions
-    cursor: "default"
-  },
-  "@media print": {
-    colorAdjust: "exact"
-  }
-}), Bo = /* @__PURE__ */ h.forwardRef(function(l, u) {
-  const i = ho({
-    props: l,
-    name: "MuiButtonBase"
-  }), {
-    action: c,
-    centerRipple: B = !1,
-    children: R,
-    className: O,
-    component: T = "button",
-    disabled: r = !1,
-    disableRipple: g = !1,
-    disableTouchRipple: n = !1,
-    focusRipple: p = !1,
-    focusVisibleClassName: Do,
-    LinkComponent: A = "a",
-    onBlur: V,
-    onClick: f,
-    onContextMenu: I,
-    onDragLeave: z,
-    onFocus: w,
-    onFocusVisible: E,
-    onKeyDown: L,
-    onKeyUp: N,
-    onMouseDown: q,
-    onMouseLeave: j,
-    onMouseUp: H,
-    onTouchEnd: W,
-    onTouchMove: $,
-    onTouchStart: _,
-    tabIndex: S = 0,
-    TouchRippleProps: G,
-    touchRippleRef: J,
-    type: D,
-    ...d
-  } = i, b = h.useRef(null), t = yo(), Q = K(t.ref, J), [a, M] = h.useState(!1);
-  r && a && M(!1), h.useImperativeHandle(c, () => ({
-    focusVisible: () => {
-      M(!0), b.current.focus();
+    mode: e = "light",
+    contrastThreshold: u = 3,
+    tonalOffset: i = 0.2,
+    ...h
+  } = r, y = r.primary || _(e), T = r.secondary || B(e), $ = r.error || L(e), x = r.info || R(e), N = r.success || W(e), C = r.warning || j(e);
+  function b(t) {
+    const a = k(t, w.text.primary) >= u ? w.text.primary : V.text.primary;
+    if (process.env.NODE_ENV !== "production") {
+      const n = k(t, a);
+      n < 3 && console.error([`MUI: The contrast ratio of ${n}:1 for ${a} on ${t}`, "falls below the WCAG recommended absolute minimum contrast ratio of 3:1.", "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast"].join(`
+`));
     }
-  }), []);
-  const X = t.shouldMount && !g && !r;
-  h.useEffect(() => {
-    a && p && !g && t.pulsate();
-  }, [g, p, a, t]);
-  const Y = s(t, "start", q, n), Z = s(t, "stop", I, n), v = s(t, "stop", z, n), oo = s(t, "stop", H, n), eo = s(t, "stop", (e) => {
-    a && e.preventDefault(), j && j(e);
-  }, n), to = s(t, "start", _, n), no = s(t, "stop", W, n), so = s(t, "stop", $, n), ro = s(t, "stop", (e) => {
-    P(e.target) || M(!1), V && V(e);
-  }, !1), uo = x((e) => {
-    b.current || (b.current = e.currentTarget), P(e.target) && (M(!0), E && E(e)), w && w(e);
-  }), k = () => {
-    const e = b.current;
-    return T && T !== "button" && !(e.tagName === "A" && e.href);
-  }, io = x((e) => {
-    p && !e.repeat && a && e.key === " " && t.stop(e, () => {
-      t.start(e);
-    }), e.target === e.currentTarget && k() && e.key === " " && e.preventDefault(), L && L(e), e.target === e.currentTarget && k() && e.key === "Enter" && !r && (e.preventDefault(), f && f(e));
-  }), ao = x((e) => {
-    p && e.key === " " && a && !e.defaultPrevented && t.stop(e, () => {
-      t.pulsate(e);
-    }), N && N(e), f && e.target === e.currentTarget && k() && e.key === " " && !e.defaultPrevented && f(e);
-  });
-  let C = T;
-  C === "button" && (d.href || d.to) && (C = A);
-  const m = {};
-  C === "button" ? (m.type = D === void 0 ? "button" : D, m.disabled = r) : (!d.href && !d.to && (m.role = "button"), r && (m["aria-disabled"] = r));
-  const co = K(u, b), U = {
-    ...i,
-    centerRipple: B,
-    component: T,
-    disabled: r,
-    disableRipple: g,
-    disableTouchRipple: n,
-    focusRipple: p,
-    tabIndex: S,
-    focusVisible: a
-  }, lo = Co(U);
-  return /* @__PURE__ */ F.jsxs(xo, {
-    as: C,
-    className: po(lo.root, O),
-    ownerState: U,
-    onBlur: ro,
-    onClick: f,
-    onContextMenu: Z,
-    onFocus: uo,
-    onKeyDown: io,
-    onKeyUp: ao,
-    onMouseDown: Y,
-    onMouseLeave: eo,
-    onMouseUp: oo,
-    onDragLeave: v,
-    onTouchEnd: no,
-    onTouchMove: so,
-    onTouchStart: to,
-    ref: co,
-    tabIndex: r ? -1 : S,
-    type: D,
-    ...m,
-    ...d,
-    children: [R, X ? /* @__PURE__ */ F.jsx(fo, {
-      ref: Q,
-      center: B,
-      ...G
-    }) : null]
-  });
-});
-function s(y, l, u, i = !1) {
-  return x((c) => (u && u(c), i || y[l](c), !0));
+    return a;
+  }
+  const o = ({
+    color: t,
+    name: a,
+    mainShade: n = 500,
+    lightShade: M = 300,
+    darkShade: A = 700
+  }) => {
+    if (t = {
+      ...t
+    }, !t.main && t[n] && (t.main = t[n]), !t.hasOwnProperty("main"))
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${a ? ` (${a})` : ""} provided to augmentColor(color) is invalid.
+The color object needs to have a \`main\` property or a \`${n}\` property.` : v(11, a ? ` (${a})` : "", n));
+    if (typeof t.main != "string")
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${a ? ` (${a})` : ""} provided to augmentColor(color) is invalid.
+\`color.main\` should be a string, but \`${JSON.stringify(t.main)}\` was provided instead.
+
+Did you intend to use one of the following approaches?
+
+import { green } from "@mui/material/colors";
+
+const theme1 = createTheme({ palette: {
+  primary: green,
+} });
+
+const theme2 = createTheme({ palette: {
+  primary: { main: green[500] },
+} });` : v(12, a ? ` (${a})` : "", JSON.stringify(t.main)));
+    return O(t, "light", M, i), O(t, "dark", A, i), t.contrastText || (t.contrastText = b(t.main)), t;
+  };
+  let p;
+  return e === "light" ? p = D() : e === "dark" && (p = E()), process.env.NODE_ENV !== "production" && (p || console.error(`MUI: The palette mode \`${e}\` is not supported.`)), P({
+    // A collection of common colors.
+    common: {
+      ...l
+    },
+    // prevent mutable object.
+    // The palette mode, can be light or dark.
+    mode: e,
+    // The colors used to represent primary interface elements for a user.
+    primary: o({
+      color: y,
+      name: "primary"
+    }),
+    // The colors used to represent secondary interface elements for a user.
+    secondary: o({
+      color: T,
+      name: "secondary",
+      mainShade: "A400",
+      lightShade: "A200",
+      darkShade: "A700"
+    }),
+    // The colors used to represent interface elements that the user should be made aware of.
+    error: o({
+      color: $,
+      name: "error"
+    }),
+    // The colors used to represent potentially dangerous actions or important messages.
+    warning: o({
+      color: C,
+      name: "warning"
+    }),
+    // The colors used to present information to the user that is neutral and not necessarily important.
+    info: o({
+      color: x,
+      name: "info"
+    }),
+    // The colors used to indicate the successful completion of an action that user triggered.
+    success: o({
+      color: N,
+      name: "success"
+    }),
+    // The grey colors.
+    grey: I,
+    // Used by `getContrastText()` to maximize the contrast between
+    // the background and the text.
+    contrastThreshold: u,
+    // Takes a background color and returns the text color that maximizes the contrast.
+    getContrastText: b,
+    // Generate a rich color object.
+    augmentColor: o,
+    // Used by the functions below to shift a color's luminance by approximately
+    // two indexes within its tonal palette.
+    // E.g., shift from Red 500 to Red 300 or Red 700.
+    tonalOffset: i,
+    // The light and dark mode object.
+    ...p
+  }, h);
 }
-process.env.NODE_ENV !== "production" && (Bo.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
-   */
-  action: Mo,
-  /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
-   */
-  centerRipple: o.bool,
-  /**
-   * The content of the component.
-   */
-  children: o.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: o.object,
-  /**
-   * @ignore
-   */
-  className: o.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: go,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: o.bool,
-  /**
-   * If `true`, the ripple effect is disabled.
-   *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
-   */
-  disableRipple: o.bool,
-  /**
-   * If `true`, the touch ripple effect is disabled.
-   * @default false
-   */
-  disableTouchRipple: o.bool,
-  /**
-   * If `true`, the base button will have a keyboard focus ripple.
-   * @default false
-   */
-  focusRipple: o.bool,
-  /**
-   * This prop can help identify which element has keyboard focus.
-   * The class name will be applied when the element gains the focus through keyboard interaction.
-   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
-   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
-   * if needed.
-   */
-  focusVisibleClassName: o.string,
-  /**
-   * @ignore
-   */
-  href: o.any,
-  /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
-   */
-  LinkComponent: o.elementType,
-  /**
-   * @ignore
-   */
-  onBlur: o.func,
-  /**
-   * @ignore
-   */
-  onClick: o.func,
-  /**
-   * @ignore
-   */
-  onContextMenu: o.func,
-  /**
-   * @ignore
-   */
-  onDragLeave: o.func,
-  /**
-   * @ignore
-   */
-  onFocus: o.func,
-  /**
-   * Callback fired when the component is focused with a keyboard.
-   * We trigger a `onFocus` callback too.
-   */
-  onFocusVisible: o.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: o.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: o.func,
-  /**
-   * @ignore
-   */
-  onMouseDown: o.func,
-  /**
-   * @ignore
-   */
-  onMouseLeave: o.func,
-  /**
-   * @ignore
-   */
-  onMouseUp: o.func,
-  /**
-   * @ignore
-   */
-  onTouchEnd: o.func,
-  /**
-   * @ignore
-   */
-  onTouchMove: o.func,
-  /**
-   * @ignore
-   */
-  onTouchStart: o.func,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
-  /**
-   * @default 0
-   */
-  tabIndex: o.number,
-  /**
-   * Props applied to the `TouchRipple` element.
-   */
-  TouchRippleProps: o.object,
-  /**
-   * A ref that points to the `TouchRipple` element.
-   */
-  touchRippleRef: o.oneOfType([o.func, o.shape({
-    current: o.shape({
-      pulsate: o.func.isRequired,
-      start: o.func.isRequired,
-      stop: o.func.isRequired
-    })
-  })]),
-  /**
-   * @ignore
-   */
-  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
-});
 export {
-  xo as ButtonBaseRoot,
-  Bo as default
+  w as dark,
+  tr as default,
+  V as light
 };
 //# sourceMappingURL=ui-components.es203.js.map