@latte-macchiat-io/latte-vanilla-components 0.0.199 → 0.0.201

package/package.json

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

package/src/components/Actions/export.tsx

@@ -1,4 +1,2 @@
-// export { Actions } from '.';
-// export type { ActionsProps } from '.';
-
-// export { styles as ActionsStyles } from './styles.css';
+export { Actions, type ActionsProps } from './';
+export { type ActionsVariants } from './styles.css';

package/src/components/Actions/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 
@@ -7,14 +5,11 @@ import { actionsRecipe, type ActionsVariants } from './styles.css';
 
 export type ActionsProps = React.HTMLAttributes<HTMLDivElement> &
   ActionsVariants & {
-    css?: string;
     children: React.ReactNode;
   };
 
-export const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ align, direction, css, className, children }, ref) => (
-  <div ref={ref} className={clsx(actionsRecipe({ align, direction }), css, className)}>
+export const Actions = forwardRef<HTMLDivElement, ActionsProps>(({ align, direction, className, children }, ref) => (
+  <div ref={ref} className={clsx(actionsRecipe({ align, direction }), className)}>
     {children}
   </div>
 ));
-
-Actions.displayName = 'Actions';

package/src/components/Actions/stories.tsx

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

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

@@ -35,6 +35,7 @@ export const actionsRecipe = recipe({
         justifyContent: 'flex-end',
       },
     },
+
     direction: {
       row: {
         flexDirection: 'row',

package/src/components/Actions/theme.ts

@@ -0,0 +1,40 @@
+const themeActionsBase = {
+  actions: {
+    gap: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingTop: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+    paddingBottom: {
+      mobile: '15px',
+      sm: '15px',
+      md: '30px',
+      lg: '30px',
+      xl: '50px',
+      '2xl': '50px',
+    },
+  },
+};
+
+export const themeActionsLight = {
+  actions: {
+    ...themeActionsBase.actions,
+  },
+};
+
+export const themeActionsDark = {
+  actions: {
+    ...themeActionsBase.actions,
+  },
+};

package/src/components/Button/index.tsx

@@ -25,5 +25,3 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 );
-
-Button.displayName = 'Button';

package/src/components/Carousel/index.tsx

@@ -227,5 +227,3 @@ export const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     );
   }
 );
-
-Carousel.displayName = 'Carousel';

package/src/components/Columns/index.tsx

@@ -32,5 +32,3 @@ export const Columns = forwardRef<HTMLDivElement, ColumnsProps>(({ align, vAlign
     </div>
   );
 });
-
-Columns.displayName = 'Columns';

package/src/components/ConsentCookie/ConsentCookie.tsx

@@ -198,5 +198,3 @@ export const ConsentCookie = forwardRef<HTMLDivElement, ConsentCookieProps>(
     );
   }
 );
-
-ConsentCookie.displayName = 'ConsentCookie';

package/src/components/Footer/index.tsx

@@ -15,5 +15,3 @@ export const Footer = forwardRef<HTMLDivElement, FooterProps>(({ children, css,
     </footer>
   );
 });
-
-Footer.displayName = 'Footer';

package/src/components/Form/Form.tsx

@@ -123,5 +123,3 @@ export const Form = forwardRef<HTMLFormElement, FormProps>(
     );
   }
 );
-
-Form.displayName = 'Form';

package/src/components/Form/Row/Row.tsx

@@ -133,5 +133,3 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(
     );
   }
 );
-
-Row.displayName = 'Row';

package/src/components/Form/TextField/Input/Input.tsx

@@ -135,5 +135,3 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
-
-Input.displayName = 'Input';

package/src/components/Form/TextField/Label/Label.tsx

@@ -129,5 +129,3 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(
     );
   }
 );
-
-Label.displayName = 'Label';

package/src/components/Form/TextField/Textarea/Textarea.tsx

@@ -131,5 +131,3 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     );
   }
 );
-
-Textarea.displayName = 'Textarea';

package/src/components/Header/index.tsx

@@ -49,5 +49,3 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
     );
   }
 );
-
-Header.displayName = 'Header';

package/src/components/KeyNumber/index.tsx

@@ -47,5 +47,3 @@ export const KeyNumber = forwardRef<HTMLDivElement, KeyNumberProps>(
     );
   }
 );
-
-KeyNumber.displayName = 'KeyNumber';

package/src/components/LanguageSwitcher/index.tsx

@@ -76,5 +76,3 @@ export const LanguageSwitcher = forwardRef<HTMLDivElement, LanguageSwitcherProps
     );
   }
 );
-
-LanguageSwitcher.displayName = 'LanguageSwitcher';

package/src/components/Modal/index.tsx

@@ -38,5 +38,3 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(({ triggerLabel, css
     </>
   );
 });
-
-Modal.displayName = 'Modal';

package/src/components/Nav/index.tsx

@@ -18,5 +18,3 @@ export const Nav = forwardRef<HTMLDivElement, NavProps>(({ children, css, classN
     </div>
   );
 });
-
-Nav.displayName = 'Nav';

package/src/components/NavLegal/index.tsx

@@ -13,5 +13,3 @@ export const NavLegal = forwardRef<HTMLDivElement, NavLegalProps>(({ css, classN
     {children}
   </div>
 ));
-
-NavLegal.displayName = 'NavLegal';

package/src/components/NavSocial/index.tsx

@@ -28,5 +28,3 @@ export const NavSocial = forwardRef<HTMLDivElement, NavSocialProps>(({ navSocial
     </div>
   );
 });
-
-NavSocial.displayName = 'NavSocial';

package/src/components/Section/index.tsx

@@ -16,5 +16,3 @@ export const Section = forwardRef<HTMLElement, SectionProps>(
     </section>
   )
 );
-
-Section.displayName = 'Section';

package/src/components/Video/index.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-/* eslint-disable jsx-a11y/media-has-caption */
-
 import { clsx } from 'clsx';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import {
@@ -113,5 +111,3 @@ export const Video = forwardRef<HTMLDivElement, VideoProps>(
     );
   }
 );
-
-Video.displayName = 'Video';

package/src/index.ts

@@ -10,6 +10,8 @@ export { breakpoints, queries } from './styles/mediaqueries';
 // Components
 export { ThemeToggle } from './components/ThemeToggle';
 
+export * from './components/Actions/export';
+
 export { Button, type ButtonProps } from './components/Button';
 export { type ButtonVariants } from './components/Button/styles.css';
 
@@ -35,9 +37,6 @@ export { Logo, type LogoProps } from './components/Logo';
 
 export { Columns, type ColumnsProps } from './components/Columns';
 
-export { Actions, type ActionsProps } from './components/Actions';
-export { type ActionsVariants } from './components/Actions/styles.css';
-
 export { Carousel, type CarouselProps } from './components/Carousel';
 export { type CarouselVariants } from './components/Carousel/styles.css';
 
@@ -48,6 +47,7 @@ export { KeyNumber, type KeyNumberProps } from './components/KeyNumber';
 export { type KeyNumberVariants } from './components/KeyNumber/styles.css';
 
 export { NavSocial, type NavSocialProps } from './components/NavSocial';
+export { type Social } from './components/NavSocial/types';
 
 export { NavLegal, type NavLegalProps } from './components/NavLegal';
 

package/src/theme/baseThemeValues.ts

@@ -1,3 +1,5 @@
+import { themeActionsDark, themeActionsLight } from '../components/Actions/theme';
+
 // Base theme values that can be imported and extended by apps
 export const baseLightTheme = {
   colors: {
@@ -208,32 +210,7 @@ export const baseLightTheme = {
     },
   },
 
-  actions: {
-    gap: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingBottom: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-  },
+  ...themeActionsLight,
 
   button: {
     minWidth: '100',
@@ -980,32 +957,7 @@ export const baseDarkTheme = {
     color: '#FF7377',
   },
 
-  actions: {
-    gap: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingTop: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-    paddingBottom: {
-      mobile: '15px',
-      sm: '15px',
-      md: '30px',
-      lg: '30px',
-      xl: '50px',
-      '2xl': '50px',
-    },
-  },
+  ...themeActionsDark,
 
   modal: {
     border: 'none',