@frontify/fondue-components 24.1.0 → 25.0.0-rc.0

package/dist/fondue-components47.js

@@ -1,134 +1,35 @@
-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-components35.js";
-import { Select as c } from "./fondue-components22.js";
-import { TextInput as r } from "./fondue-components30.js";
-import l from "./fondue-components48.js";
-import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components49.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);
+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 {
-  f as ColorValueInput,
-  F as ForwardedRefColorValueInput
+  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/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/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-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,24 +1,57 @@
-const o = "_root_riubn_4", n = "_inputs_riubn_12", t = "_colorFormatInput_riubn_23", r = "_colorAlphaInput_riubn_24", u = "_colorChannelInputGroup_riubn_28", p = "_inputDecorator_riubn_39", _ = "_gradientInput_riubn_43", l = "_reactColorful_riubn_46", c = "_valueInput_riubn_50", a = {
-  root: o,
-  inputs: n,
-  colorFormatInput: t,
-  colorAlphaInput: r,
-  colorChannelInputGroup: u,
-  inputDecorator: p,
-  gradientInput: _,
-  reactColorful: l,
-  valueInput: c
+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-components37.js";
+import { Button as y } from "./fondue-components6.js";
+import a from "./fondue-components97.js";
+import { getColorWithName as z, colorToCss as x } from "./fondue-components51.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);
 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
+  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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"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} 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;"}

package/dist/fondue-components49.js

@@ -1,56 +1,134 @@
-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);
+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-components37.js";
+import { Select as c } from "./fondue-components24.js";
+import { TextInput as r } from "./fondue-components32.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 {
-  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
+  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":["../src/components/ColorPicker/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ColorFormat, type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\nexport const DEFAULT_FORMAT = 'HEX';\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n\n/**\n * Checks if a string is a valid hexadecimal color code. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} color - The color code to be checked.\n * @returns {boolean}\n * @example\n * isValidHexColor('FFF'); // true\n * @example\n * isValidHexColor('FF5733'); // true\n * @example\n * isValidHexColor('XYZ'); // false\n */\nexport const isValidHexColor = (color: string): boolean => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    return color.length > 2 && hexRegex.test(color);\n};\n\n/**\n * Converts a hexadecimal color code to an RGBA color object. This function accepts\n * both three-digit and six-digit hex codes without the '#' symbol.\n * @param {string} hex - The hex code, either 3 or 6 characters long. Characters should be from the set [0-9A-Fa-f].\n * @returns {RgbaColor}\n * @example\n * hexColorToRgba('FFF'); // { red: 255, green: 255, blue: 255, alpha: 1 }\n * @example\n * hexColorToRgba('FF5733'); // { red: 255, green: 87, blue: 51, alpha: 1 }\n * @example\n * hexColorToRgba('XYZ'); // { red: 0, green: 0, blue: 0, alpha: 0 }\n */\nexport const hexColorToRgba = (hex: string): RgbaColor => {\n    const hexRegex = /^([\\dA-Fa-f]{3}){1,2}$/;\n    const matches = hex.match(hexRegex);\n    if (!matches) {\n        return {\n            red: 0,\n            green: 0,\n            blue: 0,\n            alpha: 0,\n        };\n    }\n    const hexColor = matches[0];\n    if (hexColor.length === 3) {\n        return {\n            red: parseInt(`${hexColor[0]}${hexColor[0]}`, 16),\n            green: parseInt(`${hexColor[1]}${hexColor[1]}`, 16),\n            blue: parseInt(`${hexColor[2]}${hexColor[2]}`, 16),\n            alpha: 1,\n        };\n    }\n    return {\n        red: parseInt(hexColor.slice(0, 2), 16),\n        green: parseInt(hexColor.slice(2, 4), 16),\n        blue: parseInt(hexColor.slice(4, 6), 16),\n        alpha: 1,\n    };\n};\n\n/**\n * Converts an RGBA color object to a hexadecimal color code. This function returns a\n * six-digit hex code without the '#' symbol.\n * @param {RgbaColor} rgb - The RGBA color object.\n * @returns {string}\n * @example\n * rgbColorToHex({ red: 255, green: 255, blue: 255, alpha: 1 }); // '#FFFFFF'\n * @example\n * rgbColorToHex({ red: 255, green: 87, blue: 51, alpha: 1 }); // '#FF5733'\n * @example\n * rgbColorToHex({ red: 0, green: 0, blue: 0, alpha: 0 }); // '#000000'\n */\nexport const rgbColorToHex = (rgb: Omit<RgbaColor, 'alpha'>): string => {\n    const { red, green, blue } = rgb;\n    return `${red.toString(16).padStart(2, '0')}${green.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`;\n};\n\n/**\n * Returns a hex color display name with alpha percentage if alpha < 100%.\n * @param {RgbaColor} color - The RGBA color object.\n * @returns {string}\n * @example\n * getHexDisplayName({ red: 255, green: 255, blue: 255, alpha: 1 }); // '#FFFFFF'\n * @example\n * getHexDisplayName({ red: 255, green: 255, blue: 255, alpha: 0.9 }); // '#FFFFFF 90%'\n * @example\n * getHexDisplayName({ red: 255, green: 87, blue: 51, alpha: 0.84 }); // '#FF5733 84%'\n */\nexport const getHexDisplayName = (color: RgbaColor): string => {\n    const hexValue = rgbColorToHex(color);\n    const alpha = color.alpha ?? 1;\n\n    if (alpha < 1) {\n        const alphaPercentage = Math.round(alpha * 100);\n        return `#${hexValue} ${alphaPercentage}%`;\n    }\n\n    return `#${hexValue}`;\n};\n\n/**\n * Returns a color object with a name property based on the provided color and format.\n * @param {RgbaColor} color - The RGBA color object.\n * @param {ColorFormat} currentFormat - The current format of the color.\n * @returns {RgbaColor}\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'HEX'); // { red: 255, green: 255, blue: 255, alpha: 1, name: '#FFFFFF' }\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 0.9 }, 'HEX'); // { red: 255, green: 255, blue: 255, alpha: 0.9, name: '#FFFFFF 90%' }\n * @example\n * getColorWithName({ red: 255, green: 255, blue: 255, alpha: 1 }, 'RGBA'); // { red: 255, green: 255, blue: 255, alpha: 1, name: 'rgba(255, 255, 255, 1)' }\n * @example\n * getColorWithName({ red: 255, green: 87, blue: 51, alpha: 1 }, 'RGBA'); // { red: 255, green: 87, blue: 51, alpha: 1, name: 'rgba(255, 87, 51, 1)' }\n */\nexport const getColorWithName = (color: RgbaColor, currentFormat: ColorFormat) => {\n    if (currentFormat === 'HEX') {\n        return {\n            ...color,\n            name: getHexDisplayName(color),\n        };\n    }\n    return {\n        ...color,\n        name: `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`,\n    };\n};\n\n/**\n * Returns a number between a minimum and maximum value, inclusive.\n * @param {string} value - The value to be limited.\n * @param {number} [min=0] - The minimum value (inclusive).\n * @param {number} [max=255] - The maximum value (inclusive).\n * @returns {number}\n * @example\n * getLimitedColorChannelValue('255'); // 255\n * @example\n * getLimitedColorChannelValue('100'); // 100\n * @example\n * getLimitedColorChannelValue('0'); // 0\n * @example\n * getLimitedColorChannelValue('500'); // 255\n * @example\n * getLimitedColorChannelValue('500', 0, 100); // 100\n */\nexport const getLimitedColorChannelValue = (value: string, min: number = 0, max: number = 255): number => {\n    if (value.length === 0 || parseInt(value) < min) {\n        return min;\n    } else if (parseInt(value) > max) {\n        return max;\n    }\n    return parseInt(value);\n};\n"],"names":["DEFAULT_COLOR","DEFAULT_FORMAT","colorToCss","color","isValidHexColor","hexRegex","hexColorToRgba","hex","matches","hexColor","rgbColorToHex","rgb","red","green","blue","getHexDisplayName","hexValue","alpha","alphaPercentage","getColorWithName","currentFormat","getLimitedColorChannelValue","value","min","max"],"mappings":"AAIO,MAAMA,IAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,GAAG,MAAM,GAAA,GACnEC,IAAiB,OAajBC,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF,GAcaC,IAAkB,CAACD,MAA2B;AACvD,QAAME,IAAW;AACjB,SAAOF,EAAM,SAAS,KAAKE,EAAS,KAAKF,CAAK;AAClD,GAcaG,IAAiB,CAACC,MAA2B;AACtD,QAAMF,IAAW,0BACXG,IAAUD,EAAI,MAAMF,CAAQ;AAClC,MAAI,CAACG;AACD,WAAO;AAAA,MACH,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAGf,QAAMC,IAAWD,EAAQ,CAAC;AAC1B,SAAIC,EAAS,WAAW,IACb;AAAA,IACH,KAAK,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAChD,OAAO,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IAClD,MAAM,SAAS,GAAGA,EAAS,CAAC,CAAC,GAAGA,EAAS,CAAC,CAAC,IAAI,EAAE;AAAA,IACjD,OAAO;AAAA,EAAA,IAGR;AAAA,IACH,KAAK,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACtC,OAAO,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACxC,MAAM,SAASA,EAAS,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IACvC,OAAO;AAAA,EAAA;AAEf,GAcaC,IAAgB,CAACC,MAA0C;AACpE,QAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,MAAAC,EAAA,IAASH;AAC7B,SAAO,GAAGC,EAAI,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAM,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,GAAGC,EAAK,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AAC1H,GAaaC,IAAoB,CAACZ,MAA6B;AAC3D,QAAMa,IAAWN,EAAcP,CAAK,GAC9Bc,IAAQd,EAAM,SAAS;AAE7B,MAAIc,IAAQ,GAAG;AACX,UAAMC,IAAkB,KAAK,MAAMD,IAAQ,GAAG;AAC9C,WAAO,IAAID,CAAQ,IAAIE,CAAe;AAAA,EAC1C;AAEA,SAAO,IAAIF,CAAQ;AACvB,GAgBaG,IAAmB,CAAChB,GAAkBiB,MAC3CA,MAAkB,QACX;AAAA,EACH,GAAGjB;AAAA,EACH,MAAMY,EAAkBZ,CAAK;AAAA,IAG9B;AAAA,EACH,GAAGA;AAAA,EACH,MAAM,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAAA,GAqBtEkB,IAA8B,CAACC,GAAeC,IAAc,GAAGC,IAAc,QAClFF,EAAM,WAAW,KAAK,SAASA,CAAK,IAAIC,IACjCA,IACA,SAASD,CAAK,IAAIE,IAClBA,IAEJ,SAASF,CAAK;"}
+{"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/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-components38.js";
-import y from "./fondue-components39.js";
+import { propsToCssVariables as x } from "./fondue-components40.js";
+import y from "./fondue-components41.js";
 const c = n(
   ({
     as: a = "div",

package/dist/fondue-components50.js

@@ -1,11 +1,24 @@
-import { useEffect as f } from "react";
-import { syncRefs as o } from "./fondue-components51.js";
-const m = (s, e) => {
-  f(() => {
-    o(s, e);
-  }, [s]);
+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 {
-  m as useSyncRefs
+  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

package/dist/fondue-components50.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components50.js","sources":["../src/hooks/useSyncRefs.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, useEffect, type RefObject } from 'react';\n\nimport { syncRefs } from '#/utilities/domUtilities';\n\n/**\n * A custom React hook that synchronizes a local ref with a forwarded ref.\n * This is useful when you need to maintain both an internal reference to a DOM element\n * and allow external access through a forwarded ref.\n *\n * @template TElement - The type of the DOM element being referenced. Defaults to HTMLElement.\n * @param {RefObject<TElement>} localRef - The local ref object used internally by the component.\n * @param {ForwardedRef<TElement>} forwardedRef - The ref forwarded from a parent component.\n *\n * @example\n * ```tsx\n * const MyComponent = forwardRef<HTMLDivElement>((props, ref) => {\n *   const localRef = useRef<HTMLDivElement>(null);\n *   useSyncRefs(localRef, ref);\n *\n *   return <div ref={localRef}>Content</div>;\n * });\n * ```\n */\nexport const useSyncRefs = <TElement = HTMLElement>(\n    localRef: RefObject<TElement>,\n    forwardedRef: ForwardedRef<TElement>,\n) => {\n    useEffect(() => {\n        syncRefs<TElement>(localRef, forwardedRef);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [localRef]);\n};\n"],"names":["useSyncRefs","localRef","forwardedRef","useEffect","syncRefs"],"mappings":";;AAyBO,MAAMA,IAAc,CACvBC,GACAC,MACC;AACD,EAAAC,EAAU,MAAM;AACZ,IAAAC,EAAmBH,GAAUC,CAAY;AAAA,EAE7C,GAAG,CAACD,CAAQ,CAAC;AACjB;"}
+{"version":3,"file":"fondue-components50.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}