@liner-fe/prism 1.3.3 → 1.3.5
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/lib/components/Button/index.d.ts +13 -6
- package/lib/index.css +49 -33
- package/lib/index.css.map +2 -2
- package/lib/index.mjs +33 -34
- package/lib/index.mjs.map +2 -2
- package/package.json +1 -1
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const defaultButtonVariants: (props?: ({
|
|
4
|
-
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" |
|
|
4
|
+
level?: "primary" | "secondary" | "tertiary" | "quaternary" | "quinary" | "negative" | null | undefined;
|
|
5
|
+
fill?: "solid" | "ghost" | null | undefined;
|
|
5
6
|
align?: "center" | "spaceBetween" | null | undefined;
|
|
6
7
|
size?: "cta" | "l" | "m" | "s" | null | undefined;
|
|
7
8
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -16,27 +17,33 @@ interface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
16
17
|
as?: 'default' | 'text' | 'icon';
|
|
17
18
|
asChild?: boolean;
|
|
18
19
|
}
|
|
19
|
-
export
|
|
20
|
+
export type FillType = 'solid' | 'ghost';
|
|
21
|
+
export type SolidLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative';
|
|
22
|
+
export type GhostLevelType = 'primary' | 'secondary';
|
|
23
|
+
type LevelType<T> = T extends 'solid' ? SolidLevelType : GhostLevelType;
|
|
24
|
+
export interface DefaultButtonProps<T extends FillType> extends CommonButtonProps, VariantProps<typeof defaultButtonVariants> {
|
|
20
25
|
as?: 'default';
|
|
21
26
|
asChild?: boolean;
|
|
22
|
-
level?:
|
|
27
|
+
level?: LevelType<T>;
|
|
28
|
+
fill?: T;
|
|
23
29
|
size?: 'cta' | 'l' | 'm' | 's';
|
|
24
30
|
align?: 'center' | 'spaceBetween';
|
|
25
31
|
}
|
|
32
|
+
type TextLevelType = 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';
|
|
26
33
|
export interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {
|
|
27
34
|
as: 'text';
|
|
28
35
|
asChild?: boolean;
|
|
29
|
-
level?:
|
|
36
|
+
level?: TextLevelType;
|
|
30
37
|
}
|
|
31
38
|
export interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {
|
|
32
39
|
as: 'icon';
|
|
33
40
|
asChild?: boolean;
|
|
34
41
|
}
|
|
35
|
-
export type ButtonProps = DefaultButtonProps | TextButtonProps | IconButtonProps;
|
|
42
|
+
export type ButtonProps = DefaultButtonProps<FillType> | TextButtonProps | IconButtonProps;
|
|
36
43
|
/**
|
|
37
44
|
* 버튼 컴포넌트
|
|
38
45
|
*/
|
|
39
|
-
export declare const DefaultButton: import("react").ForwardRefExoticComponent<DefaultButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
46
|
+
export declare const DefaultButton: import("react").ForwardRefExoticComponent<DefaultButtonProps<FillType> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
40
47
|
export declare const TextButton: import("react").ForwardRefExoticComponent<TextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
41
48
|
export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
42
49
|
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
package/lib/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss */
|
|
2
|
-
.
|
|
2
|
+
._button_mxpu5_1 {
|
|
3
3
|
position: relative;
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
@@ -12,97 +12,113 @@
|
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
cursor: pointer;
|
|
14
14
|
}
|
|
15
|
-
.
|
|
15
|
+
._button_mxpu5_1:disabled {
|
|
16
16
|
background: var(--neutral-container-mid);
|
|
17
17
|
color: var(--neutral-label-tertiary);
|
|
18
18
|
cursor: not-allowed;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
._default_mxpu5_20 {
|
|
21
21
|
color: var(--inverse-label-static-primary);
|
|
22
22
|
background: var(--lp-pri-achromatic-white);
|
|
23
23
|
}
|
|
24
|
-
.
|
|
24
|
+
._text_mxpu5_25 {
|
|
25
25
|
background: none;
|
|
26
26
|
color: var(--inverse-label-static-primary);
|
|
27
27
|
font-size: var(--lp-pri-font-size-13);
|
|
28
28
|
font-weight: var(--lp-pri-font-weight-500);
|
|
29
29
|
}
|
|
30
|
-
.
|
|
30
|
+
._text_mxpu5_25:not(:disabled):hover {
|
|
31
31
|
text-decoration: underline;
|
|
32
32
|
text-underline-offset: 0.2rem;
|
|
33
33
|
}
|
|
34
|
-
.
|
|
34
|
+
._icon_mxpu5_36 {
|
|
35
35
|
background: none;
|
|
36
36
|
}
|
|
37
|
-
.
|
|
37
|
+
._primary_mxpu5_40 {
|
|
38
38
|
background: var(--brand-container-mid);
|
|
39
39
|
}
|
|
40
|
-
.
|
|
40
|
+
._primary_mxpu5_40:not(:disabled):hover {
|
|
41
41
|
background: var(--brand-container-mid-hover);
|
|
42
42
|
}
|
|
43
|
-
.
|
|
43
|
+
._secondary_mxpu5_47 {
|
|
44
44
|
background: var(--inverse-container-high);
|
|
45
45
|
}
|
|
46
|
-
.
|
|
46
|
+
._secondary_mxpu5_47:not(:disabled):hover {
|
|
47
47
|
background: var(--inverse-container-high-hover);
|
|
48
48
|
}
|
|
49
|
-
.
|
|
49
|
+
._tertiary_mxpu5_54 {
|
|
50
50
|
background: var(--neutral-fill-mid);
|
|
51
51
|
color: var(--neutral-label-primary);
|
|
52
52
|
}
|
|
53
|
-
.
|
|
53
|
+
._tertiary_mxpu5_54:not(:disabled):hover {
|
|
54
54
|
background: var(--neutral-fill-mid-hover);
|
|
55
55
|
}
|
|
56
|
-
.
|
|
56
|
+
._quaternary_mxpu5_62 {
|
|
57
57
|
color: var(--neutral-label-primary);
|
|
58
58
|
border: 1px solid var(--neutral-border-overlay-normal);
|
|
59
59
|
}
|
|
60
|
-
.
|
|
60
|
+
._quaternary_mxpu5_62:not(:disabled):hover {
|
|
61
61
|
background: var(--neutral-fill-lowest-hover);
|
|
62
62
|
}
|
|
63
|
-
.
|
|
63
|
+
._quaternary_mxpu5_62:disabled {
|
|
64
64
|
background: var(--neutral-container-mid);
|
|
65
65
|
color: var(--neutral-label-tertiary);
|
|
66
66
|
opacity: 0.4;
|
|
67
67
|
}
|
|
68
|
-
.
|
|
68
|
+
._quinary_mxpu5_75 {
|
|
69
69
|
color: var(--neutral-label-secondary);
|
|
70
70
|
}
|
|
71
|
-
.
|
|
71
|
+
._quinary_mxpu5_75:not(:disabled):hover {
|
|
72
72
|
background: #f5f5f5;
|
|
73
73
|
}
|
|
74
|
-
.
|
|
74
|
+
._quinary_mxpu5_75:disabled {
|
|
75
75
|
background: var(--neutral-container-mid);
|
|
76
76
|
color: var(--neutral-label-tertiary);
|
|
77
77
|
opacity: 0.4;
|
|
78
78
|
}
|
|
79
|
-
.
|
|
79
|
+
._negative_mxpu5_87 {
|
|
80
80
|
background: var(--function-container-negative);
|
|
81
81
|
}
|
|
82
|
-
.
|
|
82
|
+
._negative_mxpu5_87:not(:disabled):hover {
|
|
83
83
|
background: var(--function-container-negative-hover);
|
|
84
84
|
}
|
|
85
|
-
.
|
|
86
|
-
|
|
85
|
+
._ghost_mxpu5_94._primary_mxpu5_40 {
|
|
86
|
+
background: var(--neutral-fill-lowest);
|
|
87
|
+
color: var(--neutral-label-primary);
|
|
88
|
+
}
|
|
89
|
+
._ghost_mxpu5_94._primary_mxpu5_40:not(:disabled):hover {
|
|
90
|
+
background: var(--neutral-fill-lowest-hover);
|
|
91
|
+
}
|
|
92
|
+
._ghost_mxpu5_94._primary_mxpu5_40:disabled {
|
|
93
|
+
background: var(--neutral-fill-lowest);
|
|
94
|
+
color: var(--neutral-label-tertiary);
|
|
87
95
|
}
|
|
88
|
-
.
|
|
89
|
-
background: var(--neutral-
|
|
96
|
+
._ghost_mxpu5_94._secondary_mxpu5_47 {
|
|
97
|
+
background: var(--neutral-fill-lowest);
|
|
98
|
+
color: var(--neutral-label-secondary);
|
|
99
|
+
}
|
|
100
|
+
._ghost_mxpu5_94._secondary_mxpu5_47:not(:disabled):hover {
|
|
101
|
+
background: var(--neutral-fill-lowest-hover);
|
|
102
|
+
}
|
|
103
|
+
._ghost_mxpu5_94._secondary_mxpu5_47:disabled {
|
|
104
|
+
background: var(--neutral-fill-lowest);
|
|
105
|
+
color: var(--neutral-label-tertiary);
|
|
90
106
|
}
|
|
91
|
-
.
|
|
107
|
+
._cta_mxpu5_117 {
|
|
92
108
|
border-radius: 8px;
|
|
93
109
|
padding: 13.5px 12px;
|
|
94
110
|
font-size: var(--lp-pri-font-size-16);
|
|
95
111
|
min-width: 129px;
|
|
96
112
|
max-height: 48px;
|
|
97
113
|
}
|
|
98
|
-
.
|
|
114
|
+
._l_mxpu5_125 {
|
|
99
115
|
border-radius: 6px;
|
|
100
116
|
padding: 10.5px 8px;
|
|
101
117
|
font-size: var(--lp-pri-font-size-15);
|
|
102
118
|
min-width: 107px;
|
|
103
119
|
max-height: 40px;
|
|
104
120
|
}
|
|
105
|
-
.
|
|
121
|
+
._m_mxpu5_133 {
|
|
106
122
|
border-radius: 6px;
|
|
107
123
|
padding: 7px 6px;
|
|
108
124
|
font-size: var(--lp-pri-font-size-14);
|
|
@@ -110,7 +126,7 @@
|
|
|
110
126
|
min-width: 91px;
|
|
111
127
|
max-height: 32px;
|
|
112
128
|
}
|
|
113
|
-
.
|
|
129
|
+
._s_mxpu5_47 {
|
|
114
130
|
border-radius: 6px;
|
|
115
131
|
padding: 3.5px 6px;
|
|
116
132
|
font-size: var(--lp-pri-font-size-13);
|
|
@@ -118,20 +134,20 @@
|
|
|
118
134
|
min-width: 89px;
|
|
119
135
|
max-height: 24px;
|
|
120
136
|
}
|
|
121
|
-
._align-
|
|
137
|
+
._align-center_mxpu5_151 {
|
|
122
138
|
justify-content: center;
|
|
123
139
|
}
|
|
124
|
-
._align-space-
|
|
140
|
+
._align-space-between_mxpu5_155 {
|
|
125
141
|
justify-content: space-between;
|
|
126
142
|
}
|
|
127
|
-
._neutral-
|
|
143
|
+
._neutral-primary_mxpu5_159 {
|
|
128
144
|
color: var(--neutral-label-secondary);
|
|
129
145
|
opacity: 0.8;
|
|
130
146
|
}
|
|
131
|
-
._inverse-
|
|
147
|
+
._inverse-primary_mxpu5_164 {
|
|
132
148
|
color: var(--inverse-label-primary);
|
|
133
149
|
}
|
|
134
|
-
._inverse-static-
|
|
150
|
+
._inverse-static-primary_mxpu5_168 {
|
|
135
151
|
color: var(--inverse-label-static-primary);
|
|
136
152
|
}
|
|
137
153
|
/*! For license information please see index.css.LEGAL.txt */
|
package/lib/index.css.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss"],
|
|
4
|
-
"sourcesContent": [".
|
|
5
|
-
"mappings": ";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,cAAY;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa;AACb,YAAU;AACV,UAAQ;AACV;AACA,CAbC,eAae;AACd,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CAAC;AACC,SAAO,IAAI;AACX,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY;AACZ,SAAO,IAAI;AACX,aAAW,IAAI;AACf,eAAa,IAAI;AACnB;AACA,CANC,cAMc,KAAK,UAAU;AAC5B,mBAAiB;AACjB,yBAAuB;AACzB;AAEA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,mBAGmB,KAAK,UAAU;AACjC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AACA,CAJC,kBAIkB,KAAK,UAAU;AAChC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,SAAO,IAAI;AACX,UAAQ,IAAI,MAAM,IAAI;AACxB;AACA,CAJC,oBAIoB,KAAK,UAAU;AAClC,cAAY,IAAI;AAClB;AACA,CAPC,oBAOoB;AACnB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY;AACd;AACA,CANC,iBAMiB;AAChB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,kBAGkB,KAAK,UAAU;AAChC,cAAY,IAAI;AAClB;AAEA,CAAC;
|
|
4
|
+
"sourcesContent": ["._button_mxpu5_1 {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-style: normal;\n font-size: var(--lp-pri-font-size-16);\n font-weight: var(--lp-pri-font-weight-700);\n line-height: 130%;\n overflow: hidden;\n cursor: pointer;\n}\n._button_mxpu5_1:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n cursor: not-allowed;\n}\n\n._default_mxpu5_20 {\n color: var(--inverse-label-static-primary);\n background: var(--lp-pri-achromatic-white);\n}\n\n._text_mxpu5_25 {\n background: none;\n color: var(--inverse-label-static-primary);\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n}\n._text_mxpu5_25:not(:disabled):hover {\n text-decoration: underline;\n text-underline-offset: 0.2rem;\n}\n\n._icon_mxpu5_36 {\n background: none;\n}\n\n._primary_mxpu5_40 {\n background: var(--brand-container-mid);\n}\n._primary_mxpu5_40:not(:disabled):hover {\n background: var(--brand-container-mid-hover);\n}\n\n._secondary_mxpu5_47 {\n background: var(--inverse-container-high);\n}\n._secondary_mxpu5_47:not(:disabled):hover {\n background: var(--inverse-container-high-hover);\n}\n\n._tertiary_mxpu5_54 {\n background: var(--neutral-fill-mid);\n color: var(--neutral-label-primary);\n}\n._tertiary_mxpu5_54:not(:disabled):hover {\n background: var(--neutral-fill-mid-hover);\n}\n\n._quaternary_mxpu5_62 {\n color: var(--neutral-label-primary);\n border: 1px solid var(--neutral-border-overlay-normal);\n}\n._quaternary_mxpu5_62:not(:disabled):hover {\n background: var(--neutral-fill-lowest-hover);\n}\n._quaternary_mxpu5_62:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n._quinary_mxpu5_75 {\n color: var(--neutral-label-secondary);\n}\n._quinary_mxpu5_75:not(:disabled):hover {\n background: #f5f5f5;\n}\n._quinary_mxpu5_75:disabled {\n background: var(--neutral-container-mid);\n color: var(--neutral-label-tertiary);\n opacity: 0.4;\n}\n\n._negative_mxpu5_87 {\n background: var(--function-container-negative);\n}\n._negative_mxpu5_87:not(:disabled):hover {\n background: var(--function-container-negative-hover);\n}\n\n._ghost_mxpu5_94._primary_mxpu5_40 {\n background: var(--neutral-fill-lowest);\n color: var(--neutral-label-primary);\n}\n._ghost_mxpu5_94._primary_mxpu5_40:not(:disabled):hover {\n background: var(--neutral-fill-lowest-hover);\n}\n._ghost_mxpu5_94._primary_mxpu5_40:disabled {\n background: var(--neutral-fill-lowest);\n color: var(--neutral-label-tertiary);\n}\n._ghost_mxpu5_94._secondary_mxpu5_47 {\n background: var(--neutral-fill-lowest);\n color: var(--neutral-label-secondary);\n}\n._ghost_mxpu5_94._secondary_mxpu5_47:not(:disabled):hover {\n background: var(--neutral-fill-lowest-hover);\n}\n._ghost_mxpu5_94._secondary_mxpu5_47:disabled {\n background: var(--neutral-fill-lowest);\n color: var(--neutral-label-tertiary);\n}\n\n._cta_mxpu5_117 {\n border-radius: 8px;\n padding: 13.5px 12px;\n font-size: var(--lp-pri-font-size-16);\n min-width: 129px;\n max-height: 48px;\n}\n\n._l_mxpu5_125 {\n border-radius: 6px;\n padding: 10.5px 8px;\n font-size: var(--lp-pri-font-size-15);\n min-width: 107px;\n max-height: 40px;\n}\n\n._m_mxpu5_133 {\n border-radius: 6px;\n padding: 7px 6px;\n font-size: var(--lp-pri-font-size-14);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 91px;\n max-height: 32px;\n}\n\n._s_mxpu5_47 {\n border-radius: 6px;\n padding: 3.5px 6px;\n font-size: var(--lp-pri-font-size-13);\n font-weight: var(--lp-pri-font-weight-500);\n min-width: 89px;\n max-height: 24px;\n}\n\n._align-center_mxpu5_151 {\n justify-content: center;\n}\n\n._align-space-between_mxpu5_155 {\n justify-content: space-between;\n}\n\n._neutral-primary_mxpu5_159 {\n color: var(--neutral-label-secondary);\n opacity: 0.8;\n}\n\n._inverse-primary_mxpu5_164 {\n color: var(--inverse-label-primary);\n}\n\n._inverse-static-primary_mxpu5_168 {\n color: var(--inverse-label-static-primary);\n}"],
|
|
5
|
+
"mappings": ";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,UAAQ;AACR,cAAY;AACZ,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,eAAa;AACb,YAAU;AACV,UAAQ;AACV;AACA,CAbC,eAae;AACd,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,UAAQ;AACV;AAEA,CAAC;AACC,SAAO,IAAI;AACX,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY;AACZ,SAAO,IAAI;AACX,aAAW,IAAI;AACf,eAAa,IAAI;AACnB;AACA,CANC,cAMc,KAAK,UAAU;AAC5B,mBAAiB;AACjB,yBAAuB;AACzB;AAEA,CAAC;AACC,cAAY;AACd;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,mBAGmB,KAAK,UAAU;AACjC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AACA,CAJC,kBAIkB,KAAK,UAAU;AAChC,cAAY,IAAI;AAClB;AAEA,CAAC;AACC,SAAO,IAAI;AACX,UAAQ,IAAI,MAAM,IAAI;AACxB;AACA,CAJC,oBAIoB,KAAK,UAAU;AAClC,cAAY,IAAI;AAClB;AACA,CAPC,oBAOoB;AACnB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AACA,CAHC,iBAGiB,KAAK,UAAU;AAC/B,cAAY;AACd;AACA,CANC,iBAMiB;AAChB,cAAY,IAAI;AAChB,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,cAAY,IAAI;AAClB;AACA,CAHC,kBAGkB,KAAK,UAAU;AAChC,cAAY,IAAI;AAClB;AAEA,CAAC,eAAe,CAtDf;AAuDC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AACA,CAJC,eAIe,CA1Df,iBA0DiC,KAAK,UAAU;AAC/C,cAAY,IAAI;AAClB;AACA,CAPC,eAOe,CA7Df,iBA6DiC;AAChC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AACA,CAXC,eAWe,CA1Df;AA2DC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AACA,CAfC,eAee,CA9Df,mBA8DmC,KAAK,UAAU;AACjD,cAAY,IAAI;AAClB;AACA,CAlBC,eAkBe,CAjEf,mBAiEmC;AAClC,cAAY,IAAI;AAChB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,OAAO;AAChB,aAAW,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,OAAO;AAChB,aAAW,IAAI;AACf,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,IAAI;AACb,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,iBAAe;AACf,WAAS,MAAM;AACf,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,aAAW;AACX,cAAY;AACd;AAEA,CAAC;AACC,mBAAiB;AACnB;AAEA,CAAC;AACC,mBAAiB;AACnB;AAEA,CAAC;AACC,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/lib/index.mjs
CHANGED
|
@@ -11,26 +11,26 @@ import { forwardRef } from "react";
|
|
|
11
11
|
|
|
12
12
|
// src/components/Button/style.module.scss
|
|
13
13
|
var style_module_default = {
|
|
14
|
-
"button": "
|
|
15
|
-
"default": "
|
|
16
|
-
"text": "
|
|
17
|
-
"icon": "
|
|
18
|
-
"primary": "
|
|
19
|
-
"secondary": "
|
|
20
|
-
"tertiary": "
|
|
21
|
-
"quaternary": "
|
|
22
|
-
"quinary": "
|
|
23
|
-
"negative": "
|
|
24
|
-
"
|
|
25
|
-
"cta": "
|
|
26
|
-
"l": "
|
|
27
|
-
"m": "
|
|
28
|
-
"s": "
|
|
29
|
-
"align-center": "_align-
|
|
30
|
-
"align-space-between": "_align-space-
|
|
31
|
-
"neutral-primary": "_neutral-
|
|
32
|
-
"inverse-primary": "_inverse-
|
|
33
|
-
"inverse-static-primary": "_inverse-static-
|
|
14
|
+
"button": "_button_mxpu5_1",
|
|
15
|
+
"default": "_default_mxpu5_20",
|
|
16
|
+
"text": "_text_mxpu5_25",
|
|
17
|
+
"icon": "_icon_mxpu5_36",
|
|
18
|
+
"primary": "_primary_mxpu5_40",
|
|
19
|
+
"secondary": "_secondary_mxpu5_47",
|
|
20
|
+
"tertiary": "_tertiary_mxpu5_54",
|
|
21
|
+
"quaternary": "_quaternary_mxpu5_62",
|
|
22
|
+
"quinary": "_quinary_mxpu5_75",
|
|
23
|
+
"negative": "_negative_mxpu5_87",
|
|
24
|
+
"ghost": "_ghost_mxpu5_94",
|
|
25
|
+
"cta": "_cta_mxpu5_117",
|
|
26
|
+
"l": "_l_mxpu5_125",
|
|
27
|
+
"m": "_m_mxpu5_133",
|
|
28
|
+
"s": "_s_mxpu5_47",
|
|
29
|
+
"align-center": "_align-center_mxpu5_151",
|
|
30
|
+
"align-space-between": "_align-space-between_mxpu5_155",
|
|
31
|
+
"neutral-primary": "_neutral-primary_mxpu5_159",
|
|
32
|
+
"inverse-primary": "_inverse-primary_mxpu5_164",
|
|
33
|
+
"inverse-static-primary": "_inverse-static-primary_mxpu5_168"
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
// src/components/Button/index.tsx
|
|
@@ -46,8 +46,11 @@ var defaultButtonVariants = cva([style_module_default.button, style_module_defau
|
|
|
46
46
|
tertiary: style_module_default.tertiary,
|
|
47
47
|
quaternary: style_module_default.quaternary,
|
|
48
48
|
quinary: style_module_default.quinary,
|
|
49
|
-
negative: style_module_default.negative
|
|
50
|
-
|
|
49
|
+
negative: style_module_default.negative
|
|
50
|
+
},
|
|
51
|
+
fill: {
|
|
52
|
+
solid: style_module_default.button,
|
|
53
|
+
ghost: style_module_default.ghost
|
|
51
54
|
},
|
|
52
55
|
align: {
|
|
53
56
|
center: style_module_default["align-center"],
|
|
@@ -86,31 +89,27 @@ var iconButtonVariants = cva([style_module_default.button, style_module_default.
|
|
|
86
89
|
}
|
|
87
90
|
});
|
|
88
91
|
var DefaultButton = forwardRef(
|
|
89
|
-
({ as = "default", asChild = false, level = "primary", align = "center", size = "cta", ...rest }, ref) => {
|
|
90
|
-
|
|
91
|
-
return /* @__PURE__ */ jsx(Comp, { ...rest, className: clsx(defaultButtonVariants({ level, align, size })), ref });
|
|
92
|
+
({ as = "default", asChild = false, level = "primary", fill = "solid", align = "center", size = "cta", ...rest }, ref) => {
|
|
93
|
+
return /* @__PURE__ */ jsx("button", { ...rest, className: clsx(defaultButtonVariants({ level, fill, align, size })), ref });
|
|
92
94
|
}
|
|
93
95
|
);
|
|
94
96
|
var TextButton = forwardRef(
|
|
95
97
|
({ as = "text", asChild = false, level = "inversePrimary", ...rest }, ref) => {
|
|
96
|
-
|
|
97
|
-
return /* @__PURE__ */ jsx(Comp, { ...rest, className: clsx(textButtonVariants({ level })), ref });
|
|
98
|
+
return /* @__PURE__ */ jsx("button", { ...rest, className: clsx(textButtonVariants({ level })), ref });
|
|
98
99
|
}
|
|
99
100
|
);
|
|
100
101
|
var IconButton = forwardRef((props, ref) => {
|
|
101
|
-
|
|
102
|
-
return /* @__PURE__ */ jsx(Comp, { ...props, className: clsx(iconButtonVariants({ level: props.level })), ref });
|
|
102
|
+
return /* @__PURE__ */ jsx("button", { ...props, className: clsx(iconButtonVariants({ level: props.level })), ref });
|
|
103
103
|
});
|
|
104
104
|
var Button = forwardRef((props, ref) => {
|
|
105
|
-
const Comp = props.asChild ? Slot : "button";
|
|
106
105
|
switch (props.as) {
|
|
107
106
|
case "default":
|
|
108
107
|
case void 0:
|
|
109
|
-
const
|
|
110
|
-
return /* @__PURE__ */ jsx(
|
|
108
|
+
const DefaultComp = props.asChild ? Slot : DefaultButton;
|
|
109
|
+
return /* @__PURE__ */ jsx(DefaultComp, { ...props, ref });
|
|
111
110
|
case "text":
|
|
112
|
-
const
|
|
113
|
-
return /* @__PURE__ */ jsx(
|
|
111
|
+
const TextComp = props.asChild ? Slot : TextButton;
|
|
112
|
+
return /* @__PURE__ */ jsx(TextComp, { ...props, ref });
|
|
114
113
|
}
|
|
115
114
|
});
|
|
116
115
|
export {
|
package/lib/index.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/utils/object.ts", "../src/components/Button/index.tsx", "../src/components/Button/style.module.scss"],
|
|
4
|
-
"sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n
|
|
5
|
-
"mappings": ";;;;AAAO,IAAM,gBAAgB,wBAAgC,QAAW;AACtE,SAAO,OAAO,QAAQ,GAAG;AAC3B,GAF6B;;;ACA7B,SAA+B,kBAAkB;;;ACAU,IAAO,uBAAQ;AAAA,EACxE,UAAU;AAAA,EACV,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,
|
|
4
|
+
"sourcesContent": ["export const objectToArray = <T extends Record<string, any>>(obj: T) => {\n return Object.entries(obj);\n};\n", "import { ButtonHTMLAttributes, forwardRef } from 'react';\n\nimport style from './style.module.scss';\nimport { VariantProps, cva } from 'class-variance-authority';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nconst defaultButtonVariants = cva([style.button, style.default], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n fill: {\n solid: style.button,\n ghost: style.ghost,\n },\n align: {\n center: style['align-center'],\n spaceBetween: style['align-space-between'],\n },\n size: {\n cta: style.cta,\n l: style.l,\n m: style.m,\n s: style.s,\n },\n },\n});\n\nconst textButtonVariants = cva([style.button, style.text], {\n variants: {\n level: {\n inversePrimary: style['inverse-primary'],\n neutralPrimary: style['neutral-primary'],\n inverseStaticPrimary: style['inverse-static-primary'],\n },\n },\n});\nconst iconButtonVariants = cva([style.button, style.icon], {\n variants: {\n level: {\n primary: style.primary,\n secondary: style.secondary,\n tertiary: style.tertiary,\n quaternary: style.quaternary,\n quinary: style.quinary,\n negative: style.negative,\n },\n weight: {\n //\n },\n },\n});\n\ninterface CommonButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n as?: 'default' | 'text' | 'icon';\n asChild?: boolean;\n}\n\nexport type FillType = 'solid' | 'ghost';\nexport type SolidLevelType = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary' | 'negative';\nexport type GhostLevelType = 'primary' | 'secondary';\ntype LevelType<T> = T extends 'solid' ? SolidLevelType : GhostLevelType;\nexport interface DefaultButtonProps<T extends FillType>\n extends CommonButtonProps,\n VariantProps<typeof defaultButtonVariants> {\n as?: 'default';\n asChild?: boolean;\n level?: LevelType<T>;\n fill?: T;\n size?: 'cta' | 'l' | 'm' | 's';\n align?: 'center' | 'spaceBetween';\n // isLoading?: boolean;\n // leftIcon?: ReactNode;\n // rightIcon?: ReactNode;\n}\n\ntype TextLevelType = 'inversePrimary' | 'neutralPrimary' | 'inverseStaticPrimary';\nexport interface TextButtonProps extends CommonButtonProps, VariantProps<typeof textButtonVariants> {\n as: 'text';\n asChild?: boolean;\n level?: TextLevelType;\n}\nexport interface IconButtonProps extends CommonButtonProps, VariantProps<typeof iconButtonVariants> {\n as: 'icon';\n asChild?: boolean;\n // weight\n}\nexport type ButtonProps = DefaultButtonProps<FillType> | TextButtonProps | IconButtonProps;\n\n/**\n * \uBC84\uD2BC \uCEF4\uD3EC\uB10C\uD2B8\n */\nexport const DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonProps<FillType>>(\n (\n { as = 'default', asChild = false, level = 'primary', fill = 'solid', align = 'center', size = 'cta', ...rest },\n ref\n ) => {\n return <button {...rest} className={clsx(defaultButtonVariants({ level, fill, align, size }))} ref={ref} />;\n }\n);\n\nexport const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(\n ({ as = 'text', asChild = false, level = 'inversePrimary', ...rest }, ref) => {\n return <button {...rest} className={clsx(textButtonVariants({ level }))} ref={ref} />;\n }\n);\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {\n return <button {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n switch (props.as) {\n case 'default':\n case undefined:\n const DefaultComp = props.asChild ? Slot : DefaultButton;\n return <DefaultComp {...props} ref={ref} />;\n case 'text':\n const TextComp = props.asChild ? Slot : TextButton;\n return <TextComp {...props} ref={ref} />;\n // case 'icon':\n // return <Comp {...props} className={clsx(iconButtonVariants({ level: props.level }))} ref={ref} />;\n }\n});\n", "import 'css-chunk:src/components/Button/style.module.scss';export default {\n \"button\": \"_button_mxpu5_1\",\n \"default\": \"_default_mxpu5_20\",\n \"text\": \"_text_mxpu5_25\",\n \"icon\": \"_icon_mxpu5_36\",\n \"primary\": \"_primary_mxpu5_40\",\n \"secondary\": \"_secondary_mxpu5_47\",\n \"tertiary\": \"_tertiary_mxpu5_54\",\n \"quaternary\": \"_quaternary_mxpu5_62\",\n \"quinary\": \"_quinary_mxpu5_75\",\n \"negative\": \"_negative_mxpu5_87\",\n \"ghost\": \"_ghost_mxpu5_94\",\n \"cta\": \"_cta_mxpu5_117\",\n \"l\": \"_l_mxpu5_125\",\n \"m\": \"_m_mxpu5_133\",\n \"s\": \"_s_mxpu5_47\",\n \"align-center\": \"_align-center_mxpu5_151\",\n \"align-space-between\": \"_align-space-between_mxpu5_155\",\n \"neutral-primary\": \"_neutral-primary_mxpu5_159\",\n \"inverse-primary\": \"_inverse-primary_mxpu5_164\",\n \"inverse-static-primary\": \"_inverse-static-primary_mxpu5_168\"\n};"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|