@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/layout/Flex/Flex.d.ts

@@ -0,0 +1,96 @@
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+import { Breakpoint, Responsive, Space } from '../../../types/common';
+/** Value of `flex-direction`. */
+export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+/** Value of `flex-wrap`. */
+export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+/** Cross-axis alignment of items (`align-items`). `start`/`end` map to `flex-start`/`flex-end`. */
+export type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+/** Main-axis distribution (`justify-content`). `between`/`around`/`evenly` map to `space-*`. */
+export type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+/** Distribution of wrapped lines (`align-content`). Only has an effect when items wrap. */
+export type FlexAlignContent = "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch";
+/** Per-item cross-axis alignment (`align-self`). */
+export type FlexAlignSelf = "auto" | "start" | "center" | "end" | "stretch" | "baseline";
+/** Breakpoint names; the shared `Breakpoint` type from types/common. */
+export type FlexBreakpoint = Breakpoint;
+/** A fixed value or one value per breakpoint; the shared `Responsive` type from types/common. */
+export type FlexResponsive<T> = Responsive<T>;
+interface FlexOwnProps<E extends ElementType> {
+    /** Element or component to render as. Native props follow the chosen element. Defaults to `div`. */
+    as?: E;
+    /**
+     * Main axis (`flex-direction`). Pass an object to change it at breakpoints,
+     * e.g. `{ base: "column", md: "row" }`. Defaults to the browser default, `row`.
+     */
+    direction?: FlexResponsive<FlexDirection>;
+    /**
+     * Whether items wrap onto new lines (`flex-wrap`). Responsive. Defaults to `nowrap`:
+     * use `wrap` (or a responsive `direction`) for rows that must reflow at
+     * 320px (SC 1.4.10).
+     */
+    wrap?: FlexResponsive<FlexWrap>;
+    /** Cross-axis alignment of items (`align-items`). Responsive. Defaults to `stretch`. */
+    align?: FlexResponsive<FlexAlign>;
+    /** Main-axis distribution of items (`justify-content`). Responsive. Defaults to `start`. */
+    justify?: FlexResponsive<FlexJustify>;
+    /** Distribution of wrapped lines (`align-content`). Responsive. Only matters with `wrap`. */
+    alignContent?: FlexResponsive<FlexAlignContent>;
+    /** Gap between items on both axes, as a `--space-*` step. Responsive. */
+    gap?: FlexResponsive<Space>;
+    /** Gap between rows (lines), as a `--space-*` step. Overrides `gap` on that axis. Responsive. */
+    rowGap?: FlexResponsive<Space>;
+    /** Gap between columns (items in a row), as a `--space-*` step. Overrides `gap` on that axis. Responsive. */
+    columnGap?: FlexResponsive<Space>;
+    /** Render as `inline-flex` instead of `flex`. */
+    inline?: boolean;
+    /** Stretch to the full width of the container. */
+    fullWidth?: boolean;
+    /** Flex items. */
+    children?: ReactNode;
+}
+/** Props for `Flex`, including the native props of the element chosen with `as`. */
+export type FlexProps<E extends ElementType = "div"> = FlexOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof FlexOwnProps<E>>;
+/**
+ * Full flexbox container: direction (fixed or responsive), wrapping,
+ * alignment on both axes, line distribution, and token-based gaps.
+ *
+ * Use `Stack` for the common case of evenly spaced children in one
+ * direction. Reach for `Flex` when you need real flexbox control:
+ * `justify="between"` toolbars, wrapping chip rows, reversing order,
+ * direction that flips at a breakpoint, or per-child sizing via `Flex.Item`.
+ *
+ * Purely presentational: it adds no role or keyboard behavior. Pick a
+ * semantic element with `as` (`ul`, `nav`, `header`, ...) when the group has
+ * meaning. Reverse directions change only the visual order, not the reading
+ * or tab order, so keep DOM order meaningful (WCAG 1.3.2, 2.4.3).
+ */
+export declare function Flex<E extends ElementType = "div">({ as, direction, wrap, align, justify, alignContent, gap, rowGap, columnGap, inline, fullWidth, className, style, ...rest }: FlexProps<E>): import("react").JSX.Element;
+export declare namespace Flex {
+    var Item: typeof FlexItem;
+}
+interface FlexItemOwnProps<E extends ElementType> {
+    /** Element or component to render as. Native props follow the chosen element. Defaults to `div`. */
+    as?: E;
+    /** Share of free space to take (`flex-grow`). `true` means `1`. */
+    grow?: boolean | number;
+    /** Share of overflow to give up (`flex-shrink`). `false` means `0` (never shrink). */
+    shrink?: boolean | number;
+    /** Starting size before growing or shrinking (`flex-basis`), e.g. `"240px"`, `"30%"`, `"auto"`. Numbers are pixels. */
+    basis?: string | number;
+    /** Visual order (`order`). Changes only the visual order, not reading or tab order. */
+    order?: number;
+    /** Cross-axis alignment for this item only (`align-self`), overriding the container's `align`. */
+    alignSelf?: FlexAlignSelf;
+    /** Item content. */
+    children?: ReactNode;
+}
+/** Props for `Flex.Item`, including the native props of the element chosen with `as`. */
+export type FlexItemProps<E extends ElementType = "div"> = FlexItemOwnProps<E> & Omit<ComponentPropsWithRef<E>, keyof FlexItemOwnProps<E>>;
+/**
+ * A child of `Flex` with its own sizing (`grow`, `shrink`, `basis`),
+ * `order`, and `alignSelf`. Only the properties you pass are applied, so an
+ * item with no props behaves like a plain child. Also available as `Flex.Item`.
+ */
+export declare function FlexItem<E extends ElementType = "div">({ as, grow, shrink, basis, order, alignSelf, className, style, ...rest }: FlexItemProps<E>): import("react").JSX.Element;
+export {};

package/dist/components/layout/Flex/Flex.mjs

@@ -0,0 +1,60 @@
+import { cascadedVars as e, firstCascaded as t, mapCascaded as n, responsiveClasses as r, responsiveVars as i } from "../../../utils/responsive.mjs";
+import { cx as a } from "../../../utils/cx.mjs";
+import o from "./Flex.module.css.mjs";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/layout/Flex/Flex.tsx
+var c = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch",
+	baseline: "baseline"
+}, l = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+}, u = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly",
+	stretch: "stretch"
+}, d = {
+	auto: o.selfAuto,
+	start: o.selfStart,
+	center: o.selfCenter,
+	end: o.selfEnd,
+	stretch: o.selfStretch,
+	baseline: o.selfBaseline
+}, f = r(o, "dir"), p = r(o, "wrap"), m = r(o, "align"), h = r(o, "justify"), g = r(o, "content"), _ = r(o, "rowGap"), v = r(o, "columnGap"), y = (e) => `var(--space-${e})`;
+function b({ as: r, direction: d, wrap: b, align: x, justify: S, alignContent: C, gap: w, rowGap: T, columnGap: E, inline: D = !1, fullWidth: O = !1, className: k, style: A, ...j }) {
+	let M = r ?? "div", N = {}, P = [];
+	return i("flex-dir", d, String, f, N, P), i("flex-wrap", b, String, p, N, P), i("flex-align", x, (e) => c[e], m, N, P), i("flex-justify", S, (e) => l[e], h, N, P), i("flex-content", C, (e) => u[e], g, N, P), e("flex-row-gap", n(t(T, w), y), _, N, P), e("flex-column-gap", n(t(E, w), y), v, N, P), /* @__PURE__ */ s(M, {
+		className: a(o.root, D && o.inline, O && o.fullWidth, ...P, k),
+		style: {
+			...N,
+			...A
+		},
+		...j
+	});
+}
+var x = (e) => String(typeof e == "boolean" ? +!!e : e);
+function S({ as: e, grow: t, shrink: n, basis: r, order: i, alignSelf: c, className: l, style: u, ...f }) {
+	let p = e ?? "div", m = {};
+	return t !== void 0 && (m["--flex-item-grow"] = x(t)), n !== void 0 && (m["--flex-item-shrink"] = x(n)), r !== void 0 && (m["--flex-item-basis"] = typeof r == "number" ? `${r}px` : r), i !== void 0 && (m["--flex-item-order"] = String(i)), /* @__PURE__ */ s(p, {
+		className: a(t !== void 0 && o.itemGrow, n !== void 0 && o.itemShrink, r !== void 0 && o.itemBasis, i !== void 0 && o.itemOrder, c && d[c], l) || void 0,
+		style: {
+			...m,
+			...u
+		},
+		...f
+	});
+}
+b.Item = S;
+//#endregion
+export { b as Flex, S as FlexItem };

package/dist/components/layout/Flex/Flex.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_3o466_15`,t=`_inline_3o466_23`,n=`_fullWidth_3o466_31`,r=`_dirBase_3o466_43`,i=`_wrapBase_3o466_49`,a=`_alignBase_3o466_55`,o=`_justifyBase_3o466_61`,s=`_contentBase_3o466_67`,c=`_rowGapBase_3o466_73`,l=`_columnGapBase_3o466_79`,u=`_dirSm_3o466_89`,d=`_wrapSm_3o466_95`,f=`_alignSm_3o466_101`,p=`_justifySm_3o466_107`,m=`_contentSm_3o466_113`,h=`_rowGapSm_3o466_119`,g=`_columnGapSm_3o466_125`,_=`_dirMd_3o466_137`,v=`_wrapMd_3o466_143`,y=`_alignMd_3o466_149`,b=`_justifyMd_3o466_155`,x=`_contentMd_3o466_161`,S=`_rowGapMd_3o466_167`,C=`_columnGapMd_3o466_173`,w=`_dirLg_3o466_185`,T=`_wrapLg_3o466_191`,E=`_alignLg_3o466_197`,D=`_justifyLg_3o466_203`,O=`_contentLg_3o466_209`,k=`_rowGapLg_3o466_215`,A=`_columnGapLg_3o466_221`,j=`_dirXl_3o466_233`,M=`_wrapXl_3o466_239`,N=`_alignXl_3o466_245`,P=`_justifyXl_3o466_251`,F=`_contentXl_3o466_257`,I=`_rowGapXl_3o466_263`,L=`_columnGapXl_3o466_269`,R=`_dir2xl_3o466_281`,z=`_wrap2xl_3o466_287`,B=`_align2xl_3o466_293`,V=`_justify2xl_3o466_299`,H=`_content2xl_3o466_305`,U=`_rowGap2xl_3o466_311`,W=`_columnGap2xl_3o466_317`,G=`_itemGrow_3o466_335`,K=`_itemShrink_3o466_341`,q=`_itemBasis_3o466_347`,J=`_itemOrder_3o466_357`,Y=`_selfAuto_3o466_365`,X=`_selfStart_3o466_371`,Z=`_selfCenter_3o466_377`,Q=`_selfEnd_3o466_383`,$=`_selfStretch_3o466_389`,ee=`_selfBaseline_3o466_395`,te={root:e,inline:t,fullWidth:n,dirBase:r,wrapBase:i,alignBase:a,justifyBase:o,contentBase:s,rowGapBase:c,columnGapBase:l,dirSm:u,wrapSm:d,alignSm:f,justifySm:p,contentSm:m,rowGapSm:h,columnGapSm:g,dirMd:_,wrapMd:v,alignMd:y,justifyMd:b,contentMd:x,rowGapMd:S,columnGapMd:C,dirLg:w,wrapLg:T,alignLg:E,justifyLg:D,contentLg:O,rowGapLg:k,columnGapLg:A,dirXl:j,wrapXl:M,alignXl:N,justifyXl:P,contentXl:F,rowGapXl:I,columnGapXl:L,dir2xl:R,wrap2xl:z,align2xl:B,justify2xl:V,content2xl:H,rowGap2xl:U,columnGap2xl:W,itemGrow:G,itemShrink:K,itemBasis:q,itemOrder:J,selfAuto:Y,selfStart:X,selfCenter:Z,selfEnd:Q,selfStretch:$,selfBaseline:ee};exports.align2xl=B,exports.alignBase=a,exports.alignLg=E,exports.alignMd=y,exports.alignSm=f,exports.alignXl=N,exports.columnGap2xl=W,exports.columnGapBase=l,exports.columnGapLg=A,exports.columnGapMd=C,exports.columnGapSm=g,exports.columnGapXl=L,exports.content2xl=H,exports.contentBase=s,exports.contentLg=O,exports.contentMd=x,exports.contentSm=m,exports.contentXl=F,exports.default=te,exports.dir2xl=R,exports.dirBase=r,exports.dirLg=w,exports.dirMd=_,exports.dirSm=u,exports.dirXl=j,exports.fullWidth=n,exports.inline=t,exports.itemBasis=q,exports.itemGrow=G,exports.itemOrder=J,exports.itemShrink=K,exports.justify2xl=V,exports.justifyBase=o,exports.justifyLg=D,exports.justifyMd=b,exports.justifySm=p,exports.justifyXl=P,exports.root=e,exports.rowGap2xl=U,exports.rowGapBase=c,exports.rowGapLg=k,exports.rowGapMd=S,exports.rowGapSm=h,exports.rowGapXl=I,exports.selfAuto=Y,exports.selfBaseline=ee,exports.selfCenter=Z,exports.selfEnd=Q,exports.selfStart=X,exports.selfStretch=$,exports.wrap2xl=z,exports.wrapBase=i,exports.wrapLg=T,exports.wrapMd=v,exports.wrapSm=d,exports.wrapXl=M;

package/dist/components/layout/Flex/Flex.module.css.mjs

@@ -0,0 +1,60 @@
+//#region src/components/layout/Flex/Flex.module.css
+var e = "_root_3o466_15", t = "_inline_3o466_23", n = "_fullWidth_3o466_31", r = "_dirBase_3o466_43", i = "_wrapBase_3o466_49", a = "_alignBase_3o466_55", o = "_justifyBase_3o466_61", s = "_contentBase_3o466_67", c = "_rowGapBase_3o466_73", l = "_columnGapBase_3o466_79", u = "_dirSm_3o466_89", d = "_wrapSm_3o466_95", f = "_alignSm_3o466_101", p = "_justifySm_3o466_107", m = "_contentSm_3o466_113", h = "_rowGapSm_3o466_119", g = "_columnGapSm_3o466_125", _ = "_dirMd_3o466_137", v = "_wrapMd_3o466_143", y = "_alignMd_3o466_149", b = "_justifyMd_3o466_155", x = "_contentMd_3o466_161", S = "_rowGapMd_3o466_167", C = "_columnGapMd_3o466_173", w = "_dirLg_3o466_185", T = "_wrapLg_3o466_191", E = "_alignLg_3o466_197", D = "_justifyLg_3o466_203", O = "_contentLg_3o466_209", k = "_rowGapLg_3o466_215", A = "_columnGapLg_3o466_221", j = "_dirXl_3o466_233", M = "_wrapXl_3o466_239", N = "_alignXl_3o466_245", P = "_justifyXl_3o466_251", F = "_contentXl_3o466_257", I = "_rowGapXl_3o466_263", L = "_columnGapXl_3o466_269", R = "_dir2xl_3o466_281", z = "_wrap2xl_3o466_287", B = "_align2xl_3o466_293", V = "_justify2xl_3o466_299", H = "_content2xl_3o466_305", U = "_rowGap2xl_3o466_311", W = "_columnGap2xl_3o466_317", G = "_itemGrow_3o466_335", K = "_itemShrink_3o466_341", q = "_itemBasis_3o466_347", J = "_itemOrder_3o466_357", Y = "_selfAuto_3o466_365", X = "_selfStart_3o466_371", Z = "_selfCenter_3o466_377", Q = "_selfEnd_3o466_383", $ = "_selfStretch_3o466_389", ee = "_selfBaseline_3o466_395", te = {
+	root: e,
+	inline: t,
+	fullWidth: n,
+	dirBase: r,
+	wrapBase: i,
+	alignBase: a,
+	justifyBase: o,
+	contentBase: s,
+	rowGapBase: c,
+	columnGapBase: l,
+	dirSm: u,
+	wrapSm: d,
+	alignSm: f,
+	justifySm: p,
+	contentSm: m,
+	rowGapSm: h,
+	columnGapSm: g,
+	dirMd: _,
+	wrapMd: v,
+	alignMd: y,
+	justifyMd: b,
+	contentMd: x,
+	rowGapMd: S,
+	columnGapMd: C,
+	dirLg: w,
+	wrapLg: T,
+	alignLg: E,
+	justifyLg: D,
+	contentLg: O,
+	rowGapLg: k,
+	columnGapLg: A,
+	dirXl: j,
+	wrapXl: M,
+	alignXl: N,
+	justifyXl: P,
+	contentXl: F,
+	rowGapXl: I,
+	columnGapXl: L,
+	dir2xl: R,
+	wrap2xl: z,
+	align2xl: B,
+	justify2xl: V,
+	content2xl: H,
+	rowGap2xl: U,
+	columnGap2xl: W,
+	itemGrow: G,
+	itemShrink: K,
+	itemBasis: q,
+	itemOrder: J,
+	selfAuto: Y,
+	selfStart: X,
+	selfCenter: Z,
+	selfEnd: Q,
+	selfStretch: $,
+	selfBaseline: ee
+};
+//#endregion
+export { B as align2xl, a as alignBase, E as alignLg, y as alignMd, f as alignSm, N as alignXl, W as columnGap2xl, l as columnGapBase, A as columnGapLg, C as columnGapMd, g as columnGapSm, L as columnGapXl, H as content2xl, s as contentBase, O as contentLg, x as contentMd, m as contentSm, F as contentXl, te as default, R as dir2xl, r as dirBase, w as dirLg, _ as dirMd, u as dirSm, j as dirXl, n as fullWidth, t as inline, q as itemBasis, G as itemGrow, J as itemOrder, K as itemShrink, V as justify2xl, o as justifyBase, D as justifyLg, b as justifyMd, p as justifySm, P as justifyXl, e as root, U as rowGap2xl, c as rowGapBase, k as rowGapLg, S as rowGapMd, h as rowGapSm, I as rowGapXl, Y as selfAuto, ee as selfBaseline, Z as selfCenter, Q as selfEnd, X as selfStart, $ as selfStretch, z as wrap2xl, i as wrapBase, T as wrapLg, v as wrapMd, d as wrapSm, M as wrapXl };

package/dist/components/layout/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from './Flex';

package/dist/components/layout/Grid/Grid.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/responsive.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./Grid.module.css.cjs.js");let r=require("react/jsx-runtime");var i=e.RESPONSIVE_KEYS;function a(t,n,r){for(let i of e.changedKeys(r))t[`--${n}-${i}`]=r[i]}var o=e=>`var(--space-${e})`,s=e=>typeof e==`number`?`repeat(${e}, minmax(0, 1fr))`:e,c={start:n.default.alignStart,center:n.default.alignCenter,end:n.default.alignEnd,stretch:n.default.alignStretch,baseline:n.default.alignBaseline},l={start:n.default.justifyStart,center:n.default.justifyCenter,end:n.default.justifyEnd,stretch:n.default.justifyStretch},u={row:n.default.flowRow,column:n.default.flowColumn,dense:n.default.flowDense,"row dense":n.default.flowRowDense,"column dense":n.default.flowColumnDense};function d(t,n){let r=e.cascade(t),a=e.cascade(n),s={};for(let e of i){let t=r[e]??a[e];s[e]=t===void 0?void 0:o(t)}return s}function f({as:i,columns:o,minItemWidth:f,rows:p,autoRows:m,gap:h,rowGap:g,columnGap:_,align:v,justify:y,flow:b,inline:x=!1,className:S,style:C,...w}){let T=i??`div`,E={};return f===void 0?a(E,`grid-cols`,e.mapCascaded(e.cascade(o),s)):E[`--grid-cols-base`]=`repeat(auto-fill, minmax(min(${f}, 100%), 1fr))`,a(E,`grid-rows`,e.mapCascaded(e.cascade(p),s)),a(E,`grid-rgap`,d(g,h)),a(E,`grid-cgap`,d(_,h)),m!==void 0&&(E[`--grid-auto-rows`]=m),(0,r.jsx)(T,{className:t.cx(n.default.grid,x&&n.default.inline,v&&c[v],y&&l[y],b&&u[b],S),style:{...E,...C},...w})}var p=e=>String(e);function m(t,n,r){let a=e.cascade(t),o=t!==void 0||n!==void 0||r!==void 0,s={},c={};for(let e of i){let t=a[e];o?t===`full`?(s[e]=`1`,c[e]=`-1`):t===void 0?(s[e]=n===void 0?`auto`:p(n),c[e]=r===void 0?`auto`:p(r)):n===void 0&&r!==void 0?(s[e]=`span ${t}`,c[e]=p(r)):(s[e]=n===void 0?`auto`:p(n),c[e]=`span ${t}`):s[e]=c[e]=void 0}return{start:s,end:c}}function h({as:e,colSpan:i,rowSpan:o,colStart:s,colEnd:c,rowStart:l,rowEnd:u,className:d,style:f,...p}){let h=e??`div`,g={},_=m(i,s,c);a(g,`gi-cs`,_.start),a(g,`gi-ce`,_.end);let v=m(o,l,u);return a(g,`gi-rs`,v.start),a(g,`gi-re`,v.end),(0,r.jsx)(h,{className:t.cx(n.default.item,d),style:{...g,...f},...p})}f.Item=h,exports.Grid=f,exports.GridItem=h;

package/dist/components/layout/Grid/Grid.d.ts

@@ -0,0 +1,127 @@
+import { ComponentPropsWithRef, CSSProperties, ElementType, ReactNode } from 'react';
+import { Space, Breakpoint, Responsive } from '../../../types/common';
+/** Breakpoint keys. `base` applies at every width; the rest are min-width
+ *  queries: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px (see tokens.css). */
+export type GridBreakpoint = "base" | Breakpoint;
+/** A single value, or one value per breakpoint (mobile first): the shared
+ *  `Responsive` type. Each breakpoint inherits the nearest smaller one set. */
+export type GridResponsive<T> = Responsive<T>;
+/** Polymorphic helper: own props win over the native props of `E`. */
+type PolymorphicProps<E extends ElementType, Own> = Own & {
+    /** Element or component to render as. Native props are typed for it. */
+    as?: E;
+} & Omit<ComponentPropsWithRef<E>, keyof Own | "as">;
+export type GridAlign = "start" | "center" | "end" | "stretch" | "baseline";
+export type GridJustify = "start" | "center" | "end" | "stretch";
+export type GridFlow = "row" | "column" | "dense" | "row dense" | "column dense";
+export interface GridOwnProps {
+    /**
+     * Column tracks. A number makes that many equal columns
+     * (`repeat(n, minmax(0, 1fr))`); a string is used as a raw
+     * `grid-template-columns` value (e.g. `"16rem 1fr"`). Accepts a
+     * responsive object: `{ base: 1, md: 2, lg: 4 }`.
+     * Ignored when `minItemWidth` is set. A fixed number never collapses, so
+     * for content that must reflow at 320px (SC 1.4.10) start at `base: 1`
+     * or use `minItemWidth`.
+     */
+    columns?: Responsive<number | string>;
+    /**
+     * Builds a responsive grid without media queries: as many columns as fit,
+     * each at least this wide (any CSS length, e.g. `"14rem"`). Never wider
+     * than the container, so it reflows to one column on narrow screens
+     * (WCAG 1.4.10). Takes precedence over `columns`.
+     */
+    minItemWidth?: string;
+    /**
+     * Row tracks. A number makes that many equal rows; a string is a raw
+     * `grid-template-rows` value. Responsive.
+     */
+    rows?: Responsive<number | string>;
+    /** Size of implicitly created rows (`grid-auto-rows`), e.g. `"8rem"` or `"minmax(8rem, auto)"`. */
+    autoRows?: string;
+    /** Space between rows and columns. Maps to `--space-*`. Responsive. */
+    gap?: Responsive<Space>;
+    /** Space between rows. Overrides `gap` for rows. Responsive. */
+    rowGap?: Responsive<Space>;
+    /** Space between columns. Overrides `gap` for columns. Responsive. */
+    columnGap?: Responsive<Space>;
+    /** Block-axis alignment of items within their cells (`align-items`). */
+    align?: GridAlign;
+    /** Inline-axis alignment of items within their cells (`justify-items`). */
+    justify?: GridJustify;
+    /**
+     * Auto-placement direction (`grid-auto-flow`).
+     *
+     * **Accessibility:** `dense` back-fills holes, so items can appear
+     * visually out of source order. Screen readers and keyboard focus follow
+     * the DOM order, so only use dense packing when order carries no meaning
+     * (WCAG 1.3.2 Meaningful Sequence, 2.4.3 Focus Order).
+     */
+    flow?: GridFlow;
+    /** Render as `inline-grid` instead of `grid`. */
+    inline?: boolean;
+    /** Additional class names, merged with the component's own. */
+    className?: string;
+    /** Inline styles, merged after the grid's custom properties. */
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export type GridProps<E extends ElementType = "div"> = PolymorphicProps<E, GridOwnProps>;
+/**
+ * A CSS grid container.
+ *
+ * Use `columns` for a fixed or breakpoint-driven column count, or
+ * `minItemWidth` for an intrinsic grid that fits as many columns as the
+ * container allows. Place children with `Grid.Item`.
+ *
+ * **Accessibility:** Grid is purely presentational and adds no role. The
+ * reading and focus order is always the DOM order, so keep the source order
+ * meaningful. Visual reordering with `flow="dense"` or explicit placement on
+ * `Grid.Item` must not make the visual order contradict the reading or
+ * focus order (WCAG 1.3.2, 2.4.3). When rendering a list (`as="ul"`) and
+ * removing bullets, add `role="list"` so Safari/VoiceOver keeps list
+ * semantics.
+ */
+export declare function Grid<E extends ElementType = "div">({ as, columns, minItemWidth, rows, autoRows, gap, rowGap, columnGap, align, justify, flow, inline, className, style, ...rest }: GridProps<E>): import("react").JSX.Element;
+export declare namespace Grid {
+    var Item: typeof GridItem;
+}
+/** Grid line number (negative counts from the end) or a raw CSS value like `"span 2"` or `"auto"`. */
+export type GridLine = number | string;
+export interface GridItemOwnProps {
+    /**
+     * Number of columns to span, or `"full"` to stretch across every column
+     * (`1 / -1`). Responsive: `{ base: "full", md: 2 }`.
+     */
+    colSpan?: Responsive<number | "full">;
+    /** Number of rows to span. Responsive. */
+    rowSpan?: Responsive<number>;
+    /**
+     * Column line to start at. See the accessibility note on `Grid.Item`
+     * about explicit placement.
+     */
+    colStart?: GridLine;
+    /** Column line to end at. */
+    colEnd?: GridLine;
+    /** Row line to start at. */
+    rowStart?: GridLine;
+    /** Row line to end at. */
+    rowEnd?: GridLine;
+    /** Additional class names, merged with the component's own. */
+    className?: string;
+    /** Inline styles, merged after the item's custom properties. */
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export type GridItemProps<E extends ElementType = "div"> = PolymorphicProps<E, GridItemOwnProps>;
+/**
+ * A child of `Grid` with span and placement controls. Any element can be a
+ * grid child; use `Grid.Item` only when you need spans or placement.
+ *
+ * **Accessibility:** explicit placement (`colStart`, `rowStart`, ...) moves
+ * items visually without changing the DOM order that screen readers and the
+ * Tab key follow. Keep the visual order consistent with the source order
+ * (WCAG 1.3.2 Meaningful Sequence, 2.4.3 Focus Order).
+ */
+export declare function GridItem<E extends ElementType = "div">({ as, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, className, style, ...rest }: GridItemProps<E>): import("react").JSX.Element;
+export {};

package/dist/components/layout/Grid/Grid.mjs

@@ -0,0 +1,74 @@
+import { RESPONSIVE_KEYS as e, cascade as t, changedKeys as n, mapCascaded as r } from "../../../utils/responsive.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import a from "./Grid.module.css.mjs";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/layout/Grid/Grid.tsx
+var s = e;
+function c(e, t, r) {
+	for (let i of n(r)) e[`--${t}-${i}`] = r[i];
+}
+var l = (e) => `var(--space-${e})`, u = (e) => typeof e == "number" ? `repeat(${e}, minmax(0, 1fr))` : e, d = {
+	start: a.alignStart,
+	center: a.alignCenter,
+	end: a.alignEnd,
+	stretch: a.alignStretch,
+	baseline: a.alignBaseline
+}, f = {
+	start: a.justifyStart,
+	center: a.justifyCenter,
+	end: a.justifyEnd,
+	stretch: a.justifyStretch
+}, p = {
+	row: a.flowRow,
+	column: a.flowColumn,
+	dense: a.flowDense,
+	"row dense": a.flowRowDense,
+	"column dense": a.flowColumnDense
+};
+function m(e, n) {
+	let r = t(e), i = t(n), a = {};
+	for (let e of s) {
+		let t = r[e] ?? i[e];
+		a[e] = t === void 0 ? void 0 : l(t);
+	}
+	return a;
+}
+function h({ as: e, columns: n, minItemWidth: s, rows: l, autoRows: h, gap: g, rowGap: _, columnGap: v, align: y, justify: b, flow: x, inline: S = !1, className: C, style: w, ...T }) {
+	let E = e ?? "div", D = {};
+	return s === void 0 ? c(D, "grid-cols", r(t(n), u)) : D["--grid-cols-base"] = `repeat(auto-fill, minmax(min(${s}, 100%), 1fr))`, c(D, "grid-rows", r(t(l), u)), c(D, "grid-rgap", m(_, g)), c(D, "grid-cgap", m(v, g)), h !== void 0 && (D["--grid-auto-rows"] = h), /* @__PURE__ */ o(E, {
+		className: i(a.grid, S && a.inline, y && d[y], b && f[b], x && p[x], C),
+		style: {
+			...D,
+			...w
+		},
+		...T
+	});
+}
+var g = (e) => String(e);
+function _(e, n, r) {
+	let i = t(e), a = e !== void 0 || n !== void 0 || r !== void 0, o = {}, c = {};
+	for (let e of s) {
+		let t = i[e];
+		a ? t === "full" ? (o[e] = "1", c[e] = "-1") : t === void 0 ? (o[e] = n === void 0 ? "auto" : g(n), c[e] = r === void 0 ? "auto" : g(r)) : n === void 0 && r !== void 0 ? (o[e] = `span ${t}`, c[e] = g(r)) : (o[e] = n === void 0 ? "auto" : g(n), c[e] = `span ${t}`) : o[e] = c[e] = void 0;
+	}
+	return {
+		start: o,
+		end: c
+	};
+}
+function v({ as: e, colSpan: t, rowSpan: n, colStart: r, colEnd: s, rowStart: l, rowEnd: u, className: d, style: f, ...p }) {
+	let m = e ?? "div", h = {}, g = _(t, r, s);
+	c(h, "gi-cs", g.start), c(h, "gi-ce", g.end);
+	let v = _(n, l, u);
+	return c(h, "gi-rs", v.start), c(h, "gi-re", v.end), /* @__PURE__ */ o(m, {
+		className: i(a.item, d),
+		style: {
+			...h,
+			...f
+		},
+		...p
+	});
+}
+h.Item = v;
+//#endregion
+export { h as Grid, v as GridItem };

package/dist/components/layout/Grid/Grid.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_grid_17fyi_17`,t=`_inline_17fyi_93`,n=`_alignStart_17fyi_193`,r=`_alignCenter_17fyi_195`,i=`_alignEnd_17fyi_197`,a=`_alignStretch_17fyi_199`,o=`_alignBaseline_17fyi_201`,s=`_justifyStart_17fyi_207`,c=`_justifyCenter_17fyi_209`,l=`_justifyEnd_17fyi_211`,u=`_justifyStretch_17fyi_213`,d=`_flowRow_17fyi_219`,f=`_flowColumn_17fyi_221`,p=`_flowDense_17fyi_223`,m=`_flowRowDense_17fyi_225`,h=`_flowColumnDense_17fyi_227`,g=`_item_17fyi_17`,_={grid:e,inline:t,alignStart:n,alignCenter:r,alignEnd:i,alignStretch:a,alignBaseline:o,justifyStart:s,justifyCenter:c,justifyEnd:l,justifyStretch:u,flowRow:d,flowColumn:f,flowDense:p,flowRowDense:m,flowColumnDense:h,item:g};exports.alignBaseline=o,exports.alignCenter=r,exports.alignEnd=i,exports.alignStart=n,exports.alignStretch=a,exports.default=_,exports.flowColumn=f,exports.flowColumnDense=h,exports.flowDense=p,exports.flowRow=d,exports.flowRowDense=m,exports.grid=e,exports.inline=t,exports.item=g,exports.justifyCenter=c,exports.justifyEnd=l,exports.justifyStart=s,exports.justifyStretch=u;

package/dist/components/layout/Grid/Grid.module.css.mjs

@@ -0,0 +1,22 @@
+//#region src/components/layout/Grid/Grid.module.css
+var e = "_grid_17fyi_17", t = "_inline_17fyi_93", n = "_alignStart_17fyi_193", r = "_alignCenter_17fyi_195", i = "_alignEnd_17fyi_197", a = "_alignStretch_17fyi_199", o = "_alignBaseline_17fyi_201", s = "_justifyStart_17fyi_207", c = "_justifyCenter_17fyi_209", l = "_justifyEnd_17fyi_211", u = "_justifyStretch_17fyi_213", d = "_flowRow_17fyi_219", f = "_flowColumn_17fyi_221", p = "_flowDense_17fyi_223", m = "_flowRowDense_17fyi_225", h = "_flowColumnDense_17fyi_227", g = "_item_17fyi_17", _ = {
+	grid: e,
+	inline: t,
+	alignStart: n,
+	alignCenter: r,
+	alignEnd: i,
+	alignStretch: a,
+	alignBaseline: o,
+	justifyStart: s,
+	justifyCenter: c,
+	justifyEnd: l,
+	justifyStretch: u,
+	flowRow: d,
+	flowColumn: f,
+	flowDense: p,
+	flowRowDense: m,
+	flowColumnDense: h,
+	item: g
+};
+//#endregion
+export { o as alignBaseline, r as alignCenter, i as alignEnd, n as alignStart, a as alignStretch, _ as default, f as flowColumn, h as flowColumnDense, p as flowDense, d as flowRow, m as flowRowDense, e as grid, t as inline, g as item, c as justifyCenter, l as justifyEnd, s as justifyStart, u as justifyStretch };

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from './Grid';

package/dist/components/layout/ResizablePanels/ResizablePanels.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../hooks/useMergedRef.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("./ResizablePanels.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.createContext)(null),c=(0,a.createContext)(0);function l(e){let t=(0,a.useContext)(s);if(!t)throw Error(`${e} must be a direct child of <ResizablePanels>.`);return t}var u=e=>Math.round(e*100)/100,d=(e,t,n)=>Math.min(n,Math.max(t,e));function f(e){let t=e.reduce((e,t)=>e+(t??0),0),n=e.filter(e=>e===void 0).length,r=n>0?Math.max(0,100-t)/n:0,i=e.map(e=>e??r),a=i.reduce((e,t)=>e+t,0)||1;return i.map(e=>u(e/a*100))}var p=({orientation:t=`horizontal`,layout:l,defaultLayout:p,onLayoutChange:h,keyboardStep:g=5,className:_,children:v,ref:y,...b})=>{let x=(0,a.useRef)(null),S=n.useMergedRef(x,y),C=(0,a.useId)(),[w,T]=(0,a.useState)(!1),E=a.Children.toArray(v).filter(e=>(0,a.isValidElement)(e)&&e.type===m),D=E.map((e,t)=>({min:e.props.minSize??10,max:e.props.maxSize??100,collapsible:e.props.collapsible??!1,collapsed:e.props.collapsedSize??0,label:e.props.label,id:e.props.id??`${C}-panel-${t}`})),[O,k]=e.useControllableState({value:l,defaultValue:p??f(E.map(e=>e.props.defaultSize)),onChange:h}),A=(0,a.useRef)(new Map),j=(e,t,{snap:n=!0}={})=>{let r=e,i=e+1,a=D[r],o=D[i];if(!a||!o)return;let s=O[r]+O[i],c=(e,t)=>t.collapsible&&e<t.min?n&&e<(t.min+t.collapsed)/2?t.collapsed:t.min:d(e,t.min,t.max),l=c(t,a),f=c(s-l,o);if(l=s-f,(l>a.max||l<a.min&&!(a.collapsible&&l===a.collapsed))&&(l=d(l,a.min,a.max),f=s-l),u(l)===u(O[r])&&u(f)===u(O[i]))return;a.collapsible&&l<=a.collapsed&&O[r]>a.collapsed&&A.current.set(r,O[r]);let p=O.slice();p[r]=u(l),p[i]=u(f),k(p)},M=e=>{let t=D[e];if(!t?.collapsible)return;let n=O[e];if(n<=t.collapsed){let n=A.current.get(e)??Math.max(t.min,100/D.length);j(e,n,{snap:!1})}else{A.current.set(e,n);let r=O[e]+O[e+1],i=O.slice();i[e]=t.collapsed,i[e+1]=u(r-t.collapsed),k(i)}},N=-1,P=a.Children.map(v,e=>((0,a.isValidElement)(e)&&e.type===m&&(N+=1),(0,o.jsx)(c.Provider,{value:Math.max(0,N),children:e})));return(0,o.jsx)(s.Provider,{value:{orientation:t,layout:O,panels:D,resize:j,toggleCollapse:M,keyboardStep:g,groupRef:x,setResizing:T},children:(0,o.jsx)(`div`,{...b,ref:S,className:r.cx(i.default.group,_),"data-orientation":t,"data-resizing":w?``:void 0,children:P})})},m=({defaultSize:e,minSize:t,maxSize:n,collapsible:s,collapsedSize:u,label:d,className:f,style:p,children:m,...h})=>{let g=l(`ResizablePanels.Panel`),_=(0,a.useContext)(c),v=g.panels[_],y=g.layout[_]??0,b=!!v?.collapsible&&y<=v.collapsed,x=b&&y===0;return(0,o.jsx)(`div`,{role:`group`,...h,id:v?.id,"aria-label":h[`aria-label`]??d,className:r.cx(i.default.panel,f),style:{...p,flex:`${y} 1 0px`},"data-collapsed":b?``:void 0,inert:x||void 0,"aria-hidden":x||void 0,children:m})},h=({className:e,onKeyDown:n,onPointerDown:s,onPointerMove:u,onPointerUp:d,onPointerCancel:f,onDoubleClick:p,"aria-label":m,...h})=>{let g=l(`ResizablePanels.Handle`),_=t.useMessages().resizablePanels,v=(0,a.useContext)(c),y=g.panels[v],b=g.layout[v]??0,x=g.orientation===`horizontal`,S=(0,a.useRef)(null),C=e=>{if(s?.(e),e.defaultPrevented||e.button!==0||!g.groupRef.current)return;e.preventDefault();let t=g.groupRef.current,n=t.getBoundingClientRect(),r=0;for(let e of Array.from(t.children))if(e.getAttribute(`role`)===`separator`){let t=e.getBoundingClientRect();r+=x?t.width:t.height}let i=(x?n.width:n.height)-r;S.current={start:x?e.clientX:e.clientY,size:b,perPx:i>0?100/i:0,rtl:x&&getComputedStyle(t).direction===`rtl`};try{e.currentTarget.setPointerCapture(e.pointerId)}catch{}e.currentTarget.focus({preventScroll:!0}),g.setResizing(!0)},w=e=>{u?.(e);let t=S.current;if(!t)return;let n=((x?e.clientX:e.clientY)-t.start)*t.perPx;g.resize(v,t.size+(t.rtl?-n:n))},T=()=>{S.current&&(S.current=null,g.setResizing(!1))},E=e=>{if(n?.(e),e.defaultPrevented||!y)return;let t=x&&getComputedStyle(e.currentTarget).direction===`rtl`,r=g.keyboardStep,i=x?t?`ArrowLeft`:`ArrowRight`:`ArrowDown`,a=x?t?`ArrowRight`:`ArrowLeft`:`ArrowUp`;switch(e.key){case i:e.preventDefault(),g.resize(v,b+r,{snap:!1});return;case a:e.preventDefault(),y.collapsible&&b<=y.min&&b>y.collapsed?g.toggleCollapse(v):g.resize(v,Math.max(b-r,y.min),{snap:!1});return;case`Home`:e.preventDefault(),g.resize(v,y.min,{snap:!1});return;case`End`:e.preventDefault(),g.resize(v,y.max,{snap:!1});return;case`Enter`:e.preventDefault(),g.toggleCollapse(v)}};return(0,o.jsx)(`div`,{role:`separator`,tabIndex:0,"aria-orientation":x?`vertical`:`horizontal`,"aria-valuenow":Math.round(b),"aria-valuemin":y?.collapsible?Math.round(y.collapsed):Math.round(y?.min??0),"aria-valuemax":Math.round(y?.max??100),"aria-controls":y?.id,"aria-label":m??(y?.label?_.resizePanel(y.label):_.handle),...h,className:r.cx(i.default.handle,e),"data-orientation":g.orientation,onPointerDown:C,onPointerMove:w,onPointerUp:e=>{d?.(e),T()},onPointerCancel:e=>{f?.(e),T()},onLostPointerCapture:T,onDoubleClick:e=>{p?.(e),e.defaultPrevented||g.toggleCollapse(v)},onKeyDown:E,children:(0,o.jsx)(`span`,{className:i.default.grip,"aria-hidden":`true`})})},g=Object.assign(p,{Panel:m,Handle:h});exports.ResizablePanel=m,exports.ResizablePanels=g,exports.ResizablePanelsHandle=h;

package/dist/components/layout/ResizablePanels/ResizablePanels.d.ts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation } from '../../../types/common';
+export interface ResizablePanelProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue"> {
+    /** Starting size, in percent of the group. Panels without one share what's left equally. */
+    defaultSize?: number;
+    /** Smallest size, in percent. @default 10 */
+    minSize?: number;
+    /** Largest size, in percent. @default 100 */
+    maxSize?: number;
+    /**
+     * Can be collapsed: dragging well past `minSize` snaps it to
+     * `collapsedSize`, and Enter on the handle after it toggles it.
+     * @default false
+     */
+    collapsible?: boolean;
+    /** Size when collapsed, in percent. At 0 the panel's content is hidden and inert. @default 0 */
+    collapsedSize?: number;
+    /** Name of the panel, used for the handle after it ("Resize Navigation"). */
+    label?: string;
+    /** Panel content. It scrolls inside the panel when it doesn't fit. */
+    children?: ReactNode;
+}
+export interface ResizablePanelsHandleProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    /** Accessible name. Defaults to "Resize {label}" from the panel before it, else "Resize panels". */
+    "aria-label"?: string;
+}
+export interface ResizablePanelsProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue"> {
+    /** `horizontal`: panels side by side. `vertical`: panels stacked. @default "horizontal" */
+    orientation?: Orientation;
+    /** Panel sizes in percent, in order (controlled). */
+    layout?: number[];
+    /** Starting sizes in percent when uncontrolled. Defaults to each panel's `defaultSize`. */
+    defaultLayout?: number[];
+    /** Called with the sizes (in percent) whenever they change. Persist it to remember a layout. */
+    onLayoutChange?: (layout: number[]) => void;
+    /** How much one arrow key press moves a handle, in percent. @default 5 */
+    keyboardStep?: number;
+    /** `ResizablePanels.Panel`s with `ResizablePanels.Handle`s between them, as direct children. */
+    children?: ReactNode;
+}
+/** One panel. Its size comes from the group's layout; constraints are its own props. */
+export declare const ResizablePanel: ({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsedSize: _collapsedSize, label, className, style, children, ...rest }: ResizablePanelProps) => import("react").JSX.Element;
+/** The draggable, focusable separator between two panels. */
+export declare const ResizablePanelsHandle: ({ className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onDoubleClick, "aria-label": ariaLabel, ...rest }: ResizablePanelsHandleProps) => import("react").JSX.Element;
+export declare const ResizablePanels: (({ orientation, layout: layoutProp, defaultLayout, onLayoutChange, keyboardStep, className, children, ref, ...rest }: ResizablePanelsProps) => import("react").JSX.Element) & {
+    Panel: ({ defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsedSize: _collapsedSize, label, className, style, children, ...rest }: ResizablePanelProps) => import("react").JSX.Element;
+    Handle: ({ className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onDoubleClick, "aria-label": ariaLabel, ...rest }: ResizablePanelsHandleProps) => import("react").JSX.Element;
+};