@nattui/react-components 0.0.1 → 0.0.2

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.
Files changed (15) hide show
  1. package/.prettierrc +1 -0
  2. package/.turbo/turbo-build.log +19 -15
  3. package/dist/index.js +4 -4
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +4 -4
  6. package/dist/index.mjs.map +1 -1
  7. package/eslint.config.mjs +0 -11
  8. package/package.json +1 -2
  9. package/src/button-background.module.css +5 -5
  10. package/src/button-spinner.module.css +22 -22
  11. package/src/button.module.css +33 -33
  12. package/src/button.tsx +1 -1
  13. package/dist/{button-background.module-FK4ABTRO.module.css → button-background.module-LVDVMB6Z.module.css} +5 -5
  14. package/dist/{button-spinner.module-IRIJPNSF.module.css → button-spinner.module-4TBETQ4T.module.css} +22 -22
  15. package/dist/{button.module-QR72PPSM.module.css → button.module-65N3HOPU.module.css} +33 -33
package/.prettierrc CHANGED
@@ -1,4 +1,5 @@
1
1
  {
2
+ "cssDeclarationSorterOrder": "alphabetical",
2
3
  "jsonRecursiveSort": true,
3
4
  "plugins": [
4
5
  "prettier-plugin-css-order",
package/.turbo/turbo-build.log CHANGED
@@ -11,19 +11,23 @@
11
11
  CLI Cleaning output folder
12
12
  ESM Build start
13
13
  CJS Build start
14
- ESM dist/button-spinner.module-IRIJPNSF.module.css 1.49 KB
15
- ESM dist/button.module-QR72PPSM.module.css 5.60 KB
16
- ESM dist/button-background.module-FK4ABTRO.module.css 667.00 B
17
- ESM dist/index.mjs 3.42 KB
18
- ESM dist/index.mjs.map 7.61 KB
19
- ESM ⚡️ Build success in 83ms
20
- CJS dist/button-spinner.module-IRIJPNSF.module.css 1.49 KB
21
- CJS dist/button.module-QR72PPSM.module.css 5.60 KB
22
- CJS dist/button-background.module-FK4ABTRO.module.css 667.00 B
23
- CJS dist/index.js 4.14 KB
24
- CJS dist/index.js.map 7.66 KB
25
- CJS ⚡️ Build success in 83ms
14
+ "Fragment", "jsx" and "jsxs" are imported from external module "react/jsx-runtime" but never used in "dist/index.js".
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
+ ESM dist/button-spinner.module-4TBETQ4T.module.css 1.49 KB
19
+ ESM dist/button-background.module-LVDVMB6Z.module.css 667.00 B
20
+ ESM dist/button.module-65N3HOPU.module.css 5.60 KB
21
+ ESM dist/index.mjs 1.22 KB
22
+ ESM dist/index.mjs.map 4.87 KB
23
+ ESM ⚡️ Build success in 60ms
24
+ CJS dist/button-spinner.module-4TBETQ4T.module.css 1.49 KB
25
+ CJS dist/button.module-65N3HOPU.module.css 5.60 KB
26
+ CJS dist/button-background.module-LVDVMB6Z.module.css 667.00 B
27
+ CJS dist/index.js 1.77 KB
28
+ CJS dist/index.js.map 4.90 KB
29
+ CJS ⚡️ Build success in 60ms
26
30
  DTS Build start
27
- DTS ⚡️ Build success in 682ms
28
- DTS dist/index.d.mts 1.31 KB
29
- DTS dist/index.d.ts 1.31 KB
31
+ DTS ⚡️ Build success in 684ms
32
+ DTS dist/index.d.mts 990.00 B
33
+ DTS dist/index.d.ts 990.00 B
package/dist/index.js CHANGED
@@ -1,9 +1,9 @@
1
1
  'use strict';
2
2
 
3
- var styles = require('./button-background.module-FK4ABTRO.module.css');
3
+ var styles = require('./button-background.module-LVDVMB6Z.module.css');
4
4
  var jsxRuntime = require('react/jsx-runtime');
5
- var styles2 = require('./button-spinner.module-IRIJPNSF.module.css');
6
- var styles3 = require('./button.module-QR72PPSM.module.css');
5
+ var styles2 = require('./button-spinner.module-4TBETQ4T.module.css');
6
+ var styles3 = require('./button.module-65N3HOPU.module.css');
7
7
 
8
8
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
9
9
 
@@ -87,7 +87,7 @@ function Button(props) {
87
87
  /* @__PURE__ */ jsxRuntime.jsx(ButtonBackground, { rounded, variant }),
88
88
  isLoading && /* @__PURE__ */ jsxRuntime.jsx(ButtonSpinner, {}),
89
89
  !isLoading && iconStart,
90
- children,
90
+ iconOnly ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
91
91
  !isLoading && iconEnd
92
92
  ]
93
93
  }
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":"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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 extends ComponentProps<\"button\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\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 disabled = false,\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\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 className={combinedClassName}\n disabled={disabled || isLoading}\n type={type}\n {...rest}\n >\n <ButtonBackground rounded={rounded} variant={variant} />\n {isLoading && <ButtonSpinner />}\n {!isLoading && iconStart}\n {children}\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"]}
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 extends ComponentProps<\"button\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\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 disabled = false,\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\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 className={combinedClassName}\n disabled={disabled || 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-FK4ABTRO.module.css';
1
+ import styles from './button-background.module-LVDVMB6Z.module.css';
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
- import styles2 from './button-spinner.module-IRIJPNSF.module.css';
4
- import styles3 from './button.module-QR72PPSM.module.css';
3
+ import styles2 from './button-spinner.module-4TBETQ4T.module.css';
4
+ import styles3 from './button.module-65N3HOPU.module.css';
5
5
 
6
6
  // src/button-background.tsx
7
7
  function ButtonBackground(props) {
@@ -79,7 +79,7 @@ function Button(props) {
79
79
  /* @__PURE__ */ jsx(ButtonBackground, { rounded, variant }),
80
80
  isLoading && /* @__PURE__ */ jsx(ButtonSpinner, {}),
81
81
  !isLoading && iconStart,
82
- children,
82
+ iconOnly ? children : /* @__PURE__ */ jsx("span", { children }),
83
83
  !isLoading && iconEnd
84
84
  ]
85
85
  }
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":"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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 extends ComponentProps<\"button\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\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 disabled = false,\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\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 className={combinedClassName}\n disabled={disabled || isLoading}\n type={type}\n {...rest}\n >\n <ButtonBackground rounded={rounded} variant={variant} />\n {isLoading && <ButtonSpinner />}\n {!isLoading && iconStart}\n {children}\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"]}
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 extends ComponentProps<\"button\"> {\n fullWidth?: boolean\n iconEnd?: ReactNode\n iconOnly?: boolean\n iconStart?: ReactNode\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 disabled = false,\n fullWidth = false,\n iconEnd = \"\",\n iconOnly = false,\n iconStart = \"\",\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 className={combinedClassName}\n disabled={disabled || 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/eslint.config.mjs CHANGED
@@ -1,4 +1,3 @@
1
- import css from "@eslint/css"
2
1
  import js from "@eslint/js"
3
2
  import pluginPerfectionist from "eslint-plugin-perfectionist"
4
3
  import pluginReact from "eslint-plugin-react"
@@ -39,16 +38,6 @@ export default defineConfig([
39
38
  files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
40
39
  languageOptions: { globals: globals.browser },
41
40
  },
42
- // CSS configuration
43
- {
44
- extends: ["css/recommended"],
45
- files: ["**/*.css"],
46
- language: "css/css",
47
- plugins: { css },
48
- rules: {
49
- "css/use-baseline": "off",
50
- },
51
- },
52
41
  // JavaScript configuration
53
42
  {
54
43
  extends: ["js/recommended"],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nattui/react-components",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
5
5
  "keywords": [
6
6
  "components",
@@ -21,7 +21,6 @@
21
21
  "module": "./dist/index.js",
22
22
  "types": "./dist/index.d.ts",
23
23
  "devDependencies": {
24
- "@eslint/css": "^0.9.0",
25
24
  "@eslint/js": "^9.29.0",
26
25
  "@types/react": "^19.1.8",
27
26
  "eslint": "^9.29.0",
package/src/button-background.module.css CHANGED
@@ -1,14 +1,14 @@
1
1
  /* Base */
2
2
  .button_background {
3
- position: absolute;
4
- top: 0;
5
- right: 0;
6
3
  bottom: 50%;
4
+ filter: none !important;
7
5
  left: 0;
8
6
  opacity: 0.2;
9
- z-index: -1;
10
- filter: none !important;
7
+ position: absolute;
8
+ right: 0;
9
+ top: 0;
11
10
  transition: opacity 150ms;
11
+ z-index: -1;
12
12
  }
13
13
 
14
14
  /* Rounded */
package/src/button-spinner.module.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .button_spinner {
2
+ animation: spinner 1000ms steps(12, end) infinite;
3
+ height: var(--size);
2
4
  position: relative;
3
5
  scale: -1 1;
4
- animation: spinner 1000ms steps(12, end) infinite;
5
6
  width: var(--size);
6
- height: var(--size);
7
7
  }
8
8
 
9
9
  @keyframes spinner {
@@ -13,83 +13,83 @@
13
13
  }
14
14
 
15
15
  .button_spinner > div {
16
+ height: calc(var(--size) / 12);
17
+ pointer-events: none;
16
18
  position: absolute;
17
- top: 50%;
18
19
  right: 0;
20
+ top: 50%;
19
21
  transform-origin: center left;
20
- translate: 0 -50%;
21
22
  transition: all 150ms;
23
+ translate: 0 -50%;
22
24
  width: calc(var(--size) / 2);
23
- height: calc(var(--size) / 12);
24
- pointer-events: none;
25
25
  }
26
26
 
27
27
  .button_spinner > div::after {
28
+ background-color: currentColor;
29
+ border-radius: 9999px;
30
+ content: "";
31
+ height: 100%;
28
32
  position: absolute;
29
33
  right: 0;
30
- border-radius: 9999px;
31
- background-color: currentColor;
32
34
  width: 50%;
33
- height: 100%;
34
- content: "";
35
35
  }
36
36
 
37
37
  .button_spinner > div:nth-child(1) {
38
- rotate: 0deg;
39
38
  opacity: 1;
39
+ rotate: 0deg;
40
40
  }
41
41
 
42
42
  .button_spinner > div:nth-child(2) {
43
- rotate: 30deg;
44
43
  opacity: 0.925;
44
+ rotate: 30deg;
45
45
  }
46
46
 
47
47
  .button_spinner > div:nth-child(3) {
48
- rotate: 60deg;
49
48
  opacity: 0.85;
49
+ rotate: 60deg;
50
50
  }
51
51
 
52
52
  .button_spinner > div:nth-child(4) {
53
- rotate: 90deg;
54
53
  opacity: 0.775;
54
+ rotate: 90deg;
55
55
  }
56
56
 
57
57
  .button_spinner > div:nth-child(5) {
58
- rotate: 120deg;
59
58
  opacity: 0.7;
59
+ rotate: 120deg;
60
60
  }
61
61
 
62
62
  .button_spinner > div:nth-child(6) {
63
- rotate: 150deg;
64
63
  opacity: 0.625;
64
+ rotate: 150deg;
65
65
  }
66
66
 
67
67
  .button_spinner > div:nth-child(7) {
68
- rotate: 180deg;
69
68
  opacity: 0.55;
69
+ rotate: 180deg;
70
70
  }
71
71
 
72
72
  .button_spinner > div:nth-child(8) {
73
- rotate: 210deg;
74
73
  opacity: 0.475;
74
+ rotate: 210deg;
75
75
  }
76
76
 
77
77
  .button_spinner > div:nth-child(9) {
78
- rotate: 240deg;
79
78
  opacity: 0.4;
79
+ rotate: 240deg;
80
80
  }
81
81
 
82
82
  .button_spinner > div:nth-child(10) {
83
- rotate: 270deg;
84
83
  opacity: 0.325;
84
+ rotate: 270deg;
85
85
  }
86
86
 
87
87
  .button_spinner > div:nth-child(11) {
88
- rotate: 300deg;
89
88
  opacity: 0.25;
89
+ rotate: 300deg;
90
90
  }
91
91
 
92
92
  .button_spinner > div:nth-child(12) {
93
- rotate: 330deg;
94
93
  opacity: 0.15;
94
+ rotate: 330deg;
95
95
  }
package/src/button.module.css CHANGED
@@ -2,28 +2,28 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .button {
5
- display: flex;
6
- position: relative;
5
+ align-items: safe center;
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ border-width: 1px;
7
9
  column-gap: 8px;
10
+ cursor: pointer;
11
+ display: flex;
8
12
  flex-shrink: 0;
13
+ font-weight: 500;
9
14
  justify-content: safe center;
10
- align-items: safe center;
11
- transition-duration: 150ms;
12
- transition-property: all;
13
- cursor: pointer;
15
+ line-height: 1.5;
14
16
  outline-width: 0;
15
- border-width: 1px;
16
- border-style: solid;
17
- border-color: transparent;
18
17
  overflow: hidden;
19
- font-weight: 500;
20
- line-height: 1.5;
18
+ position: relative;
19
+ transition-duration: 150ms;
20
+ transition-property: all;
21
21
  user-select: none;
22
22
  }
23
23
 
24
24
  .button:disabled {
25
- opacity: 0.5;
26
25
  cursor: not-allowed;
26
+ opacity: 0.5;
27
27
  }
28
28
 
29
29
  /* Active */
@@ -79,30 +79,30 @@
79
79
  /* ===================================================== */
80
80
  .button__size_32 {
81
81
  --size: 32px;
82
- padding: 0 8px;
83
- height: var(--size);
84
82
  font-size: 14px;
83
+ height: var(--size);
84
+ padding: 0 8px;
85
85
  }
86
86
 
87
87
  .button__size_36 {
88
88
  --size: 36px;
89
- padding: 0 12px;
90
- height: var(--size);
91
89
  font-size: 14px;
90
+ height: var(--size);
91
+ padding: 0 12px;
92
92
  }
93
93
 
94
94
  .button__size_40 {
95
95
  --size: 40px;
96
- padding: 0 16px;
97
- height: var(--size);
98
96
  font-size: 14px;
97
+ height: var(--size);
98
+ padding: 0 16px;
99
99
  }
100
100
 
101
101
  .button__size_48 {
102
102
  --size: 48px;
103
- padding: 0 20px;
104
- height: var(--size);
105
103
  font-size: 16px;
104
+ height: var(--size);
105
+ padding: 0 20px;
106
106
  }
107
107
 
108
108
  /* ===================================================== */
@@ -110,15 +110,15 @@
110
110
  /* ===================================================== */
111
111
  /* Accent */
112
112
  .button__variant_accent {
113
- box-shadow:
114
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
115
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
116
- border-color: var(--color-primary-9, #e93d82);
117
113
  background-image: linear-gradient(
118
114
  to bottom,
119
115
  var(--color-primary-9, #e93d82),
120
116
  var(--color-primary-10, #e03177)
121
117
  );
118
+ border-color: var(--color-primary-9, #e93d82);
119
+ box-shadow:
120
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
121
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
122
122
  color: var(--color-gray-1, #fdfcfd);
123
123
  }
124
124
 
@@ -152,15 +152,15 @@
152
152
 
153
153
  /* Primary */
154
154
  .button__variant_primary {
155
- box-shadow:
156
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
157
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
158
- border-color: var(--color-gray-12, #1a1523);
159
155
  background-image: linear-gradient(
160
156
  to bottom,
161
157
  color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
162
158
  var(--color-gray-12, #1a1523)
163
159
  );
160
+ border-color: var(--color-gray-12, #1a1523);
161
+ box-shadow:
162
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
163
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
164
164
  color: var(--color-gray-1, #fdfcfd);
165
165
  }
166
166
 
@@ -173,15 +173,15 @@
173
173
 
174
174
  /* Secondary */
175
175
  .button__variant_secondary {
176
- box-shadow:
177
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
178
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
179
- border-color: var(--color-gray-6, #e4e2e4);
180
176
  background-image: linear-gradient(
181
177
  to bottom,
182
178
  var(--color-gray-1, #fdfcfd),
183
179
  var(--color-gray-3, #f4f2f4)
184
180
  );
181
+ border-color: var(--color-gray-6, #e4e2e4);
182
+ box-shadow:
183
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
184
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
185
185
  color: var(--color-gray-11, #6f6e77);
186
186
  }
187
187
 
@@ -217,8 +217,8 @@
217
217
  .button__variant_accent:enabled:hover,
218
218
  .button__variant_primary:enabled:hover,
219
219
  .button__variant_secondary:enabled:hover {
220
- filter: none;
221
220
  box-shadow: inset 0 0 0 0 transparent;
221
+ filter: none;
222
222
  }
223
223
 
224
224
  .button__variant_ghost:enabled:hover,
package/src/button.tsx CHANGED
@@ -65,7 +65,7 @@ export function Button(props: ButtonPropsInternal): JSX.Element {
65
65
  <ButtonBackground rounded={rounded} variant={variant} />
66
66
  {isLoading && <ButtonSpinner />}
67
67
  {!isLoading && iconStart}
68
- {children}
68
+ {iconOnly ? children : <span>{children}</span>}
69
69
  {!isLoading && iconEnd}
70
70
  </button>
71
71
  )
package/dist/{button-background.module-FK4ABTRO.module.css → button-background.module-LVDVMB6Z.module.css} RENAMED
@@ -1,14 +1,14 @@
1
1
  /* Base */
2
2
  .button_background {
3
- position: absolute;
4
- top: 0;
5
- right: 0;
6
3
  bottom: 50%;
4
+ filter: none !important;
7
5
  left: 0;
8
6
  opacity: 0.2;
9
- z-index: -1;
10
- filter: none !important;
7
+ position: absolute;
8
+ right: 0;
9
+ top: 0;
11
10
  transition: opacity 150ms;
11
+ z-index: -1;
12
12
  }
13
13
 
14
14
  /* Rounded */
package/dist/{button-spinner.module-IRIJPNSF.module.css → button-spinner.module-4TBETQ4T.module.css} RENAMED
@@ -1,9 +1,9 @@
1
1
  .button_spinner {
2
+ animation: spinner 1000ms steps(12, end) infinite;
3
+ height: var(--size);
2
4
  position: relative;
3
5
  scale: -1 1;
4
- animation: spinner 1000ms steps(12, end) infinite;
5
6
  width: var(--size);
6
- height: var(--size);
7
7
  }
8
8
 
9
9
  @keyframes spinner {
@@ -13,83 +13,83 @@
13
13
  }
14
14
 
15
15
  .button_spinner > div {
16
+ height: calc(var(--size) / 12);
17
+ pointer-events: none;
16
18
  position: absolute;
17
- top: 50%;
18
19
  right: 0;
20
+ top: 50%;
19
21
  transform-origin: center left;
20
- translate: 0 -50%;
21
22
  transition: all 150ms;
23
+ translate: 0 -50%;
22
24
  width: calc(var(--size) / 2);
23
- height: calc(var(--size) / 12);
24
- pointer-events: none;
25
25
  }
26
26
 
27
27
  .button_spinner > div::after {
28
+ background-color: currentColor;
29
+ border-radius: 9999px;
30
+ content: "";
31
+ height: 100%;
28
32
  position: absolute;
29
33
  right: 0;
30
- border-radius: 9999px;
31
- background-color: currentColor;
32
34
  width: 50%;
33
- height: 100%;
34
- content: "";
35
35
  }
36
36
 
37
37
  .button_spinner > div:nth-child(1) {
38
- rotate: 0deg;
39
38
  opacity: 1;
39
+ rotate: 0deg;
40
40
  }
41
41
 
42
42
  .button_spinner > div:nth-child(2) {
43
- rotate: 30deg;
44
43
  opacity: 0.925;
44
+ rotate: 30deg;
45
45
  }
46
46
 
47
47
  .button_spinner > div:nth-child(3) {
48
- rotate: 60deg;
49
48
  opacity: 0.85;
49
+ rotate: 60deg;
50
50
  }
51
51
 
52
52
  .button_spinner > div:nth-child(4) {
53
- rotate: 90deg;
54
53
  opacity: 0.775;
54
+ rotate: 90deg;
55
55
  }
56
56
 
57
57
  .button_spinner > div:nth-child(5) {
58
- rotate: 120deg;
59
58
  opacity: 0.7;
59
+ rotate: 120deg;
60
60
  }
61
61
 
62
62
  .button_spinner > div:nth-child(6) {
63
- rotate: 150deg;
64
63
  opacity: 0.625;
64
+ rotate: 150deg;
65
65
  }
66
66
 
67
67
  .button_spinner > div:nth-child(7) {
68
- rotate: 180deg;
69
68
  opacity: 0.55;
69
+ rotate: 180deg;
70
70
  }
71
71
 
72
72
  .button_spinner > div:nth-child(8) {
73
- rotate: 210deg;
74
73
  opacity: 0.475;
74
+ rotate: 210deg;
75
75
  }
76
76
 
77
77
  .button_spinner > div:nth-child(9) {
78
- rotate: 240deg;
79
78
  opacity: 0.4;
79
+ rotate: 240deg;
80
80
  }
81
81
 
82
82
  .button_spinner > div:nth-child(10) {
83
- rotate: 270deg;
84
83
  opacity: 0.325;
84
+ rotate: 270deg;
85
85
  }
86
86
 
87
87
  .button_spinner > div:nth-child(11) {
88
- rotate: 300deg;
89
88
  opacity: 0.25;
89
+ rotate: 300deg;
90
90
  }
91
91
 
92
92
  .button_spinner > div:nth-child(12) {
93
- rotate: 330deg;
94
93
  opacity: 0.15;
94
+ rotate: 330deg;
95
95
  }
package/dist/{button.module-QR72PPSM.module.css → button.module-65N3HOPU.module.css} RENAMED
@@ -2,28 +2,28 @@
2
2
  /* Base */
3
3
  /* ===================================================== */
4
4
  .button {
5
- display: flex;
6
- position: relative;
5
+ align-items: safe center;
6
+ border-color: transparent;
7
+ border-style: solid;
8
+ border-width: 1px;
7
9
  column-gap: 8px;
10
+ cursor: pointer;
11
+ display: flex;
8
12
  flex-shrink: 0;
13
+ font-weight: 500;
9
14
  justify-content: safe center;
10
- align-items: safe center;
11
- transition-duration: 150ms;
12
- transition-property: all;
13
- cursor: pointer;
15
+ line-height: 1.5;
14
16
  outline-width: 0;
15
- border-width: 1px;
16
- border-style: solid;
17
- border-color: transparent;
18
17
  overflow: hidden;
19
- font-weight: 500;
20
- line-height: 1.5;
18
+ position: relative;
19
+ transition-duration: 150ms;
20
+ transition-property: all;
21
21
  user-select: none;
22
22
  }
23
23
 
24
24
  .button:disabled {
25
- opacity: 0.5;
26
25
  cursor: not-allowed;
26
+ opacity: 0.5;
27
27
  }
28
28
 
29
29
  /* Active */
@@ -79,30 +79,30 @@
79
79
  /* ===================================================== */
80
80
  .button__size_32 {
81
81
  --size: 32px;
82
- padding: 0 8px;
83
- height: var(--size);
84
82
  font-size: 14px;
83
+ height: var(--size);
84
+ padding: 0 8px;
85
85
  }
86
86
 
87
87
  .button__size_36 {
88
88
  --size: 36px;
89
- padding: 0 12px;
90
- height: var(--size);
91
89
  font-size: 14px;
90
+ height: var(--size);
91
+ padding: 0 12px;
92
92
  }
93
93
 
94
94
  .button__size_40 {
95
95
  --size: 40px;
96
- padding: 0 16px;
97
- height: var(--size);
98
96
  font-size: 14px;
97
+ height: var(--size);
98
+ padding: 0 16px;
99
99
  }
100
100
 
101
101
  .button__size_48 {
102
102
  --size: 48px;
103
- padding: 0 20px;
104
- height: var(--size);
105
103
  font-size: 16px;
104
+ height: var(--size);
105
+ padding: 0 20px;
106
106
  }
107
107
 
108
108
  /* ===================================================== */
@@ -110,15 +110,15 @@
110
110
  /* ===================================================== */
111
111
  /* Accent */
112
112
  .button__variant_accent {
113
- box-shadow:
114
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
115
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
116
- border-color: var(--color-primary-9, #e93d82);
117
113
  background-image: linear-gradient(
118
114
  to bottom,
119
115
  var(--color-primary-9, #e93d82),
120
116
  var(--color-primary-10, #e03177)
121
117
  );
118
+ border-color: var(--color-primary-9, #e93d82);
119
+ box-shadow:
120
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
121
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
122
122
  color: var(--color-gray-1, #fdfcfd);
123
123
  }
124
124
 
@@ -152,15 +152,15 @@
152
152
 
153
153
  /* Primary */
154
154
  .button__variant_primary {
155
- box-shadow:
156
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
157
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
158
- border-color: var(--color-gray-12, #1a1523);
159
155
  background-image: linear-gradient(
160
156
  to bottom,
161
157
  color-mix(in oklab, var(--color-gray-12, #1a1523) 90%, transparent),
162
158
  var(--color-gray-12, #1a1523)
163
159
  );
160
+ border-color: var(--color-gray-12, #1a1523);
161
+ box-shadow:
162
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
163
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
164
164
  color: var(--color-gray-1, #fdfcfd);
165
165
  }
166
166
 
@@ -173,15 +173,15 @@
173
173
 
174
174
  /* Secondary */
175
175
  .button__variant_secondary {
176
- box-shadow:
177
- inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
178
- inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
179
- border-color: var(--color-gray-6, #e4e2e4);
180
176
  background-image: linear-gradient(
181
177
  to bottom,
182
178
  var(--color-gray-1, #fdfcfd),
183
179
  var(--color-gray-3, #f4f2f4)
184
180
  );
181
+ border-color: var(--color-gray-6, #e4e2e4);
182
+ box-shadow:
183
+ inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
184
+ inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
185
185
  color: var(--color-gray-11, #6f6e77);
186
186
  }
187
187
 
@@ -217,8 +217,8 @@
217
217
  .button__variant_accent:enabled:hover,
218
218
  .button__variant_primary:enabled:hover,
219
219
  .button__variant_secondary:enabled:hover {
220
- filter: none;
221
220
  box-shadow: inset 0 0 0 0 transparent;
221
+ filter: none;
222
222
  }
223
223
 
224
224
  .button__variant_ghost:enabled:hover,