@frontify/fondue-components 24.0.0 → 24.2.0

package/dist/fondue-components31.js

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

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.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 SyntheticEvent,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\n\nimport styles from './styles/textarea.module.scss';\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     * 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     */\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\nconst TextareaComponent = (\n    {\n        'data-test-id': dataTestId = 'fondue-textarea',\n        autocomplete,\n        autosize,\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        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-replicated-value={value}\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            <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            {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        </div>\n    );\n};\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaComponent);\nTextarea.displayName = 'Textarea';\n"],"names":["TextareaComponent","dataTestId","autocomplete","autosize","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","Textarea","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components31.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';\nimport { cn } from '#/utilities/styleUtilities';\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        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 <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;\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","cn","ForwardedRefTextareaRoot","forwardRef","ForwardedRefTextareaSlot","Textarea"],"mappings":"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"}

package/dist/fondue-components36.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components91.js";
-import { colorToCss as e } from "./fondue-components92.js";
+import s from "./fondue-components89.js";
+import { colorToCss as e } from "./fondue-components90.js";
 const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
   const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
   return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });

package/dist/fondue-components37.js

@@ -1,4 +1,4 @@
-const s = "_root_i684q_3", o = "_dismiss_i684q_156", t = {
+const s = "_root_1swzw_3", o = "_dismiss_1swzw_156", t = {
   root: s,
   dismiss: o
 };

package/dist/fondue-components41.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components90.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components91.js";
 import { sv as e } from "./fondue-components40.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${t}`,

package/dist/fondue-components44.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components90.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components91.js";
 import { sv as e } from "./fondue-components40.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong data-[readonly="true"]:tw-pointer-events-none ${t}`,

package/dist/fondue-components46.js

@@ -3,7 +3,7 @@ import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/
 import { forwardRef as P } from "react";
 import { useTranslation as w } from "./fondue-components35.js";
 import { Button as y } from "./fondue-components6.js";
-import a from "./fondue-components89.js";
+import a from "./fondue-components92.js";
 import { getColorWithName as z, colorToCss as x } from "./fondue-components49.js";
 const c = ({
   id: m,

package/dist/fondue-components85.js

@@ -1,26 +1,28 @@
-const o = "_root_18lbr_5", t = "_textarea_18lbr_73", s = "_slot_18lbr_123", r = "_decorator_18lbr_137", _ = "_tools_18lbr_150", l = "_toolsButton_18lbr_162", c = "_success_18lbr_194", n = "_error_18lbr_198", e = "_loadingStatus_18lbr_202", a = "_spin_18lbr_1", b = {
-  root: o,
-  textarea: t,
-  slot: s,
+const t = "_root_14jmh_5", o = "_textareaWrapper_14jmh_62", s = "_textarea_14jmh_62", _ = "_slot_14jmh_120", r = "_decorator_14jmh_145", e = "_tools_14jmh_158", a = "_toolsButton_14jmh_190", c = "_success_14jmh_222", n = "_error_14jmh_226", l = "_loadingStatus_14jmh_230", h = "_spin_14jmh_1", j = {
+  root: t,
+  textareaWrapper: o,
+  textarea: s,
+  slot: _,
   decorator: r,
-  tools: _,
-  toolsButton: l,
+  tools: e,
+  toolsButton: a,
   success: c,
   error: n,
-  loadingStatus: e,
-  spin: a
+  loadingStatus: l,
+  spin: h
 };
 export {
   r as decorator,
-  b as default,
+  j as default,
   n as error,
-  e as loadingStatus,
-  o as root,
-  s as slot,
-  a as spin,
+  l as loadingStatus,
+  t as root,
+  _ as slot,
+  h as spin,
   c as success,
-  t as textarea,
-  _ as tools,
-  l as toolsButton
+  s as textarea,
+  o as textareaWrapper,
+  e as tools,
+  a as toolsButton
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/fondue-components89.js

@@ -1,20 +1,8 @@
-const o = "_root_3jye8_5", c = "_clearIcon_3jye8_35", t = "_caret_3jye8_52", _ = "_colorName_3jye8_72", n = "_button_3jye8_93", e = "_colorIndicator_3jye8_105", r = "_actions_3jye8_124", a = {
-  root: o,
-  clearIcon: c,
-  caret: t,
-  colorName: _,
-  button: n,
-  colorIndicator: e,
-  actions: r
+const o = "_root_18sn3_2", t = {
+  root: o
 };
 export {
-  r as actions,
-  n as button,
-  t as caret,
-  c as clearIcon,
-  e as colorIndicator,
-  _ as colorName,
-  a as default,
+  t as default,
   o as root
 };
 //# sourceMappingURL=fondue-components89.js.map

package/dist/fondue-components89.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components89.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components89.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components90.js

@@ -1,5 +1,8 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+};
 export {
-  t as FOCUS_OUTLINE
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components90.js.map

package/dist/fondue-components90.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components90.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components90.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/fondue-components91.js

@@ -1,8 +1,5 @@
-const o = "_root_b0bc4_2", t = {
-  root: o
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  t as default,
-  o as root
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components91.js.map

package/dist/fondue-components91.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components91.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components91.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components92.js

@@ -1,8 +1,20 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+const o = "_root_3jye8_5", c = "_clearIcon_3jye8_35", t = "_caret_3jye8_52", _ = "_colorName_3jye8_72", n = "_button_3jye8_93", e = "_colorIndicator_3jye8_105", r = "_actions_3jye8_124", a = {
+  root: o,
+  clearIcon: c,
+  caret: t,
+  colorName: _,
+  button: n,
+  colorIndicator: e,
+  actions: r
 };
 export {
-  r as colorToCss
+  r as actions,
+  n as button,
+  t as caret,
+  c as clearIcon,
+  e as colorIndicator,
+  _ as colorName,
+  a as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components92.js.map

package/dist/fondue-components92.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components92.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components92.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/index.d.ts

@@ -804,6 +804,9 @@ declare const enUS: {
     Badge_dismiss: string;
 };
 
+/**
+ * @deprecated Use Textarea.Slot instead for custom actions
+ */
 declare type ExtraAction = {
     icon: ReactElement;
     title: string;
@@ -1042,6 +1045,10 @@ declare const ForwardedRefSelectItemGroup: ForwardRefExoticComponent<SelectItemG
 
 declare const ForwardedRefSelectSlot: ForwardRefExoticComponent<SelectSlotProps & RefAttributes<HTMLDivElement>>;
 
+declare const ForwardedRefTextareaRoot: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+declare const ForwardedRefTextareaSlot: ForwardRefExoticComponent<TextareaSlotProps & RefAttributes<HTMLDivElement>>;
+
 declare const ForwardedRefTextFieldRoot: ForwardRefExoticComponent<TextInputProps & RefAttributes<HTMLInputElement>>;
 
 declare const ForwardedRefTextFieldSlot: ForwardRefExoticComponent<TextFieldSlotProps & RefAttributes<HTMLDivElement>>;
@@ -2134,13 +2141,20 @@ declare const Text_2: (<TTag extends TagType_2 = "span">(props: TextProps<TTag>
 };
 export { Text_2 as Text }
 
-export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: typeof TextareaRoot & {
+    Root: typeof ForwardedRefTextareaRoot;
+    Slot: typeof ForwardedRefTextareaSlot;
+};
 
 declare type TextareaProps = {
     /**
      * The id of the textarea
      */
     id?: string;
+    /**
+     * The place where the textarea slots are placed
+     */
+    children?: ReactNode;
     /**
      * If `true`, Textarea will have `autoComplete` functionality
      */
@@ -2164,6 +2178,7 @@ declare type TextareaProps = {
     disabled?: boolean;
     /**
      * Collection of extra actions the input can preform
+     * @deprecated Use Textarea.Slot instead for custom actions
      */
     extraActions?: ExtraAction[];
     /**
@@ -2227,6 +2242,17 @@ declare type TextareaProps = {
     value?: string;
 };
 
+declare const TextareaRoot: {
+    ({ "data-test-id": dataTestId, autocomplete, autosize, children, clearable, decorator, defaultValue, disabled, extraActions, focusOnMount, minRows: rows, maxRows, onEnterPressed, readOnly, resizable, selectable, status, value: inputValue, ...props }: TextareaProps, forwardedRef: ForwardedRef<HTMLTextAreaElement>): JSX_2.Element;
+    displayName: string;
+};
+
+declare type TextareaSlotProps = {
+    children: ReactNode;
+    name?: 'left' | 'right';
+    className?: string;
+};
+
 declare type TextColor = 'default' | 'weak' | 'x-weak' | 'disabled' | 'negative' | 'positive' | 'warning' | 'interactive';
 
 declare type TextElementMap = {