@gridui/grid 2.2.1 → 2.3.1

package/README.md

@@ -1,6 +1,6 @@
 # Grid foundation
 
-See the [usage handbook](../../docs/usage/README.md) and
+See the [usage handbook](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/usage/README.md) and
 [Grid contract](docs/README.md) for practical usage.
 
 `@gridui/grid` owns Container, Grid, GridItem, Split, Stack, Row,
@@ -18,9 +18,13 @@ controls and tables inside those regions so their own borders remain intact.
 See [linear regions](docs/README.md#linear-regions) for the full contract.
 
 FrameSection and FrameFooter accept `tone="neutral" | "brand" | "warning" | "danger"`.
-Non-neutral tones scope background, foreground, muted text, borders, controls,
-and focus colors to that region. Theme owns the paired light/dark tokens;
-Grid owns their inherited application. Nested non-neutral tones establish their own palette; neutral inherits its surroundings.
+Non-neutral tones reuse Theme's public `paletteClass` contract for background,
+foreground, muted text, borders, controls, and focus colors. Theme owns both
+palette values and their scoped semantic mapping; Grid owns region geometry.
+Nested non-neutral tones establish their own palette; `tone="neutral"` continues
+to inherit its surroundings. Use `paletteClass("neutral")` from `@gridui/theme`
+on a native content surface for an explicit reset to registered application
+neutral colors without adding a section or boundary.
 
 FrameSection owns its leading separator and inline frame edges. Use
 `boundary="none"` and `edges="none"` when an enclosing region owns them.
@@ -47,12 +51,17 @@ At a section seam, a non-neutral tone takes precedence over neutral; between
 two non-neutral tones, the lower section supplies the color. The lower section
 still draws the only separator. This works across React section groups without
 changing either region's content palette. Astro host elements require an
-[application-owned adapter](../../docs/usage/framework-adapters.md). The page filler uses
+[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
 inside an existing frame. Use `fillLastRow` with direct GridItem children to
 fill incomplete rows at every breakpoint. Explicit gaps are disallowed in
-framed grids. Hover/focus outlines paint above neighboring seams and page lines.
+framed grids. For wrapping lists with a container-driven track count, use
+`columns="auto"` with `minItemWidth` and optional responsive gap. The minimum is
+capped to available space. `Grid asChild` and `GridItem asChild` preserve native
+ul/ol/li hosts without wrapper elements. Adaptive mode excludes frames and
+`fillLastRow`; root `asChild` also excludes `fillLastRow`, preserving the fixed
+planner's direct-item contract. Hover/focus outlines paint above neighboring seams and page lines.
 Table cell lines belong to Table; functional control borders belong to their Core families.
 
 See the [Grid contract](docs/README.md#grid-foundation) for geometry and API.
@@ -76,11 +85,11 @@ Unit tests mirror these owners under `test/unit/primitives/` and
 `test/unit/frame/`. Tests can combine public primitives to protect their
 collaboration. Keep ordinary presentation in the owner's CVA `style.ts`. Retain
 track resolution, seams, and decorative geometry in colocated CSS imported by
-the root stylesheet. See the [source conventions](../../docs/development/typescript-conventions.md#component-directories).
+the root stylesheet. See the [source conventions](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/development/typescript-conventions.md#component-directories).
 Consumers use the package root and explicit stylesheet export; internal file
 paths are private.
 
-See [quarterly release history](.changeset/history/) for prepared release notes and consumption records.
+See [quarterly release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-layout/grid/.changeset/history) for prepared release notes and consumption records.
 
 `DashboardFrame` supplies full-height workspace gutters and structural edges without
 creating a main landmark. See [dashboard frames](docs/README.md#dashboard-frames).

package/dist/grid/grid.d.ts

@@ -7,15 +7,31 @@
 import type { ElementProps } from "../shared/types";
 import type { GridColumns } from "./responsive";
 import { type Responsive, type Space } from "@gridui/style-utils/responsive";
-import { type FC } from "react";
-export type GridProps = ElementProps & {
-    readonly columns?: Responsive<GridColumns>;
-    readonly fillLastRow?: boolean;
-} & ({
+import { type FC, type ReactElement } from "react";
+type GridFrameOptions = {
     readonly frame?: "none";
     readonly gap?: Responsive<Space>;
 } | {
-    readonly frame: "cells" | "internal";
+    readonly frame: "none" | "cells" | "internal";
     readonly gap?: never;
+};
+type GridLayoutOptions = ({
+    readonly columns?: Responsive<GridColumns>;
+    readonly minItemWidth?: never;
+} & GridFrameOptions) | {
+    readonly columns: "auto";
+    readonly minItemWidth: Responsive<string | number>;
+    readonly frame?: "none";
+    readonly gap?: Responsive<Space>;
+    readonly fillLastRow?: false;
+};
+export type GridProps = ElementProps & GridLayoutOptions & ({
+    readonly asChild?: false;
+    readonly fillLastRow?: boolean;
+} | {
+    readonly asChild: true;
+    readonly children: ReactElement;
+    readonly fillLastRow?: false;
 });
 export declare const Grid: FC<GridProps>;
+export {};

package/dist/grid/tracks.d.ts

@@ -7,4 +7,5 @@
 import type { GridColumns } from "./responsive";
 export declare const gridColumnCount: (columns: GridColumns) => number;
 export declare const gridTemplate: (columns: GridColumns) => string;
+export declare const adaptiveGridTemplate: (minItemWidth: string | number) => string;
 export declare const fillGridRowSpans: (columns: number, spans: readonly number[]) => number[];

package/dist/index.js

@@ -70,28 +70,28 @@ import { cva as cva2 } from "class-variance-authority";
 var dashboardFrameVariants = cva2("gridui-dashboard-frame", {
   variants: {
     startSize: {
-      none: "[--gridui-dashboard-start:0px] [--gridui-dashboard-start-minimum:0px]",
-      small: "[--gridui-dashboard-start:var(--gridui-space-8)]",
-      medium: "[--gridui-dashboard-start:var(--gridui-space-16)]",
-      large: "[--gridui-dashboard-start:var(--gridui-space-24)]"
+      none: "gridui-u-[--gridui-dashboard-start:0px] gridui-u-[--gridui-dashboard-start-minimum:0px]",
+      small: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-8)]",
+      medium: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-16)]",
+      large: "gridui-u-[--gridui-dashboard-start:var(--gridui-space-24)]"
     },
     endSize: {
-      none: "[--gridui-dashboard-end:0px] [--gridui-dashboard-end-minimum:0px]",
-      small: "[--gridui-dashboard-end:var(--gridui-space-8)]",
-      medium: "[--gridui-dashboard-end:var(--gridui-space-16)]",
-      large: "[--gridui-dashboard-end:var(--gridui-space-24)]"
+      none: "gridui-u-[--gridui-dashboard-end:0px] gridui-u-[--gridui-dashboard-end-minimum:0px]",
+      small: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-8)]",
+      medium: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-16)]",
+      large: "gridui-u-[--gridui-dashboard-end:var(--gridui-space-24)]"
     },
     compactStartSize: {
-      none: "[--gridui-dashboard-compact-start:0px] [--gridui-dashboard-compact-start-minimum:0px]",
-      small: "[--gridui-dashboard-compact-start:var(--gridui-space-8)]",
-      medium: "[--gridui-dashboard-compact-start:var(--gridui-space-16)]",
-      large: "[--gridui-dashboard-compact-start:var(--gridui-space-24)]"
+      none: "gridui-u-[--gridui-dashboard-compact-start:0px] gridui-u-[--gridui-dashboard-compact-start-minimum:0px]",
+      small: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-8)]",
+      medium: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-16)]",
+      large: "gridui-u-[--gridui-dashboard-compact-start:var(--gridui-space-24)]"
     },
     compactEndSize: {
-      none: "[--gridui-dashboard-compact-end:0px] [--gridui-dashboard-compact-end-minimum:0px]",
-      small: "[--gridui-dashboard-compact-end:var(--gridui-space-8)]",
-      medium: "[--gridui-dashboard-compact-end:var(--gridui-space-16)]",
-      large: "[--gridui-dashboard-compact-end:var(--gridui-space-24)]"
+      none: "gridui-u-[--gridui-dashboard-compact-end:0px] gridui-u-[--gridui-dashboard-compact-end-minimum:0px]",
+      small: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-8)]",
+      medium: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-16)]",
+      large: "gridui-u-[--gridui-dashboard-compact-end:var(--gridui-space-24)]"
     }
   },
   defaultVariants: {
@@ -205,30 +205,25 @@ var frameChromeStyles = cva4("gridui-frame-chrome");
 
 // src/shared/frame-style.ts
 import { cn as cn4 } from "@gridui/style-utils";
+import { paletteClass } from "@gridui/theme";
 import { cva as cva5 } from "class-variance-authority";
-var frameToneStyles = cva5("", {
-  variants: {
-    tone: {
-      neutral: "",
-      brand: "gridui-frame-brand",
-      warning: "gridui-frame-warning",
-      danger: "gridui-frame-danger"
-    }
-  }
-});
+var frameToneStyles = (options = {}) => {
+  const { tone = "neutral" } = options;
+  return tone === "neutral" ? "" : `gridui-frame-${tone} ${paletteClass(tone)}`;
+};
 var frameContentStyles = cva5(cn4(
   "gridui-frame-content",
-  "border-x border-solid border-border wrap-anywhere"
+  "gridui-u-border-x gridui-u-border-solid gridui-u-border-border gridui-u-wrap-anywhere"
 ));
 
 // src/frame-footer/style.ts
 import { cn as cn5 } from "@gridui/style-utils";
 import { cva as cva6 } from "class-variance-authority";
 var frameSignatureStyles = cva6(cn5(
-  "gridui-frame-signature flex min-w-0 items-center justify-center gap-gridui-24 py-gridui-32 px-gridui-24 overflow-hidden border-t border-solid border-border bg-transparent",
-  "[&>svg]:h-auto [&>svg]:opacity-30 [&>span]:font-display [&>span]:leading-none [&>span]:text-transparent"
+  "gridui-frame-signature gridui-u-flex gridui-u-min-w-0 gridui-u-items-center gridui-u-justify-center gridui-u-gap-gridui-24 gridui-u-py-gridui-32 gridui-u-px-gridui-24 gridui-u-overflow-hidden gridui-u-border-t gridui-u-border-solid gridui-u-border-border gridui-u-bg-transparent",
+  "gridui-u-[&>svg]:h-auto gridui-u-[&>svg]:opacity-30 gridui-u-[&>span]:font-display gridui-u-[&>span]:leading-none gridui-u-[&>span]:text-transparent"
 ));
-var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped block pb-0 @container [&>span]:block [&>span]:text-center [&>span]:whitespace-nowrap");
+var frameSignatureCroppedStyles = cva6("gridui-frame-signature-cropped gridui-u-block gridui-u-pb-0 gridui-u-@container gridui-u-[&>span]:block gridui-u-[&>span]:text-center gridui-u-[&>span]:whitespace-nowrap");
 
 // src/frame-footer/frame-footer.tsx
 import { cn as cn6 } from "@gridui/style-utils";
@@ -316,9 +311,9 @@ var FrameHeader = (props) => {
 
 // src/frame-rail/style.ts
 import { cva as cva7 } from "class-variance-authority";
-var frameRailStyles = cva7("gridui-frame-rail flex h-full box-border flex-col py-gridui-24 text-muted");
-var frameRailContentStyles = cva7("gridui-frame-rail-content relative z-(--gridui-z-interaction) min-w-0 type-eyebrow bg-inherit");
-var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom justify-end [&>.gridui-frame-rail-content]:sticky");
+var frameRailStyles = cva7("gridui-frame-rail gridui-u-flex gridui-u-h-full gridui-u-box-border gridui-u-flex-col gridui-u-py-gridui-24 gridui-u-text-muted");
+var frameRailContentStyles = cva7("gridui-frame-rail-content gridui-u-relative gridui-u-z-(--gridui-z-interaction) gridui-u-min-w-0 gridui-u-type-eyebrow gridui-u-bg-inherit");
+var frameRailStickyBottomStyles = cva7("gridui-frame-rail-sticky-bottom gridui-u-justify-end gridui-u-[&>.gridui-frame-rail-content]:sticky");
 
 // src/frame-rail/frame-rail.tsx
 import { cn as cn8 } from "@gridui/style-utils";
@@ -477,7 +472,7 @@ var FrameSection = (props) => {
         /* @__PURE__ */ jsxs5(
           "div",
           {
-            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "border-x-0"),
+            className: cn12(frameContentStyles(), "gridui-frame-surface", edges === "none" && "gridui-u-border-x-0"),
             style: {
               ...spacingVariables("section-padding-inline", paddingInline),
               ...spacingVariables("section-padding-block", paddingBlock)
@@ -528,7 +523,7 @@ import { cn as cn14 } from "@gridui/style-utils";
 import { cva as cva8 } from "class-variance-authority";
 var gridItemStyles = cva8(cn14(
   "gridui-grid-item",
-  "min-w-0 wrap-anywhere"
+  "gridui-u-min-w-0 gridui-u-wrap-anywhere"
 ));
 
 // src/grid-item/grid-item.tsx
@@ -577,15 +572,15 @@ import { cn as cn16 } from "@gridui/style-utils";
 import { cva as cva9 } from "class-variance-authority";
 var gridStyles = cva9(cn16(
   "gridui-grid",
-  "grid min-w-0"
+  "gridui-u-grid gridui-u-min-w-0"
 ));
 var gridCellsStyles = cva9(cn16(
   "gridui-grid-cells",
-  "border-t border-solid border-border border-l border-solid border-border"
+  "gridui-u-border-t gridui-u-border-solid gridui-u-border-border gridui-u-border-l gridui-u-border-solid gridui-u-border-border"
 ));
 var gridInternalStyles = cva9(cn16(
   "gridui-grid-internal",
-  "bg-border"
+  "gridui-u-bg-border"
 ));
 var gridVariants = cva9(gridStyles(), {
   variants: {
@@ -610,6 +605,13 @@ var gridTemplate = (columns) => {
     return track === "1fr" ? "minmax(0, 1fr)" : track;
   }).join(" ");
 };
+var adaptiveGridTemplate = (minItemWidth) => {
+  if (typeof minItemWidth === "number" && (!Number.isFinite(minItemWidth) || minItemWidth <= 0) || typeof minItemWidth === "string" && !minItemWidth.trim()) {
+    throw new RangeError("Adaptive Grid minItemWidth must be a positive number or a nonempty CSS length.");
+  }
+  const minimum = typeof minItemWidth === "number" ? `${minItemWidth}px` : minItemWidth;
+  return `repeat(auto-fit, minmax(min(100%, ${minimum}), 1fr))`;
+};
 var fillGridRowSpans = (columns, spans) => {
   let occupied = 0;
   return spans.map((span, index) => {
@@ -636,11 +638,14 @@ var fillGridRowSpans = (columns, spans) => {
 // src/grid/grid.tsx
 import { cn as cn17 } from "@gridui/style-utils";
 import { resolveResponsive as resolveResponsive4, spaceValue as spaceValue5 } from "@gridui/style-utils/responsive";
-import { Children, cloneElement, isValidElement } from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { Children, cloneElement, Fragment as Fragment2, isValidElement } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var Grid = (props) => {
   const {
     columns = 1,
+    minItemWidth,
+    asChild = false,
     frame = "none",
     gap = 16,
     fillLastRow = false,
@@ -649,27 +654,56 @@ var Grid = (props) => {
     children,
     ...restProps
   } = props;
-  const tracks = resolveResponsive4(columns);
-  const count = {
-    base: gridColumnCount(tracks.base),
-    md: gridColumnCount(tracks.md),
-    lg: gridColumnCount(tracks.lg)
-  };
+  if (fillLastRow && (asChild || columns === "auto")) {
+    throw new TypeError("Grid fillLastRow requires fixed columns and direct GridItem children, without asChild.");
+  }
+  if (columns === "auto" && frame !== "none") {
+    throw new TypeError("Adaptive Grid does not support framed cells.");
+  }
+  if (asChild && (!isValidElement(children) || children.type === Fragment2)) {
+    throw new TypeError("Grid asChild requires one element that forwards props and refs to its root.");
+  }
+  let geometry;
+  let count = null;
+  if (columns === "auto") {
+    if (minItemWidth === void 0) {
+      throw new TypeError("Adaptive Grid requires minItemWidth.");
+    }
+    const minimum = resolveResponsive4(minItemWidth);
+    geometry = {
+      "--gridui-grid-template": adaptiveGridTemplate(minimum.base),
+      "--gridui-grid-template-md": adaptiveGridTemplate(minimum.md),
+      "--gridui-grid-template-lg": adaptiveGridTemplate(minimum.lg)
+    };
+  } else {
+    if (minItemWidth !== void 0) {
+      throw new TypeError("Grid minItemWidth requires columns=auto.");
+    }
+    const tracks = resolveResponsive4(columns);
+    count = {
+      base: gridColumnCount(tracks.base),
+      md: gridColumnCount(tracks.md),
+      lg: gridColumnCount(tracks.lg)
+    };
+    geometry = {
+      "--gridui-columns": count.base,
+      "--gridui-columns-md": count.md,
+      "--gridui-columns-lg": count.lg,
+      "--gridui-grid-template": gridTemplate(tracks.base),
+      "--gridui-grid-template-md": gridTemplate(tracks.md),
+      "--gridui-grid-template-lg": gridTemplate(tracks.lg)
+    };
+  }
   const spacing = resolveResponsive4(frame === "none" ? gap : 0);
   const layoutStyle = {
-    "--gridui-columns": count.base,
-    "--gridui-columns-md": count.md,
-    "--gridui-columns-lg": count.lg,
-    "--gridui-grid-template": gridTemplate(tracks.base),
-    "--gridui-grid-template-md": gridTemplate(tracks.md),
-    "--gridui-grid-template-lg": gridTemplate(tracks.lg),
+    ...geometry,
     "--gridui-gap": frame === "internal" ? "1px" : spaceValue5(spacing.base),
     "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue5(spacing.md),
     "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue5(spacing.lg),
     ...style
   };
   let content = children;
-  if (fillLastRow) {
+  if (fillLastRow && count) {
     const items = Children.toArray(children).map((child) => {
       if (!isValidElement(child) || child.type !== GridItem) {
         throw new TypeError("Grid fillLastRow requires direct GridItem children.");
@@ -702,8 +736,9 @@ var Grid = (props) => {
       });
     });
   }
+  const Component = asChild ? Slot4 : "div";
   return /* @__PURE__ */ jsx15(
-    "div",
+    Component,
     {
       ...restProps,
       className: cn17(gridVariants({ frame }), className),
@@ -715,7 +750,7 @@ var Grid = (props) => {
 
 // src/page-frame/style.ts
 import { cva as cva10 } from "class-variance-authority";
-var pageFrameVariants = cva10("gridui-page-frame min-h-svh", {
+var pageFrameVariants = cva10("gridui-page-frame gridui-u-min-h-svh", {
   variants: {
     width: {
       narrow: "gridui-container-narrow",
@@ -729,7 +764,7 @@ var pageFrameVariants = cva10("gridui-page-frame min-h-svh", {
 // src/page-frame/page-frame.tsx
 import { cn as cn18 } from "@gridui/style-utils";
 import { spacingVariables as spacingVariables2 } from "@gridui/style-utils/responsive";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var PageFrame = (props) => {
   const {
     width = "standard",
@@ -744,7 +779,7 @@ var PageFrame = (props) => {
     ...restProps
   } = props;
   const railOptions = railWidth === void 0 ? {} : { railWidth };
-  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+  const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
     /* @__PURE__ */ jsx16(FrameSections, { children }),
     /* @__PURE__ */ jsx16(
       "div",
@@ -808,7 +843,7 @@ import { cn as cn19 } from "@gridui/style-utils";
 import { cva as cva11 } from "class-variance-authority";
 var rowStyles = cva11(cn19(
   "gridui-row",
-  "min-w-0"
+  "gridui-u-min-w-0"
 ));
 
 // src/row/row.tsx
@@ -874,7 +909,7 @@ import { cn as cn22 } from "@gridui/style-utils";
 import { cva as cva12 } from "class-variance-authority";
 var stackStyles = cva12(cn22(
   "gridui-stack",
-  "flex min-w-0 flex-col"
+  "gridui-u-flex gridui-u-min-w-0 gridui-u-flex-col"
 ));
 
 // src/stack/stack.tsx