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

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 +31 -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
@@ -1,179 +0,0 @@
1
- import { keyframes, 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
- keyframes({
6
- '0%': { transform: 'translateX(0)' },
7
- '100%': { transform: 'translateX(var(--slide-offset))' },
8
- });
9
-
10
- const carouselBase = style({
11
- position: 'relative',
12
- overflow: 'hidden',
13
- width: '100%',
14
- });
15
-
16
- const carouselContent = style({
17
- width: '100%',
18
- position: 'relative',
19
- });
20
-
21
- const carouselSlide = style({
22
- display: 'flex',
23
- position: 'relative',
24
- transition: 'transform 0.3s ease-in-out',
25
- willChange: 'transform',
26
- });
27
-
28
- const carouselItem = style({
29
- width: '100%',
30
- display: 'flex',
31
- position: 'relative',
32
- alignItems: 'stretch',
33
- flexShrink: 0,
34
- });
35
-
36
- const carouselNav = style({
37
- position: 'absolute',
38
- bottom: 0,
39
- left: 0,
40
- right: 0,
41
- zIndex: 30,
42
- width: '100%',
43
- maxWidth: themeContract.maxWidth,
44
- display: 'flex',
45
- justifyContent: 'flex-end',
46
- pointerEvents: 'none',
47
- gap: themeContract.space.sm,
48
- padding: themeContract.space.md,
49
- });
50
-
51
- const carouselNavButton = style({
52
- border: 'none',
53
- borderRadius: themeContract.radii.full,
54
- backgroundColor: themeContract.colors.background,
55
- color: themeContract.colors.text,
56
- padding: themeContract.space.sm,
57
- cursor: 'pointer',
58
- pointerEvents: 'auto',
59
- transition: 'all 0.3s ease-in-out',
60
- boxShadow: themeContract.shadows.md,
61
- display: 'flex',
62
- alignItems: 'center',
63
- justifyContent: 'center',
64
- width: '48px',
65
- height: '48px',
66
-
67
- // ':hover': {
68
- // transform: 'scale(1.1)',
69
- // backgroundColor: themeContract.colors.primary,
70
- // color: themeContract.colors.background,
71
- // },
72
-
73
- // ':focus': {
74
- // outline: '2px solid',
75
- // outlineColor: themeContract.colors.primary,
76
- // outlineOffset: '2px',
77
- // },
78
-
79
- // ':disabled': {
80
- // opacity: '0.5',
81
- // cursor: 'not-allowed',
82
- // transform: 'none',
83
- // },
84
- // selectors: {
85
- // ':disabled:hover': {
86
- // transform: 'none',
87
- // backgroundColor: themeContract.colors.background,
88
- // color: themeContract.colors.text,
89
- // },
90
- // },
91
- });
92
-
93
- const carouselBullets = style({
94
- display: 'flex',
95
- alignItems: 'center',
96
- justifyContent: 'center',
97
- gap: themeContract.space.md,
98
- marginTop: themeContract.space.lg,
99
-
100
- '@media': {
101
- [queries.lg]: {
102
- marginTop: themeContract.space.xl,
103
- },
104
- },
105
- });
106
-
107
- const carouselBullet = style({
108
- width: '12px',
109
- height: '12px',
110
- borderRadius: themeContract.radii.full,
111
- backgroundColor: themeContract.colors.border,
112
- cursor: 'pointer',
113
- transition: 'all 0.3s ease-in-out',
114
- border: 'none',
115
-
116
- ':hover': {
117
- transform: 'scale(1.2)',
118
- backgroundColor: themeContract.colors.primary,
119
- },
120
-
121
- ':focus': {
122
- outline: '2px solid',
123
- outlineColor: themeContract.colors.primary,
124
- outlineOffset: '2px',
125
- },
126
-
127
- '@media': {
128
- [queries.md]: {
129
- width: '16px',
130
- height: '16px',
131
- },
132
- },
133
- });
134
-
135
- export const carouselRecipe = recipe({
136
- base: carouselBase,
137
-
138
- variants: {
139
- fullWidth: {
140
- true: {
141
- width: '100vw',
142
- marginLeft: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
143
- marginRight: `calc((100vw - ${themeContract.maxWidth}) / -2)`,
144
-
145
- '@media': {
146
- 'screen and (max-width: 1500px)': {
147
- marginLeft: `calc(-1 * ${themeContract.space.md})`,
148
- marginRight: `calc(-1 * ${themeContract.space.md})`,
149
- },
150
- [queries.md]: {
151
- marginLeft: `calc(-1 * ${themeContract.space.lg})`,
152
- marginRight: `calc(-1 * ${themeContract.space.lg})`,
153
- },
154
- [queries.lg]: {
155
- marginLeft: `calc(-1 * ${themeContract.space.xl})`,
156
- marginRight: `calc(-1 * ${themeContract.space.xl})`,
157
- },
158
- },
159
- },
160
- false: {
161
- width: '100%',
162
- },
163
- },
164
- },
165
-
166
- defaultVariants: {
167
- fullWidth: false,
168
- },
169
- });
170
-
171
- const carouselBulletActive = style({
172
- backgroundColor: themeContract.colors.primary,
173
- pointerEvents: 'none',
174
- opacity: 1,
175
- });
176
-
177
- export { carouselContent, carouselSlide, carouselItem, carouselNav, carouselNavButton, carouselBullets, carouselBullet, carouselBulletActive };
178
-
179
- export type CarouselVariants = RecipeVariants<typeof carouselRecipe>;
@@ -1,185 +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 columnsBase = style({
7
- display: 'flex',
8
- flexDirection: 'column',
9
- alignItems: 'flex-start',
10
- justifyContent: 'flex-start',
11
- width: '100%',
12
- gap: themeContract.space.md,
13
-
14
- '@media': {
15
- [queries.md]: {
16
- flexDirection: 'row',
17
- alignItems: 'stretch',
18
- gap: themeContract.space.lg,
19
- },
20
- [queries.lg]: {
21
- gap: themeContract.space.xl,
22
- },
23
- },
24
- });
25
-
26
- // Generate column width utilities
27
- const columnWidths = {
28
- 1: style({
29
- '@media': {
30
- [queries.md]: {
31
- flex: '0 0 100%',
32
- maxWidth: '100%',
33
- },
34
- },
35
- }),
36
- 2: style({
37
- '@media': {
38
- [queries.md]: {
39
- flex: '0 0 50%',
40
- maxWidth: '50%',
41
- },
42
- },
43
- }),
44
- 3: style({
45
- '@media': {
46
- [queries.md]: {
47
- flex: '0 0 33.333333%',
48
- maxWidth: '33.333333%',
49
- },
50
- },
51
- }),
52
- 4: style({
53
- '@media': {
54
- [queries.md]: {
55
- flex: '0 0 25%',
56
- maxWidth: '25%',
57
- },
58
- },
59
- }),
60
- 6: style({
61
- '@media': {
62
- [queries.md]: {
63
- flex: '0 0 16.666667%',
64
- maxWidth: '16.666667%',
65
- },
66
- },
67
- }),
68
- 12: style({
69
- '@media': {
70
- [queries.md]: {
71
- flex: '0 0 8.333333%',
72
- maxWidth: '8.333333%',
73
- },
74
- },
75
- }),
76
- };
77
-
78
- export const columnsRecipe = recipe({
79
- base: columnsBase,
80
-
81
- variants: {
82
- align: {
83
- left: {
84
- textAlign: 'left',
85
- justifyContent: 'flex-start',
86
- },
87
- center: {
88
- textAlign: 'center',
89
- justifyContent: 'center',
90
- },
91
- right: {
92
- textAlign: 'right',
93
- justifyContent: 'flex-end',
94
- },
95
- },
96
- spacing: {
97
- none: {
98
- gap: '0',
99
- },
100
- sm: {
101
- gap: themeContract.space.sm,
102
- '@media': {
103
- [queries.md]: {
104
- gap: themeContract.space.md,
105
- },
106
- },
107
- },
108
- md: {
109
- gap: themeContract.space.md,
110
- '@media': {
111
- [queries.md]: {
112
- gap: themeContract.space.lg,
113
- },
114
- },
115
- },
116
- lg: {
117
- gap: themeContract.space.lg,
118
- '@media': {
119
- [queries.md]: {
120
- gap: themeContract.space.xl,
121
- },
122
- },
123
- },
124
- },
125
- wrap: {
126
- true: {
127
- flexWrap: 'wrap',
128
- },
129
- false: {
130
- flexWrap: 'nowrap',
131
- },
132
- },
133
- reverse: {
134
- true: {
135
- '@media': {
136
- [queries.md]: {
137
- flexDirection: 'row-reverse',
138
- },
139
- },
140
- },
141
- false: {},
142
- },
143
- alignItems: {
144
- start: {
145
- '@media': {
146
- [queries.md]: {
147
- alignItems: 'flex-start',
148
- },
149
- },
150
- },
151
- center: {
152
- '@media': {
153
- [queries.md]: {
154
- alignItems: 'center',
155
- },
156
- },
157
- },
158
- end: {
159
- '@media': {
160
- [queries.md]: {
161
- alignItems: 'flex-end',
162
- },
163
- },
164
- },
165
- stretch: {
166
- '@media': {
167
- [queries.md]: {
168
- alignItems: 'stretch',
169
- },
170
- },
171
- },
172
- },
173
- },
174
-
175
- defaultVariants: {
176
- align: 'left',
177
- spacing: 'md',
178
- wrap: true,
179
- reverse: false,
180
- alignItems: 'stretch',
181
- },
182
- });
183
-
184
- export { columnWidths };
185
- export type ColumnsVariants = RecipeVariants<typeof columnsRecipe>;
@@ -1,142 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { columnsRecipe, type ColumnsVariants, columnWidths } from './Columns.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface ColumnsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<ColumnsVariants> {
7
- css?: string;
8
- columns?: (keyof typeof columnWidths)[];
9
- as?: 'div' | 'section' | 'article';
10
- }
11
-
12
- export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(
13
- (
14
- {
15
- children,
16
- columns,
17
- align,
18
- spacing,
19
- wrap,
20
- reverse,
21
- alignItems,
22
- as: Component = 'div',
23
- css,
24
- className,
25
- // Extract sprinkles props
26
- margin,
27
- marginTop,
28
- marginBottom,
29
- marginLeft,
30
- marginRight,
31
- padding,
32
- paddingTop,
33
- paddingBottom,
34
- paddingLeft,
35
- paddingRight,
36
- gap,
37
- display,
38
- flexDirection,
39
- justifyContent,
40
- flexWrap,
41
- flex,
42
- width,
43
- height,
44
- minWidth,
45
- maxWidth,
46
- minHeight,
47
- position,
48
- top,
49
- bottom,
50
- left,
51
- right,
52
- zIndex,
53
- fontSize,
54
- fontFamily,
55
- lineHeight,
56
- textAlign,
57
- fontWeight,
58
- color,
59
- backgroundColor,
60
- borderRadius,
61
- borderWidth,
62
- borderStyle,
63
- borderColor,
64
- boxShadow,
65
- opacity,
66
- overflow,
67
- overflowX,
68
- overflowY,
69
- ...htmlProps
70
- },
71
- ref
72
- ) => {
73
- const childrenArray = Array.isArray(children) ? children : [children];
74
-
75
- return (
76
- <Component
77
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
78
- ref={ref as any}
79
- className={clsx(
80
- columnsRecipe({ align, spacing, wrap, reverse, alignItems }),
81
- sprinkles({
82
- margin,
83
- marginTop,
84
- marginBottom,
85
- marginLeft,
86
- marginRight,
87
- padding,
88
- paddingTop,
89
- paddingBottom,
90
- paddingLeft,
91
- paddingRight,
92
- gap,
93
- display,
94
- flexDirection,
95
- justifyContent,
96
- flexWrap,
97
- flex,
98
- width,
99
- height,
100
- minWidth,
101
- maxWidth,
102
- minHeight,
103
- position,
104
- top,
105
- bottom,
106
- left,
107
- right,
108
- zIndex,
109
- fontSize,
110
- fontFamily,
111
- lineHeight,
112
- textAlign,
113
- fontWeight,
114
- color,
115
- backgroundColor,
116
- borderRadius,
117
- borderWidth,
118
- borderStyle,
119
- borderColor,
120
- boxShadow,
121
- opacity,
122
- overflow,
123
- overflowX,
124
- overflowY,
125
- }),
126
- css,
127
- className
128
- )}
129
- {...htmlProps}>
130
- {columns && columns.length > 0
131
- ? childrenArray.map((child, index) => (
132
- <div key={index} className={clsx(columns[index] && columnWidths[columns[index]])}>
133
- {child}
134
- </div>
135
- ))
136
- : children}
137
- </Component>
138
- );
139
- }
140
- );
141
-
142
- Columns.displayName = 'Columns';
@@ -1,108 +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 footerBase = style({
7
- display: 'flex',
8
- alignItems: 'center',
9
- justifyContent: 'space-between',
10
- flexDirection: 'column',
11
- backgroundColor: themeContract.colors.background,
12
- color: themeContract.colors.text,
13
- zIndex: 20,
14
- paddingLeft: themeContract.space.md,
15
- paddingRight: themeContract.space.md,
16
- paddingTop: themeContract.space.lg,
17
- paddingBottom: themeContract.space.lg,
18
- gap: themeContract.space.md,
19
- fontSize: themeContract.fontSizes.sm,
20
- borderTop: `1px solid ${themeContract.colors.border}`,
21
-
22
- '@media': {
23
- [queries.md]: {
24
- paddingLeft: themeContract.space.lg,
25
- paddingRight: themeContract.space.lg,
26
- gap: themeContract.space.lg,
27
- },
28
- [queries.lg]: {
29
- flexDirection: 'row',
30
- paddingLeft: themeContract.space.xl,
31
- paddingRight: themeContract.space.xl,
32
- gap: themeContract.space.xl,
33
- },
34
- },
35
-
36
- // selectors: {
37
- // '& a': {
38
- // transition: 'all 0.3s ease-in-out',
39
- // textDecoration: 'none',
40
- // color: 'inherit',
41
- // },
42
- // '& a:hover': {
43
- // opacity: '0.7',
44
- // transform: 'translateY(-1px)',
45
- // },
46
- // },
47
- });
48
-
49
- export const footerRecipe = recipe({
50
- base: footerBase,
51
-
52
- variants: {
53
- variant: {
54
- default: {
55
- backgroundColor: themeContract.colors.background,
56
- borderTop: `1px solid ${themeContract.colors.border}`,
57
- },
58
- dark: {
59
- backgroundColor: themeContract.colors.surface,
60
- color: themeContract.colors.textLight,
61
- borderTop: `1px solid ${themeContract.colors.border}`,
62
- },
63
- minimal: {
64
- backgroundColor: 'transparent',
65
- borderTop: 'none',
66
- },
67
- },
68
- size: {
69
- sm: {
70
- paddingTop: themeContract.space.md,
71
- paddingBottom: themeContract.space.md,
72
- fontSize: themeContract.fontSizes.xs,
73
- },
74
- md: {
75
- paddingTop: themeContract.space.lg,
76
- paddingBottom: themeContract.space.lg,
77
- fontSize: themeContract.fontSizes.sm,
78
- },
79
- lg: {
80
- paddingTop: themeContract.space.xl,
81
- paddingBottom: themeContract.space.xl,
82
- fontSize: themeContract.fontSizes.md,
83
- },
84
- },
85
- layout: {
86
- stacked: {
87
- flexDirection: 'column',
88
- textAlign: 'center',
89
- },
90
- horizontal: {
91
- '@media': {
92
- [queries.sm]: {
93
- flexDirection: 'row',
94
- textAlign: 'left',
95
- },
96
- },
97
- },
98
- },
99
- },
100
-
101
- defaultVariants: {
102
- variant: 'default',
103
- size: 'md',
104
- layout: 'horizontal',
105
- },
106
- });
107
-
108
- export type FooterVariants = RecipeVariants<typeof footerRecipe>;