@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
@@ -0,0 +1,11 @@
1
+ import { style } from '@vanilla-extract/css';
2
+
3
+ export const iconRecipe = style({
4
+ margin: '0 auto',
5
+ display: 'inline-block',
6
+ verticalAlign: 'middle',
7
+ });
8
+
9
+ export const iconPath = style({
10
+ transition: 'fill .5s ease',
11
+ });
@@ -0,0 +1,51 @@
1
+ 'use client';
2
+
3
+ import { clsx } from 'clsx';
4
+ import { forwardRef } from 'react';
5
+ import CountUp from 'react-countup';
6
+ import { useInView } from 'react-intersection-observer';
7
+
8
+ import { keyNumberRecipe, keyNumberValueRecipe, KeyNumberValueVariants, type KeyNumberVariants } from './styles.css';
9
+
10
+ export type KeyNumberProps = React.HTMLAttributes<HTMLDivElement> &
11
+ KeyNumberVariants &
12
+ KeyNumberValueVariants & {
13
+ css?: string;
14
+ value: number;
15
+ suffix?: string;
16
+ prefix?: string;
17
+ duration?: number;
18
+ threshold?: number;
19
+ separator?: string;
20
+ decimals?: number;
21
+ };
22
+
23
+ export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
24
+ ({ value, suffix = '', prefix = '', duration = 2, threshold = 0.3, separator = ',', decimals = 0, size, align, vAlign, css, className }, ref) => {
25
+ const [inViewRef, inView] = useInView({
26
+ threshold,
27
+ triggerOnce: true,
28
+ });
29
+
30
+ return (
31
+ <div
32
+ ref={(node) => {
33
+ inViewRef(node);
34
+ if (ref) {
35
+ if (typeof ref === 'function') {
36
+ ref(node);
37
+ } else if (node) {
38
+ (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
39
+ }
40
+ }
41
+ }}
42
+ className={clsx(keyNumberRecipe({ align, vAlign }), css, className)}>
43
+ {prefix}&nbsp;
44
+ <CountUp end={inView ? value : 0} duration={duration} separator={separator} decimals={decimals} className={keyNumberValueRecipe({ size })} />
45
+ &nbsp;{suffix}
46
+ </div>
47
+ );
48
+ }
49
+ );
50
+
51
+ KeyNumber.displayName = 'KeyNumber';
@@ -0,0 +1,76 @@
1
+ import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
2
+
3
+ import { themeContract } from '../../theme/contract.css';
4
+ import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
5
+
6
+ export const keyNumberRecipe = recipe({
7
+ base: [
8
+ {
9
+ display: 'flex',
10
+ textAlign: 'center',
11
+ flexDirection: 'row',
12
+
13
+ '@media': {
14
+ ...generateResponsiveMedia({
15
+ paddingTop: themeContract.keyNumber.paddingTop,
16
+ paddingBottom: themeContract.keyNumber.paddingBottom,
17
+ }),
18
+ },
19
+ },
20
+ ],
21
+
22
+ variants: {
23
+ align: {
24
+ left: {
25
+ textAlign: 'left',
26
+ justifyContent: 'center',
27
+ },
28
+ center: {
29
+ textAlign: 'center',
30
+ justifyContent: 'center',
31
+ },
32
+ right: {
33
+ textAlign: 'right',
34
+ justifyContent: 'right',
35
+ },
36
+ },
37
+
38
+ vAlign: {
39
+ top: {
40
+ alignItems: 'flex-start',
41
+ },
42
+ center: {
43
+ alignItems: 'center',
44
+ },
45
+ bottom: {
46
+ alignItems: 'flex-end',
47
+ },
48
+ },
49
+ },
50
+
51
+ defaultVariants: {
52
+ align: 'center',
53
+ vAlign: 'center',
54
+ },
55
+ });
56
+
57
+ export const keyNumberValueRecipe = recipe({
58
+ base: {
59
+ lineHeight: '1em',
60
+ },
61
+
62
+ variants: {
63
+ size: {
64
+ normal: { fontSize: '1em' },
65
+ large: { fontSize: themeContract.keyNumber.fontSize.large },
66
+ xlarge: { fontSize: themeContract.keyNumber.fontSize.xlarge },
67
+ },
68
+ },
69
+
70
+ defaultVariants: {
71
+ size: 'normal',
72
+ },
73
+ });
74
+
75
+ export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;
76
+ export type KeyNumberValueVariants = RecipeVariants<typeof keyNumberValueRecipe>;
@@ -0,0 +1,80 @@
1
+ import { clsx } from 'clsx';
2
+ import { forwardRef } from 'react';
3
+ import { languageSwitcherIcon, languageSwitcherRecipe, languageSwitcherSelect, type LanguageSwitcherVariants } from './styles.css';
4
+
5
+ import { Icon } from '../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
+ NonNullable<LanguageSwitcherVariants> {
16
+ css?: string;
17
+ locales: Locale[];
18
+ currentLocale: string;
19
+ onChange: (locale: string) => void;
20
+ disabled?: boolean;
21
+ placeholder?: string;
22
+ }
23
+
24
+ export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps>(
25
+ (
26
+ {
27
+ locales,
28
+ currentLocale,
29
+ onChange,
30
+ disabled = false,
31
+ placeholder,
32
+ variant,
33
+ size,
34
+ css,
35
+ className,
36
+
37
+ ...htmlProps
38
+ },
39
+ ref
40
+ ) => {
41
+ const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
42
+ onChange(event.target.value);
43
+ };
44
+
45
+ return (
46
+ <div
47
+ ref={ref}
48
+ className={clsx(
49
+ languageSwitcherRecipe({ variant, size }),
50
+
51
+ css,
52
+ className
53
+ )}
54
+ {...htmlProps}>
55
+ <select
56
+ className={languageSwitcherSelect}
57
+ value={currentLocale}
58
+ onChange={handleSelectChange}
59
+ disabled={disabled}
60
+ aria-label="Switch language">
61
+ {placeholder && (
62
+ <option value="" disabled>
63
+ {placeholder}
64
+ </option>
65
+ )}
66
+ {locales.map((locale) => (
67
+ <option key={locale.code} value={locale.code} disabled={locale.code === currentLocale}>
68
+ {locale.label || locale.name}
69
+ </option>
70
+ ))}
71
+ </select>
72
+ <div className={languageSwitcherIcon}>
73
+ <Icon icon="caret" />
74
+ </div>
75
+ </div>
76
+ );
77
+ }
78
+ );
79
+
80
+ LanguageSwitcher.displayName = 'LanguageSwitcher';
@@ -1,6 +1,6 @@
1
1
  import { style } from '@vanilla-extract/css';
2
2
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
3
- import { themeContract } from '../../themes/contract.css';
3
+ import { themeContract } from '../../theme/contract.css';
4
4
 
5
5
  const languageSwitcherBase = style({
6
6
  position: 'relative',
@@ -0,0 +1,13 @@
1
+ import { clsx } from 'clsx';
2
+ import { ReactNode } from 'react';
3
+
4
+ import { logoBase } from './styles.css';
5
+
6
+ export type LogoProps = React.HTMLAttributes<HTMLDivElement> & {
7
+ css?: string;
8
+ children?: ReactNode;
9
+ };
10
+
11
+ export const Logo = ({ children, css, className }: LogoProps) => {
12
+ return <div className={clsx(logoBase, css, className)}>{children}</div>;
13
+ };
@@ -0,0 +1,14 @@
1
+ import { globalStyle, style } from '@vanilla-extract/css';
2
+
3
+ export const logoBase = style({
4
+ alignItems: 'center',
5
+ display: 'inline-flex',
6
+ justifyContent: 'center',
7
+ });
8
+
9
+ globalStyle(`${logoBase} img`, {
10
+ width: '100%',
11
+ height: 'auto',
12
+ maxWidth: '100%',
13
+ display: 'block',
14
+ });
@@ -0,0 +1,17 @@
1
+ import { clsx } from 'clsx';
2
+ import { forwardRef } from 'react';
3
+
4
+ import { main } from './styles.css';
5
+
6
+ export type MainProps = React.HTMLAttributes<HTMLDivElement> & {
7
+ css?: string;
8
+ children: React.ReactNode;
9
+ };
10
+
11
+ export const Main = forwardRef<HTMLDivElement, MainProps>(({ css, className, children, ...htmlProps }, ref) => {
12
+ return (
13
+ <main ref={ref} className={clsx(main, css, className)} {...htmlProps}>
14
+ {children}
15
+ </main>
16
+ );
17
+ });
@@ -0,0 +1,14 @@
1
+ import { style } from '@vanilla-extract/css';
2
+ import { themeContract } from '../../theme/contract.css';
3
+
4
+ export const main = style({
5
+ display: 'flex',
6
+ flex: '1 1 auto',
7
+ textAlign: 'center',
8
+ alignItems: 'center',
9
+ flexDirection: 'column',
10
+ justifyContent: 'center',
11
+
12
+ minHeight: themeContract.main.minHeight,
13
+ backgroundColor: themeContract.main.backgroundColor,
14
+ });
@@ -0,0 +1,42 @@
1
+ 'use client';
2
+
3
+ import { clsx } from 'clsx';
4
+ import { forwardRef, useState } from 'react';
5
+
6
+ import { modal, modalContentCloseButton, modalContentRecipe, type ModalVariants } from './styles.css';
7
+
8
+ import { Actions } from '../Actions';
9
+ import { Button } from '../Button';
10
+ import { Icon } from '../Icon';
11
+
12
+ export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
13
+ ModalVariants & {
14
+ css?: string;
15
+ triggerLabel: string;
16
+ children: React.ReactNode;
17
+ };
18
+
19
+ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css, className, children, align }, ref) => {
20
+ const [isOpen, setIsOpen] = useState(false);
21
+
22
+ return (
23
+ <>
24
+ <Actions align="center">
25
+ <Button onClick={() => setIsOpen(true)}> {triggerLabel}</Button>
26
+ </Actions>
27
+
28
+ {isOpen && (
29
+ <div className={modal} role="dialog" aria-modal="true">
30
+ <div ref={ref} className={clsx(modalContentRecipe({ align }), css, className)}>
31
+ <button type="button" className={modalContentCloseButton} onClick={() => setIsOpen(false)}>
32
+ <Icon icon="close" />
33
+ </button>
34
+ {children}
35
+ </div>
36
+ </div>
37
+ )}
38
+ </>
39
+ );
40
+ });
41
+
42
+ Modal.displayName = 'Modal';