@latte-macchiat-io/latte-vanilla-components 0.0.190 → 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 (101) hide show
  1. package/README.md +16 -6
  2. package/package.json +4 -1
  3. package/src/components/Actions/index.tsx +20 -0
  4. package/src/components/Actions/styles.css.ts +54 -0
  5. package/src/components/Button/index.tsx +29 -0
  6. package/src/components/Button/stories.tsx +4 -22
  7. package/src/components/Button/styles.css.ts +131 -0
  8. package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
  9. package/src/components/Carousel/styles.css.ts +176 -0
  10. package/src/components/Columns/index.tsx +36 -0
  11. package/src/components/Columns/styles.css.ts +70 -0
  12. package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
  13. package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
  14. package/src/components/Footer/index.tsx +21 -0
  15. package/src/components/Footer/styles.css.ts +33 -0
  16. package/src/components/Form/Form.css.ts +1 -1
  17. package/src/components/Form/Row/Row.css.ts +1 -1
  18. package/src/components/Form/TextField/Input/Input.css.ts +1 -1
  19. package/src/components/Form/TextField/Label/Label.css.ts +1 -1
  20. package/src/components/Form/TextField/TextField.css.ts +1 -1
  21. package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
  22. package/src/components/Header/index.tsx +53 -0
  23. package/src/components/Header/styles.css.ts +89 -0
  24. package/src/components/Heading/index.tsx +22 -0
  25. package/src/components/Heading/styles.css.ts +66 -0
  26. package/src/components/Heading/types.tsx +1 -0
  27. package/src/components/Icon/index.tsx +25 -0
  28. package/src/components/Icon/style.css.ts +11 -0
  29. package/src/components/KeyNumber/index.tsx +51 -0
  30. package/src/components/KeyNumber/styles.css.ts +76 -0
  31. package/src/components/LanguageSwitcher/index.tsx +80 -0
  32. package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
  33. package/src/components/Logo/index.tsx +13 -0
  34. package/src/components/Logo/styles.css.ts +14 -0
  35. package/src/components/Main/index.tsx +17 -0
  36. package/src/components/Main/styles.css.ts +14 -0
  37. package/src/components/Modal/index.tsx +42 -0
  38. package/src/components/Modal/stories.tsx +14 -358
  39. package/src/components/Modal/styles.css.ts +90 -0
  40. package/src/components/Nav/index.tsx +22 -0
  41. package/src/components/Nav/styles.css.ts +30 -0
  42. package/src/components/NavLegal/index.tsx +17 -0
  43. package/src/components/NavLegal/styles.css.ts +20 -0
  44. package/src/components/NavSocial/index.tsx +32 -0
  45. package/src/components/NavSocial/styles.css.ts +33 -0
  46. package/src/components/Section/index.tsx +20 -0
  47. package/src/components/Section/stories.tsx +5 -57
  48. package/src/components/Section/styles.css.ts +106 -0
  49. package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
  50. package/src/components/ThemeTest/ThemeTest.tsx +12 -0
  51. package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
  52. package/src/components/Video/index.tsx +117 -0
  53. package/src/components/Video/styles.css.ts +200 -0
  54. package/src/index.ts +29 -41
  55. package/src/styles/mediaqueries.ts +2 -0
  56. package/src/styles/sprinkles.css.ts +11 -8
  57. package/src/theme/baseThemeValues.ts +1235 -0
  58. package/src/theme/contract.css.ts +676 -0
  59. package/src/{themes → theme}/createTheme.ts +40 -1
  60. package/src/theme/default.css.ts +10 -0
  61. package/src/utils/combineResponsive.ts +9 -0
  62. package/src/utils/generateResponsiveMedia.ts +19 -0
  63. package/src/components/Actions/Actions.css.ts +0 -113
  64. package/src/components/Actions/Actions.tsx +0 -132
  65. package/src/components/Button/Button.css.ts +0 -119
  66. package/src/components/Button/Button.tsx +0 -132
  67. package/src/components/Carousel/Carousel.css.ts +0 -179
  68. package/src/components/Columns/Columns.css.ts +0 -185
  69. package/src/components/Columns/Columns.tsx +0 -142
  70. package/src/components/Footer/Footer.css.ts +0 -108
  71. package/src/components/Footer/Footer.tsx +0 -130
  72. package/src/components/Header/Header.css.ts +0 -111
  73. package/src/components/Header/Header.tsx +0 -158
  74. package/src/components/Icon/Icon.css.ts +0 -101
  75. package/src/components/Icon/Icon.tsx +0 -159
  76. package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
  77. package/src/components/KeyNumber/KeyNumber.tsx +0 -166
  78. package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
  79. package/src/components/Logo/Logo.css.ts +0 -98
  80. package/src/components/Logo/Logo.tsx +0 -137
  81. package/src/components/Main/Main.css.ts +0 -62
  82. package/src/components/Main/Main.tsx +0 -130
  83. package/src/components/Modal/Modal.css.ts +0 -203
  84. package/src/components/Modal/Modal.tsx +0 -194
  85. package/src/components/Nav/Nav.css.ts +0 -123
  86. package/src/components/Nav/Nav.tsx +0 -130
  87. package/src/components/NavLegal/NavLegal.css.ts +0 -121
  88. package/src/components/NavLegal/NavLegal.tsx +0 -133
  89. package/src/components/NavSocial/NavSocial.css.ts +0 -121
  90. package/src/components/NavSocial/NavSocial.tsx +0 -169
  91. package/src/components/Section/Section.css.ts +0 -101
  92. package/src/components/Section/Section.tsx +0 -130
  93. package/src/components/Video/Video.css.ts +0 -210
  94. package/src/components/Video/Video.tsx +0 -243
  95. package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
  96. package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
  97. package/src/components/VideoFullWidth/export.tsx +0 -2
  98. package/src/themes/baseThemeValues.ts +0 -160
  99. package/src/themes/contract.css.ts +0 -83
  100. package/src/types/withClassName.ts +0 -4
  101. /package/src/{utils → components/ConsentCookie}/cookie.ts +0 -0
@@ -1,123 +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 navBase = style({
7
- display: 'flex',
8
- alignItems: 'center',
9
- gap: themeContract.space.md,
10
- flexDirection: 'column',
11
-
12
- '@media': {
13
- [queries.md]: {
14
- flexDirection: 'row',
15
- gap: themeContract.space.lg,
16
- },
17
- [queries.lg]: {
18
- gap: themeContract.space.xl,
19
- },
20
- },
21
-
22
- // selectors: {
23
- // '& a': {
24
- // textDecoration: 'none',
25
- // color: 'inherit',
26
- // transition: 'all 0.3s ease-in-out',
27
- // display: 'block',
28
- // padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
29
- // borderRadius: themeContract.radii.sm,
30
- // },
31
- // '& a:hover': {
32
- // backgroundColor: themeContract.colors.surface,
33
- // transform: 'translateY(-1px)',
34
- // },
35
- // '& a:focus': {
36
- // outline: '2px solid',
37
- // outlineColor: themeContract.colors.primary,
38
- // outlineOffset: '2px',
39
- // },
40
- // '& a[aria-current="page"]': {
41
- // backgroundColor: themeContract.colors.primary,
42
- // color: themeContract.colors.background,
43
- // },
44
- // },
45
- });
46
-
47
- export const navRecipe = recipe({
48
- base: navBase,
49
-
50
- variants: {
51
- orientation: {
52
- horizontal: {
53
- flexDirection: 'row',
54
- alignItems: 'center',
55
- },
56
- vertical: {
57
- flexDirection: 'column',
58
- alignItems: 'flex-start',
59
- },
60
- responsive: {
61
- flexDirection: 'column',
62
- alignItems: 'flex-start',
63
-
64
- '@media': {
65
- [queries.md]: {
66
- flexDirection: 'row',
67
- alignItems: 'center',
68
- },
69
- },
70
- },
71
- },
72
- variant: {
73
- default: {
74
- gap: themeContract.space.md,
75
- },
76
- compact: {
77
- gap: themeContract.space.sm,
78
-
79
- // selectors: {
80
- // '& a': {
81
- // padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
82
- // fontSize: themeContract.fontSizes.sm,
83
- // },
84
- // },
85
- },
86
- spacious: {
87
- gap: themeContract.space.lg,
88
-
89
- // selectors: {
90
- // '& a': {
91
- // padding: `${themeContract.space.sm} ${themeContract.space.md}`,
92
- // fontSize: themeContract.fontSizes.lg,
93
- // },
94
- // },
95
- },
96
- },
97
- justify: {
98
- start: {
99
- justifyContent: 'flex-start',
100
- },
101
- center: {
102
- justifyContent: 'center',
103
- },
104
- end: {
105
- justifyContent: 'flex-end',
106
- },
107
- between: {
108
- justifyContent: 'space-between',
109
- },
110
- around: {
111
- justifyContent: 'space-around',
112
- },
113
- },
114
- },
115
-
116
- defaultVariants: {
117
- orientation: 'responsive',
118
- variant: 'default',
119
- justify: 'start',
120
- },
121
- });
122
-
123
- export type NavVariants = RecipeVariants<typeof navRecipe>;
@@ -1,130 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { navRecipe, type NavVariants } from './Nav.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface NavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavVariants> {
7
- css?: string;
8
- as?: 'nav' | 'div' | 'ul';
9
- }
10
-
11
- export const Nav = forwardRef<HTMLElement, NavProps>(
12
- (
13
- {
14
- children,
15
- orientation,
16
- variant,
17
- justify,
18
- as: Component = 'nav',
19
- css,
20
- className,
21
- // Extract sprinkles props
22
- margin,
23
- marginTop,
24
- marginBottom,
25
- marginLeft,
26
- marginRight,
27
- padding,
28
- paddingTop,
29
- paddingBottom,
30
- paddingLeft,
31
- paddingRight,
32
- gap,
33
- display,
34
- flexDirection,
35
- justifyContent,
36
- flexWrap,
37
- flex,
38
- width,
39
- height,
40
- minWidth,
41
- maxWidth,
42
- minHeight,
43
- position,
44
- top,
45
- bottom,
46
- left,
47
- right,
48
- zIndex,
49
- fontSize,
50
- fontFamily,
51
- lineHeight,
52
- textAlign,
53
- fontWeight,
54
- color,
55
- backgroundColor,
56
- borderRadius,
57
- borderWidth,
58
- borderStyle,
59
- borderColor,
60
- boxShadow,
61
- opacity,
62
- overflow,
63
- overflowX,
64
- overflowY,
65
- ...htmlProps
66
- },
67
- ref
68
- ) => {
69
- return (
70
- <Component
71
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
72
- ref={ref as any}
73
- className={clsx(
74
- navRecipe({ orientation, variant, justify }),
75
- sprinkles({
76
- margin,
77
- marginTop,
78
- marginBottom,
79
- marginLeft,
80
- marginRight,
81
- padding,
82
- paddingTop,
83
- paddingBottom,
84
- paddingLeft,
85
- paddingRight,
86
- gap,
87
- display,
88
- flexDirection,
89
- justifyContent,
90
- flexWrap,
91
- flex,
92
- width,
93
- height,
94
- minWidth,
95
- maxWidth,
96
- minHeight,
97
- position,
98
- top,
99
- bottom,
100
- left,
101
- right,
102
- zIndex,
103
- fontSize,
104
- fontFamily,
105
- lineHeight,
106
- textAlign,
107
- fontWeight,
108
- color,
109
- backgroundColor,
110
- borderRadius,
111
- borderWidth,
112
- borderStyle,
113
- borderColor,
114
- boxShadow,
115
- opacity,
116
- overflow,
117
- overflowX,
118
- overflowY,
119
- }),
120
- css,
121
- className
122
- )}
123
- {...htmlProps}>
124
- {children}
125
- </Component>
126
- );
127
- }
128
- );
129
-
130
- Nav.displayName = 'Nav';
@@ -1,121 +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 navLegalBase = style({
7
- display: 'flex',
8
- alignItems: 'center',
9
- gap: themeContract.space.md,
10
- fontSize: themeContract.fontSizes.sm,
11
- color: themeContract.colors.textSecondary,
12
- flexDirection: 'column',
13
-
14
- '@media': {
15
- [queries.md]: {
16
- flexDirection: 'row',
17
- gap: themeContract.space.lg,
18
- },
19
- },
20
-
21
- // selectors: {
22
- // '& a': {
23
- // color: 'inherit',
24
- // textDecoration: 'none',
25
- // transition: 'all 0.3s ease-in-out',
26
- // borderRadius: themeContract.radii.sm,
27
- // padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
28
- // },
29
- // '& a:hover': {
30
- // color: themeContract.colors.primary,
31
- // backgroundColor: themeContract.colors.surface,
32
- // },
33
- // '& a:focus': {
34
- // outline: '2px solid',
35
- // outlineColor: themeContract.colors.primary,
36
- // outlineOffset: '2px',
37
- // },
38
- // },
39
- });
40
-
41
- export const navLegalRecipe = recipe({
42
- base: navLegalBase,
43
-
44
- variants: {
45
- orientation: {
46
- horizontal: {
47
- flexDirection: 'row',
48
- },
49
- vertical: {
50
- flexDirection: 'column',
51
- alignItems: 'flex-start',
52
- },
53
- responsive: {
54
- flexDirection: 'column',
55
- alignItems: 'flex-start',
56
-
57
- '@media': {
58
- [queries.md]: {
59
- flexDirection: 'row',
60
- alignItems: 'center',
61
- },
62
- },
63
- },
64
- },
65
- size: {
66
- sm: {
67
- fontSize: themeContract.fontSizes.xs,
68
- gap: themeContract.space.sm,
69
- },
70
- md: {
71
- fontSize: themeContract.fontSizes.sm,
72
- gap: themeContract.space.md,
73
- },
74
- lg: {
75
- fontSize: themeContract.fontSizes.md,
76
- gap: themeContract.space.lg,
77
- },
78
- },
79
- variant: {
80
- default: {},
81
- compact: {
82
- gap: themeContract.space.sm,
83
-
84
- // selectors: {
85
- // '& a': {
86
- // padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
87
- // },
88
- // },
89
- },
90
- spacious: {
91
- gap: themeContract.space.xl,
92
-
93
- // selectors: {
94
- // '& a': {
95
- // padding: `${themeContract.space.sm} ${themeContract.space.md}`,
96
- // },
97
- // },
98
- },
99
- },
100
- align: {
101
- left: {
102
- justifyContent: 'flex-start',
103
- },
104
- center: {
105
- justifyContent: 'center',
106
- },
107
- right: {
108
- justifyContent: 'flex-end',
109
- },
110
- },
111
- },
112
-
113
- defaultVariants: {
114
- orientation: 'responsive',
115
- size: 'md',
116
- variant: 'default',
117
- align: 'left',
118
- },
119
- });
120
-
121
- export type NavLegalVariants = RecipeVariants<typeof navLegalRecipe>;
@@ -1,133 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { navLegalRecipe, type NavLegalVariants } from './NavLegal.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface NavLegalProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<NavLegalVariants> {
7
- css?: string;
8
- as?: 'nav' | 'div' | 'footer';
9
- }
10
-
11
- export const NavLegal = forwardRef<HTMLElement, NavLegalProps>(
12
- (
13
- {
14
- children,
15
- orientation,
16
- size,
17
- variant,
18
- align,
19
- as: Component = 'nav',
20
- css,
21
- className,
22
- // Extract sprinkles props
23
- margin,
24
- marginTop,
25
- marginBottom,
26
- marginLeft,
27
- marginRight,
28
- padding,
29
- paddingTop,
30
- paddingBottom,
31
- paddingLeft,
32
- paddingRight,
33
- gap,
34
- display,
35
- flexDirection,
36
- justifyContent,
37
- flexWrap,
38
- flex,
39
- width,
40
- height,
41
- minWidth,
42
- maxWidth,
43
- minHeight,
44
- position,
45
- top,
46
- bottom,
47
- left,
48
- right,
49
- zIndex,
50
- fontSize,
51
- fontFamily,
52
- lineHeight,
53
- textAlign,
54
- fontWeight,
55
- color,
56
- backgroundColor,
57
- borderRadius,
58
- borderWidth,
59
- borderStyle,
60
- borderColor,
61
- boxShadow,
62
- opacity,
63
- overflow,
64
- overflowX,
65
- overflowY,
66
- ...htmlProps
67
- },
68
- ref
69
- ) => {
70
- return (
71
- <Component
72
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
73
- ref={ref as any}
74
- className={clsx(
75
- navLegalRecipe({ orientation, size, variant, align }),
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
- role="navigation"
125
- aria-label="Legal navigation"
126
- {...htmlProps}>
127
- {children}
128
- </Component>
129
- );
130
- }
131
- );
132
-
133
- NavLegal.displayName = 'NavLegal';
@@ -1,121 +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 navSocialBase = style({
7
- display: 'flex',
8
- alignItems: 'center',
9
- gap: themeContract.space.md,
10
-
11
- '@media': {
12
- [queries.md]: {
13
- gap: themeContract.space.lg,
14
- },
15
- },
16
- });
17
-
18
- const navSocialLink = style({
19
- display: 'flex',
20
- alignItems: 'center',
21
- justifyContent: 'center',
22
- textDecoration: 'none',
23
- color: 'inherit',
24
- transition: 'all 0.3s ease-in-out',
25
- borderRadius: themeContract.radii.full,
26
- padding: themeContract.space.xs,
27
-
28
- // ':hover': {
29
- // transform: 'translateY(-2px) scale(1.1)',
30
- // color: themeContract.colors.primary,
31
- // },
32
-
33
- // ':focus': {
34
- // outline: '2px solid',
35
- // outlineColor: themeContract.colors.primary,
36
- // outlineOffset: '2px',
37
- // },
38
-
39
- // ':active': {
40
- // transform: 'translateY(0) scale(1.05)',
41
- // },
42
- });
43
-
44
- export const navSocialRecipe = recipe({
45
- base: navSocialBase,
46
-
47
- variants: {
48
- orientation: {
49
- horizontal: {
50
- flexDirection: 'row',
51
- },
52
- vertical: {
53
- flexDirection: 'column',
54
- },
55
- },
56
- size: {
57
- sm: {
58
- gap: themeContract.space.sm,
59
-
60
- // selectors: {
61
- // [`& .${navSocialLink}`]: {
62
- // padding: themeContract.space.xs,
63
- // },
64
- // },
65
- },
66
- md: {
67
- gap: themeContract.space.md,
68
- },
69
- lg: {
70
- gap: themeContract.space.lg,
71
-
72
- // selectors: {
73
- // [`& .${navSocialLink}`]: {
74
- // padding: themeContract.space.sm,
75
- // },
76
- // },
77
- },
78
- },
79
- variant: {
80
- default: {},
81
- rounded: {
82
- // selectors: {
83
- // [`& .${navSocialLink}`]: {
84
- // backgroundColor: themeContract.colors.surface,
85
- // borderRadius: themeContract.radii.full,
86
- // width: '40px',
87
- // height: '40px',
88
- // },
89
- // [`& .${navSocialLink}:hover`]: {
90
- // backgroundColor: themeContract.colors.primary,
91
- // color: themeContract.colors.background,
92
- // },
93
- // },
94
- },
95
- outlined: {
96
- // selectors: {
97
- // [`& .${navSocialLink}`]: {
98
- // border: `1px solid ${themeContract.colors.border}`,
99
- // borderRadius: themeContract.radii.md,
100
- // width: '40px',
101
- // height: '40px',
102
- // },
103
- // [`& .${navSocialLink}:hover`]: {
104
- // borderColor: themeContract.colors.primary,
105
- // backgroundColor: themeContract.colors.primary,
106
- // color: themeContract.colors.background,
107
- // },
108
- // },
109
- },
110
- },
111
- },
112
-
113
- defaultVariants: {
114
- orientation: 'horizontal',
115
- size: 'md',
116
- variant: 'default',
117
- },
118
- });
119
-
120
- export { navSocialLink };
121
- export type NavSocialVariants = RecipeVariants<typeof navSocialRecipe>;