@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,169 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { navSocialLink, navSocialRecipe, type NavSocialVariants } from './NavSocial.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
- import { Icon } from '../Icon/Icon';
6
-
7
- export type SocialNetwork = 'instagram' | 'linkedIn' | 'facebook' | 'pinterest' | 'spotify' | 'X' | 'youtube' | 'tiktok';
8
-
9
- export interface SocialLink {
10
- name: SocialNetwork;
11
- url: string;
12
- label?: string;
13
- }
14
-
15
- export interface NavSocialProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavSocialVariants> {
16
- css?: string;
17
- links: SocialLink[];
18
- iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
19
- as?: 'nav' | 'div' | 'ul';
20
- }
21
-
22
- export const NavSocial = forwardRef<HTMLElement, NavSocialProps>(
23
- (
24
- {
25
- links,
26
- iconSize = 'md',
27
- orientation,
28
- size,
29
- variant,
30
- as: Component = 'nav',
31
- css,
32
- className,
33
- // Extract sprinkles props
34
- margin,
35
- marginTop,
36
- marginBottom,
37
- marginLeft,
38
- marginRight,
39
- padding,
40
- paddingTop,
41
- paddingBottom,
42
- paddingLeft,
43
- paddingRight,
44
- gap,
45
- display,
46
- flexDirection,
47
- justifyContent,
48
- flexWrap,
49
- flex,
50
- width,
51
- height,
52
- minWidth,
53
- maxWidth,
54
- minHeight,
55
- position,
56
- top,
57
- bottom,
58
- left,
59
- right,
60
- zIndex,
61
- fontSize,
62
- fontFamily,
63
- lineHeight,
64
- textAlign,
65
- fontWeight,
66
- color,
67
- backgroundColor,
68
- borderRadius,
69
- borderWidth,
70
- borderStyle,
71
- borderColor,
72
- boxShadow,
73
- opacity,
74
- overflow,
75
- overflowX,
76
- overflowY,
77
- ...htmlProps
78
- },
79
- ref
80
- ) => {
81
- const getSocialIcon = (name: SocialNetwork): string => {
82
- const iconMap: Record<SocialNetwork, string> = {
83
- instagram: 'socialInstagram',
84
- linkedIn: 'socialLinkedIn',
85
- facebook: 'socialFacebook',
86
- pinterest: 'socialPinterest',
87
- spotify: 'socialSpotify',
88
- X: 'socialX',
89
- youtube: 'socialYoutube',
90
- tiktok: 'socialTiktok',
91
- };
92
- return iconMap[name];
93
- };
94
-
95
- return (
96
- <Component
97
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
98
- ref={ref as any}
99
- className={clsx(
100
- navSocialRecipe({ orientation, size, variant }),
101
- sprinkles({
102
- margin,
103
- marginTop,
104
- marginBottom,
105
- marginLeft,
106
- marginRight,
107
- padding,
108
- paddingTop,
109
- paddingBottom,
110
- paddingLeft,
111
- paddingRight,
112
- gap,
113
- display,
114
- flexDirection,
115
- justifyContent,
116
- flexWrap,
117
- flex,
118
- width,
119
- height,
120
- minWidth,
121
- maxWidth,
122
- minHeight,
123
- position,
124
- top,
125
- bottom,
126
- left,
127
- right,
128
- zIndex,
129
- fontSize,
130
- fontFamily,
131
- lineHeight,
132
- textAlign,
133
- fontWeight,
134
- color,
135
- backgroundColor,
136
- borderRadius,
137
- borderWidth,
138
- borderStyle,
139
- borderColor,
140
- boxShadow,
141
- opacity,
142
- overflow,
143
- overflowX,
144
- overflowY,
145
- }),
146
- css,
147
- className
148
- )}
149
- role="navigation"
150
- aria-label="Social media links"
151
- {...htmlProps}>
152
- {links.map((social, index) => (
153
- <a
154
- key={`${social.name}-${index}`}
155
- href={social.url}
156
- target="_blank"
157
- rel="noopener noreferrer"
158
- className={navSocialLink}
159
- aria-label={social.label || `Visit our ${social.name} page`}>
160
- {/*eslint-disable-next-line @typescript-eslint/no-explicit-any*/}
161
- <Icon icon={getSocialIcon(social.name) as any} size={iconSize} aria-hidden="true" />
162
- </a>
163
- ))}
164
- </Component>
165
- );
166
- }
167
- );
168
-
169
- NavSocial.displayName = 'NavSocial';
@@ -1,101 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../themes/contract.css';
4
-
5
- const sectionBase = style({
6
- width: '100%',
7
- display: 'flex',
8
- flexDirection: 'column',
9
- alignItems: 'center',
10
- justifyContent: 'flex-start',
11
- paddingTop: themeContract.section.paddingTop,
12
- paddingBottom: themeContract.section.paddingBottom,
13
- paddingLeft: themeContract.space.md,
14
- paddingRight: themeContract.space.md,
15
- maxWidth: themeContract.maxWidth,
16
- margin: '0 auto',
17
- position: 'relative',
18
-
19
- '@media': {
20
- 'screen and (min-width: 768px)': {
21
- paddingLeft: themeContract.space.lg,
22
- paddingRight: themeContract.space.lg,
23
- },
24
- 'screen and (min-width: 1024px)': {
25
- paddingLeft: themeContract.space.xl,
26
- paddingRight: themeContract.space.xl,
27
- },
28
- },
29
- });
30
-
31
- export const sectionRecipe = recipe({
32
- base: sectionBase,
33
-
34
- variants: {
35
- align: {
36
- left: {
37
- textAlign: 'left',
38
- alignItems: 'flex-start',
39
- },
40
- center: {
41
- textAlign: 'center',
42
- alignItems: 'center',
43
- },
44
- right: {
45
- textAlign: 'right',
46
- alignItems: 'flex-end',
47
- },
48
- },
49
- isDark: {
50
- true: {
51
- backgroundColor: themeContract.colors.surface,
52
- color: themeContract.colors.textLight,
53
- },
54
- false: {
55
- backgroundColor: themeContract.colors.background,
56
- color: themeContract.colors.text,
57
- },
58
- },
59
- isFullHeight: {
60
- true: {
61
- minHeight: '100vh',
62
- justifyContent: 'center',
63
- },
64
- false: {
65
- minHeight: 'auto',
66
- justifyContent: 'flex-start',
67
- },
68
- },
69
- spacing: {
70
- none: {
71
- paddingTop: '0',
72
- paddingBottom: '0',
73
- },
74
- sm: {
75
- paddingTop: themeContract.space.md,
76
- paddingBottom: themeContract.space.md,
77
- },
78
- md: {
79
- paddingTop: themeContract.section.paddingTop,
80
- paddingBottom: themeContract.section.paddingBottom,
81
- },
82
- lg: {
83
- paddingTop: themeContract.space.xl,
84
- paddingBottom: themeContract.space.xl,
85
- },
86
- xl: {
87
- paddingTop: themeContract.space['2xl'],
88
- paddingBottom: themeContract.space['2xl'],
89
- },
90
- },
91
- },
92
-
93
- defaultVariants: {
94
- align: 'left',
95
- isDark: false,
96
- isFullHeight: false,
97
- spacing: 'md',
98
- },
99
- });
100
-
101
- export type SectionVariants = RecipeVariants<typeof sectionRecipe>;
@@ -1,130 +0,0 @@
1
- 'use client';
2
-
3
- import { clsx } from 'clsx';
4
- import { forwardRef } from 'react';
5
- import { sectionRecipe, type SectionVariants } from './Section.css';
6
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
7
-
8
- export interface SectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<SectionVariants> {
9
- css?: string;
10
- as?: 'section' | 'div' | 'main' | 'article' | 'aside';
11
- }
12
-
13
- export const Section = forwardRef<HTMLDivElement, SectionProps>(
14
- (
15
- {
16
- children,
17
- align,
18
- isDark,
19
- isFullHeight,
20
- spacing,
21
- as: Component = 'section',
22
- css,
23
- className,
24
- // Extract sprinkles props
25
- margin,
26
- marginTop,
27
- marginBottom,
28
- marginLeft,
29
- marginRight,
30
- padding,
31
- paddingTop,
32
- paddingBottom,
33
- paddingLeft,
34
- paddingRight,
35
- gap,
36
- display,
37
- flexDirection,
38
- justifyContent,
39
- flexWrap,
40
- flex,
41
- width,
42
- height,
43
- minWidth,
44
- maxWidth,
45
- minHeight,
46
- position,
47
- top,
48
- bottom,
49
- left,
50
- right,
51
- zIndex,
52
- fontSize,
53
- fontFamily,
54
- lineHeight,
55
- textAlign,
56
- fontWeight,
57
- color,
58
- backgroundColor,
59
- borderRadius,
60
- borderWidth,
61
- borderStyle,
62
- borderColor,
63
- boxShadow,
64
- opacity,
65
- overflow,
66
- overflowX,
67
- overflowY,
68
- ...htmlProps
69
- },
70
- ref
71
- ) => {
72
- return (
73
- <Component
74
- ref={ref}
75
- className={clsx(
76
- sectionRecipe({ align, isDark, isFullHeight, spacing }),
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
- );
@@ -1,210 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../themes/contract.css';
4
-
5
- const videoBase = style({
6
- position: 'relative',
7
- overflow: 'hidden',
8
- backgroundColor: themeContract.colors.background,
9
- });
10
-
11
- const videoElement = style({
12
- top: '50%',
13
- left: '50%',
14
- width: 'auto',
15
- minWidth: '100%',
16
- minHeight: '100%',
17
- position: 'absolute',
18
- transform: 'translate(-50%, -50%)',
19
- });
20
-
21
- const videoPoster = style({
22
- top: 0,
23
- left: 0,
24
- width: '100%',
25
- height: '100%',
26
- position: 'absolute',
27
- opacity: 1,
28
- transition: 'opacity 0.3s ease-in-out',
29
- pointerEvents: 'auto',
30
-
31
- // selectors: {
32
- // '&[data-playing="true"]': {
33
- // opacity: 0,
34
- // pointerEvents: 'none',
35
- // },
36
- // },
37
- });
38
-
39
- const posterImage = style({
40
- width: '100%',
41
- height: '100%',
42
- minWidth: '100%',
43
- minHeight: '100%',
44
- objectFit: 'cover',
45
- });
46
-
47
- const playButton = style({
48
- position: 'absolute',
49
- top: '50%',
50
- left: '50%',
51
- transform: 'translate(-50%, -50%)',
52
- border: 'none',
53
- borderRadius: themeContract.radii.full,
54
- backgroundColor: 'rgba(0, 0, 0, 0.7)',
55
- color: themeContract.colors.background,
56
- cursor: 'pointer',
57
- transition: 'all 0.3s ease-in-out',
58
- display: 'flex',
59
- alignItems: 'center',
60
- justifyContent: 'center',
61
- opacity: 1,
62
- pointerEvents: 'auto',
63
-
64
- ':hover': {
65
- backgroundColor: 'rgba(0, 0, 0, 0.9)',
66
- transform: 'translate(-50%, -50%) scale(1.1)',
67
- },
68
-
69
- ':focus': {
70
- outline: '2px solid',
71
- outlineColor: themeContract.colors.primary,
72
- outlineOffset: '2px',
73
- },
74
-
75
- // selectors: {
76
- // '&[data-playing="true"]': {
77
- // opacity: 0,
78
- // pointerEvents: 'none',
79
- // },
80
- // '&[data-hidden="true"]': {
81
- // display: 'none',
82
- // },
83
- // },
84
- });
85
-
86
- const controlButton = style({
87
- position: 'absolute',
88
- border: 'none',
89
- borderRadius: themeContract.radii.md,
90
- backgroundColor: 'rgba(0, 0, 0, 0.7)',
91
- color: themeContract.colors.background,
92
- cursor: 'pointer',
93
- transition: 'all 0.3s ease-in-out',
94
- display: 'flex',
95
- alignItems: 'center',
96
- justifyContent: 'center',
97
-
98
- // ':hover': {
99
- // backgroundColor: 'rgba(0, 0, 0, 0.9)',
100
- // },
101
-
102
- // ':focus': {
103
- // outline: '2px solid',
104
- // outlineColor: themeContract.colors.primary,
105
- // outlineOffset: '2px',
106
- // },
107
- });
108
-
109
- const closeButton = style([
110
- controlButton,
111
- {
112
- top: themeContract.space.md,
113
- right: themeContract.space.md,
114
- width: '40px',
115
- height: '40px',
116
-
117
- '@media': {
118
- 'screen and (min-width: 768px)': {
119
- width: '48px',
120
- height: '48px',
121
- top: themeContract.space.lg,
122
- right: themeContract.space.lg,
123
- },
124
- },
125
- },
126
- ]);
127
-
128
- const pauseButton = style([
129
- controlButton,
130
- {
131
- bottom: themeContract.space.md,
132
- right: '80px',
133
- width: '40px',
134
- height: '40px',
135
-
136
- '@media': {
137
- 'screen and (min-width: 768px)': {
138
- width: '48px',
139
- height: '48px',
140
- bottom: themeContract.space.lg,
141
- right: '100px',
142
- },
143
- },
144
- },
145
- ]);
146
-
147
- const soundButton = style([
148
- controlButton,
149
- {
150
- bottom: themeContract.space.md,
151
- right: themeContract.space.md,
152
- width: '40px',
153
- height: '40px',
154
-
155
- '@media': {
156
- 'screen and (min-width: 768px)': {
157
- width: '48px',
158
- height: '48px',
159
- bottom: themeContract.space.lg,
160
- right: themeContract.space.lg,
161
- },
162
- },
163
- },
164
- ]);
165
-
166
- export const videoRecipe = recipe({
167
- base: videoBase,
168
-
169
- variants: {
170
- size: {
171
- sm: {
172
- width: '300px',
173
- height: '200px',
174
- },
175
- md: {
176
- width: '500px',
177
- height: '300px',
178
- },
179
- lg: {
180
- width: '800px',
181
- height: '450px',
182
- },
183
- fullWidth: {
184
- width: '100vw',
185
- height: 0,
186
- paddingBottom: '56.25%', // 16:9 aspect ratio
187
- position: 'relative',
188
- },
189
- },
190
- aspectRatio: {
191
- '16:9': {
192
- aspectRatio: '16/9',
193
- },
194
- '4:3': {
195
- aspectRatio: '4/3',
196
- },
197
- '1:1': {
198
- aspectRatio: '1/1',
199
- },
200
- },
201
- },
202
-
203
- defaultVariants: {
204
- size: 'md',
205
- aspectRatio: '16:9',
206
- },
207
- });
208
-
209
- export { videoElement, videoPoster, posterImage, playButton, closeButton, pauseButton, soundButton };
210
- export type VideoVariants = RecipeVariants<typeof videoRecipe>;