@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,130 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { footerRecipe, type FooterVariants } from './Footer.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface FooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<FooterVariants> {
7
- css?: string;
8
- as?: 'footer' | 'div';
9
- }
10
-
11
- export const Footer = forwardRef<HTMLElement, FooterProps>(
12
- (
13
- {
14
- children,
15
- variant,
16
- size,
17
- layout,
18
- as: Component = 'footer',
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
- footerRecipe({ variant, size, layout }),
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
- Footer.displayName = 'Footer';
@@ -1,111 +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 headerBase = style({
7
- display: 'flex',
8
- alignItems: 'center',
9
- justifyContent: 'space-between',
10
- width: '100%',
11
- height: themeContract.header.height,
12
- backgroundColor: themeContract.colors.background,
13
- color: themeContract.colors.text,
14
- zIndex: 30,
15
- paddingLeft: themeContract.space.md,
16
- paddingRight: themeContract.space.md,
17
- paddingTop: themeContract.space.sm,
18
- paddingBottom: themeContract.space.sm,
19
- gap: themeContract.space.md,
20
-
21
- '@media': {
22
- [queries.md]: {
23
- paddingLeft: themeContract.space.lg,
24
- paddingRight: themeContract.space.lg,
25
- gap: themeContract.space.lg,
26
- },
27
- [queries.lg]: {
28
- paddingLeft: themeContract.space.xl,
29
- paddingRight: themeContract.space.xl,
30
- gap: themeContract.space.xl,
31
- },
32
- },
33
-
34
- // selectors: {
35
- // '& a': {
36
- // transition: 'all 0.3s ease-in-out',
37
- // textDecoration: 'none',
38
- // color: 'inherit',
39
- // },
40
- // '& a:hover': {
41
- // opacity: '0.7',
42
- // transform: 'translateY(-1px)',
43
- // },
44
- // },
45
- });
46
-
47
- export const headerRecipe = recipe({
48
- base: headerBase,
49
-
50
- variants: {
51
- // position: {
52
- // relative: {
53
- // position: 'relative',
54
- // },
55
- // fixed: {
56
- // position: 'fixed',
57
- // top: 0,
58
- // left: 0,
59
- // right: 0,
60
- // },
61
- // sticky: {
62
- // position: 'sticky',
63
- // top: 0,
64
- // },
65
- // },
66
- variant: {
67
- default: {
68
- backgroundColor: themeContract.colors.background,
69
- borderBottom: `1px solid ${themeContract.colors.border}`,
70
- },
71
- transparent: {
72
- backgroundColor: 'transparent',
73
- borderBottom: 'none',
74
- },
75
- dark: {
76
- backgroundColor: themeContract.colors.surface,
77
- color: themeContract.colors.textLight,
78
- },
79
- },
80
- size: {
81
- sm: {
82
- height: '60px',
83
- paddingTop: themeContract.space.xs,
84
- paddingBottom: themeContract.space.xs,
85
- },
86
- md: {
87
- height: themeContract.header.height,
88
- paddingTop: themeContract.space.sm,
89
- paddingBottom: themeContract.space.sm,
90
- },
91
- lg: {
92
- height: '100px',
93
- paddingTop: themeContract.space.md,
94
- paddingBottom: themeContract.space.md,
95
- },
96
- },
97
- },
98
-
99
- defaultVariants: {
100
- // position: 'relative',
101
- variant: 'default',
102
- size: 'md',
103
- },
104
- });
105
-
106
- export const headerPlaceholder = style({
107
- height: themeContract.header.height,
108
- width: '100%',
109
- });
110
-
111
- export type HeaderVariants = RecipeVariants<typeof headerRecipe>;
@@ -1,158 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef, useState } from 'react';
3
- import { headerPlaceholder, headerRecipe, type HeaderVariants } from './Header.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
-
6
- export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, Sprinkles, NonNullable<HeaderVariants> {
7
- css?: string;
8
- isFixed?: boolean; // Legacy prop for backwards compatibility
9
- hideToggleNav?: boolean;
10
- childrenOverlay?: React.ReactNode;
11
- displayToggleNavOnDesktop?: boolean;
12
- as?: 'header' | 'div';
13
- }
14
-
15
- export const Header = forwardRef<HTMLElement, HeaderProps>(
16
- (
17
- {
18
- children,
19
- position,
20
- variant,
21
- size,
22
- isFixed, // Legacy prop
23
- hideToggleNav,
24
- childrenOverlay,
25
- displayToggleNavOnDesktop,
26
- as: Component = 'header',
27
- css,
28
- className,
29
- // Extract sprinkles props
30
- margin,
31
- marginTop,
32
- marginBottom,
33
- marginLeft,
34
- marginRight,
35
- padding,
36
- paddingTop,
37
- paddingBottom,
38
- paddingLeft,
39
- paddingRight,
40
- gap,
41
- display,
42
- flexDirection,
43
- justifyContent,
44
- flexWrap,
45
- flex,
46
- width,
47
- height,
48
- minWidth,
49
- maxWidth,
50
- minHeight,
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
- const [isNavOpen, setNavOpen] = useState(false);
73
-
74
- // Handle legacy isFixed prop
75
- const headerPosition = position || (isFixed ? 'fixed' : 'relative');
76
-
77
- return (
78
- <>
79
- <Component
80
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
81
- ref={ref as any}
82
- className={clsx(
83
- headerRecipe({ variant, size }),
84
- sprinkles({
85
- margin,
86
- marginTop,
87
- marginBottom,
88
- marginLeft,
89
- marginRight,
90
- padding,
91
- paddingTop,
92
- paddingBottom,
93
- paddingLeft,
94
- paddingRight,
95
- gap,
96
- display,
97
- flexDirection,
98
- justifyContent,
99
- flexWrap,
100
- flex,
101
- width,
102
- height,
103
- minWidth,
104
- maxWidth,
105
- minHeight,
106
- zIndex,
107
- fontSize,
108
- fontFamily,
109
- lineHeight,
110
- textAlign,
111
- fontWeight,
112
- color,
113
- backgroundColor,
114
- borderRadius,
115
- borderWidth,
116
- borderStyle,
117
- borderColor,
118
- boxShadow,
119
- opacity,
120
- overflow,
121
- overflowX,
122
- overflowY,
123
- }),
124
- css,
125
- className
126
- )}
127
- {...htmlProps}>
128
- {/* Overlay for mobile navigation */}
129
- {childrenOverlay && <div className={clsx('header-overlay', isNavOpen && 'header-overlay--open')}>{childrenOverlay}</div>}
130
-
131
- {children}
132
-
133
- {/* Toggle navigation button */}
134
- {!hideToggleNav && (
135
- <button
136
- type="button"
137
- className="header-nav-toggle"
138
- onClick={() => setNavOpen(!isNavOpen)}
139
- aria-expanded={isNavOpen}
140
- aria-label="Toggle navigation">
141
- <span className="sr-only">Toggle navigation</span>
142
- <div className={`hamburger ${isNavOpen ? 'hamburger--open' : ''}`}>
143
- <span></span>
144
- <span></span>
145
- <span></span>
146
- </div>
147
- </button>
148
- )}
149
- </Component>
150
-
151
- {/* Placeholder for fixed headers */}
152
- {(headerPosition === 'fixed' || isFixed) && <div className={headerPlaceholder} />}
153
- </>
154
- );
155
- }
156
- );
157
-
158
- Header.displayName = 'Header';
@@ -1,101 +0,0 @@
1
- import { style } from '@vanilla-extract/css';
2
- import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
-
4
- const iconBase = style({
5
- display: 'inline-block',
6
- verticalAlign: 'middle',
7
- fill: 'currentColor',
8
- flexShrink: 0,
9
- transition: 'all 0.3s ease-in-out',
10
- });
11
-
12
- const iconPath = style({
13
- transition: 'fill 0.3s ease-in-out',
14
- });
15
-
16
- export const iconRecipe = recipe({
17
- base: iconBase,
18
-
19
- variants: {
20
- size: {
21
- xs: {
22
- width: '12px',
23
- height: '12px',
24
- },
25
- sm: {
26
- width: '16px',
27
- height: '16px',
28
- },
29
- md: {
30
- width: '24px',
31
- height: '24px',
32
- },
33
- lg: {
34
- width: '32px',
35
- height: '32px',
36
- },
37
- xl: {
38
- width: '48px',
39
- height: '48px',
40
- },
41
- '2xl': {
42
- width: '64px',
43
- height: '64px',
44
- },
45
- },
46
- // color: {
47
- // current: {
48
- // fill: 'currentColor',
49
- // },
50
- // primary: {
51
- // fill: themeContract.colors.primary,
52
- // },
53
- // secondary: {
54
- // fill: themeContract.colors.secondary,
55
- // },
56
- // accent: {
57
- // fill: themeContract.colors.accent,
58
- // },
59
- // text: {
60
- // fill: themeContract.colors.text,
61
- // },
62
- // textSecondary: {
63
- // fill: themeContract.colors.textSecondary,
64
- // },
65
- // error: {
66
- // fill: themeContract.colors.error,
67
- // },
68
- // success: {
69
- // fill: themeContract.colors.success,
70
- // },
71
- // warning: {
72
- // fill: themeContract.colors.warning,
73
- // },
74
- // info: {
75
- // fill: themeContract.colors.info,
76
- // },
77
- // },
78
- interactive: {
79
- true: {
80
- cursor: 'pointer',
81
- ':hover': {
82
- transform: 'scale(1.1)',
83
- opacity: 0.8,
84
- },
85
- ':active': {
86
- transform: 'scale(0.95)',
87
- },
88
- },
89
- false: {},
90
- },
91
- },
92
-
93
- defaultVariants: {
94
- size: 'md',
95
- // color: 'current',
96
- interactive: false,
97
- },
98
- });
99
-
100
- export { iconPath };
101
- export type IconVariants = RecipeVariants<typeof iconRecipe>;
@@ -1,159 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { iconRecipe, type IconVariants } from './Icon.css';
4
- import iconPaths from './path';
5
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
6
-
7
- export interface IconProps
8
- extends Omit<
9
- React.SVGProps<SVGSVGElement>,
10
- 'color' | 'size' | 'display' | 'fontFamily' | 'fontSize' | 'fontWeight' | 'height' | 'opacity' | 'overflow' | 'width'
11
- >,
12
- Sprinkles,
13
- NonNullable<IconVariants> {
14
- css?: string;
15
- icon?: keyof typeof iconPaths;
16
- iconPath?: string;
17
- customSize?: number;
18
- customColor?: string;
19
- viewBox?: string;
20
- }
21
-
22
- export const Icon = forwardRef<SVGSVGElement, IconProps>(
23
- (
24
- {
25
- icon,
26
- iconPath,
27
- size,
28
- color,
29
- customSize,
30
- customColor,
31
- interactive,
32
- viewBox = '0 0 24 24',
33
- css,
34
- className,
35
- // Extract sprinkles props
36
- margin,
37
- marginTop,
38
- marginBottom,
39
- marginLeft,
40
- marginRight,
41
- padding,
42
- paddingTop,
43
- paddingBottom,
44
- paddingLeft,
45
- paddingRight,
46
- gap,
47
- display,
48
- flexDirection,
49
- justifyContent,
50
- flexWrap,
51
- flex,
52
- width,
53
- height,
54
- minWidth,
55
- maxWidth,
56
- minHeight,
57
- position,
58
- top,
59
- bottom,
60
- left,
61
- right,
62
- zIndex,
63
- fontSize,
64
- fontFamily,
65
- lineHeight,
66
- textAlign,
67
- fontWeight,
68
- backgroundColor,
69
- borderRadius,
70
- borderWidth,
71
- borderStyle,
72
- borderColor,
73
- boxShadow,
74
- opacity,
75
- overflow,
76
- overflowX,
77
- overflowY,
78
- ...svgProps
79
- },
80
- ref
81
- ) => {
82
- const pathData = iconPath || (icon ? iconPaths[icon] : '');
83
-
84
- const iconStyle = customSize
85
- ? {
86
- width: `${customSize}px`,
87
- height: `${customSize}px`,
88
- }
89
- : {};
90
-
91
- const pathStyle = customColor
92
- ? {
93
- fill: customColor,
94
- }
95
- : {};
96
-
97
- return (
98
- <svg
99
- ref={ref}
100
- viewBox={viewBox}
101
- className={clsx(
102
- iconRecipe({ size: customSize ? undefined : size, interactive }),
103
- sprinkles({
104
- margin,
105
- marginTop,
106
- marginBottom,
107
- marginLeft,
108
- marginRight,
109
- padding,
110
- paddingTop,
111
- paddingBottom,
112
- paddingLeft,
113
- paddingRight,
114
- gap,
115
- display,
116
- flexDirection,
117
- justifyContent,
118
- flexWrap,
119
- flex,
120
- width,
121
- height,
122
- minWidth,
123
- maxWidth,
124
- minHeight,
125
- position,
126
- top,
127
- bottom,
128
- left,
129
- right,
130
- zIndex,
131
- fontSize,
132
- fontFamily,
133
- lineHeight,
134
- textAlign,
135
- fontWeight,
136
- backgroundColor,
137
- borderRadius,
138
- borderWidth,
139
- borderStyle,
140
- borderColor,
141
- boxShadow,
142
- opacity,
143
- overflow,
144
- overflowX,
145
- overflowY,
146
- }),
147
- css,
148
- className
149
- )}
150
- style={iconStyle}
151
- aria-hidden={!svgProps['aria-label'] && !svgProps['aria-labelledby']}
152
- {...svgProps}>
153
- <path className={iconPath} d={pathData} style={pathStyle} />
154
- </svg>
155
- );
156
- }
157
- );
158
-
159
- Icon.displayName = 'Icon';