@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/stories/Stack.stories.js

@@ -78,15 +78,29 @@ export default {
         gap: 'md',
         align: 'start',
         horizontal: false,
-        wrap: false
+        wrap: false,
+        fill: true
     },
     tags: [
         'autodocs'
     ],
     argTypes: {
         horizontal: {
+            control: 'select',
+            options: [
+                false,
+                true,
+                'xs',
+                'sm',
+                'md',
+                'lg',
+                'xl'
+            ],
+            description: 'Direction control. `true` for always horizontal. A breakpoint string (e.g. `"md"`) makes it vertical below and horizontal at/above that breakpoint.'
+        },
+        fill: {
             control: 'boolean',
-            description: 'If true, renders a horizontal stack (flex-row). Defaults to vertical (flex-col).'
+            description: 'When true and horizontal is active, children fill equal space. Defaults to true.'
         },
         gap: {
             control: 'select',
@@ -116,32 +130,21 @@ export default {
                 'start',
                 'center',
                 'end',
-                'space-between',
-                'space-evenly',
-                'space-around',
-                'spaceBetween'
+                'between'
             ],
             description: 'Main axis alignment (horizontal for horizontal stacks, vertical for vertical stacks)'
         },
-        blockAlign: {
+        justify: {
             control: 'select',
             options: [
                 'start',
                 'center',
                 'end',
-                'stretch'
+                'between',
+                'around',
+                'evenly'
             ],
-            description: 'Cross-axis alignment for horizontal stacks (vertical alignment)'
-        },
-        inlineAlign: {
-            control: 'select',
-            options: [
-                'start',
-                'center',
-                'end',
-                'stretch'
-            ],
-            description: 'Cross-axis alignment for vertical stacks (horizontal alignment)'
+            description: 'Main axis justification (horizontal for horizontal stacks, vertical for vertical stacks)'
         },
         wrap: {
             control: 'boolean',
@@ -380,7 +383,6 @@ export var VerticalAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ _jsxs(Stack, {
-                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
@@ -486,7 +488,7 @@ export var VerticalAlignment = {
                             padding: "4",
                             minHeight: "200px",
                             children: /*#__PURE__*/ _jsxs(Stack, {
-                                align: "space-between",
+                                justify: "between",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
@@ -538,7 +540,6 @@ export var HorizontalAlignment = {
                             padding: "4",
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
-                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
@@ -616,7 +617,7 @@ export var HorizontalAlignment = {
                             padding: "4",
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
-                                align: "space-between",
+                                justify: "between",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
@@ -660,7 +661,7 @@ export var CrossAxisAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ _jsxs(Stack, {
-                                inlineAlign: "start",
+                                align: "start",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
@@ -697,7 +698,7 @@ export var CrossAxisAlignment = {
                             border: "dashed",
                             padding: "4",
                             children: /*#__PURE__*/ _jsxs(Stack, {
-                                inlineAlign: "center",
+                                align: "center",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
@@ -736,7 +737,7 @@ export var CrossAxisAlignment = {
                             minHeight: "100px",
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
-                                blockAlign: "center",
+                                align: "center",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
@@ -771,7 +772,7 @@ export var CrossAxisAlignment = {
                             minHeight: "100px",
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
-                                blockAlign: "stretch",
+                                align: "stretch",
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
@@ -801,7 +802,7 @@ export var CrossAxisAlignment = {
     parameters: {
         docs: {
             description: {
-                story: 'Cross-axis alignment: use `inlineAlign` for vertical stacks (horizontal alignment) and `blockAlign` for horizontal stacks (vertical alignment).'
+                story: 'Use `align` for vertical alignment and `justify` for horizontal alignment.'
             }
         }
     }
@@ -864,7 +865,6 @@ export var Wrapping = {
                             overflowX: "auto",
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
-                                wrap: false,
                                 gap: "sm",
                                 children: [
                                     /*#__PURE__*/ _jsx(Button, {
@@ -908,13 +908,13 @@ export var ActionBar = {
             padded: true,
             children: /*#__PURE__*/ _jsxs(Stack, {
                 horizontal: true,
-                align: "space-between",
-                blockAlign: "center",
+                justify: "between",
+                align: "center",
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "sm",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 variant: "headingSm",
@@ -961,12 +961,12 @@ export var NavigationMenu = {
                 borderBlockEnd: "divider",
                 children: /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
-                    align: "space-between",
-                    blockAlign: "center",
+                    justify: "between",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            blockAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     variant: "headingMd",
@@ -1031,7 +1031,7 @@ export var IconAndText = {
                 /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Icon, {
                             source: HomeMinor,
@@ -1045,7 +1045,7 @@ export var IconAndText = {
                 /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Icon, {
                             source: ProductsMinor,
@@ -1062,7 +1062,7 @@ export var IconAndText = {
                 /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
                     gap: "sm",
-                    blockAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Icon, {
                             source: CustomersMinor,
@@ -1160,8 +1160,8 @@ export var StatusDashboard = {
                 children: [
                     /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 children: "Database Connection"
@@ -1169,7 +1169,7 @@ export var StatusDashboard = {
                             /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
                                         width: "8px",
@@ -1187,8 +1187,8 @@ export var StatusDashboard = {
                     }),
                     /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 children: "API Service"
@@ -1196,7 +1196,7 @@ export var StatusDashboard = {
                             /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
                                         width: "8px",
@@ -1214,8 +1214,8 @@ export var StatusDashboard = {
                     }),
                     /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
-                        align: "space-between",
-                        blockAlign: "center",
+                        justify: "between",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Text, {
                                 children: "Cache System"
@@ -1223,7 +1223,7 @@ export var StatusDashboard = {
                             /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
                                 gap: "xs",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
                                         width: "8px",
@@ -1258,7 +1258,7 @@ export var ProductCard = {
             padded: true,
             children: /*#__PURE__*/ _jsxs(Stack, {
                 horizontal: true,
-                blockAlign: "start",
+                align: "start",
                 wrap: true,
                 children: [
                     /*#__PURE__*/ _jsx(Box, {
@@ -1293,8 +1293,8 @@ export var ProductCard = {
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    align: "space-between",
-                                    blockAlign: "center",
+                                    justify: "between",
+                                    align: "center",
                                     wrap: true,
                                     children: [
                                         /*#__PURE__*/ _jsx(Text, {
@@ -1327,7 +1327,180 @@ export var ProductCard = {
     parameters: {
         docs: {
             description: {
-                story: 'Responsive product card layout using nested vertical and horizontal Stacks.'
+                story: 'Responsive product card layout using nested vertical and horizontal Stacks with to let children size naturally.'
+            }
+        }
+    }
+};
+export var ResponsiveBreakpoint = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({
+            horizontal: "md"
+        }, args), {
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "primary-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Column 1"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Column 2"
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Column 3"
+                    })
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Stack is vertical on small screens and becomes horizontal with equal-width children at the `md` (800px) breakpoint. Resize the browser to see the switch.'
+            }
+        }
+    }
+};
+export var FillChildren = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Fill enabled (default)"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({
+                            horizontal: true
+                        }, args), {
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "primary-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Equal Width 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Equal Width 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "success-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Equal Width 3"
+                                    })
+                                })
+                            ]
+                        }))
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Stack, {
+                    gap: "sm",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Fill disabled"
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            horizontal: true,
+                            children: [
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "primary-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Natural Width 1"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Natural Width 2"
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    padding: "4",
+                                    background: "success-subdued",
+                                    borderRadius: "default",
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        children: "Natural Width 3"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Comparison of `fill={true}` (default, children fill equal space) vs `fill={false}` (children size naturally).'
+            }
+        }
+    }
+};
+export var ResponsiveFill = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsxs(Stack, _object_spread_props(_object_spread({
+            horizontal: "md",
+            fill: true
+        }, args), {
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Plan A",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Basic features for small teams."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Plan B",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Pro features for growing businesses."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Plan C",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Enterprise features for large organizations."
+                    })
+                })
+            ]
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Stacks vertically on mobile, then fills equal-width columns at the `md` breakpoint. A common pattern for pricing cards or feature comparisons.'
             }
         }
     }

package/dist/esm/stories/Tabs.stories.js

@@ -610,8 +610,8 @@ export var NavigationExample = {
                                     borderRadius: "default",
                                     children: /*#__PURE__*/ _jsxs(Stack, {
                                         horizontal: true,
-                                        align: "space-between",
-                                        blockAlign: "center",
+                                        justify: "between",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ _jsx(Text, {
                                                 children: order

package/dist/esm/stories/Tag.stories.js

@@ -378,7 +378,7 @@ export var FilterTags = {
             children: [
                 /*#__PURE__*/ _jsxs(Stack, {
                     horizontal: true,
-                    blockAlign: "center",
+                    align: "center",
                     gap: "sm",
                     children: [
                         /*#__PURE__*/ _jsx(Text, {

package/dist/esm/stories/Thumbnail.stories.js

@@ -185,11 +185,11 @@ export var Sizes = {
     render: function() {
         return /*#__PURE__*/ _jsxs(Stack, {
             horizontal: true,
-            blockAlign: "center",
+            align: "center",
             children: [
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: "small",
@@ -204,7 +204,7 @@ export var Sizes = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: "medium",
@@ -219,7 +219,7 @@ export var Sizes = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: "large",
@@ -247,11 +247,11 @@ export var CustomSize = {
     render: function() {
         return /*#__PURE__*/ _jsxs(Stack, {
             horizontal: true,
-            blockAlign: "center",
+            align: "center",
             children: [
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: 32,
@@ -266,7 +266,7 @@ export var CustomSize = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: 64,
@@ -281,7 +281,7 @@ export var CustomSize = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: 80,
@@ -296,7 +296,7 @@ export var CustomSize = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Thumbnail, {
                             size: 120,
@@ -372,7 +372,6 @@ export var ProductGallery = {
             padded: true,
             children: /*#__PURE__*/ _jsx(Grid, {
                 columns: "auto-fill",
-                gap: "4",
                 minItemWidth: "120px",
                 children: products.map(function(product) {
                     return /*#__PURE__*/ _jsx(Box, {
@@ -381,7 +380,7 @@ export var ProductGallery = {
                         borderRadius: "lg",
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             gap: "sm",
-                            inlineAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Thumbnail, {
                                     size: "large",
@@ -448,7 +447,7 @@ export var UserAvatars = {
                         borderRadius: "lg",
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            blockAlign: "center",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Thumbnail, {
                                     size: "medium",
@@ -602,11 +601,11 @@ export var LoadingStates = {
                     }),
                     /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsxs(Stack, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {
                                         size: "large",
@@ -622,7 +621,7 @@ export var LoadingStates = {
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {
                                         size: "large",
@@ -638,7 +637,7 @@ export var LoadingStates = {
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 gap: "sm",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Thumbnail, {
                                         size: "large",
@@ -740,7 +739,7 @@ export var MediaLibrary = {
                         children: [
                             /*#__PURE__*/ _jsxs(Stack, {
                                 gap: "3",
-                                inlineAlign: "center",
+                                align: "center",
                                 as: Box,
                                 padding: "4",
                                 children: [
@@ -751,7 +750,7 @@ export var MediaLibrary = {
                                     }),
                                     /*#__PURE__*/ _jsxs(Stack, {
                                         gap: "xs",
-                                        inlineAlign: "center",
+                                        align: "center",
                                         children: [
                                             /*#__PURE__*/ _jsx(Text, {
                                                 style: {