@frontify/fondue-components 13.0.2 → 14.0.0

package/dist/fondue-components65.js

@@ -1,16 +1,14 @@
-import { useEffect as c } from "react";
-const s = (t) => {
-  c(() => {
-    if (!t.current)
-      return;
-    const e = t.current, n = new ResizeObserver(() => {
-      const r = e.scrollWidth > e.clientWidth;
-      e.title = r && e.textContent || "";
-    });
-    return n.observe(e), () => n.disconnect();
-  }, [t]);
+const t = "_root_fs3zj_5", o = "_thumb_fs3zj_17", s = "_track_fs3zj_21", _ = "_range_fs3zj_28", r = {
+  root: t,
+  thumb: o,
+  track: s,
+  range: _
 };
 export {
-  s as useTextTruncation
+  r as default,
+  _ as range,
+  t as root,
+  o as thumb,
+  s as track
 };
 //# sourceMappingURL=fondue-components65.js.map

package/dist/fondue-components65.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components65.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}
+{"version":3,"file":"fondue-components65.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/fondue-components66.js

@@ -1,24 +1,16 @@
-const t = "_table_lj8j6_4", o = "_headerCell_lj8j6_18", l = "_rowCell_lj8j6_19", e = "_caption_lj8j6_46", _ = "_cellContent_lj8j6_71", n = "_sortIndicator_lj8j6_96", c = "_body_lj8j6_100", j = "_row_lj8j6_19", r = "_buttonText_lj8j6_164", s = {
-  table: t,
-  headerCell: o,
-  rowCell: l,
-  caption: e,
-  cellContent: _,
-  sortIndicator: n,
-  body: c,
-  row: j,
-  buttonText: r
+const m = "_root_hrjmg_5", t = "_small_hrjmg_33", _ = "_medium_hrjmg_37", o = "_large_hrjmg_41", r = "_thumb_hrjmg_55", s = {
+  root: m,
+  small: t,
+  medium: _,
+  large: o,
+  thumb: r
 };
 export {
-  c as body,
-  r as buttonText,
-  e as caption,
-  _ as cellContent,
   s as default,
-  o as headerCell,
-  j as row,
-  l as rowCell,
-  n as sortIndicator,
-  t as table
+  o as large,
+  _ as medium,
+  m as root,
+  t as small,
+  r as thumb
 };
 //# sourceMappingURL=fondue-components66.js.map

package/dist/fondue-components66.js.map

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

package/dist/fondue-components67.js

@@ -1,18 +1,16 @@
-function l(t, r) {
-  const n = 'tr[tabindex="0"]', e = t.closest("table");
-  if (!e)
-    return null;
-  const o = Array.from(e.querySelectorAll(n)), c = o.indexOf(t) + (r === "ArrowUp" ? -1 : 1);
-  return c >= 0 && c < o.length ? o[c] : null;
-}
-function u(t) {
-  const r = t.target, n = r.closest("tr");
-  if (!n || r !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
-    return;
-  const e = l(n, t.key);
-  e && (t.preventDefault(), e.focus());
-}
+import { useEffect as c } from "react";
+const s = (t) => {
+  c(() => {
+    if (!t.current)
+      return;
+    const e = t.current, n = new ResizeObserver(() => {
+      const r = e.scrollWidth > e.clientWidth;
+      e.title = r && e.textContent || "";
+    });
+    return n.observe(e), () => n.disconnect();
+  }, [t]);
+};
 export {
-  u as handleKeyDown
+  s as useTextTruncation
 };
 //# sourceMappingURL=fondue-components67.js.map

package/dist/fondue-components67.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components67.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAe,GACrBE,EAAQ,MAAM;AAEtB;"}
+{"version":3,"file":"fondue-components67.js","sources":["../src/hooks/useTextTruncation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, type RefObject } from 'react';\n\n/**\n * A custom React hook that automatically manages text truncation and tooltips.\n * It observes the element's size and adds a title attribute with the full text\n * when the content is truncated.\n *\n * @param {RefObject<HTMLElement>} ref - Reference to the HTML element to observe for truncation.\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   const textRef = useRef<HTMLDivElement>(null);\n *   useTextTruncation(textRef);\n *\n *   return <div ref={textRef} className=\"truncate\">Long text content...</div>;\n * });\n * ```\n */\nexport const useTextTruncation = (ref: RefObject<HTMLElement>) => {\n    useEffect(() => {\n        if (!ref.current) {\n            return;\n        }\n\n        const element = ref.current;\n        const observer = new ResizeObserver(() => {\n            const isTruncated = element.scrollWidth > element.clientWidth;\n            element.title = isTruncated ? element.textContent || '' : '';\n        });\n\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, [ref]);\n};\n"],"names":["useTextTruncation","ref","useEffect","element","observer","isTruncated"],"mappings":";AAqBa,MAAAA,IAAoB,CAACC,MAAgC;AAC9D,EAAAC,EAAU,MAAM;AACR,QAAA,CAACD,EAAI;AACL;AAGJ,UAAME,IAAUF,EAAI,SACdG,IAAW,IAAI,eAAe,MAAM;AAChC,YAAAC,IAAcF,EAAQ,cAAcA,EAAQ;AAClD,MAAAA,EAAQ,QAAQE,KAAcF,EAAQ,eAAe;AAAA,IAAK,CAC7D;AAED,WAAAC,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAW;AAAA,EAAA,GAClC,CAACH,CAAG,CAAC;AACZ;"}

package/dist/fondue-components68.js

@@ -1,56 +1,24 @@
-import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
-const b = (e, s) => e.filter((f) => {
-  var c;
-  const o = (c = f.ref) == null ? void 0 : c.current;
-  return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
-}), a = (e, s) => {
-  const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
-  if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
-    return;
-  const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), d = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
-  c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : d ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
-}, O = ({
-  activeTab: e
-}) => {
-  const s = v(null), f = v(null), [o, c] = w([]), [d, u] = w([]);
-  return W(() => {
-    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
-    n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (a(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
-  }, [e, f]), p(() => {
-    var l;
-    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
-    if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
-      a(t, f);
-      const r = new MutationObserver(() => {
-        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(t, f);
-      });
-      t.parentNode && r.observe(t.parentNode, { childList: !0 });
-      const h = new IntersectionObserver(
-        () => {
-          u(b(o, t)), a(t, f);
-        },
-        {
-          root: t,
-          threshold: 1
-        }
-      );
-      for (const i of o)
-        (l = i.ref) != null && l.current && h.observe(i.ref.current);
-      return () => {
-        h.disconnect(), r.disconnect();
-      };
-    }
-  }, [o, s, f]), {
-    triggerListRef: s,
-    activeIndicatorRef: f,
-    triggersOutOfView: d,
-    triggers: o,
-    addTrigger: (t) => {
-      c((n) => [...n, t]);
-    }
-  };
+const t = "_table_lj8j6_4", o = "_headerCell_lj8j6_18", l = "_rowCell_lj8j6_19", e = "_caption_lj8j6_46", _ = "_cellContent_lj8j6_71", n = "_sortIndicator_lj8j6_96", c = "_body_lj8j6_100", j = "_row_lj8j6_19", r = "_buttonText_lj8j6_164", s = {
+  table: t,
+  headerCell: o,
+  rowCell: l,
+  caption: e,
+  cellContent: _,
+  sortIndicator: n,
+  body: c,
+  row: j,
+  buttonText: r
 };
 export {
-  O as useTabTriggers
+  c as body,
+  r as buttonText,
+  e as caption,
+  _ as cellContent,
+  s as default,
+  o as headerCell,
+  j as row,
+  l as rowCell,
+  n as sortIndicator,
+  t as table
 };
 //# sourceMappingURL=fondue-components68.js.map

package/dist/fondue-components68.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components68.js","sources":["../src/components/Tabs/hooks/useTabTriggers.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { type TabTrigger } from '../types';\n\nconst getOverflowingTriggers = (triggers: TabTrigger[], triggerListElement: HTMLDivElement) => {\n    return triggers.filter((trigger) => {\n        const triggerElement = trigger.ref?.current;\n        if (!triggerElement) {\n            return false;\n        }\n        return (\n            triggerElement.offsetLeft + triggerElement.offsetWidth >\n                triggerListElement?.scrollLeft + triggerListElement.offsetWidth ||\n            triggerElement.offsetLeft - triggerListElement.scrollLeft < 0\n        );\n    });\n};\n\nconst moveActiveIndicator = (triggerListElement: HTMLDivElement, activeIndicatorRef: RefObject<HTMLSpanElement>) => {\n    const activeIndicatorElement = activeIndicatorRef.current;\n    const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n    if (\n        !triggerListElement ||\n        !(activeTriggerElement instanceof HTMLButtonElement) ||\n        !(activeIndicatorElement instanceof HTMLSpanElement)\n    ) {\n        return;\n    }\n\n    const isOverflowingLeft = triggerListElement?.scrollLeft > activeTriggerElement?.offsetLeft;\n    const isOverflowingRight =\n        activeTriggerElement?.offsetLeft + activeTriggerElement?.offsetWidth > triggerListElement?.offsetWidth;\n\n    if (isOverflowingLeft) {\n        const willFitAllItemsToTheLeft =\n            triggerListElement.offsetWidth > activeTriggerElement.offsetWidth + activeTriggerElement.offsetLeft;\n        if (willFitAllItemsToTheLeft) {\n            activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        } else {\n            activeIndicatorElement.style.left = `${triggerListElement.offsetWidth - activeTriggerElement.offsetWidth}px`;\n        }\n        activeIndicatorElement.style.width = `${activeTriggerElement?.offsetWidth}px`;\n    } else if (isOverflowingRight) {\n        activeIndicatorElement.style.left = `${triggerListElement.clientWidth - activeTriggerElement.offsetWidth}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    } else {\n        activeIndicatorElement.style.left = `${activeTriggerElement.offsetLeft}px`;\n        activeIndicatorElement.style.width = `${activeTriggerElement.offsetWidth}px`;\n    }\n};\n\nexport const useTabTriggers = ({\n    activeTab,\n}: {\n    activeTab?: string;\n}): {\n    triggerListRef: RefObject<HTMLDivElement>;\n    activeIndicatorRef: RefObject<HTMLSpanElement>;\n    triggers: TabTrigger[];\n    triggersOutOfView: TabTrigger[];\n    addTrigger: (trigger: TabTrigger) => void;\n} => {\n    const triggerListRef = useRef<HTMLDivElement | null>(null);\n    const activeIndicatorRef = useRef<HTMLSpanElement | null>(null);\n    const [triggers, setTriggers] = useState<TabTrigger[]>([]);\n    const [triggersOutOfView, setTriggersOutOfView] = useState<TabTrigger[]>([]);\n\n    // move the active indicator and scroll to the correct position when the tab changes\n    useEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (activeTriggerElement instanceof HTMLButtonElement && triggerListElement instanceof HTMLDivElement) {\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            activeTriggerElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'end' });\n        }\n    }, [activeTab, activeIndicatorRef]);\n\n    useLayoutEffect(() => {\n        const triggerListElement = triggerListRef.current;\n        const activeTriggerElement = triggerListElement?.querySelector('[data-state=\"active\"]');\n\n        if (triggerListElement instanceof HTMLDivElement && activeTriggerElement instanceof HTMLButtonElement) {\n            // move the active indicator to the initial active tab\n            moveActiveIndicator(triggerListElement, activeIndicatorRef);\n\n            // observe addition of the dropdown trigger which reduces the available width\n            const mutationObserver = new MutationObserver(() => {\n                activeTriggerElement.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'end' });\n                moveActiveIndicator(triggerListElement, activeIndicatorRef);\n            });\n            if (triggerListElement.parentNode) {\n                mutationObserver.observe(triggerListElement.parentNode, { childList: true });\n            }\n\n            // calculate the overflowing elements when item starts overflowing the parent\n            const intersectionObserver = new IntersectionObserver(\n                () => {\n                    setTriggersOutOfView(getOverflowingTriggers(triggers, triggerListElement));\n                    moveActiveIndicator(triggerListElement, activeIndicatorRef);\n                },\n                {\n                    root: triggerListElement,\n                    threshold: 1,\n                },\n            );\n            for (const trigger of triggers) {\n                if (trigger.ref?.current) {\n                    intersectionObserver.observe(trigger.ref.current);\n                }\n            }\n\n            return () => {\n                intersectionObserver.disconnect();\n                mutationObserver.disconnect();\n            };\n        }\n    }, [triggers, triggerListRef, activeIndicatorRef]);\n\n    return {\n        triggerListRef,\n        activeIndicatorRef,\n        triggersOutOfView,\n        triggers,\n        addTrigger: (trigger) => {\n            setTriggers((prev) => [...prev, trigger]);\n        },\n    };\n};\n"],"names":["getOverflowingTriggers","triggers","triggerListElement","trigger","triggerElement","_a","moveActiveIndicator","activeIndicatorRef","activeIndicatorElement","activeTriggerElement","isOverflowingLeft","isOverflowingRight","useTabTriggers","activeTab","triggerListRef","useRef","setTriggers","useState","triggersOutOfView","setTriggersOutOfView","useEffect","useLayoutEffect","mutationObserver","intersectionObserver","prev"],"mappings":"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"}
+{"version":3,"file":"fondue-components68.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components69.js

@@ -1,18 +1,18 @@
-const t = "_root_13jbx_5", r = "_triggerList_13jbx_14", e = "_triggerListWrapper_13jbx_28", i = "_trigger_13jbx_14", o = "_content_13jbx_78", g = "_activeIndicator_13jbx_94", _ = {
-  root: t,
-  triggerList: r,
-  triggerListWrapper: e,
-  trigger: i,
-  content: o,
-  activeIndicator: g
-};
+function l(t, r) {
+  const n = 'tr[tabindex="0"]', e = t.closest("table");
+  if (!e)
+    return null;
+  const o = Array.from(e.querySelectorAll(n)), c = o.indexOf(t) + (r === "ArrowUp" ? -1 : 1);
+  return c >= 0 && c < o.length ? o[c] : null;
+}
+function u(t) {
+  const r = t.target, n = r.closest("tr");
+  if (!n || r !== n || !["ArrowUp", "ArrowDown"].includes(t.key))
+    return;
+  const e = l(n, t.key);
+  e && (t.preventDefault(), e.focus());
+}
 export {
-  g as activeIndicator,
-  o as content,
-  _ as default,
-  t as root,
-  i as trigger,
-  r as triggerList,
-  e as triggerListWrapper
+  u as handleKeyDown
 };
 //# sourceMappingURL=fondue-components69.js.map

package/dist/fondue-components69.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components69.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"fondue-components69.js","sources":["../src/components/Table/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type KeyboardEvent } from 'react';\n\nfunction getAdjacentRow(currentRow: HTMLElement, key: 'ArrowUp' | 'ArrowDown'): HTMLElement | null {\n    const selector = 'tr[tabindex=\"0\"]';\n    const table = currentRow.closest('table');\n    if (!table) {\n        return null;\n    }\n\n    const rows = Array.from(table.querySelectorAll(selector));\n    const currentIndex = rows.indexOf(currentRow);\n    const nextIndex = currentIndex + (key === 'ArrowUp' ? -1 : 1);\n\n    return nextIndex >= 0 && nextIndex < rows.length ? (rows[nextIndex] as HTMLElement) : null;\n}\n\nexport function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    const target = event.target as HTMLElement;\n    const currentRow = target.closest('tr');\n\n    if (!currentRow || target !== currentRow || !['ArrowUp', 'ArrowDown'].includes(event.key)) {\n        return;\n    }\n\n    const nextRow = getAdjacentRow(currentRow, event.key as 'ArrowUp' | 'ArrowDown');\n    if (nextRow) {\n        event.preventDefault();\n        nextRow.focus();\n    }\n}\n"],"names":["getAdjacentRow","currentRow","key","selector","table","rows","nextIndex","handleKeyDown","event","target","nextRow"],"mappings":"AAIA,SAASA,EAAeC,GAAyBC,GAAkD;AAC/F,QAAMC,IAAW,oBACXC,IAAQH,EAAW,QAAQ,OAAO;AACxC,MAAI,CAACG;AACM,WAAA;AAGX,QAAMC,IAAO,MAAM,KAAKD,EAAM,iBAAiBD,CAAQ,CAAC,GAElDG,IADeD,EAAK,QAAQJ,CAAU,KACVC,MAAQ,YAAY,KAAK;AAE3D,SAAOI,KAAa,KAAKA,IAAYD,EAAK,SAAUA,EAAKC,CAAS,IAAoB;AAC1F;AAEO,SAASC,EAAcC,GAAwC;AAClE,QAAMC,IAASD,EAAM,QACfP,IAAaQ,EAAO,QAAQ,IAAI;AAEtC,MAAI,CAACR,KAAcQ,MAAWR,KAAc,CAAC,CAAC,WAAW,WAAW,EAAE,SAASO,EAAM,GAAG;AACpF;AAGJ,QAAME,IAAUV,EAAeC,GAAYO,EAAM,GAA8B;AAC/E,EAAIE,MACAF,EAAM,eAAe,GACrBE,EAAQ,MAAM;AAEtB;"}

package/dist/fondue-components7.js

@@ -1,152 +1,51 @@
-import { jsx as e, jsxs as P } from "react/jsx-runtime";
-import { IconCross as j } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-dialog";
-import { createContext as q, forwardRef as l, useRef as B, useContext as z } from "react";
-import { useSyncRefs as E } from "./fondue-components41.js";
-import { addAutoFocusAttribute as L, addShowFocusRing as $ } from "./fondue-components42.js";
-import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components27.js";
-import n from "./fondue-components43.js";
-const p = q({ isModal: !1 }), f = ({ children: t, ...o }) => /* @__PURE__ */ e(p.Provider, { value: { isModal: o.modal ?? !1 }, children: /* @__PURE__ */ e(d.Root, { ...o, children: t }) });
-f.displayName = "Dialog.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-dialog-trigger", ...i }, r) => /* @__PURE__ */ e(
-  d.Trigger,
-  {
-    onMouseDown: L,
-    "data-auto-focus-visible": "true",
-    "data-auto-focus-trigger": !0,
-    "data-test-id": a,
-    asChild: t,
-    ref: r,
-    ...i,
-    children: o
-  }
-);
-y.displayName = "Dialog.Trigger";
-const I = ({ children: t, showUnderlay: o }) => {
-  const { isModal: a } = z(p);
-  return a ? /* @__PURE__ */ e(d.Overlay, { "data-visible": o, className: n.underlay, children: t }) : /* @__PURE__ */ e("div", { className: n.underlay, "data-visible": o, children: t });
-}, D = ({
-  maxWidth: t = "800px",
-  minWidth: o = "400px",
-  minHeight: a = "200px",
-  padding: i = "compact",
-  verticalAlign: r = "center",
-  "data-test-id": s = "fondue-dialog-content",
-  showUnderlay: R = !1,
-  rounded: T = !0,
-  children: w,
-  ...S
-}, M) => {
-  const A = k(), c = B(null);
-  E(c, M);
-  const H = (O) => {
-    var m;
-    O.preventDefault();
-    const u = (m = c.current) == null ? void 0 : m.querySelector('[data-dialog-layout-component="body"]'), g = u == null ? void 0 : u.querySelector(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    g instanceof HTMLElement && g.focus();
-  };
-  return /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ e(G, { theme: A, children: /* @__PURE__ */ e(I, { showUnderlay: R, children: /* @__PURE__ */ e(
-    d.Content,
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as u } from "@radix-ui/react-slot";
+import { forwardRef as k, useState as R, Children as P } from "react";
+import { ForwardedRefColorGradientInput as F } from "./fondue-components38.js";
+import { ForwardedRefColorPickerInput as y } from "./fondue-components39.js";
+import { ForwardedRefColorValueInput as N } from "./fondue-components40.js";
+import I from "./fondue-components41.js";
+import { getColorWithName as d, DEFAULT_COLOR as w, DEFAULT_FORMAT as h } from "./fondue-components42.js";
+const m = ({
+  children: t,
+  currentColor: o = w,
+  onColorChange: a = () => {
+  },
+  defaultFormat: p = h,
+  "data-test-id": s = "color-picker-input",
+  ...c
+}, n) => {
+  const [l, C] = R(p);
+  return /* @__PURE__ */ i("div", { className: I.root, "data-picker-type": "custom-color", "data-test-id": s, ref: n, children: P.map(t, (f) => /* @__PURE__ */ i(
+    G,
     {
-      style: {
-        "--dialog-max-width": t,
-        "--dialog-min-width": o,
-        "--dialog-min-height": a
+      ...c,
+      onColorChange: (r) => {
+        a(d(r, l));
       },
-      ref: c,
-      className: n.content,
-      onFocus: $,
-      onOpenAutoFocus: H,
-      "data-dialog-padding": i,
-      "data-dialog-rounded": T,
-      "data-test-id": s,
-      "data-dialog-vertical-align": r,
-      ...S,
-      children: w
+      currentColor: o,
+      currentFormat: l,
+      setCurrentFormat: (r) => {
+        C(r), a(d(o, r));
+      },
+      children: f
     }
-  ) }) }) });
+  )) });
 };
-D.displayName = "Dialog.Content";
-const h = ({
-  padding: t,
-  showBorder: o = !0,
-  showCloseButton: a = !0,
-  children: i,
-  "data-test-id": r = "fondue-dialog-header"
-}, s) => /* @__PURE__ */ P(
-  "div",
-  {
-    "data-test-id": r,
-    ref: s,
-    className: n.header,
-    "data-dialog-header-padding": t,
-    "data-show-border": o,
-    "data-dialog-layout-component": "header",
-    children: [
-      /* @__PURE__ */ e("div", { children: i }),
-      a && /* @__PURE__ */ e(d.Close, { role: "button", "data-test-id": `${r}-close`, className: "tw-cursor-pointer", children: /* @__PURE__ */ e(j, { size: 20 }) })
-    ]
-  }
-);
-h.displayName = "Dialog.Header";
-const C = ({ padding: t, showBorder: o = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-test-id": i,
-    ref: r,
-    className: n.footer,
-    "data-dialog-footer-padding": t,
-    "data-show-border": o,
-    "data-dialog-layout-component": "footer",
-    children: a
-  }
-);
-C.displayName = "Dialog.Footer";
-const N = ({ padding: t, children: o, "data-test-id": a = "fondue-dialog-body" }, i) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-test-id": a,
-    ref: i,
-    className: n.body,
-    "data-dialog-body-padding": t,
-    "data-dialog-layout-component": "body",
-    children: o
-  }
-);
-N.displayName = "Dialog.Body";
-const b = ({ children: t, "data-test-id": o = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
-b.displayName = "Dialog.SideContent";
-const v = ({ children: t }) => /* @__PURE__ */ e(d.Close, { asChild: !0, children: t });
-v.displayName = "Dialog.Close";
-const x = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Title, { asChild: o, children: t });
-x.displayName = "Dialog.Title";
-const F = ({ children: t, asChild: o }) => /* @__PURE__ */ e(d.Description, { asChild: o, children: t });
-F.displayName = "Dialog.Description";
-const Y = {
-  Root: f,
-  Title: x,
-  Description: F,
-  Close: v,
-  Trigger: l(y),
-  Content: l(D),
-  Header: l(h),
-  Footer: l(C),
-  Body: l(N),
-  SideContent: l(b)
+m.displayName = "ColorPicker";
+const G = ({ children: t, ...o }) => /* @__PURE__ */ i(u, { ...o, children: t }), V = k(m), e = {
+  Root: V,
+  Values: N,
+  Gradient: F,
+  Input: y
 };
+e.Root.displayName = "ColorPicker.Root";
+e.Values.displayName = "ColorPicker.Values";
+e.Gradient.displayName = "ColorPicker.Gradient";
+e.Input.displayName = "ColorPicker.Input";
 export {
-  Y as Dialog,
-  N as DialogBody,
-  v as DialogClose,
-  D as DialogContent,
-  F as DialogDescription,
-  C as DialogFooter,
-  h as DialogHeader,
-  f as DialogRoot,
-  b as DialogSideContent,
-  x as DialogTitle,
-  y as DialogTrigger
+  e as ColorPicker,
+  m as ColorPickerRoot,
+  V as ForwardedRefColorPicker
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the dialog\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport type DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\n\nexport const DialogRoot = ({ children, ...props }: DialogRootProps) => {\n    return (\n        <DialogContext.Provider value={{ isModal: props.modal ?? false }}>\n            <RadixDialog.Root {...props}>{children}</RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger', ...props }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        children,\n        ...props\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n\n        const firstFocusable = dialogBody?.querySelector(\n            'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        {...props}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close role=\"button\" data-test-id={`${dataTestId}-close`} className=\"tw-cursor-pointer\">\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","props","RadixDialog","DialogTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","theme","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","dialogBody","_a","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { Children, forwardRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefColorGradientInput } from './ColorGradientInput';\nimport { ForwardedRefColorPickerInput } from './ColorPickerInput';\nimport { ForwardedRefColorValueInput } from './ColorValueInput';\nimport styles from './styles/customColorPicker.module.scss';\nimport { type ColorFormat, type RgbaColor } from './types';\nimport { DEFAULT_COLOR, DEFAULT_FORMAT, getColorWithName } from './utils';\n\ntype ColorPickerProps = {\n    /**\n     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.\n     */\n    children?: ReactNode;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * Event handler called when the color changes\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * The default format to use for the color input\n     * @default \"HEX\"\n     */\n    defaultFormat?: ColorFormat;\n    /**\n     * The test id of the color picker\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorPickerRoot = (\n    {\n        children,\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [currentFormat, setCurrentFormat] = useState<ColorFormat>(defaultFormat);\n\n    return (\n        <div className={styles.root} data-picker-type=\"custom-color\" data-test-id={dataTestId} ref={forwardedRef}>\n            {Children.map(children, (child) => (\n                <ColorPickerSlot\n                    {...props}\n                    onColorChange={(color: RgbaColor) => {\n                        onColorChange(getColorWithName(color, currentFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={currentFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setCurrentFormat(currentFormat);\n                        onColorChange(getColorWithName(currentColor, currentFormat));\n                    }}\n                >\n                    {child}\n                </ColorPickerSlot>\n            ))}\n        </div>\n    );\n};\nColorPickerRoot.displayName = 'ColorPicker';\n\ntype ColorPickerSlotProps = ColorPickerProps & {\n    currentFormat?: ColorFormat;\n    setCurrentFormat?: (format: ColorFormat) => void;\n};\nconst ColorPickerSlot = ({ children, ...props }: ColorPickerSlotProps) => <RadixSlot {...props}>{children}</RadixSlot>;\n\nexport const ForwardedRefColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(ColorPickerRoot);\n\nexport const ColorPicker = {\n    Root: ForwardedRefColorPicker,\n    Values: ForwardedRefColorValueInput,\n    Gradient: ForwardedRefColorGradientInput,\n    Input: ForwardedRefColorPickerInput,\n};\n\nColorPicker.Root.displayName = 'ColorPicker.Root';\nColorPicker.Values.displayName = 'ColorPicker.Values';\nColorPicker.Gradient.displayName = 'ColorPicker.Gradient';\nColorPicker.Input.displayName = 'ColorPicker.Input';\n"],"names":["ColorPickerRoot","children","currentColor","DEFAULT_COLOR","onColorChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","currentFormat","setCurrentFormat","useState","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AAoCO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa;AAE7E,SACK,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcP,GAAY,KAAKE,GACvF,UAAAM,EAAS,IAAId,GAAU,CAACe,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGT;AAAA,MACJ,eAAe,CAACU,MAAqB;AACnB,QAAAd,EAAAe,EAAiBD,GAAOR,CAAa,CAAC;AAAA,MACxD;AAAA,MACA,cAAAR;AAAA,MACA,eAAAQ;AAAA,MACA,kBAAkB,CAACA,MAA+B;AAC9C,QAAAC,EAAiBD,CAAa,GAChBN,EAAAe,EAAiBjB,GAAcQ,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAM;AAAA,IAAA;AAAA,EAER,CAAA,GACL;AAER;AACAhB,EAAgB,cAAc;AAM9B,MAAMiB,IAAkB,CAAC,EAAE,UAAAhB,GAAU,GAAGO,EAAM,MAA6B,gBAAAK,EAAAO,GAAA,EAAW,GAAGZ,GAAQ,UAAAP,GAAS,GAE7FoB,IAA0BC,EAA6CtB,CAAe,GAEtFuB,IAAc;AAAA,EACvB,MAAMF;AAAA,EACN,QAAQG;AAAA,EACR,UAAUC;AAAA,EACV,OAAOC;AACX;AAEAH,EAAY,KAAK,cAAc;AAC/BA,EAAY,OAAO,cAAc;AACjCA,EAAY,SAAS,cAAc;AACnCA,EAAY,MAAM,cAAc;"}

package/dist/fondue-components70.js

@@ -1,29 +1,56 @@
-const o = "_root_1cjgh_2", _ = {
-  root: o,
-  "weight-default": "_weight-default_1cjgh_7",
-  "weight-strong": "_weight-strong_1cjgh_11",
-  "weight-x-strong": "_weight-x-strong_1cjgh_15",
-  "size-x-small": "_size-x-small_1cjgh_19",
-  "size-small": "_size-small_1cjgh_24",
-  "size-medium": "_size-medium_1cjgh_29",
-  "size-large": "_size-large_1cjgh_34",
-  "color-default": "_color-default_1cjgh_39",
-  "color-weak": "_color-weak_1cjgh_43",
-  "color-x-weak": "_color-x-weak_1cjgh_47",
-  "color-disabled": "_color-disabled_1cjgh_51",
-  "color-negative": "_color-negative_1cjgh_55",
-  "color-positive": "_color-positive_1cjgh_59",
-  "color-warning": "_color-warning_1cjgh_63",
-  "color-interactive": "_color-interactive_1cjgh_67",
-  "color-box-neutral": "_color-box-neutral_1cjgh_71",
-  "color-box-selected": "_color-box-selected_1cjgh_75",
-  "color-box-disabled": "_color-box-disabled_1cjgh_79",
-  "color-box-positive": "_color-box-positive_1cjgh_83",
-  "color-box-negative": "_color-box-negative_1cjgh_87",
-  "color-box-warning": "_color-box-warning_1cjgh_91"
+import { useRef as v, useState as w, useEffect as W, useLayoutEffect as p } from "react";
+const b = (e, s) => e.filter((f) => {
+  var c;
+  const o = (c = f.ref) == null ? void 0 : c.current;
+  return o ? o.offsetLeft + o.offsetWidth > (s == null ? void 0 : s.scrollLeft) + s.offsetWidth || o.offsetLeft - s.scrollLeft < 0 : !1;
+}), a = (e, s) => {
+  const f = s.current, o = e == null ? void 0 : e.querySelector('[data-state="active"]');
+  if (!e || !(o instanceof HTMLButtonElement) || !(f instanceof HTMLSpanElement))
+    return;
+  const c = (e == null ? void 0 : e.scrollLeft) > (o == null ? void 0 : o.offsetLeft), d = (o == null ? void 0 : o.offsetLeft) + (o == null ? void 0 : o.offsetWidth) > (e == null ? void 0 : e.offsetWidth);
+  c ? (e.offsetWidth > o.offsetWidth + o.offsetLeft ? f.style.left = `${o.offsetLeft}px` : f.style.left = `${e.offsetWidth - o.offsetWidth}px`, f.style.width = `${o == null ? void 0 : o.offsetWidth}px`) : d ? (f.style.left = `${e.clientWidth - o.offsetWidth}px`, f.style.width = `${o.offsetWidth}px`) : (f.style.left = `${o.offsetLeft}px`, f.style.width = `${o.offsetWidth}px`);
+}, O = ({
+  activeTab: e
+}) => {
+  const s = v(null), f = v(null), [o, c] = w([]), [d, u] = w([]);
+  return W(() => {
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    n instanceof HTMLButtonElement && t instanceof HTMLDivElement && (a(t, f), n.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "end" }));
+  }, [e, f]), p(() => {
+    var l;
+    const t = s.current, n = t == null ? void 0 : t.querySelector('[data-state="active"]');
+    if (t instanceof HTMLDivElement && n instanceof HTMLButtonElement) {
+      a(t, f);
+      const r = new MutationObserver(() => {
+        n.scrollIntoView({ behavior: "instant", block: "nearest", inline: "end" }), a(t, f);
+      });
+      t.parentNode && r.observe(t.parentNode, { childList: !0 });
+      const h = new IntersectionObserver(
+        () => {
+          u(b(o, t)), a(t, f);
+        },
+        {
+          root: t,
+          threshold: 1
+        }
+      );
+      for (const i of o)
+        (l = i.ref) != null && l.current && h.observe(i.ref.current);
+      return () => {
+        h.disconnect(), r.disconnect();
+      };
+    }
+  }, [o, s, f]), {
+    triggerListRef: s,
+    activeIndicatorRef: f,
+    triggersOutOfView: d,
+    triggers: o,
+    addTrigger: (t) => {
+      c((n) => [...n, t]);
+    }
+  };
 };
 export {
-  _ as default,
-  o as root
+  O as useTabTriggers
 };
 //# sourceMappingURL=fondue-components70.js.map