@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.177

package/package.json

@@ -1,29 +1,21 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.175",
+  "version": "0.0.177",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./css": {
-      "types": "./dist/css/index.d.ts",
-      "import": "./dist/css/index.js"
-    },
-    "./themes/*": {
-      "types": "./dist/themes/*.d.ts",
-      "import": "./dist/themes/*.js"
-    },
-    "./*.css.ts": "./src/*.css.ts"
+    ".": "./src/index.ts",
+    "./*.css.ts": "./src/*.css.ts",
+    "./src/*": "./src/*"
   },
   "files": [
-    "dist",
-    "src/**/*.css.ts"
+    "src/**/*.css.ts",
+    "src/**/*.ts",
+    "!src/**/*.stories.ts",
+    "!src/**/*.test.ts"
   ],
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.4",
@@ -53,7 +45,6 @@
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
-    "@vitejs/plugin-react": "^5.0.2",
     "clsx": "^2.1.1",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^10.0.1",
@@ -63,9 +54,7 @@
     "prettier": "^3.4.2",
     "storybook": "^8.5.2",
     "typescript": "5.6.3",
-    "typescript-eslint": "^8.21.0",
-    "vite": "^7.1.4",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript-eslint": "^8.21.0"
   },
   "engines": {
     "node": ">=20.9.0",
@@ -77,7 +66,7 @@
     ]
   },
   "scripts": {
-    "build": "vite build",
+    "build": "echo \"Source-only distribution - no build needed\"",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

package/src/assets/styles/default-theme.ts

@@ -0,0 +1,312 @@
+import { Theme } from '@/types/theme';
+
+const brandFont = '"Goudy Bookletter 1911", sans-serif';
+const defaultFont = '"Gill Sans", sans-serif';
+
+const brandColorTerracotta = '#FF7377';
+
+const brandColorBeigeDark = '#C8AE96';
+const brandColorBeigeLight = '#FCEFE6';
+
+const brandColorGrey = '#2E2E2E';
+const brandColorGreyLight = '#CCCCCC';
+const brandColorGreyMedium = ' #888888';
+const brandColorBlack = '#000000';
+
+const brandColor = brandColorTerracotta;
+
+export const defaultTheme: Theme = {
+  global: {
+    maxWidth: 1200,
+    paddingLeft: [15, 15, 30, 30],
+    paddingRight: [15, 15, 30, 30],
+
+    brandFont: brandFont,
+    defaultFont: defaultFont,
+  },
+
+  colors: {
+    defaultText: brandColorBlack,
+    defaultLightText: brandColorBeigeLight,
+    defaultTitle: '',
+    defaultLink: brandColorBlack,
+    defaultIcon: brandColorBlack,
+  },
+
+  backgroundColors: {
+    modal: brandColorBeigeLight,
+    modalOverlay: 'rgba(0, 0, 0, 0.6)',
+    cookieConsent: brandColorBeigeLight,
+  },
+
+  borders: {
+    hr: `1px solid ${brandColorBeigeDark}`,
+    cookieConsent: `2px solid ${brandColorBlack}`,
+  },
+
+  borderRadius: {
+    modal: 30,
+    input: 30,
+    cookieConsent: 30,
+  },
+
+  widthSizes: {
+    modal: 600,
+    cookieConsent: 500,
+  },
+
+  transitions: {
+    global: 'all 0.3s ease-in-out',
+  },
+
+  actions: {
+    gap: [15, 15, 30, 30],
+    paddingTop: [15, 15, 30, 30],
+    paddingBottom: [15, 15, 30, 30],
+  },
+
+  button: {
+    minWidth: 80,
+    fontWeight: 400,
+    letterSpacing: 0.1,
+    color: {
+      primary: brandColorBeigeLight,
+      secondary: brandColorGrey,
+      disabled: brandColorGreyMedium,
+    },
+    backgroundColor: {
+      primary: brandColor,
+      secondary: brandColorBeigeDark,
+      disabled: brandColorGreyLight,
+    },
+    border: {
+      width: 2,
+      style: 'solid',
+      color: {
+        primary: brandColor,
+        secondary: brandColorBeigeDark,
+        disabled: brandColorGreyLight,
+      },
+    },
+    borderRadius: 50,
+    paddingTop: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingBottom: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingLeft: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingRight: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    transition: 'all 0.3s ease-in-out',
+  },
+
+  columns: {
+    gap: 30,
+  },
+
+  keyNumber: {
+    paddingBottom: [5, 5, 10, 10, 15, 15],
+  },
+
+  form: {
+    width: 800,
+    padding: ['15px', '30px'],
+    backgroundColor: '',
+
+    row: {
+      gap: [30, 60],
+      padding: ['15px', '30px'],
+    },
+
+    label: {
+      font: brandFont,
+      fontWeight: 500,
+      color: brandColor,
+      paddingBottom: 5,
+    },
+
+    input: {
+      color: '',
+      borderRadius: 0,
+      padding: [5, 10],
+      font: defaultFont,
+      backgroundColor: '',
+      placeholder: {
+        color: '',
+        opacity: 1,
+      },
+      border: `2px solid ${brandColorBlack}`,
+    },
+
+    textarea: {
+      color: '',
+      borderRadius: 0,
+      padding: [5, 10],
+      font: defaultFont,
+      backgroundColor: '',
+      placeholder: {
+        color: '',
+        opacity: 1,
+      },
+      border: `2px solid ${brandColorBlack}`,
+    },
+
+    error: {
+      color: brandColorTerracotta,
+    },
+  },
+
+  header: {
+    gap: [15, 15, 15, 15],
+    height: [60, 60, 120, 120],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+
+    overlayGap: [15, 15, 15, 15],
+    overlayBackgroundColor: brandColorBeigeLight,
+
+    toggleNavColor: brandColorBlack,
+    toggleNavOpenColor: brandColorBlack,
+    toggleNavBorderRadius: 5,
+  },
+
+  main: {
+    minHeight: '45vh',
+    backgroundColor: brandColorBeigeLight,
+  },
+
+  section: {
+    paddingTop: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  footer: {
+    gap: [15, 15, 15, 15],
+    height: [60, 60, 120, 120],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  modal: {
+    border: '',
+    borderRadius: 0,
+    width: [50, 50, 75, 75],
+    backgroundColor: brandColorBeigeLight,
+
+    overlayBlur: 0,
+    overlayOpacity: 0.5,
+    overlayBackgroundColor: brandColorBlack,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  languageSwitcher: {
+    border: '',
+    borderRadius: 0,
+    color: brandColorBlack,
+    width: [150, 150, 200, 200],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  carousel: {
+    gap: [0, 0, 30, 60],
+    bullet: {
+      borderRadius: 0,
+      width: [12, 12, 12, 12],
+      height: [12, 12, 12, 12],
+      backgroundColor: brandColorBeigeLight,
+    },
+  },
+
+  video: {
+    playButton: {
+      border: '',
+      borderRadius: 0,
+      width: [50, 50, 75, 75],
+      height: [50, 50, 75, 75],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    pauseButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    soundButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    closeButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+  },
+
+  consentCookie: {
+    borders: 0,
+    borderRadius: 0,
+    width: [50, 50, 75, 75],
+    backgroundColor: brandColorBeigeLight,
+
+    overlayBlur: 0,
+    overlayOpacity: 0.5,
+    overlayBackgroundColor: brandColorBlack,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+
+    actionsGap: 30,
+    actionsPaddingTop: [15, 100, 100, 100],
+  },
+
+  nav: {
+    gap: [15, 15, 15, 15],
+  },
+
+  navSocial: {
+    gap: [15, 15, 15, 15],
+  },
+
+  navLegal: {
+    gap: [15, 15, 15, 15],
+  },
+};

package/src/components/Button/stories.ts

@@ -0,0 +1,127 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { fn } from '@storybook/test';
+
+// import { Button } from './export';
+// import { Size, Style, Variant } from './types';
+// import { buttonStyle } from './styles.css';
+// import { defaultTheme } from '../../assets/styles/default-theme';
+
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / 3. Buttons / Button',
+//   component: Button,
+//   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
+//   args: { onClick: fn() },
+// } satisfies Meta<typeof Button>;
+
+// 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: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Primary: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     variant: Variant.Primary,
+//   },
+// };
+
+// export const StyleOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Secondary: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     variant: Variant.Secondary,
+//   },
+// };
+
+// export const SecondaryOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//     variant: Variant.Secondary,
+//   },
+// };
+
+// export const StaticColor: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//     staticColor: '#76D1F5',
+//   },
+// };
+
+// export const StaticColorOutline: Story = {
+//   args: {
+//     children: 'Button',
+//     theme: defaultTheme,
+//     style: Style.Outline,
+//     className: buttonStyle,
+//     staticColor: '#76D1F5',
+//   },
+// };
+
+// export const Disabled: Story = {
+//   args: {
+//     isDisabled: true,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const Pending: Story = {
+//   args: {
+//     isPending: true,
+//     theme: defaultTheme,
+//     children: 'Pending...',
+//     className: buttonStyle,
+//   },
+// };
+
+// export const SizeSmall: Story = {
+//   args: {
+//     size: Size.Small,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };
+
+// export const SizeLarge: Story = {
+//   args: {
+//     size: Size.Large,
+//     children: 'Button',
+//     theme: defaultTheme,
+//     className: buttonStyle,
+//   },
+// };

package/src/components/Columns/stories.ts

@@ -0,0 +1,35 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { Columns } from '.';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Columns',
+//   component: Columns,
+//   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
+// } satisfies Meta<typeof Columns>;
+//
+// 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: {
+//     columns: [6, 6],
+//     children: '<div>Column 1</div> <div>Column 2</div>',
+//   },
+// };
+//
+// export const Default3Col: Story = {
+//   args: {
+//     columns: [4, 4, 4],
+//     children: '<div>Column 1</div> <div>Column 2</div> <div>Column 3</div>',
+//   },
+// };

package/src/components/Icon/path.ts

@@ -0,0 +1,36 @@
+const icons = {
+  caret:
+    'M8.12 9.29 12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.9959.9959 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0',
+  close:
+    'M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4',
+  arrowBack:
+    'M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42a.996.996 0 0 0-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1',
+  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',
+
+  //video
+  play: 'M8 5v14l11-7z',
+  pause: 'M6 19h4V5H6zm8-14v14h4V5z',
+  volumeMute: 'M7 9v6h4l5 5V4l-5 5z',
+  volumeUp:
+    'M3 9v6h4l5 5V4L7 9zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02M14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77',
+
+  // Social
+  socialFacebook:
+    'M 22.2816,10.9924 C 22.2816,4.92145 17.3602,0 11.2892,0 5.21832,0 0.296875,4.92145 0.296875,10.9924 c 0,5.4865 4.019725,10.0342 9.274805,10.8588 V 14.1698 H 6.78065 V 10.9924 H 9.57168 V 8.57061 c 0,-2.75496 1.64112,-4.27672 4.15202,-4.27672 1.2023,0 2.4606,0.2147 2.4606,0.2147 v 2.70515 h -1.3861 c -1.3654,0 -1.7914,0.8474 -1.7914,1.71756 v 2.0611 h 3.0487 l -0.4874,3.1774 h -2.5613 v 7.6814 c 5.2551,-0.8246 9.2748,-5.3723 9.2748,-10.8588 z',
+  socialInstagram:
+    'M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z',
+  socialPinterest:
+    'M9.04 21.54c.96.29 1.93.46 2.96.46a10 10 0 0 0 10-10A10 10 0 0 0 12 2 10 10 0 0 0 2 12c0 4.25 2.67 7.9 6.44 9.34-.09-.78-.18-2.07 0-2.96l1.15-4.94s-.29-.58-.29-1.5c0-1.38.86-2.41 1.84-2.41.86 0 1.26.63 1.26 1.44 0 .86-.57 2.09-.86 3.27-.17.98.52 1.84 1.52 1.84 1.78 0 3.16-1.9 3.16-4.58 0-2.4-1.72-4.04-4.19-4.04-2.82 0-4.48 2.1-4.48 4.31 0 .86.28 1.73.74 2.3.09.06.09.14.06.29l-.29 1.09c0 .17-.11.23-.28.11-1.28-.56-2.02-2.38-2.02-3.85 0-3.16 2.24-6.03 6.56-6.03 3.44 0 6.12 2.47 6.12 5.75 0 3.44-2.13 6.2-5.18 6.2-.97 0-1.92-.52-2.26-1.13l-.67 2.37c-.23.86-.86 2.01-1.29 2.7v-.03z',
+  socialLinkedIn:
+    'M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z',
+  socialSpotify: '',
+  socialTiktok:
+    'M21,2H3A1,1,0,0,0,2,3V21a1,1,0,0,0,1,1H21a1,1,0,0,0,1-1V3A1,1,0,0,0,21,2Zm-3.281,8.725h0c-.109.011-.219.016-.328.017A3.571,3.571,0,0,1,14.4,9.129v5.493a4.061,4.061,0,1,1-4.06-4.06c.085,0,.167.008.251.013v2a2.067,2.067,0,1,0-.251,4.119A2.123,2.123,0,0,0,12.5,14.649l.02-9.331h1.914A3.564,3.564,0,0,0,17.719,8.5Z',
+  socialX:
+    'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
+  socialYoutube:
+    'M10 15l5.19-3L10 9v6m11.56-7.83c.13.47.22 1.1.28 1.9.07.8.1 1.49.1 2.09L22 12c0 2.19-.16 3.8-.44 4.83-.25.9-.83 1.48-1.73 1.73-.47.13-1.33.22-2.65.28-1.3.07-2.49.1-3.59.1L12 19c-4.19 0-6.8-.16-7.83-.44-.9-.25-1.48-.83-1.73-1.73-.13-.47-.22-1.1-.28-1.9-.07-.8-.1-1.49-.1-2.09L2 12c0-2.19.16-3.8.44-4.83.25-.9.83-1.48 1.73-1.73.47-.13 1.33-.22 2.65-.28 1.3-.07 2.49-.1 3.59-.1L12 5c4.19 0 6.8.16 7.83.44.9.25 1.48.83 1.73 1.73z',
+};
+
+export default icons;

package/src/components/Icon/stories.ts

@@ -0,0 +1,29 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { defaultTheme } from '../../assets/styles/default-theme';
+// import { Icon } from '../../index';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / 1. Global / Icon',
+//   component: Icon,
+//   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
+// } satisfies Meta<typeof Icon>;
+//
+// 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: {
+//     icon: 'close',
+//     theme: defaultTheme,
+//   },
+// };

package/src/components/Main/stories.ts

@@ -0,0 +1,33 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+//
+// import { defaultTheme } from '../../assets/styles/default-theme';
+// import { Main } from '.';
+// import { mainStyle } from './styles.css';
+//
+// // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+// const meta = {
+//   title: 'Latte Components / Layout / Main',
+//   component: Main,
+//   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
+// } satisfies Meta<typeof Main>;
+//
+// 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: {
+//     className: mainStyle,
+//     theme: defaultTheme,
+//     children:
+//       '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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+//   },
+// };