@purpur/library 9.0.10 → 9.1.0

package/dist/search-field-CWqLnqdo.mjs

@@ -1,91 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as q } from "react";
-import { s as h } from "./search.es-DoFKg2Hr.mjs";
-import { T as v } from "./text-field-BMDf8j-K.mjs";
-import { c as f } from "./bind-CU-R61T-.mjs";
-import { b as _ } from "./button-Cv7NlYbv.mjs";
-const N = {
-  "purpur-search-field": "_purpur-search-field_uhpkq_1",
-  "purpur-search-field--has-clear-button": "_purpur-search-field--has-clear-button_uhpkq_4",
-  "purpur-search-field--no-gap": "_purpur-search-field--no-gap_uhpkq_13",
-  "purpur-search-field__wrapper": "_purpur-search-field__wrapper_uhpkq_17",
-  "purpur-search-field__wrapper--gap": "_purpur-search-field__wrapper--gap_uhpkq_20",
-  "purpur-search-field__search-icon": "_purpur-search-field__search-icon_uhpkq_24",
-  "purpur-search-field__close-icon": "_purpur-search-field__close-icon_uhpkq_24"
-}, w = {
-  "purpur-search-field-button": "_purpur-search-field-button_c16yo_1",
-  "purpur-search-field-button--icon-only": "_purpur-search-field-button--icon-only_c16yo_1"
-}, F = f.bind(w), d = "purpur-search-field-button", z = ({
-  ["data-testid"]: a,
-  disabled: p,
-  iconOnly: o,
-  label: e
-}) => {
-  const s = {
-    className: F(d, {
-      [`${d}--icon-only`]: o
-    }),
-    disabled: p,
-    "data-testid": a
-  };
-  return o ? /* @__PURE__ */ r(_, { ...s, "aria-label": e, iconOnly: !0, size: "sm", type: "submit", variant: "primary", children: /* @__PURE__ */ r(h, { size: "xs" }) }) : /* @__PURE__ */ r(_, { ...s, size: "sm", type: "submit", variant: "primary", children: e });
-}, R = ["button-attached", "no-button"], i = f.bind(N), u = "purpur-search-field", S = q(
-  ({
-    ["data-testid"]: a,
-    className: p,
-    clearButtonAriaLabel: o,
-    disabled: e,
-    iconOnlySearchButton: s,
-    onClear: m,
-    onSearch: b,
-    searchButtonLabel: y,
-    variant: n,
-    formRef: $,
-    ...t
-  }, g) => {
-    const l = (c) => a ? `${a}-${c}` : void 0, x = (typeof t.value == "number" ? t.value !== void 0 : t.value?.length) && !e && !t.readOnly && !t.loading, k = i(p, u, {
-      [`${u}--no-gap`]: n === "button-attached",
-      [`${u}--has-clear-button`]: x
-    });
-    return /* @__PURE__ */ r(
-      "form",
-      {
-        ref: $,
-        className: i(`${u}__wrapper`),
-        "data-testid": a,
-        onSubmit: (c) => {
-          c.preventDefault(), b?.(c);
-        },
-        children: /* @__PURE__ */ r(
-          v,
-          {
-            ref: g,
-            className: k,
-            clearButtonAriaLabel: o,
-            disabled: e,
-            onClear: m,
-            startAdornment: s ? null : /* @__PURE__ */ r(h, { size: "xs", className: i(`${u}__search-icon`) }, "1"),
-            afterField: n !== "no-button" ? /* @__PURE__ */ r(
-              z,
-              {
-                disabled: e,
-                iconOnly: s,
-                label: y,
-                "data-testid": l("button")
-              }
-            ) : null,
-            "data-testid": l("text-field"),
-            type: "search",
-            ...t
-          }
-        )
-      }
-    );
-  }
-);
-S.displayName = "SearchField";
-export {
-  S,
-  R as s
-};
-//# sourceMappingURL=search-field-CWqLnqdo.mjs.map

package/dist/search-field-CWqLnqdo.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"search-field-CWqLnqdo.mjs","sources":["../../../components/search-field/src/search-field-button.tsx","../../../components/search-field/src/search-field.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@purpur/button\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field-button.module.scss\";\n\ntype Props = {\n  [\"data-testid\"]?: string;\n  disabled?: boolean;\n  iconOnly?: boolean;\n  label: string;\n};\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field-button\";\n\nexport const SearchFieldButton = ({\n  [\"data-testid\"]: dataTestid,\n  disabled,\n  iconOnly,\n  label,\n}: Props) => {\n  const props = {\n    className: cx(rootClassName, {\n      [`${rootClassName}--icon-only`]: iconOnly,\n    }),\n    disabled,\n    [\"data-testid\"]: dataTestid,\n  };\n\n  if (iconOnly) {\n    return (\n      <Button {...props} aria-label={label} iconOnly size=\"sm\" type=\"submit\" variant=\"primary\">\n        <IconSearch size=\"xs\" />\n      </Button>\n    );\n  }\n\n  return (\n    <Button {...props} size=\"sm\" type=\"submit\" variant=\"primary\">\n      {label}\n    </Button>\n  );\n};\n","import React, { type ChangeEvent, type FormEvent, forwardRef, type RefObject } from \"react\";\nimport { IconSearch } from \"@purpur/icon/search\";\nimport { TextField, type TextFieldProps } from \"@purpur/text-field\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./search-field.module.scss\";\nimport { SearchFieldButton } from \"./search-field-button\";\n\nexport const searchFieldVariants = [\"button-attached\", \"no-button\"] as const;\n\ntype Variant = (typeof searchFieldVariants)[number];\n\ntype DefaultProps = {\n  [\"data-testid\"]?: string;\n  /**\n   * An accessible label for the clear button.\n   * */\n  clearButtonAriaLabel: string;\n  /**\n   * Disables both the input field and submit button if `true`.\n   * */\n  disabled?: boolean;\n  /**\n   * Will display only a search icon in the search button if `true`.\n   * */\n  iconOnlySearchButton?: boolean;\n  /**\n   * Event handler called when the value of the search field changes.\n   * */\n  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;\n  /**\n   * Event handler called when the clear button is clicked.\n   * */\n  onClear: () => void;\n  /**\n   * Event handler called when the search form is submitted.\n   * */\n  onSearch?: (e: FormEvent<HTMLFormElement>) => void;\n  /**\n   * The label text (or `aria-label` if `iconOnlySearchButton` is `true`) of the search button.\n   * */\n  searchButtonLabel?: string;\n  variant: Variant;\n  formRef?: RefObject<HTMLFormElement>;\n};\n\ntype TextSearchButton = {\n  iconOnlySearchButton?: false;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype IconOnlySearchButton = {\n  iconOnlySearchButton: true;\n  searchButtonLabel: string;\n  variant: \"button-attached\";\n};\n\ntype NoButton = {\n  searchButtonLabel?: never;\n  variant: \"no-button\";\n};\n\nexport type SearchFieldProps = DefaultProps &\n  (TextSearchButton | IconOnlySearchButton | NoButton) &\n  Omit<TextFieldProps, \"startAdornment\" | \"endAdornment\" | \"afterField\" | \"onChange\">;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-search-field\";\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      disabled,\n      iconOnlySearchButton,\n      onClear,\n      onSearch,\n      searchButtonLabel,\n      variant,\n      formRef,\n      ...props\n    },\n    ref\n  ) => {\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const hasValue =\n      typeof props.value === \"number\" ? props.value !== undefined : props.value?.length;\n    const hasClearButton = hasValue && !disabled && !props.readOnly && !props.loading;\n\n    const classes = cx(className, rootClassName, {\n      [`${rootClassName}--no-gap`]: variant === \"button-attached\",\n      [`${rootClassName}--has-clear-button`]: hasClearButton,\n    });\n\n    return (\n      <form\n        ref={formRef}\n        className={cx(`${rootClassName}__wrapper`)}\n        data-testid={dataTestId}\n        onSubmit={(e: FormEvent<HTMLFormElement>) => {\n          e.preventDefault();\n          onSearch?.(e);\n        }}\n      >\n        <TextField\n          ref={ref}\n          className={classes}\n          clearButtonAriaLabel={clearButtonAriaLabel}\n          disabled={disabled}\n          onClear={onClear}\n          startAdornment={\n            !iconOnlySearchButton ? (\n              <IconSearch size=\"xs\" className={cx(`${rootClassName}__search-icon`)} key=\"1\" />\n            ) : null\n          }\n          afterField={\n            variant !== \"no-button\" ? (\n              <SearchFieldButton\n                disabled={disabled}\n                iconOnly={iconOnlySearchButton}\n                label={searchButtonLabel}\n                data-testid={getTestId(\"button\")}\n              />\n            ) : null\n          }\n          data-testid={getTestId(\"text-field\")}\n          type=\"search\"\n          {...props}\n        />\n      </form>\n    );\n  }\n);\n\nSearchField.displayName = \"SearchField\";\n"],"names":["cx","c","styles","rootClassName","SearchFieldButton","dataTestid","disabled","iconOnly","label","props","Button","IconSearch","jsx","searchFieldVariants","SearchField","forwardRef","dataTestId","className","clearButtonAriaLabel","iconOnlySearchButton","onClear","onSearch","searchButtonLabel","variant","formRef","ref","getTestId","name","hasClearButton","classes","e","TextField"],"mappings":";;;;;;;;;;;;;;;;;GAcMA,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,8BAETC,IAAoB,CAAC;AAAA,EAChC,CAAC,gBAAgBC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAAa;AACX,QAAMC,IAAQ;AAAA,IACZ,WAAWT,EAAGG,GAAe;AAAA,MAC3B,CAAC,GAAGA,CAAa,aAAa,GAAGI;AAAA,IAAA,CAClC;AAAA,IACD,UAAAD;AAAA,IACC,eAAgBD;AAAA,EAAA;AAGnB,SAAIE,sBAECG,GAAA,EAAQ,GAAGD,GAAO,cAAYD,GAAO,UAAQ,IAAC,MAAK,MAAK,MAAK,UAAS,SAAQ,WAC7E,4BAACG,GAAA,EAAW,MAAK,MAAK,GACxB,IAKF,gBAAAC,EAACF,GAAA,EAAQ,GAAGD,GAAO,MAAK,MAAK,MAAK,UAAS,SAAQ,WAChD,UAAAD,EAAA,CACH;AAEJ,GCpCaK,IAAsB,CAAC,mBAAmB,WAAW,GA2D5Db,IAAKC,EAAE,KAAKC,CAAM,GAClBC,IAAgB,uBAETW,IAAcC;AAAA,EACzB,CACE;AAAA,IACE,CAAC,gBAAgBC;AAAA,IACjB,WAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,UAAAZ;AAAA,IACA,sBAAAa;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGf;AAAA,EAAA,GAELgB,MACG;AACH,UAAMC,IAAY,CAACC,MAAkBX,IAAa,GAAGA,CAAU,IAAIW,CAAI,KAAK,QAGtEC,KADJ,OAAOnB,EAAM,SAAU,WAAWA,EAAM,UAAU,SAAYA,EAAM,OAAO,WAC1C,CAACH,KAAY,CAACG,EAAM,YAAY,CAACA,EAAM,SAEpEoB,IAAU7B,EAAGiB,GAAWd,GAAe;AAAA,MAC3C,CAAC,GAAGA,CAAa,UAAU,GAAGoB,MAAY;AAAA,MAC1C,CAAC,GAAGpB,CAAa,oBAAoB,GAAGyB;AAAA,IAAA,CACzC;AAED,WACE,gBAAAhB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKY;AAAA,QACL,WAAWxB,EAAG,GAAGG,CAAa,WAAW;AAAA,QACzC,eAAaa;AAAA,QACb,UAAU,CAACc,MAAkC;AAC3C,UAAAA,EAAE,eAAA,GACFT,IAAWS,CAAC;AAAA,QACd;AAAA,QAEA,UAAA,gBAAAlB;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,KAAAN;AAAA,YACA,WAAWI;AAAA,YACX,sBAAAX;AAAA,YACA,UAAAZ;AAAA,YACA,SAAAc;AAAA,YACA,gBACGD,IAEG,OADF,gBAAAP,EAACD,KAAW,MAAK,MAAK,WAAWX,EAAG,GAAGG,CAAa,eAAe,EAAA,GAAO,GAAI;AAAA,YAGlF,YACEoB,MAAY,cACV,gBAAAX;AAAA,cAACR;AAAA,cAAA;AAAA,gBACC,UAAAE;AAAA,gBACA,UAAUa;AAAA,gBACV,OAAOG;AAAA,gBACP,eAAaI,EAAU,QAAQ;AAAA,cAAA;AAAA,YAAA,IAE/B;AAAA,YAEN,eAAaA,EAAU,YAAY;AAAA,YACnC,MAAK;AAAA,YACJ,GAAGjB;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAGN;AACF;AAEAK,EAAY,cAAc;"}

package/dist/text-field-BMDf8j-K.mjs

@@ -1,185 +0,0 @@
-import { jsx as i, jsxs as u } from "react/jsx-runtime";
-import { useRef as T, forwardRef as k, useId as B, isValidElement as H } from "react";
-import { b as L } from "./button-Cv7NlYbv.mjs";
-import { F as M } from "./field-error-text-CBSX8dGx.mjs";
-import { F as S } from "./field-helper-text-C5ee4SFV.mjs";
-import { r as D } from "./check-circle-filled.es-umBwOv5_.mjs";
-import { r as G } from "./close.es-BPmk2wkU.mjs";
-import { L as J } from "./label-7sJe5-pX.mjs";
-import { a as K } from "./spinner-DRQN6YdK.mjs";
-import { c as Q } from "./bind-CU-R61T-.mjs";
-const U = {
-  "purpur-text-field": "_purpur-text-field_1n0q1_1",
-  "purpur-text-field__label": "_purpur-text-field__label_1n0q1_7",
-  "purpur-text-field__label-text": "_purpur-text-field__label-text_1n0q1_12",
-  "purpur-text-field__field-row": "_purpur-text-field__field-row_1n0q1_15",
-  "purpur-text-field__frame": "_purpur-text-field__frame_1n0q1_19",
-  "purpur-text-field__frame--negative": "_purpur-text-field__frame--negative_1n0q1_26",
-  "purpur-text-field__input-container": "_purpur-text-field__input-container_1n0q1_29",
-  "purpur-text-field__input-container--disabled": "_purpur-text-field__input-container--disabled_1n0q1_40",
-  "purpur-text-field__input-container--readonly": "_purpur-text-field__input-container--readonly_1n0q1_43",
-  "purpur-text-field__input-container--has-clear-button": "_purpur-text-field__input-container--has-clear-button_1n0q1_46",
-  "purpur-text-field__input-container--end-adornment": "_purpur-text-field__input-container--end-adornment_1n0q1_49",
-  "purpur-text-field__input": "_purpur-text-field__input_1n0q1_29",
-  "purpur-text-field__input-container--start-adornment": "_purpur-text-field__input-container--start-adornment_1n0q1_55",
-  "purpur-text-field__input-container--negative": "_purpur-text-field__input-container--negative_1n0q1_61",
-  "purpur-text-field__input--valid": "_purpur-text-field__input--valid_1n0q1_109",
-  "purpur-text-field__input--error": "_purpur-text-field__input--error_1n0q1_109",
-  "purpur-text-field__input--negative": "_purpur-text-field__input--negative_1n0q1_130",
-  "purpur-text-field__adornment-container": "_purpur-text-field__adornment-container_1n0q1_146",
-  "purpur-text-field__valid-icon": "_purpur-text-field__valid-icon_1n0q1_151",
-  "purpur-text-field__valid-icon--negative": "_purpur-text-field__valid-icon--negative_1n0q1_154"
-}, W = (d) => T(d), _ = Q.bind(U), e = "purpur-text-field", C = k(
-  ({
-    ["data-testid"]: d,
-    className: I,
-    clearButtonAriaLabel: x,
-    beforeField: b,
-    afterField: v,
-    endAdornment: s,
-    errorText: l,
-    helperText: h,
-    hideRequiredAsterisk: R = !1,
-    label: $,
-    loading: q = !1,
-    onClear: y,
-    startAdornment: w,
-    valid: O = !1,
-    negative: n = !1,
-    ...t
-  }, p) => {
-    const V = B(), o = t.id ?? V, r = (a) => d ? `${d}-${a}` : void 0, N = O && !l, c = h ? `${o}-helper-text` : void 0, f = [w].filter((a) => !!a), g = (typeof t.value == "number" ? t.value !== void 0 : t.value?.length) && !t.disabled && !t.readOnly && !q && y && x, F = W(null), j = (a) => {
-      F.current = a, typeof p == "function" ? p(a) : p && (p.current = a);
-    }, E = () => {
-      y?.(), F.current?.focus();
-    }, m = [
-      q && /* @__PURE__ */ i(
-        K,
-        {
-          disabled: t.disabled,
-          size: "xs",
-          "data-testid": r("spinner"),
-          negative: n
-        },
-        "spinner"
-      ),
-      g && /* @__PURE__ */ i(
-        L,
-        {
-          negative: n,
-          variant: "tertiary-purple",
-          onClick: E,
-          iconOnly: !0,
-          "aria-label": x ?? "",
-          "data-testid": r("clear-button"),
-          tabIndex: -1,
-          children: /* @__PURE__ */ i(G, { size: "xs" })
-        },
-        "clear-button"
-      ),
-      N && /* @__PURE__ */ i(
-        D,
-        {
-          "data-testid": r("valid-icon"),
-          className: _(`${e}__valid-icon`, {
-            [`${e}__valid-icon--negative`]: n
-          })
-        },
-        "valid-icon"
-      )
-    ].filter((a) => !!a), z = _(`${e}__input-container`, {
-      [`${e}__input-container--start-adornment`]: f.length,
-      [`${e}__input-container--end-adornment`]: m.length || s,
-      [`${e}__input-container--disabled`]: t.disabled,
-      [`${e}__input-container--has-clear-button`]: g,
-      [`${e}__input-container--readonly`]: t.readOnly && !t.disabled,
-      [`${e}__input-container--negative`]: n
-    });
-    return /* @__PURE__ */ u("div", { className: _(I, e), children: [
-      $ && /* @__PURE__ */ u(
-        J,
-        {
-          htmlFor: o,
-          className: _(`${e}__label`),
-          "data-testid": r("label"),
-          disabled: t.disabled,
-          negative: n,
-          children: [
-            t.required && !R && /* @__PURE__ */ i("span", { "aria-hidden": !0, children: "*" }),
-            $
-          ]
-        }
-      ),
-      /* @__PURE__ */ u("div", { className: _(`${e}__field-row`), children: [
-        !!b && b,
-        /* @__PURE__ */ u("div", { className: z, children: [
-          !!f.length && /* @__PURE__ */ i(
-            "div",
-            {
-              "data-testid": r("start-adornments"),
-              className: _(`${e}__adornment-container`),
-              children: f
-            }
-          ),
-          /* @__PURE__ */ i(
-            "input",
-            {
-              ...t,
-              id: o,
-              ref: j,
-              "data-testid": r("input"),
-              "aria-describedby": t["aria-describedby"] || c,
-              "aria-invalid": t["aria-invalid"] || !!l,
-              className: _([
-                `${e}__input`,
-                {
-                  [`${e}__input--valid`]: N,
-                  [`${e}__input--error`]: !!l,
-                  [`${e}__input--negative`]: n
-                }
-              ])
-            }
-          ),
-          /* @__PURE__ */ i(
-            "div",
-            {
-              className: _(`${e}__frame`, {
-                [`${e}__frame--negative`]: n
-              })
-            }
-          ),
-          (!!m.length || s) && /* @__PURE__ */ u(
-            "div",
-            {
-              "data-testid": r("end-adornments"),
-              className: _(`${e}__adornment-container`),
-              children: [
-                m,
-                s
-              ]
-            }
-          )
-        ] }),
-        !!v && v
-      ] }),
-      c && /* @__PURE__ */ i(
-        S,
-        {
-          "data-testid": r("helper-text"),
-          id: c,
-          negative: n,
-          disabled: t.disabled,
-          children: h
-        }
-      ),
-      l && /* @__PURE__ */ i(M, { "data-testid": r("error-text"), negative: n, children: l })
-    ] });
-  }
-);
-C.displayName = "TextField";
-const _e = (d) => H(d) && d.type.displayName === C.displayName;
-export {
-  C as T,
-  _e as i
-};
-//# sourceMappingURL=text-field-BMDf8j-K.mjs.map

package/dist/text-field-BMDf8j-K.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-field-BMDf8j-K.mjs","sources":["../../../components/text-field/src/utils.ts","../../../components/text-field/src/text-field.tsx"],"sourcesContent":["import { type MutableRefObject, useRef } from \"react\";\n\nexport const useMutableRefObject = <T>(value: T): MutableRefObject<T> => {\n  return useRef<T>(value) as MutableRefObject<T>;\n};\n","import React, {\n  forwardRef,\n  type HTMLInputTypeAttribute,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useId,\n} from \"react\";\nimport { Button } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { FieldErrorText } from \"@purpur/field-error-text\";\nimport { FieldHelperText } from \"@purpur/field-helper-text\";\nimport { IconCheckCircleFilled } from \"@purpur/icon/check-circle-filled\";\nimport { IconClose } from \"@purpur/icon/close\";\nimport { Label } from \"@purpur/label\";\nimport { Spinner } from \"@purpur/spinner\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./text-field.module.scss\";\nimport { useMutableRefObject } from \"./utils\";\n\ntype TextFieldBaseProps = {\n  /**\n   * Use to display e.g. a button before the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  beforeField?: ReactNode;\n  /**\n   * Use to display e.g. a button after the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  afterField?: ReactNode;\n  /**\n   * Use to display e.g. an icon at the end inside of the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Use to render error message below the text field. The text field renders with error appearance.\n   * */\n  errorText?: string;\n  /**\n   * Use to give context about the field's input. Renders below the field.\n   * */\n  helperText?: string;\n  /**\n   * The label of the text field.\n   * */\n  label?: string;\n  /**\n   *  Use to render a spinner at the end inside of the text field.\n   */\n  loading?: boolean;\n  /**\n   * Hide the asterisk for required fields.\n   * This is useful when the field is required but the context already indicates that.\n   */\n  hideRequiredAsterisk?: boolean;\n  /**\n   * Use to display e.g. an icon at the start inside of the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Use to set the type of the field.\n   */\n  type?: Extract<\n    HTMLInputTypeAttribute,\n    \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\"\n  >;\n  /**\n   * Use to render text field with valid appearance. A check\n   * icon will render at the start inside of the input.\n   */\n  valid?: boolean;\n  negative?: boolean;\n};\n\ntype TextFieldClearProps =\n  | {\n      /**\n       * An accessible label for the clear button.\n       * */\n      clearButtonAriaLabel: string;\n      /**\n       * Event handler called when the clear button is clicked.\n       * */\n      onClear: () => void;\n    }\n  | {\n      /**\n       * An accessible label for the clear button.\n       * */\n      clearButtonAriaLabel?: never;\n      /**\n       * Event handler called when the clear button is clicked.\n       * */\n      onClear?: never;\n    };\n\nexport type TextFieldProps = Omit<BaseProps<\"input\">, \"type\"> &\n  TextFieldBaseProps &\n  TextFieldClearProps;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-text-field\";\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      beforeField,\n      afterField,\n      endAdornment,\n      errorText,\n      helperText,\n      hideRequiredAsterisk = false,\n      label,\n      loading = false,\n      onClear,\n      startAdornment,\n      valid = false,\n      negative = false,\n      ...inputProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = inputProps.id ?? randomId;\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const isValid = valid && !errorText;\n    const helperTextId = helperText ? `${inputId}-helper-text` : undefined;\n    const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);\n    const hasValue =\n      typeof inputProps.value === \"number\"\n        ? inputProps.value !== undefined\n        : inputProps.value?.length;\n    const hasClearButton =\n      hasValue &&\n      !inputProps.disabled &&\n      !inputProps.readOnly &&\n      !loading &&\n      onClear &&\n      clearButtonAriaLabel;\n\n    const internalRef = useMutableRefObject<HTMLInputElement | null>(null);\n    const setRef = (node: HTMLInputElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n    const handleClear = () => {\n      onClear?.();\n      internalRef.current?.focus();\n    };\n\n    const localEndAdornments: ReactNode[] = [\n      loading && (\n        <Spinner\n          key=\"spinner\"\n          disabled={inputProps.disabled}\n          size=\"xs\"\n          data-testid={getTestId(\"spinner\")}\n          negative={negative}\n        />\n      ),\n      hasClearButton && (\n        <Button\n          negative={negative}\n          key=\"clear-button\"\n          variant=\"tertiary-purple\"\n          onClick={handleClear}\n          iconOnly\n          aria-label={clearButtonAriaLabel ?? \"\"}\n          data-testid={getTestId(\"clear-button\")}\n          tabIndex={-1}\n        >\n          <IconClose size=\"xs\" />\n        </Button>\n      ),\n      isValid && (\n        <IconCheckCircleFilled\n          key=\"valid-icon\"\n          data-testid={getTestId(\"valid-icon\")}\n          className={cx(`${rootClassName}__valid-icon`, {\n            [`${rootClassName}__valid-icon--negative`]: negative,\n          })}\n        />\n      ),\n    ].filter((adornment) => !!adornment);\n\n    const inputContainerClassnames = cx(`${rootClassName}__input-container`, {\n      [`${rootClassName}__input-container--start-adornment`]: startAdornments.length,\n      [`${rootClassName}__input-container--end-adornment`]:\n        localEndAdornments.length || endAdornment,\n      [`${rootClassName}__input-container--disabled`]: inputProps.disabled,\n      [`${rootClassName}__input-container--has-clear-button`]: hasClearButton,\n      [`${rootClassName}__input-container--readonly`]: inputProps.readOnly && !inputProps.disabled,\n      [`${rootClassName}__input-container--negative`]: negative,\n    });\n\n    return (\n      <div className={cx(className, rootClassName)}>\n        {label && (\n          <Label\n            htmlFor={inputId}\n            className={cx(`${rootClassName}__label`)}\n            data-testid={getTestId(\"label\")}\n            disabled={inputProps.disabled}\n            negative={negative}\n          >\n            {inputProps.required && !hideRequiredAsterisk && <span aria-hidden>*</span>}\n            {label}\n          </Label>\n        )}\n        <div className={cx(`${rootClassName}__field-row`)}>\n          {!!beforeField && beforeField}\n          <div className={inputContainerClassnames}>\n            {!!startAdornments.length && (\n              <div\n                data-testid={getTestId(\"start-adornments\")}\n                className={cx(`${rootClassName}__adornment-container`)}\n              >\n                {startAdornments}\n              </div>\n            )}\n            <input\n              {...inputProps}\n              id={inputId}\n              ref={setRef}\n              data-testid={getTestId(\"input\")}\n              aria-describedby={inputProps[\"aria-describedby\"] || helperTextId}\n              aria-invalid={inputProps[\"aria-invalid\"] || !!errorText}\n              className={cx([\n                `${rootClassName}__input`,\n                {\n                  [`${rootClassName}__input--valid`]: isValid,\n                  [`${rootClassName}__input--error`]: !!errorText,\n                  [`${rootClassName}__input--negative`]: negative,\n                },\n              ])}\n            />\n            <div\n              className={cx(`${rootClassName}__frame`, {\n                [`${rootClassName}__frame--negative`]: negative,\n              })}\n            />\n            {(!!localEndAdornments.length || endAdornment) && (\n              <div\n                data-testid={getTestId(\"end-adornments\")}\n                className={cx(`${rootClassName}__adornment-container`)}\n              >\n                {localEndAdornments}\n                {endAdornment}\n              </div>\n            )}\n          </div>\n          {!!afterField && afterField}\n        </div>\n        {helperTextId && (\n          <FieldHelperText\n            data-testid={getTestId(\"helper-text\")}\n            id={helperTextId}\n            negative={negative}\n            disabled={inputProps.disabled}\n          >\n            {helperText}\n          </FieldHelperText>\n        )}\n        {errorText && (\n          <FieldErrorText data-testid={getTestId(\"error-text\")} negative={negative}>\n            {errorText}\n          </FieldErrorText>\n        )}\n      </div>\n    );\n  }\n);\n\nTextField.displayName = \"TextField\";\n\nexport const isTextField = (child?: ReactNode): child is ReactElement<TextFieldProps> =>\n  isValidElement<TextFieldProps>(child) &&\n  (child.type as any).displayName === TextField.displayName; // eslint-disable-line @typescript-eslint/no-explicit-any\n"],"names":["useMutableRefObject","value","useRef","cx","c","styles","rootClassName","TextField","forwardRef","dataTestId","className","clearButtonAriaLabel","beforeField","afterField","endAdornment","errorText","helperText","hideRequiredAsterisk","label","loading","onClear","startAdornment","valid","negative","inputProps","ref","randomId","useId","inputId","getTestId","name","isValid","helperTextId","startAdornments","adornment","hasClearButton","internalRef","setRef","node","handleClear","localEndAdornments","jsx","Spinner","Button","IconClose","IconCheckCircleFilled","inputContainerClassnames","jsxs","Label","FieldHelperText","FieldErrorText","isTextField","child","isValidElement"],"mappings":"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"}

package/dist/text-field-CiLEj0Fq.js

@@ -1,2 +0,0 @@
-"use strict";const n=require("react/jsx-runtime"),s=require("react"),k=require("./button-Dqxdc3nC.js"),z=require("./field-error-text-FhQulSV5.js"),H=require("./field-helper-text-DSKO-Tce.js"),B=require("./check-circle-filled.es-5-GXE9l4.js"),M=require("./close.es-VL3lKi1O.js"),S=require("./label-yHK80hhV.js"),D=require("./spinner-tKunS_o-.js"),G=require("./bind-DeUYJ6m9.js"),J={"purpur-text-field":"_purpur-text-field_1n0q1_1","purpur-text-field__label":"_purpur-text-field__label_1n0q1_7","purpur-text-field__label-text":"_purpur-text-field__label-text_1n0q1_12","purpur-text-field__field-row":"_purpur-text-field__field-row_1n0q1_15","purpur-text-field__frame":"_purpur-text-field__frame_1n0q1_19","purpur-text-field__frame--negative":"_purpur-text-field__frame--negative_1n0q1_26","purpur-text-field__input-container":"_purpur-text-field__input-container_1n0q1_29","purpur-text-field__input-container--disabled":"_purpur-text-field__input-container--disabled_1n0q1_40","purpur-text-field__input-container--readonly":"_purpur-text-field__input-container--readonly_1n0q1_43","purpur-text-field__input-container--has-clear-button":"_purpur-text-field__input-container--has-clear-button_1n0q1_46","purpur-text-field__input-container--end-adornment":"_purpur-text-field__input-container--end-adornment_1n0q1_49","purpur-text-field__input":"_purpur-text-field__input_1n0q1_29","purpur-text-field__input-container--start-adornment":"_purpur-text-field__input-container--start-adornment_1n0q1_55","purpur-text-field__input-container--negative":"_purpur-text-field__input-container--negative_1n0q1_61","purpur-text-field__input--valid":"_purpur-text-field__input--valid_1n0q1_109","purpur-text-field__input--error":"_purpur-text-field__input--error_1n0q1_109","purpur-text-field__input--negative":"_purpur-text-field__input--negative_1n0q1_130","purpur-text-field__adornment-container":"_purpur-text-field__adornment-container_1n0q1_146","purpur-text-field__valid-icon":"_purpur-text-field__valid-icon_1n0q1_151","purpur-text-field__valid-icon--negative":"_purpur-text-field__valid-icon--negative_1n0q1_154"},K=d=>s.useRef(d),_=G.c.bind(J),e="purpur-text-field",m=s.forwardRef(({["data-testid"]:d,className:R,clearButtonAriaLabel:b,beforeField:q,afterField:v,endAdornment:p,errorText:l,helperText:h,hideRequiredAsterisk:C=!1,label:$,loading:j=!1,onClear:y,startAdornment:I,valid:T=!1,negative:i=!1,...t},u)=>{const w=s.useId(),c=t.id??w,r=a=>d?`${d}-${a}`:void 0,N=T&&!l,o=h?`${c}-helper-text`:void 0,x=[I].filter(a=>!!a),g=(typeof t.value=="number"?t.value!==void 0:t.value?.length)&&!t.disabled&&!t.readOnly&&!j&&y&&b,F=K(null),E=a=>{F.current=a,typeof u=="function"?u(a):u&&(u.current=a)},O=()=>{y?.(),F.current?.focus()},f=[j&&n.jsx(D.Spinner,{disabled:t.disabled,size:"xs","data-testid":r("spinner"),negative:i},"spinner"),g&&n.jsx(k.Button,{negative:i,variant:"tertiary-purple",onClick:O,iconOnly:!0,"aria-label":b??"","data-testid":r("clear-button"),tabIndex:-1,children:n.jsx(M.r,{size:"xs"})},"clear-button"),N&&n.jsx(B.r,{"data-testid":r("valid-icon"),className:_(`${e}__valid-icon`,{[`${e}__valid-icon--negative`]:i})},"valid-icon")].filter(a=>!!a),V=_(`${e}__input-container`,{[`${e}__input-container--start-adornment`]:x.length,[`${e}__input-container--end-adornment`]:f.length||p,[`${e}__input-container--disabled`]:t.disabled,[`${e}__input-container--has-clear-button`]:g,[`${e}__input-container--readonly`]:t.readOnly&&!t.disabled,[`${e}__input-container--negative`]:i});return n.jsxs("div",{className:_(R,e),children:[$&&n.jsxs(S.Label,{htmlFor:c,className:_(`${e}__label`),"data-testid":r("label"),disabled:t.disabled,negative:i,children:[t.required&&!C&&n.jsx("span",{"aria-hidden":!0,children:"*"}),$]}),n.jsxs("div",{className:_(`${e}__field-row`),children:[!!q&&q,n.jsxs("div",{className:V,children:[!!x.length&&n.jsx("div",{"data-testid":r("start-adornments"),className:_(`${e}__adornment-container`),children:x}),n.jsx("input",{...t,id:c,ref:E,"data-testid":r("input"),"aria-describedby":t["aria-describedby"]||o,"aria-invalid":t["aria-invalid"]||!!l,className:_([`${e}__input`,{[`${e}__input--valid`]:N,[`${e}__input--error`]:!!l,[`${e}__input--negative`]:i}])}),n.jsx("div",{className:_(`${e}__frame`,{[`${e}__frame--negative`]:i})}),(!!f.length||p)&&n.jsxs("div",{"data-testid":r("end-adornments"),className:_(`${e}__adornment-container`),children:[f,p]})]}),!!v&&v]}),o&&n.jsx(H.FieldHelperText,{"data-testid":r("helper-text"),id:o,negative:i,disabled:t.disabled,children:h}),l&&n.jsx(z.FieldErrorText,{"data-testid":r("error-text"),negative:i,children:l})]})});m.displayName="TextField";const L=d=>s.isValidElement(d)&&d.type.displayName===m.displayName;exports.TextField=m;exports.isTextField=L;
-//# sourceMappingURL=text-field-CiLEj0Fq.js.map

package/dist/text-field-CiLEj0Fq.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-field-CiLEj0Fq.js","sources":["../../../components/text-field/src/utils.ts","../../../components/text-field/src/text-field.tsx"],"sourcesContent":["import { type MutableRefObject, useRef } from \"react\";\n\nexport const useMutableRefObject = <T>(value: T): MutableRefObject<T> => {\n  return useRef<T>(value) as MutableRefObject<T>;\n};\n","import React, {\n  forwardRef,\n  type HTMLInputTypeAttribute,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useId,\n} from \"react\";\nimport { Button } from \"@purpur/button\";\nimport type { BaseProps } from \"@purpur/common-types\";\nimport { FieldErrorText } from \"@purpur/field-error-text\";\nimport { FieldHelperText } from \"@purpur/field-helper-text\";\nimport { IconCheckCircleFilled } from \"@purpur/icon/check-circle-filled\";\nimport { IconClose } from \"@purpur/icon/close\";\nimport { Label } from \"@purpur/label\";\nimport { Spinner } from \"@purpur/spinner\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./text-field.module.scss\";\nimport { useMutableRefObject } from \"./utils\";\n\ntype TextFieldBaseProps = {\n  /**\n   * Use to display e.g. a button before the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  beforeField?: ReactNode;\n  /**\n   * Use to display e.g. a button after the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  afterField?: ReactNode;\n  /**\n   * Use to display e.g. an icon at the end inside of the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Use to render error message below the text field. The text field renders with error appearance.\n   * */\n  errorText?: string;\n  /**\n   * Use to give context about the field's input. Renders below the field.\n   * */\n  helperText?: string;\n  /**\n   * The label of the text field.\n   * */\n  label?: string;\n  /**\n   *  Use to render a spinner at the end inside of the text field.\n   */\n  loading?: boolean;\n  /**\n   * Hide the asterisk for required fields.\n   * This is useful when the field is required but the context already indicates that.\n   */\n  hideRequiredAsterisk?: boolean;\n  /**\n   * Use to display e.g. an icon at the start inside of the text field.\n   *\n   * _NOTE: Should ideally only be used by other purpur components!_\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Use to set the type of the field.\n   */\n  type?: Extract<\n    HTMLInputTypeAttribute,\n    \"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\"\n  >;\n  /**\n   * Use to render text field with valid appearance. A check\n   * icon will render at the start inside of the input.\n   */\n  valid?: boolean;\n  negative?: boolean;\n};\n\ntype TextFieldClearProps =\n  | {\n      /**\n       * An accessible label for the clear button.\n       * */\n      clearButtonAriaLabel: string;\n      /**\n       * Event handler called when the clear button is clicked.\n       * */\n      onClear: () => void;\n    }\n  | {\n      /**\n       * An accessible label for the clear button.\n       * */\n      clearButtonAriaLabel?: never;\n      /**\n       * Event handler called when the clear button is clicked.\n       * */\n      onClear?: never;\n    };\n\nexport type TextFieldProps = Omit<BaseProps<\"input\">, \"type\"> &\n  TextFieldBaseProps &\n  TextFieldClearProps;\n\nconst cx = c.bind(styles);\nconst rootClassName = \"purpur-text-field\";\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      [\"data-testid\"]: dataTestId,\n      className,\n      clearButtonAriaLabel,\n      beforeField,\n      afterField,\n      endAdornment,\n      errorText,\n      helperText,\n      hideRequiredAsterisk = false,\n      label,\n      loading = false,\n      onClear,\n      startAdornment,\n      valid = false,\n      negative = false,\n      ...inputProps\n    },\n    ref\n  ) => {\n    const randomId = useId();\n    const inputId = inputProps.id ?? randomId;\n    const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);\n    const isValid = valid && !errorText;\n    const helperTextId = helperText ? `${inputId}-helper-text` : undefined;\n    const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);\n    const hasValue =\n      typeof inputProps.value === \"number\"\n        ? inputProps.value !== undefined\n        : inputProps.value?.length;\n    const hasClearButton =\n      hasValue &&\n      !inputProps.disabled &&\n      !inputProps.readOnly &&\n      !loading &&\n      onClear &&\n      clearButtonAriaLabel;\n\n    const internalRef = useMutableRefObject<HTMLInputElement | null>(null);\n    const setRef = (node: HTMLInputElement | null) => {\n      internalRef.current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        ref.current = node;\n      }\n    };\n    const handleClear = () => {\n      onClear?.();\n      internalRef.current?.focus();\n    };\n\n    const localEndAdornments: ReactNode[] = [\n      loading && (\n        <Spinner\n          key=\"spinner\"\n          disabled={inputProps.disabled}\n          size=\"xs\"\n          data-testid={getTestId(\"spinner\")}\n          negative={negative}\n        />\n      ),\n      hasClearButton && (\n        <Button\n          negative={negative}\n          key=\"clear-button\"\n          variant=\"tertiary-purple\"\n          onClick={handleClear}\n          iconOnly\n          aria-label={clearButtonAriaLabel ?? \"\"}\n          data-testid={getTestId(\"clear-button\")}\n          tabIndex={-1}\n        >\n          <IconClose size=\"xs\" />\n        </Button>\n      ),\n      isValid && (\n        <IconCheckCircleFilled\n          key=\"valid-icon\"\n          data-testid={getTestId(\"valid-icon\")}\n          className={cx(`${rootClassName}__valid-icon`, {\n            [`${rootClassName}__valid-icon--negative`]: negative,\n          })}\n        />\n      ),\n    ].filter((adornment) => !!adornment);\n\n    const inputContainerClassnames = cx(`${rootClassName}__input-container`, {\n      [`${rootClassName}__input-container--start-adornment`]: startAdornments.length,\n      [`${rootClassName}__input-container--end-adornment`]:\n        localEndAdornments.length || endAdornment,\n      [`${rootClassName}__input-container--disabled`]: inputProps.disabled,\n      [`${rootClassName}__input-container--has-clear-button`]: hasClearButton,\n      [`${rootClassName}__input-container--readonly`]: inputProps.readOnly && !inputProps.disabled,\n      [`${rootClassName}__input-container--negative`]: negative,\n    });\n\n    return (\n      <div className={cx(className, rootClassName)}>\n        {label && (\n          <Label\n            htmlFor={inputId}\n            className={cx(`${rootClassName}__label`)}\n            data-testid={getTestId(\"label\")}\n            disabled={inputProps.disabled}\n            negative={negative}\n          >\n            {inputProps.required && !hideRequiredAsterisk && <span aria-hidden>*</span>}\n            {label}\n          </Label>\n        )}\n        <div className={cx(`${rootClassName}__field-row`)}>\n          {!!beforeField && beforeField}\n          <div className={inputContainerClassnames}>\n            {!!startAdornments.length && (\n              <div\n                data-testid={getTestId(\"start-adornments\")}\n                className={cx(`${rootClassName}__adornment-container`)}\n              >\n                {startAdornments}\n              </div>\n            )}\n            <input\n              {...inputProps}\n              id={inputId}\n              ref={setRef}\n              data-testid={getTestId(\"input\")}\n              aria-describedby={inputProps[\"aria-describedby\"] || helperTextId}\n              aria-invalid={inputProps[\"aria-invalid\"] || !!errorText}\n              className={cx([\n                `${rootClassName}__input`,\n                {\n                  [`${rootClassName}__input--valid`]: isValid,\n                  [`${rootClassName}__input--error`]: !!errorText,\n                  [`${rootClassName}__input--negative`]: negative,\n                },\n              ])}\n            />\n            <div\n              className={cx(`${rootClassName}__frame`, {\n                [`${rootClassName}__frame--negative`]: negative,\n              })}\n            />\n            {(!!localEndAdornments.length || endAdornment) && (\n              <div\n                data-testid={getTestId(\"end-adornments\")}\n                className={cx(`${rootClassName}__adornment-container`)}\n              >\n                {localEndAdornments}\n                {endAdornment}\n              </div>\n            )}\n          </div>\n          {!!afterField && afterField}\n        </div>\n        {helperTextId && (\n          <FieldHelperText\n            data-testid={getTestId(\"helper-text\")}\n            id={helperTextId}\n            negative={negative}\n            disabled={inputProps.disabled}\n          >\n            {helperText}\n          </FieldHelperText>\n        )}\n        {errorText && (\n          <FieldErrorText data-testid={getTestId(\"error-text\")} negative={negative}>\n            {errorText}\n          </FieldErrorText>\n        )}\n      </div>\n    );\n  }\n);\n\nTextField.displayName = \"TextField\";\n\nexport const isTextField = (child?: ReactNode): child is ReactElement<TextFieldProps> =>\n  isValidElement<TextFieldProps>(child) &&\n  (child.type as any).displayName === TextField.displayName; // eslint-disable-line @typescript-eslint/no-explicit-any\n"],"names":["useMutableRefObject","value","useRef","cx","c","styles","rootClassName","TextField","forwardRef","dataTestId","className","clearButtonAriaLabel","beforeField","afterField","endAdornment","errorText","helperText","hideRequiredAsterisk","label","loading","onClear","startAdornment","valid","negative","inputProps","ref","randomId","useId","inputId","getTestId","name","isValid","helperTextId","startAdornments","adornment","hasClearButton","internalRef","setRef","node","handleClear","localEndAdornments","jsx","Spinner","Button","IconClose","IconCheckCircleFilled","inputContainerClassnames","jsxs","Label","FieldHelperText","FieldErrorText","isTextField","child","isValidElement"],"mappings":"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"}