@latte-macchiat-io/latte-vanilla-components 0.0.468 → 0.0.470

package/package.json

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

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

@@ -1,26 +1,27 @@
-import { alertBox, alertBoxContent } from './styles.css';
+import { alertBox, alertBoxContent, AlertBoxVariants } from './styles.css';
 
 import { Box } from '..';
 
 import { themeContract } from '../../../theme/contract.css';
 
 import { cn } from '../../../utils/styleOverride';
+
 import { Heading } from '../../Heading';
 import { Icon } from '../../Icon';
 import icons from '../../Icon/path';
 import { Paragraph } from '../../Paragraph';
 
-export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> & {
-  text: string;
-  noIcon?: boolean;
-  title?: string | null;
-  variant?: 'info';
-};
+export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> &
+  AlertBoxVariants & {
+    text: string;
+    noIcon?: boolean;
+    title?: string | null;
+  };
 
 export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
   return (
-    <Box direction="row" className={cn(alertBox({ variant }), className)}>
-      {!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
+    <Box direction="row" className={className}>
+      {!noIcon && <Icon iconPath={icons[variant]} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
       <div className={alertBoxContent}>
         {title && <Heading as="h4">{title}</Heading>}
         <Paragraph>{text}</Paragraph>

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

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

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

@@ -1,12 +1,8 @@
-// import { globalStyle, style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 
-import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
 import { themeContract } from '../../../theme/contract.css';
-
-// import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-// import { themeContract } from '../../../theme/contract.css';
-// import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
+import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
 
 export const alertBox = recipe({
   base: {},
@@ -26,18 +22,21 @@ export const alertBox = recipe({
       },
     },
   },
+  defaultVariants: {
+    variant: 'warning',
+  },
 });
 
-// globalStyle(`${alertBox} > div `, {
-//   flexDirection: 'row',
+globalStyle(`${alertBox} > div `, {
+  flexDirection: 'row',
 
-//   '@media': generateResponsiveMedia({
-//     gap: themeContract.box.gap,
-//   }),
-// });
+  '@media': generateResponsiveMedia({
+    gap: themeContract.box.gap,
+  }),
+});
 
 export const alertBoxContent = style({
   width: '100%',
 });
 
-// export type AlertBoxVariants = RecipeVariants<typeof alertBox>;
+export type AlertBoxVariants = RecipeVariants<typeof alertBox>;

package/src/components/Icon/path.ts

@@ -8,6 +8,14 @@ const icons = {
   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',
 
+  warning:
+    'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z',
+  info: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1-8h-2V7h2z',
+  success:
+    'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2M9.29 16.29 5.7 12.7a.996.996 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0L10 14.17l6.88-6.88c.39-.39 1.02-.39 1.41 0s.39 1.02 0 1.41l-7.59 7.59c-.38.39-1.02.39-1.41 0',
+  danger:
+    'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1m1 4h-2v-2h2z',
+
   //video
   play: 'M8 5v14l11-7z',
   pause: 'M6 19h4V5H6zm8-14v14h4V5z',

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

@@ -1 +0,0 @@
-export type AlertVariant = 'warning' | 'info' | 'success' | 'danger';