@hybridcore/ui 1.6.0 → 1.6.2

package/dist/TextField-e2oKaUN1.js

@@ -0,0 +1,669 @@
+import { a as l, _ as V } from "./objectWithoutPropertiesLoose-DJteAcBH.js";
+import * as p from "react";
+import { P as e } from "./index-C__OZmYy.js";
+import { c as D } from "./clsx-OuTLNxxd.js";
+import { a as A, g as k, s as G, b as W, u as J, c as K } from "./generateUtilityClasses-C3ivN9Ie.js";
+import { jsx as F, jsxs as de } from "react/jsx-runtime";
+import { i as ue, a as ee, S as ce, I as pe, F as fe, O as me } from "./Select-DHUl_uG3.js";
+import { F as be, u as ge } from "./useFormControl-CatNKXAi.js";
+import { i as U } from "./unsupportedProp-DuqR2hj9.js";
+import { u as he } from "./useId-BW-oWmul.js";
+import { I as Te } from "./InputLabel-Dd8RrneV.js";
+import { f as Fe } from "./formControlState-vgaj2ksH.js";
+import { r as ye } from "./TransitionGroupContext-BDAp2T0O.js";
+function ve(o) {
+  return A("MuiFormControl", o);
+}
+k("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
+const xe = ["children", "className", "color", "component", "disabled", "error", "focused", "fullWidth", "hiddenLabel", "margin", "required", "size", "variant"], Ce = (o) => {
+  const {
+    classes: r,
+    margin: s,
+    fullWidth: t
+  } = o, i = {
+    root: ["root", s !== "none" && `margin${W(s)}`, t && "fullWidth"]
+  };
+  return K(i, ve, r);
+}, Oe = G("div", {
+  name: "MuiFormControl",
+  slot: "Root",
+  overridesResolver: ({
+    ownerState: o
+  }, r) => l({}, r.root, r[`margin${W(o.margin)}`], o.fullWidth && r.fullWidth)
+})(({
+  ownerState: o
+}) => l({
+  display: "inline-flex",
+  flexDirection: "column",
+  position: "relative",
+  // Reset fieldset default style.
+  minWidth: 0,
+  padding: 0,
+  margin: 0,
+  border: 0,
+  verticalAlign: "top"
+}, o.margin === "normal" && {
+  marginTop: 16,
+  marginBottom: 8
+}, o.margin === "dense" && {
+  marginTop: 8,
+  marginBottom: 4
+}, o.fullWidth && {
+  width: "100%"
+})), te = /* @__PURE__ */ p.forwardRef(function(r, s) {
+  const t = J({
+    props: r,
+    name: "MuiFormControl"
+  }), {
+    children: i,
+    className: f,
+    color: u = "primary",
+    component: m = "div",
+    disabled: a = !1,
+    error: n = !1,
+    focused: b,
+    fullWidth: g = !1,
+    hiddenLabel: C = !1,
+    margin: O = "none",
+    required: y = !1,
+    size: R = "medium",
+    variant: h = "outlined"
+  } = t, q = V(t, xe), S = l({}, t, {
+    color: u,
+    component: m,
+    disabled: a,
+    error: n,
+    fullWidth: g,
+    hiddenLabel: C,
+    margin: O,
+    required: y,
+    size: R,
+    variant: h
+  }), H = Ce(S), [T, _] = p.useState(() => {
+    let d = !1;
+    return i && p.Children.forEach(i, (c) => {
+      if (!U(c, ["Input", "Select"]))
+        return;
+      const v = U(c, ["Select"]) ? c.props.input : c;
+      v && ue(v.props) && (d = !0);
+    }), d;
+  }), [j, I] = p.useState(() => {
+    let d = !1;
+    return i && p.Children.forEach(i, (c) => {
+      U(c, ["Input", "Select"]) && (ee(c.props, !0) || ee(c.props.inputProps, !0)) && (d = !0);
+    }), d;
+  }), [M, N] = p.useState(!1);
+  a && M && N(!1);
+  const z = b !== void 0 && !a ? b : M;
+  let w;
+  if (process.env.NODE_ENV !== "production") {
+    const d = p.useRef(!1);
+    w = () => (d.current && console.error(["MUI: There are multiple `InputBase` components inside a FormControl.", "This creates visual inconsistencies, only use one `InputBase`."].join(`
+`)), d.current = !0, () => {
+      d.current = !1;
+    });
+  }
+  const $ = p.useMemo(() => ({
+    adornedStart: T,
+    setAdornedStart: _,
+    color: u,
+    disabled: a,
+    error: n,
+    filled: j,
+    focused: z,
+    fullWidth: g,
+    hiddenLabel: C,
+    size: R,
+    onBlur: () => {
+      N(!1);
+    },
+    onEmpty: () => {
+      I(!1);
+    },
+    onFilled: () => {
+      I(!0);
+    },
+    onFocus: () => {
+      N(!0);
+    },
+    registerEffect: w,
+    required: y,
+    variant: h
+  }), [T, u, a, n, j, z, g, C, w, y, R, h]);
+  return /* @__PURE__ */ F(be.Provider, {
+    value: $,
+    children: /* @__PURE__ */ F(Oe, l({
+      as: m,
+      ownerState: S,
+      className: D(H.root, f),
+      ref: s
+    }, q, {
+      children: i
+    }))
+  });
+});
+process.env.NODE_ENV !== "production" && (te.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the label, input and helper text should be displayed in a disabled state.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: e.bool,
+  /**
+   * If `true`, the component will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: e.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: e.bool,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: e.oneOf(["dense", "none", "normal"]),
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: e.bool,
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+function Re(o) {
+  return A("MuiFormHelperText", o);
+}
+const oe = k("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
+var re;
+const Ie = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"], Ne = (o) => {
+  const {
+    classes: r,
+    contained: s,
+    size: t,
+    disabled: i,
+    error: f,
+    filled: u,
+    focused: m,
+    required: a
+  } = o, n = {
+    root: ["root", i && "disabled", f && "error", t && `size${W(t)}`, s && "contained", m && "focused", u && "filled", a && "required"]
+  };
+  return K(n, Re, r);
+}, we = G("p", {
+  name: "MuiFormHelperText",
+  slot: "Root",
+  overridesResolver: (o, r) => {
+    const {
+      ownerState: s
+    } = o;
+    return [r.root, s.size && r[`size${W(s.size)}`], s.contained && r.contained, s.filled && r.filled];
+  }
+})(({
+  theme: o,
+  ownerState: r
+}) => l({
+  color: (o.vars || o).palette.text.secondary
+}, o.typography.caption, {
+  textAlign: "left",
+  marginTop: 3,
+  marginRight: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  [`&.${oe.disabled}`]: {
+    color: (o.vars || o).palette.text.disabled
+  },
+  [`&.${oe.error}`]: {
+    color: (o.vars || o).palette.error.main
+  }
+}, r.size === "small" && {
+  marginTop: 4
+}, r.contained && {
+  marginLeft: 14,
+  marginRight: 14
+})), ne = /* @__PURE__ */ p.forwardRef(function(r, s) {
+  const t = J({
+    props: r,
+    name: "MuiFormHelperText"
+  }), {
+    children: i,
+    className: f,
+    component: u = "p"
+  } = t, m = V(t, Ie), a = ge(), n = Fe({
+    props: t,
+    muiFormControl: a,
+    states: ["variant", "size", "disabled", "error", "filled", "focused", "required"]
+  }), b = l({}, t, {
+    component: u,
+    contained: n.variant === "filled" || n.variant === "outlined",
+    variant: n.variant,
+    size: n.size,
+    disabled: n.disabled,
+    error: n.error,
+    filled: n.filled,
+    focused: n.focused,
+    required: n.required
+  }), g = Ne(b);
+  return /* @__PURE__ */ F(we, l({
+    as: u,
+    ownerState: b,
+    className: D(g.root, f),
+    ref: s
+  }, m, {
+    children: i === " " ? (
+      // notranslate needed while Google Translate will not fix zero-width space issue
+      re || (re = /* @__PURE__ */ F("span", {
+        className: "notranslate",
+        children: "​"
+      }))
+    ) : i
+  }));
+});
+process.env.NODE_ENV !== "production" && (ne.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: e.elementType,
+  /**
+   * If `true`, the helper text should be displayed in a disabled state.
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, helper text should be displayed in an error state.
+   */
+  error: e.bool,
+  /**
+   * If `true`, the helper text should use filled classes key.
+   */
+  filled: e.bool,
+  /**
+   * If `true`, the helper text should use focused classes key.
+   */
+  focused: e.bool,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   */
+  margin: e.oneOf(["dense"]),
+  /**
+   * If `true`, the helper text should use required classes key.
+   */
+  required: e.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The variant to use.
+   */
+  variant: e.oneOfType([e.oneOf(["filled", "outlined", "standard"]), e.string])
+});
+function Pe(o) {
+  return A("MuiTextField", o);
+}
+k("MuiTextField", ["root"]);
+const Se = ["autoComplete", "autoFocus", "children", "className", "color", "defaultValue", "disabled", "error", "FormHelperTextProps", "fullWidth", "helperText", "id", "InputLabelProps", "inputProps", "InputProps", "inputRef", "label", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onFocus", "placeholder", "required", "rows", "select", "SelectProps", "type", "value", "variant"], je = {
+  standard: pe,
+  filled: fe,
+  outlined: me
+}, Me = (o) => {
+  const {
+    classes: r
+  } = o;
+  return K({
+    root: ["root"]
+  }, Pe, r);
+}, ze = G(te, {
+  name: "MuiTextField",
+  slot: "Root",
+  overridesResolver: (o, r) => r.root
+})({}), Ee = /* @__PURE__ */ p.forwardRef(function(r, s) {
+  const t = J({
+    props: r,
+    name: "MuiTextField"
+  }), {
+    autoComplete: i,
+    autoFocus: f = !1,
+    children: u,
+    className: m,
+    color: a = "primary",
+    defaultValue: n,
+    disabled: b = !1,
+    error: g = !1,
+    FormHelperTextProps: C,
+    fullWidth: O = !1,
+    helperText: y,
+    id: R,
+    InputLabelProps: h,
+    inputProps: q,
+    InputProps: S,
+    inputRef: H,
+    label: T,
+    maxRows: _,
+    minRows: j,
+    multiline: I = !1,
+    name: M,
+    onBlur: N,
+    onChange: z,
+    onFocus: w,
+    placeholder: $,
+    required: d = !1,
+    rows: c,
+    select: v = !1,
+    SelectProps: B,
+    type: se,
+    value: Q,
+    variant: E = "outlined"
+  } = t, ie = V(t, Se), X = l({}, t, {
+    autoFocus: f,
+    color: a,
+    disabled: b,
+    error: g,
+    fullWidth: O,
+    multiline: I,
+    required: d,
+    select: v,
+    variant: E
+  }), le = Me(X);
+  process.env.NODE_ENV !== "production" && v && !u && console.error("MUI: `children` must be passed when using the `TextField` component with `select`.");
+  const P = {};
+  E === "outlined" && (h && typeof h.shrink < "u" && (P.notched = h.shrink), P.label = T), v && ((!B || !B.native) && (P.id = void 0), P["aria-describedby"] = void 0);
+  const x = he(R), L = y && x ? `${x}-helper-text` : void 0, Y = T && x ? `${x}-label` : void 0, ae = je[E], Z = /* @__PURE__ */ F(ae, l({
+    "aria-describedby": L,
+    autoComplete: i,
+    autoFocus: f,
+    defaultValue: n,
+    fullWidth: O,
+    multiline: I,
+    name: M,
+    rows: c,
+    maxRows: _,
+    minRows: j,
+    type: se,
+    value: Q,
+    id: x,
+    inputRef: H,
+    onBlur: N,
+    onChange: z,
+    onFocus: w,
+    placeholder: $,
+    inputProps: q
+  }, P, S));
+  return /* @__PURE__ */ de(ze, l({
+    className: D(le.root, m),
+    disabled: b,
+    error: g,
+    fullWidth: O,
+    ref: s,
+    required: d,
+    color: a,
+    variant: E,
+    ownerState: X
+  }, ie, {
+    children: [T != null && T !== "" && /* @__PURE__ */ F(Te, l({
+      htmlFor: x,
+      id: Y
+    }, h, {
+      children: T
+    })), v ? /* @__PURE__ */ F(ce, l({
+      "aria-describedby": L,
+      id: x,
+      labelId: Y,
+      value: Q,
+      input: Z
+    }, B, {
+      children: u
+    })) : Z, y && /* @__PURE__ */ F(ne, l({
+      id: L
+    }, C, {
+      children: y
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" && (Ee.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: e.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   * @default false
+   */
+  autoFocus: e.bool,
+  /**
+   * @ignore
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: e.oneOfType([e.oneOf(["primary", "secondary", "error", "info", "success", "warning"]), e.string]),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: e.any,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  error: e.bool,
+  /**
+   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   */
+  FormHelperTextProps: e.object,
+  /**
+   * If `true`, the input will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: e.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: e.node,
+  /**
+   * The id of the `input` element.
+   * Use this prop to make `label` and `helperText` accessible for screen readers.
+   */
+  id: e.string,
+  /**
+   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   */
+  InputLabelProps: e.object,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   */
+  inputProps: e.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: e.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: ye,
+  /**
+   * The label content.
+   */
+  label: e.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: e.oneOf(["dense", "none", "normal"]),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: e.oneOfType([e.number, e.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: e.oneOfType([e.number, e.string]),
+  /**
+   * If `true`, a `textarea` element is rendered instead of an input.
+   * @default false
+   */
+  multiline: e.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: e.string,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {object} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: e.string,
+  /**
+   * If `true`, the label is displayed as required and the `input` element is required.
+   * @default false
+   */
+  required: e.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: e.oneOfType([e.number, e.string]),
+  /**
+   * Render a [`Select`](/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
+   * If this option is set you must pass the options of the select as children.
+   * @default false
+   */
+  select: e.bool,
+  /**
+   * Props applied to the [`Select`](/material-ui/api/select/) element.
+   */
+  SelectProps: e.object,
+  /**
+   * The size of the component.
+   */
+  size: e.oneOfType([e.oneOf(["medium", "small"]), e.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
+   */
+  type: e.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: e.any,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: e.oneOf(["filled", "outlined", "standard"])
+});
+export {
+  te as F,
+  Ee as T
+};