@nattui/react-components 0.0.2 → 0.0.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/.turbo/turbo-build.log +15 -19
- package/dist/{button-background.module-LVDVMB6Z.module.css → button-background.module-T5B7XZ2Z.module.css} +2 -1
- package/dist/{button.module-65N3HOPU.module.css → button.module-N3Y5HX7N.module.css} +12 -4
- package/dist/index.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +6 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/button-background.module.css +2 -1
- package/src/button.module.css +12 -4
- package/src/button.tsx +8 -3
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
> @nattui/react-components@0.0.
|
|
3
|
+
> @nattui/react-components@0.0.3 build /Users/snowshift/Documents/3-github/react-components/packages/ui
|
|
4
4
|
> tsup
|
|
5
5
|
|
|
6
6
|
[34mCLI[39m Building entry: src/index.ts
|
|
@@ -11,23 +11,19 @@
|
|
|
11
11
|
[34mCLI[39m Cleaning output folder
|
|
12
12
|
[34mESM[39m Build start
|
|
13
13
|
[34mCJS[39m Build start
|
|
14
|
-
|
|
15
|
-
"default" is imported from external module "./button-spinner.module-4TBETQ4T.module.css" but never used in "dist/index.js".
|
|
16
|
-
"Fragment", "jsx" and "jsxs" are imported from external module "react/jsx-runtime" but never used in "dist/index.mjs".
|
|
17
|
-
"default" is imported from external module "./button-spinner.module-4TBETQ4T.module.css" but never used in "dist/index.mjs".
|
|
18
|
-
[32mESM[39m [1mdist/button-spinner.module-4TBETQ4T.module.css [22m[32m1.49 KB[39m
|
|
19
|
-
[32mESM[39m [1mdist/button-background.module-LVDVMB6Z.module.css [22m[32m667.00 B[39m
|
|
20
|
-
[32mESM[39m [1mdist/button.module-65N3HOPU.module.css [22m[32m5.60 KB[39m
|
|
21
|
-
[32mESM[39m [1mdist/index.mjs [22m[32m1.22 KB[39m
|
|
22
|
-
[32mESM[39m [1mdist/index.mjs.map [22m[32m4.87 KB[39m
|
|
23
|
-
[32mESM[39m ⚡️ Build success in 60ms
|
|
14
|
+
[32mCJS[39m [1mdist/button-background.module-T5B7XZ2Z.module.css [22m[32m702.00 B[39m
|
|
24
15
|
[32mCJS[39m [1mdist/button-spinner.module-4TBETQ4T.module.css [22m[32m1.49 KB[39m
|
|
25
|
-
[32mCJS[39m [1mdist/button.module-
|
|
26
|
-
[32mCJS[39m [1mdist/
|
|
27
|
-
[32mCJS[39m [1mdist/index.js
|
|
28
|
-
[32mCJS[39m
|
|
29
|
-
[
|
|
16
|
+
[32mCJS[39m [1mdist/button.module-N3Y5HX7N.module.css [22m[32m5.83 KB[39m
|
|
17
|
+
[32mCJS[39m [1mdist/index.js [22m[32m4.26 KB[39m
|
|
18
|
+
[32mCJS[39m [1mdist/index.js.map [22m[32m7.92 KB[39m
|
|
19
|
+
[32mCJS[39m ⚡️ Build success in 76ms
|
|
20
|
+
[32mESM[39m [1mdist/button.module-N3Y5HX7N.module.css [22m[32m5.83 KB[39m
|
|
21
|
+
[32mESM[39m [1mdist/button-background.module-T5B7XZ2Z.module.css [22m[32m702.00 B[39m
|
|
22
|
+
[32mESM[39m [1mdist/button-spinner.module-4TBETQ4T.module.css [22m[32m1.49 KB[39m
|
|
23
|
+
[32mESM[39m [1mdist/index.mjs [22m[32m3.53 KB[39m
|
|
24
|
+
[32mESM[39m [1mdist/index.mjs.map [22m[32m7.87 KB[39m
|
|
25
|
+
[32mESM[39m ⚡️ Build success in 77ms
|
|
30
26
|
DTS Build start
|
|
31
|
-
DTS ⚡️ Build success in
|
|
32
|
-
DTS dist/index.d.mts
|
|
33
|
-
DTS dist/index.d.ts
|
|
27
|
+
DTS ⚡️ Build success in 698ms
|
|
28
|
+
DTS dist/index.d.mts 1.37 KB
|
|
29
|
+
DTS dist/index.d.ts 1.37 KB
|
|
@@ -13,11 +13,15 @@
|
|
|
13
13
|
font-weight: 500;
|
|
14
14
|
justify-content: safe center;
|
|
15
15
|
line-height: 1.5;
|
|
16
|
+
outline-color: var(--color-primary-9, #e93d82);
|
|
17
|
+
outline-offset: 2px;
|
|
18
|
+
outline-style: solid;
|
|
16
19
|
outline-width: 0;
|
|
17
20
|
overflow: hidden;
|
|
18
21
|
position: relative;
|
|
19
22
|
transition-duration: 150ms;
|
|
20
|
-
transition-property:
|
|
23
|
+
transition-property:
|
|
24
|
+
background-color, box-shadow, border-color, color, opacity;
|
|
21
25
|
user-select: none;
|
|
22
26
|
}
|
|
23
27
|
|
|
@@ -26,7 +30,11 @@
|
|
|
26
30
|
opacity: 0.5;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
.button:focus-visible {
|
|
34
|
+
outline-width: 2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Active children */
|
|
30
38
|
.button:enabled[aria-pressed="true"] > *,
|
|
31
39
|
.button:enabled:active > * {
|
|
32
40
|
transform: translateY(1px);
|
|
@@ -126,7 +134,7 @@
|
|
|
126
134
|
.button__variant_accent:enabled:active {
|
|
127
135
|
box-shadow:
|
|
128
136
|
inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
|
|
129
|
-
inset 0 1px 0 0
|
|
137
|
+
inset 0 1px 0 0 var(--color-primary-11, #d31e66) !important;
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
/* Ghost */
|
|
@@ -168,7 +176,7 @@
|
|
|
168
176
|
.button__variant_primary:enabled:active {
|
|
169
177
|
box-shadow:
|
|
170
178
|
inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
|
|
171
|
-
inset 0 1px 0 0
|
|
179
|
+
inset 0 1px 0 0 var(--color-gray-12, #1a1523) !important;
|
|
172
180
|
}
|
|
173
181
|
|
|
174
182
|
/* Secondary */
|
package/dist/index.d.mts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ComponentProps, ReactNode, JSX } from 'react';
|
|
2
2
|
|
|
3
|
-
interface ButtonProps extends ComponentProps<"button"> {
|
|
3
|
+
interface ButtonProps extends Omit<ComponentProps<"button">, "disabled"> {
|
|
4
4
|
fullWidth?: boolean;
|
|
5
5
|
iconEnd?: ReactNode;
|
|
6
6
|
iconOnly?: boolean;
|
|
7
7
|
iconStart?: ReactNode;
|
|
8
|
+
isActive?: boolean;
|
|
9
|
+
isDisabled?: boolean;
|
|
8
10
|
isLoading?: boolean;
|
|
9
11
|
rounded?: boolean;
|
|
10
12
|
size?: 32 | 36 | 40 | 48;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { ComponentProps, ReactNode, JSX } from 'react';
|
|
2
2
|
|
|
3
|
-
interface ButtonProps extends ComponentProps<"button"> {
|
|
3
|
+
interface ButtonProps extends Omit<ComponentProps<"button">, "disabled"> {
|
|
4
4
|
fullWidth?: boolean;
|
|
5
5
|
iconEnd?: ReactNode;
|
|
6
6
|
iconOnly?: boolean;
|
|
7
7
|
iconStart?: ReactNode;
|
|
8
|
+
isActive?: boolean;
|
|
9
|
+
isDisabled?: boolean;
|
|
8
10
|
isLoading?: boolean;
|
|
9
11
|
rounded?: boolean;
|
|
10
12
|
size?: 32 | 36 | 40 | 48;
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var styles = require('./button-background.module-
|
|
3
|
+
var styles = require('./button-background.module-T5B7XZ2Z.module.css');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var styles2 = require('./button-spinner.module-4TBETQ4T.module.css');
|
|
6
|
-
var styles3 = require('./button.module-
|
|
6
|
+
var styles3 = require('./button.module-N3Y5HX7N.module.css');
|
|
7
7
|
|
|
8
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
|
|
@@ -55,11 +55,12 @@ function Button(props) {
|
|
|
55
55
|
const {
|
|
56
56
|
children = "",
|
|
57
57
|
className: customClassName = "",
|
|
58
|
-
disabled = false,
|
|
59
58
|
fullWidth = false,
|
|
60
59
|
iconEnd = "",
|
|
61
60
|
iconOnly = false,
|
|
62
61
|
iconStart = "",
|
|
62
|
+
isActive = false,
|
|
63
|
+
isDisabled = false,
|
|
63
64
|
isLoading = false,
|
|
64
65
|
rounded = false,
|
|
65
66
|
size = 36,
|
|
@@ -79,8 +80,9 @@ function Button(props) {
|
|
|
79
80
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
80
81
|
"button",
|
|
81
82
|
{
|
|
83
|
+
"aria-pressed": isActive,
|
|
82
84
|
className: combinedClassName,
|
|
83
|
-
disabled:
|
|
85
|
+
disabled: isDisabled || isLoading,
|
|
84
86
|
type,
|
|
85
87
|
...rest,
|
|
86
88
|
children: [
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx"],"names":["jsx","Fragment","styles","jsxs"],"mappings":";;;;;;;;;;;;;;AAOO,SAAS,iBAAiB,KAA2C,EAAA;AAC1E,EAAA,MAAM,EAAE,OAAA,GAAU,KAAO,EAAA,OAAA,GAAU,WAAc,GAAA,KAAA;AAEjD,EAAA,MAAM,wBAA2B,GAAA;AAAA,IAAA,EAC7B,6BAA6B,IAAI;AAAA,IAAA,EACjC,UAAU,4BAA6B,CAAA,OAAA,CAAQ,IAAO,GAAA,4BAAA,CAA6B,QAAQ,IAAI;AAAA,IAAA,EAC/F,OAAY,KAAA,QAAA,GAAW,4BAA6B,CAAA,OAAA,CAAQ,SAAS,EAAE;AAAA,IAAA,EACvE,OAAY,KAAA,SAAA,GAAY,4BAA6B,CAAA,OAAA,CAAQ,UAAU,EAAE;AAAA,EAAA,CAAA,CAE1E,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA,CACtB,IAAK,EAAA;AAER,EAAA,IAAI,EAAE,OAAY,KAAA,QAAA,IAAY,OAAY,KAAA,SAAA,CAAA,yBAAqBA,cAAA,CAAAC,mBAAA,EAAA,EAAA,CAAA;AAE/D,EACE,uBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,wBAAA;AAAA,MACX,cAAa,EAAA;AAAA;AAAA,GACf;AAEJ;AAEO,IAAM,4BAA+B,GAAA;AAAA,EAC1C,MAAME,uBAAO,CAAA,iBAAA;AAAA,EACb,OAAS,EAAA;AAAA,IACP,MAAMA,uBAAO,CAAA,+BAAA;AAAA,IACb,MAAMA,uBAAO,CAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,QAAQA,uBAAO,CAAA,iCAAA;AAAA,IACf,SAASA,uBAAO,CAAA;AAAA;AAEpB,CAAA;AChCO,SAAS,cAAc,KAAwC,EAAA;AACpE,EAAM,MAAA,EAAE,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA;AAEtB,EAAA,uBACEF,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAWE,wBAAO,CAAA,cAAA;AAAA,MAClB,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAG,IAAI,CAAK,EAAA,CAAA,EAAA;AAAA,MAE9B,QAAM,EAAA,KAAA,CAAA,IAAA,CAAK,EAAE,MAAA,EAAQ,IAAI,CAAA,CAAE,GAAI,CAAA,CAAC,GAAG,KAClC,qBAAAF,cAAC,CAAA,KAAA,EAAA,EAAA,EAAS,KAAO,CAClB;AAAA;AAAA,GACH;AAEJ;
|
|
1
|
+
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx"],"names":["jsx","Fragment","styles","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import type { JSX } from \"react\"\nimport type { ButtonProps } from \"@/button\"\nimport styles from \"@/button-background.module.css\"\n\nexport interface ButtonBackgroundProps\n extends Pick<ButtonProps, \"rounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n const { rounded = false, variant = \"primary\" } = props\n\n const combinedBackgroundStyles = `\n ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n ${rounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}\n ${variant === \"accent\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : \"\"}\n ${variant === \"primary\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : \"\"}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n if (!(variant === \"accent\" || variant === \"primary\")) return <></>\n\n return (\n <div\n className={combinedBackgroundStyles}\n data-element=\"button-background\"\n />\n )\n}\n\nexport const BUTTON_BACKGROUND_CLASS_NAME = {\n BASE: styles.button_background,\n ROUNDED: {\n BASE: styles.button_background__rounded_base,\n FULL: styles.button_background__rounded_full,\n },\n VARIANT: {\n ACCENT: styles.button_background__variant_accent,\n PRIMARY: styles.button_background__variant_primary,\n },\n} as const\n","import type { CSSProperties, JSX } from \"react\"\nimport styles from \"@/button-spinner.module.css\"\n\nexport interface ButtonSpinnerProps {\n size?: number\n}\n\nexport function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {\n const { size = 16 } = props\n\n return (\n <div\n className={styles.button_spinner}\n style={{ \"--size\": `${size}px` } as CSSProperties}\n >\n {Array.from({ length: 12 }).map((_, index) => (\n <div key={index} />\n ))}\n </div>\n )\n}\n","import type { ComponentProps, JSX, ReactNode } from \"react\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\nimport styles from \"@/button.module.css\"\n\nexport interface ButtonProps\n extends Omit<ComponentProps<\"button\">, \"disabled\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\n isActive?: boolean\n isDisabled?: boolean\n isLoading?: boolean\n rounded?: boolean\n size?: 32 | 36 | 40 | 48\n variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ntype ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText\n\ninterface ButtonPropsWithIcon extends ButtonProps {\n children?: ReactNode\n iconOnly: true\n}\n\ninterface ButtonPropsWithText extends ButtonProps {\n children?: string\n iconOnly?: false\n}\n\nexport function Button(props: ButtonPropsInternal): JSX.Element {\n const {\n children = \"\",\n className: customClassName = \"\",\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\n isActive = false,\n isDisabled = false,\n isLoading = false,\n rounded = false,\n size = 36,\n type = \"button\",\n variant = \"primary\",\n ...rest\n } = props\n\n const combinedClassName = `\n ${BUTTON_CLASS_NAME.BASE}\n ${BUTTON_CLASS_NAME.SIZE[size]}\n ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}\n ${fullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n ${rounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <button\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled || isLoading}\n type={type}\n {...rest}\n >\n <ButtonBackground rounded={rounded} variant={variant} />\n {isLoading && <ButtonSpinner />}\n {!isLoading && iconStart}\n {iconOnly ? children : <span>{children}</span>}\n {!isLoading && iconEnd}\n </button>\n )\n}\n\nexport const BUTTON_CLASS_NAME = {\n BASE: styles.button,\n ICON_ONLY: styles.button__icon_only,\n ROUNDED: {\n BASE: styles.button__rounded_base,\n FULL: styles.button__rounded_full,\n },\n SIZE: {\n 32: styles.button__size_32,\n 36: styles.button__size_36,\n 40: styles.button__size_40,\n 48: styles.button__size_48,\n },\n VARIANT: {\n ACCENT: styles.button__variant_accent,\n GHOST: styles.button__variant_ghost,\n PRIMARY: styles.button__variant_primary,\n SECONDARY: styles.button__variant_secondary,\n },\n WIDTH: {\n BASE: styles.button__width_base,\n FULL: styles.button__width_full,\n },\n} as const\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import styles from './button-background.module-
|
|
1
|
+
import styles from './button-background.module-T5B7XZ2Z.module.css';
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import styles2 from './button-spinner.module-4TBETQ4T.module.css';
|
|
4
|
-
import styles3 from './button.module-
|
|
4
|
+
import styles3 from './button.module-N3Y5HX7N.module.css';
|
|
5
5
|
|
|
6
6
|
// src/button-background.tsx
|
|
7
7
|
function ButtonBackground(props) {
|
|
@@ -47,11 +47,12 @@ function Button(props) {
|
|
|
47
47
|
const {
|
|
48
48
|
children = "",
|
|
49
49
|
className: customClassName = "",
|
|
50
|
-
disabled = false,
|
|
51
50
|
fullWidth = false,
|
|
52
51
|
iconEnd = "",
|
|
53
52
|
iconOnly = false,
|
|
54
53
|
iconStart = "",
|
|
54
|
+
isActive = false,
|
|
55
|
+
isDisabled = false,
|
|
55
56
|
isLoading = false,
|
|
56
57
|
rounded = false,
|
|
57
58
|
size = 36,
|
|
@@ -71,8 +72,9 @@ function Button(props) {
|
|
|
71
72
|
return /* @__PURE__ */ jsxs(
|
|
72
73
|
"button",
|
|
73
74
|
{
|
|
75
|
+
"aria-pressed": isActive,
|
|
74
76
|
className: combinedClassName,
|
|
75
|
-
disabled:
|
|
77
|
+
disabled: isDisabled || isLoading,
|
|
76
78
|
type,
|
|
77
79
|
...rest,
|
|
78
80
|
children: [
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx"],"names":["jsx","styles"],"mappings":";;;;;;AAOO,SAAS,iBAAiB,KAA2C,EAAA;AAC1E,EAAA,MAAM,EAAE,OAAA,GAAU,KAAO,EAAA,OAAA,GAAU,WAAc,GAAA,KAAA;AAEjD,EAAA,MAAM,wBAA2B,GAAA;AAAA,IAAA,EAC7B,6BAA6B,IAAI;AAAA,IAAA,EACjC,UAAU,4BAA6B,CAAA,OAAA,CAAQ,IAAO,GAAA,4BAAA,CAA6B,QAAQ,IAAI;AAAA,IAAA,EAC/F,OAAY,KAAA,QAAA,GAAW,4BAA6B,CAAA,OAAA,CAAQ,SAAS,EAAE;AAAA,IAAA,EACvE,OAAY,KAAA,SAAA,GAAY,4BAA6B,CAAA,OAAA,CAAQ,UAAU,EAAE;AAAA,EAAA,CAAA,CAE1E,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA,CACtB,IAAK,EAAA;AAER,EAAA,IAAI,EAAE,OAAY,KAAA,QAAA,IAAY,OAAY,KAAA,SAAA,CAAA,yBAAqB,GAAA,CAAA,QAAA,EAAA,EAAA,CAAA;AAE/D,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,wBAAA;AAAA,MACX,cAAa,EAAA;AAAA;AAAA,GACf;AAEJ;AAEO,IAAM,4BAA+B,GAAA;AAAA,EAC1C,MAAM,MAAO,CAAA,iBAAA;AAAA,EACb,OAAS,EAAA;AAAA,IACP,MAAM,MAAO,CAAA,+BAAA;AAAA,IACb,MAAM,MAAO,CAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,QAAQ,MAAO,CAAA,iCAAA;AAAA,IACf,SAAS,MAAO,CAAA;AAAA;AAEpB,CAAA;AChCO,SAAS,cAAc,KAAwC,EAAA;AACpE,EAAM,MAAA,EAAE,IAAO,GAAA,EAAA,EAAO,GAAA,KAAA;AAEtB,EAAA,uBACEA,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAWC,OAAO,CAAA,cAAA;AAAA,MAClB,KAAO,EAAA,EAAE,QAAU,EAAA,CAAA,EAAG,IAAI,CAAK,EAAA,CAAA,EAAA;AAAA,MAE9B,QAAM,EAAA,KAAA,CAAA,IAAA,CAAK,EAAE,MAAA,EAAQ,IAAI,CAAA,CAAE,GAAI,CAAA,CAAC,GAAG,KAClC,qBAAAD,GAAC,CAAA,KAAA,EAAA,EAAA,EAAS,KAAO,CAClB;AAAA;AAAA,GACH;AAEJ;
|
|
1
|
+
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx"],"names":["jsx","styles"],"mappings":"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","file":"index.mjs","sourcesContent":["import type { JSX } from \"react\"\nimport type { ButtonProps } from \"@/button\"\nimport styles from \"@/button-background.module.css\"\n\nexport interface ButtonBackgroundProps\n extends Pick<ButtonProps, \"rounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n const { rounded = false, variant = \"primary\" } = props\n\n const combinedBackgroundStyles = `\n ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n ${rounded ? BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.FULL : BUTTON_BACKGROUND_CLASS_NAME.ROUNDED.BASE}\n ${variant === \"accent\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.ACCENT : \"\"}\n ${variant === \"primary\" ? BUTTON_BACKGROUND_CLASS_NAME.VARIANT.PRIMARY : \"\"}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n if (!(variant === \"accent\" || variant === \"primary\")) return <></>\n\n return (\n <div\n className={combinedBackgroundStyles}\n data-element=\"button-background\"\n />\n )\n}\n\nexport const BUTTON_BACKGROUND_CLASS_NAME = {\n BASE: styles.button_background,\n ROUNDED: {\n BASE: styles.button_background__rounded_base,\n FULL: styles.button_background__rounded_full,\n },\n VARIANT: {\n ACCENT: styles.button_background__variant_accent,\n PRIMARY: styles.button_background__variant_primary,\n },\n} as const\n","import type { CSSProperties, JSX } from \"react\"\nimport styles from \"@/button-spinner.module.css\"\n\nexport interface ButtonSpinnerProps {\n size?: number\n}\n\nexport function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {\n const { size = 16 } = props\n\n return (\n <div\n className={styles.button_spinner}\n style={{ \"--size\": `${size}px` } as CSSProperties}\n >\n {Array.from({ length: 12 }).map((_, index) => (\n <div key={index} />\n ))}\n </div>\n )\n}\n","import type { ComponentProps, JSX, ReactNode } from \"react\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\nimport styles from \"@/button.module.css\"\n\nexport interface ButtonProps\n extends Omit<ComponentProps<\"button\">, \"disabled\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\n isActive?: boolean\n isDisabled?: boolean\n isLoading?: boolean\n rounded?: boolean\n size?: 32 | 36 | 40 | 48\n variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ntype ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText\n\ninterface ButtonPropsWithIcon extends ButtonProps {\n children?: ReactNode\n iconOnly: true\n}\n\ninterface ButtonPropsWithText extends ButtonProps {\n children?: string\n iconOnly?: false\n}\n\nexport function Button(props: ButtonPropsInternal): JSX.Element {\n const {\n children = \"\",\n className: customClassName = \"\",\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\n isActive = false,\n isDisabled = false,\n isLoading = false,\n rounded = false,\n size = 36,\n type = \"button\",\n variant = \"primary\",\n ...rest\n } = props\n\n const combinedClassName = `\n ${BUTTON_CLASS_NAME.BASE}\n ${BUTTON_CLASS_NAME.SIZE[size]}\n ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}\n ${fullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n ${rounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <button\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled || isLoading}\n type={type}\n {...rest}\n >\n <ButtonBackground rounded={rounded} variant={variant} />\n {isLoading && <ButtonSpinner />}\n {!isLoading && iconStart}\n {iconOnly ? children : <span>{children}</span>}\n {!isLoading && iconEnd}\n </button>\n )\n}\n\nexport const BUTTON_CLASS_NAME = {\n BASE: styles.button,\n ICON_ONLY: styles.button__icon_only,\n ROUNDED: {\n BASE: styles.button__rounded_base,\n FULL: styles.button__rounded_full,\n },\n SIZE: {\n 32: styles.button__size_32,\n 36: styles.button__size_36,\n 40: styles.button__size_40,\n 48: styles.button__size_48,\n },\n VARIANT: {\n ACCENT: styles.button__variant_accent,\n GHOST: styles.button__variant_ghost,\n PRIMARY: styles.button__variant_primary,\n SECONDARY: styles.button__variant_secondary,\n },\n WIDTH: {\n BASE: styles.button__width_base,\n FULL: styles.button__width_full,\n },\n} as const\n"]}
|
package/package.json
CHANGED
package/src/button.module.css
CHANGED
|
@@ -13,11 +13,15 @@
|
|
|
13
13
|
font-weight: 500;
|
|
14
14
|
justify-content: safe center;
|
|
15
15
|
line-height: 1.5;
|
|
16
|
+
outline-color: var(--color-primary-9, #e93d82);
|
|
17
|
+
outline-offset: 2px;
|
|
18
|
+
outline-style: solid;
|
|
16
19
|
outline-width: 0;
|
|
17
20
|
overflow: hidden;
|
|
18
21
|
position: relative;
|
|
19
22
|
transition-duration: 150ms;
|
|
20
|
-
transition-property:
|
|
23
|
+
transition-property:
|
|
24
|
+
background-color, box-shadow, border-color, color, opacity;
|
|
21
25
|
user-select: none;
|
|
22
26
|
}
|
|
23
27
|
|
|
@@ -26,7 +30,11 @@
|
|
|
26
30
|
opacity: 0.5;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
|
-
|
|
33
|
+
.button:focus-visible {
|
|
34
|
+
outline-width: 2px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Active children */
|
|
30
38
|
.button:enabled[aria-pressed="true"] > *,
|
|
31
39
|
.button:enabled:active > * {
|
|
32
40
|
transform: translateY(1px);
|
|
@@ -126,7 +134,7 @@
|
|
|
126
134
|
.button__variant_accent:enabled:active {
|
|
127
135
|
box-shadow:
|
|
128
136
|
inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
|
|
129
|
-
inset 0 1px 0 0
|
|
137
|
+
inset 0 1px 0 0 var(--color-primary-11, #d31e66) !important;
|
|
130
138
|
}
|
|
131
139
|
|
|
132
140
|
/* Ghost */
|
|
@@ -168,7 +176,7 @@
|
|
|
168
176
|
.button__variant_primary:enabled:active {
|
|
169
177
|
box-shadow:
|
|
170
178
|
inset 0 -1px 0 0 rgba(255, 255, 255, 0.25),
|
|
171
|
-
inset 0 1px 0 0
|
|
179
|
+
inset 0 1px 0 0 var(--color-gray-12, #1a1523) !important;
|
|
172
180
|
}
|
|
173
181
|
|
|
174
182
|
/* Secondary */
|
package/src/button.tsx
CHANGED
|
@@ -3,11 +3,14 @@ import { ButtonBackground } from "@/button-background"
|
|
|
3
3
|
import { ButtonSpinner } from "@/button-spinner"
|
|
4
4
|
import styles from "@/button.module.css"
|
|
5
5
|
|
|
6
|
-
export interface ButtonProps
|
|
6
|
+
export interface ButtonProps
|
|
7
|
+
extends Omit<ComponentProps<"button">, "disabled"> {
|
|
7
8
|
fullWidth?: boolean
|
|
8
9
|
iconEnd?: ReactNode
|
|
9
10
|
iconOnly?: boolean
|
|
10
11
|
iconStart?: ReactNode
|
|
12
|
+
isActive?: boolean
|
|
13
|
+
isDisabled?: boolean
|
|
11
14
|
isLoading?: boolean
|
|
12
15
|
rounded?: boolean
|
|
13
16
|
size?: 32 | 36 | 40 | 48
|
|
@@ -30,11 +33,12 @@ export function Button(props: ButtonPropsInternal): JSX.Element {
|
|
|
30
33
|
const {
|
|
31
34
|
children = "",
|
|
32
35
|
className: customClassName = "",
|
|
33
|
-
disabled = false,
|
|
34
36
|
fullWidth = false,
|
|
35
37
|
iconEnd = "",
|
|
36
38
|
iconOnly = false,
|
|
37
39
|
iconStart = "",
|
|
40
|
+
isActive = false,
|
|
41
|
+
isDisabled = false,
|
|
38
42
|
isLoading = false,
|
|
39
43
|
rounded = false,
|
|
40
44
|
size = 36,
|
|
@@ -57,8 +61,9 @@ export function Button(props: ButtonPropsInternal): JSX.Element {
|
|
|
57
61
|
|
|
58
62
|
return (
|
|
59
63
|
<button
|
|
64
|
+
aria-pressed={isActive}
|
|
60
65
|
className={combinedClassName}
|
|
61
|
-
disabled={
|
|
66
|
+
disabled={isDisabled || isLoading}
|
|
62
67
|
type={type}
|
|
63
68
|
{...rest}
|
|
64
69
|
>
|