@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.176

package/src/components/Button/stories.ts

@@ -0,0 +1,127 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { fn } from '@storybook/test';
+
+// import { Button } from './export';
+// import { Size, Style, Variant } from './types';
+// import { buttonStyle } from './styles.css';
+// import { defaultTheme } from '../../assets/styles/default-theme';
+
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / 3. Buttons / Button',
+//   component: Button,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+//   args: { onClick: fn() },
+// } satisfies Meta<typeof Button>;
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Primary: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     variant: Variant.Primary,
+//   },
+// };
+
+// export const StyleOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Secondary: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     variant: Variant.Secondary,
+//   },
+// };
+
+// export const SecondaryOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//     variant: Variant.Secondary,
+//   },
+// };
+
+// export const StaticColor: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     staticColor: '#76D1F5',
+//   },
+// };
+
+// export const StaticColorOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//     staticColor: '#76D1F5',
+//   },
+// };
+
+// export const Disabled: Story = {
+//   args: {
+//     isDisabled: true,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Pending: Story = {
+//   args: {
+//     isPending: true,
+//     theme: defaultTheme,
+//     children: 'Pending...',
+//     className: buttonStyle,
+//   },
+// };
+
+// export const SizeSmall: Story = {
+//   args: {
+//     size: Size.Small,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const SizeLarge: Story = {
+//   args: {
+//     size: Size.Large,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };

package/src/components/Columns/stories.ts

@@ -0,0 +1,35 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { Columns } from '.';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Columns',
+//   component: Columns,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+// } satisfies Meta<typeof Columns>;
+//
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+//
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     columns: [6, 6],
+//     children: '<div>Column 1</div> <div>Column 2</div>',
+//   },
+// };
+//
+// export const Default3Col: Story = {
+//   args: {
+//     columns: [4, 4, 4],
+//     children: '<div>Column 1</div> <div>Column 2</div> <div>Column 3</div>',
+//   },
+// };

package/src/components/Icon/path.ts

@@ -0,0 +1,36 @@
+const icons = {
+  caret:
+    'M8.12 9.29 12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0',
+  close:
+    'M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4',
+  arrowBack:
+    'M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1',
+  arrowForward:
+    'M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42s1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1',
+
+  //video
+  play: 'M8 5v14l11-7z',
+  pause: 'M6 19h4V5H6zm8-14v14h4V5z',
+  volumeMute: 'M7 9v6h4l5 5V4l-5 5z',
+  volumeUp:
+    'M3 9v6h4l5 5V4L7 9zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77',
+
+  // Social
+  socialFacebook:
+    'M 22.2816,10.9924 C 22.2816,4.92145 17.3602,0 11.2892,0 5.21832,0 0.296875,4.92145 0.296875,10.9924 c 0,5.4865 4.019725,10.0342 9.274805,10.8588 V 14.1698 H 6.78065 V 10.9924 H 9.57168 V 8.57061 c 0,-2.75496 1.64112,-4.27672 4.15202,-4.27672 1.2023,0 2.4606,0.2147 2.4606,0.2147 v 2.70515 h -1.3861 c -1.3654,0 -1.7914,0.8474 -1.7914,1.71756 v 2.0611 h 3.0487 l -0.4874,3.1774 h -2.5613 v 7.6814 c 5.2551,-0.8246 9.2748,-5.3723 9.2748,-10.8588 z',
+  socialInstagram:
+    'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z',
+  socialPinterest:
+    'M9.04 21.54c.96.29 1.93.46 2.96.46a10 10 0 0 0 10-10A10 10 0 0 0 12 2 10 10 0 0 0 2 12c0 4.25 2.67 7.9 6.44 9.34-.09-.78-.18-2.07 0-2.96l1.15-4.94s-.29-.58-.29-1.5c0-1.38.86-2.41 1.84-2.41.86 0 1.26.63 1.26 1.44 0 .86-.57 2.09-.86 3.27-.17.98.52 1.84 1.52 1.84 1.78 0 3.16-1.9 3.16-4.58 0-2.4-1.72-4.04-4.19-4.04-2.82 0-4.48 2.1-4.48 4.31 0 .86.28 1.73.74 2.3.09.06.09.14.06.29l-.29 1.09c0 .17-.11.23-.28.11-1.28-.56-2.02-2.38-2.02-3.85 0-3.16 2.24-6.03 6.56-6.03 3.44 0 6.12 2.47 6.12 5.75 0 3.44-2.13 6.2-5.18 6.2-.97 0-1.92-.52-2.26-1.13l-.67 2.37c-.23.86-.86 2.01-1.29 2.7v-.03z',
+  socialLinkedIn:
+    'M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z',
+  socialSpotify: '',
+  socialTiktok:
+    'M21,2H3A1,1,0,0,0,2,3V21a1,1,0,0,0,1,1H21a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2Zm-3.281,8.725h0c-.109.011-.219.016-.328.017A3.571,3.571,0,0,1,14.4,9.129v5.493a4.061,4.061,0,1,1-4.06-4.06c.085,0,.167.008.251.013v2a2.067,2.067,0,1,0-.251,4.119A2.123,2.123,0,0,0,12.5,14.649l.02-9.331h1.914A3.564,3.564,0,0,0,17.719,8.5Z',
+  socialX:
+    'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  socialYoutube:
+    'M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z',
+};
+
+export default icons;

package/src/components/Icon/stories.ts

@@ -0,0 +1,29 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { defaultTheme } from '../../assets/styles/default-theme';
+// import { Icon } from '../../index';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / 1. Global / Icon',
+//   component: Icon,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+// } satisfies Meta<typeof Icon>;
+//
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+//
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     icon: 'close',
+//     theme: defaultTheme,
+//   },
+// };

package/src/components/Main/stories.ts

@@ -0,0 +1,33 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+//
+// import { defaultTheme } from '../../assets/styles/default-theme';
+// import { Main } from '.';
+// import { mainStyle } from './styles.css';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Main',
+//   component: Main,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+// } satisfies Meta<typeof Main>;
+//
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+//
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     className: mainStyle,
+//     theme: defaultTheme,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };

package/src/components/Section/stories.ts

@@ -0,0 +1,64 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { defaultTheme } from '@assets/styles/default-theme';
+// import { Section } from './Section';
+// import { sectionStyle } from './styles.css';
+// import { Align } from './types';
+
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Section',
+//   component: Section,
+//   parameters: {
+//     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+//     layout: 'centered',
+//   },
+//   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+//   tags: ['autodocs'],
+//   // More on argTypes: https://storybook.js.org/docs/api/argtypes
+//   argTypes: {},
+//   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+// } satisfies Meta<typeof Section>;
+
+// export default meta;
+// type Story = StoryObj<typeof meta>;
+
+// // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+// export const Default: Story = {
+//   args: {
+//     theme: defaultTheme,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const FullHeight: Story = {
+//   args: {
+//     isFullHeight: true,
+//     theme: defaultTheme,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const AlignCenter: Story = {
+//   args: {
+//     theme: defaultTheme,
+//     align: Align.Center,
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };
+
+// export const BackgroundColor: Story = {
+//   args: {
+//     isDark: true,
+//     theme: defaultTheme,
+//     backgroundColor: 'red',
+//     className: sectionStyle,
+//     children:
+//       'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };

package/src/css/index.ts

@@ -0,0 +1,33 @@
+// CSS-only exports for consuming applications
+// This enables the pattern: import { themeContract, sprinkles } from 'library/css'
+
+export { themeContract } from '../theme/contract.css';
+export { sprinkles, responsiveProperties, type Sprinkles } from '../styles/sprinkles.css';
+export { createLightTheme, createDarkTheme, type ThemeOverrides } from '../utils/theme.css';
+
+// Recipe exports from components
+export { actionsRecipe, type ActionsVariants } from '../components/Actions/Actions.css';
+export { buttonRecipe, type ButtonVariants } from '../components/Button/Button.css';
+export { carouselRecipe, type CarouselVariants } from '../components/Carousel/Carousel.css';
+export { columnsRecipe, type ColumnsVariants } from '../components/Columns/Columns.css';
+export { consentRecipe, type ConsentCookieVariants } from '../components/ConsentCookie/ConsentCookie.css';
+export { footerRecipe, type FooterVariants } from '../components/Footer/Footer.css';
+export { formRecipe, type FormVariants } from '../components/Form/Form.css';
+export { rowRecipe, type RowVariants } from '../components/Form/Row/Row.css';
+export { inputRecipe, type InputVariants } from '../components/Form/TextField/Input/Input.css';
+export { labelRecipe, type LabelVariants } from '../components/Form/TextField/Label/Label.css';
+export { textFieldRecipe, type TextFieldVariants } from '../components/Form/TextField/TextField.css';
+export { textareaRecipe, type TextareaVariants } from '../components/Form/TextField/Textarea/Textarea.css';
+export { headerRecipe, type HeaderVariants } from '../components/Header/Header.css';
+export { iconRecipe, type IconVariants } from '../components/Icon/Icon.css';
+export { keyNumberRecipe, type KeyNumberVariants } from '../components/KeyNumber/KeyNumber.css';
+export { languageSwitcherRecipe, type LanguageSwitcherVariants } from '../components/LanguageSwitcher/LanguageSwitcher.css';
+export { logoRecipe, type LogoVariants } from '../components/Logo/Logo.css';
+export { mainRecipe, type MainVariants } from '../components/Main/Main.css';
+export { modalRecipe, modalContentRecipe, type ModalVariants, type ModalContentVariants } from '../components/Modal/Modal.css';
+export { navRecipe, type NavVariants } from '../components/Nav/Nav.css';
+export { navLegalRecipe, type NavLegalVariants } from '../components/NavLegal/NavLegal.css';
+export { navSocialRecipe, type NavSocialVariants } from '../components/NavSocial/NavSocial.css';
+export { sectionRecipe, type SectionVariants } from '../components/Section/Section.css';
+export { videoRecipe, type VideoVariants } from '../components/Video/Video.css';
+export { videoFullWidthRecipe, type VideoFullWidthVariants } from '../components/VideoFullWidth/VideoFullWidth.css';

package/src/index.ts

@@ -0,0 +1,96 @@
+// Theme system - Import this first to apply global styles
+export * from './theme';
+
+// Styles utilities
+export { sprinkles, responsiveProperties, type Sprinkles } from './styles/sprinkles.css';
+export { breakpoints, queries } from './styles/mediaqueries';
+
+// Vanilla Extract Components (fully migrated)
+export { Button, type ButtonProps } from './components/Button/Button';
+export { type ButtonVariants } from './components/Button/Button.css';
+
+export { Section, type SectionProps } from './components/Section/Section';
+export { type SectionVariants } from './components/Section/Section.css';
+
+export { Main, type MainProps } from './components/Main/Main';
+export { type MainVariants } from './components/Main/Main.css';
+
+export { Header, type HeaderProps } from './components/Header/Header';
+export { type HeaderVariants } from './components/Header/Header.css';
+
+export { Footer, type FooterProps } from './components/Footer/Footer';
+export { type FooterVariants } from './components/Footer/Footer.css';
+
+export { Nav, type NavProps } from './components/Nav/Nav';
+export { type NavVariants } from './components/Nav/Nav.css';
+
+export { Icon, type IconProps } from './components/Icon/Icon';
+export { type IconVariants } from './components/Icon/Icon.css';
+
+export { Modal, type ModalProps } from './components/Modal/Modal';
+export { type ModalVariants } from './components/Modal/Modal.css';
+
+export { Logo, type LogoProps } from './components/Logo/Logo';
+export { type LogoVariants } from './components/Logo/Logo.css';
+
+export { Columns, type ColumnsProps } from './components/Columns/Columns';
+export { type ColumnsVariants } from './components/Columns/Columns.css';
+
+export { Actions, type ActionsProps } from './components/Actions/Actions';
+export { type ActionsVariants } from './components/Actions/Actions.css';
+
+export { Carousel, type CarouselProps } from './components/Carousel/Carousel';
+export { type CarouselVariants } from './components/Carousel/Carousel.css';
+
+export { ConsentCookie, type ConsentCookieProps } from './components/ConsentCookie/ConsentCookie';
+export { type ConsentCookieVariants } from './components/ConsentCookie/ConsentCookie.css';
+
+export { KeyNumber, type KeyNumberProps } from './components/KeyNumber/KeyNumber';
+export { type KeyNumberVariants } from './components/KeyNumber/KeyNumber.css';
+
+export { NavSocial, type NavSocialProps, type SocialNetwork, type SocialLink } from './components/NavSocial/NavSocial';
+export { type NavSocialVariants } from './components/NavSocial/NavSocial.css';
+
+export { NavLegal, type NavLegalProps } from './components/NavLegal/NavLegal';
+export { type NavLegalVariants } from './components/NavLegal/NavLegal.css';
+
+export { LanguageSwitcher, type LanguageSwitcherProps, type Locale } from './components/LanguageSwitcher/LanguageSwitcher';
+export { type LanguageSwitcherVariants } from './components/LanguageSwitcher/LanguageSwitcher.css';
+
+// Video Components
+export { Video, type VideoProps } from './components/Video/Video';
+export { type VideoVariants } from './components/Video/Video.css';
+
+export { VideoFullWidth, type VideoFullWidthProps } from './components/VideoFullWidth/VideoFullWidth';
+export { type VideoFullWidthVariants } from './components/VideoFullWidth/VideoFullWidth.css';
+
+// Form Components
+export { Form, type FormProps } from './components/Form/Form';
+export { type FormVariants } from './components/Form/Form.css';
+
+export { Row, type RowProps } from './components/Form/Row/Row';
+export { type RowVariants } from './components/Form/Row/Row.css';
+
+export { TextField, type TextFieldProps, type InputType } from './components/Form/TextField/TextField';
+export { type TextFieldVariants } from './components/Form/TextField/TextField.css';
+
+// Form TextField Subcomponents
+export { Label, type LabelProps } from './components/Form/TextField/Label/Label';
+export { type LabelVariants } from './components/Form/TextField/Label/Label.css';
+
+export { Input, type InputProps, type InputType as InputFieldType } from './components/Form/TextField/Input/Input';
+export { type InputVariants } from './components/Form/TextField/Input/Input.css';
+
+export { Textarea, type TextareaProps } from './components/Form/TextField/Textarea/Textarea';
+export { type TextareaVariants } from './components/Form/TextField/Textarea/Textarea.css';
+
+export { ToRemove } from './components/ToRemove/ToRemove';
+
+// Theme utilities
+export { createDarkTheme, createLightTheme, type ThemeOverrides } from './utils/theme.css';
+// Theme contract and values
+export { themeContract } from './theme/contract.css';
+export { baseLightTheme, baseDarkTheme } from './theme/baseThemeValues';
+
+// Theme utilities
+export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './theme/utils';

package/src/styles/mediaqueries.ts

@@ -0,0 +1,17 @@
+export const breakpoints = {
+  mobile: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+export const queries = {
+  mobile: `screen and (min-width: ${breakpoints.mobile}px)`,
+  sm: `screen and (min-width: ${breakpoints.sm}px)`,
+  md: `screen and (min-width: ${breakpoints.md}px)`,
+  lg: `screen and (min-width: ${breakpoints.lg}px)`,
+  xl: `screen and (min-width: ${breakpoints.xl}px)`,
+  '2xl': `screen and (min-width: ${breakpoints['2xl']}px)`,
+};

package/src/theme/baseThemeValues.ts

@@ -0,0 +1,160 @@
+// Base theme values that can be imported and extended by apps
+export const baseLightTheme = {
+  colors: {
+    primary: '#FF7377',
+    secondary: '#FCEFE6',
+    accent: '#FF7377',
+    background: '#ffffff',
+    surface: '#f8f9fa',
+    text: '#000000',
+    textSecondary: '#666666',
+    textLight: '#f5f5f5',
+    border: '#e1e1e1',
+    error: '#dc3545',
+    warning: '#ffc107',
+    success: '#28a745',
+    info: '#17a2b8',
+  },
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '32px',
+    xl: '64px',
+    '2xl': '128px',
+  },
+  radii: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+    full: '9999px',
+  },
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
+  },
+  fontSizes: {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+    '2xl': '24px',
+    '3xl': '32px',
+    '4xl': '40px',
+  },
+  fontWeights: {
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeights: {
+    tight: '1.2',
+    normal: '1.5',
+    relaxed: '1.75',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
+    md: '0 4px 6px rgba(0, 0, 0, 0.1)',
+    lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
+    xl: '0 20px 25px rgba(0, 0, 0, 0.1)',
+  },
+  maxWidth: '1500px',
+  section: {
+    paddingTop: '48px',
+    paddingBottom: '48px',
+  },
+  header: {
+    height: '80px',
+  },
+  footer: {
+    height: '80px',
+  },
+};
+
+export const baseDarkTheme = {
+  colors: {
+    primary: '#1a73e8',
+    secondary: '#374151',
+    accent: '#60a5fa',
+    background: '#111827',
+    surface: '#1f2937',
+    text: '#ffffff',
+    textSecondary: '#9ca3af',
+    textLight: '#f3f4f6',
+    border: '#374151',
+    error: '#ef4444',
+    warning: '#f59e0b',
+    success: '#10b981',
+    info: '#3b82f6',
+  },
+  space: {
+    none: '0px',
+    xs: '4px',
+    sm: '8px',
+    md: '16px',
+    lg: '32px',
+    xl: '64px',
+    '2xl': '128px',
+  },
+  radii: {
+    none: '0px',
+    sm: '4px',
+    md: '8px',
+    lg: '16px',
+    xl: '24px',
+    full: '9999px',
+  },
+  fonts: {
+    body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: 'ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, monospace',
+  },
+  fontSizes: {
+    xs: '12px',
+    sm: '14px',
+    md: '16px',
+    lg: '18px',
+    xl: '20px',
+    '2xl': '24px',
+    '3xl': '32px',
+    '4xl': '40px',
+  },
+  fontWeights: {
+    light: '300',
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  lineHeights: {
+    tight: '1.2',
+    normal: '1.5',
+    relaxed: '1.75',
+  },
+  shadows: {
+    none: 'none',
+    sm: '0 1px 2px rgba(0, 0, 0, 0.1)',
+    md: '0 4px 6px rgba(0, 0, 0, 0.15)',
+    lg: '0 10px 15px rgba(0, 0, 0, 0.2)',
+    xl: '0 20px 25px rgba(0, 0, 0, 0.25)',
+  },
+  maxWidth: '1500px',
+  section: {
+    paddingTop: '48px',
+    paddingBottom: '48px',
+  },
+  header: {
+    height: '80px',
+  },
+  footer: {
+    height: '80px',
+  },
+};

package/src/theme/index.ts

@@ -0,0 +1,6 @@
+// Theme contract and values
+export { themeContract } from './contract.css';
+export { baseLightTheme, baseDarkTheme } from './baseThemeValues';
+
+// Theme utilities
+export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './utils';