@frontify/fondue-components 1.0.1 → 1.1.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-components10.js +6 -34
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components11.js +2360 -7
- package/dist/fondue-components11.js.map +1 -1
- package/dist/fondue-components12.js +143 -2
- package/dist/fondue-components12.js.map +1 -1
- package/dist/fondue-components13.js +28 -29
- package/dist/fondue-components13.js.map +1 -1
- package/dist/fondue-components3.js +19 -19
- package/dist/fondue-components3.js.map +1 -1
- package/dist/fondue-components4.js +11 -11
- package/dist/fondue-components4.js.map +1 -1
- package/dist/fondue-components5.js +11 -11
- package/dist/fondue-components5.js.map +1 -1
- package/dist/fondue-components6.js +141 -6
- package/dist/fondue-components6.js.map +1 -1
- package/dist/fondue-components7.js +24 -45
- package/dist/fondue-components7.js.map +1 -1
- package/dist/fondue-components8.js +20 -23
- package/dist/fondue-components8.js.map +1 -1
- package/dist/fondue-components9.js +26 -93
- package/dist/fondue-components9.js.map +1 -1
- package/package.json +7 -4
- package/dist/fondue-components14.js +0 -602
- package/dist/fondue-components14.js.map +0 -1
- package/dist/fondue-components15.js +0 -2363
- package/dist/fondue-components15.js.map +0 -1
- package/dist/fondue-components16.js +0 -146
- package/dist/fondue-components16.js.map +0 -1
- package/dist/fondue-components17.js +0 -5
- package/dist/fondue-components17.js.map +0 -1
- package/dist/fondue-components18.js +0 -5
- package/dist/fondue-components18.js.map +0 -1
- package/dist/fondue-components19.js +0 -32
- package/dist/fondue-components19.js.map +0 -1
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { buttonStyles as
|
|
4
|
-
import { iconStyles as p } from "./fondue-
|
|
5
|
-
import { textStyles as
|
|
6
|
-
const
|
|
1
|
+
import { jsxs as u, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as c, cloneElement as f } from "react";
|
|
3
|
+
import { buttonStyles as d, buttonIconSizeMap as l } from "./fondue-components6.js";
|
|
4
|
+
import { iconStyles as p } from "./fondue-components7.js";
|
|
5
|
+
import { textStyles as x } from "./fondue-components8.js";
|
|
6
|
+
const S = c(
|
|
7
7
|
({
|
|
8
8
|
icon: n,
|
|
9
9
|
children: t,
|
|
10
10
|
hideLabel: m,
|
|
11
11
|
style: a,
|
|
12
|
-
size:
|
|
13
|
-
"data-test-id":
|
|
12
|
+
size: e = "medium",
|
|
13
|
+
"data-test-id": s = "fondue-button",
|
|
14
14
|
...o
|
|
15
|
-
}, r) => /* @__PURE__ */
|
|
15
|
+
}, r) => /* @__PURE__ */ u(
|
|
16
16
|
"button",
|
|
17
17
|
{
|
|
18
18
|
ref: r,
|
|
19
|
-
"data-test-id":
|
|
20
|
-
className:
|
|
19
|
+
"data-test-id": s,
|
|
20
|
+
className: d({
|
|
21
21
|
iconOnly: n && !t || m,
|
|
22
|
-
size:
|
|
22
|
+
size: e,
|
|
23
23
|
style: a,
|
|
24
24
|
...o
|
|
25
25
|
}),
|
|
26
26
|
...o,
|
|
27
27
|
children: [
|
|
28
|
-
n && /* @__PURE__ */ i
|
|
28
|
+
n && /* @__PURE__ */ i(
|
|
29
29
|
"span",
|
|
30
30
|
{
|
|
31
|
-
"data-test-id": `${
|
|
31
|
+
"data-test-id": `${s}-icon`,
|
|
32
32
|
className: p({
|
|
33
|
-
iconSpacing: t && !m ?
|
|
33
|
+
iconSpacing: t && !m ? e : "none",
|
|
34
34
|
style: a,
|
|
35
35
|
...o
|
|
36
36
|
}),
|
|
37
|
-
children:
|
|
37
|
+
children: f(n, { size: l[e] })
|
|
38
38
|
}
|
|
39
39
|
),
|
|
40
|
-
t && /* @__PURE__ */ i
|
|
40
|
+
t && /* @__PURE__ */ i("span", { className: x({ hideLabel: m, style: a, ...o }), "data-test-id": `${s}-text`, children: t })
|
|
41
41
|
]
|
|
42
42
|
}
|
|
43
43
|
)
|
|
44
44
|
);
|
|
45
|
-
|
|
45
|
+
S.displayName = "Button";
|
|
46
46
|
export {
|
|
47
|
-
|
|
47
|
+
S as Button
|
|
48
48
|
};
|
|
49
49
|
//# sourceMappingURL=fondue-components3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cloneElement, forwardRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { buttonIconSizeMap, buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\nexport type ButtonProps = {\n /**\n * @default null\n */\n type?: ButtonType;\n /**\n * @default null\n */\n title?: string;\n /**\n * @default 'default'\n */\n style?: ButtonStyle;\n /**\n * @default 'strong'\n */\n emphasis?: ButtonEmphasis;\n /**\n * @default false\n */\n hideLabel?: boolean;\n /**\n * @default 'medium'\n */\n size?: ButtonSize;\n /**\n * @default 'medium'\n */\n rounding?: ButtonRounding;\n /**\n * @default false\n */\n disabled?: boolean;\n /**\n * @default true\n */\n hugWidth?: boolean;\n icon?: ReactElement;\n children?: ReactNode;\n onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n 'aria-label'?: string;\n 'aria-describedby'?: string;\n 'data-test-id'?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n (\n {\n icon,\n children,\n hideLabel,\n style,\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-button',\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>,\n ) => {\n return (\n <button\n ref={ref}\n data-test-id={dataTestId}\n className={buttonStyles({\n iconOnly: (icon && !children) || hideLabel,\n size,\n style,\n ...props,\n })}\n {...props}\n >\n {icon && (\n <span\n data-test-id={`${dataTestId}-icon`}\n className={iconStyles({\n iconSpacing: children && !hideLabel ? size : 'none',\n style,\n ...props,\n })}\n >\n {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n </span>\n )}\n {children && (\n <span className={textStyles({ hideLabel, style, ...props })} data-test-id={`${dataTestId}-text`}>\n {children}\n </span>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","icon","children","hideLabel","style","size","dataTestId","props","ref","jsxs","buttonStyles","jsx","iconStyles","buttonIconSizeMap","textStyles"],"mappings":";;;;;AA+DO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,
|
|
1
|
+
{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cloneElement, forwardRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { buttonIconSizeMap, buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\nexport type ButtonProps = {\n /**\n * @default null\n */\n type?: ButtonType;\n /**\n * @default null\n */\n title?: string;\n /**\n * @default 'default'\n */\n style?: ButtonStyle;\n /**\n * @default 'strong'\n */\n emphasis?: ButtonEmphasis;\n /**\n * @default false\n */\n hideLabel?: boolean;\n /**\n * @default 'medium'\n */\n size?: ButtonSize;\n /**\n * @default 'medium'\n */\n rounding?: ButtonRounding;\n /**\n * @default false\n */\n disabled?: boolean;\n /**\n * @default true\n */\n hugWidth?: boolean;\n icon?: ReactElement;\n children?: ReactNode;\n onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n 'aria-label'?: string;\n 'aria-describedby'?: string;\n 'data-test-id'?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n (\n {\n icon,\n children,\n hideLabel,\n style,\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-button',\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>,\n ) => {\n return (\n <button\n ref={ref}\n data-test-id={dataTestId}\n className={buttonStyles({\n iconOnly: (icon && !children) || hideLabel,\n size,\n style,\n ...props,\n })}\n {...props}\n >\n {icon && (\n <span\n data-test-id={`${dataTestId}-icon`}\n className={iconStyles({\n iconSpacing: children && !hideLabel ? size : 'none',\n style,\n ...props,\n })}\n >\n {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n </span>\n )}\n {children && (\n <span className={textStyles({ hideLabel, style, ...props })} data-test-id={`${dataTestId}-text`}>\n {children}\n </span>\n )}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","icon","children","hideLabel","style","size","dataTestId","props","ref","jsxs","buttonStyles","jsx","iconStyles","buttonIconSizeMap","textStyles"],"mappings":";;;;;AA+DO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWI,EAAa;AAAA,QACpB,UAAWT,KAAQ,CAACC,KAAaC;AAAA,QACjC,MAAAE;AAAA,QACA,OAAAD;AAAA,QACA,GAAGG;AAAA,MAAA,CACN;AAAA,MACA,GAAGA;AAAA,MAEH,UAAA;AAAA,QACGN,KAAA,gBAAAU;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGL,CAAU;AAAA,YAC3B,WAAWM,EAAW;AAAA,cAClB,aAAaV,KAAY,CAACC,IAAYE,IAAO;AAAA,cAC7C,OAAAD;AAAA,cACA,GAAGG;AAAA,YAAA,CACN;AAAA,YAEA,YAAaN,GAAM,EAAE,MAAMY,EAAkBR,CAAI,GAAG;AAAA,UAAA;AAAA,QACzD;AAAA,QAEHH,KACI,gBAAAS,EAAA,QAAA,EAAK,WAAWG,EAAW,EAAE,WAAAX,GAAW,OAAAC,GAAO,GAAGG,EAAO,CAAA,GAAG,gBAAc,GAAGD,CAAU,SACnF,UAAAJ,GACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKpB;AAEAH,EAAO,cAAc;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
const l = {
|
|
3
3
|
noline: "tw-border-none",
|
|
4
4
|
dashed: "tw-border-dashed",
|
|
@@ -12,39 +12,39 @@ const l = {
|
|
|
12
12
|
vertical: a = !1,
|
|
13
13
|
style: r = "solid",
|
|
14
14
|
height: e = "small",
|
|
15
|
-
"data-test-id":
|
|
16
|
-
color:
|
|
17
|
-
}) => a ? /* @__PURE__ */ t
|
|
15
|
+
"data-test-id": i = o,
|
|
16
|
+
color: s = "#CCC"
|
|
17
|
+
}) => a ? /* @__PURE__ */ t(
|
|
18
18
|
"div",
|
|
19
19
|
{
|
|
20
20
|
"aria-hidden": "true",
|
|
21
21
|
className: "tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center",
|
|
22
|
-
"data-test-id":
|
|
22
|
+
"data-test-id": i,
|
|
23
23
|
style: {
|
|
24
24
|
marginLeft: d[e] / 2,
|
|
25
25
|
marginRight: d[e] / 2
|
|
26
26
|
},
|
|
27
|
-
children: /* @__PURE__ */ t
|
|
27
|
+
children: /* @__PURE__ */ t(
|
|
28
28
|
"div",
|
|
29
29
|
{
|
|
30
30
|
className: `tw-w-px tw-h-full tw-border-r tw-m-0 ${l[r]}`,
|
|
31
|
-
style: { borderRightColor:
|
|
31
|
+
style: { borderRightColor: s },
|
|
32
32
|
"data-test-id": "fondue-divider-line"
|
|
33
33
|
}
|
|
34
34
|
)
|
|
35
35
|
}
|
|
36
|
-
) : /* @__PURE__ */ t
|
|
36
|
+
) : /* @__PURE__ */ t(
|
|
37
37
|
"div",
|
|
38
38
|
{
|
|
39
39
|
"aria-hidden": "true",
|
|
40
40
|
className: "tw-flex tw-items-center tw-w-full",
|
|
41
41
|
style: { height: d[e] },
|
|
42
|
-
"data-test-id":
|
|
43
|
-
children: /* @__PURE__ */ t
|
|
42
|
+
"data-test-id": i,
|
|
43
|
+
children: /* @__PURE__ */ t(
|
|
44
44
|
"hr",
|
|
45
45
|
{
|
|
46
46
|
className: `tw-border-t tw-m-0 tw-w-full ${l[r]}`,
|
|
47
|
-
style: { borderTopColor:
|
|
47
|
+
style: { borderTopColor: s },
|
|
48
48
|
"data-test-id": "fondue-divider-line"
|
|
49
49
|
}
|
|
50
50
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components4.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nexport type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';\n\nexport type DividerHeight = 'small' | 'medium' | 'large';\n\nexport type DividerProps = {\n style?: DividerStyle;\n height?: DividerHeight;\n color?: string;\n vertical?: boolean;\n 'data-test-id'?: string;\n};\n\nconst styleMap = {\n noline: 'tw-border-none',\n dashed: 'tw-border-dashed',\n solid: 'tw-border-solid',\n dotted: 'tw-border-dotted',\n};\n\nconst heightMap = {\n small: 36,\n medium: 60,\n large: 96,\n};\n\nconst DIVIDER_TEST_ID = 'fondue-divider';\n\nexport const Divider = ({\n vertical = false,\n style = 'solid',\n height = 'small',\n 'data-test-id': dataTestId = DIVIDER_TEST_ID,\n color = '#CCC',\n}: DividerProps): ReactElement => {\n return vertical ? (\n <div\n aria-hidden=\"true\"\n className=\"tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center\"\n data-test-id={dataTestId}\n style={{\n marginLeft: heightMap[height] / 2,\n marginRight: heightMap[height] / 2,\n }}\n >\n <div\n className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}\n style={{ borderRightColor: color }}\n data-test-id=\"fondue-divider-line\"\n />\n </div>\n ) : (\n <div\n aria-hidden=\"true\"\n className=\"tw-flex tw-items-center tw-w-full\"\n style={{ height: heightMap[height] }}\n data-test-id={dataTestId}\n >\n <hr\n className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n style={{ borderTopColor: color }}\n data-test-id=\"fondue-divider-line\"\n />\n </div>\n );\n};\n"],"names":["styleMap","heightMap","DIVIDER_TEST_ID","Divider","vertical","style","height","dataTestId","color","jsx"],"mappings":";AAgBA,MAAMA,IAAW;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAY;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAkB,kBAEXC,IAAU,CAAC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAaL;AAAA,EAC7B,OAAAM,IAAQ;AACZ,MACWJ,
|
|
1
|
+
{"version":3,"file":"fondue-components4.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nexport type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';\n\nexport type DividerHeight = 'small' | 'medium' | 'large';\n\nexport type DividerProps = {\n style?: DividerStyle;\n height?: DividerHeight;\n color?: string;\n vertical?: boolean;\n 'data-test-id'?: string;\n};\n\nconst styleMap = {\n noline: 'tw-border-none',\n dashed: 'tw-border-dashed',\n solid: 'tw-border-solid',\n dotted: 'tw-border-dotted',\n};\n\nconst heightMap = {\n small: 36,\n medium: 60,\n large: 96,\n};\n\nconst DIVIDER_TEST_ID = 'fondue-divider';\n\nexport const Divider = ({\n vertical = false,\n style = 'solid',\n height = 'small',\n 'data-test-id': dataTestId = DIVIDER_TEST_ID,\n color = '#CCC',\n}: DividerProps): ReactElement => {\n return vertical ? (\n <div\n aria-hidden=\"true\"\n className=\"tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center\"\n data-test-id={dataTestId}\n style={{\n marginLeft: heightMap[height] / 2,\n marginRight: heightMap[height] / 2,\n }}\n >\n <div\n className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}\n style={{ borderRightColor: color }}\n data-test-id=\"fondue-divider-line\"\n />\n </div>\n ) : (\n <div\n aria-hidden=\"true\"\n className=\"tw-flex tw-items-center tw-w-full\"\n style={{ height: heightMap[height] }}\n data-test-id={dataTestId}\n >\n <hr\n className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n style={{ borderTopColor: color }}\n data-test-id=\"fondue-divider-line\"\n />\n </div>\n );\n};\n"],"names":["styleMap","heightMap","DIVIDER_TEST_ID","Divider","vertical","style","height","dataTestId","color","jsx"],"mappings":";AAgBA,MAAMA,IAAW;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAY;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAkB,kBAEXC,IAAU,CAAC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAaL;AAAA,EAC7B,OAAAM,IAAQ;AACZ,MACWJ,IACH,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,gBAAcF;AAAA,IACd,OAAO;AAAA,MACH,YAAYN,EAAUK,CAAM,IAAI;AAAA,MAChC,aAAaL,EAAUK,CAAM,IAAI;AAAA,IACrC;AAAA,IAEA,UAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,wCAAwCT,EAASK,CAAK,CAAC;AAAA,QAClE,OAAO,EAAE,kBAAkBG,EAAM;AAAA,QACjC,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA,IAGJ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,EAAE,QAAQR,EAAUK,CAAM,EAAE;AAAA,IACnC,gBAAcC;AAAA,IAEd,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,gCAAgCT,EAASK,CAAK,CAAC;AAAA,QAC1D,OAAO,EAAE,gBAAgBG,EAAM;AAAA,QAC/B,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA;"}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import * as o from "@radix-ui/react-progress";
|
|
3
3
|
import { forwardRef as l } from "react";
|
|
4
|
-
import { loadingBarContainerStyles as f, loadingBarStyles as g } from "./fondue-
|
|
4
|
+
import { loadingBarContainerStyles as f, loadingBarStyles as g } from "./fondue-components9.js";
|
|
5
5
|
const p = l(
|
|
6
6
|
({
|
|
7
7
|
value: a,
|
|
8
8
|
max: r = 100,
|
|
9
|
-
rounded:
|
|
9
|
+
rounded: d = !0,
|
|
10
10
|
style: t = "default",
|
|
11
|
-
size:
|
|
12
|
-
"data-test-id":
|
|
13
|
-
...
|
|
14
|
-
}, m) => /* @__PURE__ */ i
|
|
11
|
+
size: e = "medium",
|
|
12
|
+
"data-test-id": n = "fondue-loading-bar",
|
|
13
|
+
...s
|
|
14
|
+
}, m) => /* @__PURE__ */ i(
|
|
15
15
|
o.Root,
|
|
16
16
|
{
|
|
17
17
|
ref: m,
|
|
18
|
-
"data-test-id":
|
|
19
|
-
className: f({ rounded:
|
|
18
|
+
"data-test-id": n,
|
|
19
|
+
className: f({ rounded: d, size: e, style: t }),
|
|
20
20
|
"aria-busy": a !== r,
|
|
21
21
|
value: a,
|
|
22
22
|
max: r,
|
|
23
23
|
style: a ? { "--loading-bar-value": `${a}%` } : {},
|
|
24
|
-
...
|
|
25
|
-
children: /* @__PURE__ */ i
|
|
24
|
+
...s,
|
|
25
|
+
children: /* @__PURE__ */ i(
|
|
26
26
|
o.Indicator,
|
|
27
27
|
{
|
|
28
28
|
className: g({ style: t, indeterminateState: a === null })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components5.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { type CSSProperties, forwardRef, type ElementRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n /**\n * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n * @default null\n */\n value: number | null;\n /**\n * @default 100\n */\n max?: number;\n /**\n * @default 'fondue-loading-bar'\n */\n 'data-test-id'?: string;\n /**\n * @default true\n */\n rounded?: boolean;\n /**\n * @default 'default'\n */\n style?: 'default' | 'positive' | 'negative';\n /**\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large' | 'x-large';\n getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n (\n {\n value,\n max = 100,\n rounded = true,\n style = 'default',\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-loading-bar',\n ...props\n },\n ref,\n ) => {\n return (\n <ProgressRadixPrimitive.Root\n ref={ref}\n data-test-id={dataTestId}\n className={loadingBarContainerStyles({ rounded, size, style })}\n aria-busy={value !== max}\n value={value}\n max={max}\n style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}\n {...props}\n >\n <ProgressRadixPrimitive.Indicator\n className={loadingBarStyles({ style, indeterminateState: value === null })}\n />\n </ProgressRadixPrimitive.Root>\n );\n },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AAoCO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,
|
|
1
|
+
{"version":3,"file":"fondue-components5.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { type CSSProperties, forwardRef, type ElementRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n /**\n * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n * @default null\n */\n value: number | null;\n /**\n * @default 100\n */\n max?: number;\n /**\n * @default 'fondue-loading-bar'\n */\n 'data-test-id'?: string;\n /**\n * @default true\n */\n rounded?: boolean;\n /**\n * @default 'default'\n */\n style?: 'default' | 'positive' | 'negative';\n /**\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large' | 'x-large';\n getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n (\n {\n value,\n max = 100,\n rounded = true,\n style = 'default',\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-loading-bar',\n ...props\n },\n ref,\n ) => {\n return (\n <ProgressRadixPrimitive.Root\n ref={ref}\n data-test-id={dataTestId}\n className={loadingBarContainerStyles({ rounded, size, style })}\n aria-busy={value !== max}\n value={value}\n max={max}\n style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}\n {...props}\n >\n <ProgressRadixPrimitive.Indicator\n className={loadingBarStyles({ style, indeterminateState: value === null })}\n />\n </ProgressRadixPrimitive.Root>\n );\n },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AAoCO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OAAOD,IAAS,EAAE,uBAAuB,GAAGA,CAAK,IAAA,IAA0B,CAAC;AAAA,MAC3E,GAAGM;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
|
|
@@ -1,9 +1,144 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { sv as t } from "./fondue-components10.js";
|
|
2
|
+
const o = {
|
|
3
|
+
small: 16,
|
|
4
|
+
medium: 20,
|
|
5
|
+
large: 24
|
|
6
|
+
}, r = t({
|
|
7
|
+
base: "tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium",
|
|
8
|
+
variants: {
|
|
9
|
+
disabled: {
|
|
10
|
+
true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
|
|
11
|
+
},
|
|
12
|
+
rounding: {
|
|
13
|
+
medium: "tw-rounded",
|
|
14
|
+
full: "tw-rounded-full"
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
small: "tw-h-6 tw-text-body-small",
|
|
18
|
+
medium: "tw-h-9 tw-text-body-medium",
|
|
19
|
+
large: "tw-h-12 tw-text-body-large"
|
|
20
|
+
},
|
|
21
|
+
iconOnly: {
|
|
22
|
+
true: "tw-aspect-square tw-px-0"
|
|
23
|
+
},
|
|
24
|
+
hugWidth: {
|
|
25
|
+
false: "tw-w-full"
|
|
26
|
+
},
|
|
27
|
+
emphasis: {
|
|
28
|
+
default: "",
|
|
29
|
+
weak: "",
|
|
30
|
+
strong: ""
|
|
31
|
+
},
|
|
32
|
+
style: {
|
|
33
|
+
default: "",
|
|
34
|
+
positive: "",
|
|
35
|
+
negative: "",
|
|
36
|
+
danger: "",
|
|
37
|
+
loud: ""
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
compoundVariants: [
|
|
41
|
+
{
|
|
42
|
+
style: "default",
|
|
43
|
+
emphasis: "default",
|
|
44
|
+
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
style: "default",
|
|
48
|
+
emphasis: "weak",
|
|
49
|
+
class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
style: "default",
|
|
53
|
+
emphasis: "strong",
|
|
54
|
+
class: "tw-bg-button-strong-background tw-border-button-strong-border hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
style: "positive",
|
|
58
|
+
emphasis: "default",
|
|
59
|
+
class: "tw-bg-button-positive-background tw-border-button-positive-border hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
style: "positive",
|
|
63
|
+
emphasis: "weak",
|
|
64
|
+
class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
style: "positive",
|
|
68
|
+
emphasis: "strong",
|
|
69
|
+
class: "tw-bg-button-strong-positive-background tw-border-button-strong-positive-border hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
style: "negative",
|
|
73
|
+
emphasis: "default",
|
|
74
|
+
class: "tw-bg-button-negative-background tw-border-button-negative-border hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
style: "negative",
|
|
78
|
+
emphasis: "weak",
|
|
79
|
+
class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
style: "negative",
|
|
83
|
+
emphasis: "strong",
|
|
84
|
+
class: "tw-bg-button-strong-negative-background tw-border-button-strong-negative-border hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
style: "danger",
|
|
88
|
+
emphasis: "default",
|
|
89
|
+
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
style: "danger",
|
|
93
|
+
emphasis: "weak",
|
|
94
|
+
class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
style: "danger",
|
|
98
|
+
emphasis: "strong",
|
|
99
|
+
class: "tw-bg-button-danger-background tw-border-button-danger-border hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
style: "loud",
|
|
103
|
+
emphasis: "default",
|
|
104
|
+
class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
style: "loud",
|
|
108
|
+
emphasis: "weak",
|
|
109
|
+
class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
style: "loud",
|
|
113
|
+
emphasis: "strong",
|
|
114
|
+
class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
iconOnly: !1,
|
|
118
|
+
size: "small",
|
|
119
|
+
class: "tw-px-2"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
iconOnly: !1,
|
|
123
|
+
size: "medium",
|
|
124
|
+
class: "tw-px-4"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
iconOnly: !1,
|
|
128
|
+
size: "small",
|
|
129
|
+
class: "tw-px-6"
|
|
130
|
+
}
|
|
131
|
+
],
|
|
132
|
+
defaultVariants: {
|
|
133
|
+
style: "default",
|
|
134
|
+
emphasis: "strong",
|
|
135
|
+
size: "medium",
|
|
136
|
+
rounding: "medium",
|
|
137
|
+
hugWidth: !0
|
|
138
|
+
}
|
|
139
|
+
});
|
|
6
140
|
export {
|
|
7
|
-
|
|
141
|
+
o as buttonIconSizeMap,
|
|
142
|
+
r as buttonStyles
|
|
8
143
|
};
|
|
9
144
|
//# sourceMappingURL=fondue-components6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components6.js","sources":["
|
|
1
|
+
{"version":3,"file":"fondue-components6.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\n\nimport { sv } from '#/utilities/styleUtilities';\n\nimport { type ButtonProps } from '../Button';\n\nexport const buttonIconSizeMap: { [buttonSize in Exclude<ButtonProps['size'], undefined>]: FondueIconProps['size'] } = {\n small: 16,\n medium: 20,\n large: 24,\n};\n\nexport const buttonStyles = sv({\n base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',\n variants: {\n disabled: {\n true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n },\n rounding: {\n medium: 'tw-rounded',\n full: 'tw-rounded-full',\n },\n size: {\n small: 'tw-h-6 tw-text-body-small',\n medium: 'tw-h-9 tw-text-body-medium',\n large: 'tw-h-12 tw-text-body-large',\n },\n iconOnly: {\n true: 'tw-aspect-square tw-px-0',\n },\n hugWidth: {\n false: 'tw-w-full',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n style: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n style: 'default',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'default',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'default',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-background tw-border-button-strong-border ' +\n 'hover:tw-bg-button-strong-background-hover ' +\n 'active:tw-bg-button-strong-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'default',\n class:\n 'tw-bg-button-positive-background tw-border-button-positive-border ' +\n 'hover:tw-bg-button-positive-background-hover ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n 'active:tw-bg-button-positive-background-pressed',\n },\n {\n style: 'positive',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n 'hover:tw-bg-button-strong-positive-background-hover ' +\n 'active:tw-bg-button-strong-positive-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'default',\n class:\n 'tw-bg-button-negative-background tw-border-button-negative-border ' +\n 'hover:tw-bg-button-negative-background-hover ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n 'active:tw-bg-button-negative-background-pressed',\n },\n {\n style: 'negative',\n emphasis: 'strong',\n class:\n 'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n 'hover:tw-bg-button-strong-negative-background-hover ' +\n 'active:tw-bg-button-strong-negative-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'default',\n class:\n 'tw-bg-button-background tw-border-button-border ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'weak',\n class:\n 'tw-border-transparent ' +\n 'hover:tw-bg-button-background-hover ' +\n 'active:tw-bg-button-background-pressed',\n },\n {\n style: 'danger',\n emphasis: 'strong',\n class:\n 'tw-bg-button-danger-background tw-border-button-danger-border ' +\n 'hover:tw-bg-button-danger-background-hover ' +\n 'active:tw-bg-button-danger-background-pressed',\n },\n {\n style: 'loud',\n emphasis: 'default',\n class:\n 'tw-bg-box-selected tw-border-button-border ' +\n 'hover:tw-bg-box-selected-hover ' +\n 'active:tw-bg-box-selected-pressed ',\n },\n {\n style: 'loud',\n emphasis: 'weak',\n class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n },\n {\n style: 'loud',\n emphasis: 'strong',\n class:\n 'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n 'hover:tw-bg-box-selected-strong-hover ' +\n 'active:tw-bg-box-selected-strong-pressed ',\n },\n {\n iconOnly: false,\n size: 'small',\n class: 'tw-px-2',\n },\n {\n iconOnly: false,\n size: 'medium',\n class: 'tw-px-4',\n },\n {\n iconOnly: false,\n size: 'small',\n class: 'tw-px-6',\n },\n ],\n defaultVariants: {\n style: 'default',\n emphasis: 'strong',\n size: 'medium',\n rounding: 'medium',\n hugWidth: true,\n },\n});\n"],"names":["buttonIconSizeMap","buttonStyles","sv"],"mappings":";AAQO,MAAMA,IAA0G;AAAA,EACnH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEaC,IAAeC,EAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACd;AACJ,CAAC;"}
|
|
@@ -1,28 +1,11 @@
|
|
|
1
|
-
import { sv as t } from "./fondue-
|
|
2
|
-
const o = {
|
|
3
|
-
small: 16,
|
|
4
|
-
medium: 20,
|
|
5
|
-
large: 24
|
|
6
|
-
}, r = t({
|
|
7
|
-
base: "tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium",
|
|
1
|
+
import { sv as t } from "./fondue-components10.js";
|
|
2
|
+
const o = t({
|
|
8
3
|
variants: {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
full: "tw-rounded-full"
|
|
15
|
-
},
|
|
16
|
-
size: {
|
|
17
|
-
small: "tw-px-2 tw-h-6 tw-text-body-small",
|
|
18
|
-
medium: "tw-px-4 tw-h-9 tw-text-body-medium",
|
|
19
|
-
large: "tw-px-6 tw-h-12 tw-text-body-large"
|
|
20
|
-
},
|
|
21
|
-
iconOnly: {
|
|
22
|
-
true: "tw-aspect-square tw-px-0"
|
|
23
|
-
},
|
|
24
|
-
hugWidth: {
|
|
25
|
-
false: "tw-w-full"
|
|
4
|
+
iconSpacing: {
|
|
5
|
+
none: "",
|
|
6
|
+
small: "tw--ml-0.5 tw-mr-1",
|
|
7
|
+
medium: "tw--ml-1 tw-mr-1.5",
|
|
8
|
+
large: "tw--ml-1 tw-mr-2"
|
|
26
9
|
},
|
|
27
10
|
emphasis: {
|
|
28
11
|
default: "",
|
|
@@ -41,89 +24,85 @@ const o = {
|
|
|
41
24
|
{
|
|
42
25
|
style: "default",
|
|
43
26
|
emphasis: "default",
|
|
44
|
-
class: "tw-
|
|
27
|
+
class: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none"
|
|
45
28
|
},
|
|
46
29
|
{
|
|
47
30
|
style: "default",
|
|
48
31
|
emphasis: "weak",
|
|
49
|
-
class: "tw-
|
|
32
|
+
class: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none"
|
|
50
33
|
},
|
|
51
34
|
{
|
|
52
35
|
style: "default",
|
|
53
36
|
emphasis: "strong",
|
|
54
|
-
class: "tw-
|
|
37
|
+
class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-icon-pressed tw-leading-none"
|
|
55
38
|
},
|
|
56
39
|
{
|
|
57
40
|
style: "positive",
|
|
58
41
|
emphasis: "default",
|
|
59
|
-
class: "tw-
|
|
42
|
+
class: "tw-text-button-positive-icon group-hover:tw-text-button-positive-icon-hover group-active:tw-text-button-positive-icon-pressed tw-leading-none"
|
|
60
43
|
},
|
|
61
44
|
{
|
|
62
45
|
style: "positive",
|
|
63
46
|
emphasis: "weak",
|
|
64
|
-
class: "tw-
|
|
47
|
+
class: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hovergroup-active:tw-text-button-strong-positive-icon-pressed tw-leading-none"
|
|
65
48
|
},
|
|
66
49
|
{
|
|
67
50
|
style: "positive",
|
|
68
51
|
emphasis: "strong",
|
|
69
|
-
class: "tw-
|
|
52
|
+
class: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hover group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none"
|
|
70
53
|
},
|
|
71
54
|
{
|
|
72
55
|
style: "negative",
|
|
73
56
|
emphasis: "default",
|
|
74
|
-
class: "tw-
|
|
57
|
+
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
|
|
75
58
|
},
|
|
76
59
|
{
|
|
77
60
|
style: "negative",
|
|
78
61
|
emphasis: "weak",
|
|
79
|
-
class: "tw-
|
|
62
|
+
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
|
|
80
63
|
},
|
|
81
64
|
{
|
|
82
65
|
style: "negative",
|
|
83
66
|
emphasis: "strong",
|
|
84
|
-
class: "tw-
|
|
67
|
+
class: "tw-text-button-strong-negative-icon group-hover:tw-text-button-strong-negative-icon-hovergroup-active:tw-text-button-strong-negative-icon-pressed tw-leading-none"
|
|
85
68
|
},
|
|
86
69
|
{
|
|
87
70
|
style: "danger",
|
|
88
71
|
emphasis: "default",
|
|
89
|
-
class: "tw-
|
|
72
|
+
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
|
|
90
73
|
},
|
|
91
74
|
{
|
|
92
75
|
style: "danger",
|
|
93
76
|
emphasis: "weak",
|
|
94
|
-
class: "tw-
|
|
77
|
+
class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
|
|
95
78
|
},
|
|
96
79
|
{
|
|
97
80
|
style: "danger",
|
|
98
81
|
emphasis: "strong",
|
|
99
|
-
class: "tw-
|
|
82
|
+
class: "tw-text-button-danger-icon group-hover:tw-text-button-danger-icon-hovergroup-active:tw-text-button-danger-icon-pressed tw-leading-none"
|
|
100
83
|
},
|
|
101
84
|
{
|
|
102
85
|
style: "loud",
|
|
103
86
|
emphasis: "default",
|
|
104
|
-
class: "tw-
|
|
87
|
+
class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none"
|
|
105
88
|
},
|
|
106
89
|
{
|
|
107
90
|
style: "loud",
|
|
108
91
|
emphasis: "weak",
|
|
109
|
-
class: "tw-
|
|
92
|
+
class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none"
|
|
110
93
|
},
|
|
111
94
|
{
|
|
112
95
|
style: "loud",
|
|
113
96
|
emphasis: "strong",
|
|
114
|
-
class: "tw-
|
|
97
|
+
class: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse tw-leading-none"
|
|
115
98
|
}
|
|
116
99
|
],
|
|
117
100
|
defaultVariants: {
|
|
118
|
-
style: "default",
|
|
119
101
|
emphasis: "strong",
|
|
120
|
-
|
|
121
|
-
rounding: "medium",
|
|
122
|
-
hugWidth: !0
|
|
102
|
+
style: "default"
|
|
123
103
|
}
|
|
124
104
|
});
|
|
125
105
|
export {
|
|
126
|
-
o as
|
|
127
|
-
r as buttonStyles
|
|
106
|
+
o as iconStyles
|
|
128
107
|
};
|
|
129
108
|
//# sourceMappingURL=fondue-components7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/
|
|
1
|
+
{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n variants: {\n iconSpacing: {\n none: '',\n small: 'tw--ml-0.5 tw-mr-1',\n medium: 'tw--ml-1 tw-mr-1.5',\n large: 'tw--ml-1 tw-mr-2',\n },\n emphasis: {\n default: '',\n weak: '',\n strong: '',\n },\n style: {\n default: '',\n positive: '',\n negative: '',\n danger: '',\n loud: '',\n },\n },\n compoundVariants: [\n {\n style: 'default',\n emphasis: 'default',\n class:\n 'tw-text-button-icon ' +\n 'group-hover:tw-text-button-icon-hover ' +\n 'group-active:tw-text-button-icon-pressed tw-leading-none',\n },\n {\n style: 'default',\n emphasis: 'weak',\n class:\n 'tw-text-button-icon ' +\n 'group-hover:tw-text-button-icon-hover ' +\n 'group-active:tw-text-button-icon-pressed tw-leading-none',\n },\n {\n style: 'default',\n emphasis: 'strong',\n class:\n 'tw-text-button-strong-icon ' +\n 'group-hover:tw-text-button-strong-icon-hover ' +\n 'group-active:tw-text-button-strong-icon-pressed tw-leading-none',\n },\n {\n style: 'positive',\n emphasis: 'default',\n class:\n 'tw-text-button-positive-icon ' +\n 'group-hover:tw-text-button-positive-icon-hover ' +\n 'group-active:tw-text-button-positive-icon-pressed tw-leading-none',\n },\n {\n style: 'positive',\n emphasis: 'weak',\n class:\n 'tw-text-button-strong-positive-icon ' +\n 'group-hover:tw-text-button-strong-positive-icon-hover' +\n 'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',\n },\n {\n style: 'positive',\n emphasis: 'strong',\n class:\n 'tw-text-button-strong-positive-icon ' +\n 'group-hover:tw-text-button-strong-positive-icon-hover ' +\n 'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',\n },\n {\n style: 'negative',\n emphasis: 'default',\n class:\n 'tw-text-button-negative-icon ' +\n 'group-hover:tw-text-button-negative-icon-hover' +\n 'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n },\n {\n style: 'negative',\n emphasis: 'weak',\n class:\n 'tw-text-button-negative-icon ' +\n 'group-hover:tw-text-button-negative-icon-hover' +\n 'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n },\n {\n style: 'negative',\n emphasis: 'strong',\n class:\n 'tw-text-button-strong-negative-icon ' +\n 'group-hover:tw-text-button-strong-negative-icon-hover' +\n 'group-active:tw-text-button-strong-negative-icon-pressed tw-leading-none',\n },\n {\n style: 'danger',\n emphasis: 'default',\n class:\n 'tw-text-button-negative-icon ' +\n 'group-hover:tw-text-button-negative-icon-hover' +\n 'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n },\n {\n style: 'danger',\n emphasis: 'weak',\n class:\n 'tw-text-button-negative-icon ' +\n 'group-hover:tw-text-button-negative-icon-hover' +\n 'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n },\n {\n style: 'danger',\n emphasis: 'strong',\n class:\n 'tw-text-button-danger-icon ' +\n 'group-hover:tw-text-button-danger-icon-hover' +\n 'group-active:tw-text-button-danger-icon-pressed tw-leading-none',\n },\n {\n style: 'loud',\n emphasis: 'default',\n class:\n 'tw-text-box-selected-inverse ' +\n 'group-hover:tw-text-box-selected-inverse-hover' +\n 'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',\n },\n {\n style: 'loud',\n emphasis: 'weak',\n class:\n 'tw-text-box-selected-inverse ' +\n 'group-hover:tw-text-box-selected-inverse-hover' +\n 'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',\n },\n {\n style: 'loud',\n emphasis: 'strong',\n class:\n 'tw-text-box-selected-strong-inverse ' +\n 'group-hover:tw-text-box-selected-strong-inverse' +\n 'group-active:tw-text-box-selected-strong-inverse tw-leading-none',\n },\n ],\n defaultVariants: {\n emphasis: 'strong',\n style: 'default',\n },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,aAAa;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AACJ,CAAC;"}
|