@frontify/fondue-components 1.2.3 → 1.3.1

package/dist/fondue-components.js

@@ -1,10 +1,24 @@
 import "./fondue-components2.js";
 import { Button as e } from "./fondue-components3.js";
-import { Divider as m } from "./fondue-components4.js";
-import { LoadingBar as f } from "./fondue-components5.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";
 export {
   e as Button,
-  m as Divider,
-  f as LoadingBar
+  m as Checkbox,
+  f as Dialog,
+  l as Divider,
+  a as Flyout,
+  g as Label,
+  b as LoadingBar,
+  C as SegmentedControl,
+  L as TextInput,
+  c 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,121 +1,50 @@
-import { sv as t } from "./fondue-components7.js";
-const s = t({
-  variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    style: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    },
-    disabled: {
-      true: "tw-text-box-disabled-inverse"
+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-components23.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-components24.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 })
+      ]
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "default",
-      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "weak",
-      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "default",
-      emphasis: "strong",
-      class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "default",
-      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "weak",
-      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "positive",
-      emphasis: "strong",
-      class: "tw-text-button-strong-positive-text group-hover:tw-text-button-strong-positive-text-hover group-active:tw-text-button-strong-positive-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "default",
-      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "weak",
-      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "negative",
-      emphasis: "strong",
-      class: "tw-text-button-strong-negative-text group-hover:tw-text-button-strong-negative-text-hovergroup-active:tw-text-button-strong-negative-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "default",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "weak",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
-    },
-    {
-      disabled: !1,
-      style: "danger",
-      emphasis: "strong",
-      class: "tw-text-button-danger-text group-hover:tw-text-button-danger-text-hovergroup-active:tw-text-button-danger-text-pressed"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "default",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "weak",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
-    },
-    {
-      disabled: !1,
-      style: "loud",
-      emphasis: "strong",
-      class: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse"
-    }
-  ],
-  defaultVariants: {
-    emphasis: "strong",
-    style: "default",
-    disabled: !1
-  }
-});
+  );
+};
+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)
+};
 export {
-  s as textStyles
+  j as SegmentedControl,
+  i as SegmentedControlItem,
+  d as SegmentedControlRoot
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Button/styles/textStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const textStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-icon ' +\n                'group-hover:tw-text-button-strong-icon-hover ' +\n                'group-active:tw-text-button-strong-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-positive-text ' +\n                'group-hover:tw-text-button-strong-positive-text-hover ' +\n                'group-active:tw-text-button-strong-positive-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-negative-text ' +\n                'group-hover:tw-text-button-strong-negative-text-hover' +\n                'group-active:tw-text-button-strong-negative-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            disabled: false,\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-danger-text ' +\n                'group-hover:tw-text-button-danger-text-hover' +\n                'group-active:tw-text-button-danger-text-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            disabled: false,\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-box-selected-strong-inverse ' +\n                'group-hover:tw-text-box-selected-strong-inverse' +\n                'group-active:tw-text-box-selected-strong-inverse',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n        disabled: false,\n    },\n});\n"],"names":["textStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,EACd;AACJ,CAAC;"}
+{"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;"}

package/dist/fondue-components11.js

@@ -1,38 +1,53 @@
-import { sv as t } from "./fondue-components7.js";
-const a = t({
-  base: "tw-relative tw-w-full tw-overflow-hidden",
-  variants: {
-    rounded: {
-      true: "tw-rounded"
-    },
-    size: {
-      small: "tw-h-1",
-      medium: "tw-h-2",
-      large: "tw-h-3",
-      "x-large": "tw-h-4"
-    },
-    style: {
-      default: "tw-bg-box-selected",
-      positive: "tw-bg-box-positive",
-      negative: "tw-bg-box-negative"
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { IconCheckMark as p, IconExclamationMarkTriangle as u } from "@frontify/fondue-icons";
+import { forwardRef as a } from "react";
+import { cn as i } from "./fondue-components14.js";
+import { rootStyles as w, loadingStatusStyles as S, inputStyles as F, slotStyles as N } from "./fondue-components25.js";
+const s = ({
+  children: l,
+  className: r,
+  status: t = "neutral",
+  "data-test-id": e = "fondue-text-input",
+  ...m
+}, x) => /* @__PURE__ */ f("div", { className: i(w, r), "data-status": t, "data-test-id": e, children: [
+  t === "loading" ? /* @__PURE__ */ o("div", { className: S, "data-test-id": `${e}-loader` }) : null,
+  /* @__PURE__ */ o("input", { type: "text", ...m, ref: x, className: F, "aria-invalid": t === "error" }),
+  t === "success" ? /* @__PURE__ */ o(
+    p,
+    {
+      size: 16,
+      className: "tw-flex tw-text-text-positive tw-h-full tw-items-center tw-ml-3",
+      "data-test-id": `${e}-success-icon`
     }
-  }
-}), i = t({
-  base: "tw-h-full tw-w-full",
-  variants: {
-    style: {
-      default: "tw-bg-text-interactive",
-      positive: "tw-bg-text-positive",
-      negative: "tw-bg-text-negative"
-    },
-    indeterminateState: {
-      true: "tw-animate-loading-bar-infinite tw-origin-left-right",
-      false: "tw-transition-all tw--translate-x-[calc(100%-var(--loading-bar-value))]"
+  ) : null,
+  t === "error" ? /* @__PURE__ */ o(
+    u,
+    {
+      size: 16,
+      className: "tw-flex tw-text-text-negative tw-h-full tw-items-center tw-ml-3",
+      "data-test-id": `${e}-error-icon`
     }
+  ) : null,
+  l
+] });
+s.displayName = "TextField.Root";
+const n = ({ name: l, className: r, ...t }, e) => /* @__PURE__ */ o(
+  "div",
+  {
+    "data-slot": !0,
+    "data-name": l,
+    ...t,
+    ref: e,
+    className: i(N, r)
   }
-});
+);
+n.displayName = "TextField.Slot";
+const d = a(s), y = a(n), c = d;
+c.Root = d;
+c.Slot = y;
 export {
-  a as loadingBarContainerStyles,
-  i as loadingBarStyles
+  s as TextFieldRoot,
+  n as TextFieldSlot,
+  c as TextInput
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/LoadingBar/styles/loadingBarStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const loadingBarContainerStyles = sv({\n    base: 'tw-relative tw-w-full tw-overflow-hidden',\n    variants: {\n        rounded: {\n            true: 'tw-rounded',\n        },\n        size: {\n            small: 'tw-h-1',\n            medium: 'tw-h-2',\n            large: 'tw-h-3',\n            'x-large': 'tw-h-4',\n        },\n        style: {\n            default: 'tw-bg-box-selected',\n            positive: 'tw-bg-box-positive',\n            negative: 'tw-bg-box-negative',\n        },\n    },\n});\n\nexport const loadingBarStyles = sv({\n    base: 'tw-h-full tw-w-full',\n    variants: {\n        style: {\n            default: 'tw-bg-text-interactive',\n            positive: 'tw-bg-text-positive',\n            negative: 'tw-bg-text-negative',\n        },\n        indeterminateState: {\n            true: 'tw-animate-loading-bar-infinite tw-origin-left-right',\n            false: 'tw-transition-all tw--translate-x-[calc(100%-var(--loading-bar-value))]',\n        },\n    },\n});\n"],"names":["loadingBarContainerStyles","sv","loadingBarStyles"],"mappings":";AAIO,MAAMA,IAA4BC,EAAG;AAAA,EACxC,MAAM;AAAA,EACN,UAAU;AAAA,IACN,SAAS;AAAA,MACL,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAmBD,EAAG;AAAA,EAC/B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,IACd;AAAA,IACA,oBAAoB;AAAA,MAChB,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AACJ,CAAC;"}
+{"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 { forwardRef, type ChangeEvent, type ForwardedRef, type KeyboardEvent, type ReactNode } 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    '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    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\n            <input type=\"text\" {...inputProps} ref={ref} className={inputStyles} aria-invalid={status === 'error'} />\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","jsxs","cn","rootStyles","loadingStatusStyles","jsx","inputStyles","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","slotStyles","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA+FO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAGC,GAAYP,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GACzE,UAAA;AAAA,EAAWD,MAAA,8BACP,OAAI,EAAA,WAAWO,GAAqB,gBAAc,GAAGN,CAAU,UAAA,CAAW,IAC3E;AAAA,EAEJ,gBAAAO,EAAC,SAAM,EAAA,MAAK,QAAQ,GAAGN,GAAY,KAAAC,GAAU,WAAWM,GAAa,gBAAcT,MAAW,QAAS,CAAA;AAAA,EAEtGA,MAAW,YACR,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,MAAM;AAAA,MACN,WAAU;AAAA,MACV,gBAAc,GAAGT,CAAU;AAAA,IAAA;AAAA,EAAA,IAE/B;AAAA,EAEHD,MAAW,UACR,gBAAAQ;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,MAAM;AAAA,MACN,WAAU;AAAA,MACV,gBAAc,GAAGV,CAAU;AAAA,IAAA;AAAA,EAAA,IAE/B;AAAA,EAEHH;AACL,EAAA,CAAA;AAGRD,EAAc,cAAc;AAQf,MAAAe,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAd,GAAW,GAAGe,KACtBC,MAGI,gBAAAP;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,aAAW;AAAA,IACX,aAAWK;AAAA,IACV,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,WAAWV,EAAGW,GAAYjB,CAAS;AAAA,EAAA;AAAA;AAK/Ca,EAAc,cAAc;AAE5B,MAAMK,IAA4BC,EAA6CrB,CAAa,GACtFsB,IAA4BD,EAA+CN,CAAa,GAEjFQ,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}