@nattui/react-components 0.0.13 → 0.0.14
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/index.d.mts +5 -5
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -4
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ComponentProps, ReactNode, JSX } from 'react';
|
|
2
2
|
|
|
3
|
-
interface
|
|
3
|
+
interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
|
|
4
4
|
iconEnd?: ReactNode;
|
|
5
5
|
iconOnly?: boolean;
|
|
6
6
|
iconStart?: ReactNode;
|
|
@@ -12,18 +12,18 @@ interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "d
|
|
|
12
12
|
size?: 32 | 36 | 40 | 44;
|
|
13
13
|
variant?: "accent" | "ghost" | "primary" | "secondary";
|
|
14
14
|
}
|
|
15
|
-
|
|
16
|
-
interface ButtonPropsWithIcon extends ButtonProps {
|
|
15
|
+
interface ButtonPropsWithIcon extends ButtonPropsInternal {
|
|
17
16
|
children?: ReactNode;
|
|
18
17
|
iconEnd?: never;
|
|
19
18
|
iconOnly: true;
|
|
20
19
|
iconStart?: never;
|
|
21
20
|
}
|
|
22
|
-
interface ButtonPropsWithText extends
|
|
21
|
+
interface ButtonPropsWithText extends ButtonPropsInternal {
|
|
23
22
|
children?: string;
|
|
24
23
|
iconOnly?: false;
|
|
25
24
|
}
|
|
26
|
-
|
|
25
|
+
type ButtonProps = ButtonPropsWithIcon | ButtonPropsWithText;
|
|
26
|
+
declare function Button(props: ButtonProps): JSX.Element;
|
|
27
27
|
declare const BUTTON_CLASS_NAME: {
|
|
28
28
|
readonly BASE: string;
|
|
29
29
|
readonly ICON_ONLY: string;
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx","../src/input.tsx","../src/label.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, \"isRounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n const { isRounded = false, variant = \"primary\" } = props\n\n const combinedBackgroundStyles = `\n ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n ${isRounded ? 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 styles from \"@/button.module.css\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\n\nexport interface ButtonProps\n extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\n isActive?: boolean\n isDisabled?: boolean\n isFullWidth?: boolean\n isLoading?: boolean\n isRounded?: boolean\n size?: 32 | 36 | 40 | 44\n variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ntype ButtonPropsInternal = ButtonPropsWithIcon | ButtonPropsWithText\n\ninterface ButtonPropsWithIcon extends ButtonProps {\n children?: ReactNode\n iconEnd?: never\n iconOnly: true\n iconStart?: never\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 iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\n isActive = false,\n isDisabled = false,\n isFullWidth = false,\n isLoading = false,\n isRounded = 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 ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n ${isRounded ? 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 isRounded={isRounded} 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 44: styles.button__size_44,\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","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/input.module.css\"\n\nexport interface InputProps\n extends Omit<\n ComponentProps<\"input\">,\n \"aria-pressed\" | \"disabled\" | \"readOnly\" | \"required\"\n > {\n isActive?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n}\n\nexport function Input(props: InputProps): JSX.Element {\n const {\n className: customClassName = \"\",\n isActive = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n type = \"text\",\n ...rest\n } = props\n\n const isPassword = type === \"password\"\n\n const combinedClassName = `\n ${INPUT_CLASS_NAME.BASE}\n ${isPassword ? INPUT_CLASS_NAME.PASSWORD : \"\"}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <input\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled}\n readOnly={isReadOnly}\n required={isRequired}\n type={type}\n {...rest}\n />\n )\n}\n\nexport const INPUT_CLASS_NAME = {\n BASE: styles.input,\n PASSWORD: styles.input__password,\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/label.module.css\"\n\nexport interface LabelProps extends ComponentProps<\"label\"> {}\n\nexport function Label(props: LabelProps): JSX.Element {\n const { className: customClassName = \"\", ...rest } = props\n\n const combinedClassName = `\n ${LABEL_CLASS_NAME.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return <label className={combinedClassName} {...rest} />\n}\n\nexport const LABEL_CLASS_NAME = {\n BASE: styles.label,\n} as const\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/button-background.tsx","../src/button-spinner.tsx","../src/button.tsx","../src/input.tsx","../src/label.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, \"isRounded\" | \"variant\"> {}\n\nexport function ButtonBackground(props: ButtonBackgroundProps): JSX.Element {\n const { isRounded = false, variant = \"primary\" } = props\n\n const combinedBackgroundStyles = `\n ${BUTTON_BACKGROUND_CLASS_NAME.BASE}\n ${isRounded ? 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 styles from \"@/button.module.css\"\nimport { ButtonBackground } from \"@/button-background\"\nimport { ButtonSpinner } from \"@/button-spinner\"\n\ninterface ButtonPropsInternal\n extends Omit<ComponentProps<\"button\">, \"aria-pressed\" | \"disabled\"> {\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\n isActive?: boolean\n isDisabled?: boolean\n isFullWidth?: boolean\n isLoading?: boolean\n isRounded?: boolean\n size?: 32 | 36 | 40 | 44\n variant?: \"accent\" | \"ghost\" | \"primary\" | \"secondary\"\n}\n\ninterface ButtonPropsWithIcon extends ButtonPropsInternal {\n children?: ReactNode\n iconEnd?: never\n iconOnly: true\n iconStart?: never\n}\n\ninterface ButtonPropsWithText extends ButtonPropsInternal {\n children?: string\n iconOnly?: false\n}\n\nexport type ButtonProps = ButtonPropsWithIcon | ButtonPropsWithText\n\nexport function Button(props: ButtonProps): JSX.Element {\n const {\n children = \"\",\n className: customClassName = \"\",\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\n isActive = false,\n isDisabled = false,\n isFullWidth = false,\n isLoading = false,\n isRounded = 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 ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}\n ${iconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : \"\"}\n ${isRounded ? 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 isRounded={isRounded} 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 44: styles.button__size_44,\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","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/input.module.css\"\n\nexport interface InputProps\n extends Omit<\n ComponentProps<\"input\">,\n \"aria-pressed\" | \"disabled\" | \"readOnly\" | \"required\"\n > {\n isActive?: boolean\n isDisabled?: boolean\n isReadOnly?: boolean\n isRequired?: boolean\n}\n\nexport function Input(props: InputProps): JSX.Element {\n const {\n className: customClassName = \"\",\n isActive = false,\n isDisabled = false,\n isReadOnly = false,\n isRequired = false,\n type = \"text\",\n ...rest\n } = props\n\n const isPassword = type === \"password\"\n\n const combinedClassName = `\n ${INPUT_CLASS_NAME.BASE}\n ${isPassword ? INPUT_CLASS_NAME.PASSWORD : \"\"}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return (\n <input\n aria-pressed={isActive}\n className={combinedClassName}\n disabled={isDisabled}\n readOnly={isReadOnly}\n required={isRequired}\n type={type}\n {...rest}\n />\n )\n}\n\nexport const INPUT_CLASS_NAME = {\n BASE: styles.input,\n PASSWORD: styles.input__password,\n} as const\n","import type { ComponentProps, JSX } from \"react\"\nimport styles from \"@/label.module.css\"\n\nexport interface LabelProps extends ComponentProps<\"label\"> {}\n\nexport function Label(props: LabelProps): JSX.Element {\n const { className: customClassName = \"\", ...rest } = props\n\n const combinedClassName = `\n ${LABEL_CLASS_NAME.BASE}\n ${customClassName}\n `\n .replaceAll(/\\s+/g, \" \")\n .trim()\n\n return <label className={combinedClassName} {...rest} />\n}\n\nexport const LABEL_CLASS_NAME = {\n BASE: styles.label,\n} as const\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nattui/react-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"description": "A collection of reusable React components built with TypeScript and CSS Modules",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"components",
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
"type": "git",
|
|
16
16
|
"url": "git+https://github.com/nattui/react-components.git"
|
|
17
17
|
},
|
|
18
|
-
"license": "MIT",
|
|
19
18
|
"author": "Natt Nguyen <hello@natt.sh> (https://natt.sh)",
|
|
20
19
|
"exports": {
|
|
21
20
|
".": {
|
|
@@ -39,9 +38,9 @@
|
|
|
39
38
|
},
|
|
40
39
|
"devDependencies": {
|
|
41
40
|
"@biomejs/biome": "catalog:",
|
|
42
|
-
"@types/react": "
|
|
41
|
+
"@types/react": "catalog:",
|
|
43
42
|
"tsup": "^8.5.0",
|
|
44
|
-
"typescript": "
|
|
43
|
+
"typescript": "catalog:"
|
|
45
44
|
},
|
|
46
45
|
"peerDependencies": {
|
|
47
46
|
"react": "^18.0.0 || ^19.0.0",
|