@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components34.js

@@ -1,84 +1,35 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { IconCheckMark as w, IconExclamationMarkTriangle as h } from "@frontify/fondue-icons";
-import { forwardRef as f, useRef as S } from "react";
-import { LoadingCircle as T } from "./fondue-components19.js";
-import a from "./fondue-components87.js";
-const u = ({
-  children: s,
-  className: c,
-  status: e = "neutral",
-  "data-test-id": l = "fondue-text-input",
-  "aria-errormessage": R,
-  placeholder: n,
-  ...o
-}, N) => {
-  const d = S(!1);
-  return /* @__PURE__ */ m(
-    "div",
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import t from "./fondue-components90.js";
+const n = p(
+  ({
+    children: o,
+    as: a = "span",
+    size: r = "medium",
+    weight: s = "default",
+    color: i = "default",
+    boxColor: e,
+    className: m,
+    ...d
+  }, f) => /* @__PURE__ */ l(
+    a,
     {
-      className: [a.root, c].filter(Boolean).join(" "),
-      "data-status": e,
-      "data-test-id": l,
-      children: [
-        e === "loading" ? /* @__PURE__ */ t("div", { className: a.loadingStatus, "data-test-id": `${l}-loader`, children: /* @__PURE__ */ t(T, { size: "xx-small" }) }) : null,
-        /* @__PURE__ */ m("div", { className: a.inputWrapper, children: [
-          n && /* @__PURE__ */ t("div", { className: a.placeholder, children: n }),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              onMouseDown: (r) => {
-                d.current = !0, r.currentTarget.dataset.showFocusRing = "false";
-              },
-              type: "text",
-              placeholder: n,
-              ...o,
-              onFocus: (r) => {
-                var i;
-                d.current || (r.target.dataset.showFocusRing = "true"), (i = o.onFocus) == null || i.call(o, r);
-              },
-              onBlur: (r) => {
-                var i;
-                r.target.dataset.showFocusRing = "false", d.current = !1, (i = o.onBlur) == null || i.call(o, r);
-              },
-              ref: N,
-              className: a.input,
-              "aria-invalid": e === "error",
-              "aria-errormessage": e === "error" ? R : void 0
-            }
-          )
-        ] }),
-        e === "success" ? /* @__PURE__ */ t(w, { size: 16, className: a.iconSuccess, "data-test-id": `${l}-success-icon` }) : null,
-        e === "error" ? /* @__PURE__ */ t(
-          h,
-          {
-            size: 16,
-            className: a.iconError,
-            "data-test-id": `${l}-error-icon`
-          }
-        ) : null,
-        s
-      ]
+      "data-test-id": "text",
+      className: [
+        t.root,
+        t[`size-${r}`],
+        t[`weight-${s}`],
+        t[e ? `color-box-${e}` : `color-${i}`],
+        m
+      ].filter(Boolean).join(" "),
+      ref: f,
+      ...d,
+      children: o
     }
-  );
-};
-u.displayName = "TextField.Root";
-const x = ({ name: s, className: c, ...e }, l) => /* @__PURE__ */ t(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": s,
-    ...e,
-    ref: l,
-    className: [a.slot, c].filter(Boolean).join(" ")
-  }
+  )
 );
-x.displayName = "TextField.Slot";
-const F = f(u), v = f(x), g = F;
-g.Root = F;
-g.Slot = v;
+n.displayName = "FondueText";
 export {
-  u as TextFieldRoot,
-  x as TextFieldSlot,
-  g as TextInput
+  n as Text
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type FocusEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        placeholder,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-status={status}\n            data-test-id={dataTestId}\n        >\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`}>\n                    <LoadingCircle size=\"xx-small\" />\n                </div>\n            ) : null}\n            <div className={styles.inputWrapper}>\n                {placeholder && <div className={styles.placeholder}>{placeholder}</div>}\n                <input\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    {...inputProps}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        inputProps.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        inputProps.onBlur?.(blurEvent);\n                    }}\n                    ref={ref}\n                    className={styles.input}\n                    aria-invalid={status === 'error'}\n                    aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n                />\n            </div>\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","placeholder","inputProps","ref","wasClicked","useRef","jsxs","styles","jsx","LoadingCircle","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA6GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,aAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,CAACC,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,eAAaC;AAAA,MACb,gBAAcC;AAAA,MAEb,UAAA;AAAA,QAAAD,MAAW,YACR,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,WAC7D,UAAA,gBAAAS,EAACC,GAAA,EAAc,MAAK,WAAA,CAAW,GACnC,IACA;AAAA,QACJ,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAO,cAClB,UAAA;AAAA,UAAAN,KAAe,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,aAAc,UAAAN,GAAY;AAAA,UACjE,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,aAAa,CAACE,MAAe;AACzB,gBAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,cACrD;AAAA,cACA,MAAK;AAAA,cACL,aAAAT;AAAA,cACC,GAAGC;AAAA,cACJ,SAAS,CAACS,MAAe;;AACrB,gBAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,cACzB;AAAA,cACA,QAAQ,CAACE,MAAc;;AACnB,gBAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,cACxB;AAAA,cACA,KAAAV;AAAA,cACA,WAAWI,EAAO;AAAA,cAClB,gBAAcT,MAAW;AAAA,cACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/D,GACJ;AAAA,QAECF,MAAW,YACR,gBAAAU,EAACM,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,aAAa,gBAAc,GAAGR,CAAU,iBAAiB,IACpG;AAAA,QAEHD,MAAW,UACR,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWR,EAAO;AAAA,YAClB,gBAAc,GAAGR,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QAEHH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AACAD,EAAc,cAAc;AAQrB,MAAMqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,EAAA,GACtBC,MAGI,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAS;AAAA,IACT,aAAWS;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAW,CAACZ,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EAAA;AAAA;AAKxEmB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6C1B,CAAa,GACtF2B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Text/Text.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode, forwardRef, type ForwardedRef, type HTMLAttributeAnchorTarget } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\n\nimport styles from './styles/text.module.scss';\n\ntype TextWeight = 'default' | 'strong' | 'x-strong';\ntype TextSize = 'x-small' | 'small' | 'medium' | 'large';\ntype TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';\ntype BoxColor = 'neutral' | 'selected' | 'disabled' | 'positive' | 'negative' | 'warning';\n\ntype TagType = 'a' | 'abbr' | 'address' | 'em' | 'label' | 'li' | 'span' | 'strong' | 'time' | 'p';\n\nexport type TextProps<TTag extends TagType = 'span'> = CommonAriaProps &\n    TagProps<TTag> & {\n        /**\n         * Id of the element\n         */\n        id?: string;\n        /**\n         * Size of the text\n         *\n         * @default 'medium'\n         */\n        size?: TextSize;\n        /**\n         * Weight of the font\n         *\n         * @default 'default'\n         */\n        weight?: TextWeight;\n        /**\n         * The html element used to render\n         *\n         * @default 'span'\n         */\n        as?: TTag;\n        /**\n         * Color of the text\n         *\n         * @default 'default'\n         */\n        color?: TextColor;\n        /**\n         * The texts color when used within a box\n         *\n         * @description optional color prop that uses the inverse box color when accessibility contrast is needed\n         **/\n        boxColor?: BoxColor;\n        className?: string;\n        children?: ReactNode;\n    };\n\ntype TagPropMap = {\n    a: { href?: string; target: HTMLAttributeAnchorTarget; rel?: string; title?: string };\n    abbr: { title?: string };\n    address: object;\n    em: object;\n    label: { for?: string };\n    li: { value?: string };\n    p: object;\n    span: object;\n    strong: object;\n    time: { dateTime?: string };\n};\ntype TagProps<TTag extends TagType> = TagPropMap[TTag];\n\ntype TextElementMap = {\n    a: HTMLAnchorElement;\n    abbr: HTMLElement;\n    address: HTMLElement;\n    em: HTMLElement;\n    label: HTMLLabelElement;\n    li: HTMLLIElement;\n    p: HTMLParagraphElement;\n    span: HTMLSpanElement;\n    strong: HTMLElement;\n    time: HTMLTimeElement;\n};\ntype TextElementType<TTag extends TagType> = TextElementMap[TTag];\n\nexport const Text = forwardRef(\n    (\n        {\n            children,\n            as: Tag = 'span',\n            size = 'medium',\n            weight = 'default',\n            color = 'default',\n            boxColor,\n            className,\n            ...props\n        },\n        ref,\n    ) => (\n        <Tag\n            data-test-id=\"text\"\n            className={[\n                styles.root,\n                styles[`size-${size}`],\n                styles[`weight-${weight}`],\n                styles[boxColor ? `color-box-${boxColor}` : `color-${color}`],\n                className,\n            ]\n                .filter(Boolean)\n                .join(' ')}\n            // @ts-expect-error ref can not be inferred properly by TS\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </Tag>\n    ),\n) as (<TTag extends TagType = 'span'>(\n    props: TextProps<TTag> & { ref?: ForwardedRef<TextElementType<TTag>> },\n) => JSX.Element) & { displayName: string };\n\nText.displayName = 'FondueText';\n"],"names":["Text","forwardRef","children","Tag","size","weight","color","boxColor","className","props","ref","jsx","styles"],"mappings":";;;AAmFO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,IAAIC,IAAM;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MAEA,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAW;AAAA,QACPS,EAAO;AAAA,QACPA,EAAO,QAAQR,CAAI,EAAE;AAAA,QACrBQ,EAAO,UAAUP,CAAM,EAAE;AAAA,QACzBO,EAAOL,IAAW,aAAaA,CAAQ,KAAK,SAASD,CAAK,EAAE;AAAA,QAC5DE;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MAEb,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;AAIAF,EAAK,cAAc;"}

package/dist/fondue-components35.js

@@ -1,127 +1,84 @@
-import { jsxs as F, jsx as e } from "react/jsx-runtime";
-import { IconCheckMark as J, IconExclamationMarkTriangle as L, IconCross as Q } from "@frontify/fondue-icons";
-import { forwardRef as B, useRef as y, useState as U, useEffect as z } from "react";
-import { useSyncRefs as X } from "./fondue-components51.js";
-import o from "./fondue-components88.js";
-const D = ({
-  "data-test-id": c = "fondue-textarea",
-  autocomplete: i,
-  autosize: u,
-  children: m,
-  clearable: f,
-  decorator: h,
-  defaultValue: g,
-  disabled: n,
-  extraActions: r,
-  focusOnMount: v,
-  minRows: M = 1,
-  maxRows: k,
-  onEnterPressed: w,
-  readOnly: d,
-  resizable: $,
-  selectable: b = !0,
-  status: s = "default",
-  value: N,
-  ...l
-}, W) => {
-  const R = y(null), T = y(!1);
-  X(R, W);
-  const [x, S] = U(N ?? g ?? ""), C = (r == null ? void 0 : r.length) !== void 0 || f || ["success", "error"].includes(s), q = () => {
-    S("");
-  }, G = (a) => {
-    var t;
-    a.key === "Enter" && (w == null || w(a)), (t = l.onKeyDown) == null || t.call(l, a);
-  };
-  return z(() => {
-    S(N ?? g ?? "");
-  }, [g, N]), z(() => {
-    var a;
-    v && ((a = R.current) == null || a.focus());
-  }, [v]), /* @__PURE__ */ F(
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { IconCheckMark as w, IconExclamationMarkTriangle as h } from "@frontify/fondue-icons";
+import { forwardRef as f, useRef as S } from "react";
+import { LoadingCircle as T } from "./fondue-components20.js";
+import a from "./fondue-components91.js";
+const u = ({
+  children: s,
+  className: c,
+  status: e = "neutral",
+  "data-test-id": l = "fondue-text-input",
+  "aria-errormessage": R,
+  placeholder: n,
+  ...o
+}, N) => {
+  const d = S(!1);
+  return /* @__PURE__ */ m(
     "div",
     {
-      className: o.root,
-      "data-autosize": u,
-      "data-clearable": f,
-      "data-disabled": n || d,
-      "data-has-decorator": !!h,
-      "data-has-tools": C,
-      "data-resizable": $,
-      "data-status": s,
-      "data-max-rows": !!k,
-      "data-test-id": c,
-      style: { "--max-rows": `${k}` },
+      className: [a.root, c].filter(Boolean).join(" "),
+      "data-status": e,
+      "data-test-id": l,
       children: [
-        h ? /* @__PURE__ */ e("div", { className: o.decorator, children: h }) : null,
-        /* @__PURE__ */ e("div", { className: o.textareaWrapper, "data-replicated-value": x, children: /* @__PURE__ */ e(
-          "textarea",
-          {
-            ...l,
-            onMouseDown: (a) => {
-              T.current = !0, a.currentTarget.dataset.showFocusRing = "false";
-            },
-            onFocus: (a) => {
-              var t;
-              T.current || (a.target.dataset.showFocusRing = "true"), (t = l.onFocus) == null || t.call(l, a);
-            },
-            onBlur: (a) => {
-              var t;
-              a.target.dataset.showFocusRing = "false", T.current = !1, (t = l.onBlur) == null || t.call(l, a);
-            },
-            autoComplete: i ? "on" : "off",
-            className: o.textarea,
-            disabled: n,
-            onKeyDown: G,
-            onInput: (a) => S(a.currentTarget.value),
-            onSelect: (a) => {
-              b || (a.currentTarget.selectionStart = a.currentTarget.selectionEnd);
-            },
-            readOnly: d,
-            ref: R,
-            rows: M,
-            value: x
-          }
-        ) }),
-        s === "loading" && /* @__PURE__ */ e("div", { className: o.loadingStatus, "data-test-id": `${c}-loader` }),
-        C && /* @__PURE__ */ F("div", { className: o.tools, children: [
-          s === "success" && /* @__PURE__ */ e("div", { className: o.success, children: /* @__PURE__ */ e(J, { size: 20 }) }),
-          s === "error" && /* @__PURE__ */ e("div", { className: o[s], children: /* @__PURE__ */ e(L, { size: 20 }) }),
-          r == null ? void 0 : r.map(({ icon: a, title: t, callback: H }) => /* @__PURE__ */ e(
-            "button",
+        e === "loading" ? /* @__PURE__ */ t("div", { className: a.loadingStatus, "data-test-id": `${l}-loader`, children: /* @__PURE__ */ t(T, { size: "xx-small" }) }) : null,
+        /* @__PURE__ */ m("div", { className: a.inputWrapper, children: [
+          n && /* @__PURE__ */ t("div", { className: a.placeholder, children: n }),
+          /* @__PURE__ */ t(
+            "input",
             {
-              className: o.toolsButton,
-              disabled: n || d,
-              onClick: H,
-              title: t,
-              children: a
-            },
-            t
-          )),
-          f && /* @__PURE__ */ e("button", { className: o.toolsButton, onClick: q, disabled: n || d, children: /* @__PURE__ */ e(Q, { size: 20, fill: "currentColor" }) })
+              onMouseDown: (r) => {
+                d.current = !0, r.currentTarget.dataset.showFocusRing = "false";
+              },
+              type: "text",
+              placeholder: n,
+              ...o,
+              onFocus: (r) => {
+                var i;
+                d.current || (r.target.dataset.showFocusRing = "true"), (i = o.onFocus) == null || i.call(o, r);
+              },
+              onBlur: (r) => {
+                var i;
+                r.target.dataset.showFocusRing = "false", d.current = !1, (i = o.onBlur) == null || i.call(o, r);
+              },
+              ref: N,
+              className: a.input,
+              "aria-invalid": e === "error",
+              "aria-errormessage": e === "error" ? R : void 0
+            }
+          )
         ] }),
-        m
+        e === "success" ? /* @__PURE__ */ t(w, { size: 16, className: a.iconSuccess, "data-test-id": `${l}-success-icon` }) : null,
+        e === "error" ? /* @__PURE__ */ t(
+          h,
+          {
+            size: 16,
+            className: a.iconError,
+            "data-test-id": `${l}-error-icon`
+          }
+        ) : null,
+        s
       ]
     }
   );
 };
-D.displayName = "Textarea.Root";
-const j = ({ name: c, className: i, ...u }, m) => /* @__PURE__ */ e(
+u.displayName = "TextField.Root";
+const x = ({ name: s, className: c, ...e }, l) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": !0,
-    "data-name": c,
-    ...u,
-    ref: m,
-    className: [o.slot, i].filter(Boolean).join(" ")
+    "data-name": s,
+    ...e,
+    ref: l,
+    className: [a.slot, c].filter(Boolean).join(" ")
   }
 );
-j.displayName = "Textarea.Slot";
-const I = B(D), Y = B(j), K = I;
-K.Root = I;
-K.Slot = Y;
+x.displayName = "TextField.Slot";
+const F = f(u), v = f(x), g = F;
+g.Root = F;
+g.Slot = v;
 export {
-  K as Textarea,
-  D as TextareaRoot,
-  j as TextareaSlot
+  u as TextFieldRoot,
+  x as TextFieldSlot,
+  g as TextInput
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type ForwardedRef,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\n\nimport styles from './styles/textarea.module.scss';\n\n/**\n * @deprecated Use Textarea.Slot instead for custom actions\n */\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * The place where the textarea slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     * @deprecated Use Textarea.Slot instead for custom actions\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const TextareaRoot = (\n    {\n        'data-test-id': dataTestId = 'fondue-textarea',\n        autocomplete,\n        autosize,\n        children,\n        clearable,\n        decorator,\n        defaultValue,\n        disabled,\n        extraActions,\n        focusOnMount,\n        minRows: rows = 1,\n        maxRows,\n        onEnterPressed,\n        readOnly,\n        resizable,\n        selectable = true,\n        status = 'default',\n        value: inputValue,\n        ...props\n    }: TextareaProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>,\n) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    useSyncRefs<HTMLTextAreaElement>(ref, forwardedRef);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            data-test-id={dataTestId}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <div className={styles.textareaWrapper} data-replicated-value={value}>\n                <textarea\n                    {...props}\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        props.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        props.onBlur?.(blurEvent);\n                    }}\n                    autoComplete={autocomplete ? 'on' : 'off'}\n                    className={styles.textarea}\n                    disabled={disabled}\n                    onKeyDown={handleKeyDown}\n                    onInput={(event) => setValue(event.currentTarget.value)}\n                    onSelect={(event) => {\n                        if (!selectable) {\n                            event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                        }\n                    }}\n                    readOnly={readOnly}\n                    ref={ref}\n                    rows={rows}\n                    value={value}\n                ></textarea>\n            </div>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n};\nTextareaRoot.displayName = 'Textarea.Root';\n\nexport type TextareaSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextareaSlot = (\n    { name, className, ...slotProps }: TextareaSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextareaSlot.displayName = 'Textarea.Slot';\n\nconst ForwardedRefTextareaRoot = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaRoot);\nconst ForwardedRefTextareaSlot = forwardRef<HTMLDivElement, TextareaSlotProps>(TextareaSlot);\n\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const Textarea: typeof TextareaRoot & {\n    Root: typeof ForwardedRefTextareaRoot;\n    Slot: typeof ForwardedRefTextareaSlot;\n} = ForwardedRefTextareaRoot;\nTextarea.Root = ForwardedRefTextareaRoot;\nTextarea.Slot = ForwardedRefTextareaSlot;\n"],"names":["TextareaRoot","dataTestId","autocomplete","autosize","children","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","forwardedRef","ref","useRef","wasClicked","useSyncRefs","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross","TextareaSlot","name","className","slotProps","ForwardedRefTextareaRoot","forwardRef","ForwardedRefTextareaSlot","Textarea"],"mappings":"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"}
+{"version":3,"file":"fondue-components35.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type FocusEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        placeholder,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            data-status={status}\n            data-test-id={dataTestId}\n        >\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`}>\n                    <LoadingCircle size=\"xx-small\" />\n                </div>\n            ) : null}\n            <div className={styles.inputWrapper}>\n                {placeholder && <div className={styles.placeholder}>{placeholder}</div>}\n                <input\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    {...inputProps}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        inputProps.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        inputProps.onBlur?.(blurEvent);\n                    }}\n                    ref={ref}\n                    className={styles.input}\n                    aria-invalid={status === 'error'}\n                    aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n                />\n            </div>\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","placeholder","inputProps","ref","wasClicked","useRef","jsxs","styles","jsx","LoadingCircle","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA6GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,aAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,CAACC,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,eAAaC;AAAA,MACb,gBAAcC;AAAA,MAEb,UAAA;AAAA,QAAAD,MAAW,YACR,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,WAC7D,UAAA,gBAAAS,EAACC,GAAA,EAAc,MAAK,WAAA,CAAW,GACnC,IACA;AAAA,QACJ,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAO,cAClB,UAAA;AAAA,UAAAN,KAAe,gBAAAO,EAAC,OAAA,EAAI,WAAWD,EAAO,aAAc,UAAAN,GAAY;AAAA,UACjE,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,aAAa,CAACE,MAAe;AACzB,gBAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,cACrD;AAAA,cACA,MAAK;AAAA,cACL,aAAAT;AAAA,cACC,GAAGC;AAAA,cACJ,SAAS,CAACS,MAAe;;AACrB,gBAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,cACzB;AAAA,cACA,QAAQ,CAACE,MAAc;;AACnB,gBAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,cACxB;AAAA,cACA,KAAAV;AAAA,cACA,WAAWI,EAAO;AAAA,cAClB,gBAAcT,MAAW;AAAA,cACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/D,GACJ;AAAA,QAECF,MAAW,YACR,gBAAAU,EAACM,GAAA,EAAc,MAAM,IAAI,WAAWP,EAAO,aAAa,gBAAc,GAAGR,CAAU,iBAAiB,IACpG;AAAA,QAEHD,MAAW,UACR,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACG,MAAM;AAAA,YACN,WAAWR,EAAO;AAAA,YAClB,gBAAc,GAAGR,CAAU;AAAA,UAAA;AAAA,QAAA,IAE/B;AAAA,QAEHH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;AACAD,EAAc,cAAc;AAQrB,MAAMqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,EAAA,GACtBC,MAGI,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAS;AAAA,IACT,aAAWS;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAW,CAACZ,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,EAAA;AAAA;AAKxEmB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6C1B,CAAa,GACtF2B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components36.js

@@ -1,40 +1,127 @@
-import { jsx as n } from "react/jsx-runtime";
-import d from "./fondue-components89.js";
-import { Slot as p } from "@radix-ui/react-slot";
-import { createContext as u, useContext as a, useMemo as x } from "react";
-import { enUS as s } from "./fondue-components90.js";
-const r = u({
-  theme: "light",
-  dir: "ltr",
-  translations: s
-});
-r.displayName = "ThemeContext";
-const g = () => {
-  const e = a(r);
-  return {
-    ...e,
-    dir: e.dir || "ltr"
+import { jsxs as F, jsx as e } from "react/jsx-runtime";
+import { IconCheckMark as J, IconExclamationMarkTriangle as L, IconCross as Q } from "@frontify/fondue-icons";
+import { forwardRef as B, useRef as y, useState as U, useEffect as z } from "react";
+import { useSyncRefs as X } from "./fondue-components52.js";
+import o from "./fondue-components92.js";
+const D = ({
+  "data-test-id": c = "fondue-textarea",
+  autocomplete: i,
+  autosize: u,
+  children: m,
+  clearable: f,
+  decorator: h,
+  defaultValue: g,
+  disabled: n,
+  extraActions: r,
+  focusOnMount: v,
+  minRows: M = 1,
+  maxRows: k,
+  onEnterPressed: w,
+  readOnly: d,
+  resizable: $,
+  selectable: b = !0,
+  status: s = "default",
+  value: N,
+  ...l
+}, W) => {
+  const R = y(null), T = y(!1);
+  X(R, W);
+  const [x, S] = U(N ?? g ?? ""), C = (r == null ? void 0 : r.length) !== void 0 || f || ["success", "error"].includes(s), q = () => {
+    S("");
+  }, G = (a) => {
+    var t;
+    a.key === "Enter" && (w == null || w(a)), (t = l.onKeyDown) == null || t.call(l, a);
   };
-}, y = ({
-  children: e,
-  theme: t = "light",
-  dir: o = "ltr",
-  translations: m = s,
-  asChild: i = !1
-}) => {
-  const l = i ? p : "div", c = x(
-    () => ({
-      theme: t,
-      dir: o,
-      translations: m
-    }),
-    [o, t, m]
+  return z(() => {
+    S(N ?? g ?? "");
+  }, [g, N]), z(() => {
+    var a;
+    v && ((a = R.current) == null || a.focus());
+  }, [v]), /* @__PURE__ */ F(
+    "div",
+    {
+      className: o.root,
+      "data-autosize": u,
+      "data-clearable": f,
+      "data-disabled": n || d,
+      "data-has-decorator": !!h,
+      "data-has-tools": C,
+      "data-resizable": $,
+      "data-status": s,
+      "data-max-rows": !!k,
+      "data-test-id": c,
+      style: { "--max-rows": `${k}` },
+      children: [
+        h ? /* @__PURE__ */ e("div", { className: o.decorator, children: h }) : null,
+        /* @__PURE__ */ e("div", { className: o.textareaWrapper, "data-replicated-value": x, children: /* @__PURE__ */ e(
+          "textarea",
+          {
+            ...l,
+            onMouseDown: (a) => {
+              T.current = !0, a.currentTarget.dataset.showFocusRing = "false";
+            },
+            onFocus: (a) => {
+              var t;
+              T.current || (a.target.dataset.showFocusRing = "true"), (t = l.onFocus) == null || t.call(l, a);
+            },
+            onBlur: (a) => {
+              var t;
+              a.target.dataset.showFocusRing = "false", T.current = !1, (t = l.onBlur) == null || t.call(l, a);
+            },
+            autoComplete: i ? "on" : "off",
+            className: o.textarea,
+            disabled: n,
+            onKeyDown: G,
+            onInput: (a) => S(a.currentTarget.value),
+            onSelect: (a) => {
+              b || (a.currentTarget.selectionStart = a.currentTarget.selectionEnd);
+            },
+            readOnly: d,
+            ref: R,
+            rows: M,
+            value: x
+          }
+        ) }),
+        s === "loading" && /* @__PURE__ */ e("div", { className: o.loadingStatus, "data-test-id": `${c}-loader` }),
+        C && /* @__PURE__ */ F("div", { className: o.tools, children: [
+          s === "success" && /* @__PURE__ */ e("div", { className: o.success, children: /* @__PURE__ */ e(J, { size: 20 }) }),
+          s === "error" && /* @__PURE__ */ e("div", { className: o[s], children: /* @__PURE__ */ e(L, { size: 20 }) }),
+          r == null ? void 0 : r.map(({ icon: a, title: t, callback: H }) => /* @__PURE__ */ e(
+            "button",
+            {
+              className: o.toolsButton,
+              disabled: n || d,
+              onClick: H,
+              title: t,
+              children: a
+            },
+            t
+          )),
+          f && /* @__PURE__ */ e("button", { className: o.toolsButton, onClick: q, disabled: n || d, children: /* @__PURE__ */ e(Q, { size: 20, fill: "currentColor" }) })
+        ] }),
+        m
+      ]
+    }
   );
-  return /* @__PURE__ */ n(r.Provider, { value: c, children: /* @__PURE__ */ n(l, { dir: o, className: `${d[t]} fondue-theme-provider`, children: e }) });
 };
+D.displayName = "Textarea.Root";
+const j = ({ name: c, className: i, ...u }, m) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-slot": !0,
+    "data-name": c,
+    ...u,
+    ref: m,
+    className: [o.slot, i].filter(Boolean).join(" ")
+  }
+);
+j.displayName = "Textarea.Slot";
+const I = B(D), Y = B(j), K = I;
+K.Root = I;
+K.Slot = Y;
 export {
-  r as ThemeContext,
-  y as ThemeProvider,
-  g as useFondueTheme
+  K as Textarea,
+  D as TextareaRoot,
+  j as TextareaSlot
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/themes';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nimport { enUS, type Translations } from '../../locales';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme?: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir?: 'ltr' | 'rtl';\n    /**\n     * Translations object to use for component strings.\n     * Import from '@frontify/fondue/components/locales' or provide your own.\n     * Must be a complete Translations object.\n     * @default \"enUS\"\n     * @example\n     * ```tsx\n     * import { deDE } from '@frontify/fondue/components/locales';\n     * <ThemeProvider translations={deDE}>...</ThemeProvider>\n     * ```\n     */\n    translations?: Translations;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\ntype ThemeContextValue = {\n    theme: AvailableTheme;\n    dir: 'ltr' | 'rtl';\n    translations: Translations;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue>({\n    theme: 'light',\n    dir: 'ltr',\n    translations: enUS,\n});\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    const context = useContext(ThemeContext);\n    // Ensure we always have a valid direction, defaulting to 'ltr' if not provided\n    return {\n        ...context,\n        dir: context.dir || 'ltr',\n    };\n};\n\nexport const ThemeProvider = ({\n    children,\n    theme = 'light',\n    dir = 'ltr',\n    translations = enUS,\n    asChild = false,\n}: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            dir,\n            translations,\n        }),\n        [dir, theme, translations],\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={`${styles[theme]} fondue-theme-provider`}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","enUS","useFondueTheme","context","useContext","ThemeProvider","children","theme","dir","translations","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;;AA+CO,MAAMA,IAAeC,EAAiC;AAAA,EACzD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,cAAcC;AAClB,CAAC;AACDF,EAAa,cAAc;AAEpB,MAAMG,IAAiB,MAAM;AAChC,QAAMC,IAAUC,EAAWL,CAAY;AAEvC,SAAO;AAAA,IACH,GAAGI;AAAA,IACH,KAAKA,EAAQ,OAAO;AAAA,EAAA;AAE5B,GAEaE,IAAgB,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAeR;AAAA,EACf,SAAAS,IAAU;AACd,MAA0B;AACtB,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC;AAAA,IACjB,OAAO;AAAA,MACH,OAAAP;AAAA,MACA,KAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEJ,CAACD,GAAKD,GAAOE,CAAY;AAAA,EAAA;AAG7B,2BACKV,EAAa,UAAb,EAAsB,OAAOc,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAH,GAAU,WAAW,GAAGQ,EAAOT,CAAK,CAAC,0BACtC,UAAAD,GACL,GACJ;AAER;"}
+{"version":3,"file":"fondue-components36.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type ForwardedRef,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\n\nimport styles from './styles/textarea.module.scss';\n\n/**\n * @deprecated Use Textarea.Slot instead for custom actions\n */\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * The place where the textarea slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     * @deprecated Use Textarea.Slot instead for custom actions\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nexport const TextareaRoot = (\n    {\n        'data-test-id': dataTestId = 'fondue-textarea',\n        autocomplete,\n        autosize,\n        children,\n        clearable,\n        decorator,\n        defaultValue,\n        disabled,\n        extraActions,\n        focusOnMount,\n        minRows: rows = 1,\n        maxRows,\n        onEnterPressed,\n        readOnly,\n        resizable,\n        selectable = true,\n        status = 'default',\n        value: inputValue,\n        ...props\n    }: TextareaProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>,\n) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    useSyncRefs<HTMLTextAreaElement>(ref, forwardedRef);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            data-test-id={dataTestId}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <div className={styles.textareaWrapper} data-replicated-value={value}>\n                <textarea\n                    {...props}\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        props.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        props.onBlur?.(blurEvent);\n                    }}\n                    autoComplete={autocomplete ? 'on' : 'off'}\n                    className={styles.textarea}\n                    disabled={disabled}\n                    onKeyDown={handleKeyDown}\n                    onInput={(event) => setValue(event.currentTarget.value)}\n                    onSelect={(event) => {\n                        if (!selectable) {\n                            event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                        }\n                    }}\n                    readOnly={readOnly}\n                    ref={ref}\n                    rows={rows}\n                    value={value}\n                ></textarea>\n            </div>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n};\nTextareaRoot.displayName = 'Textarea.Root';\n\nexport type TextareaSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextareaSlot = (\n    { name, className, ...slotProps }: TextareaSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextareaSlot.displayName = 'Textarea.Slot';\n\nconst ForwardedRefTextareaRoot = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaRoot);\nconst ForwardedRefTextareaSlot = forwardRef<HTMLDivElement, TextareaSlotProps>(TextareaSlot);\n\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const Textarea: typeof TextareaRoot & {\n    Root: typeof ForwardedRefTextareaRoot;\n    Slot: typeof ForwardedRefTextareaSlot;\n} = ForwardedRefTextareaRoot;\nTextarea.Root = ForwardedRefTextareaRoot;\nTextarea.Slot = ForwardedRefTextareaSlot;\n"],"names":["TextareaRoot","dataTestId","autocomplete","autosize","children","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","forwardedRef","ref","useRef","wasClicked","useSyncRefs","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross","TextareaSlot","name","className","slotProps","ForwardedRefTextareaRoot","forwardRef","ForwardedRefTextareaSlot","Textarea"],"mappings":"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"}