@nattui/react-components 0.0.14 → 0.0.15

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 CHANGED
@@ -12,18 +12,18 @@ interface ButtonPropsInternal extends Omit<ComponentProps<"button">, "aria-press
12
12
  size?: 32 | 36 | 40 | 44;
13
13
  variant?: "accent" | "ghost" | "primary" | "secondary";
14
14
  }
15
- interface ButtonPropsWithIcon extends ButtonPropsInternal {
15
+ interface ButtonIconProps extends ButtonPropsInternal {
16
16
  children?: ReactNode;
17
17
  iconEnd?: never;
18
18
  iconOnly: true;
19
19
  iconStart?: never;
20
20
  }
21
- interface ButtonPropsWithText extends ButtonPropsInternal {
21
+ interface ButtonProps extends ButtonPropsInternal {
22
22
  children?: string;
23
23
  iconOnly?: false;
24
24
  }
25
- type ButtonProps = ButtonPropsWithIcon | ButtonPropsWithText;
26
- declare function Button(props: ButtonProps): JSX.Element;
25
+ type ButtonUnionProps = ButtonIconProps | ButtonProps;
26
+ declare function Button(props: ButtonUnionProps): JSX.Element;
27
27
  declare const BUTTON_CLASS_NAME: {
28
28
  readonly BASE: string;
29
29
  readonly ICON_ONLY: string;
@@ -68,4 +68,4 @@ declare const LABEL_CLASS_NAME: {
68
68
  readonly BASE: string;
69
69
  };
70
70
 
71
- export { BUTTON_CLASS_NAME, Button, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };
71
+ export { BUTTON_CLASS_NAME, Button, type ButtonIconProps, type ButtonProps, INPUT_CLASS_NAME, Input, type InputProps, LABEL_CLASS_NAME, Label, type LabelProps };
@@ -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\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"]}
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\nexport interface ButtonIconProps extends ButtonPropsInternal {\n children?: ReactNode\n iconEnd?: never\n iconOnly: true\n iconStart?: never\n}\n\nexport interface ButtonProps extends ButtonPropsInternal {\n children?: string\n iconOnly?: false\n}\n\ntype ButtonUnionProps = ButtonIconProps | ButtonProps\n\nexport function Button(props: ButtonUnionProps): 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.14",
3
+ "version": "0.0.15",
4
4
  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
5
5
  "keywords": [
6
6
  "components",