@latte-macchiat-io/latte-vanilla-components 0.0.511 → 0.0.513

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.511",
+  "version": "0.0.513",
   "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/styles.css.ts

@@ -39,7 +39,13 @@ globalStyle(`${alertBoxBase} > div `, {
 
 export const alertBoxContent = style({
   width: '100%',
+  display: 'flex',
   alignSelf: 'center',
+  flexDirection: 'column',
+
+  '@media': generateResponsiveMedia({
+    gap: themeContract.box.gap,
+  }),
 });
 
 export type AlertBoxVariants = RecipeVariants<typeof alertBox>;

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/styles.css.ts

@@ -72,7 +72,7 @@ export const box = recipe({
 
   defaultVariants: {
     paddingTop: 'small',
-    variant: 'primary',
+    // variant: 'primary',
   },
 });