@frontify/fondue-components 4.0.0 → 4.0.2

package/dist/fondue-components33.js

@@ -1,24 +1,133 @@
-const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_23", r = "_colorAlphaInput_v784d_24", u = "_colorChannelInputGroup_v784d_28", p = "_inputDecorator_v784d_39", _ = "_gradientInput_v784d_43", l = "_reactColorful_v784d_46", c = "_valueInput_v784d_50", a = {
-  root: o,
-  inputs: t,
-  colorFormatInput: n,
-  colorAlphaInput: r,
-  colorChannelInputGroup: u,
-  inputDecorator: p,
-  gradientInput: _,
-  reactColorful: l,
-  valueInput: c
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as b, useState as g, useEffect as R } from "react";
+import { Select as c } from "./fondue-components18.js";
+import { TextInput as r } from "./fondue-components22.js";
+import a from "./fondue-components34.js";
+import { rgbColorToHex as d, isValidHexColor as m, hexColorToRgba as I, getLimitedColorChannelValue as n, DEFAULT_COLOR as x, DEFAULT_FORMAT as S } from "./fondue-components35.js";
+const h = ({
+  currentColor: t = x,
+  onColorChange: i = () => {
+  },
+  currentFormat: s = S,
+  setCurrentFormat: v = () => {
+  },
+  "data-test-id": f = "color-picker-value-input"
+}, N) => {
+  const [u, p] = g(d(t));
+  return R(() => {
+    p(d(t));
+  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: N, children: [
+    /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ o(
+      c,
+      {
+        "data-test-id": "color-picker-select-format",
+        "aria-label": "Select a color format",
+        onSelect: (l) => {
+          v(l);
+        },
+        value: s,
+        children: [
+          /* @__PURE__ */ e(c.Item, { value: "HEX", children: "HEX" }),
+          /* @__PURE__ */ e(c.Item, { value: "RGBA", children: "RGBA" })
+        ]
+      }
+    ) }),
+    s === "HEX" ? /* @__PURE__ */ e(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-hex",
+        className: a.valueInput,
+        type: "text",
+        value: u,
+        status: m(u) ? "neutral" : "error",
+        onBlur: (l) => {
+          m(l.target.value) && i(I(l.target.value));
+        },
+        onChange: (l) => {
+          p(l.target.value);
+        },
+        "aria-label": "Hex color value",
+        children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "#" }) })
+      }
+    ) : /* @__PURE__ */ o("div", { className: a.colorChannelInputGroup, children: [
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-red",
+          className: a.valueInput,
+          value: t.red,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              red: n(l.target.value)
+            });
+          },
+          "aria-label": "Red Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "R" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-green",
+          className: a.valueInput,
+          value: t.green,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              green: n(l.target.value)
+            });
+          },
+          "aria-label": "Green Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "G" }) })
+        }
+      ),
+      /* @__PURE__ */ e(
+        r.Root,
+        {
+          "data-test-id": "color-picker-value-input-blue",
+          className: a.valueInput,
+          value: t.blue,
+          type: "number",
+          onChange: (l) => {
+            i({
+              ...t,
+              blue: n(l.target.value)
+            });
+          },
+          "aria-label": "Blue Color Channel",
+          children: /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "B" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: a.colorAlphaInput, children: /* @__PURE__ */ o(
+      r.Root,
+      {
+        "data-test-id": "color-picker-value-input-alpha",
+        className: a.valueInput,
+        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100),
+        type: "number",
+        onChange: (l) => {
+          i({
+            ...t,
+            alpha: n(l.target.value, 0, 100) / 100
+          });
+        },
+        "aria-label": "Color Opacity",
+        children: [
+          /* @__PURE__ */ e(r.Slot, { name: "left", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "A" }) }),
+          /* @__PURE__ */ e(r.Slot, { name: "right", children: /* @__PURE__ */ e("span", { className: a.inputDecorator, children: "%" }) })
+        ]
+      }
+    ) })
+  ] });
 };
+h.displayName = "ColorPicker.Values";
+const E = b(h);
 export {
-  r as colorAlphaInput,
-  u as colorChannelInputGroup,
-  n as colorFormatInput,
-  a as default,
-  _ as gradientInput,
-  p as inputDecorator,
-  t as inputs,
-  l as reactColorful,
-  o as root,
-  c as valueInput
+  h as ColorValueInput,
+  E as ForwardedRefColorValueInput
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components33.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components33.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 { 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\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = () => {},\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\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=\"Select a color format\"\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));\n                        }\n                    }}\n                    onChange={(event) => {\n                        setHexColorValue(event.target.value);\n                    }}\n                    aria-label=\"Hex color value\"\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=\"Red Color Channel\"\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=\"Green Color Channel\"\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=\"Blue Color Channel\"\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                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100)}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label=\"Color 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":["ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":";;;;;;AA+CO,MAAMA,IAAkB,CAC3B;AAAA,EACI,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC,IAAgBC;AAAA,EAChB,kBAAAC,IAAmB,MAAM;AAAA,EAAC;AAAA,EAC1B,gBAAgBC,IAAa;AACjC,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAiBC,EAAcX,CAAY,CAAC;AAEtF,SAAAY,EAAU,MAAM;AACK,IAAAH,EAAAE,EAAcX,CAAY,CAAC;AAAA,EAAA,GAC7C,CAACA,CAAY,CAAC,GAGb,gBAAAa,EAAC,SAAI,WAAWC,EAAO,QAAQ,gBAAcR,GAAY,KAAKC,GAC1D,UAAA;AAAA,IAAC,gBAAAQ,EAAA,OAAA,EAAI,WAAWD,EAAO,kBACnB,UAAA,gBAAAD;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,cAAW;AAAA,QACX,UAAU,CAACC,MAAkB;AACzB,UAAAZ,EAAiBY,CAA4B;AAAA,QACjD;AAAA,QACA,OAAOd;AAAA,QAEP,UAAA;AAAA,UAAA,gBAAAY,EAACC,EAAO,MAAP,EAAY,OAAM,OAAM,UAAG,OAAA;AAAA,4BAC3BA,EAAO,MAAP,EAAY,OAAM,QAAO,UAAI,OAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEtC;AAAA,IACCb,MAAkB,QACf,gBAAAY;AAAA,MAACG,EAAU;AAAA,MAAV;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAO;AAAA,QAClB,MAAK;AAAA,QACL,OAAON;AAAA,QACP,QAAQW,EAAgBX,CAAa,IAAI,YAAY;AAAA,QACrD,QAAQ,CAACY,MAAU;AACf,UAAID,EAAgBC,EAAM,OAAO,KAAK,KAClClB,EAAcmB,EAAeD,EAAM,OAAO,KAAK,CAAC;AAAA,QAExD;AAAA,QACA,UAAU,CAACA,MAAU;AACA,UAAAX,EAAAW,EAAM,OAAO,KAAK;AAAA,QACvC;AAAA,QACA,cAAW;AAAA,QAEX,UAAC,gBAAAL,EAAAG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAC7C,CAAA;AAAA,MAAA;AAAA,IAAA,IAGJ,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,wBACnB,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOd,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACoB,MAAU;AACH,YAAAlB,EAAA;AAAA,cACV,GAAGF;AAAA,cACH,KAAKsB,EAA4BF,EAAM,OAAO,KAAK;AAAA,YAAA,CACtD;AAAA,UACL;AAAA,UACA,cAAW;AAAA,UAEX,UAAC,gBAAAL,EAAAG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAC7C,CAAA;AAAA,QAAA;AAAA,MACJ;AAAA,MACA,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOd,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACoB,MAAU;AACH,YAAAlB,EAAA;AAAA,cACV,GAAGF;AAAA,cACH,OAAOsB,EAA4BF,EAAM,OAAO,KAAK;AAAA,YAAA,CACxD;AAAA,UACL;AAAA,UACA,cAAW;AAAA,UAEX,UAAC,gBAAAL,EAAAG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAC7C,CAAA;AAAA,QAAA;AAAA,MACJ;AAAA,MACA,gBAAAC;AAAA,QAACG,EAAU;AAAA,QAAV;AAAA,UACG,gBAAa;AAAA,UACb,WAAWJ,EAAO;AAAA,UAClB,OAAOd,EAAa;AAAA,UACpB,MAAK;AAAA,UACL,UAAU,CAACoB,MAAU;AACH,YAAAlB,EAAA;AAAA,cACV,GAAGF;AAAA,cACH,MAAMsB,EAA4BF,EAAM,OAAO,KAAK;AAAA,YAAA,CACvD;AAAA,UACL;AAAA,UACA,cAAW;AAAA,UAEX,UAAC,gBAAAL,EAAAG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAC7C,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,IAEH,gBAAAC,EAAA,OAAA,EAAI,WAAWD,EAAO,iBACnB,UAAA,gBAAAD;AAAA,MAACK,EAAU;AAAA,MAAV;AAAA,QACG,gBAAa;AAAA,QACb,WAAWJ,EAAO;AAAA,QAClB,OAAOd,EAAa,UAAU,SAAY,MAAM,KAAK,MAAMA,EAAa,QAAQ,GAAG;AAAA,QACnF,MAAK;AAAA,QACL,UAAU,CAACoB,MAAU;AACH,UAAAlB,EAAA;AAAA,YACV,GAAGF;AAAA,YACH,OAAOsB,EAA4BF,EAAM,OAAO,OAAO,GAAG,GAAG,IAAI;AAAA,UAAA,CACpE;AAAA,QACL;AAAA,QACA,cAAW;AAAA,QAEX,UAAA;AAAA,UAAC,gBAAAL,EAAAG,EAAU,MAAV,EAAe,MAAK,QACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAC,CAAA,GAC7C;AAAA,UACC,gBAAAC,EAAAG,EAAU,MAAV,EAAe,MAAK,SACjB,UAAC,gBAAAH,EAAA,QAAA,EAAK,WAAWD,EAAO,gBAAgB,UAAA,IAAA,CAAC,EAC7C,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAER,CAAA;AAAA,EAAA,GACJ;AAER;AACAf,EAAgB,cAAc;AAEjB,MAAAwB,IAA8BC,EAAiDzB,CAAe;"}

package/dist/fondue-components34.js

@@ -1,48 +1,24 @@
-const s = { red: 255, green: 255, blue: 255, alpha: 1, name: "" }, g = "HEX", $ = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`;
-}, p = (e) => {
-  const r = /^([\dA-Fa-f]{3}){1,2}$/;
-  return e.length > 2 && r.test(e);
-}, h = (e) => {
-  const r = /^([\dA-Fa-f]{3}){1,2}$/, n = e.match(r);
-  if (!n)
-    return {
-      red: 0,
-      green: 0,
-      blue: 0,
-      alpha: 0
-    };
-  const t = n[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: r, green: n, blue: t } = e;
-  return `${r.toString(16).padStart(2, "0")}${n.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
-}, i = (e, r) => r === "HEX" ? {
-  ...e,
-  name: `#${a(e)}`
-} : {
-  ...e,
-  name: `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`
-}, u = (e, r = 0, n = 255) => e.length === 0 || parseInt(e) < r ? r : parseInt(e) > n ? n : parseInt(e);
+const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_23", r = "_colorAlphaInput_v784d_24", u = "_colorChannelInputGroup_v784d_28", p = "_inputDecorator_v784d_39", _ = "_gradientInput_v784d_43", l = "_reactColorful_v784d_46", c = "_valueInput_v784d_50", a = {
+  root: o,
+  inputs: t,
+  colorFormatInput: n,
+  colorAlphaInput: r,
+  colorChannelInputGroup: u,
+  inputDecorator: p,
+  gradientInput: _,
+  reactColorful: l,
+  valueInput: c
+};
 export {
-  s as DEFAULT_COLOR,
-  g as DEFAULT_FORMAT,
-  $ as colorToCss,
-  i as getColorWithName,
-  u as getLimitedColorChannelValue,
-  h as hexColorToRgba,
-  p as isValidHexColor,
-  a as rgbColorToHex
+  r as colorAlphaInput,
+  u as colorChannelInputGroup,
+  n as colorFormatInput,
+  a as default,
+  _ as gradientInput,
+  p as inputDecorator,
+  t as inputs,
+  l as reactColorful,
+  o as root,
+  c as valueInput
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.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 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: 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: `#${rgbColorToHex(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","getColorWithName","currentFormat","getLimitedColorChannelValue","value","min","max"],"mappings":"AAIa,MAAAA,IAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,GAAG,MAAM,GAAG,GACtEC,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;AACM,WAAA;AAAA,MACH,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAGT,QAAAC,IAAWD,EAAQ,CAAC;AACtB,SAAAC,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;AACtB,SAAA,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,GAcaC,IAAmB,CAACZ,GAAkBa,MAC3CA,MAAkB,QACX;AAAA,EACH,GAAGb;AAAA,EACH,MAAM,IAAIO,EAAcP,CAAK,CAAC;AAAA,IAG/B;AAAA,EACH,GAAGA;AAAA,EACH,MAAM,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAAA,GAqBtEc,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-components34.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components35.js

@@ -1,31 +1,48 @@
-const u = 8;
-function c(i) {
-  if (!window)
-    throw new Error("Window object not found, this method should be used in a browser environment");
-  i.style.maxHeight = "";
-  const { top: t, bottom: e } = i.getBoundingClientRect();
-  t - 8 < 0 ? i.style.maxHeight = `${e - 8}px` : e + 8 > window.innerHeight && (i.style.maxHeight = `${window.innerHeight - t - 8}px`);
-}
-function r(i) {
-  const t = i.getBoundingClientRect(), e = t.width > 0 && t.height > 0, n = window.getComputedStyle(i), o = n.display !== "none" && n.visibility !== "hidden" && parseFloat(n.opacity) !== 0, s = t.top < window.innerHeight && t.left < window.innerWidth && t.bottom > 0 && t.right > 0;
-  return e && o && s;
-}
-function a(i, t) {
-  t && (typeof t == "function" ? t(i.current) : t && "current" in t && (t.current = i.current));
-}
-function h(i) {
-  i.currentTarget.dataset.autoFocusVisible = "false";
-}
-function l(i) {
-  const t = i.relatedTarget;
-  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? i.target.dataset.showFocusRing = "true" : i.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
-}
+const s = { red: 255, green: 255, blue: 255, alpha: 1, name: "" }, g = "HEX", $ = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`;
+}, p = (e) => {
+  const r = /^([\dA-Fa-f]{3}){1,2}$/;
+  return e.length > 2 && r.test(e);
+}, h = (e) => {
+  const r = /^([\dA-Fa-f]{3}){1,2}$/, n = e.match(r);
+  if (!n)
+    return {
+      red: 0,
+      green: 0,
+      blue: 0,
+      alpha: 0
+    };
+  const t = n[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: r, green: n, blue: t } = e;
+  return `${r.toString(16).padStart(2, "0")}${n.toString(16).padStart(2, "0")}${t.toString(16).padStart(2, "0")}`;
+}, i = (e, r) => r === "HEX" ? {
+  ...e,
+  name: `#${a(e)}`
+} : {
+  ...e,
+  name: `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha || 1})`
+}, u = (e, r = 0, n = 255) => e.length === 0 || parseInt(e) < r ? r : parseInt(e) > n ? n : parseInt(e);
 export {
-  u as MAX_HEIGHT_MARGIN,
-  h as addAutoFocusAttribute,
-  l as addShowFocusRing,
-  r as isElementVisible,
-  c as setMaxHeightToAvailableSpace,
-  a as syncRefs
+  s as DEFAULT_COLOR,
+  g as DEFAULT_FORMAT,
+  $ as colorToCss,
+  i as getColorWithName,
+  u as getLimitedColorChannelValue,
+  h as hexColorToRgba,
+  p as isValidHexColor,
+  a as rgbColorToHex
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.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(localRef: RefObject<HTMLDivElement>, forwardedRef: ForwardedRef<HTMLDivElement>) {\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":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,EAAO,IAAIF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,yBACfE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAASC,GAAqCC,GAA4C;AACtG,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}
+{"version":3,"file":"fondue-components35.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 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: 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: `#${rgbColorToHex(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","getColorWithName","currentFormat","getLimitedColorChannelValue","value","min","max"],"mappings":"AAIa,MAAAA,IAAgB,EAAE,KAAK,KAAK,OAAO,KAAK,MAAM,KAAK,OAAO,GAAG,MAAM,GAAG,GACtEC,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;AACM,WAAA;AAAA,MACH,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAEE,QAAAC,IAAWD,EAAQ,CAAC;AACtB,SAAAC,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,EACX,IAEG;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,EACX;AACJ,GAcaC,IAAgB,CAACC,MAA0C;AACpE,QAAM,EAAE,KAAAC,GAAK,OAAAC,GAAO,MAAAC,EAAS,IAAAH;AACtB,SAAA,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,GAcaC,IAAmB,CAACZ,GAAkBa,MAC3CA,MAAkB,QACX;AAAA,EACH,GAAGb;AAAA,EACH,MAAM,IAAIO,EAAcP,CAAK,CAAC;AAClC,IAEG;AAAA,EACH,GAAGA;AAAA,EACH,MAAM,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAC/E,GAoBSc,IAA8B,CAACC,GAAeC,IAAc,GAAGC,IAAc,QAClFF,EAAM,WAAW,KAAK,SAASA,CAAK,IAAIC,IACjCA,IACA,SAASD,CAAK,IAAIE,IAClBA,IAEJ,SAASF,CAAK;"}

package/dist/fondue-components36.js

@@ -1,18 +1,31 @@
-const n = "_content_1dnjb_6", t = "_header_1dnjb_50", e = "_footer_1dnjb_51", o = "_body_1dnjb_52", d = "_underlay_1dnjb_77", _ = "_sideContent_1dnjb_90", s = {
-  content: n,
-  header: t,
-  footer: e,
-  body: o,
-  underlay: d,
-  sideContent: _
-};
+const u = 8;
+function c(i) {
+  if (!window)
+    throw new Error("Window object not found, this method should be used in a browser environment");
+  i.style.maxHeight = "";
+  const { top: t, bottom: e } = i.getBoundingClientRect();
+  t - 8 < 0 ? i.style.maxHeight = `${e - 8}px` : e + 8 > window.innerHeight && (i.style.maxHeight = `${window.innerHeight - t - 8}px`);
+}
+function r(i) {
+  const t = i.getBoundingClientRect(), e = t.width > 0 && t.height > 0, n = window.getComputedStyle(i), o = n.display !== "none" && n.visibility !== "hidden" && parseFloat(n.opacity) !== 0, s = t.top < window.innerHeight && t.left < window.innerWidth && t.bottom > 0 && t.right > 0;
+  return e && o && s;
+}
+function a(i, t) {
+  t && (typeof t == "function" ? t(i.current) : t && "current" in t && (t.current = i.current));
+}
+function h(i) {
+  i.currentTarget.dataset.autoFocusVisible = "false";
+}
+function l(i) {
+  const t = i.relatedTarget;
+  t != null && t.dataset.autoFocusTrigger && (t.dataset.autoFocusVisible === "true" ? i.target.dataset.showFocusRing = "true" : i.target.dataset.showFocusRing = "false", t.dataset.autoFocusVisible = "true");
+}
 export {
-  o as body,
-  n as content,
-  s as default,
-  e as footer,
-  t as header,
-  _ as sideContent,
-  d as underlay
+  u as MAX_HEIGHT_MARGIN,
+  h as addAutoFocusAttribute,
+  l as addShowFocusRing,
+  r as isElementVisible,
+  c as setMaxHeightToAvailableSpace,
+  a as syncRefs
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components36.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(localRef: RefObject<HTMLDivElement>, forwardedRef: ForwardedRef<HTMLDivElement>) {\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":["MAX_HEIGHT_MARGIN","setMaxHeightToAvailableSpace","dialog","top","bottom","isElementVisible","element","rect","hasSize","style","isVisibleStyle","isInViewport","syncRefs","localRef","forwardedRef","addAutoFocusAttribute","mouseEvent","addShowFocusRing","event","triggerElement"],"mappings":"AAIO,MAAMA,IAAoB;AAe1B,SAASC,EAA6BC,GAAqB;AAC9D,MAAI,CAAC;AACK,UAAA,IAAI,MAAM,8EAA8E;AAGlG,EAAAA,EAAO,MAAM,YAAY;AAEzB,QAAM,EAAE,KAAAC,GAAK,QAAAC,MAAWF,EAAO,sBAAsB;AACjD,EAAAC,IAAM,IAAoB,IAE1BD,EAAO,MAAM,YAAY,GAAGE,IAAS,CAAiB,OAC/CA,IAAS,IAAoB,OAAO,gBAE3CF,EAAO,MAAM,YAAY,GAAG,OAAO,cAAcC,IAAM,CAAiB;AAEhF;AAYO,SAASE,EAAiBC,GAAsB;AAC7C,QAAAC,IAAOD,EAAQ,sBAAsB,GACrCE,IAAUD,EAAK,QAAQ,KAAKA,EAAK,SAAS,GAE1CE,IAAQ,OAAO,iBAAiBH,CAAO,GACvCI,IAAiBD,EAAM,YAAY,UAAUA,EAAM,eAAe,YAAY,WAAWA,EAAM,OAAO,MAAM,GAG5GE,IACFJ,EAAK,MAAM,OAAO,eAAeA,EAAK,OAAO,OAAO,cAAcA,EAAK,SAAS,KAAKA,EAAK,QAAQ;AAEtG,SAAOC,KAAWE,KAAkBC;AACxC;AAQgB,SAAAC,EAASC,GAAqCC,GAA4C;AACtG,EAAKA,MAID,OAAOA,KAAiB,aACxBA,EAAaD,EAAS,OAAO,IACtBC,KAAgB,aAAaA,MACpCA,EAAa,UAAUD,EAAS;AAExC;AASO,SAASE,EAAsBC,GAA4D;AACnF,EAAAA,EAAA,cAAc,QAAQ,mBAAmB;AACxD;AAWO,SAASC,EAAiBC,GAAgD;AAC7E,QAAMC,IAAiBD,EAAM;AAEzB,EAACC,KAAA,QAAAA,EAAgB,QAAQ,qBAIzBA,EAAe,QAAQ,qBAAqB,SACtCD,EAAA,OAAO,QAAQ,gBAAgB,SAE/BA,EAAA,OAAO,QAAQ,gBAAgB,SAGzCC,EAAe,QAAQ,mBAAmB;AAC9C;"}

package/dist/fondue-components37.js

@@ -1,63 +1,18 @@
-import { sv as t } from "./fondue-components25.js";
-const i = t({
-  base: "tw-flex tw-self-stretch tw-justify-center ",
-  variants: {
-    direction: {
-      horizontal: "tw-flex-col tw-h-0 tw-border-t tw-w-full",
-      vertical: "tw-flex-row tw-w-0 tw-border-r tw-h-full "
-    },
-    color: {
-      weak: "tw-border-line-weak",
-      default: "tw-border-line",
-      strong: "tw-border-line-strong",
-      "x-strong": "tw-border-x-line-strong"
-    },
-    variant: {
-      solid: "tw-border-solid",
-      dashed: "tw-border-dashed",
-      noline: "tw-border-none"
-    }
-  },
-  compoundVariants: [
-    {
-      direction: "horizontal",
-      padding: "small",
-      class: "tw-my-4"
-    },
-    {
-      direction: "horizontal",
-      padding: "medium",
-      class: "tw-my-7"
-    },
-    {
-      direction: "horizontal",
-      padding: "large",
-      class: "tw-my-12"
-    },
-    {
-      direction: "vertical",
-      padding: "small",
-      class: "tw-mx-4"
-    },
-    {
-      direction: "vertical",
-      padding: "medium",
-      class: "tw-mx-7"
-    },
-    {
-      direction: "vertical",
-      padding: "large",
-      class: "tw-mx-12"
-    }
-  ],
-  defaultVariants: {
-    padding: "medium",
-    direction: "horizontal",
-    color: "default",
-    variant: "solid"
-  }
-});
+const n = "_content_1dnjb_6", t = "_header_1dnjb_50", e = "_footer_1dnjb_51", o = "_body_1dnjb_52", d = "_underlay_1dnjb_77", _ = "_sideContent_1dnjb_90", s = {
+  content: n,
+  header: t,
+  footer: e,
+  body: o,
+  underlay: d,
+  sideContent: _
+};
 export {
-  i as dividerStyles
+  o as body,
+  n as content,
+  s as default,
+  e as footer,
+  t as header,
+  _ as sideContent,
+  d as underlay
 };
 //# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components37.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-r tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        variant: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        variant: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IACd;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACZ;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EACb;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components37.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}