@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.
- package/package.json +4 -1
- package/src/components/Actions/index.tsx +20 -0
- package/src/components/Actions/styles.css.ts +54 -0
- package/src/components/Button/index.tsx +29 -0
- package/src/components/Button/stories.tsx +4 -22
- package/src/components/Button/styles.css.ts +131 -0
- package/src/components/Carousel/{Carousel.tsx → index.tsx} +18 -115
- package/src/components/Carousel/styles.css.ts +176 -0
- package/src/components/Columns/index.tsx +36 -0
- package/src/components/Columns/styles.css.ts +70 -0
- package/src/components/ConsentCookie/ConsentCookie.css.ts +1 -1
- package/src/components/ConsentCookie/ConsentCookie.tsx +3 -3
- package/src/components/Footer/index.tsx +21 -0
- package/src/components/Footer/styles.css.ts +33 -0
- package/src/components/Form/Form.css.ts +1 -1
- package/src/components/Form/Row/Row.css.ts +1 -1
- package/src/components/Form/TextField/Input/Input.css.ts +1 -1
- package/src/components/Form/TextField/Label/Label.css.ts +1 -1
- package/src/components/Form/TextField/TextField.css.ts +1 -1
- package/src/components/Form/TextField/Textarea/Textarea.css.ts +1 -1
- package/src/components/Header/index.tsx +53 -0
- package/src/components/Header/styles.css.ts +89 -0
- package/src/components/Heading/index.tsx +22 -0
- package/src/components/Heading/styles.css.ts +66 -0
- package/src/components/Heading/types.tsx +1 -0
- package/src/components/Icon/index.tsx +25 -0
- package/src/components/Icon/style.css.ts +11 -0
- package/src/components/KeyNumber/index.tsx +51 -0
- package/src/components/KeyNumber/styles.css.ts +76 -0
- package/src/components/LanguageSwitcher/index.tsx +80 -0
- package/src/components/LanguageSwitcher/{LanguageSwitcher.css.ts → styles.css.ts} +1 -1
- package/src/components/Logo/index.tsx +13 -0
- package/src/components/Logo/styles.css.ts +14 -0
- package/src/components/Main/index.tsx +17 -0
- package/src/components/Main/styles.css.ts +14 -0
- package/src/components/Modal/index.tsx +42 -0
- package/src/components/Modal/stories.tsx +14 -358
- package/src/components/Modal/styles.css.ts +90 -0
- package/src/components/Nav/index.tsx +22 -0
- package/src/components/Nav/styles.css.ts +30 -0
- package/src/components/NavLegal/index.tsx +17 -0
- package/src/components/NavLegal/styles.css.ts +20 -0
- package/src/components/NavSocial/index.tsx +32 -0
- package/src/components/NavSocial/styles.css.ts +33 -0
- package/src/components/Section/index.tsx +20 -0
- package/src/components/Section/stories.tsx +5 -57
- package/src/components/Section/styles.css.ts +106 -0
- package/src/components/ThemeTest/ThemeTest.css.ts +11 -0
- package/src/components/ThemeTest/ThemeTest.tsx +12 -0
- package/src/components/ThemeToggle/ThemeToggle.tsx +30 -0
- package/src/components/Video/index.tsx +117 -0
- package/src/components/Video/styles.css.ts +200 -0
- package/src/index.ts +31 -41
- package/src/styles/mediaqueries.ts +2 -0
- package/src/styles/sprinkles.css.ts +11 -8
- package/src/theme/baseThemeValues.ts +1235 -0
- package/src/theme/contract.css.ts +676 -0
- package/src/{themes → theme}/createTheme.ts +40 -1
- package/src/theme/default.css.ts +10 -0
- package/src/utils/combineResponsive.ts +9 -0
- package/src/utils/generateResponsiveMedia.ts +19 -0
- package/src/components/Actions/Actions.css.ts +0 -113
- package/src/components/Actions/Actions.tsx +0 -132
- package/src/components/Button/Button.css.ts +0 -119
- package/src/components/Button/Button.tsx +0 -132
- package/src/components/Carousel/Carousel.css.ts +0 -179
- package/src/components/Columns/Columns.css.ts +0 -185
- package/src/components/Columns/Columns.tsx +0 -142
- package/src/components/Footer/Footer.css.ts +0 -108
- package/src/components/Footer/Footer.tsx +0 -130
- package/src/components/Header/Header.css.ts +0 -111
- package/src/components/Header/Header.tsx +0 -158
- package/src/components/Icon/Icon.css.ts +0 -101
- package/src/components/Icon/Icon.tsx +0 -159
- package/src/components/KeyNumber/KeyNumber.css.ts +0 -158
- package/src/components/KeyNumber/KeyNumber.tsx +0 -166
- package/src/components/LanguageSwitcher/LanguageSwitcher.tsx +0 -168
- package/src/components/Logo/Logo.css.ts +0 -98
- package/src/components/Logo/Logo.tsx +0 -137
- package/src/components/Main/Main.css.ts +0 -62
- package/src/components/Main/Main.tsx +0 -130
- package/src/components/Modal/Modal.css.ts +0 -203
- package/src/components/Modal/Modal.tsx +0 -194
- package/src/components/Nav/Nav.css.ts +0 -123
- package/src/components/Nav/Nav.tsx +0 -130
- package/src/components/NavLegal/NavLegal.css.ts +0 -121
- package/src/components/NavLegal/NavLegal.tsx +0 -133
- package/src/components/NavSocial/NavSocial.css.ts +0 -121
- package/src/components/NavSocial/NavSocial.tsx +0 -169
- package/src/components/Section/Section.css.ts +0 -101
- package/src/components/Section/Section.tsx +0 -130
- package/src/components/Video/Video.css.ts +0 -210
- package/src/components/Video/Video.tsx +0 -243
- package/src/components/VideoFullWidth/VideoFullWidth.css.ts +0 -50
- package/src/components/VideoFullWidth/VideoFullWidth.tsx +0 -152
- package/src/components/VideoFullWidth/export.tsx +0 -2
- package/src/themes/baseThemeValues.ts +0 -160
- package/src/themes/contract.css.ts +0 -83
- package/src/types/withClassName.ts +0 -4
@@ -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}
|
44
|
+
<CountUp end={inView ? value : 0} duration={duration} separator={separator} decimals={decimals} className={keyNumberValueRecipe({ size })} />
|
45
|
+
{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 '../../
|
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';
|