@gridui/grid 2.3.6 → 3.0.1

package/README.md

@@ -56,7 +56,7 @@ FrameBoundary instances use their current palette's border color.
 Astro host elements require an
 [application-owned adapter](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/usage/framework-adapters.md). The page filler uses
 the final section's tone for its leading line.
-Grid `frame="cells"` owns outer and cell edges; `frame="internal"` owns seams
+Grid `frame="all"` owns outer and cell edges; `frame="internal"` owns seams
 inside an existing frame. Use `fillLastRow` with direct GridItem children to
 fill incomplete rows at every breakpoint. Explicit gaps are disallowed in
 framed grids. For wrapping lists with a container-driven track count, use
@@ -101,3 +101,5 @@ See [quarterly release history](https://github.com/sudo-ui/GridUI-React-Monorepo
 
 `DashboardFrame` supplies full-height workspace gutters and structural edges without
 creating a main landmark. See [dashboard frames](docs/README.md#dashboard-frames).
+
+[Component reference](docs/reference/README.md) contains focused API pages for each public component.

package/dist/frame-footer/style.d.ts

@@ -4,5 +4,6 @@
  * @namespace FrameFooter
  * @description Style
  */
-export declare const frameSignatureStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const frameSignatureCroppedStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const frameSignatureStyles: (props?: ({
+    appearance?: "standard" | "cropped" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/frame-header/style.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameHeader
+ * @description Style
+ */
+export declare const frameHeaderContentStyles: (props?: ({
+    wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/frame-rail/style.d.ts

@@ -4,6 +4,7 @@
  * @namespace FrameRail
  * @description Style
  */
-export declare const frameRailStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const frameRailStyles: (props?: ({
+    placement?: "start" | "sticky-bottom" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const frameRailContentStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const frameRailStickyBottomStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/frame-section/style.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @author WMXPY
+ * @package Grid
+ * @namespace FrameSection
+ * @description Style
+ */
+export declare const frameSectionSurfaceStyles: (props?: ({
+    edges?: "none" | "frame" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/grid/grid.d.ts

@@ -12,7 +12,7 @@ type GridFrameOptions = {
     readonly frame?: "none";
     readonly gap?: Responsive<Space>;
 } | {
-    readonly frame: "none" | "cells" | "internal";
+    readonly frame: "none" | "all" | "internal";
     readonly gap?: never;
 };
 type GridLayoutOptions = ({

package/dist/grid/style.d.ts

@@ -5,8 +5,8 @@
  * @description Style
  */
 export declare const gridStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const gridCellsStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const gridAllStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridInternalStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const gridVariants: (props?: ({
-    frame?: "none" | "cells" | "internal" | null | undefined;
+    frame?: "none" | "all" | "internal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/grid-item/style.d.ts

@@ -4,4 +4,6 @@
  * @namespace GridItem
  * @description Style
  */
-export declare const gridItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const gridItemStyles: (props?: ({
+    align?: "center" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/index.js

@@ -195,6 +195,7 @@ var chromeStyle = (padding) => {
   const values = resolveResponsive(padding);
   return {
     "--gridui-chrome-padding": spaceValue(values.base),
+    "--gridui-chrome-padding-sm": spaceValue(values.sm),
     "--gridui-chrome-padding-md": spaceValue(values.md),
     "--gridui-chrome-padding-lg": spaceValue(values.lg)
   };
@@ -208,10 +209,17 @@ var frameChromeStyles = cva4("gridui-frame-chrome");
 import { cn as cn4 } from "@gridui/style-utils";
 import { paletteClass } from "@gridui/theme";
 import { cva as cva5 } from "class-variance-authority";
-var frameToneStyles = (options = {}) => {
-  const { tone = "neutral" } = options;
-  return tone === "neutral" ? "" : `gridui-frame-${tone} ${paletteClass(tone)}`;
-};
+var frameToneStyles = cva5("", {
+  variants: {
+    tone: {
+      neutral: null,
+      brand: `gridui-frame-brand ${paletteClass("brand")}`,
+      warning: `gridui-frame-warning ${paletteClass("warning")}`,
+      danger: `gridui-frame-danger ${paletteClass("danger")}`
+    }
+  },
+  defaultVariants: { tone: "neutral" }
+});
 var frameContentStyles = cva5(cn4(
   "gridui-frame-content",
   "gridui-u-grid--border-x gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--wrap-anywhere"
@@ -223,8 +231,15 @@ import { cva as cva6 } from "class-variance-authority";
 var frameSignatureStyles = cva6(cn5(
   "gridui-frame-signature gridui-u-grid--flex gridui-u-grid--min-w-0 gridui-u-grid--items-center gridui-u-grid--justify-center gridui-u-grid--gap-gridui-24 gridui-u-grid--py-gridui-32 gridui-u-grid--px-gridui-24 gridui-u-grid--overflow-hidden gridui-u-grid--border-t gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--bg-transparent",
   "gridui-u-grid--[&>svg]:h-auto gridui-u-grid--[&>svg]:opacity-30 gridui-u-grid--[&>span]:font-display gridui-u-grid--[&>span]:leading-none gridui-u-grid--[&>span]:text-transparent"
-));
-var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped gridui-u-grid--block gridui-u-grid--pb-0 gridui-u-grid--@container gridui-u-grid--[&>span]:block gridui-u-grid--[&>span]:text-center gridui-u-grid--[&>span]:whitespace-nowrap");
+), {
+  variants: {
+    appearance: {
+      standard: null,
+      cropped: "gridui-frame-signature-cropped gridui-u-grid--block gridui-u-grid--pb-0 gridui-u-grid--@container gridui-u-grid--[&>span]:block gridui-u-grid--[&>span]:text-center gridui-u-grid--[&>span]:whitespace-nowrap"
+    }
+  },
+  defaultVariants: { appearance: "standard" }
+});
 
 // src/frame-footer/frame-footer.tsx
 import { cn as cn6 } from "@gridui/style-utils";
@@ -232,7 +247,7 @@ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FrameFooter = (props) => {
   const { padding = {
     base: 16,
-    md: 24
+    sm: 24
   }, contentLayout = "flex", tone = "neutral", boundary = "line", decoration, signature, signatureAppearance = "standard", className, children, ...restProps } = props;
   return /* @__PURE__ */ jsxs3(
     "footer",
@@ -268,7 +283,7 @@ var FrameFooter = (props) => {
         signature ? /* @__PURE__ */ jsx5(
           "div",
           {
-            className: cn6(frameContentStyles(), frameSignatureStyles(), signatureAppearance === "cropped" && frameSignatureCroppedStyles()),
+            className: cn6(frameContentStyles(), frameSignatureStyles({ appearance: signatureAppearance })),
             "aria-hidden": "true",
             inert: true,
             children: signature
@@ -279,6 +294,18 @@ var FrameFooter = (props) => {
   );
 };
 
+// src/frame-header/style.ts
+import { cva as cva7 } from "class-variance-authority";
+var frameHeaderContentStyles = cva7(frameChromeStyles(), {
+  variants: {
+    wrap: {
+      false: "gridui-u-grid--[--gridui-frame-header-wrap:nowrap]",
+      true: "gridui-u-grid--[--gridui-frame-header-wrap:wrap]"
+    }
+  },
+  defaultVariants: { wrap: true }
+});
+
 // src/frame-header/frame-header.tsx
 import { cn as cn7 } from "@gridui/style-utils";
 import { spaceValue as spaceValue2 } from "@gridui/style-utils/responsive";
@@ -286,7 +313,7 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 var FrameHeader = (props) => {
   const { padding = {
     base: 16,
-    md: 24
+    sm: 24
   }, wrap = true, gap = 16, justify = "between", className, children, ...restProps } = props;
   return /* @__PURE__ */ jsx6(
     "header",
@@ -296,11 +323,11 @@ var FrameHeader = (props) => {
       children: /* @__PURE__ */ jsx6(
         "div",
         {
-          className: cn7(frameContentStyles(), frameChromeStyles()),
+          className: cn7(frameContentStyles(), frameHeaderContentStyles({ wrap })),
           "data-justify": justify,
           style: {
             ...chromeStyle(padding),
-            flexWrap: wrap ? "wrap" : "nowrap",
+            flexWrap: "var(--gridui-frame-header-wrap)",
             gap: spaceValue2(gap)
           },
           children
@@ -311,10 +338,17 @@ var FrameHeader = (props) => {
 };
 
 // src/frame-rail/style.ts
-import { cva as cva7 } from "class-variance-authority";
-var frameRailStyles = cva7("gridui-frame-rail gridui-u-grid--flex gridui-u-grid--h-full gridui-u-grid--box-border gridui-u-grid--flex-col gridui-u-grid--py-gridui-24 gridui-u-grid--text-muted");
-var frameRailContentStyles = cva7("gridui-frame-rail-content gridui-u-grid--relative gridui-u-grid--z-(--gridui-z-interaction) gridui-u-grid--min-w-0 gridui-u-grid--type-eyebrow gridui-u-grid--bg-inherit");
-var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom gridui-u-grid--justify-end gridui-u-grid--[&>.gridui-frame-rail-content]:sticky");
+import { cva as cva8 } from "class-variance-authority";
+var frameRailStyles = cva8("gridui-frame-rail gridui-u-grid--flex gridui-u-grid--h-full gridui-u-grid--box-border gridui-u-grid--flex-col gridui-u-grid--py-gridui-24 gridui-u-grid--text-muted", {
+  variants: {
+    placement: {
+      start: null,
+      "sticky-bottom": "gridui-frame-rail-sticky-bottom gridui-u-grid--justify-end gridui-u-grid--[&>.gridui-frame-rail-content]:sticky"
+    }
+  },
+  defaultVariants: { placement: "start" }
+});
+var frameRailContentStyles = cva8("gridui-frame-rail-content gridui-u-grid--relative gridui-u-grid--z-(--gridui-z-interaction) gridui-u-grid--min-w-0 gridui-u-grid--type-eyebrow gridui-u-grid--bg-inherit");
 
 // src/frame-rail/frame-rail.tsx
 import { cn as cn8 } from "@gridui/style-utils";
@@ -330,7 +364,7 @@ var FrameRail = (props) => {
     "div",
     {
       ...restProps,
-      className: cn8(frameRailStyles(), placement === "sticky-bottom" && frameRailStickyBottomStyles(), className),
+      className: cn8(frameRailStyles({ placement }), className),
       children: /* @__PURE__ */ jsx7(
         "div",
         {
@@ -349,15 +383,17 @@ import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FrameRailGroup = (props) => {
   const { rail, railWidth = {
     base: 0,
-    md: 32
+    sm: 32
   }, children, className, style, ...restProps } = props;
   const hasRail = rail !== void 0 && rail !== null && rail !== false;
   const width = resolveResponsive2(hasRail ? railWidth : 0);
   const layoutStyle = {
     "--gridui-rail-width-base": spaceValue3(width.base),
+    "--gridui-rail-width-sm": spaceValue3(width.sm),
     "--gridui-rail-width-md": spaceValue3(width.md),
     "--gridui-rail-width-lg": spaceValue3(width.lg),
     "--gridui-rail-display-base": width.base === 0 ? "none" : "block",
+    "--gridui-rail-display-sm": width.sm === 0 ? "none" : "block",
     "--gridui-rail-display-md": width.md === 0 ? "none" : "block",
     "--gridui-rail-display-lg": width.lg === 0 ? "none" : "block",
     ...style
@@ -440,6 +476,21 @@ var FrameTexture = (props) => {
   );
 };
 
+// src/frame-section/style.ts
+import { cva as cva9 } from "class-variance-authority";
+var frameSectionSurfaceStyles = cva9([
+  frameContentStyles(),
+  "gridui-frame-surface"
+], {
+  variants: {
+    edges: {
+      frame: null,
+      none: "gridui-u-grid--border-x-0"
+    }
+  },
+  defaultVariants: { edges: "frame" }
+});
+
 // src/frame-section/frame-section.tsx
 import { cn as cn12 } from "@gridui/style-utils";
 import { spacingVariables } from "@gridui/style-utils/responsive";
@@ -473,7 +524,7 @@ var FrameSection = (props) => {
         /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "gridui-u-grid--border-x-0"),
+            className: cn12(frameSectionSurfaceStyles({ edges })),
             style: {
               ...spacingVariables("section-padding-inline", paddingInline),
               ...spacingVariables("section-padding-block", paddingBlock)
@@ -521,11 +572,18 @@ var spanValue = (value) => {
 
 // src/grid-item/style.ts
 import { cn as cn14 } from "@gridui/style-utils";
-import { cva as cva8 } from "class-variance-authority";
-var gridItemStyles = cva8(cn14(
+import { cva as cva10 } from "class-variance-authority";
+var gridItemStyles = cva10(cn14(
   "gridui-grid-item",
   "gridui-u-grid--min-w-0 gridui-u-grid--wrap-anywhere"
-));
+), {
+  variants: {
+    align: {
+      center: "gridui-u-grid--[--gridui-grid-item-display:flex] gridui-u-grid--[--gridui-grid-item-align:center]",
+      end: "gridui-u-grid--[--gridui-grid-item-display:flex] gridui-u-grid--[--gridui-grid-item-align:end]"
+    }
+  }
+});
 
 // src/grid-item/grid-item.tsx
 import { cn as cn15 } from "@gridui/style-utils";
@@ -546,14 +604,16 @@ var GridItem = (props) => {
   const inset = resolveResponsive3(padding);
   const layoutStyle = {
     "--gridui-span": spanValue(size.base),
+    "--gridui-span-sm": spanValue(size.sm),
     "--gridui-span-md": spanValue(size.md),
     "--gridui-span-lg": spanValue(size.lg),
     "--gridui-padding": spaceValue4(inset.base),
+    "--gridui-padding-sm": spaceValue4(inset.sm),
     "--gridui-padding-md": spaceValue4(inset.md),
     "--gridui-padding-lg": spaceValue4(inset.lg),
     ...align ? {
-      display: "flex",
-      alignItems: align
+      display: "var(--gridui-grid-item-display)",
+      alignItems: "var(--gridui-grid-item-align)"
     } : {},
     ...style
   };
@@ -562,7 +622,7 @@ var GridItem = (props) => {
     Component,
     {
       ...restProps,
-      className: cn15(gridItemStyles(), className),
+      className: cn15(gridItemStyles({ align }), className),
       style: layoutStyle
     }
   );
@@ -570,24 +630,24 @@ var GridItem = (props) => {
 
 // src/grid/style.ts
 import { cn as cn16 } from "@gridui/style-utils";
-import { cva as cva9 } from "class-variance-authority";
-var gridStyles = cva9(cn16(
+import { cva as cva11 } from "class-variance-authority";
+var gridStyles = cva11(cn16(
   "gridui-grid",
   "gridui-u-grid--grid gridui-u-grid--min-w-0"
 ));
-var gridCellsStyles = cva9(cn16(
-  "gridui-grid-cells",
+var gridAllStyles = cva11(cn16(
+  "gridui-grid-all",
   "gridui-u-grid--border-t gridui-u-grid--border-solid gridui-u-grid--border-border gridui-u-grid--border-l gridui-u-grid--border-solid gridui-u-grid--border-border"
 ));
-var gridInternalStyles = cva9(cn16(
+var gridInternalStyles = cva11(cn16(
   "gridui-grid-internal",
   "gridui-u-grid--bg-border"
 ));
-var gridVariants = cva9(gridStyles(), {
+var gridVariants = cva11(gridStyles(), {
   variants: {
     frame: {
       none: "",
-      cells: gridCellsStyles(),
+      all: gridAllStyles(),
       internal: gridInternalStyles()
     }
   },
@@ -673,6 +733,7 @@ var Grid = (props) => {
     const minimum = resolveResponsive4(minItemWidth);
     geometry = {
       "--gridui-grid-template": adaptiveGridTemplate(minimum.base),
+      "--gridui-grid-template-sm": adaptiveGridTemplate(minimum.sm),
       "--gridui-grid-template-md": adaptiveGridTemplate(minimum.md),
       "--gridui-grid-template-lg": adaptiveGridTemplate(minimum.lg)
     };
@@ -683,14 +744,17 @@ var Grid = (props) => {
     const tracks = resolveResponsive4(columns);
     count = {
       base: gridColumnCount(tracks.base),
+      sm: gridColumnCount(tracks.sm),
       md: gridColumnCount(tracks.md),
       lg: gridColumnCount(tracks.lg)
     };
     geometry = {
       "--gridui-columns": count.base,
+      "--gridui-columns-sm": count.sm,
       "--gridui-columns-md": count.md,
       "--gridui-columns-lg": count.lg,
       "--gridui-grid-template": gridTemplate(tracks.base),
+      "--gridui-grid-template-sm": gridTemplate(tracks.sm),
       "--gridui-grid-template-md": gridTemplate(tracks.md),
       "--gridui-grid-template-lg": gridTemplate(tracks.lg)
     };
@@ -699,6 +763,7 @@ var Grid = (props) => {
   const layoutStyle = {
     ...geometry,
     "--gridui-gap": frame === "internal" ? "1px" : spaceValue5(spacing.base),
+    "--gridui-gap-sm": frame === "internal" ? "1px" : spaceValue5(spacing.sm),
     "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue5(spacing.md),
     "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue5(spacing.lg),
     ...style
@@ -718,6 +783,9 @@ var Grid = (props) => {
       base: fillGridRowSpans(count.base, spans.map((span) => {
         return span.base === "full" ? count.base : span.base;
       })),
+      sm: fillGridRowSpans(count.sm, spans.map((span) => {
+        return span.sm === "full" ? count.sm : span.sm;
+      })),
       md: fillGridRowSpans(count.md, spans.map((span) => {
         return span.md === "full" ? count.md : span.md;
       })),
@@ -728,6 +796,7 @@ var Grid = (props) => {
     content = items.map((item, index) => {
       const itemStyle = {
         "--gridui-span": `span ${filled.base[index]} / span ${filled.base[index]}`,
+        "--gridui-span-sm": `span ${filled.sm[index]} / span ${filled.sm[index]}`,
         "--gridui-span-md": `span ${filled.md[index]} / span ${filled.md[index]}`,
         "--gridui-span-lg": `span ${filled.lg[index]} / span ${filled.lg[index]}`,
         ...item.props.style
@@ -750,8 +819,8 @@ var Grid = (props) => {
 };
 
 // src/page-frame/style.ts
-import { cva as cva10 } from "class-variance-authority";
-var pageFrameVariants = cva10("gridui-page-frame gridui-u-grid--min-h-svh", {
+import { cva as cva12 } from "class-variance-authority";
+var pageFrameVariants = cva12("gridui-page-frame gridui-u-grid--min-h-svh", {
   variants: {
     width: containerWidthClasses
   },
@@ -837,11 +906,38 @@ var PageFrame = (props) => {
 
 // src/row/style.ts
 import { cn as cn19 } from "@gridui/style-utils";
-import { cva as cva11 } from "class-variance-authority";
-var rowStyles = cva11(cn19(
+import { cva as cva13 } from "class-variance-authority";
+var rowStyles = cva13(cn19(
   "gridui-row",
   "gridui-u-grid--min-w-0"
-));
+), {
+  variants: {
+    inline: {
+      false: "gridui-u-grid--[--gridui-row-display:flex]",
+      true: "gridui-u-grid--[--gridui-row-display:inline-flex]"
+    },
+    align: {
+      stretch: "gridui-u-grid--[--gridui-row-align:stretch]",
+      center: "gridui-u-grid--[--gridui-row-align:center]",
+      baseline: "gridui-u-grid--[--gridui-row-align:baseline]",
+      end: "gridui-u-grid--[--gridui-row-align:end]"
+    },
+    justify: {
+      start: "gridui-u-grid--[--gridui-row-justify:flex-start]",
+      between: "gridui-u-grid--[--gridui-row-justify:space-between]"
+    },
+    wrap: {
+      false: "gridui-u-grid--[--gridui-row-wrap:nowrap]",
+      true: "gridui-u-grid--[--gridui-row-wrap:wrap]"
+    }
+  },
+  defaultVariants: {
+    inline: false,
+    align: "stretch",
+    justify: "start",
+    wrap: true
+  }
+});
 
 // src/row/row.tsx
 import { cn as cn20 } from "@gridui/style-utils";
@@ -863,13 +959,18 @@ var Row = (props) => {
     "div",
     {
       ...restProps,
-      className: cn20(rowStyles(), className),
+      className: cn20(rowStyles({
+        inline,
+        align,
+        justify,
+        wrap
+      }), className),
       "data-inline": inline,
       style: {
-        display: inline ? "inline-flex" : "flex",
-        alignItems: align,
-        justifyContent: justify === "between" ? "space-between" : "flex-start",
-        flexWrap: wrap ? "wrap" : "nowrap",
+        display: "var(--gridui-row-display)",
+        alignItems: "var(--gridui-row-align)",
+        justifyContent: "var(--gridui-row-justify)",
+        flexWrap: "var(--gridui-row-wrap)",
         gap: `${spaceValue6(rowGap)} ${spaceValue6(gap)}`,
         ...style
       }
@@ -892,9 +993,11 @@ var Split = (props) => {
       className: cn21("gridui-split", className),
       "data-order": order,
       "data-direction": directions.base,
+      "data-direction-sm": directions.sm,
       "data-direction-md": directions.md,
       "data-direction-lg": directions.lg,
       "data-seam": seams.base,
+      "data-seam-sm": seams.sm,
       "data-seam-md": seams.md,
       "data-seam-lg": seams.lg
     }
@@ -903,11 +1006,17 @@ var Split = (props) => {
 
 // src/stack/style.ts
 import { cn as cn22 } from "@gridui/style-utils";
-import { cva as cva12 } from "class-variance-authority";
-var stackStyles = cva12(cn22(
+import { cva as cva14 } from "class-variance-authority";
+var stackStyles = cva14(cn22(
   "gridui-stack",
   "gridui-u-grid--flex gridui-u-grid--min-w-0 gridui-u-grid--flex-col"
-));
+), {
+  variants: {
+    width: {
+      full: "gridui-u-grid--[--gridui-stack-width:100%]"
+    }
+  }
+});
 
 // src/stack/stack.tsx
 import { cn as cn23 } from "@gridui/style-utils";
@@ -926,9 +1035,10 @@ var Stack = (props) => {
   const spacing = resolveResponsive6(gap);
   const layoutStyle = {
     "--gridui-gap": spaceValue7(spacing.base),
+    "--gridui-gap-sm": spaceValue7(spacing.sm),
     "--gridui-gap-md": spaceValue7(spacing.md),
     "--gridui-gap-lg": spaceValue7(spacing.lg),
-    width: width === "full" ? "100%" : void 0,
+    width: width === "full" ? "var(--gridui-stack-width)" : void 0,
     maxWidth,
     paddingTop: paddingStart === void 0 ? void 0 : spaceValue7(paddingStart),
     ...style
@@ -937,7 +1047,7 @@ var Stack = (props) => {
     "div",
     {
       ...restProps,
-      className: cn23(stackStyles(), className),
+      className: cn23(stackStyles({ width }), className),
       style: layoutStyle
     }
   );