@frontify/fondue-components 29.1.0 → 30.0.0

package/dist/fondue-components52.js

@@ -1,24 +1,89 @@
-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 { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { IconCheckMark as F } from "@frontify/fondue-icons";
+import { useId as M, useCallback as O, useMemo as f, Children as V, isValidElement as _ } from "react";
+import { useTranslation as z } from "./fondue-components43.js";
+import { useFondueRouter as A } from "./fondue-components26.js";
+import { ForwardedRefCardAction as B } from "./fondue-components49.js";
+import { CardContext as P } from "./fondue-components134.js";
+import r from "./fondue-components133.js";
+const $ = ({
+  "data-test-id": h = "fondue-card",
+  "aria-label": l,
+  "aria-describedby": c,
+  selected: e = !1,
+  href: a,
+  onSelect: s,
+  onMouseEnter: k,
+  onMouseLeave: v,
+  children: m
+}, x) => {
+  const { t: u } = z(), { navigate: b, useHref: I } = A(), N = a ? I(a) : "", i = !!s, g = !!a, w = !!(a && s), d = `${M()}-title`, R = O(
+    (t) => {
+      a && !t.metaKey && !t.ctrlKey && !t.shiftKey && t.button === 0 && (t.preventDefault(), b(a));
+    },
+    [a, b]
+  ), C = l ? void 0 : d, H = f(() => ({ titleId: d }), [d]), { actions: p, otherChildren: K } = f(() => {
+    const t = [], y = [];
+    return V.forEach(m, (n) => {
+      _(n) && n.type === B ? t.push(n) : y.push(n);
+    }), { actions: t, otherChildren: y };
+  }, [m]), T = !!a && !(i && e), j = i && e;
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      ref: x,
+      className: r.root,
+      "data-test-id": h,
+      "data-interactive": g,
+      "data-selectable": i,
+      "data-selected": i && e,
+      onMouseEnter: k,
+      onMouseLeave: v,
+      children: /* @__PURE__ */ E(P.Provider, { value: H, children: [
+        T && /* @__PURE__ */ o(
+          "a",
+          {
+            className: r.overlay,
+            href: N,
+            onClick: R,
+            "aria-label": l,
+            "aria-labelledby": C,
+            "aria-describedby": c,
+            "aria-current": e ? "true" : void 0
+          }
+        ),
+        j && /* @__PURE__ */ o(
+          "button",
+          {
+            className: r.overlay,
+            type: "button",
+            tabIndex: 0,
+            "aria-label": l,
+            "aria-labelledby": C,
+            "aria-describedby": c,
+            "aria-pressed": e,
+            onClick: s
+          }
+        ),
+        w && /* @__PURE__ */ o(
+          "button",
+          {
+            className: r.checkbox,
+            type: "button",
+            "aria-label": u(e ? "Card_deselect" : "Card_select"),
+            "aria-pressed": e,
+            onClick: s,
+            children: /* @__PURE__ */ o(F, { size: 16 })
+          }
+        ),
+        K,
+        p.length > 0 && /* @__PURE__ */ o("div", { className: r.actions, "data-test-id": "fondue-card-actions", children: p })
+      ] })
+    }
+  );
 };
+$.displayName = "Card.Root";
 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
+  $ as CardRoot
 };
 //# sourceMappingURL=fondue-components52.js.map

package/dist/fondue-components52.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components52.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components52.js","sources":["../src/components/Card/CardRoot.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark } from '@frontify/fondue-icons';\nimport {\n    Children,\n    type ForwardedRef,\n    isValidElement,\n    type MouseEvent,\n    type MouseEventHandler,\n    type ReactNode,\n    useCallback,\n    useId,\n    useMemo,\n} from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { useFondueRouter } from '../RouterProvider/RouterProvider';\n\nimport { ForwardedRefCardAction } from './CardAction';\nimport { CardContext } from './CardContext';\nimport styles from './styles/card.module.scss';\n\ntype CardRootBaseProps = {\n    'data-test-id'?: string;\n    /**\n     * Called when the pointer enters the card.\n     */\n    onMouseEnter?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Called when the pointer leaves the card.\n     */\n    onMouseLeave?: MouseEventHandler<HTMLDivElement>;\n    children?: ReactNode;\n};\n\ntype CardRootInteractiveProps = {\n    /**\n     * Navigation URL. The overlay renders as an anchor (`<a>`),\n     * enabling native link behavior (middle-click, right-click \"Open in new tab\", SEO).\n     *\n     * When the card is not selected, clicking the surface navigates.\n     * When the card is selected and `onSelect` is provided, clicking the\n     * surface fires `onSelect` instead (e.g. to deselect).\n     */\n    href: string;\n    /**\n     * Accessible label for the card's clickable overlay.\n     */\n    'aria-label'?: string;\n    /**\n     * ID of the element that describes the card (e.g. a subtitle element).\n     */\n    'aria-describedby'?: string;\n};\n\nexport type CardRootProps = CardRootBaseProps &\n    (\n        | (CardRootInteractiveProps & {\n              /**\n               * Selection callback for the card's checkbox.\n               * Also fires on the card surface when the card is selected.\n               */\n              onSelect: MouseEventHandler<HTMLElement>;\n              /**\n               * Whether the card is in a selected state.\n               * @default false\n               */\n              selected?: boolean;\n          })\n        | (CardRootInteractiveProps & {\n              onSelect?: never;\n              selected?: never;\n          })\n        | {\n              href?: never;\n              onSelect?: never;\n              selected?: never;\n              'aria-label'?: never;\n              'aria-describedby'?: never;\n          }\n    );\n\nexport const CardRoot = (\n    {\n        'data-test-id': dataTestId = 'fondue-card',\n        'aria-label': ariaLabel,\n        'aria-describedby': ariaDescribedby,\n        selected = false,\n        href,\n        onSelect,\n        onMouseEnter,\n        onMouseLeave,\n        children,\n    }: CardRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n    const { navigate, useHref: resolveHref } = useFondueRouter();\n    const resolvedHref = href ? resolveHref(href) : '';\n\n    const isSelectable = !!onSelect;\n    const isClickable = !!href;\n    const showCheckbox = !!(href && onSelect);\n    const generatedTitleId = useId();\n    const titleId = `${generatedTitleId}-title`;\n\n    const handleLinkClick = useCallback(\n        (event: MouseEvent<HTMLAnchorElement>) => {\n            if (href && !event.metaKey && !event.ctrlKey && !event.shiftKey && event.button === 0) {\n                event.preventDefault();\n                navigate(href);\n            }\n        },\n        [href, navigate],\n    );\n\n    const labelledby = ariaLabel ? undefined : titleId;\n    const contextValue = useMemo(() => ({ titleId }), [titleId]);\n\n    const { actions, otherChildren } = useMemo(() => {\n        const actions: ReactNode[] = [];\n        const otherChildren: ReactNode[] = [];\n\n        Children.forEach(children, (child) => {\n            if (isValidElement(child) && child.type === ForwardedRefCardAction) {\n                actions.push(child);\n            } else {\n                otherChildren.push(child);\n            }\n        });\n\n        return { actions, otherChildren };\n    }, [children]);\n\n    const showLinkOverlay = !!href && !(isSelectable && selected);\n    const showButtonOverlay = isSelectable && selected;\n\n    return (\n        <div\n            ref={ref}\n            className={styles.root}\n            data-test-id={dataTestId}\n            data-interactive={isClickable}\n            data-selectable={isSelectable}\n            data-selected={isSelectable && selected}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n        >\n            <CardContext.Provider value={contextValue}>\n                {showLinkOverlay && (\n                    <a\n                        className={styles.overlay}\n                        href={resolvedHref}\n                        onClick={handleLinkClick}\n                        aria-label={ariaLabel}\n                        aria-labelledby={labelledby}\n                        aria-describedby={ariaDescribedby}\n                        aria-current={selected ? 'true' : undefined}\n                    />\n                )}\n                {showButtonOverlay && (\n                    <button\n                        className={styles.overlay}\n                        type=\"button\"\n                        tabIndex={0}\n                        aria-label={ariaLabel}\n                        aria-labelledby={labelledby}\n                        aria-describedby={ariaDescribedby}\n                        aria-pressed={selected}\n                        onClick={onSelect}\n                    />\n                )}\n                {showCheckbox && (\n                    <button\n                        className={styles.checkbox}\n                        type=\"button\"\n                        aria-label={selected ? t('Card_deselect') : t('Card_select')}\n                        aria-pressed={selected}\n                        onClick={onSelect}\n                    >\n                        <IconCheckMark size={16} />\n                    </button>\n                )}\n                {otherChildren}\n                {actions.length > 0 && (\n                    <div className={styles.actions} data-test-id=\"fondue-card-actions\">\n                        {actions}\n                    </div>\n                )}\n            </CardContext.Provider>\n        </div>\n    );\n};\nCardRoot.displayName = 'Card.Root';\n"],"names":["CardRoot","dataTestId","ariaLabel","ariaDescribedby","selected","href","onSelect","onMouseEnter","onMouseLeave","children","ref","t","useTranslation","navigate","resolveHref","useFondueRouter","resolvedHref","isSelectable","isClickable","showCheckbox","titleId","useId","handleLinkClick","useCallback","event","labelledby","contextValue","useMemo","actions","otherChildren","Children","child","isValidElement","ForwardedRefCardAction","showLinkOverlay","showButtonOverlay","jsx","styles","jsxs","CardContext","IconCheckMark"],"mappings":";;;;;;;;AAmFO,MAAMA,IAAW,CACpB;AAAA,EACI,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC;AAAA,EACd,oBAAoBC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACJ,GACAC,MACC;AACD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,EAAE,UAAAC,GAAU,SAASC,EAAA,IAAgBC,EAAA,GACrCC,IAAeX,IAAOS,EAAYT,CAAI,IAAI,IAE1CY,IAAe,CAAC,CAACX,GACjBY,IAAc,CAAC,CAACb,GAChBc,IAAe,CAAC,EAAEd,KAAQC,IAE1Bc,IAAU,GADSC,EAAA,CACU,UAE7BC,IAAkBC;AAAA,IACpB,CAACC,MAAyC;AACtC,MAAInB,KAAQ,CAACmB,EAAM,WAAW,CAACA,EAAM,WAAW,CAACA,EAAM,YAAYA,EAAM,WAAW,MAChFA,EAAM,eAAA,GACNX,EAASR,CAAI;AAAA,IAErB;AAAA,IACA,CAACA,GAAMQ,CAAQ;AAAA,EAAA,GAGbY,IAAavB,IAAY,SAAYkB,GACrCM,IAAeC,EAAQ,OAAO,EAAE,SAAAP,MAAY,CAACA,CAAO,CAAC,GAErD,EAAE,SAAAQ,GAAS,eAAAC,EAAA,IAAkBF,EAAQ,MAAM;AAC7C,UAAMC,IAAuB,CAAA,GACvBC,IAA6B,CAAA;AAEnC,WAAAC,EAAS,QAAQrB,GAAU,CAACsB,MAAU;AAClC,MAAIC,EAAeD,CAAK,KAAKA,EAAM,SAASE,IACxCL,EAAQ,KAAKG,CAAK,IAElBF,EAAc,KAAKE,CAAK;AAAA,IAEhC,CAAC,GAEM,EAAE,SAAAH,GAAS,eAAAC,EAAAA;AAAAA,EACtB,GAAG,CAACpB,CAAQ,CAAC,GAEPyB,IAAkB,CAAC,CAAC7B,KAAQ,EAAEY,KAAgBb,IAC9C+B,IAAoBlB,KAAgBb;AAE1C,SACI,gBAAAgC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAA1B;AAAA,MACA,WAAW2B,EAAO;AAAA,MAClB,gBAAcpC;AAAA,MACd,oBAAkBiB;AAAA,MAClB,mBAAiBD;AAAA,MACjB,iBAAeA,KAAgBb;AAAA,MAC/B,cAAAG;AAAA,MACA,cAAAC;AAAA,MAEA,UAAA,gBAAA8B,EAACC,EAAY,UAAZ,EAAqB,OAAOb,GACxB,UAAA;AAAA,QAAAQ,KACG,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,MAAMrB;AAAA,YACN,SAASM;AAAA,YACT,cAAYpB;AAAA,YACZ,mBAAiBuB;AAAA,YACjB,oBAAkBtB;AAAA,YAClB,gBAAcC,IAAW,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGzC+B,KACG,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,MAAK;AAAA,YACL,UAAU;AAAA,YACV,cAAYnC;AAAA,YACZ,mBAAiBuB;AAAA,YACjB,oBAAkBtB;AAAA,YAClB,gBAAcC;AAAA,YACd,SAASE;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhBa,KACG,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,EAAO;AAAA,YAClB,MAAK;AAAA,YACL,cAAuB1B,EAAXP,IAAa,kBAAqB,aAAN;AAAA,YACxC,gBAAcA;AAAA,YACd,SAASE;AAAA,YAET,UAAA,gBAAA8B,EAACI,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGhCX;AAAA,QACAD,EAAQ,SAAS,KACd,gBAAAQ,EAAC,OAAA,EAAI,WAAWC,EAAO,SAAS,gBAAa,uBACxC,UAAAT,EAAA,CACL;AAAA,MAAA,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAGZ;AACA5B,EAAS,cAAc;"}

package/dist/fondue-components53.js

@@ -1,56 +1,16 @@
-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_1fezf_5", n = "_indicator_1fezf_88", e = "_icon_1fezf_113", c = "_iconIndeterminate_1fezf_129", t = "_iconChecked_1fezf_133", i = {
+  root: o,
+  indicator: n,
+  icon: e,
+  iconIndeterminate: c,
+  iconChecked: t
+};
 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
+  i as default,
+  e as icon,
+  t as iconChecked,
+  c as iconIndeterminate,
+  n as indicator,
+  o as root
 };
 //# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components53.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components53.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-components53.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/fondue-components54.js

@@ -1,11 +1,35 @@
-import { useEffect as f } from "react";
-import { syncRefs as o } from "./fondue-components55.js";
-const m = (s, e) => {
-  f(() => {
-    o(s, e);
-  }, [s]);
-};
+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-components57.js";
+import { DEFAULT_COLOR as s } from "./fondue-components58.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 {
-  m as useSyncRefs
+  i as ColorGradientInput,
+  c as ForwardedRefColorGradientInput
 };
 //# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components54.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components54.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-components54.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-components55.js

@@ -1,16 +1,57 @@
-function s(u, t) {
-  t && (typeof t == "function" ? t(u.current) : t && "current" in t && (t.current = u.current));
-}
-function i(u) {
-  u.currentTarget.dataset.autoFocusVisible = "false";
-}
-function a(u) {
-  const t = u.relatedTarget;
-  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? u.target.dataset.showFocusRing = "true" : u.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
-}
+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-components43.js";
+import { Button as y } from "./fondue-components6.js";
+import a from "./fondue-components123.js";
+import { getColorWithName as z, colorToCss as x } from "./fondue-components58.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",
+      {
+        className: a.button,
+        ...r,
+        disabled: o,
+        onClick: l,
+        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(N, { children: [
+            /* @__PURE__ */ s(I, { size: 16 }),
+            /* @__PURE__ */ s("span", { children: f("ColorPicker_selectColor") })
+          ] }),
+          /* @__PURE__ */ s("span", { className: a.colorName, children: h })
+        ]
+      }
+    ),
+    /* @__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 }) })
+    ] })
+  ] });
+};
+c.displayName = "ColorPicker.Input";
+const F = P(c);
 export {
-  i as addAutoFocusAttribute,
-  a as addShowFocusRing,
-  s as syncRefs
+  c as ColorPickerInput,
+  F as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components55.js.map

package/dist/fondue-components55.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components55.js","sources":["../src/utilities/domUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FocusEvent, type MouseEvent as ReactMouseEvent, type ForwardedRef, type RefObject } from 'react';\n\nexport const MAX_HEIGHT_MARGIN = 8;\n\n/**\n * Sets the maximum height for a dialog element based on its position on the viewport.\n * The function calculates the space below the dialog up to the bottom of the viewport window,\n * subtracting a default margin, and sets this value as the max-height style of the dialog.\n *\n * @param {HTMLElement} dialog - The dialog element whose maximum height is to be set.\n *\n * @example\n * // Suppose you have a dialog element with id 'my-dialog'.\n * const dialogElement = myDialogRef.current || document.getElementById('my-dialog');\n * // Setting its max height relative to its current position and the viewport's dimensions.\n * setMaxHeightToAvailableSpace(dialogElement);\n */\nexport function setMaxHeightToAvailableSpace(dialog: HTMLElement) {\n    if (!window) {\n        throw new Error('Window object not found, this method should be used in a browser environment');\n    }\n\n    dialog.style.maxHeight = '';\n\n    const { top, bottom } = dialog.getBoundingClientRect();\n    if (top - MAX_HEIGHT_MARGIN < 0) {\n        // if the dialog is overflowing to the top\n        dialog.style.maxHeight = `${bottom - MAX_HEIGHT_MARGIN}px`;\n    } else if (bottom + MAX_HEIGHT_MARGIN > window.innerHeight) {\n        // if the dialog is overflowing to the bottom\n        dialog.style.maxHeight = `${window.innerHeight - top - MAX_HEIGHT_MARGIN}px`;\n    }\n}\n\n/**\n * Checks if a specified HTML element is visible within the viewport.\n * Visibility is determined by several factors:\n * - The element must have non-zero dimensions.\n * - The element's computed style must not be `display: none`, `visibility: hidden`, or `opacity: 0`.\n * - The element must be within the bounds of the current viewport.\n *\n * @param {HTMLElement} element - The HTML element to check for visibility.\n * @returns {boolean} Returns true if the element is visible according to the criteria specified, otherwise returns false.\n */\nexport function isElementVisible(element: HTMLElement) {\n    const rect = element.getBoundingClientRect();\n    const hasSize = rect.width > 0 && rect.height > 0;\n\n    const style = window.getComputedStyle(element);\n    const isVisibleStyle = style.display !== 'none' && style.visibility !== 'hidden' && parseFloat(style.opacity) !== 0;\n\n    // Check if the element is within the viewport\n    const isInViewport =\n        rect.top < window.innerHeight && rect.left < window.innerWidth && rect.bottom > 0 && rect.right > 0;\n\n    return hasSize && isVisibleStyle && isInViewport;\n}\n\n/**\n * Assigns a local DOM ref to a forwarded ref.\n *\n * @param {RefObject<HTMLDivElement>} localRef - The local React reference to an HTMLDivElement.\n * @param {ForwardedRef<HTMLDivElement>} forwardedRef - The ref forwarded from a parent component.\n */\nexport function syncRefs<TElement = HTMLElement>(localRef: RefObject<TElement>, forwardedRef: ForwardedRef<TElement>) {\n    if (!forwardedRef) {\n        return;\n    }\n\n    if (typeof forwardedRef === 'function') {\n        forwardedRef(localRef.current);\n    } else if (forwardedRef && 'current' in forwardedRef) {\n        forwardedRef.current = localRef.current;\n    }\n}\n\n/**\n * Sets the 'autoFocusVisible' data attribute to 'false' on the current target of a mouse event.\n * This function is typically used to indicate that an element has been interacted with via mouse,\n * which should prevent the focus ring from being displayed when the element receives focus.\n *\n * @param mouseEvent - The mouse event object.\n */\nexport function addAutoFocusAttribute(mouseEvent: ReactMouseEvent<HTMLButtonElement, MouseEvent>) {\n    mouseEvent.currentTarget.dataset.autoFocusVisible = 'false';\n}\n\n/**\n * Manages the focus ring visibility based on the previous focus state and the current focus event.\n * This function sets the 'showFocusRing' data attribute on the target element and updates the\n * 'autoFocusVisible' data attribute on the previously focused element.\n *\n * ! This function should be used in conjunction with the 'addAutoFocusAttribute' function and the autoFocusVisible data autoFocusTrigger.\n *\n * @param event - The focus event object.\n */\nexport function addShowFocusRing(event: FocusEvent<HTMLDivElement, HTMLElement>) {\n    const triggerElement = event.relatedTarget;\n\n    if (!triggerElement?.dataset.autoFocusTrigger) {\n        return;\n    }\n\n    if (triggerElement.dataset.autoFocusVisible === 'true') {\n        event.target.dataset.showFocusRing = 'true';\n    } else {\n        event.target.dataset.showFocusRing = 'false';\n    }\n\n    triggerElement.dataset.autoFocusVisible = 'true';\n}\n"],"names":["syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAkEO,SAASA,EAAiCC,GAA+BC,GAAsC;AAClH,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AAC9F,EAAAA,EAAW,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAE7B,EAAKC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SAC5CD,EAAM,OAAO,QAAQ,gBAAgB,SAErCA,EAAM,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
+{"version":3,"file":"fondue-components55.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-components56.js

@@ -1,20 +1,134 @@
-const e = "_content_3jnjr_6", n = "_header_3jnjr_44", t = "_footer_3jnjr_45", o = "_body_3jnjr_46", r = "_underlay_3jnjr_181", _ = "_sideContent_3jnjr_191", s = "_screenReaderOnly_3jnjr_203", d = {
-  content: e,
-  header: n,
-  footer: t,
-  body: o,
-  underlay: r,
-  sideContent: _,
-  screenReaderOnly: s
+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-components43.js";
+import { Select as c } from "./fondue-components30.js";
+import { TextInput as r } from "./fondue-components38.js";
+import l from "./fondue-components57.js";
+import { rgbColorToHex as m, DEFAULT_COLOR as V, DEFAULT_FORMAT as y, isValidHexColor as h, hexColorToRgba as D, getLimitedColorChannelValue as s } from "./fondue-components58.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 {
-  o as body,
-  e as content,
-  d as default,
-  t as footer,
-  n as header,
-  s as screenReaderOnly,
-  _ as sideContent,
-  r as underlay
+  f as ColorValueInput,
+  F as ForwardedRefColorValueInput
 };
 //# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components56.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components56.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components56.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-components57.js

@@ -1,8 +1,24 @@
-const o = "_root_2xf5e_2", t = {
-  root: o
+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 {
-  t as default,
-  o as root
+  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-components57.js.map

package/dist/fondue-components57.js.map

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