@nattui/react-components 0.0.3 → 0.0.4

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 
-interface ButtonProps extends Omit<ComponentProps<"button">, "disabled"> {
+interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
     fullWidth?: boolean;
     iconEnd?: ReactNode;
     iconOnly?: boolean;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactNode, JSX } from 'react';
 
-interface ButtonProps extends Omit<ComponentProps<"button">, "disabled"> {
+interface ButtonProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
     fullWidth?: boolean;
     iconEnd?: ReactNode;
     iconOnly?: boolean;

package/dist/index.js.map

@@ -1 +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"]}
+{"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.map

@@ -1 +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"]}
+{"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

@@ -1,6 +1,6 @@
 {
   "name": "@nattui/react-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A collection of reusable React components built with TypeScript and CSS Modules",
   "keywords": [
     "components",

package/src/button.tsx

@@ -4,7 +4,7 @@ import { ButtonSpinner } from "@/button-spinner"
 import styles from "@/button.module.css"
 
 export interface ButtonProps
-  extends Omit<ComponentProps<"button">, "disabled"> {
+  extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
   fullWidth?: boolean
   iconEnd?: ReactNode
   iconOnly?: boolean