@frontify/fondue-components 14.3.0 → 15.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fondue-components39.js +12 -12
- package/dist/fondue-components39.js.map +1 -1
- package/dist/fondue-components68.js +14 -14
- package/dist/fondue-components74.js +4 -4
- package/dist/fondue-components77.js +14 -12
- package/dist/fondue-components77.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +6 -5
|
@@ -1,34 +1,34 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { IconDroplet as f,
|
|
1
|
+
import { jsxs as t, jsx as e, Fragment as p } from "react/jsx-runtime";
|
|
2
|
+
import { IconDroplet as f, IconCross as N, IconCaretDown as h } from "@frontify/fondue-icons";
|
|
3
3
|
import { forwardRef as b } from "react";
|
|
4
4
|
import a from "./fondue-components77.js";
|
|
5
5
|
import { colorToCss as I } from "./fondue-components42.js";
|
|
6
6
|
const o = ({
|
|
7
7
|
id: c,
|
|
8
|
-
currentColor:
|
|
8
|
+
currentColor: s,
|
|
9
9
|
isOpen: d,
|
|
10
10
|
onClear: i,
|
|
11
11
|
onClick: l,
|
|
12
12
|
"data-test-id": n = "color-picker-input",
|
|
13
13
|
...r
|
|
14
|
-
}, m) => /* @__PURE__ */
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
(
|
|
14
|
+
}, m) => /* @__PURE__ */ t("div", { id: c, className: a.root, ...r, ref: m, "data-test-id": n, children: [
|
|
15
|
+
/* @__PURE__ */ t("button", { className: a.button, onClick: l, type: "button", "data-color-input-select": !0, children: [
|
|
16
|
+
(s == null ? void 0 : s.red) !== void 0 ? /* @__PURE__ */ e(
|
|
17
17
|
"div",
|
|
18
18
|
{
|
|
19
19
|
"aria-hidden": !0,
|
|
20
20
|
className: a.colorIndicator,
|
|
21
|
-
style: { backgroundColor: I(
|
|
21
|
+
style: { backgroundColor: I(s) }
|
|
22
22
|
}
|
|
23
|
-
) : /* @__PURE__ */
|
|
23
|
+
) : /* @__PURE__ */ t(p, { children: [
|
|
24
24
|
/* @__PURE__ */ e(f, { size: 16 }),
|
|
25
25
|
/* @__PURE__ */ e("span", { children: "Select Color" })
|
|
26
26
|
] }),
|
|
27
|
-
/* @__PURE__ */ e("span", { className: a.colorName, children:
|
|
27
|
+
/* @__PURE__ */ e("span", { className: a.colorName, children: s == null ? void 0 : s.name })
|
|
28
28
|
] }),
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: a.clear, children: /* @__PURE__ */ e(
|
|
31
|
-
/* @__PURE__ */ e("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(
|
|
29
|
+
/* @__PURE__ */ t("div", { className: a.actions, children: [
|
|
30
|
+
i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: a.clear, children: /* @__PURE__ */ e(N, { size: 16 }) }),
|
|
31
|
+
/* @__PURE__ */ e("div", { className: a.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(h, { size: 16, className: a.caret }) })
|
|
32
32
|
] })
|
|
33
33
|
] });
|
|
34
34
|
o.displayName = "ColorPicker.Input";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown,
|
|
1
|
+
{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n id?: string;\n /**\n * The active color in the color picker\n */\n currentColor?: RgbaColor;\n /**\n * The open state of the color picker used to dermine arrow state\n */\n isOpen?: boolean;\n /**\n * callback for clearing the color\n */\n onClear?: () => void;\n /**\n * Event handler called when the color picker input is clicked\n */\n onClick?: () => void;\n /**\n * The test id of the color picker input\n */\n 'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n {\n id,\n currentColor,\n isOpen,\n onClear,\n onClick,\n 'data-test-id': dataTestId = 'color-picker-input',\n ...props\n }: ColorPickerInputProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n return (\n <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n <button className={styles.button} onClick={onClick} type=\"button\" data-color-input-select>\n {currentColor?.red !== undefined ? (\n <div\n aria-hidden\n className={styles.colorIndicator}\n style={{ backgroundColor: colorToCss(currentColor) }}\n />\n ) : (\n <>\n <IconDroplet size={16} />\n <span>Select Color</span>\n </>\n )}\n\n <span className={styles.colorName}>{currentColor?.name}</span>\n </button>\n <div className={styles.actions}>\n {onClear && (\n <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n <IconCross size={16} />\n </button>\n )}\n <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n <IconCaretDown size={16} className={styles.caret} />\n </div>\n </div>\n </div>\n );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGH,GAAO,KAAKC,GAAc,gBAAcF,GAC7E,UAAA;AAAA,EAAC,gBAAAG,EAAA,UAAA,EAAO,WAAWC,EAAO,QAAQ,SAAAL,GAAkB,MAAK,UAAS,2BAAuB,IACpF,UAAA;AAAA,KAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAWD,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,sBAGH,QAAK,EAAA,WAAWD,EAAO,WAAY,iCAAc,KAAK,CAAA;AAAA,EAAA,GAC3D;AAAA,EACC,gBAAAD,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,IAAAN,KACI,gBAAAO,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASP,GAAS,WAAWM,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAAA,sBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYP,IAAS,SAAS,UACxD,UAAA,gBAAAQ,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;AAGRV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
|
|
2
2
|
table: t,
|
|
3
3
|
headerCell: o,
|
|
4
|
-
rowCell:
|
|
5
|
-
caption:
|
|
6
|
-
cellContent:
|
|
7
|
-
sortIndicator:
|
|
4
|
+
rowCell: e,
|
|
5
|
+
caption: _,
|
|
6
|
+
cellContent: n,
|
|
7
|
+
sortIndicator: l,
|
|
8
8
|
body: c,
|
|
9
|
-
row:
|
|
10
|
-
buttonText:
|
|
9
|
+
row: r,
|
|
10
|
+
buttonText: s
|
|
11
11
|
};
|
|
12
12
|
export {
|
|
13
13
|
c as body,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
s as buttonText,
|
|
15
|
+
_ as caption,
|
|
16
|
+
n as cellContent,
|
|
17
|
+
a as default,
|
|
18
18
|
o as headerCell,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
r as row,
|
|
20
|
+
e as rowCell,
|
|
21
|
+
l as sortIndicator,
|
|
22
22
|
t as table
|
|
23
23
|
};
|
|
24
24
|
//# sourceMappingURL=fondue-components68.js.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
const t = "
|
|
1
|
+
const t = "_dark_1mr83_1", r = "_light_1mr83_250", s = {
|
|
2
2
|
dark: t,
|
|
3
|
-
light:
|
|
3
|
+
light: r
|
|
4
4
|
};
|
|
5
5
|
export {
|
|
6
6
|
t as dark,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
s as default,
|
|
8
|
+
r as light
|
|
9
9
|
};
|
|
10
10
|
//# sourceMappingURL=fondue-components74.js.map
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
const o = "
|
|
1
|
+
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 = {
|
|
2
2
|
root: o,
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
colorName: t,
|
|
4
|
+
button: c,
|
|
5
|
+
colorIndicator: s,
|
|
6
|
+
actions: _,
|
|
7
|
+
clear: r,
|
|
8
|
+
caret: a
|
|
8
9
|
};
|
|
9
10
|
export {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
_ as actions,
|
|
12
|
+
c as button,
|
|
13
|
+
a as caret,
|
|
14
|
+
r as clear,
|
|
15
|
+
s as colorIndicator,
|
|
16
|
+
t as colorName,
|
|
17
|
+
n as default,
|
|
16
18
|
o as root
|
|
17
19
|
};
|
|
18
20
|
//# sourceMappingURL=fondue-components77.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"fondue-components77.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|