@latte-macchiat-io/latte-vanilla-components 0.0.191 → 0.0.192

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 (99) hide show
  1. package/package.json +4 -1
  2. package/src/components/Actions/index.tsx +20 -0
  3. package/src/components/Actions/styles.css.ts +54 -0
  4. package/src/components/Button/index.tsx +29 -0
  5. package/src/components/Button/stories.tsx +4 -22
  6. package/src/components/Button/styles.css.ts +131 -0
  7. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  8. package/src/components/Carousel/styles.css.ts +176 -0
  9. package/src/components/Columns/index.tsx +36 -0
  10. package/src/components/Columns/styles.css.ts +70 -0
  11. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  12. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  13. package/src/components/Footer/index.tsx +21 -0
  14. package/src/components/Footer/styles.css.ts +33 -0
  15. package/src/components/Form/Form.css.ts +1 -1
  16. package/src/components/Form/Row/Row.css.ts +1 -1
  17. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  18. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  19. package/src/components/Form/TextField/TextField.css.ts +1 -1
  20. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  21. package/src/components/Header/index.tsx +53 -0
  22. package/src/components/Header/styles.css.ts +89 -0
  23. package/src/components/Heading/index.tsx +22 -0
  24. package/src/components/Heading/styles.css.ts +66 -0
  25. package/src/components/Heading/types.tsx +1 -0
  26. package/src/components/Icon/index.tsx +25 -0
  27. package/src/components/Icon/style.css.ts +11 -0
  28. package/src/components/KeyNumber/index.tsx +51 -0
  29. package/src/components/KeyNumber/styles.css.ts +76 -0
  30. package/src/components/LanguageSwitcher/index.tsx +80 -0
  31. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  32. package/src/components/Logo/index.tsx +13 -0
  33. package/src/components/Logo/styles.css.ts +14 -0
  34. package/src/components/Main/index.tsx +17 -0
  35. package/src/components/Main/styles.css.ts +14 -0
  36. package/src/components/Modal/index.tsx +42 -0
  37. package/src/components/Modal/stories.tsx +14 -358
  38. package/src/components/Modal/styles.css.ts +90 -0
  39. package/src/components/Nav/index.tsx +22 -0
  40. package/src/components/Nav/styles.css.ts +30 -0
  41. package/src/components/NavLegal/index.tsx +17 -0
  42. package/src/components/NavLegal/styles.css.ts +20 -0
  43. package/src/components/NavSocial/index.tsx +32 -0
  44. package/src/components/NavSocial/styles.css.ts +33 -0
  45. package/src/components/Section/index.tsx +20 -0
  46. package/src/components/Section/stories.tsx +5 -57
  47. package/src/components/Section/styles.css.ts +106 -0
  48. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  49. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  50. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  51. package/src/components/Video/index.tsx +117 -0
  52. package/src/components/Video/styles.css.ts +200 -0
  53. package/src/index.ts +29 -41
  54. package/src/styles/mediaqueries.ts +2 -0
  55. package/src/styles/sprinkles.css.ts +11 -8
  56. package/src/theme/baseThemeValues.ts +1235 -0
  57. package/src/theme/contract.css.ts +676 -0
  58. package/src/{themes → theme}/createTheme.ts +40 -1
  59. package/src/theme/default.css.ts +10 -0
  60. package/src/utils/combineResponsive.ts +9 -0
  61. package/src/utils/generateResponsiveMedia.ts +19 -0
  62. package/src/components/Actions/Actions.css.ts +0 -113
  63. package/src/components/Actions/Actions.tsx +0 -132
  64. package/src/components/Button/Button.css.ts +0 -119
  65. package/src/components/Button/Button.tsx +0 -132
  66. package/src/components/Carousel/Carousel.css.ts +0 -179
  67. package/src/components/Columns/Columns.css.ts +0 -185
  68. package/src/components/Columns/Columns.tsx +0 -142
  69. package/src/components/Footer/Footer.css.ts +0 -108
  70. package/src/components/Footer/Footer.tsx +0 -130
  71. package/src/components/Header/Header.css.ts +0 -111
  72. package/src/components/Header/Header.tsx +0 -158
  73. package/src/components/Icon/Icon.css.ts +0 -101
  74. package/src/components/Icon/Icon.tsx +0 -159
  75. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  76. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  77. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  78. package/src/components/Logo/Logo.css.ts +0 -98
  79. package/src/components/Logo/Logo.tsx +0 -137
  80. package/src/components/Main/Main.css.ts +0 -62
  81. package/src/components/Main/Main.tsx +0 -130
  82. package/src/components/Modal/Modal.css.ts +0 -203
  83. package/src/components/Modal/Modal.tsx +0 -194
  84. package/src/components/Nav/Nav.css.ts +0 -123
  85. package/src/components/Nav/Nav.tsx +0 -130
  86. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  87. package/src/components/NavLegal/NavLegal.tsx +0 -133
  88. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  89. package/src/components/NavSocial/NavSocial.tsx +0 -169
  90. package/src/components/Section/Section.css.ts +0 -101
  91. package/src/components/Section/Section.tsx +0 -130
  92. package/src/components/Video/Video.css.ts +0 -210
  93. package/src/components/Video/Video.tsx +0 -243
  94. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  95. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  96. package/src/components/VideoFullWidth/export.tsx +0 -2
  97. package/src/themes/baseThemeValues.ts +0 -160
  98. package/src/themes/contract.css.ts +0 -83
  99. package/src/types/withClassName.ts +0 -4
@@ -13,9 +13,22 @@ export type ThemeOverrides = {
13
13
  fontWeights?: Partial<typeof baseLightTheme.fontWeights>;
14
14
  lineHeights?: Partial<typeof baseLightTheme.lineHeights>;
15
15
  shadows?: Partial<typeof baseLightTheme.shadows>;
16
+ global?: Partial<typeof baseLightTheme.global>;
17
+ main?: Partial<typeof baseLightTheme.main>;
16
18
  section?: Partial<typeof baseLightTheme.section>;
19
+ actions?: Partial<typeof baseLightTheme.actions>;
20
+ button?: Partial<typeof baseLightTheme.button>;
21
+ icon?: Partial<typeof baseLightTheme.icon>;
22
+ columns?: Partial<typeof baseLightTheme.columns>;
23
+ modal?: Partial<typeof baseLightTheme.modal>;
24
+ keyNumber?: Partial<typeof baseLightTheme.keyNumber>;
17
25
  header?: Partial<typeof baseLightTheme.header>;
18
26
  footer?: Partial<typeof baseLightTheme.footer>;
27
+ nav?: Partial<typeof baseLightTheme.nav>;
28
+ navLegal?: Partial<typeof baseLightTheme.navLegal>;
29
+ navSocial?: Partial<typeof baseLightTheme.navSocial>;
30
+ video?: Partial<typeof baseLightTheme.video>;
31
+ carousel?: Partial<typeof baseLightTheme.carousel>;
19
32
  };
20
33
 
21
34
  // Utility to create a theme with partial overrides over light theme base
@@ -30,9 +43,22 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
30
43
  fontWeights: { ...baseLightTheme.fontWeights, ...overrides.fontWeights },
31
44
  lineHeights: { ...baseLightTheme.lineHeights, ...overrides.lineHeights },
32
45
  shadows: { ...baseLightTheme.shadows, ...overrides.shadows },
46
+ global: { ...baseLightTheme.global, ...overrides.global },
47
+ main: { ...baseLightTheme.main, ...overrides.main },
33
48
  section: { ...baseLightTheme.section, ...overrides.section },
49
+ actions: { ...baseLightTheme.actions, ...overrides.actions },
50
+ button: { ...baseLightTheme.button, ...overrides.button },
51
+ icon: { ...baseLightTheme.icon, ...overrides.icon },
52
+ columns: { ...baseLightTheme.columns, ...overrides.columns },
53
+ modal: { ...baseLightTheme.modal, ...overrides.modal },
54
+ keyNumber: { ...baseLightTheme.keyNumber, ...overrides.keyNumber },
34
55
  header: { ...baseLightTheme.header, ...overrides.header },
35
56
  footer: { ...baseLightTheme.footer, ...overrides.footer },
57
+ nav: { ...baseLightTheme.nav, ...overrides.nav },
58
+ navLegal: { ...baseLightTheme.navLegal, ...overrides.navLegal },
59
+ navSocial: { ...baseLightTheme.navSocial, ...overrides.navSocial },
60
+ video: { ...baseLightTheme.video, ...overrides.video },
61
+ carousel: { ...baseLightTheme.carousel, ...overrides.carousel },
36
62
  });
37
63
  };
38
64
 
@@ -48,9 +74,22 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
48
74
  fontWeights: { ...baseDarkTheme.fontWeights, ...overrides.fontWeights },
49
75
  lineHeights: { ...baseDarkTheme.lineHeights, ...overrides.lineHeights },
50
76
  shadows: { ...baseDarkTheme.shadows, ...overrides.shadows },
77
+ global: { ...baseDarkTheme.global, ...overrides.global },
78
+ main: { ...baseDarkTheme.main, ...overrides.main },
51
79
  section: { ...baseDarkTheme.section, ...overrides.section },
80
+ actions: { ...baseDarkTheme.actions, ...overrides.actions },
81
+ button: { ...baseDarkTheme.button, ...overrides.button },
82
+ icon: { ...baseDarkTheme.icon, ...overrides.icon },
83
+ columns: { ...baseDarkTheme.columns, ...overrides.columns },
84
+ modal: { ...baseDarkTheme.modal, ...overrides.modal },
85
+ keyNumber: { ...baseDarkTheme.keyNumber, ...overrides.keyNumber },
52
86
  header: { ...baseDarkTheme.header, ...overrides.header },
53
87
  footer: { ...baseDarkTheme.footer, ...overrides.footer },
88
+ nav: { ...baseDarkTheme.nav, ...overrides.nav },
89
+ navLegal: { ...baseDarkTheme.navLegal, ...overrides.navLegal },
90
+ navSocial: { ...baseDarkTheme.navSocial, ...overrides.navSocial },
91
+ video: { ...baseDarkTheme.video, ...overrides.video },
92
+ carousel: { ...baseDarkTheme.carousel, ...overrides.carousel },
54
93
  });
55
94
  };
56
95
 
@@ -62,4 +101,4 @@ export const createLightTheme = (overrides: ThemeOverrides = {}) => {
62
101
  // Convenience function for dark theme (extends base dark theme)
63
102
  export const createDarkTheme = (overrides: ThemeOverrides = {}) => {
64
103
  return createAppDarkTheme('html[data-theme="dark"]', overrides);
65
- };
104
+ };
@@ -0,0 +1,10 @@
1
+ import { createGlobalTheme } from '@vanilla-extract/css';
2
+
3
+ import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
4
+ import { themeContract } from './contract.css';
5
+
6
+ // Create the default light theme at the root
7
+ createGlobalTheme('html', themeContract, baseLightTheme);
8
+
9
+ // Apply dark theme when data-theme="dark"
10
+ createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);
@@ -0,0 +1,9 @@
1
+ export function combineResponsive(obj1: Record<string, string>, obj2: Record<string, string>, operator: string = '+'): Record<string, string> {
2
+ const result: Record<string, string> = {};
3
+ for (const bp in obj1) {
4
+ if (obj2[bp]) {
5
+ result[bp] = `calc(${obj1[bp]} ${operator} ${obj2[bp]})`;
6
+ }
7
+ }
8
+ return result;
9
+ }
@@ -0,0 +1,19 @@
1
+ import { Breakpoints, queries } from '../styles/mediaqueries';
2
+
3
+ type ResponsiveProps = Record<string, Record<Breakpoints, string>>;
4
+
5
+ export function generateResponsiveMedia(properties: ResponsiveProps) {
6
+ const result: Record<string, Record<string, string>> = {};
7
+
8
+ Object.entries(properties).forEach(([cssProp, breakpointsMap]) => {
9
+ Object.entries(breakpointsMap).forEach(([bp, token]) => {
10
+ const key = bp as Breakpoints;
11
+ const mediaQuery = queries[key];
12
+
13
+ if (!result[mediaQuery]) result[mediaQuery] = {};
14
+ result[mediaQuery][cssProp] = token.startsWith('--') ? `var(${token})` : token;
15
+ });
16
+ });
17
+
18
+ return result;
19
+ }
@@ -1,113 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { queries } from '../../styles/mediaqueries';
4
- import { themeContract } from '../../themes/contract.css';
5
-
6
- const actionsBase = style({
7
- display: 'flex',
8
- flexWrap: 'wrap',
9
-
10
- gap: themeContract.space.sm,
11
- paddingTop: themeContract.space.sm,
12
- width: '100%',
13
-
14
- '@media': {
15
- [queries.lg]: {
16
- gap: themeContract.space.md,
17
- paddingTop: themeContract.space.md,
18
- },
19
- },
20
- });
21
-
22
- export const actionsRecipe = recipe({
23
- base: actionsBase,
24
-
25
- variants: {
26
- align: {
27
- left: {
28
- justifyContent: 'flex-start',
29
- alignItems: 'flex-start',
30
- },
31
- center: {
32
- justifyContent: 'center',
33
- alignItems: 'center',
34
- },
35
- right: {
36
- justifyContent: 'flex-end',
37
- alignItems: 'flex-end',
38
- },
39
- },
40
- direction: {
41
- row: {
42
- flexDirection: 'row',
43
- },
44
- column: {
45
- flexDirection: 'column',
46
- },
47
- 'row-reverse': {
48
- flexDirection: 'row-reverse',
49
- },
50
- 'column-reverse': {
51
- flexDirection: 'column-reverse',
52
- },
53
- },
54
- spacing: {
55
- none: {
56
- gap: '0',
57
- paddingTop: '0',
58
- },
59
- xs: {
60
- gap: themeContract.space.xs,
61
- paddingTop: themeContract.space.xs,
62
- },
63
- sm: {
64
- gap: themeContract.space.sm,
65
- paddingTop: themeContract.space.sm,
66
- },
67
- md: {
68
- gap: themeContract.space.md,
69
- paddingTop: themeContract.space.md,
70
- },
71
- lg: {
72
- gap: themeContract.space.lg,
73
- paddingTop: themeContract.space.lg,
74
- },
75
- xl: {
76
- gap: themeContract.space.xl,
77
- paddingTop: themeContract.space.xl,
78
- },
79
- },
80
- wrap: {
81
- true: {
82
- flexWrap: 'wrap',
83
- },
84
- false: {
85
- flexWrap: 'nowrap',
86
- },
87
- },
88
- fullWidth: {
89
- true: {
90
- width: '100%',
91
-
92
- // selectors: {
93
- // '& > *': {
94
- // flex: '1',
95
- // },
96
- // },
97
- },
98
- false: {
99
- width: 'auto',
100
- },
101
- },
102
- },
103
-
104
- defaultVariants: {
105
- align: 'left',
106
- direction: 'row',
107
- spacing: 'sm',
108
- wrap: true,
109
- fullWidth: false,
110
- },
111
- });
112
-
113
- export type ActionsVariants = RecipeVariants<typeof actionsRecipe>;
@@ -1,132 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { actionsRecipe, type ActionsVariants } from './Actions.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface ActionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ActionsVariants> {
7
- css?: string;
8
- as?: 'div' | 'section' | 'footer';
9
- }
10
-
11
- export const Actions = forwardRef<HTMLDivElement, ActionsProps>(
12
- (
13
- {
14
- children,
15
- align,
16
- direction,
17
- spacing,
18
- wrap,
19
- fullWidth,
20
- as: Component = 'div',
21
- css,
22
- className,
23
- // Extract sprinkles props
24
- margin,
25
- marginTop,
26
- marginBottom,
27
- marginLeft,
28
- marginRight,
29
- padding,
30
- paddingTop,
31
- paddingBottom,
32
- paddingLeft,
33
- paddingRight,
34
- gap,
35
- display,
36
- flexDirection,
37
- justifyContent,
38
- flexWrap,
39
- flex,
40
- width,
41
- height,
42
- minWidth,
43
- maxWidth,
44
- minHeight,
45
- position,
46
- top,
47
- bottom,
48
- left,
49
- right,
50
- zIndex,
51
- fontSize,
52
- fontFamily,
53
- lineHeight,
54
- textAlign,
55
- fontWeight,
56
- color,
57
- backgroundColor,
58
- borderRadius,
59
- borderWidth,
60
- borderStyle,
61
- borderColor,
62
- boxShadow,
63
- opacity,
64
- overflow,
65
- overflowX,
66
- overflowY,
67
- ...htmlProps
68
- },
69
- ref
70
- ) => {
71
- return (
72
- <Component
73
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
74
- ref={ref as any}
75
- className={clsx(
76
- actionsRecipe({ align, direction, spacing, wrap, fullWidth }),
77
- sprinkles({
78
- margin,
79
- marginTop,
80
- marginBottom,
81
- marginLeft,
82
- marginRight,
83
- padding,
84
- paddingTop,
85
- paddingBottom,
86
- paddingLeft,
87
- paddingRight,
88
- gap,
89
- display,
90
- flexDirection,
91
- justifyContent,
92
- flexWrap,
93
- flex,
94
- width,
95
- height,
96
- minWidth,
97
- maxWidth,
98
- minHeight,
99
- position,
100
- top,
101
- bottom,
102
- left,
103
- right,
104
- zIndex,
105
- fontSize,
106
- fontFamily,
107
- lineHeight,
108
- textAlign,
109
- fontWeight,
110
- color,
111
- backgroundColor,
112
- borderRadius,
113
- borderWidth,
114
- borderStyle,
115
- borderColor,
116
- boxShadow,
117
- opacity,
118
- overflow,
119
- overflowX,
120
- overflowY,
121
- }),
122
- css,
123
- className
124
- )}
125
- {...htmlProps}>
126
- {children}
127
- </Component>
128
- );
129
- }
130
- );
131
-
132
- Actions.displayName = 'Actions';
@@ -1,119 +0,0 @@
1
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
2
- import { themeContract } from '../../themes/contract.css';
3
-
4
- export const buttonRecipe = recipe({
5
- base: {
6
- display: 'inline-flex',
7
- alignItems: 'center',
8
- justifyContent: 'center',
9
- padding: themeContract.space.md,
10
- borderRadius: themeContract.radii.md,
11
- border: 'none',
12
- cursor: 'pointer',
13
- fontFamily: themeContract.fonts.body,
14
- fontSize: themeContract.fontSizes.md,
15
- fontWeight: '500',
16
- lineHeight: themeContract.lineHeights.tight,
17
- textDecoration: 'none',
18
- transition: 'all 0.2s ease-in-out',
19
- outline: 'none',
20
-
21
- ':hover': {
22
- transform: 'translateY(-1px)',
23
- boxShadow: themeContract.shadows.md,
24
- },
25
-
26
- ':active': {
27
- transform: 'translateY(0)',
28
- },
29
-
30
- ':focus-visible': {
31
- outline: '2px solid',
32
- outlineColor: themeContract.colors.primary,
33
- outlineOffset: '2px',
34
- },
35
-
36
- ':disabled': {
37
- opacity: '0.5',
38
- cursor: 'not-allowed',
39
- transform: 'none',
40
- boxShadow: 'none',
41
- },
42
- },
43
-
44
- variants: {
45
- variant: {
46
- primary: {
47
- backgroundColor: themeContract.colors.primary,
48
- color: themeContract.colors.background,
49
-
50
- ':hover': {
51
- backgroundColor: themeContract.colors.accent,
52
- },
53
- },
54
- secondary: {
55
- backgroundColor: themeContract.colors.secondary,
56
- color: themeContract.colors.text,
57
-
58
- ':hover': {
59
- backgroundColor: themeContract.colors.surface,
60
- },
61
- },
62
- outline: {
63
- backgroundColor: 'transparent',
64
- color: themeContract.colors.text,
65
- border: `1px solid ${themeContract.colors.border}`,
66
-
67
- ':hover': {
68
- backgroundColor: themeContract.colors.surface,
69
- borderColor: themeContract.colors.primary,
70
- },
71
- },
72
- ghost: {
73
- backgroundColor: 'transparent',
74
- color: themeContract.colors.text,
75
-
76
- ':hover': {
77
- backgroundColor: themeContract.colors.surface,
78
- },
79
- },
80
- danger: {
81
- backgroundColor: themeContract.colors.error,
82
- color: themeContract.colors.background,
83
-
84
- ':hover': {
85
- opacity: '0.9',
86
- },
87
- },
88
- },
89
- size: {
90
- sm: {
91
- padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
92
- fontSize: themeContract.fontSizes.sm,
93
- borderRadius: themeContract.radii.sm,
94
- },
95
- md: {
96
- padding: `${themeContract.space.sm} ${themeContract.space.md}`,
97
- fontSize: themeContract.fontSizes.md,
98
- borderRadius: themeContract.radii.md,
99
- },
100
- lg: {
101
- padding: `${themeContract.space.md} ${themeContract.space.lg}`,
102
- fontSize: themeContract.fontSizes.lg,
103
- borderRadius: themeContract.radii.lg,
104
- },
105
- },
106
- fullWidth: {
107
- true: {
108
- width: '100%',
109
- },
110
- },
111
- },
112
-
113
- defaultVariants: {
114
- variant: 'primary',
115
- size: 'md',
116
- },
117
- });
118
-
119
- export type ButtonVariants = RecipeVariants<typeof buttonRecipe>;
@@ -1,132 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { buttonRecipe, type ButtonVariants } from './Button.css';
4
- import { sprinkles, Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, Sprinkles, NonNullable<ButtonVariants> {
7
- css?: string;
8
- isPending?: boolean;
9
- asChild?: boolean;
10
- }
11
-
12
- export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
13
- (
14
- {
15
- variant,
16
- size,
17
- fullWidth,
18
- isPending = false,
19
- disabled,
20
- css,
21
- className,
22
- children,
23
- // Extract sprinkles props
24
- margin,
25
- marginTop,
26
- marginBottom,
27
- marginLeft,
28
- marginRight,
29
- padding,
30
- paddingTop,
31
- paddingBottom,
32
- paddingLeft,
33
- paddingRight,
34
- gap,
35
- display,
36
- flexDirection,
37
- justifyContent,
38
- flexWrap,
39
- flex,
40
- width,
41
- height,
42
- minWidth,
43
- maxWidth,
44
- minHeight,
45
- position,
46
- top,
47
- bottom,
48
- left,
49
- right,
50
- zIndex,
51
- fontSize,
52
- fontFamily,
53
- lineHeight,
54
- textAlign,
55
- fontWeight,
56
- color,
57
- backgroundColor,
58
- borderRadius,
59
- borderWidth,
60
- borderStyle,
61
- borderColor,
62
- boxShadow,
63
- opacity,
64
- overflow,
65
- overflowX,
66
- overflowY,
67
- ...htmlProps
68
- },
69
- ref
70
- ) => {
71
- return (
72
- <button
73
- ref={ref}
74
- className={clsx(
75
- buttonRecipe({ variant, size, fullWidth }),
76
- sprinkles({
77
- margin,
78
- marginTop,
79
- marginBottom,
80
- marginLeft,
81
- marginRight,
82
- padding,
83
- paddingTop,
84
- paddingBottom,
85
- paddingLeft,
86
- paddingRight,
87
- gap,
88
- display,
89
- flexDirection,
90
- justifyContent,
91
- flexWrap,
92
- flex,
93
- width,
94
- height,
95
- minWidth,
96
- maxWidth,
97
- minHeight,
98
- position,
99
- top,
100
- bottom,
101
- left,
102
- right,
103
- zIndex,
104
- fontSize,
105
- fontFamily,
106
- lineHeight,
107
- textAlign,
108
- fontWeight,
109
- color,
110
- backgroundColor,
111
- borderRadius,
112
- borderWidth,
113
- borderStyle,
114
- borderColor,
115
- boxShadow,
116
- opacity,
117
- overflow,
118
- overflowX,
119
- overflowY,
120
- }),
121
- css,
122
- className
123
- )}
124
- disabled={disabled || isPending}
125
- {...htmlProps}>
126
- {isPending ? 'Loading...' : children}
127
- </button>
128
- );
129
- }
130
- );
131
-
132
- Button.displayName = 'Button';