@frontify/fondue-components 1.2.2 → 1.2.3
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 +110 -27
- package/dist/fondue-components10.js.map +1 -1
- package/dist/fondue-components11.js +30 -2355
- package/dist/fondue-components11.js.map +1 -1
- package/dist/fondue-components12.js +2352 -135
- package/dist/fondue-components12.js.map +1 -1
- package/dist/fondue-components13.js +142 -28
- package/dist/fondue-components13.js.map +1 -1
- package/dist/fondue-components14.js +32 -0
- package/dist/fondue-components14.js.map +1 -0
- package/dist/fondue-components3.js +21 -16
- package/dist/fondue-components3.js.map +1 -1
- package/dist/fondue-components5.js +1 -1
- package/dist/fondue-components6.js +8 -12
- package/dist/fondue-components6.js.map +1 -1
- package/dist/fondue-components7.js +10 -152
- package/dist/fondue-components7.js.map +1 -1
- package/dist/fondue-components8.js +58 -21
- package/dist/fondue-components8.js.map +1 -1
- package/dist/fondue-components9.js +20 -19
- package/dist/fondue-components9.js.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/style.css +1 -1
- package/package.json +5 -3
|
@@ -1,28 +1,33 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
2
|
+
import { forwardRef as d } from "react";
|
|
3
|
+
import { FOCUS_OUTLINE as u } from "./fondue-components6.js";
|
|
4
|
+
import { cn as c } from "./fondue-components7.js";
|
|
5
|
+
import { buttonStyles as s } from "./fondue-components8.js";
|
|
6
|
+
import { iconStyles as l } from "./fondue-components9.js";
|
|
7
|
+
import { textStyles as S } from "./fondue-components10.js";
|
|
8
|
+
const b = d(
|
|
8
9
|
({
|
|
9
10
|
children: m,
|
|
10
11
|
style: o,
|
|
11
12
|
size: r = "medium",
|
|
12
|
-
"data-test-id":
|
|
13
|
-
className:
|
|
13
|
+
"data-test-id": i = "fondue-button",
|
|
14
|
+
className: e = "",
|
|
15
|
+
onPress: n = () => {
|
|
16
|
+
},
|
|
14
17
|
...t
|
|
15
|
-
},
|
|
18
|
+
}, f) => /* @__PURE__ */ a(
|
|
16
19
|
"button",
|
|
17
20
|
{
|
|
18
|
-
ref:
|
|
19
|
-
"data-test-id":
|
|
20
|
-
className:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
ref: f,
|
|
22
|
+
"data-test-id": i,
|
|
23
|
+
className: c(
|
|
24
|
+
s({ size: r, style: o, ...t }),
|
|
25
|
+
S({ style: o, ...t }),
|
|
26
|
+
l({ style: o, ...t }),
|
|
27
|
+
e,
|
|
28
|
+
u
|
|
25
29
|
),
|
|
30
|
+
onClick: n,
|
|
26
31
|
...t,
|
|
27
32
|
children: m
|
|
28
33
|
}
|
|
@@ -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 { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { 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\ntype ButtonAspect = 'default' | 'square';\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 'medium'\n */\n size?: ButtonSize;\n /**\n * @default 'medium'\n */\n rounding?: ButtonRounding;\n /**\n * @default false\n */\n disabled?: boolean;\n /**\n * @default 'default'\n */\n aspect?: ButtonAspect;\n /**\n * @default true\n */\n hugWidth?: boolean;\n children?: ReactNode;\n
|
|
1
|
+
{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { 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\ntype ButtonAspect = 'default' | 'square';\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 'medium'\n */\n size?: ButtonSize;\n /**\n * @default 'medium'\n */\n rounding?: ButtonRounding;\n /**\n * @default false\n */\n disabled?: boolean;\n /**\n * @default 'default'\n */\n aspect?: ButtonAspect;\n /**\n * @default true\n */\n hugWidth?: boolean;\n children?: ReactNode;\n onPress?: (event?: MouseEvent<HTMLButtonElement>) => void;\n 'aria-label'?: string;\n 'aria-describedby'?: string;\n 'data-test-id'?: string;\n className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n (\n {\n children,\n style,\n size = 'medium',\n 'data-test-id': dataTestId = 'fondue-button',\n className = '',\n onPress = () => {},\n ...props\n }: ButtonProps,\n ref: ForwardedRef<HTMLButtonElement | null>,\n ) => {\n return (\n <button\n ref={ref}\n data-test-id={dataTestId}\n className={cn(\n buttonStyles({ size, style, ...props }),\n textStyles({ style, ...props }),\n iconStyles({ style, ...props }),\n className,\n FOCUS_OUTLINE,\n )}\n onClick={onPress}\n {...props}\n >\n {children}\n </button>\n );\n },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","style","size","dataTestId","className","onPress","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles","FOCUS_OUTLINE"],"mappings":";;;;;;;AAoEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU,MAAM;AAAA,IAAC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcJ;AAAA,MACd,WAAWM;AAAA,QACPC,EAAa,EAAE,MAAAR,GAAM,OAAAD,GAAO,GAAGK,GAAO;AAAA,QACtCK,EAAW,EAAE,OAAAV,GAAO,GAAGK,GAAO;AAAA,QAC9BM,EAAW,EAAE,OAAAX,GAAO,GAAGK,GAAO;AAAA,QAC9BF;AAAA,QACAS;AAAA,MACJ;AAAA,MACA,SAASR;AAAA,MACR,GAAGC;AAAA,MAEH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
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-components11.js";
|
|
5
5
|
const p = l(
|
|
6
6
|
({
|
|
7
7
|
value: a,
|
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
classGroups: {
|
|
7
|
-
"font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
}), m = (...t) => r(...t), x = (t) => o(t);
|
|
1
|
+
import { cn as t } from "./fondue-components7.js";
|
|
2
|
+
const i = "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none", n = "focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none";
|
|
3
|
+
t([i, "tw-ring-inset"]);
|
|
4
|
+
t([n, "tw-ring-inset"]);
|
|
5
|
+
const o = "focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue";
|
|
11
6
|
export {
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
o as FOCUS_OUTLINE,
|
|
8
|
+
i as FOCUS_STYLE,
|
|
9
|
+
n as FOCUS_VISIBLE_STYLE
|
|
14
10
|
};
|
|
15
11
|
//# sourceMappingURL=fondue-components6.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components6.js","sources":["../src/utilities/
|
|
1
|
+
{"version":3,"file":"fondue-components6.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cn } from './styleUtilities';\n\nexport const FOCUS_STYLE = 'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_STYLE_NO_OFFSET = 'tw-ring-4 tw-ring-blue dark:tw-ring-offset-black tw-outline-none';\nexport const FOCUS_VISIBLE_STYLE =\n 'focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none';\nexport const FOCUS_STYLE_INSET = cn([FOCUS_STYLE, 'tw-ring-inset']);\nexport const FOCUS_VISIBLE_STYLE_INSET = cn([FOCUS_VISIBLE_STYLE, 'tw-ring-inset']);\nexport const FOCUS_WITHIN_STYLE =\n 'focus-within:tw-ring-4 focus-within:tw-ring-blue focus-within:tw-ring-offset-2 focus-within:dark:tw-ring-offset-black focus-within:tw-outline-none';\nexport const FOCUS_OUTLINE = 'focus-visible:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue';\n"],"names":["FOCUS_STYLE","FOCUS_VISIBLE_STYLE","cn","FOCUS_OUTLINE"],"mappings":";AAIO,MAAMA,IAAc,qFAEdC,IACT;AAC6BC,EAAG,CAACF,GAAa,eAAe,CAAC;AACzBE,EAAG,CAACD,GAAqB,eAAe,CAAC;AAG3E,MAAME,IAAgB;"}
|
|
@@ -1,157 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
rounding: {
|
|
9
|
-
medium: "tw-rounded",
|
|
10
|
-
full: "tw-rounded-full"
|
|
11
|
-
},
|
|
12
|
-
size: {
|
|
13
|
-
small: "tw-h-6 tw-text-body-small",
|
|
14
|
-
medium: "tw-h-9 tw-text-body-medium",
|
|
15
|
-
large: "tw-h-12 tw-text-body-large"
|
|
16
|
-
},
|
|
17
|
-
aspect: {
|
|
18
|
-
square: "tw-aspect-square tw-px-0",
|
|
19
|
-
default: ""
|
|
20
|
-
},
|
|
21
|
-
hugWidth: {
|
|
22
|
-
false: "tw-w-full"
|
|
23
|
-
},
|
|
24
|
-
emphasis: {
|
|
25
|
-
default: "",
|
|
26
|
-
weak: "",
|
|
27
|
-
strong: ""
|
|
28
|
-
},
|
|
29
|
-
style: {
|
|
30
|
-
default: "",
|
|
31
|
-
positive: "",
|
|
32
|
-
negative: "",
|
|
33
|
-
danger: "",
|
|
34
|
-
loud: ""
|
|
1
|
+
import { extendTailwindMerge as e } from "./fondue-components12.js";
|
|
2
|
+
import { tv as o } from "./fondue-components13.js";
|
|
3
|
+
const r = e({
|
|
4
|
+
prefix: "tw-",
|
|
5
|
+
extend: {
|
|
6
|
+
classGroups: {
|
|
7
|
+
"font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
|
|
35
8
|
}
|
|
36
|
-
},
|
|
37
|
-
compoundVariants: [
|
|
38
|
-
{
|
|
39
|
-
disabled: !1,
|
|
40
|
-
style: "default",
|
|
41
|
-
emphasis: "default",
|
|
42
|
-
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
disabled: !1,
|
|
46
|
-
style: "default",
|
|
47
|
-
emphasis: "weak",
|
|
48
|
-
class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
disabled: !1,
|
|
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
|
-
disabled: !1,
|
|
58
|
-
style: "positive",
|
|
59
|
-
emphasis: "default",
|
|
60
|
-
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"
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
disabled: !1,
|
|
64
|
-
style: "positive",
|
|
65
|
-
emphasis: "weak",
|
|
66
|
-
class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
disabled: !1,
|
|
70
|
-
style: "positive",
|
|
71
|
-
emphasis: "strong",
|
|
72
|
-
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"
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
disabled: !1,
|
|
76
|
-
style: "negative",
|
|
77
|
-
emphasis: "default",
|
|
78
|
-
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"
|
|
79
|
-
},
|
|
80
|
-
{
|
|
81
|
-
disabled: !1,
|
|
82
|
-
style: "negative",
|
|
83
|
-
emphasis: "weak",
|
|
84
|
-
class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
|
|
85
|
-
},
|
|
86
|
-
{
|
|
87
|
-
disabled: !1,
|
|
88
|
-
style: "negative",
|
|
89
|
-
emphasis: "strong",
|
|
90
|
-
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"
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
disabled: !1,
|
|
94
|
-
style: "danger",
|
|
95
|
-
emphasis: "default",
|
|
96
|
-
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
disabled: !1,
|
|
100
|
-
style: "danger",
|
|
101
|
-
emphasis: "weak",
|
|
102
|
-
class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
103
|
-
},
|
|
104
|
-
{
|
|
105
|
-
disabled: !1,
|
|
106
|
-
style: "danger",
|
|
107
|
-
emphasis: "strong",
|
|
108
|
-
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"
|
|
109
|
-
},
|
|
110
|
-
{
|
|
111
|
-
disabled: !1,
|
|
112
|
-
style: "loud",
|
|
113
|
-
emphasis: "default",
|
|
114
|
-
class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
|
|
115
|
-
},
|
|
116
|
-
{
|
|
117
|
-
disabled: !1,
|
|
118
|
-
style: "loud",
|
|
119
|
-
emphasis: "weak",
|
|
120
|
-
class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
|
|
121
|
-
},
|
|
122
|
-
{
|
|
123
|
-
disabled: !1,
|
|
124
|
-
style: "loud",
|
|
125
|
-
emphasis: "strong",
|
|
126
|
-
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 "
|
|
127
|
-
},
|
|
128
|
-
{
|
|
129
|
-
aspect: "default",
|
|
130
|
-
size: "small",
|
|
131
|
-
class: "tw-px-2"
|
|
132
|
-
},
|
|
133
|
-
{
|
|
134
|
-
aspect: "default",
|
|
135
|
-
size: "medium",
|
|
136
|
-
class: "tw-px-4"
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
aspect: "default",
|
|
140
|
-
size: "large",
|
|
141
|
-
class: "tw-px-6"
|
|
142
|
-
}
|
|
143
|
-
],
|
|
144
|
-
defaultVariants: {
|
|
145
|
-
style: "default",
|
|
146
|
-
emphasis: "strong",
|
|
147
|
-
size: "medium",
|
|
148
|
-
rounding: "medium",
|
|
149
|
-
hugWidth: !0,
|
|
150
|
-
aspect: "default",
|
|
151
|
-
disabled: !1
|
|
152
9
|
}
|
|
153
|
-
});
|
|
10
|
+
}), m = (...t) => r(...t), x = (t) => o(t);
|
|
154
11
|
export {
|
|
155
|
-
|
|
12
|
+
m as cn,
|
|
13
|
+
x as sv
|
|
156
14
|
};
|
|
157
15
|
//# sourceMappingURL=fondue-components7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components7.js","sources":["../src/
|
|
1
|
+
{"version":3,"file":"fondue-components7.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n prefix: 'tw-',\n extend: {\n classGroups: {\n 'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n },\n },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}
|
|
@@ -1,6 +1,26 @@
|
|
|
1
|
-
import { sv as e } from "./fondue-
|
|
1
|
+
import { sv as e } from "./fondue-components7.js";
|
|
2
2
|
const s = e({
|
|
3
|
+
base: "tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium",
|
|
3
4
|
variants: {
|
|
5
|
+
disabled: {
|
|
6
|
+
true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
|
|
7
|
+
},
|
|
8
|
+
rounding: {
|
|
9
|
+
medium: "tw-rounded",
|
|
10
|
+
full: "tw-rounded-full"
|
|
11
|
+
},
|
|
12
|
+
size: {
|
|
13
|
+
small: "tw-h-6 tw-text-body-small",
|
|
14
|
+
medium: "tw-h-9 tw-text-body-medium",
|
|
15
|
+
large: "tw-h-12 tw-text-body-large"
|
|
16
|
+
},
|
|
17
|
+
aspect: {
|
|
18
|
+
square: "tw-aspect-square tw-px-0",
|
|
19
|
+
default: ""
|
|
20
|
+
},
|
|
21
|
+
hugWidth: {
|
|
22
|
+
false: "tw-w-full"
|
|
23
|
+
},
|
|
4
24
|
emphasis: {
|
|
5
25
|
default: "",
|
|
6
26
|
weak: "",
|
|
@@ -12,9 +32,6 @@ const s = e({
|
|
|
12
32
|
negative: "",
|
|
13
33
|
danger: "",
|
|
14
34
|
loud: ""
|
|
15
|
-
},
|
|
16
|
-
disabled: {
|
|
17
|
-
true: "tw-text-box-disabled-inverse"
|
|
18
35
|
}
|
|
19
36
|
},
|
|
20
37
|
compoundVariants: [
|
|
@@ -22,99 +39,119 @@ const s = e({
|
|
|
22
39
|
disabled: !1,
|
|
23
40
|
style: "default",
|
|
24
41
|
emphasis: "default",
|
|
25
|
-
class: "
|
|
42
|
+
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
26
43
|
},
|
|
27
44
|
{
|
|
28
45
|
disabled: !1,
|
|
29
46
|
style: "default",
|
|
30
47
|
emphasis: "weak",
|
|
31
|
-
class: "
|
|
48
|
+
class: "tw-border-transparent hover:tw-bg-button-background-hover hover:tw-border-button-border active:tw-bg-button-background-pressed"
|
|
32
49
|
},
|
|
33
50
|
{
|
|
34
51
|
disabled: !1,
|
|
35
52
|
style: "default",
|
|
36
53
|
emphasis: "strong",
|
|
37
|
-
class: "
|
|
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"
|
|
38
55
|
},
|
|
39
56
|
{
|
|
40
57
|
disabled: !1,
|
|
41
58
|
style: "positive",
|
|
42
59
|
emphasis: "default",
|
|
43
|
-
class: "
|
|
60
|
+
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"
|
|
44
61
|
},
|
|
45
62
|
{
|
|
46
63
|
disabled: !1,
|
|
47
64
|
style: "positive",
|
|
48
65
|
emphasis: "weak",
|
|
49
|
-
class: "
|
|
66
|
+
class: "tw-border-transparent hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border active:tw-bg-button-positive-background-pressed"
|
|
50
67
|
},
|
|
51
68
|
{
|
|
52
69
|
disabled: !1,
|
|
53
70
|
style: "positive",
|
|
54
71
|
emphasis: "strong",
|
|
55
|
-
class: "
|
|
72
|
+
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"
|
|
56
73
|
},
|
|
57
74
|
{
|
|
58
75
|
disabled: !1,
|
|
59
76
|
style: "negative",
|
|
60
77
|
emphasis: "default",
|
|
61
|
-
class: "
|
|
78
|
+
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"
|
|
62
79
|
},
|
|
63
80
|
{
|
|
64
81
|
disabled: !1,
|
|
65
82
|
style: "negative",
|
|
66
83
|
emphasis: "weak",
|
|
67
|
-
class: "
|
|
84
|
+
class: "tw-border-transparent hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border active:tw-bg-button-negative-background-pressed"
|
|
68
85
|
},
|
|
69
86
|
{
|
|
70
87
|
disabled: !1,
|
|
71
88
|
style: "negative",
|
|
72
89
|
emphasis: "strong",
|
|
73
|
-
class: "
|
|
90
|
+
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"
|
|
74
91
|
},
|
|
75
92
|
{
|
|
76
93
|
disabled: !1,
|
|
77
94
|
style: "danger",
|
|
78
95
|
emphasis: "default",
|
|
79
|
-
class: "
|
|
96
|
+
class: "tw-bg-button-background tw-border-button-border hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
80
97
|
},
|
|
81
98
|
{
|
|
82
99
|
disabled: !1,
|
|
83
100
|
style: "danger",
|
|
84
101
|
emphasis: "weak",
|
|
85
|
-
class: "
|
|
102
|
+
class: "tw-border-transparent hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
|
|
86
103
|
},
|
|
87
104
|
{
|
|
88
105
|
disabled: !1,
|
|
89
106
|
style: "danger",
|
|
90
107
|
emphasis: "strong",
|
|
91
|
-
class: "
|
|
108
|
+
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"
|
|
92
109
|
},
|
|
93
110
|
{
|
|
94
111
|
disabled: !1,
|
|
95
112
|
style: "loud",
|
|
96
113
|
emphasis: "default",
|
|
97
|
-
class: "
|
|
114
|
+
class: "tw-bg-box-selected tw-border-button-border hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed "
|
|
98
115
|
},
|
|
99
116
|
{
|
|
100
117
|
disabled: !1,
|
|
101
118
|
style: "loud",
|
|
102
119
|
emphasis: "weak",
|
|
103
|
-
class: "
|
|
120
|
+
class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
|
|
104
121
|
},
|
|
105
122
|
{
|
|
106
123
|
disabled: !1,
|
|
107
124
|
style: "loud",
|
|
108
125
|
emphasis: "strong",
|
|
109
|
-
class: "
|
|
126
|
+
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 "
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
aspect: "default",
|
|
130
|
+
size: "small",
|
|
131
|
+
class: "tw-px-2"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
aspect: "default",
|
|
135
|
+
size: "medium",
|
|
136
|
+
class: "tw-px-4"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
aspect: "default",
|
|
140
|
+
size: "large",
|
|
141
|
+
class: "tw-px-6"
|
|
110
142
|
}
|
|
111
143
|
],
|
|
112
144
|
defaultVariants: {
|
|
145
|
+
style: "default",
|
|
113
146
|
emphasis: "strong",
|
|
114
|
-
|
|
147
|
+
size: "medium",
|
|
148
|
+
rounding: "medium",
|
|
149
|
+
hugWidth: !0,
|
|
150
|
+
aspect: "default",
|
|
151
|
+
disabled: !1
|
|
115
152
|
}
|
|
116
153
|
});
|
|
117
154
|
export {
|
|
118
|
-
s as
|
|
155
|
+
s as buttonStyles
|
|
119
156
|
};
|
|
120
157
|
//# sourceMappingURL=fondue-components8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fondue-components8.js","sources":["../src/components/Button/styles/
|
|
1
|
+
{"version":3,"file":"fondue-components8.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n base: 'tw-group tw-border tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer 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 aspect: {\n square: 'tw-aspect-square tw-px-0',\n default: '',\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 disabled: false,\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 aspect: 'default',\n size: 'small',\n class: 'tw-px-2',\n },\n {\n aspect: 'default',\n size: 'medium',\n class: 'tw-px-4',\n },\n {\n aspect: 'default',\n size: 'large',\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 aspect: 'default',\n disabled: false,\n },\n});\n"],"names":["buttonStyles","sv"],"mappings":"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"}
|