@frontify/fondue-components 1.3.5 → 1.5.0

package/dist/fondue-components.js

@@ -3,22 +3,26 @@ import { Button as e } from "./fondue-components3.js";
 import { Checkbox as m } from "./fondue-components4.js";
 import { Dialog as f } from "./fondue-components5.js";
 import { Divider as l } from "./fondue-components6.js";
-import { Flyout as a } from "./fondue-components7.js";
-import { Label as g } from "./fondue-components8.js";
-import { LoadingBar as b } from "./fondue-components9.js";
-import { SegmentedControl as C } from "./fondue-components10.js";
-import { TextInput as L } from "./fondue-components11.js";
-import { Tooltip as c } from "./fondue-components12.js";
+import { Dropdown as a } from "./fondue-components7.js";
+import { Flyout as g } from "./fondue-components8.js";
+import { Label as D } from "./fondue-components9.js";
+import { LoadingBar as c } from "./fondue-components10.js";
+import { SegmentedControl as C } from "./fondue-components11.js";
+import { Select as S } from "./fondue-components12.js";
+import { TextInput as h } from "./fondue-components13.js";
+import { Tooltip as v } from "./fondue-components14.js";
 export {
   e as Button,
   m as Checkbox,
   f as Dialog,
   l as Divider,
-  a as Flyout,
-  g as Label,
-  b as LoadingBar,
+  a as Dropdown,
+  g as Flyout,
+  D as Label,
+  c as LoadingBar,
   C as SegmentedControl,
-  L as TextInput,
-  c as Tooltip
+  S as Select,
+  h as TextInput,
+  v 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,50 +1,42 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-toggle-group";
-import { forwardRef as m } from "react";
-import { useControllableState as S } from "./fondue-components22.js";
-import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components23.js";
-const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
-  const [p, C] = S({
-    prop: o,
-    defaultProp: s,
-    onChange: c
-  });
-  return /* @__PURE__ */ l(
-    r.Root,
+import { jsx as i } from "react/jsx-runtime";
+import * as t from "@radix-ui/react-progress";
+import { forwardRef as s } from "react";
+import { loadingBarContainerStyles as g, loadingBarStyles as f } from "./fondue-components24.js";
+const p = s(
+  ({
+    value: a,
+    max: r = 100,
+    rounded: d = !0,
+    style: o = "default",
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...l
+  }, m) => /* @__PURE__ */ i(
+    t.Root,
     {
-      ref: g,
-      ...a,
-      className: f,
-      onValueChange: (n) => {
-        n && C(n);
+      ref: m,
+      "data-test-id": n,
+      className: g({ rounded: d, size: e, style: o }),
+      "aria-busy": a !== r,
+      value: a,
+      max: r,
+      style: {
+        "--loading-bar-value": a,
+        "--loading-bar-max": r,
+        "--loading-bar-proportion": "calc(var(--loading-bar-value) / var(--loading-bar-max))"
       },
-      value: p,
-      type: "single",
-      asChild: !1,
-      "aria-disabled": a.disabled,
-      children: [
-        e,
-        /* @__PURE__ */ t("div", { className: I })
-      ]
+      ...l,
+      children: /* @__PURE__ */ i(
+        t.Indicator,
+        {
+          className: f({ style: o, indeterminateState: a === null })
+        }
+      )
     }
-  );
-};
-d.displayName = "SegmentedControl.Root";
-const i = ({ children: e, ...o }, s) => /* @__PURE__ */ l(r.Item, { ref: s, ...o, className: y, asChild: !1, children: [
-  /* @__PURE__ */ t("span", { className: N }),
-  /* @__PURE__ */ l("span", { className: u, children: [
-    /* @__PURE__ */ t("span", { className: b, children: e }),
-    /* @__PURE__ */ t("span", { className: h, children: e })
-  ] })
-] });
-i.displayName = "SegmentedControl.Item";
-const j = {
-  Root: m(d),
-  Item: m(i)
-};
+  )
+);
+p.displayName = "LoadingBar";
 export {
-  j as SegmentedControl,
-  i as SegmentedControlItem,
-  d as SegmentedControlRoot
+  p as LoadingBar
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport {\n    segmentedControlActiveIndicatorStyles,\n    segmentedControlItemLabelActiveStyles,\n    segmentedControlItemLabelInactiveStyles,\n    segmentedControlItemLabelStyles,\n    segmentedControlItemSeparatorStyles,\n    segmentedControlItemStyles,\n    segmentedControlRootStyles,\n} from './styles/segmentedControlStyles';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={segmentedControlRootStyles}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={segmentedControlActiveIndicatorStyles} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={segmentedControlItemStyles} asChild={false}>\n        {/* Separator */}\n        <span className={segmentedControlItemSeparatorStyles} />\n        <span className={segmentedControlItemLabelStyles}>\n            {/* Active children */}\n            <span className={segmentedControlItemLabelActiveStyles}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={segmentedControlItemLabelInactiveStyles}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","segmentedControlRootStyles","jsx","segmentedControlActiveIndicatorStyles","SegmentedControlItem","itemProps","segmentedControlItemStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles","SegmentedControl","forwardRef"],"mappings":";;;;;AAwCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO;AAAA,MACX,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAED,gBAAAY,EAAC,OAAI,EAAA,WAAWC,EAAuC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;AACAd,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfV,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGU,GAAW,WAAWC,GAA4B,SAAS,IAEhG,UAAA;AAAA,EAAC,gBAAAJ,EAAA,QAAA,EAAK,WAAWK,EAAqC,CAAA;AAAA,EACtD,gBAAAR,EAAC,QAAK,EAAA,WAAWS,GAEb,UAAA;AAAA,IAAC,gBAAAN,EAAA,QAAA,EAAK,WAAWO,GAAwC,UAAAnB,EAAS,CAAA;AAAA,IAGjE,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,GAA0C,UAAApB,EAAS,CAAA;AAAA,EAAA,GACxE;AAAA,GACJ;AAEJc,EAAqB,cAAc;AAE5B,MAAMO,IAAmB;AAAA,EAC5B,MAAMC,EAAsDvB,CAAoB;AAAA,EAChF,MAAMuB,EAAyDR,CAAoB;AACvF;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    style?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            style = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, style })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components11.js

@@ -1,76 +1,50 @@
-import { jsxs as F, jsx as r } from "react/jsx-runtime";
-import { IconCheckMark as R, IconExclamationMarkTriangle as g } from "@frontify/fondue-icons";
-import { forwardRef as d, useRef as S } from "react";
-import { cn as n } from "./fondue-components13.js";
-import { rootStyles as N, loadingStatusStyles as h, inputStyles as y, slotStyles as T } from "./fondue-components24.js";
-const m = ({
-  children: s,
-  className: i,
-  status: e = "neutral",
-  "data-test-id": o = "fondue-text-input",
-  ...t
-}, u) => {
-  const c = S(!1);
-  return /* @__PURE__ */ F("div", { className: n(N, i), "data-status": e, "data-test-id": o, children: [
-    e === "loading" ? /* @__PURE__ */ r("div", { className: h, "data-test-id": `${o}-loader` }) : null,
-    /* @__PURE__ */ r(
-      "input",
-      {
-        onMouseDown: (a) => {
-          c.current = !0, a.currentTarget.dataset.showFocusRing = "false";
-        },
-        type: "text",
-        ...t,
-        onFocus: (a) => {
-          var l;
-          c.current || (a.target.dataset.showFocusRing = "true"), (l = t.onFocus) == null || l.call(t, a);
-        },
-        onBlur: (a) => {
-          var l;
-          a.target.dataset.showFocusRing = "false", c.current = !1, (l = t.onBlur) == null || l.call(t, a);
-        },
-        ref: u,
-        className: y,
-        "aria-invalid": e === "error"
-      }
-    ),
-    e === "success" ? /* @__PURE__ */ r(
-      R,
-      {
-        size: 16,
-        className: "tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3",
-        "data-test-id": `${o}-success-icon`
-      }
-    ) : null,
-    e === "error" ? /* @__PURE__ */ r(
-      g,
-      {
-        size: 16,
-        className: "tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3",
-        "data-test-id": `${o}-error-icon`
-      }
-    ) : null,
-    s
-  ] });
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-toggle-group";
+import { forwardRef as m } from "react";
+import { useControllableState as S } from "./fondue-components25.js";
+import { segmentedControlRootStyles as f, segmentedControlActiveIndicatorStyles as I, segmentedControlItemStyles as y, segmentedControlItemSeparatorStyles as N, segmentedControlItemLabelStyles as u, segmentedControlItemLabelActiveStyles as b, segmentedControlItemLabelInactiveStyles as h } from "./fondue-components26.js";
+const d = ({ children: e, value: o, defaultValue: s, onValueChange: c, ...a }, g) => {
+  const [p, C] = S({
+    prop: o,
+    defaultProp: s,
+    onChange: c
+  });
+  return /* @__PURE__ */ l(
+    r.Root,
+    {
+      ref: g,
+      ...a,
+      className: f,
+      onValueChange: (n) => {
+        n && C(n);
+      },
+      value: p,
+      type: "single",
+      asChild: !1,
+      "aria-disabled": a.disabled,
+      children: [
+        e,
+        /* @__PURE__ */ t("div", { className: I })
+      ]
+    }
+  );
+};
+d.displayName = "SegmentedControl.Root";
+const i = ({ children: e, ...o }, s) => /* @__PURE__ */ l(r.Item, { ref: s, ...o, className: y, asChild: !1, children: [
+  /* @__PURE__ */ t("span", { className: N }),
+  /* @__PURE__ */ l("span", { className: u, children: [
+    /* @__PURE__ */ t("span", { className: b, children: e }),
+    /* @__PURE__ */ t("span", { className: h, children: e })
+  ] })
+] });
+i.displayName = "SegmentedControl.Item";
+const j = {
+  Root: m(d),
+  Item: m(i)
 };
-m.displayName = "TextField.Root";
-const f = ({ name: s, className: i, ...e }, o) => /* @__PURE__ */ r(
-  "div",
-  {
-    "data-slot": !0,
-    "data-name": s,
-    ...e,
-    ref: o,
-    className: n(T, i)
-  }
-);
-f.displayName = "TextField.Slot";
-const x = d(m), k = d(f), w = x;
-w.Root = x;
-w.Slot = k;
 export {
-  m as TextFieldRoot,
-  f as TextFieldSlot,
-  w as TextInput
+  j as SegmentedControl,
+  i as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.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 { inputStyles, loadingStatusStyles, rootStyles, slotStyles } from './styles/textInputStyles';\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(rootStyles, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={loadingStatusStyles} 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={inputStyles}\n                aria-invalid={status === 'error'}\n            />\n\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className=\"tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3\"\n                    data-test-id={`${dataTestId}-success-icon`}\n                />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className=\"tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3\"\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(slotStyles, 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","rootStyles","loadingStatusStyles","jsx","mouseEvent","focusEvent","_a","blurEvent","inputStyles","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","slotStyles","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,GAAYT,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GACzE,UAAA;AAAA,IAAWD,MAAA,8BACP,OAAI,EAAA,WAAWS,GAAqB,gBAAc,GAAGR,CAAU,UAAA,CAAW,IAC3E;AAAA,IACJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAP,EAAW,UAAU,IACVO,EAAA,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGT;AAAA,QACJ,SAAS,CAACU,MAAe;;AACjB,UAACR,EAAW,YACDQ,EAAA,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAX,EAAW,YAAX,QAAAW,EAAA,KAAAX,GAAqBU;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACT,UAAAA,EAAA,OAAO,QAAQ,gBAAgB,SACzCV,EAAW,UAAU,KACrBS,IAAAX,EAAW,WAAX,QAAAW,EAAA,KAAAX,GAAoBY;AAAA,QACxB;AAAA,QACA,KAAAX;AAAA,QACA,WAAWY;AAAA,QACX,gBAAcf,MAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,IAECA,MAAW,YACR,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,gBAAc,GAAGf,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHD,MAAW,UACR,gBAAAU;AAAA,MAACO;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAU;AAAA,QACV,gBAAc,GAAGhB,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EACL,EAAA,CAAA;AAER;AACAD,EAAc,cAAc;AAQf,MAAAqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,KACtBC,MAGI,gBAAAX;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWS;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWd,EAAGe,GAAYvB,CAAS;AAAA,EAAA;AAAA;AAK/CmB,EAAc,cAAc;AAE5B,MAAMK,IAA4BC,EAA6C3B,CAAa,GACtF4B,IAA4BD,EAA+CN,CAAa,GAEjFQ,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport {\n    segmentedControlActiveIndicatorStyles,\n    segmentedControlItemLabelActiveStyles,\n    segmentedControlItemLabelInactiveStyles,\n    segmentedControlItemLabelStyles,\n    segmentedControlItemSeparatorStyles,\n    segmentedControlItemStyles,\n    segmentedControlRootStyles,\n} from './styles/segmentedControlStyles';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={segmentedControlRootStyles}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={segmentedControlActiveIndicatorStyles} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={segmentedControlItemStyles} asChild={false}>\n        {/* Separator */}\n        <span className={segmentedControlItemSeparatorStyles} />\n        <span className={segmentedControlItemLabelStyles}>\n            {/* Active children */}\n            <span className={segmentedControlItemLabelActiveStyles}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={segmentedControlItemLabelInactiveStyles}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","segmentedControlRootStyles","jsx","segmentedControlActiveIndicatorStyles","SegmentedControlItem","itemProps","segmentedControlItemStyles","segmentedControlItemSeparatorStyles","segmentedControlItemLabelStyles","segmentedControlItemLabelActiveStyles","segmentedControlItemLabelInactiveStyles","SegmentedControl","forwardRef"],"mappings":";;;;;AAwCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO;AAAA,MACX,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAED,gBAAAY,EAAC,OAAI,EAAA,WAAWC,EAAuC,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnE;AACAd,EAAqB,cAAc;AAO5B,MAAMe,IAAuB,CAChC,EAAE,UAAAd,GAAU,GAAGe,EAAA,GACfV,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGU,GAAW,WAAWC,GAA4B,SAAS,IAEhG,UAAA;AAAA,EAAC,gBAAAJ,EAAA,QAAA,EAAK,WAAWK,EAAqC,CAAA;AAAA,EACtD,gBAAAR,EAAC,QAAK,EAAA,WAAWS,GAEb,UAAA;AAAA,IAAC,gBAAAN,EAAA,QAAA,EAAK,WAAWO,GAAwC,UAAAnB,EAAS,CAAA;AAAA,IAGjE,gBAAAY,EAAA,QAAA,EAAK,WAAWQ,GAA0C,UAAApB,EAAS,CAAA;AAAA,EAAA,GACxE;AAAA,GACJ;AAEJc,EAAqB,cAAc;AAE5B,MAAMO,IAAmB;AAAA,EAC5B,MAAMC,EAAsDvB,CAAoB;AAAA,EAChF,MAAMuB,EAAyDR,CAAoB;AACvF;"}

package/dist/fondue-components12.js

@@ -1,49 +1,80 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as l } from "react";
-import { cn as T } from "./fondue-components13.js";
-import { tooltipContentStyles as f, tooltipArrowStyles as g } from "./fondue-components25.js";
-const a = ({ children: i, enterDelay: e = 700 }) => /* @__PURE__ */ t(o.Provider, { children: /* @__PURE__ */ t(o.Root, { delayDuration: e, children: i }) });
-a.displayName = "Tooltip.Root";
-const d = ({ children: i, "data-test-id": e = "fondue-tooltip-content" }, r) => /* @__PURE__ */ t(o.Trigger, { "data-test-id": e, asChild: !0, ref: r, children: i });
-d.displayName = "Tooltip.Trigger";
-const s = ({
-  children: i,
-  className: e,
-  maxWidth: r,
-  "data-test-id": p = "fondue-tooltip-content",
-  ...n
-}, m) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ c(
-  o.Content,
-  {
-    "data-test-id": p,
-    className: T(
-      f({
-        ...n
-      }),
-      e
-    ),
-    style: { maxWidth: r },
-    collisionPadding: 16,
-    sideOffset: 8,
-    ref: m,
-    ...n,
-    children: [
-      i,
-      /* @__PURE__ */ t(o.Arrow, { asChild: !0, children: /* @__PURE__ */ t("div", { "aria-hidden": "true", className: g }) })
-    ]
-  }
-) });
-s.displayName = "Tooltip.Content";
-const R = {
-  Root: a,
-  Trigger: l(d),
-  Content: l(s)
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { IconCaretDown as B } from "@frontify/fondue-icons";
+import * as p from "@radix-ui/react-popover";
+import { Slot as j } from "@radix-ui/react-slot";
+import { useSelect as D } from "downshift";
+import { forwardRef as M } from "react";
+import { ForwardedRefCombobox as T } from "./fondue-components27.js";
+import { ForwardedRefSelectItem as k, ForwardedRefSelectItemGroup as z } from "./fondue-components28.js";
+import { SelectMenu as A } from "./fondue-components29.js";
+import { ForwardedRefSelectSlot as O } from "./fondue-components30.js";
+import r from "./fondue-components31.js";
+import { useSelectData as V } from "./fondue-components32.js";
+const n = ({
+  children: S,
+  onSelect: a,
+  value: f,
+  defaultValue: u,
+  placeholder: I = "",
+  disabled: m,
+  "aria-label": h,
+  "data-test-id": b = "fondue-select"
+}, s) => {
+  const { inputSlots: g, menuSlots: N, items: x, clearButton: c, getItemByValue: i } = V(S), y = i(u), C = i(f), { getToggleButtonProps: R, getMenuProps: w, getItemProps: v, reset: F, selectedItem: l, isOpen: P, highlightedIndex: G } = D({
+    items: x,
+    defaultSelectedItem: y,
+    selectedItem: C,
+    onSelectedItemChange: ({ selectedItem: t }) => {
+      a && a(t.value);
+    },
+    itemToString: (t) => t ? t.label : ""
+  });
+  return /* @__PURE__ */ d(p.Root, { open: P, children: [
+    /* @__PURE__ */ o(p.Anchor, { asChild: !0, children: /* @__PURE__ */ d(
+      "div",
+      {
+        className: r.root,
+        "data-disabled": m,
+        "data-empty": !l,
+        "data-test-id": b,
+        ...m ? {} : R({
+          "aria-label": h,
+          ...s ? { ref: s } : {}
+        }),
+        children: [
+          /* @__PURE__ */ o("span", { className: r.input, children: l ? l.label : I }),
+          g,
+          c && /* @__PURE__ */ o(
+            j,
+            {
+              onClick: (t) => {
+                t.stopPropagation(), F();
+              },
+              className: r.clear,
+              children: c
+            }
+          ),
+          /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(B, { size: 16, className: r.caret }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o(A, { highlightedIndex: G, getMenuProps: w, getItemProps: v, children: N })
+  ] });
 };
+n.displayName = "Select";
+const q = M(n), e = q;
+e.displayName = "Select";
+e.Combobox = T;
+e.Combobox.displayName = "Select.Combobox";
+e.Item = k;
+e.Item.displayName = "Select.Item";
+e.Group = z;
+e.Group.displayName = "Select.Group";
+e.Slot = O;
+e.Slot.displayName = "Select.Slot";
 export {
-  R as Tooltip,
-  s as TooltipContent,
-  a as TooltipRoot,
-  d as TooltipTrigger
+  q as ForwardedRefSelect,
+  e as Select,
+  n as SelectInput
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.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 { tooltipArrowStyles, tooltipContentStyles } from './styles/tooltipStyles';\n\nexport type TooltipRootProps = {\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\nexport type TooltipContentProps = {\n    /**\n     * @default spacious\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preffered 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 TooltipRoot = ({ children, enterDelay = 700 }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay}>{children}</RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-content' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                className={cn(\n                    tooltipContentStyles({\n                        ...props,\n                    }),\n                    className,\n                )}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n\n                <RadixTooltip.Arrow asChild>\n                    <div aria-hidden=\"true\" className={tooltipArrowStyles} />\n                </RadixTooltip.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","jsx","RadixTooltip","TooltipTrigger","dataTestId","ref","TooltipContent","className","maxWidth","props","jsxs","cn","tooltipContentStyles","tooltipArrowStyles","Tooltip","forwardRef"],"mappings":";;;;;AA6BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,UAE7C,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeF,GAAa,UAAAD,EAAS,CAAA,EAC5D,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAK,IAAiB,CAC1B,EAAE,UAAAJ,GAAU,gBAAgBK,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAN,EACL,CAAA;AAGRI,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAP;AAAA,EACA,WAAAQ;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,GAAGK;AACP,GACAJ,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAQ;AAAA,EAACR,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;AAAA,IACd,WAAWO;AAAA,MACPC,EAAqB;AAAA,QACjB,GAAGH;AAAA,MAAA,CACN;AAAA,MACDF;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGI;AAAA,IAEH,UAAA;AAAA,MAAAV;AAAA,MAEA,gBAAAE,EAAAC,EAAa,OAAb,EAAmB,SAAO,IACvB,UAAC,gBAAAD,EAAA,OAAA,EAAI,eAAY,QAAO,WAAWY,EAAA,CAAoB,EAC3D,CAAA;AAAA,IAAA;AAAA,EAAA;AAER,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMhB;AAAA,EACN,SAASiB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        disabled,\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor asChild>\n                <div\n                    className={styles.root}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.input}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div>\n                        <IconCaretDown size={16} className={styles.caret} />\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu highlightedIndex={highlightedIndex} getMenuProps={getMenuProps} getItemProps={getItemProps}>\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","disabled","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","styles","RadixSlot","event","IconCaretDown","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":";;;;;;;;;;;;AAkDO,MAAMA,IAAc,CACvB;AAAA,EACI,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACK,QAAA,EAAE,YAAAC,GAAY,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,gBAAAC,EAAe,IAAIC,EAAcd,CAAQ,GAEtFe,IAAcF,EAAeV,CAAY,GACzCa,IAAaH,EAAeX,CAAK,GAEjC,EAAE,sBAAAe,GAAsB,cAAAC,GAAc,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,QAAAC,GAAQ,kBAAAC,EAAiB,IACpGC,EAAU;AAAA,IACN,OAAAb;AAAA,IACA,qBAAqBI;AAAA,IACrB,cAAcC;AAAA,IACd,sBAAsB,CAAC,EAAE,cAAAK,QAAmB;AAC5B,MAAApB,KAAAA,EAASoB,EAAa,KAAK;AAAA,IAC3C;AAAA,IACA,cAAc,CAACI,MAAUA,IAAOA,EAAK,QAAQ;AAAA,EAAA,CAChD;AAEL,SACK,gBAAAC,EAAAC,EAAa,MAAb,EAAkB,MAAML,GACrB,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAa,QAAb,EAAoB,SAAO,IACxB,UAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWG,EAAO;AAAA,QAClB,iBAAexB;AAAA,QACf,cAAY,CAACgB;AAAA,QACb,gBAAcd;AAAA,QACb,GAAIF,IACC,CAAC,IACDY,EAAqB;AAAA,UACjB,cAAcX;AAAA,UACd,GAAIE,IAAe,EAAE,KAAKA,MAAiB,CAAC;AAAA,QAAA,CAC/C;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAoB,EAAC,UAAK,WAAWC,EAAO,OAAQ,UAAeR,IAAAA,EAAa,QAAQjB,EAAY,CAAA;AAAA,UAC/EK;AAAA,UACAG,KACG,gBAAAgB;AAAA,YAACE;AAAAA,YAAA;AAAA,cACG,SAAS,CAACC,MAAU;AAChB,gBAAAA,EAAM,gBAAgB,GAChBX;cACV;AAAA,cACA,WAAWS,EAAO;AAAA,cAEjB,UAAAjB;AAAA,YAAA;AAAA,UACL;AAAA,UAEJ,gBAAAgB,EAAC,SACG,UAAC,gBAAAA,EAAAI,GAAA,EAAc,MAAM,IAAI,WAAWH,EAAO,MAAA,CAAO,EACtD,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IAEC,gBAAAD,EAAAK,GAAA,EAAW,kBAAAV,GAAoC,cAAAL,GAA4B,cAAAC,GACvE,UACLT,GAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAX,EAAY,cAAc;AAEb,MAAAmC,IAAqBC,EAAiDpC,CAAW,GAGjFqC,IAKTF;AACJE,EAAO,cAAc;AACrBA,EAAO,WAAWC;AAClBD,EAAO,SAAS,cAAc;AAC9BA,EAAO,OAAOE;AACdF,EAAO,KAAK,cAAc;AAC1BA,EAAO,QAAQG;AACfH,EAAO,MAAM,cAAc;AAC3BA,EAAO,OAAOI;AACdJ,EAAO,KAAK,cAAc;"}

package/dist/fondue-components13.js

@@ -1,15 +1,69 @@
-import { extendTailwindMerge as e } from "./fondue-components26.js";
-import { tv as o } from "./fondue-components27.js";
-const r = e({
-  prefix: "tw-",
-  extend: {
-    classGroups: {
-      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
-    }
+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-components15.js";
+import r from "./fondue-components33.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)
   }
-}), m = (...t) => r(...t), x = (t) => o(t);
+);
+u.displayName = "TextField.Slot";
+const x = n(f), T = n(u), F = x;
+F.Root = x;
+F.Slot = T;
 export {
-  m as cn,
-  x as sv
+  f as TextFieldRoot,
+  u as TextFieldSlot,
+  F as TextInput
 };
 //# sourceMappingURL=fondue-components13.js.map