@frontify/fondue-components 16.0.0 → 16.0.3

package/dist/fondue-components7.js

@@ -1,43 +1,46 @@
-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 = ({
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as P } from "@radix-ui/react-slot";
+import { forwardRef as F, useState as y, useMemo as N, Children as I } from "react";
+import { ForwardedRefColorGradientInput as w } from "./fondue-components38.js";
+import { ForwardedRefColorPickerInput as h } from "./fondue-components39.js";
+import { ForwardedRefColorValueInput as G } from "./fondue-components40.js";
+import V from "./fondue-components41.js";
+import { DEFAULT_FORMAT as g, DEFAULT_COLOR as A, getColorWithName as s } from "./fondue-components42.js";
+const p = ({
   children: t,
-  currentColor: o = w,
-  onColorChange: a = () => {
+  currentColor: r = A,
+  onColorChange: i = () => {
   },
-  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,
+  currentFormat: l,
+  onFormatChange: c = () => {
+  },
+  defaultFormat: n = g,
+  "data-test-id": f = "color-picker-input",
+  ...C
+}, u) => {
+  const [d, k] = y(n), m = N(() => l ?? d, [l, d]);
+  return /* @__PURE__ */ a("div", { className: V.root, "data-picker-type": "custom-color", "data-test-id": f, ref: u, children: I.map(t, (R) => /* @__PURE__ */ a(
+    L,
     {
-      ...c,
-      onColorChange: (r) => {
-        a(d(r, l));
+      ...C,
+      onColorChange: (o) => {
+        i(s(o, m));
       },
-      currentColor: o,
-      currentFormat: l,
-      setCurrentFormat: (r) => {
-        C(r), a(d(o, r));
+      currentColor: r,
+      currentFormat: m,
+      setCurrentFormat: (o) => {
+        k(o), c(o), i(s(r, o));
       },
-      children: f
+      children: R
     }
   )) });
 };
-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
+p.displayName = "ColorPicker";
+const L = ({ children: t, ...r }) => /* @__PURE__ */ a(P, { ...r, children: t }), M = F(p), e = {
+  Root: M,
+  Values: G,
+  Gradient: w,
+  Input: h
 };
 e.Root.displayName = "ColorPicker.Root";
 e.Values.displayName = "ColorPicker.Values";
@@ -45,7 +48,7 @@ e.Gradient.displayName = "ColorPicker.Gradient";
 e.Input.displayName = "ColorPicker.Input";
 export {
   e as ColorPicker,
-  m as ColorPickerRoot,
-  V as ForwardedRefColorPicker
+  p as ColorPickerRoot,
+  M as ForwardedRefColorPicker
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"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;"}
+{"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, useMemo, 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 active color format in the color picker\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * Event handler called when the color format changes\n     */\n    onFormatChange?: (format: ColorFormat) => void;\n    /**\n     * The default format to use for the color input when not controlled externally\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        currentFormat,\n        onFormatChange = () => {},\n        defaultFormat = DEFAULT_FORMAT,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [managedFormat, setManagedFormat] = useState<ColorFormat>(defaultFormat);\n    const activeFormat = useMemo(() => currentFormat ?? managedFormat, [currentFormat, managedFormat]);\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, activeFormat));\n                    }}\n                    currentColor={currentColor}\n                    currentFormat={activeFormat}\n                    setCurrentFormat={(currentFormat: ColorFormat) => {\n                        setManagedFormat(currentFormat);\n                        onFormatChange(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","currentFormat","onFormatChange","defaultFormat","DEFAULT_FORMAT","dataTestId","props","forwardedRef","managedFormat","setManagedFormat","useState","activeFormat","useMemo","jsx","styles","Children","child","ColorPickerSlot","color","getColorWithName","RadixSlot","ForwardedRefColorPicker","forwardRef","ColorPicker","ForwardedRefColorValueInput","ForwardedRefColorGradientInput","ForwardedRefColorPickerInput"],"mappings":";;;;;;;;AA4CO,MAAMA,IAAkB,CAC3B;AAAA,EACI,UAAAC;AAAA,EACA,cAAAC,IAAeC;AAAA,EACf,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,eAAAC;AAAA,EACA,gBAAAC,IAAiB,MAAM;AAAA,EAAC;AAAA,EACxB,eAAAC,IAAgBC;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAsBP,CAAa,GACvEQ,IAAeC,EAAQ,MAAMX,KAAiBO,GAAe,CAACP,GAAeO,CAAa,CAAC;AAEjG,SACK,gBAAAK,EAAA,OAAA,EAAI,WAAWC,EAAO,MAAM,oBAAiB,gBAAe,gBAAcT,GAAY,KAAKE,GACvF,UAAAQ,EAAS,IAAIlB,GAAU,CAACmB,MACrB,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,eAAe,CAACY,MAAqB;AACnB,QAAAlB,EAAAmB,EAAiBD,GAAOP,CAAY,CAAC;AAAA,MACvD;AAAA,MACA,cAAAb;AAAA,MACA,eAAea;AAAA,MACf,kBAAkB,CAACV,MAA+B;AAC9C,QAAAQ,EAAiBR,CAAa,GAC9BC,EAAeD,CAAa,GACdD,EAAAmB,EAAiBrB,GAAcG,CAAa,CAAC;AAAA,MAC/D;AAAA,MAEC,UAAAe;AAAA,IAAA;AAAA,EAER,CAAA,GACL;AAER;AACApB,EAAgB,cAAc;AAM9B,MAAMqB,IAAkB,CAAC,EAAE,UAAApB,GAAU,GAAGS,EAAM,MAA6B,gBAAAO,EAAAO,GAAA,EAAW,GAAGd,GAAQ,UAAAT,GAAS,GAE7FwB,IAA0BC,EAA6C1B,CAAe,GAEtF2B,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-components73.js

@@ -1,21 +1,18 @@
-const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", _ = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", c = "_loadingStatus_kjbh5_155", i = "_spin_kjbh5_1", r = {
+const o = "_root_kjbh5_5", t = "_input_kjbh5_59", s = "_slot_kjbh5_82", c = "_iconSuccess_kjbh5_132", n = "_iconError_kjbh5_141", _ = "_loadingStatus_kjbh5_155", r = {
   root: o,
   input: t,
   slot: s,
-  iconSuccess: _,
+  iconSuccess: c,
   iconError: n,
-  loadingStatus: c,
-  spin: i,
-  "tw-dark": "_tw-dark_kjbh5_187"
+  loadingStatus: _
 };
 export {
   r as default,
   n as iconError,
-  _ as iconSuccess,
+  c as iconSuccess,
   t as input,
-  c as loadingStatus,
+  _ as loadingStatus,
   o as root,
-  s as slot,
-  i as spin
+  s as slot
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components73.js.map

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

package/dist/fondue-components77.js

@@ -1,20 +1,20 @@
-const o = "_root_25qs7_5", t = "_colorName_25qs7_56", c = "_button_25qs7_60", s = "_colorIndicator_25qs7_73", _ = "_actions_25qs7_80", r = "_clear_25qs7_90", a = "_caret_25qs7_103", n = {
+const o = "_root_18mav_5", t = "_colorName_18mav_56", c = "_button_18mav_60", a = "_colorIndicator_18mav_73", _ = "_actions_18mav_92", r = "_clear_18mav_102", n = "_caret_18mav_115", s = {
   root: o,
   colorName: t,
   button: c,
-  colorIndicator: s,
+  colorIndicator: a,
   actions: _,
   clear: r,
-  caret: a
+  caret: n
 };
 export {
   _ as actions,
   c as button,
-  a as caret,
+  n as caret,
   r as clear,
-  s as colorIndicator,
+  a as colorIndicator,
   t as colorName,
-  n as default,
+  s as default,
   o as root
 };
 //# sourceMappingURL=fondue-components77.js.map

package/dist/fondue-components8.js

@@ -3,7 +3,7 @@ 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-components43.js";
-import { addAutoFocusAttribute as L, addShowFocusRing as $ } from "./fondue-components44.js";
+import { addShowFocusRing as L, addAutoFocusAttribute as $ } from "./fondue-components44.js";
 import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components28.js";
 import n from "./fondue-components45.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 }) });
@@ -11,7 +11,7 @@ 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,
+    onMouseDown: $,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": a,
@@ -57,7 +57,7 @@ const I = ({ children: t, showUnderlay: o }) => {
       },
       ref: c,
       className: n.content,
-      onFocus: $,
+      onFocus: L,
       onOpenAutoFocus: H,
       "data-dialog-padding": i,
       "data-dialog-rounded": T,

package/dist/index.d.ts

@@ -24,11 +24,11 @@ export declare const Accordion: {
         displayName: string;
     };
     Item: {
-        ({ "data-test-id": dataTestId, children, disabled, onClick, value, }: AccordionItemProps): JSX_2.Element;
+        ({ "data-test-id": dataTestId, children, disabled, value, }: AccordionItemProps): JSX_2.Element;
         displayName: string;
     };
     Header: {
-        ({ children }: AccordionHeaderProps): JSX_2.Element;
+        ({ onClick, children }: AccordionHeaderProps): JSX_2.Element;
         displayName: string;
     };
     Trigger: {
@@ -63,6 +63,10 @@ declare type AccordionContentProps = {
 };
 
 declare type AccordionHeaderProps = {
+    /**
+     * Click callback for this item.
+     */
+    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * Children of the Accordion header. This should contain `Accordion.Trigger`
      */
@@ -81,10 +85,6 @@ declare type AccordionItemProps = {
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Click callback for this item.
-     */
-    onClick?: MouseEventHandler<HTMLDivElement>;
     /**
      * A string value for the accordion item. All items within an accordion should use a unique value.
      */
@@ -353,7 +353,15 @@ declare type ColorPickerProps = {
      */
     onColorChange?: (color: RgbaColor) => void;
     /**
-     * The default format to use for the color input
+     * The active color format in the color picker
+     */
+    currentFormat?: ColorFormat;
+    /**
+     * Event handler called when the color format changes
+     */
+    onFormatChange?: (format: ColorFormat) => void;
+    /**
+     * The default format to use for the color input when not controlled externally
      * @default "HEX"
      */
     defaultFormat?: ColorFormat;