@bamboocss/preset-base 1.30.1 → 1.32.0

package/dist/index.cjs

@@ -117,9 +117,18 @@ const conditions = {
 function definePattern(config) {
 	return config;
 }
-const box = definePattern({ transform(props) {
-	return props;
-} });
+/**
+* The one flexbox pattern. `stack`, `vstack`, `hstack` and `wrap` were this with defaults frozen
+* — `stack` added `direction: 'column'` and an 8px gap, the two axis-named ones additionally
+* hard-coded `align: 'center'` and dropped `direction` from the props, and `wrap` set
+* `flexWrap: 'wrap'`. Five names, one transform, and four of them a superset of the fifth only in
+* what they assumed for you.
+*
+* `gap` is deliberately not listed here and does not need to be: anything absent from
+* `properties` still arrives as an ordinary style prop, so `flex({ gap: '6' })` types and folds
+* exactly as it did through `stack`. What goes with the old names is the implicit `gap: '8px'`,
+* which was a design opinion no call site asked for.
+*/
 const flex = definePattern({
 	properties: {
 		align: {
@@ -166,144 +175,24 @@ const flex = definePattern({
 		};
 	}
 });
-const stack = definePattern({
-	properties: {
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		direction: {
-			type: "property",
-			value: "flexDirection"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: {
-		direction: "column",
-		gap: "8px"
-	},
-	transform(props) {
-		const { align, justify, direction, gap, ...rest } = props;
-		return {
-			display: "flex",
-			flexDirection: direction,
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			...rest
-		};
-	}
-});
-const vstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "column",
-			...rest
-		};
-	}
-});
-const hstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "row",
-			...rest
-		};
-	}
-});
 const spacer = definePattern({
 	properties: { size: {
 		type: "token",
 		value: "spacing"
 	} },
-	transform(props, { map, isCssUnit, isCssVar }) {
+	transform(props, { map, isCssUnit, isCssVar, token }) {
 		const { size, ...rest } = props;
 		return {
 			alignSelf: "stretch",
 			justifySelf: "stretch",
 			flex: map(size, (v) => {
 				if (v == null) return "1";
-				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
+				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : token(`spacing.${v}`, v)}`;
 			}),
 			...rest
 		};
 	}
 });
-const circle = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			borderRadius: "9999px",
-			...rest
-		};
-	}
-});
-const square = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			...rest
-		};
-	}
-});
 const grid = definePattern({
 	properties: {
 		gap: {
@@ -328,9 +217,9 @@ const grid = definePattern({
 	defaultValues(props) {
 		return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
 	},
-	transform(props, { map, isCssUnit }) {
+	transform(props, { map, isCssUnit, token }) {
 		const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
-		const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+		const getValue = (v) => isCssUnit(v) ? v : token(`sizes.${v}`, v);
 		return {
 			display: "grid",
 			gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -364,43 +253,6 @@ const gridItem = definePattern({
 		};
 	}
 });
-const wrap = definePattern({
-	properties: {
-		gap: {
-			type: "property",
-			value: "gap"
-		},
-		rowGap: {
-			type: "property",
-			value: "gap"
-		},
-		columnGap: {
-			type: "property",
-			value: "gap"
-		},
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		}
-	},
-	transform(props) {
-		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
-		return {
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			columnGap,
-			rowGap,
-			...rest
-		};
-	}
-});
 const container$1 = definePattern({ transform(props) {
 	return {
 		position: "relative",
@@ -414,21 +266,41 @@ const container$1 = definePattern({ transform(props) {
 		...props
 	};
 } });
+/**
+* Absorbs what `square` and `circle` used to be. `square({ size })` is `center({ size })`, and
+* `circle({ size })` is `center({ size, borderRadius: 'full' })` — `borderRadius` is an ordinary
+* style prop, so the rounded case needs nothing here beyond the size the square case already
+* wanted. Three patterns whose transforms differed by one declaration is three names to learn
+* and three places for `alignItems: center` to drift.
+*
+* `flex: '0 0 auto'` rides with `size` rather than being unconditional: it is what stops a sized
+* box from being shrunk by a flex parent, so it is meaningless without one, and applying it to
+* an unsized `center` would change how every existing call lays out inside a flex row.
+*/
 const center = definePattern({
-	properties: { inline: { type: "boolean" } },
+	properties: {
+		inline: { type: "boolean" },
+		size: {
+			type: "property",
+			value: "width"
+		}
+	},
 	transform(props) {
-		const { inline, ...rest } = props;
+		const { inline, size, ...rest } = props;
 		return {
 			display: inline ? "inline-flex" : "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			flex: size == null ? void 0 : "0 0 auto",
+			width: size,
+			height: size,
 			...rest
 		};
 	}
 });
 const aspectRatio = definePattern({
 	properties: { ratio: { type: "number" } },
-	blocklist: ["aspectRatio"],
+	cssProps: { except: ["aspectRatio"] },
 	transform(props, { map }) {
 		const { ratio = 4 / 3, ...rest } = props;
 		return {
@@ -489,14 +361,8 @@ const divider = definePattern({
 	}
 });
 const patterns = {
-	box,
 	flex,
-	stack,
-	vstack,
-	hstack,
 	spacer,
-	square,
-	circle,
 	center,
 	linkOverlay: definePattern({ transform(props) {
 		return {
@@ -513,7 +379,6 @@ const patterns = {
 	aspectRatio,
 	grid,
 	gridItem,
-	wrap,
 	container: container$1,
 	divider,
 	float: definePattern({
@@ -627,9 +492,9 @@ const patterns = {
 			inline: "0",
 			block: "0"
 		},
-		transform(props, { map, isCssUnit, isCssVar }) {
+		transform(props, { map, isCssUnit, isCssVar, token }) {
 			const { inline, block, ...rest } = props;
-			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : token(`spacing.${v}`, v);
 			return {
 				"--bleed-x": map(inline, valueFn),
 				"--bleed-y": map(block, valueFn),
@@ -638,34 +503,6 @@ const patterns = {
 				...rest
 			};
 		}
-	}),
-	visuallyHidden: definePattern({ transform(props) {
-		return {
-			srOnly: true,
-			...props
-		};
-	} }),
-	cq: definePattern({
-		properties: {
-			name: {
-				type: "token",
-				value: "containerNames",
-				property: "containerName"
-			},
-			type: {
-				type: "property",
-				value: "containerType"
-			}
-		},
-		defaultValues: { type: "inline-size" },
-		transform(props) {
-			const { name, type, ...rest } = props;
-			return {
-				containerType: type,
-				containerName: name,
-				...rest
-			};
-		}
 	})
 };
 //#endregion
@@ -1105,28 +942,10 @@ const cursor = { cursor: {
 } };
 //#endregion
 //#region src/utilities/display.ts
-const display = {
-	display: {
-		className: "d",
-		group: "Display"
-	},
-	hideFrom: {
-		className: "hide",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media (width >= ${value})`]: { display: "none" } };
-		}
-	},
-	hideBelow: {
-		className: "show",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media (width < ${value})`]: { display: "none" } };
-		}
-	}
-};
+const display = { display: {
+	className: "d",
+	group: "Display"
+} };
 //#endregion
 //#region src/utilities/divide.ts
 const divideColor = createColorMixTransform("borderColor");

package/dist/index.d.cts

@@ -112,17 +112,6 @@ declare const preset: {
   };
   utilities: import("@bamboocss/types").UtilityConfig;
   patterns: {
-    box: {
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      };
-    };
     flex: {
       properties: {
         align: {
@@ -169,93 +158,6 @@ declare const preset: {
         flexShrink: any;
       };
     };
-    stack: {
-      properties: {
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        direction: {
-          type: "property";
-          value: "flexDirection";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        direction: string;
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexDirection: any;
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-      };
-    };
-    vstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "column";
-      };
-    };
-    hstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "row";
-      };
-    };
     spacer: {
       properties: {
         size: {
@@ -270,35 +172,19 @@ declare const preset: {
       }, {
         map,
         isCssUnit,
-        isCssVar
+        isCssVar,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         alignSelf: "stretch";
         justifySelf: "stretch";
         flex: any;
       };
     };
-    square: {
+    center: {
       properties: {
-        size: {
-          type: "property";
-          value: "width";
+        inline: {
+          type: "boolean";
         };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: "0 0 auto";
-        width: any;
-        height: any;
-      };
-    };
-    circle: {
-      properties: {
         size: {
           type: "property";
           value: "width";
@@ -309,29 +195,12 @@ declare const preset: {
         [x: number]: any;
         [x: string & Record<never, never>]: any;
       }): {
-        display: "flex";
+        display: "flex" | "inline-flex";
         alignItems: "center";
         justifyContent: "center";
-        flex: "0 0 auto";
+        flex: "0 0 auto" | undefined;
         width: any;
         height: any;
-        borderRadius: "9999px";
-      };
-    };
-    center: {
-      properties: {
-        inline: {
-          type: "boolean";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex" | "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
       };
     };
     linkOverlay: {
@@ -349,7 +218,9 @@ declare const preset: {
           type: "number";
         };
       };
-      blocklist: "aspectRatio"[];
+      cssProps: {
+        except: "aspectRatio"[];
+      };
       transform(props: {
         [x: string]: any;
         [x: number]: any;
@@ -415,7 +286,8 @@ declare const preset: {
         [x: string & Record<never, never>]: any;
       }, {
         map,
-        isCssUnit
+        isCssUnit,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         display: "grid";
         gridTemplateColumns: any;
@@ -460,43 +332,6 @@ declare const preset: {
         gridRowEnd: any;
       };
     };
-    wrap: {
-      properties: {
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-        rowGap: {
-          type: "property";
-          value: "gap";
-        };
-        columnGap: {
-          type: "property";
-          value: "gap";
-        };
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexWrap: "wrap";
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-        columnGap: any;
-        rowGap: any;
-      };
-    };
     container: {
       transform(props: {
         [x: string]: any;
@@ -621,7 +456,8 @@ declare const preset: {
       }, {
         map,
         isCssUnit,
-        isCssVar
+        isCssVar,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         '--bleed-x': any;
         '--bleed-y': any;
@@ -629,39 +465,6 @@ declare const preset: {
         marginBlock: "calc(var(--bleed-y, 0) * -1)";
       };
     };
-    visuallyHidden: {
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        srOnly: true;
-      };
-    };
-    cq: {
-      properties: {
-        name: {
-          type: "token";
-          value: "containerNames";
-          property: "containerName";
-        };
-        type: {
-          type: "property";
-          value: "containerType";
-        };
-      };
-      defaultValues: {
-        type: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        containerType: any;
-        containerName: any;
-      };
-    };
   };
 };
 //#endregion

package/dist/index.d.mts

@@ -112,17 +112,6 @@ declare const preset: {
   };
   utilities: import("@bamboocss/types").UtilityConfig;
   patterns: {
-    box: {
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      };
-    };
     flex: {
       properties: {
         align: {
@@ -169,93 +158,6 @@ declare const preset: {
         flexShrink: any;
       };
     };
-    stack: {
-      properties: {
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        direction: {
-          type: "property";
-          value: "flexDirection";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        direction: string;
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexDirection: any;
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-      };
-    };
-    vstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "column";
-      };
-    };
-    hstack: {
-      properties: {
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-      };
-      defaultValues: {
-        gap: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: any;
-        gap: any;
-        flexDirection: "row";
-      };
-    };
     spacer: {
       properties: {
         size: {
@@ -270,35 +172,19 @@ declare const preset: {
       }, {
         map,
         isCssUnit,
-        isCssVar
+        isCssVar,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         alignSelf: "stretch";
         justifySelf: "stretch";
         flex: any;
       };
     };
-    square: {
+    center: {
       properties: {
-        size: {
-          type: "property";
-          value: "width";
+        inline: {
+          type: "boolean";
         };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        flex: "0 0 auto";
-        width: any;
-        height: any;
-      };
-    };
-    circle: {
-      properties: {
         size: {
           type: "property";
           value: "width";
@@ -309,29 +195,12 @@ declare const preset: {
         [x: number]: any;
         [x: string & Record<never, never>]: any;
       }): {
-        display: "flex";
+        display: "flex" | "inline-flex";
         alignItems: "center";
         justifyContent: "center";
-        flex: "0 0 auto";
+        flex: "0 0 auto" | undefined;
         width: any;
         height: any;
-        borderRadius: "9999px";
-      };
-    };
-    center: {
-      properties: {
-        inline: {
-          type: "boolean";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex" | "inline-flex";
-        alignItems: "center";
-        justifyContent: "center";
       };
     };
     linkOverlay: {
@@ -349,7 +218,9 @@ declare const preset: {
           type: "number";
         };
       };
-      blocklist: "aspectRatio"[];
+      cssProps: {
+        except: "aspectRatio"[];
+      };
       transform(props: {
         [x: string]: any;
         [x: number]: any;
@@ -415,7 +286,8 @@ declare const preset: {
         [x: string & Record<never, never>]: any;
       }, {
         map,
-        isCssUnit
+        isCssUnit,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         display: "grid";
         gridTemplateColumns: any;
@@ -460,43 +332,6 @@ declare const preset: {
         gridRowEnd: any;
       };
     };
-    wrap: {
-      properties: {
-        gap: {
-          type: "property";
-          value: "gap";
-        };
-        rowGap: {
-          type: "property";
-          value: "gap";
-        };
-        columnGap: {
-          type: "property";
-          value: "gap";
-        };
-        align: {
-          type: "property";
-          value: "alignItems";
-        };
-        justify: {
-          type: "property";
-          value: "justifyContent";
-        };
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        display: "flex";
-        flexWrap: "wrap";
-        alignItems: any;
-        justifyContent: any;
-        gap: any;
-        columnGap: any;
-        rowGap: any;
-      };
-    };
     container: {
       transform(props: {
         [x: string]: any;
@@ -621,7 +456,8 @@ declare const preset: {
       }, {
         map,
         isCssUnit,
-        isCssVar
+        isCssVar,
+        token
       }: import("@bamboocss/types").PatternHelpers): {
         '--bleed-x': any;
         '--bleed-y': any;
@@ -629,39 +465,6 @@ declare const preset: {
         marginBlock: "calc(var(--bleed-y, 0) * -1)";
       };
     };
-    visuallyHidden: {
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        srOnly: true;
-      };
-    };
-    cq: {
-      properties: {
-        name: {
-          type: "token";
-          value: "containerNames";
-          property: "containerName";
-        };
-        type: {
-          type: "property";
-          value: "containerType";
-        };
-      };
-      defaultValues: {
-        type: string;
-      };
-      transform(props: {
-        [x: string]: any;
-        [x: number]: any;
-        [x: string & Record<never, never>]: any;
-      }): {
-        containerType: any;
-        containerName: any;
-      };
-    };
   };
 };
 //#endregion

package/dist/index.mjs

@@ -113,9 +113,18 @@ const conditions = {
 function definePattern(config) {
 	return config;
 }
-const box = definePattern({ transform(props) {
-	return props;
-} });
+/**
+* The one flexbox pattern. `stack`, `vstack`, `hstack` and `wrap` were this with defaults frozen
+* — `stack` added `direction: 'column'` and an 8px gap, the two axis-named ones additionally
+* hard-coded `align: 'center'` and dropped `direction` from the props, and `wrap` set
+* `flexWrap: 'wrap'`. Five names, one transform, and four of them a superset of the fifth only in
+* what they assumed for you.
+*
+* `gap` is deliberately not listed here and does not need to be: anything absent from
+* `properties` still arrives as an ordinary style prop, so `flex({ gap: '6' })` types and folds
+* exactly as it did through `stack`. What goes with the old names is the implicit `gap: '8px'`,
+* which was a design opinion no call site asked for.
+*/
 const flex = definePattern({
 	properties: {
 		align: {
@@ -162,144 +171,24 @@ const flex = definePattern({
 		};
 	}
 });
-const stack = definePattern({
-	properties: {
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		direction: {
-			type: "property",
-			value: "flexDirection"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: {
-		direction: "column",
-		gap: "8px"
-	},
-	transform(props) {
-		const { align, justify, direction, gap, ...rest } = props;
-		return {
-			display: "flex",
-			flexDirection: direction,
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			...rest
-		};
-	}
-});
-const vstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "column",
-			...rest
-		};
-	}
-});
-const hstack = definePattern({
-	properties: {
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		},
-		gap: {
-			type: "property",
-			value: "gap"
-		}
-	},
-	defaultValues: { gap: "8px" },
-	transform(props) {
-		const { justify, gap, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: justify,
-			gap,
-			flexDirection: "row",
-			...rest
-		};
-	}
-});
 const spacer = definePattern({
 	properties: { size: {
 		type: "token",
 		value: "spacing"
 	} },
-	transform(props, { map, isCssUnit, isCssVar }) {
+	transform(props, { map, isCssUnit, isCssVar, token }) {
 		const { size, ...rest } = props;
 		return {
 			alignSelf: "stretch",
 			justifySelf: "stretch",
 			flex: map(size, (v) => {
 				if (v == null) return "1";
-				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
+				return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : token(`spacing.${v}`, v)}`;
 			}),
 			...rest
 		};
 	}
 });
-const circle = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			borderRadius: "9999px",
-			...rest
-		};
-	}
-});
-const square = definePattern({
-	properties: { size: {
-		type: "property",
-		value: "width"
-	} },
-	transform(props) {
-		const { size, ...rest } = props;
-		return {
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-			flex: "0 0 auto",
-			width: size,
-			height: size,
-			...rest
-		};
-	}
-});
 const grid = definePattern({
 	properties: {
 		gap: {
@@ -324,9 +213,9 @@ const grid = definePattern({
 	defaultValues(props) {
 		return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
 	},
-	transform(props, { map, isCssUnit }) {
+	transform(props, { map, isCssUnit, token }) {
 		const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
-		const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+		const getValue = (v) => isCssUnit(v) ? v : token(`sizes.${v}`, v);
 		return {
 			display: "grid",
 			gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -360,43 +249,6 @@ const gridItem = definePattern({
 		};
 	}
 });
-const wrap = definePattern({
-	properties: {
-		gap: {
-			type: "property",
-			value: "gap"
-		},
-		rowGap: {
-			type: "property",
-			value: "gap"
-		},
-		columnGap: {
-			type: "property",
-			value: "gap"
-		},
-		align: {
-			type: "property",
-			value: "alignItems"
-		},
-		justify: {
-			type: "property",
-			value: "justifyContent"
-		}
-	},
-	transform(props) {
-		const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
-		return {
-			display: "flex",
-			flexWrap: "wrap",
-			alignItems: align,
-			justifyContent: justify,
-			gap,
-			columnGap,
-			rowGap,
-			...rest
-		};
-	}
-});
 const container$1 = definePattern({ transform(props) {
 	return {
 		position: "relative",
@@ -410,21 +262,41 @@ const container$1 = definePattern({ transform(props) {
 		...props
 	};
 } });
+/**
+* Absorbs what `square` and `circle` used to be. `square({ size })` is `center({ size })`, and
+* `circle({ size })` is `center({ size, borderRadius: 'full' })` — `borderRadius` is an ordinary
+* style prop, so the rounded case needs nothing here beyond the size the square case already
+* wanted. Three patterns whose transforms differed by one declaration is three names to learn
+* and three places for `alignItems: center` to drift.
+*
+* `flex: '0 0 auto'` rides with `size` rather than being unconditional: it is what stops a sized
+* box from being shrunk by a flex parent, so it is meaningless without one, and applying it to
+* an unsized `center` would change how every existing call lays out inside a flex row.
+*/
 const center = definePattern({
-	properties: { inline: { type: "boolean" } },
+	properties: {
+		inline: { type: "boolean" },
+		size: {
+			type: "property",
+			value: "width"
+		}
+	},
 	transform(props) {
-		const { inline, ...rest } = props;
+		const { inline, size, ...rest } = props;
 		return {
 			display: inline ? "inline-flex" : "flex",
 			alignItems: "center",
 			justifyContent: "center",
+			flex: size == null ? void 0 : "0 0 auto",
+			width: size,
+			height: size,
 			...rest
 		};
 	}
 });
 const aspectRatio = definePattern({
 	properties: { ratio: { type: "number" } },
-	blocklist: ["aspectRatio"],
+	cssProps: { except: ["aspectRatio"] },
 	transform(props, { map }) {
 		const { ratio = 4 / 3, ...rest } = props;
 		return {
@@ -485,14 +357,8 @@ const divider = definePattern({
 	}
 });
 const patterns = {
-	box,
 	flex,
-	stack,
-	vstack,
-	hstack,
 	spacer,
-	square,
-	circle,
 	center,
 	linkOverlay: definePattern({ transform(props) {
 		return {
@@ -509,7 +375,6 @@ const patterns = {
 	aspectRatio,
 	grid,
 	gridItem,
-	wrap,
 	container: container$1,
 	divider,
 	float: definePattern({
@@ -623,9 +488,9 @@ const patterns = {
 			inline: "0",
 			block: "0"
 		},
-		transform(props, { map, isCssUnit, isCssVar }) {
+		transform(props, { map, isCssUnit, isCssVar, token }) {
 			const { inline, block, ...rest } = props;
-			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+			const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : token(`spacing.${v}`, v);
 			return {
 				"--bleed-x": map(inline, valueFn),
 				"--bleed-y": map(block, valueFn),
@@ -634,34 +499,6 @@ const patterns = {
 				...rest
 			};
 		}
-	}),
-	visuallyHidden: definePattern({ transform(props) {
-		return {
-			srOnly: true,
-			...props
-		};
-	} }),
-	cq: definePattern({
-		properties: {
-			name: {
-				type: "token",
-				value: "containerNames",
-				property: "containerName"
-			},
-			type: {
-				type: "property",
-				value: "containerType"
-			}
-		},
-		defaultValues: { type: "inline-size" },
-		transform(props) {
-			const { name, type, ...rest } = props;
-			return {
-				containerType: type,
-				containerName: name,
-				...rest
-			};
-		}
 	})
 };
 //#endregion
@@ -1101,28 +938,10 @@ const cursor = { cursor: {
 } };
 //#endregion
 //#region src/utilities/display.ts
-const display = {
-	display: {
-		className: "d",
-		group: "Display"
-	},
-	hideFrom: {
-		className: "hide",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}` : `@media (width >= ${value})`]: { display: "none" } };
-		}
-	},
-	hideBelow: {
-		className: "show",
-		values: "breakpoints",
-		group: "Display",
-		transform(value, { raw, token }) {
-			return { [token.raw(`breakpoints.${raw}`) ? `@breakpoint ${raw}Down` : `@media (width < ${value})`]: { display: "none" } };
-		}
-	}
-};
+const display = { display: {
+	className: "d",
+	group: "Display"
+} };
 //#endregion
 //#region src/utilities/divide.ts
 const divideColor = createColorMixTransform("borderColor");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bamboocss/preset-base",
-  "version": "1.30.1",
+  "version": "1.32.0",
   "description": "The base preset for Bamboo CSS that contains the conditions and utilities",
   "homepage": "https://bamboocss.com",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@bamboocss/types": "1.30.1"
+    "@bamboocss/types": "1.32.0"
   },
   "scripts": {
     "build": "tsdown src/index.ts --format=esm,cjs --dts",