@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
package/src/index.ts CHANGED
@@ -1,70 +1,58 @@
1
1
  // Theme system - Import this first to apply global styles
2
- export { themeContract } from './themes/contract.css';
3
- export { baseLightTheme, baseDarkTheme } from './themes/baseThemeValues';
4
- export { createLightTheme, createDarkTheme, type ThemeOverrides } from './themes/createTheme';
2
+ export { themeContract } from './theme/contract.css';
3
+ export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
4
+ export { createLightTheme, createDarkTheme, type ThemeOverrides } from './theme/createTheme';
5
5
 
6
6
  // Styles utilities (sprinkles, media queries, etc.)
7
- export { sprinkles, responsiveProperties, type Sprinkles } from './styles/sprinkles.css';
7
+ export { sprinkles, type Sprinkles } from './styles/sprinkles.css';
8
8
  export { breakpoints, queries } from './styles/mediaqueries';
9
9
 
10
10
  // Components
11
- export { Button, type ButtonProps } from './components/Button/Button';
12
- export { type ButtonVariants } from './components/Button/Button.css';
11
+ export { Button, type ButtonProps } from './components/Button/';
12
+ export { type ButtonVariants } from './components/Button/styles.css';
13
13
 
14
- export { Section, type SectionProps } from './components/Section/Section';
15
- export { type SectionVariants } from './components/Section/Section.css';
14
+ export { Section, type SectionProps } from './components/Section';
15
+ export { type SectionVariants } from './components/Section/styles.css';
16
16
 
17
- export { Main, type MainProps } from './components/Main/Main';
18
- export { type MainVariants } from './components/Main/Main.css';
17
+ export { Main, type MainProps } from './components/Main';
19
18
 
20
- export { Header, type HeaderProps } from './components/Header/Header';
21
- export { type HeaderVariants } from './components/Header/Header.css';
19
+ export { Header, type HeaderProps } from './components/Header';
22
20
 
23
- export { Footer, type FooterProps } from './components/Footer/Footer';
24
- export { type FooterVariants } from './components/Footer/Footer.css';
21
+ export { Footer, type FooterProps } from './components/Footer';
25
22
 
26
- export { Nav, type NavProps } from './components/Nav/Nav';
27
- export { type NavVariants } from './components/Nav/Nav.css';
23
+ export { Nav, type NavProps } from './components/Nav';
28
24
 
29
- export { Icon, type IconProps } from './components/Icon/Icon';
30
- export { type IconVariants } from './components/Icon/Icon.css';
25
+ export { Icon, type IconProps } from './components/Icon';
31
26
 
32
- export { Modal, type ModalProps } from './components/Modal/Modal';
33
- export { type ModalVariants } from './components/Modal/Modal.css';
27
+ export { Modal, type ModalProps } from './components/Modal';
28
+ export { type ModalVariants } from './components/Modal/styles.css';
34
29
 
35
- export { Logo, type LogoProps } from './components/Logo/Logo';
36
- export { type LogoVariants } from './components/Logo/Logo.css';
30
+ export { Logo, type LogoProps } from './components/Logo';
37
31
 
38
- export { Columns, type ColumnsProps } from './components/Columns/Columns';
39
- export { type ColumnsVariants } from './components/Columns/Columns.css';
32
+ export { Columns, type ColumnsProps } from './components/Columns';
40
33
 
41
- export { Actions, type ActionsProps } from './components/Actions/Actions';
42
- export { type ActionsVariants } from './components/Actions/Actions.css';
34
+ export { Actions, type ActionsProps } from './components/Actions';
35
+ export { type ActionsVariants } from './components/Actions/styles.css';
43
36
 
44
- export { Carousel, type CarouselProps } from './components/Carousel/Carousel';
45
- export { type CarouselVariants } from './components/Carousel/Carousel.css';
37
+ export { Carousel, type CarouselProps } from './components/Carousel';
38
+ export { type CarouselVariants } from './components/Carousel/styles.css';
46
39
 
47
40
  export { ConsentCookie, type ConsentCookieProps } from './components/ConsentCookie/ConsentCookie';
48
41
  export { type ConsentCookieVariants } from './components/ConsentCookie/ConsentCookie.css';
49
42
 
50
- export { KeyNumber, type KeyNumberProps } from './components/KeyNumber/KeyNumber';
51
- export { type KeyNumberVariants } from './components/KeyNumber/KeyNumber.css';
43
+ export { KeyNumber, type KeyNumberProps } from './components/KeyNumber';
44
+ export { type KeyNumberVariants } from './components/KeyNumber/styles.css';
52
45
 
53
- export { NavSocial, type NavSocialProps, type SocialNetwork, type SocialLink } from './components/NavSocial/NavSocial';
54
- export { type NavSocialVariants } from './components/NavSocial/NavSocial.css';
46
+ export { NavSocial, type NavSocialProps } from './components/NavSocial';
55
47
 
56
- export { NavLegal, type NavLegalProps } from './components/NavLegal/NavLegal';
57
- export { type NavLegalVariants } from './components/NavLegal/NavLegal.css';
48
+ export { NavLegal, type NavLegalProps } from './components/NavLegal';
58
49
 
59
- export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher/LanguageSwitcher';
60
- export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/LanguageSwitcher.css';
50
+ export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher';
51
+ export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/styles.css';
61
52
 
62
53
  // Video Components
63
- export { Video, type VideoProps } from './components/Video/Video';
64
- export { type VideoVariants } from './components/Video/Video.css';
65
-
66
- export { VideoFullWidth, type VideoFullWidthProps } from './components/VideoFullWidth/VideoFullWidth';
67
- export { type VideoFullWidthVariants } from './components/VideoFullWidth/VideoFullWidth.css';
54
+ export { Video, type VideoProps } from './components/Video';
55
+ export { type VideoVariants } from './components/Video/styles.css';
68
56
 
69
57
  // Form Components
70
58
  export { Form, type FormProps } from './components/Form/Form';
@@ -1,3 +1,5 @@
1
+ export type Breakpoints = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
2
+
1
3
  export const breakpoints = {
2
4
  mobile: 0,
3
5
  sm: 640,
@@ -1,8 +1,9 @@
1
1
  import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
2
+
2
3
  import { queries } from './mediaqueries';
3
- import { themeContract } from '../themes/contract.css';
4
+ import { themeContract } from '../theme/contract.css';
4
5
 
5
- const responsiveProperties = defineProperties({
6
+ export const sprinklesConditions = {
6
7
  conditions: {
7
8
  mobile: {},
8
9
  sm: { '@media': queries.sm },
@@ -11,15 +12,16 @@ const responsiveProperties = defineProperties({
11
12
  xl: { '@media': queries.xl },
12
13
  '2xl': { '@media': queries['2xl'] },
13
14
  },
14
- defaultCondition: 'mobile',
15
+ };
15
16
 
17
+ const responsiveProperties = defineProperties({
18
+ ...sprinklesConditions,
19
+ defaultCondition: 'mobile',
16
20
  properties: {
17
21
  // Spacing
18
22
  padding: themeContract.space,
19
23
  paddingTop: themeContract.space,
20
24
  paddingBottom: themeContract.space,
21
- paddingLeft: themeContract.space,
22
- paddingRight: themeContract.space,
23
25
  margin: themeContract.space,
24
26
  marginTop: themeContract.space,
25
27
  marginBottom: themeContract.space,
@@ -27,10 +29,13 @@ const responsiveProperties = defineProperties({
27
29
  marginRight: themeContract.space,
28
30
  gap: themeContract.space,
29
31
 
32
+ paddingLeft: themeContract.global.paddingLeft,
33
+ paddingRight: themeContract.global.paddingRight,
34
+
30
35
  // Layout
31
36
  display: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'],
32
37
  flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
33
- // alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
38
+ alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
34
39
  justifyContent: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
35
40
  flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
36
41
  flex: ['1', 'auto', 'initial', 'none'],
@@ -78,7 +83,5 @@ const responsiveProperties = defineProperties({
78
83
  },
79
84
  });
80
85
 
81
- // Export both configuration and function for consumer customization
82
- export { responsiveProperties };
83
86
  export const sprinkles = createSprinkles(responsiveProperties);
84
87
  export type Sprinkles = Parameters<typeof sprinkles>[0];