@frontify/fondue-components 19.2.0 → 19.3.0

package/dist/fondue-components26.js

@@ -1,125 +1,132 @@
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-import { createContext as y, forwardRef as l, useContext as f, useRef as x, useEffect as D, useCallback as O, createElement as w } from "react";
-import { IconDotsHorizontal as V } from "@frontify/fondue-icons";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { createContext as E, forwardRef as l, useContext as f, useRef as w, useEffect as O, useMemo as I, useCallback as q, createElement as z } from "react";
+import { IconDotsHorizontal as B } from "@frontify/fondue-icons";
 import * as c from "@radix-ui/react-tabs";
-import { useControllableState as q } from "./fondue-components61.js";
-import { Button as B } from "./fondue-components6.js";
+import { useControllableState as H } from "./fondue-components62.js";
+import { Button as M } from "./fondue-components6.js";
 import { Dropdown as d } from "./fondue-components11.js";
-import { useTabTriggers as H } from "./fondue-components74.js";
-import r from "./fondue-components75.js";
-const T = y({
+import { useTabTriggers as W } from "./fondue-components75.js";
+import n from "./fondue-components76.js";
+const m = E({
   value: "",
   disabled: !1
-}), z = y({
+});
+m.displayName = "TabConfigContext";
+const v = E({
   addTrigger: () => {
   }
-}), E = ({
-  padding: a = "compact",
+});
+v.displayName = "TabTriggerContext";
+const L = ({
+  padding: t = "compact",
   activeTab: o,
   defaultActiveTab: s,
-  size: n = "medium",
-  onActiveTabChange: m,
-  children: u,
-  variant: p = "default",
+  size: r = "medium",
+  onActiveTabChange: u,
+  children: p,
+  variant: T = "default",
   ...i
-}, P) => {
-  var N;
-  const [v, g] = q({
+}, S) => {
+  var y;
+  const [g, C] = H({
     prop: o,
     defaultProp: s,
-    onChange: m
-  }), C = O(
+    onChange: u
+  }), x = q(
     (e) => {
-      g(e);
+      C(e);
     },
-    [g]
-  ), { triggerListRef: S, activeIndicatorRef: j, triggers: h, triggersOutOfView: R, addTrigger: A } = H({
-    activeTab: v
-  });
-  return /* @__PURE__ */ t(z.Provider, { value: { addTrigger: A }, children: /* @__PURE__ */ b(
+    [C]
+  ), { triggerListRef: j, activeIndicatorRef: A, triggers: N, triggersOutOfView: h, addTrigger: R } = W({
+    activeTab: g
+  }), D = I(() => ({ addTrigger: R }), [R]);
+  return /* @__PURE__ */ a(v.Provider, { value: D, children: /* @__PURE__ */ b(
     c.Root,
     {
-      ref: P,
-      className: r.root,
-      onValueChange: C,
-      value: v ?? ((N = h[0]) == null ? void 0 : N.value),
-      "data-tabs-content-padding": a,
-      "data-tabs-variant": p,
+      ref: S,
+      className: n.root,
+      onValueChange: x,
+      value: g ?? ((y = N[0]) == null ? void 0 : y.value),
+      "data-tabs-content-padding": t,
+      "data-tabs-variant": T,
       ...i,
       children: [
-        /* @__PURE__ */ b("div", { className: r.triggerListWrapper, children: [
-          /* @__PURE__ */ t(c.List, { ref: S, "data-size": n, className: r.triggerList, children: h.map((e) => /* @__PURE__ */ w(
+        /* @__PURE__ */ b("div", { className: n.triggerListWrapper, children: [
+          /* @__PURE__ */ a(c.List, { ref: j, "data-size": r, className: n.triggerList, children: N.map((e) => /* @__PURE__ */ z(
             c.Trigger,
             {
               ...e.props,
               key: e.value,
               value: e.value,
               disabled: e.disabled,
-              className: r.trigger,
+              className: n.trigger,
               ref: e.ref
             },
             e.element
           )) }),
           /* @__PURE__ */ b(d.Root, { children: [
-            R.length > 0 && /* @__PURE__ */ t(d.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ t(B, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ t(V, { size: 16 }) }) }),
-            /* @__PURE__ */ t(d.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: R.map((e) => /* @__PURE__ */ w(
+            h.length > 0 && /* @__PURE__ */ a(d.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(M, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(B, { size: 16 }) }) }),
+            /* @__PURE__ */ a(d.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ z(
               d.Item,
               {
                 ...e.props,
                 disabled: e.disabled,
-                onSelect: () => C(e.value),
+                onSelect: () => x(e.value),
                 key: e.value
               },
               e.element
             )) })
           ] }),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ a(
             "span",
             {
               "data-test-id": "active-tab-indicator",
-              ref: j,
-              className: r.activeIndicator
+              ref: A,
+              className: n.activeIndicator
             }
           )
         ] }),
-        u
+        p
       ]
     }
   ) });
 };
-E.displayName = "Tabs.Root";
-const I = ({ children: a, value: o, disabled: s }) => /* @__PURE__ */ t(T.Provider, { value: { value: o, disabled: s }, children: a });
-I.displayName = "Tabs.Tab";
-const L = ({ children: a, ...o }, s) => {
-  const { value: n, disabled: m } = f(T), { addTrigger: u } = f(z), p = x(null), i = x();
-  return D(() => {
-    u({
-      ref: p || s,
-      value: n ?? "",
-      disabled: m,
+L.displayName = "Tabs.Root";
+const V = ({ children: t, value: o, disabled: s }) => {
+  const r = I(() => ({ value: o, disabled: s }), [o, s]);
+  return /* @__PURE__ */ a(m.Provider, { value: r, children: t });
+};
+V.displayName = "Tabs.Tab";
+const k = ({ children: t, ...o }, s) => {
+  const { value: r, disabled: u } = f(m), { addTrigger: p } = f(v), T = w(null), i = w();
+  return O(() => {
+    p({
+      ref: T || s,
+      value: r ?? "",
+      disabled: u,
       props: o,
-      element: a,
+      element: t,
       previousElement: i.current
-    }), i.current = a;
-  }, [a]), null;
+    }), i.current = t;
+  }, [t]), null;
 };
-L.displayName = "Tabs.Trigger";
-const k = ({ children: a, ...o }, s) => {
-  const { value: n } = f(T);
-  return /* @__PURE__ */ t(c.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: a });
+k.displayName = "Tabs.Trigger";
+const P = ({ children: t, ...o }, s) => {
+  const { value: r } = f(m);
+  return /* @__PURE__ */ a(c.Content, { ref: s, ...o, className: n.content, value: r ?? "", children: t });
 };
-k.displayName = "Tabs.Content";
-const X = {
-  Root: l(E),
-  Tab: l(I),
-  Trigger: l(L),
-  Content: l(k)
+P.displayName = "Tabs.Content";
+const Z = {
+  Root: l(L),
+  Tab: l(V),
+  Trigger: l(k),
+  Content: l(P)
 };
 export {
-  X as Tabs,
-  k as TabsContent,
-  E as TabsRoot,
-  I as TabsTab,
-  L as TabsTrigger
+  Z as Tabs,
+  P as TabsContent,
+  L as TabsRoot,
+  V as TabsTab,
+  k as TabsTrigger
 };
 //# sourceMappingURL=fondue-components26.js.map

package/dist/fondue-components26.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components26.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n    /**\n     * Select the used variant\n     * “default 'default'\n     */\n    variant?: 'default' | 'pill';\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                data-tabs-variant={variant}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => (\n    <TabConfigContext.Provider value={{ value, disabled }}>{children}</TabConfigContext.Provider>\n);\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","variant","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components26.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n    /**\n     * Select the used variant\n     * “default 'default'\n     */\n    variant?: 'default' | 'pill';\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\nTabConfigContext.displayName = 'TabConfigContext';\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\nTabTriggerContext.displayName = 'TabTriggerContext';\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    const contextValue = useMemo(() => ({ addTrigger }), [addTrigger]);\n\n    return (\n        <TabTriggerContext.Provider value={contextValue}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                data-tabs-variant={variant}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => {\n    const contextValue = useMemo(() => ({ value, disabled }), [value, disabled]);\n\n    return <TabConfigContext.Provider value={contextValue}>{children}</TabConfigContext.Provider>;\n};\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n    asChild?: boolean;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","variant","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":";;;;;;;;;AA0DA,MAAMA,IAAmBC,EAGtB;AAAA,EACC,OAAO;AAAA,EACP,UAAU;AACd,CAAC;AACDD,EAAiB,cAAc;AAE/B,MAAME,IAAoBD,EAEvB;AAAA,EACC,YAAY,MAAM;AAAA,EAAC;AACvB,CAAC;AACDC,EAAkB,cAAc;AAEzB,MAAMC,IAAW,CACpB;AAAA,EACI,SAAAC,IAAU;AAAA,EACV,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,GAAGC;AACP,GACAC,MACC;;AACD,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAqB;AAAA,IACnD,MAAMV;AAAA,IACN,aAAaC;AAAA,IACb,UAAUE;AAAA,EAAA,CACb,GAEKQ,IAAqBC;AAAA,IACvB,CAACC,MAAkB;AACf,MAAAJ,EAAaI,CAAK;AAAA,IACtB;AAAA,IACA,CAACJ,CAAY;AAAA,EAAA,GAGX,EAAE,gBAAAK,GAAgB,oBAAAC,GAAoB,UAAAC,GAAU,mBAAAC,GAAmB,YAAAC,EAAA,IAAeC,EAAe;AAAA,IACnG,WAAAX;AAAA,EAAA,CACH,GAEKY,IAAeC,EAAQ,OAAO,EAAE,YAAAH,MAAe,CAACA,CAAU,CAAC;AAEjE,SACI,gBAAAI,EAACzB,EAAkB,UAAlB,EAA2B,OAAOuB,GAC/B,UAAA,gBAAAG;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAjB;AAAA,MACA,WAAWkB,EAAO;AAAA,MAClB,eAAed;AAAA,MACf,OAAOH,OAAakB,IAAAV,EAAS,CAAC,MAAV,gBAAAU,EAAa;AAAA,MACjC,6BAA2B3B;AAAA,MAC3B,qBAAmBM;AAAA,MAClB,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAiB,EAAC,OAAA,EAAI,WAAWE,EAAO,oBACnB,UAAA;AAAA,UAAA,gBAAAH,EAACE,EAAU,MAAV,EAAe,KAAKV,GAAgB,aAAWZ,GAAM,WAAWuB,EAAO,aACnE,UAAAT,EAAS,IAAI,CAACW,MACX,gBAAAC;AAAA,YAACJ,EAAU;AAAA,YAAV;AAAA,cACI,GAAGG,EAAQ;AAAA,cACZ,KAAKA,EAAQ;AAAA,cACb,OAAOA,EAAQ;AAAA,cACf,UAAUA,EAAQ;AAAA,cAClB,WAAWF,EAAO;AAAA,cAClB,KAAKE,EAAQ;AAAA,YAAA;AAAA,YAEZA,EAAQ;AAAA,UAAA,CAEhB,GACL;AAAA,UACA,gBAAAJ,EAACM,EAAS,MAAT,EACI,UAAA;AAAA,YAAAZ,EAAkB,SAAS,KACxB,gBAAAK,EAACO,EAAS,SAAT,EAAiB,gBAAa,mCAC3B,UAAA,gBAAAP,EAACQ,GAAA,EAAO,UAAS,WAAU,QAAO,UAAS,MAAK,SAC5C,4BAACC,GAAA,EAAmB,MAAM,IAAI,EAAA,CAClC,EAAA,CACJ;AAAA,YAEJ,gBAAAT,EAACO,EAAS,SAAT,EAAiB,OAAM,OAAM,gBAAa,mCACtC,UAAAZ,EAAkB,IAAI,CAACU,MACpB,gBAAAC;AAAA,cAACC,EAAS;AAAA,cAAT;AAAA,gBACI,GAAGF,EAAQ;AAAA,gBACZ,UAAUA,EAAQ;AAAA,gBAClB,UAAU,MAAMhB,EAAmBgB,EAAQ,KAAK;AAAA,gBAChD,KAAKA,EAAQ;AAAA,cAAA;AAAA,cAEZA,EAAQ;AAAA,YAAA,CAEhB,EAAA,CACL;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,KAAKP;AAAA,cACL,WAAWU,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB,GACJ;AAAA,QACCrB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAN,EAAS,cAAc;AAQhB,MAAMkC,IAAU,CAAC,EAAE,UAAA5B,GAAU,OAAAS,GAAO,UAAAoB,QAA6B;AACpE,QAAMb,IAAeC,EAAQ,OAAO,EAAE,OAAAR,GAAO,UAAAoB,MAAa,CAACpB,GAAOoB,CAAQ,CAAC;AAE3E,2BAAQtC,EAAiB,UAAjB,EAA0B,OAAOyB,GAAe,UAAAhB,GAAS;AACrE;AACA4B,EAAQ,cAAc;AAMf,MAAME,IAAc,CAAC,EAAE,UAAA9B,GAAU,GAAGE,EAAA,GAA2BC,MAAyC;AAC3G,QAAM,EAAE,OAAAM,GAAO,UAAAoB,MAAaE,EAAWxC,CAAgB,GAEjD,EAAE,YAAAuB,EAAA,IAAeiB,EAAWtC,CAAiB,GAE7CuC,IAAWC,EAA0B,IAAI,GACzCC,IAAkBD,EAAA;AAExB,SAAAE,EAAU,MAAM;AACZ,IAAArB,EAAW;AAAA,MACP,KAAKkB,KAAY7B;AAAA,MACjB,OAAOM,KAAS;AAAA,MAChB,UAAAoB;AAAA,MACA,OAAA3B;AAAA,MACA,SAASF;AAAA,MACT,iBAAiBkC,EAAgB;AAAA,IAAA,CACpC,GACDA,EAAgB,UAAUlC;AAAA,EAE9B,GAAG,CAACA,CAAQ,CAAC,GAEN;AACX;AACA8B,EAAY,cAAc;AAOnB,MAAMM,IAAc,CAAC,EAAE,UAAApC,GAAU,GAAGqC,EAAA,GAA+BlC,MAAsC;AAC5G,QAAM,EAAE,OAAAM,EAAA,IAAUsB,EAAWxC,CAAgB;AAE7C,SACI,gBAAA2B,EAACE,EAAU,SAAV,EAAkB,KAAAjB,GAAW,GAAGkC,GAAW,WAAWhB,EAAO,SAAS,OAAOZ,KAAS,IAClF,UAAAT,EAAA,CACL;AAER;AACAoC,EAAY,cAAc;AAEnB,MAAME,IAAO;AAAA,EAChB,MAAMC,EAA0C7C,CAAQ;AAAA,EACxD,KAAK6C,EAAyCX,CAAO;AAAA,EACrD,SAASW,EAAgDT,CAAW;AAAA,EACpE,SAASS,EAA6CH,CAAW;AACrE;"}

package/dist/fondue-components27.js

@@ -1,7 +1,7 @@
 import { jsx as p } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { cn as c } from "./fondue-components36.js";
-import t from "./fondue-components76.js";
+import { cn as c } from "./fondue-components37.js";
+import t from "./fondue-components77.js";
 const x = l(
   ({
     children: e,

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.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';\nimport { cn } from '#/utilities/styleUtilities';\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={cn([\n                styles.root,\n                styles[`size-${size}`],\n                styles[`weight-${weight}`],\n                styles[boxColor ? `color-box-${boxColor}` : `color-${color}`],\n                className,\n            ])}\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","cn","styles"],"mappings":";;;;AAoFO,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,KAEPC,MAEA,gBAAAC;AAAA,IAACR;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWS,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQT,CAAI,EAAE;AAAA,QACrBS,EAAO,UAAUR,CAAM,EAAE;AAAA,QACzBQ,EAAON,IAAW,aAAaA,CAAQ,KAAK,SAASD,CAAK,EAAE;AAAA,QAC5DE;AAAA,MAAA,CACH;AAAA,MAED,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;AAIAF,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components27.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';\nimport { cn } from '#/utilities/styleUtilities';\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={cn([\n                styles.root,\n                styles[`size-${size}`],\n                styles[`weight-${weight}`],\n                styles[boxColor ? `color-box-${boxColor}` : `color-${color}`],\n                className,\n            ])}\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","cn","styles"],"mappings":";;;;AAoFO,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,WAAWS,EAAG;AAAA,QACVC,EAAO;AAAA,QACPA,EAAO,QAAQT,CAAI,EAAE;AAAA,QACrBS,EAAO,UAAUR,CAAM,EAAE;AAAA,QACzBQ,EAAON,IAAW,aAAaA,CAAQ,KAAK,SAASD,CAAK,EAAE;AAAA,QAC5DE;AAAA,MAAA,CACH;AAAA,MAED,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEH,UAAAP;AAAA,IAAA;AAAA,EAAA;AAGb;AAIAF,EAAK,cAAc;"}

package/dist/fondue-components28.js

@@ -1,8 +1,8 @@
 import { jsxs as w, jsx as l } from "react/jsx-runtime";
 import { IconCheckMark as N, IconExclamationMarkTriangle as S } from "@frontify/fondue-icons";
 import { forwardRef as n, useRef as T } from "react";
-import { cn as m } from "./fondue-components36.js";
-import t from "./fondue-components77.js";
+import { cn as m } from "./fondue-components37.js";
+import t from "./fondue-components78.js";
 const f = ({
   children: c,
   className: i,
@@ -49,16 +49,7 @@ const f = ({
   ] });
 };
 f.displayName = "TextField.Root";
-const u = ({ name: c, className: i, ...e }, r) => /* @__PURE__ */ l(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": c,
-    ...e,
-    ref: r,
-    className: m(t.slot, i)
-  }
-);
+const u = ({ name: c, className: i, ...e }, r) => /* @__PURE__ */ l("div", { "data-slot": !0, "data-name": c, ...e, ref: r, className: m(t.slot, i) });
 u.displayName = "TextField.Slot";
 const x = n(f), h = n(u), F = x;
 F.Root = x;

package/dist/fondue-components28.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components28.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    type FocusEvent,\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\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\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={true}\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={cn(styles.slot, className)}\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","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,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMV,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAU,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACVM,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACjB,UAACP,EAAW,YACDO,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcT,MAAW;AAAA,QACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,MAAA;AAAA,IAC/D;AAAA,IAECF,MAAW,YACP,gBAAAU,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGR,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGR,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQf,MAAAoB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAnB,GAAW,GAAGoB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMV,CAAS;AAAA,EAAA;AACxC;AAIRkB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CzB,CAAa,GACtF0B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components28.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    type FocusEvent,\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\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        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\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\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 <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","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,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,MAAMV,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAAD,MAAW,YACR,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACrB,UAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACnB,UAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcT,MAAW;AAAA,QACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAG9DF,MAAW,YACR,gBAAAU,EAACK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGR,CAAU,iBAAiB,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGR,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQrB,MAAMoB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAnB,GAAW,GAAGoB,EAAA,GACtBC,MAEO,gBAAAV,EAAC,OAAA,EAAI,aAAS,IAAC,aAAWQ,GAAO,GAAGC,GAAW,KAAKC,GAAc,WAAWZ,EAAGC,EAAO,MAAMV,CAAS,GAAG;AAGpHkB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CzB,CAAa,GACtF0B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components29.js

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

package/dist/fondue-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components29.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, type ReactNode } from 'react';\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     * 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\nexport const ThemeContext = createContext<AvailableTheme>('light');\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({ children, theme = 'light', asChild = false }: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n    return (\n        <ThemeContext.Provider value={theme}>\n            <Comp className={styles[theme]}>{children}</Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","useFondueTheme","useContext","ThemeProvider","children","theme","asChild","Comp","Slot","jsx","styles"],"mappings":";;;;AAsBa,MAAAA,IAAeC,EAA8B,OAAO,GAEpDC,IAAiB,MACnBC,EAAWH,CAAY,GAGrBI,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,SAAAC,IAAU,SAAgC;AAC3F,QAAAC,IAAOD,IAAUE,IAAO;AAC9B,SACK,gBAAAC,EAAAV,EAAa,UAAb,EAAsB,OAAOM,GAC1B,UAAC,gBAAAI,EAAAF,GAAA,EAAK,WAAWG,EAAOL,CAAK,GAAI,UAAAD,EAAS,CAAA,GAC9C;AAER;"}
+{"version":3,"file":"fondue-components29.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    type ChangeEventHandler,\n    useEffect,\n    useRef,\n    useState,\n    type FocusEventHandler,\n    type KeyboardEventHandler,\n    type SyntheticEvent,\n    type ReactElement,\n    type CSSProperties,\n} from 'react';\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    'data-test-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    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 Textarea = ({\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    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\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            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"],"names":["Textarea","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","ref","useRef","wasClicked","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross"],"mappings":"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"}