fix: remove min, max size from stack components

Author: mu29

packages/react/src/preset/Button/ButtonCatalog.ts

@@ -43,7 +43,7 @@ Catalog.register('Button', {
       default: 'md',
     },
     children: {
-      label: 'Children',
+      label: 'Text',
       type: 'text',
       default: 'Button',
     },

packages/react/src/preset/HStack/HStack.tsx

@@ -9,14 +9,8 @@ type Props = PropsWithChildren<{
   alignHorizontal?: 'start' | 'end' | 'center' | 'between' | 'around';
   alignVertical?: 'stretch' | 'start' | 'end' | 'center';
   flex?: number;
-  size?: {
-    width?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    height?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-  };
+  width?: number | string;
+  height?: number | string;
   padding?: { top: number; right: number; bottom: number; left: number };
   margin?: { top: number; right: number; bottom: number; left: number };
   gap?: number;
@@ -28,10 +22,11 @@ export const HStack: FC<Props> = ({
   alignHorizontal,
   alignVertical,
   flex,
-  size,
   padding,
   margin,
   gap,
+  width,
+  height,
   background,
   ...props
 }) => (
@@ -43,12 +38,6 @@ export const HStack: FC<Props> = ({
     })}
     style={{
       flex,
-      width: size?.width,
-      minWidth: size?.minWidth,
-      maxWidth: size?.maxWidth,
-      height: size?.height,
-      minHeight: size?.minHeight,
-      maxHeight: size?.maxHeight,
       paddingTop: padding?.top,
       paddingBottom: padding?.bottom,
       paddingLeft: padding?.left,
@@ -58,6 +47,8 @@ export const HStack: FC<Props> = ({
       marginLeft: margin?.left,
       marginRight: margin?.right,
       gap,
+      width,
+      height,
       background,
     }}
     {...props}

packages/react/src/preset/HStack/HStackCatalog.tsx

@@ -53,53 +53,19 @@ Catalog.register('HStack', {
       type: 'number',
       optional: true,
     },
-    background: {
-      label: 'Background',
-      type: 'text',
-      default: '#EEEEEE',
+
+    width: {
+      group: 'Size',
+      label: 'Width',
+      type: 'number',
+      default: 100,
       optional: true,
     },
-    size: {
-      label: 'Size',
-      type: 'object',
-      fields: {
-        width: {
-          label: 'Width',
-          type: 'number',
-          default: 100,
-          optional: true,
-        },
-        minWidth: {
-          label: 'Min Width',
-          type: 'number',
-          optional: true,
-        },
-        maxWidth: {
-          label: 'Max Width',
-          type: 'number',
-          optional: true,
-        },
-        height: {
-          label: 'Height',
-          type: 'number',
-          default: 100,
-          optional: true,
-        },
-        minHeight: {
-          label: 'Min Height',
-          type: 'number',
-          optional: true,
-        },
-        maxHeight: {
-          label: 'Max Height',
-          type: 'number',
-          optional: true,
-        },
-      },
-      default: {
-        width: 100,
-        height: 100,
-      },
+    height: {
+      group: 'Size',
+      label: 'Height',
+      type: 'number',
+      default: 100,
       optional: true,
     },
     padding: {
@@ -158,6 +124,12 @@ Catalog.register('HStack', {
       },
       optional: true,
     },
+    background: {
+      label: 'Background',
+      type: 'text',
+      default: '#EEEEEE',
+      optional: true,
+    },
     children: {
       label: 'Children',
       type: 'node',

packages/react/src/preset/VStack/VStack.tsx

@@ -10,14 +10,8 @@ type Props = PropsWithChildren<{
   alignVertical?: 'start' | 'end' | 'center' | 'between' | 'around';
   flex?: number;
   gap?: number;
-  size?: {
-    width?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    height?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-  };
+  width?: number | string;
+  height?: number | string;
   padding?: { top: number; right: number; bottom: number; left: number };
   margin?: { top: number; right: number; bottom: number; left: number };
   background?: string;
@@ -28,9 +22,10 @@ export const VStack: FC<Props> = ({
   alignHorizontal,
   alignVertical,
   flex,
-  size,
   padding,
+  width,
   margin,
+  height,
   gap,
   background,
   ...props
@@ -43,12 +38,6 @@ export const VStack: FC<Props> = ({
     })}
     style={{
       flex,
-      width: size?.width,
-      minWidth: size?.minWidth,
-      maxWidth: size?.maxWidth,
-      height: size?.height,
-      minHeight: size?.minHeight,
-      maxHeight: size?.maxHeight,
       paddingTop: padding?.top,
       paddingBottom: padding?.bottom,
       paddingLeft: padding?.left,
@@ -57,8 +46,10 @@ export const VStack: FC<Props> = ({
       marginBottom: margin?.bottom,
       marginLeft: margin?.left,
       marginRight: margin?.right,
-      background,
       gap,
+      width,
+      height,
+      background,
     }}
     {...props}
   />

packages/react/src/preset/VStack/VStackCatalog.tsx

@@ -53,53 +53,18 @@ Catalog.register('VStack', {
       type: 'number',
       optional: true,
     },
-    background: {
-      label: 'Background',
-      type: 'text',
-      default: '#EEEEEE',
+    width: {
+      group: 'Size',
+      label: 'Width',
+      type: 'number',
+      default: 100,
       optional: true,
     },
-    size: {
-      label: 'Size',
-      type: 'object',
-      fields: {
-        width: {
-          label: 'Width',
-          type: 'number',
-          default: 100,
-          optional: true,
-        },
-        minWidth: {
-          label: 'Min Width',
-          type: 'number',
-          optional: true,
-        },
-        maxWidth: {
-          label: 'Max Width',
-          type: 'number',
-          optional: true,
-        },
-        height: {
-          label: 'Height',
-          type: 'number',
-          default: 100,
-          optional: true,
-        },
-        minHeight: {
-          label: 'Min Height',
-          type: 'number',
-          optional: true,
-        },
-        maxHeight: {
-          label: 'Max Height',
-          type: 'number',
-          optional: true,
-        },
-      },
-      default: {
-        width: 100,
-        height: 100,
-      },
+    height: {
+      group: 'Size',
+      label: 'Height',
+      type: 'number',
+      default: 100,
       optional: true,
     },
     padding: {
@@ -158,6 +123,12 @@ Catalog.register('VStack', {
       },
       optional: true,
     },
+    background: {
+      label: 'Background',
+      type: 'text',
+      default: '#EEEEEE',
+      optional: true,
+    },
     children: {
       label: 'Children',
       type: 'node',