@weng-lab/ui-components 2.1.1 → 2.2.0

package/dist/ui-components.es149.js

@@ -1,348 +1,314 @@
-import * as h from "react";
-import o from "./ui-components.es85.js";
-import { clsx as po } from "./ui-components.es84.js";
-import fo from "./ui-components.es305.js";
-import bo, { getButtonBaseUtilityClass as mo } from "./ui-components.es306.js";
-import { j as U } from "./ui-components.es13.js";
-import { useDefaultProps as ho } from "./ui-components.es89.js";
-import yo from "./ui-components.es307.js";
-import A from "./ui-components.es144.js";
-import x from "./ui-components.es181.js";
-import K from "./ui-components.es185.js";
-import Ro from "./ui-components.es90.js";
-import To from "./ui-components.es42.js";
-import go from "./ui-components.es147.js";
-import Mo from "./ui-components.es126.js";
-const Co = (y) => {
+import * as J from "react";
+import e from "./ui-components.es87.js";
+import K from "./ui-components.es138.js";
+import Q from "./ui-components.es129.js";
+import { getSwitchBaseUtilityClass as W } from "./ui-components.es261.js";
+import k from "./ui-components.es122.js";
+import { j as w } from "./ui-components.es15.js";
+import X from "./ui-components.es162.js";
+import Y from "./ui-components.es119.js";
+import Z from "./ui-components.es92.js";
+import R from "./ui-components.es34.js";
+import ee from "./ui-components.es144.js";
+import oe from "./ui-components.es136.js";
+const te = (r) => {
   const {
-    disabled: p,
-    focusVisible: i,
-    focusVisibleClassName: u,
-    classes: c
-  } = y, R = Ro({
-    root: ["root", p && "disabled", i && "focusVisible"]
-  }, mo, c);
-  return i && u && (R.root += ` ${u}`), R;
-}, xo = To("button", {
-  name: "MuiButtonBase",
-  slot: "Root"
+    classes: s,
+    checked: c,
+    disabled: d,
+    edge: i
+  } = r, p = {
+    root: ["root", c && "checked", d && "disabled", i && `edge${Y(i)}`],
+    input: ["input"]
+  };
+  return Z(p, W, s);
+}, se = R(ee, {
+  name: "MuiSwitchBase"
 })({
-  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,
+  padding: 9,
+  borderRadius: "50%",
+  variants: [{
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: ({
+      edge: r,
+      ownerState: s
+    }) => r === "start" && s.size !== "small",
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }, {
+    props: ({
+      edge: r,
+      ownerState: s
+    }) => r === "end" && s.size !== "small",
+    style: {
+      marginRight: -12
+    }
+  }]
+}), ne = R("input", {
+  name: "MuiSwitchBase",
+  shouldForwardProp: K
+})({
+  cursor: "inherit",
+  position: "absolute",
+  opacity: 0,
+  width: "100%",
+  height: "100%",
+  top: 0,
+  left: 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(p, i) {
-  const u = ho({
-    props: p,
-    name: "MuiButtonBase"
-  }), {
-    action: c,
-    centerRipple: B = !1,
-    children: R,
-    className: O,
-    component: T = "button",
-    disabled: r = !1,
-    disableRipple: g = !1,
-    disableTouchRipple: n = !1,
-    focusRipple: f = !1,
-    focusVisibleClassName: Do,
-    LinkComponent: P = "a",
-    onBlur: V,
-    onClick: d,
-    onContextMenu: I,
-    onDragLeave: z,
-    onFocus: w,
-    onFocusVisible: E,
-    onKeyDown: L,
-    onKeyUp: N,
-    onMouseDown: q,
-    onMouseLeave: j,
-    onMouseUp: H,
-    onTouchEnd: W,
-    onTouchMove: $,
-    onTouchStart: _,
-    tabIndex: F = 0,
-    TouchRippleProps: G,
-    touchRippleRef: J,
-    type: D,
-    ...l
-  } = u, b = h.useRef(null), t = yo(), Q = A(t.ref, J), [a, M] = h.useState(!1);
-  r && a && M(!1), h.useImperativeHandle(c, () => ({
-    focusVisible: () => {
-      M(!0), b.current.focus();
+  zIndex: 1
+}), re = /* @__PURE__ */ J.forwardRef(function(s, c) {
+  const {
+    autoFocus: d,
+    checked: i,
+    checkedIcon: p,
+    defaultChecked: f,
+    disabled: C,
+    disableFocusRipple: m = !1,
+    edge: x = !1,
+    icon: T,
+    id: j,
+    inputProps: I,
+    inputRef: O,
+    name: z,
+    onBlur: h,
+    onChange: b,
+    onFocus: g,
+    readOnly: y,
+    required: q = !1,
+    tabIndex: N,
+    type: a,
+    value: P,
+    slots: E = {},
+    slotProps: L = {},
+    ...M
+  } = s, [F, U] = X({
+    controlled: i,
+    default: !!f,
+    name: "SwitchBase",
+    state: "checked"
+  }), n = Q(), v = (o) => {
+    g && g(o), n && n.onFocus && n.onFocus(o);
+  }, D = (o) => {
+    h && h(o), n && n.onBlur && n.onBlur(o);
+  }, V = (o) => {
+    if (o.nativeEvent.defaultPrevented || y)
+      return;
+    const t = o.target.checked;
+    U(t), b && b(o, t);
+  };
+  let l = C;
+  n && typeof l > "u" && (l = n.disabled);
+  const _ = a === "checkbox" || a === "radio", u = {
+    ...s,
+    checked: F,
+    disabled: l,
+    disableFocusRipple: m,
+    edge: x
+  }, B = te(u), S = {
+    slots: E,
+    slotProps: {
+      input: I,
+      ...L
+    }
+  }, [$, A] = k("root", {
+    ref: c,
+    elementType: se,
+    className: B.root,
+    shouldForwardComponentProp: !0,
+    externalForwardedProps: {
+      ...S,
+      component: "span",
+      ...M
+    },
+    getSlotProps: (o) => ({
+      ...o,
+      onFocus: (t) => {
+        o.onFocus?.(t), v(t);
+      },
+      onBlur: (t) => {
+        o.onBlur?.(t), D(t);
+      }
+    }),
+    ownerState: u,
+    additionalProps: {
+      centerRipple: !0,
+      focusRipple: !m,
+      role: void 0,
+      tabIndex: null
+    }
+  }), [G, H] = k("input", {
+    ref: O,
+    elementType: ne,
+    className: B.input,
+    externalForwardedProps: S,
+    getSlotProps: (o) => ({
+      ...o,
+      onChange: (t) => {
+        o.onChange?.(t), V(t);
+      }
+    }),
+    ownerState: u,
+    additionalProps: {
+      autoFocus: d,
+      checked: i,
+      defaultChecked: f,
+      disabled: l,
+      id: _ ? j : void 0,
+      name: z,
+      readOnly: y,
+      required: q,
+      tabIndex: N,
+      type: a,
+      ...a === "checkbox" && P === void 0 ? {} : {
+        value: P
+      }
     }
-  }), []);
-  const X = t.shouldMount && !g && !r;
-  h.useEffect(() => {
-    a && f && !g && t.pulsate();
-  }, [g, f, 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) => {
-    K(e.target) || M(!1), V && V(e);
-  }, !1), io = x((e) => {
-    b.current || (b.current = e.currentTarget), K(e.target) && (M(!0), E && E(e)), w && w(e);
-  }), k = () => {
-    const e = b.current;
-    return T && T !== "button" && !(e.tagName === "A" && e.href);
-  }, uo = x((e) => {
-    f && !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(), d && d(e));
-  }), ao = x((e) => {
-    f && e.key === " " && a && !e.defaultPrevented && t.stop(e, () => {
-      t.pulsate(e);
-    }), N && N(e), d && e.target === e.currentTarget && k() && e.key === " " && !e.defaultPrevented && d(e);
   });
-  let C = T;
-  C === "button" && (l.href || l.to) && (C = P);
-  const m = {};
-  if (C === "button") {
-    const e = !!l.formAction;
-    m.type = D === void 0 && !e ? "button" : D, m.disabled = r;
-  } else
-    !l.href && !l.to && (m.role = "button"), r && (m["aria-disabled"] = r);
-  const co = A(i, b), S = {
-    ...u,
-    centerRipple: B,
-    component: T,
-    disabled: r,
-    disableRipple: g,
-    disableTouchRipple: n,
-    focusRipple: f,
-    tabIndex: F,
-    focusVisible: a
-  }, lo = Co(S);
-  return /* @__PURE__ */ U.jsxs(xo, {
-    as: C,
-    className: po(lo.root, O),
-    ownerState: S,
-    onBlur: ro,
-    onClick: d,
-    onContextMenu: Z,
-    onFocus: io,
-    onKeyDown: uo,
-    onKeyUp: ao,
-    onMouseDown: Y,
-    onMouseLeave: eo,
-    onMouseUp: oo,
-    onDragLeave: v,
-    onTouchEnd: no,
-    onTouchMove: so,
-    onTouchStart: to,
-    ref: co,
-    tabIndex: r ? -1 : F,
-    type: D,
-    ...m,
-    ...l,
-    children: [R, X ? /* @__PURE__ */ U.jsx(fo, {
-      ref: Q,
-      center: B,
-      ...G
-    }) : null]
+  return /* @__PURE__ */ w.jsxs($, {
+    ...A,
+    children: [/* @__PURE__ */ w.jsx(G, {
+      ...H
+    }), F ? p : T]
   });
 });
-function s(y, p, i, u = !1) {
-  return x((c) => (i && i(c), u || y[p](c), !0));
-}
-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`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
+process.env.NODE_ENV !== "production" && (re.propTypes = {
   /**
-   * A ref for imperative actions.
-   * It currently only supports `focusVisible()` action.
+   * If `true`, the `input` element is focused during the first mount.
    */
-  action: Mo,
+  autoFocus: e.bool,
   /**
-   * If `true`, the ripples are centered.
-   * They won't start at the cursor interaction position.
-   * @default false
+   * If `true`, the component is checked.
    */
-  centerRipple: o.bool,
+  checked: e.bool,
   /**
-   * The content of the component.
+   * The icon to display when the component is checked.
    */
-  children: o.node,
+  checkedIcon: e.node.isRequired,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: o.object,
+  classes: e.object,
   /**
    * @ignore
    */
-  className: o.string,
+  className: e.string,
   /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
+   * @ignore
    */
-  component: go,
+  defaultChecked: e.bool,
   /**
    * If `true`, the component is disabled.
-   * @default false
    */
-  disabled: o.bool,
+  disabled: e.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.
+   * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableRipple: o.bool,
+  disableFocusRipple: e.bool,
   /**
-   * If `true`, the touch ripple effect is disabled.
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
    * @default false
    */
-  disableTouchRipple: o.bool,
+  edge: e.oneOf(["end", "start", !1]),
   /**
-   * 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.
+   * The icon to display when the component is unchecked.
    */
-  focusVisibleClassName: o.string,
+  icon: e.node.isRequired,
   /**
-   * @ignore
+   * The id of the `input` element.
    */
-  formAction: o.oneOfType([o.func, o.string]),
+  id: e.string,
   /**
-   * @ignore
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    */
-  href: o.any,
+  inputProps: e.object,
   /**
-   * The component used to render a link when the `href` prop is provided.
-   * @default 'a'
+   * Pass a ref to the `input` element.
    */
-  LinkComponent: o.elementType,
-  /**
+  inputRef: oe,
+  /*
    * @ignore
    */
-  onBlur: o.func,
+  name: e.string,
   /**
    * @ignore
    */
-  onClick: o.func,
+  onBlur: e.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
+   * Callback fired when the state is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
-  onMouseDown: o.func,
+  onChange: e.func,
   /**
    * @ignore
    */
-  onMouseLeave: o.func,
+  onFocus: e.func,
   /**
-   * @ignore
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
    */
-  onMouseUp: o.func,
+  readOnly: e.bool,
   /**
-   * @ignore
+   * If `true`, the `input` element is required.
    */
-  onTouchEnd: o.func,
+  required: e.bool,
   /**
-   * @ignore
+   * The props used for each slot inside.
+   * @default {}
    */
-  onTouchMove: o.func,
+  slotProps: e.shape({
+    input: e.oneOfType([e.func, e.object]),
+    root: e.oneOfType([e.func, e.object])
+  }),
   /**
-   * @ignore
+   * The components used for each slot inside.
+   * @default {}
    */
-  onTouchStart: o.func,
+  slots: e.shape({
+    input: e.elementType,
+    root: e.elementType
+  }),
   /**
    * 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,
+  sx: e.object,
   /**
-   * Props applied to the `TouchRipple` element.
+   * @ignore
    */
-  TouchRippleProps: o.object,
+  tabIndex: e.oneOfType([e.number, e.string]),
   /**
-   * A ref that points to the `TouchRipple` element.
+   * The input component prop `type`.
    */
-  touchRippleRef: o.oneOfType([o.func, o.shape({
-    current: o.shape({
-      pulsate: o.func.isRequired,
-      start: o.func.isRequired,
-      stop: o.func.isRequired
-    })
-  })]),
+  type: e.string.isRequired,
   /**
-   * @ignore
+   * The value of the component.
    */
-  type: o.oneOfType([o.oneOf(["button", "reset", "submit"]), o.string])
+  value: e.any
 });
 export {
-  xo as ButtonBaseRoot,
-  Bo as default
+  re as default
 };
 //# sourceMappingURL=ui-components.es149.js.map