@frontify/fondue-components 4.0.0 → 4.0.1

package/dist/fondue-components.js

@@ -3,42 +3,44 @@ import { Box as t } from "./fondue-components3.js";
 import { Button as x } from "./fondue-components4.js";
 import { Checkbox as f } from "./fondue-components5.js";
 import { ColorPicker as l } from "./fondue-components6.js";
-import { Dialog as c } from "./fondue-components7.js";
-import { Divider as S } from "./fondue-components8.js";
-import { Dropdown as g } from "./fondue-components9.js";
-import { Flex as B } from "./fondue-components10.js";
-import { Flyout as D } from "./fondue-components11.js";
-import { Grid as h } from "./fondue-components12.js";
-import { Label as w } from "./fondue-components13.js";
-import { LoadingBar as L } from "./fondue-components14.js";
-import { ScrollArea as v } from "./fondue-components15.js";
-import { Section as A } from "./fondue-components16.js";
-import { SegmentedControl as I } from "./fondue-components17.js";
-import { Select as j } from "./fondue-components18.js";
-import { Slider as s } from "./fondue-components19.js";
+import { Dialog as a } from "./fondue-components7.js";
+import { Divider as d } from "./fondue-components8.js";
+import { Dropdown as b } from "./fondue-components9.js";
+import { Flex as u } from "./fondue-components10.js";
+import { Flyout as C } from "./fondue-components11.js";
+import { Grid as T } from "./fondue-components12.js";
+import { Label as k } from "./fondue-components13.js";
+import { LoadingBar as F } from "./fondue-components14.js";
+import { ScrollArea as s } from "./fondue-components15.js";
+import { Section as y } from "./fondue-components16.js";
+import { SegmentedControl as G } from "./fondue-components17.js";
+import { Select as P } from "./fondue-components18.js";
+import { Slider as q } from "./fondue-components19.js";
 import { Switch as E } from "./fondue-components20.js";
-import { TextInput as J } from "./fondue-components21.js";
-import { Tooltip as M } from "./fondue-components22.js";
+import { Tabs as J } from "./fondue-components21.js";
+import { TextInput as M } from "./fondue-components22.js";
+import { Tooltip as O } from "./fondue-components23.js";
 export {
   t as Box,
   x as Button,
   f as Checkbox,
   l as ColorPicker,
-  c as Dialog,
-  S as Divider,
-  g as Dropdown,
-  B as Flex,
-  D as Flyout,
-  h as Grid,
-  w as Label,
-  L as LoadingBar,
-  v as ScrollArea,
-  A as Section,
-  I as SegmentedControl,
-  j as Select,
-  s as Slider,
+  a as Dialog,
+  d as Divider,
+  b as Dropdown,
+  u as Flex,
+  C as Flyout,
+  T as Grid,
+  k as Label,
+  F as LoadingBar,
+  s as ScrollArea,
+  y as Section,
+  G as SegmentedControl,
+  P as Select,
+  q as Slider,
   E as Switch,
-  J as TextInput,
-  M as Tooltip
+  J as Tabs,
+  M as TextInput,
+  O as Tooltip
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

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

package/dist/fondue-components10.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components23.js";
-import i from "./fondue-components40.js";
+import { propsToCssVariables as a } from "./fondue-components24.js";
+import i from "./fondue-components41.js";
 const l = ({
   as: t = "div",
   "data-test-id": s = "fondue-flex",

package/dist/fondue-components11.js

@@ -2,9 +2,9 @@ import { jsx as a, jsxs as v } from "react/jsx-runtime";
 import { IconCross as x } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-popover";
 import { forwardRef as r, useRef as C } from "react";
-import { usePreventDropdownOverflow as w } from "./fondue-components38.js";
-import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components35.js";
-import u from "./fondue-components41.js";
+import { usePreventDropdownOverflow as w } from "./fondue-components39.js";
+import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components36.js";
+import u from "./fondue-components42.js";
 const c = ({ children: t, ...o }) => /* @__PURE__ */ a(d.Root, { ...o, children: t });
 c.displayName = "Flyout.Root";
 const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, s) => /* @__PURE__ */ a(

package/dist/fondue-components12.js

@@ -1,6 +1,6 @@
 import { jsx as o } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components23.js";
-import e from "./fondue-components42.js";
+import { propsToCssVariables as a } from "./fondue-components24.js";
+import e from "./fondue-components43.js";
 const d = ({
   as: s = "div",
   "data-test-id": t = "fondue-grid",

package/dist/fondue-components13.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as d from "@radix-ui/react-label";
 import { forwardRef as i } from "react";
-import { cn as n } from "./fondue-components25.js";
+import { cn as n } from "./fondue-components26.js";
 const s = ({ className: e, "data-test-id": a = "fondue-label", ...t }, r) => /* @__PURE__ */ o(
   d.Root,
   {

package/dist/fondue-components14.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-progress";
 import { forwardRef as m } from "react";
-import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components43.js";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components44.js";
 const p = m(
   ({
     value: a,

package/dist/fondue-components15.js

@@ -1,7 +1,7 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-scroll-area";
 import { forwardRef as n } from "react";
-import l from "./fondue-components44.js";
+import l from "./fondue-components45.js";
 const b = ({
   type: t,
   maxHeight: e = "100%",

package/dist/fondue-components16.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { propsToCssVariables as r } from "./fondue-components23.js";
-import i from "./fondue-components45.js";
+import { propsToCssVariables as r } from "./fondue-components24.js";
+import i from "./fondue-components46.js";
 const a = ({ "data-test-id": t = "fondue-section", children: o, ...s }) => /* @__PURE__ */ e("section", { className: i.root, "data-test-id": t, style: r(s), children: o });
 a.displayName = "Section";
 export {

package/dist/fondue-components17.js

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as i from "@radix-ui/react-toggle-group";
 import { forwardRef as n } from "react";
-import { useControllableState as N } from "./fondue-components46.js";
-import e from "./fondue-components47.js";
+import { useControllableState as N } from "./fondue-components47.js";
+import e from "./fondue-components48.js";
 const d = ({ children: a, value: o, defaultValue: s, onValueChange: p, ...m }, f) => {
   const [g, C] = N({
     prop: o,

package/dist/fondue-components18.js

@@ -4,12 +4,12 @@ import * as S from "@radix-ui/react-popover";
 import { Slot as H } from "@radix-ui/react-slot";
 import { useSelect as T } from "downshift";
 import { forwardRef as V, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as q } from "./fondue-components48.js";
-import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components49.js";
-import { SelectMenu as L } from "./fondue-components50.js";
-import { ForwardedRefSelectSlot as Q } from "./fondue-components51.js";
-import a from "./fondue-components52.js";
-import { useSelectData as U } from "./fondue-components53.js";
+import { ForwardedRefCombobox as q } from "./fondue-components49.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components50.js";
+import { SelectMenu as L } from "./fondue-components51.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components52.js";
+import a from "./fondue-components53.js";
+import { useSelectData as U } from "./fondue-components54.js";
 const g = ({
   children: h,
   onSelect: i,

package/dist/fondue-components19.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components54.js";
+import r from "./fondue-components55.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components20.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components25.js";
-import t from "./fondue-components55.js";
+import { cn as f } from "./fondue-components26.js";
+import t from "./fondue-components56.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components21.js

@@ -1,69 +1,120 @@
-import { jsxs as g, jsx as s } from "react/jsx-runtime";
-import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
-import { forwardRef as n, useRef as S } from "react";
-import { cn as m } from "./fondue-components25.js";
-import r from "./fondue-components56.js";
-const f = ({
-  children: c,
-  className: d,
-  status: e = "neutral",
-  "data-test-id": a = "fondue-text-input",
-  ...t
-}, R) => {
-  const i = S(!1);
-  return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status": e, "data-test-id": a, children: [
-    e === "loading" ? /* @__PURE__ */ s("div", { className: r.loadingStatus, "data-test-id": `${a}-loader` }) : null,
-    /* @__PURE__ */ s(
-      "input",
-      {
-        onMouseDown: (o) => {
-          i.current = !0, o.currentTarget.dataset.showFocusRing = "false";
-        },
-        type: "text",
-        ...t,
-        onFocus: (o) => {
-          var l;
-          i.current || (o.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, o);
-        },
-        onBlur: (o) => {
-          var l;
-          o.target.dataset.showFocusRing = "false", i.current = !1, (l = t.onBlur) == null || l.call(t, o);
-        },
-        ref: R,
-        className: r.input,
-        "aria-invalid": e === "error"
-      }
-    ),
-    e === "success" ? /* @__PURE__ */ s(w, { size: 16, className: r.iconSuccess, "data-test-id": `${a}-success-icon` }) : null,
-    e === "error" ? /* @__PURE__ */ s(
-      N,
-      {
-        size: 16,
-        className: r.iconError,
-        "data-test-id": `${a}-error-icon`
-      }
-    ) : null,
-    c
-  ] });
-};
-f.displayName = "TextField.Root";
-const u = ({ name: c, className: d, ...e }, a) => /* @__PURE__ */ s(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": c,
-    ...e,
-    ref: a,
-    className: m(r.slot, d)
+import { jsx as a, jsxs as T } from "react/jsx-runtime";
+import { createContext as x, forwardRef as l, useCallback as j, createElement as N, useContext as b, useRef as A, useEffect as D } from "react";
+import { IconDotsHorizontal as E } from "@frontify/fondue-icons";
+import * as d from "@radix-ui/react-tabs";
+import { useControllableState as O } from "./fondue-components47.js";
+import { Button as V } from "./fondue-components4.js";
+import { Dropdown as i } from "./fondue-components9.js";
+import { useTabTriggers as q } from "./fondue-components57.js";
+import r from "./fondue-components58.js";
+const f = x({
+  value: "",
+  disabled: !1
+}), w = x({
+  addTrigger: () => {
   }
-);
-u.displayName = "TextField.Slot";
-const x = n(f), T = n(u), F = x;
-F.Root = x;
-F.Slot = T;
+}), y = ({
+  children: t,
+  activeTab: o,
+  defaultActiveTab: s,
+  onActiveTabChange: n,
+  size: c = "medium",
+  ...m
+}, u) => {
+  var R;
+  const [v, g] = O({
+    prop: o,
+    defaultProp: s,
+    onChange: n
+  }), C = j(
+    (e) => {
+      g(e);
+    },
+    [g]
+  ), { triggerListRef: k, activeIndicatorRef: P, triggers: p, triggersOutOfView: h, addTrigger: S } = q({
+    activeTab: v
+  });
+  return console.log(p), /* @__PURE__ */ a(w.Provider, { value: { addTrigger: S }, children: /* @__PURE__ */ T(
+    d.Root,
+    {
+      ref: u,
+      className: r.root,
+      onValueChange: C,
+      value: v ?? ((R = p[0]) == null ? void 0 : R.value),
+      ...m,
+      children: [
+        /* @__PURE__ */ T("div", { className: r.triggerListWrapper, children: [
+          /* @__PURE__ */ a(d.List, { ref: k, "data-size": c, className: r.triggerList, children: p.map((e) => /* @__PURE__ */ N(
+            d.Trigger,
+            {
+              ...e.props,
+              key: e.value,
+              value: e.value,
+              disabled: e.disabled,
+              className: r.trigger,
+              ref: e.ref
+            },
+            e.element
+          )) }),
+          /* @__PURE__ */ T(i.Root, { children: [
+            h.length > 0 && /* @__PURE__ */ a(i.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(V, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(E, { size: 16 }) }) }),
+            /* @__PURE__ */ a(i.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
+              i.Item,
+              {
+                ...e.props,
+                disabled: e.disabled,
+                onSelect: () => C(e.value),
+                key: e.value
+              },
+              e.element
+            )) })
+          ] }),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              "data-test-id": "active-tab-indicator",
+              ref: P,
+              className: r.activeIndicator
+            }
+          )
+        ] }),
+        t
+      ]
+    }
+  ) });
+};
+y.displayName = "Tabs.Root";
+const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(f.Provider, { value: { value: o, disabled: s }, children: t });
+z.displayName = "Tabs.Tab";
+const I = ({ children: t, ...o }, s) => {
+  const { value: n, disabled: c } = b(f), { addTrigger: m } = b(w), u = A(null);
+  return D(() => {
+    m({
+      ref: u || s,
+      value: n ?? "",
+      disabled: c,
+      props: o,
+      element: t
+    });
+  }, []), null;
+};
+I.displayName = "Tabs.Trigger";
+const L = ({ children: t, ...o }, s) => {
+  const { value: n } = b(f);
+  return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
+};
+L.displayName = "Tabs.Content";
+const Q = {
+  Root: l(y),
+  Tab: l(z),
+  Trigger: l(I),
+  Content: l(L)
+};
 export {
-  f as TextFieldRoot,
-  u as TextFieldSlot,
-  F as TextInput
+  Q as Tabs,
+  L as TabsContent,
+  y as TabsRoot,
+  z as TabsTab,
+  I as TabsTrigger
 };
 //# sourceMappingURL=fondue-components21.js.map

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type 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: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<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};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\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            />\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA2GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;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,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EACL,EAAA,CAAA;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AAAA;AAKhDiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components21.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     * 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\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        children,\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        onActiveTabChange,\n        size = 'medium',\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    console.log(triggers);\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                {...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\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\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","children","propsActiveTab","defaultActiveTab","onActiveTabChange","size","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","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components22.js

@@ -1,46 +1,69 @@
-import { jsx as a, jsxs as g } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as s } from "react";
-import { cn as T } from "./fondue-components25.js";
-import n from "./fondue-components57.js";
-const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, children: t }) });
-d.displayName = "Tooltip.Root";
-const l = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
-l.displayName = "Tooltip.Trigger";
-const p = ({
-  children: t,
-  className: r,
-  maxWidth: i,
-  "data-test-id": e = "fondue-tooltip-content",
-  padding: m = "spacious",
-  ...c
-}, f) => /* @__PURE__ */ a(o.Portal, { children: /* @__PURE__ */ g(
-  o.Content,
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { IconCheckMark as w, IconExclamationMarkTriangle as N } from "@frontify/fondue-icons";
+import { forwardRef as n, useRef as S } from "react";
+import { cn as m } from "./fondue-components26.js";
+import r from "./fondue-components59.js";
+const f = ({
+  children: c,
+  className: d,
+  status: e = "neutral",
+  "data-test-id": a = "fondue-text-input",
+  ...t
+}, R) => {
+  const i = S(!1);
+  return /* @__PURE__ */ g("div", { className: m(r.root, d), "data-status": e, "data-test-id": a, children: [
+    e === "loading" ? /* @__PURE__ */ s("div", { className: r.loadingStatus, "data-test-id": `${a}-loader` }) : null,
+    /* @__PURE__ */ s(
+      "input",
+      {
+        onMouseDown: (o) => {
+          i.current = !0, o.currentTarget.dataset.showFocusRing = "false";
+        },
+        type: "text",
+        ...t,
+        onFocus: (o) => {
+          var l;
+          i.current || (o.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, o);
+        },
+        onBlur: (o) => {
+          var l;
+          o.target.dataset.showFocusRing = "false", i.current = !1, (l = t.onBlur) == null || l.call(t, o);
+        },
+        ref: R,
+        className: r.input,
+        "aria-invalid": e === "error"
+      }
+    ),
+    e === "success" ? /* @__PURE__ */ s(w, { size: 16, className: r.iconSuccess, "data-test-id": `${a}-success-icon` }) : null,
+    e === "error" ? /* @__PURE__ */ s(
+      N,
+      {
+        size: 16,
+        className: r.iconError,
+        "data-test-id": `${a}-error-icon`
+      }
+    ) : null,
+    c
+  ] });
+};
+f.displayName = "TextField.Root";
+const u = ({ name: c, className: d, ...e }, a) => /* @__PURE__ */ s(
+  "div",
   {
-    "data-test-id": e,
-    "data-tooltip-spacing": m,
-    className: T(n.root, r),
-    style: { maxWidth: i },
-    collisionPadding: 16,
-    sideOffset: 8,
-    ref: f,
-    ...c,
-    children: [
-      t,
-      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: n.arrow })
-    ]
+    "data-slot": !0,
+    "data-name": c,
+    ...e,
+    ref: a,
+    className: m(r.slot, d)
   }
-) });
-p.displayName = "Tooltip.Content";
-const h = {
-  Root: d,
-  Trigger: s(l),
-  Content: s(p)
-};
+);
+u.displayName = "TextField.Slot";
+const x = n(f), T = n(u), F = x;
+F.Root = x;
+F.Slot = T;
 export {
-  h as Tooltip,
-  p as TooltipContent,
-  d as TooltipRoot,
-  l as TooltipTrigger
+  f as TextFieldRoot,
+  u as TextFieldSlot,
+  F as TextInput
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\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    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAYb,MAAAO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAT,EACL,CAAA;AAGRM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAU;AAAA,EAACV,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAd;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWY,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDb,CAAc;AAAA,EAC1E,SAASa,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components22.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type 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: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: ChangeEvent<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};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\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            />\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","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA2GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAaC,EAAO,EAAK;AAG3B,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,EAAO,MAAMT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAWD,MAAA,YACP,gBAAAS,EAAA,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGP,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAQ;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,gBAAcR,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACP,gBAAAS,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGP,CAAU,gBAAiB,CAAA,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAS;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGP,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EACL,EAAA,CAAA;AAER;AACAD,EAAc,cAAc;AAQf,MAAAmB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAlB,GAAW,GAAGmB,KACtBC,MAGI,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWQ;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWZ,EAAGC,EAAO,MAAMT,CAAS;AAAA,EAAA;AAAA;AAKhDiB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CxB,CAAa,GACtFyB,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}