@latte-macchiat-io/latte-vanilla-components 0.0.508 → 0.0.509

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.508",
+  "version": "0.0.509",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Spacer/export.tsx

@@ -0,0 +1 @@
+export { Spacer, type SpacerProps } from '.';

package/src/components/Spacer/index.tsx

@@ -0,0 +1,7 @@
+import { spacer } from './styles.css';
+
+import { cn } from '../../utils/styleOverride';
+
+export type SpacerProps = React.HTMLAttributes<HTMLDivElement> & {};
+
+export const Spacer = ({ className }: SpacerProps) => <hr className={cn(spacer, className)} />;

package/src/components/Spacer/stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Spacer } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof Spacer> = {
+  title: 'Latte Components / 1. Global / Actions',
+  component: Spacer,
+  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
+};
+
+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: {},
+};

package/src/components/Spacer/styles.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeContract } from '../../theme/contract.css';
+
+import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+
+export const spacer = style({
+  '@media': {
+    ...generateResponsiveMedia({
+      height: themeContract.spacer.height,
+    }),
+  },
+});

package/src/components/Spacer/theme.ts

@@ -0,0 +1,24 @@
+const themeSpacerBase = {
+  spacer: {
+    height: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeSpacerLight = {
+  spacer: {
+    ...themeSpacerBase.spacer,
+  },
+};
+
+export const themeSpacerDark = {
+  spacer: {
+    ...themeSpacerBase.spacer,
+  },
+};

package/src/index.ts

@@ -40,6 +40,8 @@ export * from './components/Modal/export';
 
 export * from './components/Logo/export';
 
+export * from './components/Spacer/export';
+
 export * from './components/ConsentCookie/export';
 
 export * from './components/ExpandCollapse/export';

package/src/theme/baseThemeValues.ts

@@ -23,6 +23,7 @@ import { themeNavLegalDark, themeNavLegalLight } from '../components/NavLegal/th
 import { themeNavSocialDark, themeNavSocialLight } from '../components/NavSocial/theme';
 import { themeParagraphDark, themeParagraphLight } from '../components/Paragraph/theme';
 import { themeSectionDark, themeSectionLight } from '../components/Section/theme';
+import { themeSpacerDark, themeSpacerLight } from '../components/Spacer/theme';
 import { themeVideoDark, themeVideoLight } from '../components/Video/theme';
 
 // Base theme values that can be imported and extended by apps
@@ -158,6 +159,7 @@ export const baseLightTheme = {
   ...themeBoxAlertLight,
 
   ...themeExpandCollapseLight,
+  ...themeSpacerLight,
 
   form: {
     ...themeFormLight.form,
@@ -301,6 +303,7 @@ export const baseDarkTheme = {
   ...themeBoxAlertDark,
 
   ...themeExpandCollapseDark,
+  ...themeSpacerDark,
 
   form: {
     ...themeFormDark.form,

package/src/theme/contract.css.ts

@@ -740,6 +740,17 @@ export const themeContract = createGlobalThemeContract({
     },
   },
 
+  spacer: {
+    height: {
+      mobile: 'latte-spacer-height-mobile',
+      sm: 'latte-spacer-height-sm',
+      md: 'latte-spacer-height-md',
+      lg: 'latte-spacer-height-lg',
+      xl: 'latte-spacer-height-xl',
+      '2xl': 'latte-spacer-height-2xl',
+    },
+  },
+
   modal: {
     border: 'latte-modal-border',
     borderRadius: 'latte-modal-borderRadius',

package/src/theme/createTheme.ts

@@ -38,6 +38,7 @@ export type ThemeOverrides = {
   boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
   consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
   expandCollapse?: Partial<typeof baseLightTheme.expandCollapse>;
+  spacer?: Partial<typeof baseLightTheme.spacer>;
 };
 
 // Utility to create a theme with partial overrides over light theme base
@@ -77,6 +78,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
     boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
     consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
     expandCollapse: { ...baseLightTheme.expandCollapse, ...overrides.expandCollapse },
+    spacer: { ...baseLightTheme.spacer, ...overrides.spacer },
   });
 };
 
@@ -117,6 +119,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
     boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
     consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
     expandCollapse: { ...baseLightTheme.expandCollapse, ...overrides.expandCollapse },
+    spacer: { ...baseLightTheme.spacer, ...overrides.spacer },
   });
 };