@latte-macchiat-io/latte-vanilla-components 0.0.191 → 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 (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 +29 -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
@@ -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';