@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,158 +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 keyNumberBase = style({
7
- display: 'flex',
8
- flexDirection: 'column',
9
- alignItems: 'center',
10
- textAlign: 'center',
11
- color: themeContract.colors.text,
12
- });
13
-
14
- const keyNumberValue = style({
15
- fontSize: themeContract.fontSizes.lg,
16
- paddingBottom: themeContract.space.md,
17
- fontWeight: '400',
18
-
19
- '@media': {
20
- [queries.lg]: {
21
- paddingBottom: themeContract.space.lg,
22
- },
23
- },
24
-
25
- // selectors: {
26
- // '& span': {
27
- // fontSize: themeContract.fontSizes['4xl'],
28
- // lineHeight: themeContract.lineHeights.tight,
29
- // fontWeight: 'bold',
30
- // display: 'inline-block',
31
-
32
- // '@media': {
33
- // [queries.md]: {
34
- // fontSize: '3rem',
35
- // },
36
- // [queries.lg]: {
37
- // fontSize: '4rem',
38
- // },
39
- // },
40
- // },
41
- // },
42
- });
43
-
44
- const keyNumberLabel = style({
45
- fontSize: themeContract.fontSizes.md,
46
- color: themeContract.colors.textSecondary,
47
- lineHeight: themeContract.lineHeights.normal,
48
- margin: 0,
49
-
50
- '@media': {
51
- [queries.md]: {
52
- fontSize: themeContract.fontSizes.lg,
53
- },
54
- },
55
- });
56
-
57
- export const keyNumberRecipe = recipe({
58
- base: keyNumberBase,
59
-
60
- variants: {
61
- size: {
62
- sm: {
63
- // selectors: {
64
- // [`& .${keyNumberValue}`]: {
65
- // fontSize: themeContract.fontSizes.md,
66
- // },
67
- // [`& .${keyNumberValue} span`]: {
68
- // fontSize: themeContract.fontSizes['2xl'],
69
- // },
70
- // [`& .${keyNumberLabel}`]: {
71
- // fontSize: themeContract.fontSizes.sm,
72
- // },
73
- // },
74
- },
75
- md: {},
76
- lg: {
77
- // selectors: {
78
- // [`& .${keyNumberValue}`]: {
79
- // fontSize: themeContract.fontSizes.xl,
80
- // },
81
- // [`& .${keyNumberValue} span`]: {
82
- // fontSize: '5rem',
83
- // '@media': {
84
- // [queries.lg]: {
85
- // fontSize: '6rem',
86
- // },
87
- // },
88
- // },
89
- // [`& .${keyNumberLabel}`]: {
90
- // fontSize: themeContract.fontSizes.xl,
91
- // },
92
- // },
93
- },
94
- },
95
- variant: {
96
- default: {},
97
- highlighted: {
98
- padding: themeContract.space.lg,
99
- backgroundColor: themeContract.colors.surface,
100
- borderRadius: themeContract.radii.lg,
101
- boxShadow: themeContract.shadows.md,
102
- },
103
- outlined: {
104
- padding: themeContract.space.lg,
105
- border: `2px solid ${themeContract.colors.border}`,
106
- borderRadius: themeContract.radii.lg,
107
- },
108
- },
109
- align: {
110
- left: {
111
- alignItems: 'flex-start',
112
- textAlign: 'left',
113
- },
114
- center: {
115
- alignItems: 'center',
116
- textAlign: 'center',
117
- },
118
- right: {
119
- alignItems: 'flex-end',
120
- textAlign: 'right',
121
- },
122
- },
123
- // color: {
124
- // default: {},
125
- // primary: {
126
- // // selectors: {
127
- // // [`& .${keyNumberValue} span`]: {
128
- // // color: themeContract.colors.primary,
129
- // // },
130
- // // },
131
- // },
132
- // accent: {
133
- // // selectors: {
134
- // // [`& .${keyNumberValue} span`]: {
135
- // // color: themeContract.colors.accent,
136
- // // },
137
- // // },
138
- // },
139
- // success: {
140
- // // selectors: {
141
- // // [`& .${keyNumberValue} span`]: {
142
- // // color: themeContract.colors.success,
143
- // // },
144
- // // },
145
- // },
146
- // },
147
- },
148
-
149
- defaultVariants: {
150
- size: 'md',
151
- variant: 'default',
152
- align: 'center',
153
- // color: 'default',
154
- },
155
- });
156
-
157
- export { keyNumberValue, keyNumberLabel };
158
- export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;
@@ -1,166 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import CountUp from 'react-countup';
4
- import { useInView } from 'react-intersection-observer';
5
- import { keyNumberLabel, keyNumberRecipe, keyNumberValue, type KeyNumberVariants } from './KeyNumber.css';
6
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
7
-
8
- export interface KeyNumberProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, Sprinkles, NonNullable<KeyNumberVariants> {
9
- css?: string;
10
- value: number;
11
- label: string;
12
- suffix?: string;
13
- prefix?: string;
14
- duration?: number;
15
- threshold?: number;
16
- separator?: string;
17
- decimals?: number;
18
- as?: 'div' | 'section' | 'article';
19
- }
20
-
21
- export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
22
- (
23
- {
24
- value,
25
- label,
26
- suffix = '',
27
- prefix = '',
28
- duration = 2,
29
- threshold = 0.3,
30
- separator = ',',
31
- decimals = 0,
32
- size,
33
- variant,
34
- align,
35
- color,
36
- as: Component = 'div',
37
- css,
38
- className,
39
- // Extract sprinkles props
40
- margin,
41
- marginTop,
42
- marginBottom,
43
- marginLeft,
44
- marginRight,
45
- padding,
46
- paddingTop,
47
- paddingBottom,
48
- paddingLeft,
49
- paddingRight,
50
- gap,
51
- display,
52
- flexDirection,
53
- justifyContent,
54
- flexWrap,
55
- flex,
56
- width,
57
- height,
58
- minWidth,
59
- maxWidth,
60
- minHeight,
61
- position,
62
- top,
63
- bottom,
64
- left,
65
- right,
66
- zIndex,
67
- fontSize,
68
- fontFamily,
69
- lineHeight,
70
- textAlign,
71
- fontWeight,
72
- backgroundColor,
73
- borderRadius,
74
- borderWidth,
75
- borderStyle,
76
- borderColor,
77
- boxShadow,
78
- opacity,
79
- overflow,
80
- overflowX,
81
- overflowY,
82
- ...htmlProps
83
- },
84
- ref
85
- ) => {
86
- const [inViewRef, inView] = useInView({
87
- threshold,
88
- triggerOnce: true,
89
- });
90
-
91
- return (
92
- <Component
93
- ref={(node) => {
94
- inViewRef(node);
95
- if (ref) {
96
- if (typeof ref === 'function') {
97
- ref(node);
98
- } else {
99
- (ref as any).current = node;
100
- }
101
- }
102
- }}
103
- className={clsx(
104
- keyNumberRecipe({ size, variant, align }),
105
- sprinkles({
106
- margin,
107
- marginTop,
108
- marginBottom,
109
- marginLeft,
110
- marginRight,
111
- padding,
112
- paddingTop,
113
- paddingBottom,
114
- paddingLeft,
115
- paddingRight,
116
- gap,
117
- display,
118
- flexDirection,
119
- justifyContent,
120
- flexWrap,
121
- flex,
122
- width,
123
- height,
124
- minWidth,
125
- maxWidth,
126
- minHeight,
127
- position,
128
- top,
129
- bottom,
130
- left,
131
- right,
132
- zIndex,
133
- fontSize,
134
- fontFamily,
135
- lineHeight,
136
- textAlign,
137
- fontWeight,
138
- backgroundColor,
139
- borderRadius,
140
- borderWidth,
141
- borderStyle,
142
- borderColor,
143
- boxShadow,
144
- opacity,
145
- overflow,
146
- overflowX,
147
- overflowY,
148
- }),
149
- css,
150
- className
151
- )}
152
- {...htmlProps}>
153
- <div className={keyNumberValue}>
154
- {prefix}
155
- <span>
156
- <CountUp end={inView ? value : 0} duration={duration} separator={separator} decimals={decimals} />
157
- </span>
158
- {suffix}
159
- </div>
160
- <p className={keyNumberLabel}>{label}</p>
161
- </Component>
162
- );
163
- }
164
- );
165
-
166
- KeyNumber.displayName = 'KeyNumber';
@@ -1,168 +0,0 @@
1
- import { clsx } from 'clsx';
2
- import { forwardRef } from 'react';
3
- import { languageSwitcherIcon, languageSwitcherRecipe, languageSwitcherSelect, type LanguageSwitcherVariants } from './LanguageSwitcher.css';
4
- import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
5
- import { Icon } from '../Icon/Icon';
6
-
7
- export interface Locale {
8
- code: string;
9
- name: string;
10
- label?: string;
11
- }
12
-
13
- export interface LanguageSwitcherProps
14
- extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'onChange'>,
15
- Sprinkles,
16
- NonNullable<LanguageSwitcherVariants> {
17
- css?: string;
18
- locales: Locale[];
19
- currentLocale: string;
20
- onChange: (locale: string) => void;
21
- disabled?: boolean;
22
- placeholder?: string;
23
- }
24
-
25
- export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps>(
26
- (
27
- {
28
- locales,
29
- currentLocale,
30
- onChange,
31
- disabled = false,
32
- placeholder,
33
- variant,
34
- size,
35
- css,
36
- className,
37
- // Extract sprinkles props
38
- margin,
39
- marginTop,
40
- marginBottom,
41
- marginLeft,
42
- marginRight,
43
- padding,
44
- paddingTop,
45
- paddingBottom,
46
- paddingLeft,
47
- paddingRight,
48
- gap,
49
- display,
50
- flexDirection,
51
- justifyContent,
52
- flexWrap,
53
- flex,
54
- width,
55
- height,
56
- minWidth,
57
- maxWidth,
58
- minHeight,
59
- position,
60
- top,
61
- bottom,
62
- left,
63
- right,
64
- zIndex,
65
- fontSize,
66
- fontFamily,
67
- lineHeight,
68
- textAlign,
69
- fontWeight,
70
- color,
71
- backgroundColor,
72
- borderRadius,
73
- borderWidth,
74
- borderStyle,
75
- borderColor,
76
- boxShadow,
77
- opacity,
78
- overflow,
79
- overflowX,
80
- overflowY,
81
- ...htmlProps
82
- },
83
- ref
84
- ) => {
85
- const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
86
- onChange(event.target.value);
87
- };
88
-
89
- return (
90
- <div
91
- ref={ref}
92
- className={clsx(
93
- languageSwitcherRecipe({ variant, size }),
94
- sprinkles({
95
- margin,
96
- marginTop,
97
- marginBottom,
98
- marginLeft,
99
- marginRight,
100
- padding,
101
- paddingTop,
102
- paddingBottom,
103
- paddingLeft,
104
- paddingRight,
105
- gap,
106
- display,
107
- flexDirection,
108
- justifyContent,
109
- flexWrap,
110
- flex,
111
- width,
112
- height,
113
- minWidth,
114
- maxWidth,
115
- minHeight,
116
- position,
117
- top,
118
- bottom,
119
- left,
120
- right,
121
- zIndex,
122
- fontSize,
123
- fontFamily,
124
- lineHeight,
125
- textAlign,
126
- fontWeight,
127
- color,
128
- backgroundColor,
129
- borderRadius,
130
- borderWidth,
131
- borderStyle,
132
- borderColor,
133
- boxShadow,
134
- opacity,
135
- overflow,
136
- overflowX,
137
- overflowY,
138
- }),
139
- css,
140
- className
141
- )}
142
- {...htmlProps}>
143
- <select
144
- className={languageSwitcherSelect}
145
- value={currentLocale}
146
- onChange={handleSelectChange}
147
- disabled={disabled}
148
- aria-label="Switch language">
149
- {placeholder && (
150
- <option value="" disabled>
151
- {placeholder}
152
- </option>
153
- )}
154
- {locales.map((locale) => (
155
- <option key={locale.code} value={locale.code} disabled={locale.code === currentLocale}>
156
- {locale.label || locale.name}
157
- </option>
158
- ))}
159
- </select>
160
- <div className={languageSwitcherIcon}>
161
- <Icon icon="caret" size="sm" />
162
- </div>
163
- </div>
164
- );
165
- }
166
- );
167
-
168
- LanguageSwitcher.displayName = 'LanguageSwitcher';
@@ -1,98 +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 logoBase = style({
6
- display: 'inline-block',
7
-
8
- // selectors: {
9
- // '& img': {
10
- // width: '100%',
11
- // height: 'auto',
12
- // maxWidth: '100%',
13
- // display: 'block',
14
- // },
15
- // '& svg': {
16
- // width: '100%',
17
- // height: 'auto',
18
- // maxWidth: '100%',
19
- // display: 'block',
20
- // fill: 'currentColor',
21
- // },
22
- // },
23
- });
24
-
25
- export const logoRecipe = recipe({
26
- base: logoBase,
27
-
28
- variants: {
29
- size: {
30
- xs: {
31
- width: '80px',
32
- height: 'auto',
33
- },
34
- sm: {
35
- width: '120px',
36
- height: 'auto',
37
- },
38
- md: {
39
- width: '160px',
40
- height: 'auto',
41
- },
42
- lg: {
43
- width: '200px',
44
- height: 'auto',
45
- },
46
- xl: {
47
- width: '240px',
48
- height: 'auto',
49
- },
50
- auto: {
51
- width: 'auto',
52
- height: 'auto',
53
- },
54
- },
55
- variant: {
56
- default: {},
57
- link: {
58
- cursor: 'pointer',
59
- transition: 'all 0.3s ease-in-out',
60
-
61
- ':hover': {
62
- opacity: '0.8',
63
- transform: 'scale(1.05)',
64
- },
65
-
66
- ':focus': {
67
- outline: '2px solid',
68
- outlineColor: themeContract.colors.primary,
69
- outlineOffset: '2px',
70
- borderRadius: themeContract.radii.sm,
71
- },
72
- },
73
- },
74
- responsive: {
75
- true: {
76
- maxWidth: '100%',
77
- height: 'auto',
78
-
79
- // selectors: {
80
- // '& img, & svg': {
81
- // width: '100%',
82
- // height: 'auto',
83
- // maxWidth: '100%',
84
- // },
85
- // },
86
- },
87
- false: {},
88
- },
89
- },
90
-
91
- defaultVariants: {
92
- size: 'md',
93
- variant: 'default',
94
- responsive: true,
95
- },
96
- });
97
-
98
- export type LogoVariants = RecipeVariants<typeof logoRecipe>;