@nattui/react-components 0.0.4 → 0.0.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.
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
position: relative;
|
|
22
22
|
transition-duration: 150ms;
|
|
23
23
|
transition-property:
|
|
24
|
-
background-color, box-shadow,
|
|
24
|
+
background-color, border-color, box-shadow, color, opacity, scale;
|
|
25
25
|
user-select: none;
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -34,12 +34,17 @@
|
|
|
34
34
|
outline-width: 2px;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.button:enabled[aria-pressed="true"],
|
|
38
|
+
.button:enabled:active {
|
|
39
|
+
scale: 0.985;
|
|
40
|
+
}
|
|
41
|
+
|
|
37
42
|
/* Active children */
|
|
38
43
|
.button:enabled[aria-pressed="true"] > *,
|
|
39
44
|
.button:enabled:active > * {
|
|
40
|
-
transform: translateY(1px);
|
|
41
45
|
transition-duration: 150ms;
|
|
42
|
-
transition-property:
|
|
46
|
+
transition-property: translate;
|
|
47
|
+
translate: 0 1px;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
/* Disable child shadow */
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
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-PKQOSOKP.module.css');
|
|
7
7
|
|
|
8
8
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
9
|
|
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,
|
|
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\">, \"aria-pressed\" | \"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
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-PKQOSOKP.module.css';
|
|
5
5
|
|
|
6
6
|
// src/button-background.tsx
|
|
7
7
|
function ButtonBackground(props) {
|
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,
|
|
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\">, \"aria-pressed\" | \"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
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nattui/react-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "A collection of reusable React components built with TypeScript and CSS Modules",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
7
|
-
"react"
|
|
7
|
+
"react",
|
|
8
|
+
"ui"
|
|
8
9
|
],
|
|
9
10
|
"homepage": "https://github.com/nattui/react-components#readme",
|
|
10
11
|
"bugs": {
|
|
@@ -21,21 +22,21 @@
|
|
|
21
22
|
"module": "./dist/index.js",
|
|
22
23
|
"types": "./dist/index.d.ts",
|
|
23
24
|
"devDependencies": {
|
|
24
|
-
"@eslint/js": "^9.
|
|
25
|
-
"@types/react": "^19.1.
|
|
26
|
-
"eslint": "^9.
|
|
27
|
-
"eslint-plugin-perfectionist": "^4.
|
|
25
|
+
"@eslint/js": "^9.32.0",
|
|
26
|
+
"@types/react": "^19.1.9",
|
|
27
|
+
"eslint": "^9.32.0",
|
|
28
|
+
"eslint-plugin-perfectionist": "^4.15.0",
|
|
28
29
|
"eslint-plugin-react": "^7.37.5",
|
|
29
30
|
"eslint-plugin-unicorn": "^59.0.1",
|
|
30
31
|
"eslint-plugin-unused-imports": "^4.1.4",
|
|
31
|
-
"globals": "^16.
|
|
32
|
-
"prettier": "^3.
|
|
32
|
+
"globals": "^16.3.0",
|
|
33
|
+
"prettier": "^3.6.2",
|
|
33
34
|
"prettier-plugin-css-order": "^2.1.2",
|
|
34
|
-
"prettier-plugin-packagejson": "^2.5.
|
|
35
|
+
"prettier-plugin-packagejson": "^2.5.19",
|
|
35
36
|
"prettier-plugin-sort-json": "^4.1.1",
|
|
36
37
|
"tsup": "^8.5.0",
|
|
37
|
-
"typescript": "^5.
|
|
38
|
-
"typescript-eslint": "^8.
|
|
38
|
+
"typescript": "^5.9.2",
|
|
39
|
+
"typescript-eslint": "^8.38.0"
|
|
39
40
|
},
|
|
40
41
|
"peerDependencies": {
|
|
41
42
|
"react": "^18.0.0 || ^19.0.0",
|
package/src/button.module.css
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
position: relative;
|
|
22
22
|
transition-duration: 150ms;
|
|
23
23
|
transition-property:
|
|
24
|
-
background-color, box-shadow,
|
|
24
|
+
background-color, border-color, box-shadow, color, opacity, scale;
|
|
25
25
|
user-select: none;
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -34,12 +34,17 @@
|
|
|
34
34
|
outline-width: 2px;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
+
.button:enabled[aria-pressed="true"],
|
|
38
|
+
.button:enabled:active {
|
|
39
|
+
scale: 0.985;
|
|
40
|
+
}
|
|
41
|
+
|
|
37
42
|
/* Active children */
|
|
38
43
|
.button:enabled[aria-pressed="true"] > *,
|
|
39
44
|
.button:enabled:active > * {
|
|
40
|
-
transform: translateY(1px);
|
|
41
45
|
transition-duration: 150ms;
|
|
42
|
-
transition-property:
|
|
46
|
+
transition-property: translate;
|
|
47
|
+
translate: 0 1px;
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
/* Disable child shadow */
|