@latte-macchiat-io/latte-vanilla-components 0.0.512 → 0.0.514

package/package.json

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

package/src/components/Box/Alert/index.tsx

@@ -13,10 +13,9 @@ export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
   AlertBoxVariants & {
     noIcon?: boolean;
     icon?: string | React.ReactNode;
-    title?: string | null;
   };
 
-export const AlertBox = ({ noIcon = false, variant = 'info', className, icon = undefined, children }: AlertBoxProps) => (
+export const AlertBox = ({ noIcon = false, variant = 'info', className, icon = icons.info, children }: AlertBoxProps) => (
   <Box direction="row" className={cn(alertBox({ variant }), className)}>
     {!noIcon &&
       (typeof icon === 'string' ? (

package/src/components/Box/Alert/stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Heading } from '../../Heading';
+import { Paragraph } from '../../Paragraph';
 import { AlertBox } from '.';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -27,7 +29,17 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
   args: {
-    title: 'Lorem ipsum',
-    children: <>This is an alert box example.</>,
+    children: (
+      <>
+        <Heading as="h3">Lorem ipsum</Heading>
+        <Paragraph>
+          <p>
+            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.
+          </p>
+        </Paragraph>
+      </>
+    ),
   },
 };

package/src/components/Box/Alert/theme.ts

@@ -1,3 +1,5 @@
+import { alertColorDanger, alertColorInfo, alertColorSuccess, alertColorWarning } from '../../../styles/colors';
+
 const themeBoxBase = {
   boxAlert: {},
 };
@@ -5,14 +7,12 @@ const themeBoxBase = {
 export const themeBoxAlertLight = {
   boxAlert: {
     ...themeBoxBase.boxAlert,
+
     variant: {
-      warning: {
-        iconColor: '',
-        backgroundColor: '',
-      },
-      info: { iconColor: '', backgroundColor: '#FF0000' },
-      success: { iconColor: '', backgroundColor: '' },
-      danger: { iconColor: '', backgroundColor: '' },
+      warning: { iconColor: '', backgroundColor: alertColorWarning },
+      info: { iconColor: '', backgroundColor: alertColorInfo },
+      success: { iconColor: '', backgroundColor: alertColorSuccess },
+      danger: { iconColor: '', backgroundColor: alertColorDanger },
     },
   },
 };
@@ -20,11 +20,12 @@ export const themeBoxAlertLight = {
 export const themeBoxAlertDark = {
   boxAlert: {
     ...themeBoxBase.boxAlert,
+
     variant: {
-      warning: { iconColor: '', backgroundColor: '' },
-      info: { iconColor: '', backgroundColor: '' },
-      success: { iconColor: '', backgroundColor: '' },
-      danger: { iconColor: '', backgroundColor: '' },
+      warning: { iconColor: '', backgroundColor: alertColorWarning },
+      info: { iconColor: '', backgroundColor: alertColorInfo },
+      success: { iconColor: '', backgroundColor: alertColorSuccess },
+      danger: { iconColor: '', backgroundColor: alertColorDanger },
     },
   },
 };

package/src/components/Box/index.tsx

@@ -15,7 +15,7 @@ export type BoxProps = React.HTMLAttributes<HTMLDivElement> &
     background?: string;
   };
 
-export const Box = ({ align, vAlign, children, variant, isLight, className, direction, isReversed, paddingTop }: BoxProps) => {
+export const Box = ({ align, vAlign, children, variant = 'primary', isLight, className, direction, isReversed, paddingTop }: BoxProps) => {
   return (
     <div className={cn(box({ variant, paddingTop }), className)}>
       <div className={boxContent({ vAlign, isLight, align, direction, isReversed })}>{children}</div>

package/src/components/Box/stories.tsx

@@ -17,7 +17,13 @@ const meta: Meta<typeof Box> = {
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {
+    variant: {
+      options: ['primary', 'secondary', 'transparent'],
+    },
     isLight: { control: 'boolean' },
+    paddingTop: {
+      options: ['small', 'medium', 'large'],
+    },
     isReversed: { control: 'boolean' },
   },
   // 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
@@ -30,6 +36,8 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     variant: 'primary',
+    isLight: false,
+    isReversed: false,
     children: (
       <>
         <Heading as="h3">Lorem ipsum</Heading>

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

@@ -1,4 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { queries, themeContract } from '@latte-macchiat-io/latte-vanilla-components';
 
@@ -83,12 +83,6 @@ export const boxContent = recipe({
       display: 'flex',
       maxWidth: '100%',
       flexDirection: 'column',
-
-      '@media': {
-        ...generateResponsiveMedia({
-          gap: themeContract.box.gap,
-        }),
-      },
     },
   ],
   variants: {
@@ -168,9 +162,5 @@ export const boxContent = recipe({
   },
 });
 
-globalStyle(`${boxBase} h1, ${boxBase} h2, ${boxBase} h3, ${boxBase} h4, ${boxBase} h5, ${boxBase} h6  `, {
-  paddingBottom: 0,
-});
-
 export type BoxVariants = RecipeVariants<typeof box>;
 export type BoxContentVariants = RecipeVariants<typeof boxContent>;