@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
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];