@frontify/fondue-components 27.0.1 → 28.0.0

package/dist/fondue-components46.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components46.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAAA;AAAA,IAE3D,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAE1B,MAAMU,IAAiCC,EAAoDX,CAAkB;"}
+{"version":3,"file":"fondue-components46.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components47.js

@@ -1,57 +1,35 @@
-import { jsxs as t, jsx as s, Fragment as h } from "react/jsx-runtime";
-import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/fondue-icons";
-import { forwardRef as P } from "react";
-import { useTranslation as w } from "./fondue-components39.js";
-import { Button as y } from "./fondue-components6.js";
-import a from "./fondue-components94.js";
-import { getColorWithName as z, colorToCss as x } from "./fondue-components50.js";
-const c = ({
-  id: m,
-  currentColor: e,
-  isOpen: l,
-  disabled: o = !1,
-  onClear: i,
-  onClick: r,
-  "data-test-id": d = "color-picker-input",
-  ...n
-}, p) => {
-  const { t: f } = w(), N = (e == null ? void 0 : e.name) ?? (e ? z(e, "RGBA").name : "");
-  return /* @__PURE__ */ t("div", { id: m, className: a.root, ref: p, "data-test-id": d, children: [
-    /* @__PURE__ */ t(
-      "button",
-      {
-        className: a.button,
-        ...n,
-        disabled: o,
-        onClick: r,
-        type: "button",
-        "data-color-input-select": !0,
-        children: [
-          (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ s(
-            "div",
-            {
-              "aria-hidden": !0,
-              className: a.colorIndicator,
-              style: { "--active-color": x(e) }
-            }
-          ) : /* @__PURE__ */ t(h, { children: [
-            /* @__PURE__ */ s(I, { size: 16 }),
-            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
-          ] }),
-          /* @__PURE__ */ s("span", { className: a.colorName, children: N })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t("div", { className: a.actions, children: [
-      i && /* @__PURE__ */ s(y, { onPress: i, disabled: o, size: "small", emphasis: "weak", aspect: "square", children: /* @__PURE__ */ s(k, { className: a.clearIcon, size: 16 }) }),
-      /* @__PURE__ */ s("div", { className: a.caret, "data-state": l ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16, className: a.caret }) })
-    ] })
-  ] });
-};
-c.displayName = "ColorPicker.Input";
-const F = P(c);
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { RgbaColorPicker as n } from "react-colorful";
+import t from "./fondue-components50.js";
+import { DEFAULT_COLOR as s } from "./fondue-components51.js";
+const i = ({
+  currentColor: a = s,
+  onColorChange: d = () => {
+  },
+  "data-test-id": o = "color-picker-input"
+}, p) => /* @__PURE__ */ r("div", { className: t.gradientInput, "data-test-id": o, ref: p, children: /* @__PURE__ */ r(
+  n,
+  {
+    className: t.reactColorful,
+    color: {
+      r: a.red,
+      g: a.green,
+      b: a.blue,
+      a: a.alpha === void 0 ? 1 : a.alpha
+    },
+    onChange: (e) => d({
+      red: e.r,
+      green: e.g,
+      blue: e.b,
+      alpha: e.a
+    })
+  }
+) });
+i.displayName = "ColorPicker.Gradient";
+const c = m(i);
 export {
-  c as ColorPickerInput,
-  F as ForwardedRefColorPickerInput
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components47.js.map

package/dist/fondue-components47.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components47.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>{t('ColorPicker_selectColor')}</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <Button onPress={onClear} disabled={disabled} size=\"small\" emphasis=\"weak\" aspect=\"square\">\n                        <IconCross className={styles.clearIcon} size={16} />\n                    </Button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","disabled","onClear","onClick","dataTestId","props","forwardedRef","t","useTranslation","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","Button","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;;;AA0CO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,KAAYV,KAAA,gBAAAA,EAAc,UAASA,IAAeW,EAAiBX,GAAc,MAAM,EAAE,OAAO;AACtG,SACI,gBAAAY,EAAC,SAAI,IAAAb,GAAQ,WAAWc,EAAO,MAAM,KAAKN,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGP;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWf,CAAY,EAAA;AAAA,YAAE;AAAA,UAAA,IAGxD,gBAAAY,EAAAI,GAAA,EACI,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,YACvB,gBAAAH,EAAC,QAAA,EAAM,UAAAN,EAAE,yBAAyB,EAAA,CAAE;AAAA,UAAA,GACxC;AAAA,UAGJ,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAAH,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElD,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAV,uBACIe,GAAA,EAAO,SAASf,GAAS,UAAAD,GAAoB,MAAK,SAAQ,UAAS,QAAO,QAAO,UAC9E,4BAACiB,GAAA,EAAU,WAAWN,EAAO,WAAW,MAAM,IAAI,GACtD;AAAA,wBAEH,OAAA,EAAI,WAAWA,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,KAAc,MAAM,IAAI,WAAWP,EAAO,OAAO,EAAA,CACtD;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAf,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}
+{"version":3,"file":"fondue-components47.js","sources":["../src/components/ColorPicker/ColorGradientInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef } from 'react';\nimport { RgbaColorPicker } from 'react-colorful';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport { DEFAULT_COLOR } from './utils';\n\ntype ColorGradientInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The test id of the color picker gradient input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorGradientInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        'data-test-id': dataTestId = 'color-picker-input',\n    }: ColorGradientInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div className={styles.gradientInput} data-test-id={dataTestId} ref={forwardedRef}>\n            <RgbaColorPicker\n                className={styles.reactColorful}\n                color={{\n                    r: currentColor.red,\n                    g: currentColor.green,\n                    b: currentColor.blue,\n                    a: currentColor.alpha === undefined ? 1 : currentColor.alpha,\n                }}\n                onChange={(color) =>\n                    onColorChange({\n                        red: color.r,\n                        green: color.g,\n                        blue: color.b,\n                        alpha: color.a,\n                    })\n                }\n            />\n        </div>\n    );\n};\nColorGradientInput.displayName = 'ColorPicker.Gradient';\n\nexport const ForwardedRefColorGradientInput = forwardRef<HTMLDivElement, ColorGradientInputProps>(ColorGradientInput);\n"],"names":["ColorGradientInput","currentColor","DEFAULT_COLOR","onColorChange","dataTestId","forwardedRef","jsx","styles","RgbaColorPicker","color","ForwardedRefColorGradientInput","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAqB,CAC9B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC,EAAC,SAAI,WAAWC,EAAO,eAAe,gBAAcH,GAAY,KAAKC,GACjE,UAAA,gBAAAC;AAAA,EAACE;AAAA,EAAA;AAAA,IACG,WAAWD,EAAO;AAAA,IAClB,OAAO;AAAA,MACH,GAAGN,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa;AAAA,MAChB,GAAGA,EAAa,UAAU,SAAY,IAAIA,EAAa;AAAA,IAAA;AAAA,IAE3D,UAAU,CAACQ,MACPN,EAAc;AAAA,MACV,KAAKM,EAAM;AAAA,MACX,OAAOA,EAAM;AAAA,MACb,MAAMA,EAAM;AAAA,MACZ,OAAOA,EAAM;AAAA,IAAA,CAChB;AAAA,EAAA;AAAA,GAGb;AAGRT,EAAmB,cAAc;AAE1B,MAAMU,IAAiCC,EAAoDX,CAAkB;"}

package/dist/fondue-components48.js

@@ -1,134 +1,57 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { forwardRef as I, useState as R, useEffect as x } from "react";
-import { useTranslation as S } from "./fondue-components39.js";
-import { Select as c } from "./fondue-components26.js";
-import { TextInput as r } from "./fondue-components34.js";
-import l from "./fondue-components49.js";
-import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components50.js";
-const v = () => {
-}, f = ({
-  currentColor: t = V,
-  onColorChange: o = v,
-  currentFormat: u = y,
-  setCurrentFormat: g = v,
-  "data-test-id": b = "color-picker-value-input"
-}, N) => {
-  const { t: i } = S(), [p, d] = R(() => m(t));
-  return x(() => {
-    d(m(t));
-  }, [t]), /* @__PURE__ */ n("div", { className: l.inputs, "data-test-id": b, ref: N, children: [
-    /* @__PURE__ */ e("div", { className: l.colorFormatInput, children: /* @__PURE__ */ n(
-      c,
+import { jsxs as t, jsx as s, Fragment as N } from "react/jsx-runtime";
+import { IconDroplet as I, IconCross as k, IconCaretDown as v } from "@frontify/fondue-icons";
+import { forwardRef as P } from "react";
+import { useTranslation as w } from "./fondue-components40.js";
+import { Button as y } from "./fondue-components6.js";
+import a from "./fondue-components109.js";
+import { getColorWithName as z, colorToCss as x } from "./fondue-components51.js";
+const c = ({
+  id: m,
+  currentColor: e,
+  isOpen: d,
+  disabled: o = !1,
+  onClear: i,
+  onClick: l,
+  "data-test-id": n = "color-picker-input",
+  ...r
+}, p) => {
+  const { t: f } = w(), h = (e == null ? void 0 : e.name) ?? (e ? z(e, "RGBA").name : "");
+  return /* @__PURE__ */ t("div", { id: m, className: a.root, ref: p, "data-test-id": n, children: [
+    /* @__PURE__ */ t(
+      "button",
       {
-        "data-test-id": "color-picker-select-format",
-        "aria-label": i("ColorPicker_selectFormat"),
-        onSelect: (a) => {
-          g(a);
-        },
-        value: u,
+        className: a.button,
+        ...r,
+        disabled: o,
+        onClick: l,
+        type: "button",
+        "data-color-input-select": !0,
         children: [
-          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
-          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
+          (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ s(
+            "div",
+            {
+              "aria-hidden": !0,
+              className: a.colorIndicator,
+              style: { "--active-color": x(e) }
+            }
+          ) : /* @__PURE__ */ t(N, { children: [
+            /* @__PURE__ */ s(I, { size: 16 }),
+            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
+          ] }),
+          /* @__PURE__ */ s("span", { className: a.colorName, children: h })
         ]
       }
-    ) }),
-    u === "HEX" ? /* @__PURE__ */ e(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-hex",
-        className: l.valueInput,
-        type: "text",
-        value: p,
-        status: h(p) ? "neutral" : "error",
-        onBlur: (a) => {
-          h(a.target.value) && o({ ...D(a.target.value), alpha: t.alpha });
-        },
-        onChange: (a) => {
-          const k = a.target.value.startsWith("#") ? a.target.value.slice(1) : a.target.value;
-          d(k);
-        },
-        "aria-label": i("ColorPicker_hexValue"),
-        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "#" }) })
-      }
-    ) : /* @__PURE__ */ n("div", { className: l.colorChannelInputGroup, children: [
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-red",
-          className: l.valueInput,
-          value: t.red,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              red: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_redChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "R" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-green",
-          className: l.valueInput,
-          value: t.green,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              green: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_greenChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "G" }) })
-        }
-      ),
-      /* @__PURE__ */ e(
-        r.Root,
-        {
-          "data-test-id": "color-picker-value-input-blue",
-          className: l.valueInput,
-          value: t.blue,
-          type: "number",
-          onChange: (a) => {
-            o({
-              ...t,
-              blue: s(a.target.value)
-            });
-          },
-          "aria-label": i("ColorPicker_blueChannel"),
-          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "B" }) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: l.colorAlphaInput, children: /* @__PURE__ */ n(
-      r.Root,
-      {
-        "data-test-id": "color-picker-value-input-alpha",
-        className: l.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
-        type: "number",
-        onChange: (a) => {
-          o({
-            ...t,
-            alpha: s(a.target.value, 0, 100) / 100
-          });
-        },
-        "aria-label": i("ColorPicker_opacity"),
-        children: [
-          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "A" }) }),
-          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "%" }) })
-        ]
-      }
-    ) })
+    ),
+    /* @__PURE__ */ t("div", { className: a.actions, children: [
+      i && /* @__PURE__ */ s(y, { onPress: i, disabled: o, size: "small", emphasis: "weak", aspect: "square", children: /* @__PURE__ */ s(k, { className: a.clearIcon, size: 16 }) }),
+      /* @__PURE__ */ s("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ s(v, { size: 16 }) })
+    ] })
   ] });
 };
-f.displayName = "ColorPicker.Values";
-const F = I(f);
+c.displayName = "ColorPicker.Input";
+const F = P(c);
 export {
-  f as ColorValueInput,
-  F as ForwardedRefColorValueInput
+  c as ColorPickerInput,
+  F as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components48.js.map

package/dist/fondue-components48.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components48.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const [hexColorValue, setHexColorValue] = useState<string>(() => rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label={t('ColorPicker_selectFormat')}\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange({ ...hexColorToRgba(event.target.value), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_redChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_greenChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_blueChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_opacity')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components48.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>{t('ColorPicker_selectColor')}</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <Button onPress={onClear} disabled={disabled} size=\"small\" emphasis=\"weak\" aspect=\"square\">\n                        <IconCross className={styles.clearIcon} size={16} />\n                    </Button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","disabled","onClear","onClick","dataTestId","props","forwardedRef","t","useTranslation","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","Button","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;;;AA0CO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,KAAYV,KAAA,gBAAAA,EAAc,UAASA,IAAeW,EAAiBX,GAAc,MAAM,EAAE,OAAO;AACtG,SACI,gBAAAY,EAAC,SAAI,IAAAb,GAAQ,WAAWc,EAAO,MAAM,KAAKN,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGP;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAc;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWf,CAAY,EAAA;AAAA,YAAE;AAAA,UAAA,IAGxD,gBAAAY,EAAAI,GAAA,EACI,UAAA;AAAA,YAAA,gBAAAF,EAACG,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,YACvB,gBAAAH,EAAC,QAAA,EAAM,UAAAN,EAAE,yBAAyB,EAAA,CAAE;AAAA,UAAA,GACxC;AAAA,UAGJ,gBAAAM,EAAC,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAAH,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAElD,gBAAAE,EAAC,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAV,uBACIe,GAAA,EAAO,SAASf,GAAS,UAAAD,GAAoB,MAAK,SAAQ,UAAS,QAAO,QAAO,UAC9E,4BAACiB,GAAA,EAAU,WAAWN,EAAO,WAAW,MAAM,IAAI,GACtD;AAAA,MAEJ,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,OAAO,cAAYZ,IAAS,SAAS,UACxD,UAAA,gBAAAa,EAACM,GAAA,EAAc,MAAM,IAAI,EAAA,CAC7B;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AACAtB,EAAiB,cAAc;AAExB,MAAMuB,IAA+BC,EAAkDxB,CAAgB;"}

package/dist/fondue-components49.js

@@ -1,24 +1,134 @@
-const o = "_root_6n5w5_4", n = "_inputs_6n5w5_12", t = "_colorFormatInput_6n5w5_23", r = "_colorAlphaInput_6n5w5_24", u = "_colorChannelInputGroup_6n5w5_28", p = "_inputDecorator_6n5w5_39", _ = "_gradientInput_6n5w5_43", l = "_reactColorful_6n5w5_46", c = "_valueInput_6n5w5_50", a = {
-  root: o,
-  inputs: n,
-  colorFormatInput: t,
-  colorAlphaInput: r,
-  colorChannelInputGroup: u,
-  inputDecorator: p,
-  gradientInput: _,
-  reactColorful: l,
-  valueInput: c
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { forwardRef as I, useState as R, useEffect as x } from "react";
+import { useTranslation as S } from "./fondue-components40.js";
+import { Select as c } from "./fondue-components27.js";
+import { TextInput as r } from "./fondue-components35.js";
+import l from "./fondue-components50.js";
+import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components51.js";
+const v = () => {
+}, f = ({
+  currentColor: t = V,
+  onColorChange: o = v,
+  currentFormat: u = y,
+  setCurrentFormat: g = v,
+  "data-test-id": b = "color-picker-value-input"
+}, N) => {
+  const { t: i } = S(), [p, d] = R(() => m(t));
+  return x(() => {
+    d(m(t));
+  }, [t]), /* @__PURE__ */ n("div", { className: l.inputs, "data-test-id": b, ref: N, children: [
+    /* @__PURE__ */ e("div", { className: l.colorFormatInput, children: /* @__PURE__ */ n(
+      c,
+      {
+        "data-test-id": "color-picker-select-format",
+        "aria-label": i("ColorPicker_selectFormat"),
+        onSelect: (a) => {
+          g(a);
+        },
+        value: u,
+        children: [
+          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
+          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
+        ]
+      }
+    ) }),
+    u === "HEX" ? /* @__PURE__ */ e(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-hex",
+        className: l.valueInput,
+        type: "text",
+        value: p,
+        status: h(p) ? "neutral" : "error",
+        onBlur: (a) => {
+          h(a.target.value) && o({ ...D(a.target.value), alpha: t.alpha });
+        },
+        onChange: (a) => {
+          const k = a.target.value.startsWith("#") ? a.target.value.slice(1) : a.target.value;
+          d(k);
+        },
+        "aria-label": i("ColorPicker_hexValue"),
+        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "#" }) })
+      }
+    ) : /* @__PURE__ */ n("div", { className: l.colorChannelInputGroup, children: [
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-red",
+          className: l.valueInput,
+          value: t.red,
+          type: "number",
+          onChange: (a) => {
+            o({
+              ...t,
+              red: s(a.target.value)
+            });
+          },
+          "aria-label": i("ColorPicker_redChannel"),
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "R" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-green",
+          className: l.valueInput,
+          value: t.green,
+          type: "number",
+          onChange: (a) => {
+            o({
+              ...t,
+              green: s(a.target.value)
+            });
+          },
+          "aria-label": i("ColorPicker_greenChannel"),
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "G" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-blue",
+          className: l.valueInput,
+          value: t.blue,
+          type: "number",
+          onChange: (a) => {
+            o({
+              ...t,
+              blue: s(a.target.value)
+            });
+          },
+          "aria-label": i("ColorPicker_blueChannel"),
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "B" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: l.colorAlphaInput, children: /* @__PURE__ */ n(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-alpha",
+        className: l.valueInput,
+        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
+        type: "number",
+        onChange: (a) => {
+          o({
+            ...t,
+            alpha: s(a.target.value, 0, 100) / 100
+          });
+        },
+        "aria-label": i("ColorPicker_opacity"),
+        children: [
+          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "A" }) }),
+          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: l.inputDecorator, children: "%" }) })
+        ]
+      }
+    ) })
+  ] });
 };
+f.displayName = "ColorPicker.Values";
+const F = I(f);
 export {
-  r as colorAlphaInput,
-  u as colorChannelInputGroup,
-  t as colorFormatInput,
-  a as default,
-  _ as gradientInput,
-  p as inputDecorator,
-  n as inputs,
-  l as reactColorful,
-  o as root,
-  c as valueInput
+  f as ColorValueInput,
+  F as ForwardedRefColorValueInput
 };
 //# sourceMappingURL=fondue-components49.js.map

package/dist/fondue-components49.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components49.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components49.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { Select } from '../Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nconst nooperation = () => {};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = nooperation,\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = nooperation,\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const [hexColorValue, setHexColorValue] = useState<string>(() => rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label={t('ColorPicker_selectFormat')}\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange({ ...hexColorToRgba(event.target.value), alpha: currentColor.alpha });\n                        }\n                    }}\n                    onChange={(event) => {\n                        const inputValue = event.target.value.startsWith('#')\n                            ? event.target.value.slice(1)\n                            : event.target.value;\n\n                        setHexColorValue(inputValue);\n                    }}\n                    aria-label={t('ColorPicker_hexValue')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_redChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_greenChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label={t('ColorPicker_blueChannel')}\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label={t('ColorPicker_opacity')}\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["nooperation","ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","t","useTranslation","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","inputValue","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}

package/dist/fondue-components5.js

@@ -1,7 +1,7 @@
 import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { propsToCssVariables as x } from "./fondue-components42.js";
-import y from "./fondue-components43.js";
+import { propsToCssVariables as x } from "./fondue-components43.js";
+import y from "./fondue-components44.js";
 const c = n(
   ({
     as: a = "div",

package/dist/fondue-components50.js

@@ -1,56 +1,24 @@
-const g = { red: 255, green: 255, blue: 255, alpha: 1, name: "" }, p = "HEX", h = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
-}, $ = (e) => {
-  const n = /^([\dA-Fa-f]{3}){1,2}$/;
-  return e.length > 2 && n.test(e);
-}, u = (e) => {
-  const n = /^([\dA-Fa-f]{3}){1,2}$/, r = e.match(n);
-  if (!r)
-    return {
-      red: 0,
-      green: 0,
-      blue: 0,
-      alpha: 0
-    };
-  const t = r[0];
-  return t.length === 3 ? {
-    red: parseInt(`${t[0]}${t[0]}`, 16),
-    green: parseInt(`${t[1]}${t[1]}`, 16),
-    blue: parseInt(`${t[2]}${t[2]}`, 16),
-    alpha: 1
-  } : {
-    red: parseInt(t.slice(0, 2), 16),
-    green: parseInt(t.slice(2, 4), 16),
-    blue: parseInt(t.slice(4, 6), 16),
-    alpha: 1
-  };
-}, a = (e) => {
-  const { red: n, green: r, blue: t } = e;
-  return `${n.toString(16).padStart(2, "0")}${r.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
-}, s = (e) => {
-  const n = a(e), r = e.alpha ?? 1;
-  if (r < 1) {
-    const t = Math.round(r * 100);
-    return `#${n} ${t}%`;
-  }
-  return `#${n}`;
-}, l = (e, n) => n === "HEX" ? {
-  ...e,
-  name: s(e)
-} : {
-  ...e,
-  name: `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`
-}, i = (e, n = 0, r = 255) => e.length === 0 || parseInt(e) < n ? n : parseInt(e) > r ? r : parseInt(e);
+const o = "_root_6n5w5_4", n = "_inputs_6n5w5_12", t = "_colorFormatInput_6n5w5_23", r = "_colorAlphaInput_6n5w5_24", u = "_colorChannelInputGroup_6n5w5_28", p = "_inputDecorator_6n5w5_39", _ = "_gradientInput_6n5w5_43", l = "_reactColorful_6n5w5_46", c = "_valueInput_6n5w5_50", a = {
+  root: o,
+  inputs: n,
+  colorFormatInput: t,
+  colorAlphaInput: r,
+  colorChannelInputGroup: u,
+  inputDecorator: p,
+  gradientInput: _,
+  reactColorful: l,
+  valueInput: c
+};
 export {
-  g as DEFAULT_COLOR,
-  p as DEFAULT_FORMAT,
-  h as colorToCss,
-  l as getColorWithName,
-  s as getHexDisplayName,
-  i as getLimitedColorChannelValue,
-  u as hexColorToRgba,
-  $ as isValidHexColor,
-  a as rgbColorToHex
+  r as colorAlphaInput,
+  u as colorChannelInputGroup,
+  t as colorFormatInput,
+  a as default,
+  _ as gradientInput,
+  p as inputDecorator,
+  n as inputs,
+  l as reactColorful,
+  o as root,
+  c as valueInput
 };
 //# sourceMappingURL=fondue-components50.js.map