@latte-macchiat-io/latte-vanilla-components 0.0.218 → 0.0.220

package/package.json

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

package/src/components/Columns/index.tsx

@@ -17,8 +17,7 @@ export const Columns = ({ align, vAlign, columns, children, className }: Columns
             key={index}
             className={columnItem}
             style={{
-              flex: columns[index],
-              maxWidth: `${columns[index]}%`,
+              flex: `0 0 ${columns[index]}%`,
             }}>
             {child}
           </div>

package/src/components/Columns/stories.tsx

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

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

@@ -65,6 +65,7 @@ export const columnItem = style({
   '@media': {
     [queries.md]: {
       flex: 'unset',
+      maxWidth: 'unset',
     },
   },
 });

package/src/index.ts

@@ -8,7 +8,8 @@ export { sprinkles, type Sprinkles } from './styles/sprinkles.css';
 export { breakpoints, queries } from './styles/mediaqueries';
 
 // Components
-export { ThemeToggle } from './components/ThemeToggle';
+
+export * from './components/ThemeToggle/export';
 
 export * from './components/Actions/export';
 export * from './components/Button/export';