reshaped 3.7.4 → 3.8.0-canary.1

package/dist/components/Grid/Grid.js

@@ -24,7 +24,7 @@ const GridItem = (props) => {
     return (_jsx(TagName, { ...attributes, className: itemClassNames, style: rootVariables, children: children }));
 };
 const Grid = (props) => {
-    const { areas, columns, rows, gap, align, justify, autoColumns, autoRows, autoFlow, children, className, width, height, maxWidth, 
+    const { areas, columns, rows, gap, columnGap, rowGap, align, justify, autoColumns, autoRows, autoFlow, children, className, width, height, maxWidth, 
     // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     as: TagName = "div", attributes, } = props;
@@ -39,6 +39,8 @@ const Grid = (props) => {
     const rootVariables = {
         ...attributes?.style,
         ...responsiveVariables("--rs-grid-gap", gap),
+        ...responsiveVariables("--rs-grid-column-gap", columnGap),
+        ...responsiveVariables("--rs-grid-row-gap", rowGap),
         ...responsiveVariables("--rs-grid-rows", resolvedRows),
         ...responsiveVariables("--rs-grid-columns", resolvedColumns),
         ...responsiveVariables("--rs-grid-areas", resolvedAreas),

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

@@ -1 +1 @@
-.root{display:grid}.root[style*="--rs-grid-gap"]{--rs-grid-gap-value:calc(var(--rs-grid-gap) * var(--rs-unit-x1));gap:var(--rs-grid-gap-value);--rs-grid-gap-s:0;--rs-grid-gap-m:var(--rs-grid-gap-s);--rs-grid-gap-l:var(--rs-grid-gap-m);--rs-grid-gap-xl:var(--rs-grid-gap-l);--rs-grid-gap:var(--rs-grid-gap-s)}.root[style*="--rs-grid-rows"]{grid-template-rows:var(--rs-grid-rows);--rs-grid-rows-s: ;--rs-grid-rows-m:var(--rs-grid-rows-s);--rs-grid-rows-l:var(--rs-grid-rows-m);--rs-grid-rows-xl:var(--rs-grid-rows-l);--rs-grid-rows:var(--rs-grid-rows-s)}.root[style*="--rs-grid-columns"]{grid-template-columns:var(--rs-grid-columns);--rs-grid-columns-s: ;--rs-grid-columns-m:var(--rs-grid-columns-s);--rs-grid-columns-l:var(--rs-grid-columns-m);--rs-grid-columns-xl:var(--rs-grid-columns-l);--rs-grid-columns:var(--rs-grid-columns-s)}.root[style*="--rs-grid-areas"]{grid-template-areas:var(--rs-grid-areas);--rs-grid-areas-s: ;--rs-grid-areas-m:var(--rs-grid-areas-s);--rs-grid-areas-l:var(--rs-grid-areas-m);--rs-grid-areas-xl:var(--rs-grid-areas-l);--rs-grid-areas:var(--rs-grid-areas-s)}.root[style*="--rs-grid-auto-flow"]{grid-auto-flow:var(--rs-grid-auto-flow);--rs-grid-auto-flow-s: ;--rs-grid-auto-flow-m:var(--rs-grid-auto-flow-s);--rs-grid-auto-flow-l:var(--rs-grid-auto-flow-m);--rs-grid-auto-flow-xl:var(--rs-grid-auto-flow-l);--rs-grid-auto-flow:var(--rs-grid-auto-flow-s)}.root[style*="--rs-grid-auto-columns"]{grid-auto-columns:var(--rs-grid-auto-columns);--rs-grid-auto-columns-s: ;--rs-grid-auto-columns-m:var(--rs-grid-auto-columns-s);--rs-grid-auto-columns-l:var(--rs-grid-auto-columns-m);--rs-grid-auto-columns-xl:var(--rs-grid-auto-columns-l);--rs-grid-auto-columns:var(--rs-grid-auto-columns-s)}.root[style*="--rs-grid-auto-rows"]{grid-auto-rows:var(--rs-grid-auto-rows);--rs-grid-auto-rows-s: ;--rs-grid-auto-rows-m:var(--rs-grid-auto-rows-s);--rs-grid-auto-rows-l:var(--rs-grid-auto-rows-m);--rs-grid-auto-rows-xl:var(--rs-grid-auto-rows-l);--rs-grid-auto-rows:var(--rs-grid-auto-rows-s)}.item[style*="--rs-grid-area"]{grid-area:var(--rs-grid-area);--rs-grid-area-s: ;--rs-grid-area-m:var(--rs-grid-area-s);--rs-grid-area-l:var(--rs-grid-area-m);--rs-grid-area-xl:var(--rs-grid-area-l);--rs-grid-area:var(--rs-grid-area-s)}.item[style*="--rs-grid-col-start"]{grid-column-start:var(--rs-grid-col-start);--rs-grid-col-start-s: ;--rs-grid-col-start-m:var(--rs-grid-col-start-s);--rs-grid-col-start-l:var(--rs-grid-col-start-m);--rs-grid-col-start-xl:var(--rs-grid-col-start-l);--rs-grid-col-start:var(--rs-grid-col-start-s)}.item[style*="--rs-grid-col-end"]{grid-column-end:var(--rs-grid-col-end);--rs-grid-col-end-s: ;--rs-grid-col-end-m:var(--rs-grid-col-end-s);--rs-grid-col-end-l:var(--rs-grid-col-end-m);--rs-grid-col-end-xl:var(--rs-grid-col-end-l);--rs-grid-col-end:var(--rs-grid-col-end-s)}.item[style*="--rs-grid-row-start"]{grid-row-start:var(--rs-grid-row-start);--rs-grid-row-start-s: ;--rs-grid-row-start-m:var(--rs-grid-row-start-s);--rs-grid-row-start-l:var(--rs-grid-row-start-m);--rs-grid-row-start-xl:var(--rs-grid-row-start-l);--rs-grid-row-start:var(--rs-grid-row-start-s)}.item[style*="--rs-grid-row-end"]{grid-row-end:var(--rs-grid-row-end);--rs-grid-row-end-s: ;--rs-grid-row-end-m:var(--rs-grid-row-end-s);--rs-grid-row-end-l:var(--rs-grid-row-end-m);--rs-grid-row-end-xl:var(--rs-grid-row-end-l);--rs-grid-row-end:var(--rs-grid-row-end-s)}@media (--rs-viewport-m ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-m)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-m)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-m)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-m)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-m)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-m)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-m)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-m)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-m)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-m)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-m)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-m)}}@media (--rs-viewport-l ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-l)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-l)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-l)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-l)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-l)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-l)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-l)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-l)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-l)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-l)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-l)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-l)}}@media (--rs-viewport-xl ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-xl)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-xl)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-xl)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-xl)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-xl)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-xl)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-xl)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-xl)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-xl)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-xl)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-xl)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-xl)}}
+.root{display:grid}.root[style*="--rs-grid-gap"]{--rs-grid-gap-value:calc(var(--rs-grid-gap) * var(--rs-unit-x1));gap:var(--rs-grid-gap-value);--rs-grid-gap-s:0;--rs-grid-gap-m:var(--rs-grid-gap-s);--rs-grid-gap-l:var(--rs-grid-gap-m);--rs-grid-gap-xl:var(--rs-grid-gap-l);--rs-grid-gap:var(--rs-grid-gap-s)}.root[style*="--rs-grid-column-gap"]{--rs-grid-column-gap-value:calc(var(--rs-grid-column-gap) * var(--rs-unit-x1));column-gap:var(--rs-grid-column-gap-value);--rs-grid-column-gap-s:0;--rs-grid-column-gap-m:var(--rs-grid-column-gap-s);--rs-grid-column-gap-l:var(--rs-grid-column-gap-m);--rs-grid-column-gap-xl:var(--rs-grid-column-gap-l);--rs-grid-column-gap:var(--rs-grid-column-gap-s)}.root[style*="--rs-grid-row-gap"]{--rs-grid-row-gap-value:calc(var(--rs-grid-row-gap) * var(--rs-unit-x1));row-gap:var(--rs-grid-row-gap-value);--rs-grid-row-gap-s:0;--rs-grid-row-gap-m:var(--rs-grid-row-gap-s);--rs-grid-row-gap-l:var(--rs-grid-row-gap-m);--rs-grid-row-gap-xl:var(--rs-grid-row-gap-l);--rs-grid-row-gap:var(--rs-grid-row-gap-s)}.root[style*="--rs-grid-rows"]{grid-template-rows:var(--rs-grid-rows);--rs-grid-rows-s: ;--rs-grid-rows-m:var(--rs-grid-rows-s);--rs-grid-rows-l:var(--rs-grid-rows-m);--rs-grid-rows-xl:var(--rs-grid-rows-l);--rs-grid-rows:var(--rs-grid-rows-s)}.root[style*="--rs-grid-columns"]{grid-template-columns:var(--rs-grid-columns);--rs-grid-columns-s: ;--rs-grid-columns-m:var(--rs-grid-columns-s);--rs-grid-columns-l:var(--rs-grid-columns-m);--rs-grid-columns-xl:var(--rs-grid-columns-l);--rs-grid-columns:var(--rs-grid-columns-s)}.root[style*="--rs-grid-areas"]{grid-template-areas:var(--rs-grid-areas);--rs-grid-areas-s: ;--rs-grid-areas-m:var(--rs-grid-areas-s);--rs-grid-areas-l:var(--rs-grid-areas-m);--rs-grid-areas-xl:var(--rs-grid-areas-l);--rs-grid-areas:var(--rs-grid-areas-s)}.root[style*="--rs-grid-auto-flow"]{grid-auto-flow:var(--rs-grid-auto-flow);--rs-grid-auto-flow-s: ;--rs-grid-auto-flow-m:var(--rs-grid-auto-flow-s);--rs-grid-auto-flow-l:var(--rs-grid-auto-flow-m);--rs-grid-auto-flow-xl:var(--rs-grid-auto-flow-l);--rs-grid-auto-flow:var(--rs-grid-auto-flow-s)}.root[style*="--rs-grid-auto-columns"]{grid-auto-columns:var(--rs-grid-auto-columns);--rs-grid-auto-columns-s: ;--rs-grid-auto-columns-m:var(--rs-grid-auto-columns-s);--rs-grid-auto-columns-l:var(--rs-grid-auto-columns-m);--rs-grid-auto-columns-xl:var(--rs-grid-auto-columns-l);--rs-grid-auto-columns:var(--rs-grid-auto-columns-s)}.root[style*="--rs-grid-auto-rows"]{grid-auto-rows:var(--rs-grid-auto-rows);--rs-grid-auto-rows-s: ;--rs-grid-auto-rows-m:var(--rs-grid-auto-rows-s);--rs-grid-auto-rows-l:var(--rs-grid-auto-rows-m);--rs-grid-auto-rows-xl:var(--rs-grid-auto-rows-l);--rs-grid-auto-rows:var(--rs-grid-auto-rows-s)}.item[style*="--rs-grid-area"]{grid-area:var(--rs-grid-area);--rs-grid-area-s: ;--rs-grid-area-m:var(--rs-grid-area-s);--rs-grid-area-l:var(--rs-grid-area-m);--rs-grid-area-xl:var(--rs-grid-area-l);--rs-grid-area:var(--rs-grid-area-s)}.item[style*="--rs-grid-col-start"]{grid-column-start:var(--rs-grid-col-start);--rs-grid-col-start-s: ;--rs-grid-col-start-m:var(--rs-grid-col-start-s);--rs-grid-col-start-l:var(--rs-grid-col-start-m);--rs-grid-col-start-xl:var(--rs-grid-col-start-l);--rs-grid-col-start:var(--rs-grid-col-start-s)}.item[style*="--rs-grid-col-end"]{grid-column-end:var(--rs-grid-col-end);--rs-grid-col-end-s: ;--rs-grid-col-end-m:var(--rs-grid-col-end-s);--rs-grid-col-end-l:var(--rs-grid-col-end-m);--rs-grid-col-end-xl:var(--rs-grid-col-end-l);--rs-grid-col-end:var(--rs-grid-col-end-s)}.item[style*="--rs-grid-row-start"]{grid-row-start:var(--rs-grid-row-start);--rs-grid-row-start-s: ;--rs-grid-row-start-m:var(--rs-grid-row-start-s);--rs-grid-row-start-l:var(--rs-grid-row-start-m);--rs-grid-row-start-xl:var(--rs-grid-row-start-l);--rs-grid-row-start:var(--rs-grid-row-start-s)}.item[style*="--rs-grid-row-end"]{grid-row-end:var(--rs-grid-row-end);--rs-grid-row-end-s: ;--rs-grid-row-end-m:var(--rs-grid-row-end-s);--rs-grid-row-end-l:var(--rs-grid-row-end-m);--rs-grid-row-end-xl:var(--rs-grid-row-end-l);--rs-grid-row-end:var(--rs-grid-row-end-s)}@media (--rs-viewport-m ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-m)}.root[style*="--rs-grid-column-gap"]{--rs-grid-column-gap:var(--rs-grid-column-gap-m)}.root[style*="--rs-grid-row-gap"]{--rs-grid-row-gap:var(--rs-grid-row-gap-m)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-m)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-m)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-m)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-m)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-m)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-m)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-m)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-m)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-m)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-m)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-m)}}@media (--rs-viewport-l ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-l)}.root[style*="--rs-grid-column-gap"]{--rs-grid-column-gap:var(--rs-grid-column-gap-l)}.root[style*="--rs-grid-row-gap"]{--rs-grid-row-gap:var(--rs-grid-row-gap-l)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-l)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-l)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-l)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-l)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-l)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-l)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-l)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-l)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-l)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-l)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-l)}}@media (--rs-viewport-xl ){.root[style*="--rs-grid-gap"]{--rs-grid-gap:var(--rs-grid-gap-xl)}.root[style*="--rs-grid-column-gap"]{--rs-grid-column-gap:var(--rs-grid-column-gap-xl)}.root[style*="--rs-grid-row-gap"]{--rs-grid-row-gap:var(--rs-grid-row-gap-xl)}.root[style*="--rs-grid-rows"]{--rs-grid-rows:var(--rs-grid-rows-xl)}.root[style*="--rs-grid-columns"]{--rs-grid-columns:var(--rs-grid-columns-xl)}.root[style*="--rs-grid-areas"]{--rs-grid-areas:var(--rs-grid-areas-xl)}.root[style*="--rs-grid-auto-flow"]{--rs-grid-auto-flow:var(--rs-grid-auto-flow-xl)}.root[style*="--rs-grid-auto-columns"]{--rs-grid-auto-columns:var(--rs-grid-auto-columns-xl)}.root[style*="--rs-grid-auto-rows"]{--rs-grid-auto-rows:var(--rs-grid-auto-rows-xl)}.item[style*="--rs-grid-area"]{--rs-grid-area:var(--rs-grid-area-xl)}.item[style*="--rs-grid-col-start"]{--rs-grid-col-start:var(--rs-grid-col-start-xl)}.item[style*="--rs-grid-col-end"]{--rs-grid-col-end:var(--rs-grid-col-end-xl)}.item[style*="--rs-grid-row-start"]{--rs-grid-row-start:var(--rs-grid-row-start-xl)}.item[style*="--rs-grid-row-end"]{--rs-grid-row-end:var(--rs-grid-row-end-xl)}}

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

@@ -3,33 +3,64 @@ import type { Property } from "csstype";
 import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Gap between grid items */
     gap?: G.Responsive<number>;
+    /** Horizontal gap between grid items */
+    columnGap?: G.Responsive<number>;
+    /** Vertical gap between grid items */
+    rowGap?: G.Responsive<number>;
+    /** Align grid items vertically */
     align?: G.Responsive<TStyles.Align>;
+    /** Justify grid items horizontally */
     justify?: G.Responsive<TStyles.Justify>;
+    /** Grid template rows */
     rows?: G.Responsive<number | Property.GridTemplateRows>;
+    /** Grid template columns */
     columns?: G.Responsive<number | Property.GridTemplateColumns>;
+    /** Grid areas for template syntax */
     areas?: G.Responsive<string[]>;
+    /** Grid auto flow */
     autoFlow?: G.Responsive<Property.GridAutoFlow>;
+    /** Grid auto columns */
     autoColumns?: G.Responsive<Property.GridAutoColumns>;
+    /** Grid auto rows */
     autoRows?: G.Responsive<Property.GridAutoRows>;
+    /** Maximum width of the grid container, literal css value or unit token multiplier */
     maxWidth?: G.Responsive<string | number>;
+    /** Width of the grid container, literal css value or unit token multiplier */
     width?: G.Responsive<string | number>;
+    /** Height of the grid container, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Custom root element html tag */
     as?: TagName;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+    /** Grid area for template syntax */
     area?: string;
+    /** Starting column position */
     colStart?: G.Responsive<number>;
+    /** Ending column position */
     colEnd?: G.Responsive<number>;
+    /** Column span value */
     colSpan?: G.Responsive<number>;
+    /** Starting row position */
     rowStart?: G.Responsive<number>;
+    /** Ending row position */
     rowEnd?: G.Responsive<number>;
+    /** Row span value */
     rowSpan?: G.Responsive<number>;
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Custom item element html tag */
     as?: TagName;
+    /** Additional classname for the item element */
     className?: G.ClassName;
+    /** Additional attributes for the item element */
     attributes?: G.Attributes<TagName>;
 };

package/dist/components/Grid/tests/Grid.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {
@@ -35,3 +36,5 @@ export declare const auto: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const as: StoryObj;
+export declare const className: StoryObj;

package/dist/components/Grid/tests/Grid.stories.js

@@ -1,3 +1,4 @@
+import { expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Grid from "../index.js";
 import View from "../../View/index.js";
@@ -11,7 +12,7 @@ export default {
     },
 };
 export const base = {
-    name: "gap, align, justify, maxWidth, width, height",
+    name: "gap, columnGap, rowGap, align, justify, maxWidth, width, height",
     render: () => (<Example>
 			<Example.Item title="gap: 2">
 				<Grid gap={2} columns={2}>
@@ -20,6 +21,13 @@ export const base = {
 						</View>))}
 				</Grid>
 			</Example.Item>
+			<Example.Item title="columnGap: 2, rowGap: 4">
+				<Grid columnGap={2} rowGap={4} columns={2}>
+					{[1, 2, 3, 4].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
 			<Example.Item title="align: center">
 				<Grid gap={2} columns={2} align="center">
 					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
@@ -205,3 +213,33 @@ export const auto = {
 			</Example.Item>
 		</Example>),
 };
+export const as = {
+    name: "as",
+    render: () => (<Grid as="ul">
+			<Grid.Item as="li">Content</Grid.Item>
+		</Grid>),
+    play: ({ canvas }) => {
+        const ul = canvas.getByRole("list");
+        const li = canvas.getByRole("listitem");
+        expect(ul).toBeInTheDocument();
+        expect(li).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Grid className="test-class" attributes={{ id: "test-id" }}>
+				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
+					Content
+				</Grid.Item>
+			</Grid>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const item = root?.firstChild;
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-class");
+        expect(item).toHaveAttribute("id", "test-item-id");
+        expect(item).toHaveClass("test-item-class");
+    },
+};

package/dist/components/Hidden/Hidden.types.d.ts

@@ -1,8 +1,12 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Pick at which viewport sizes to hide the children*/
     hide?: G.Responsive<boolean>;
+    /** Use visibility hidden instead of display none */
     visibility?: boolean;
+    /** Custom root element html tag */
     as?: keyof React.JSX.IntrinsicElements;
+    /** Node for inserting children */
     children: React.ReactNode;
 };

package/dist/components/HiddenVisually/HiddenVisually.types.d.ts

@@ -1,4 +1,5 @@
 import type React from "react";
 export type Props = {
+    /** Node for inserting children */
     children?: React.ReactNode;
 };

package/dist/components/Hotkey/Hotkey.types.d.ts

@@ -1,8 +1,12 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Highlight the component, can be used to show when hotkey is pressed */
     active?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

package/dist/components/Icon/Icon.types.d.ts

@@ -1,10 +1,16 @@
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
+    /** Icon svg component or node */
     svg: React.ReactElement | React.ComponentType;
+    /** Icon size, literal css value or unit token multiplier */
     size?: G.Responsive<number | string>;
+    /** Icon color, based on the color tokens */
     color?: "neutral" | "neutral-faded" | "positive" | "critical" | "warning" | "primary" | "disabled";
+    /** Use the width of the svg asset instead of providing a square bounding box */
     autoWidth?: boolean;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

package/dist/components/Image/Image.types.d.ts

@@ -2,22 +2,37 @@ import type React from "react";
 import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
 export type Props = {
+    /** Image URL */
     src?: string;
+    /** Image alt text */
     alt?: string;
+    /** Image width, literal css value or unit token multiplier */
     width?: G.Responsive<string | number>;
+    /** Image height, literal css value or unit token multiplier */
     height?: G.Responsive<string | number>;
+    /** Image max width, literal css value or unit token multiplier */
     maxWidth?: G.Responsive<string | number>;
+    /** Image aspect ratio, width / height */
     aspectRatio?: G.Responsive<number>;
+    /** Image border radius, based on the radius tokens */
     borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    /** Image display mode for controlling how it fits into the provided boundaries */
     displayMode?: "cover" | "contain";
+    /** Image on load event */
     onLoad?: (e: React.SyntheticEvent) => void;
+    /** Image on error event */
     onError?: (e: React.SyntheticEvent) => void;
+    /** Image fallback content if the image fails to load or was not provided */
     fallback?: string | React.ReactNode | boolean;
+    /** Image render function, can be used for integrating with Image component in 3rd party frameworks */
     renderImage?: (attributes: Omit<G.Attributes<"img">, "src" | "alt"> & {
         src: string;
         alt: string;
     }) => React.ReactNode;
+    /** Additional attributes for the image element */
     imageAttributes?: G.Attributes<"img">;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div"> & G.Attributes<"img">;
 };

package/dist/components/Link/Link.types.d.ts

@@ -1,7 +1,14 @@
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation"> & {
+    /** Icon at the start position */
     icon?: IconProps["svg"];
+    /** Link color, based on the color tokens
+     * @default "primary"
+     */
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
+    /** Link render variant
+     * @default "underline"
+     */
     variant?: "plain" | "underline";
 };

package/dist/components/Loader/Loader.types.d.ts

@@ -1,8 +1,13 @@
 import type * as G from "../../types/global";
 export type Props = {
+    /** Component size */
     size?: G.Responsive<"small" | "medium" | "large">;
+    /** Component color, based on the color tokens */
     color?: "primary" | "critical" | "positive" | "inherit";
+    /** aria-label attribute for the root element */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"span">;
 };

package/dist/components/MenuItem/MenuItem.types.d.ts

@@ -4,19 +4,31 @@ import type { ActionableProps, ActionableRef } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation"> & {
+    /** Component color, based on the color tokens */
     color?: "neutral" | "critical" | "primary";
+    /** Icon at the start position */
     icon?: IconProps["svg"];
-    startSlot?: React.ReactNode;
+    /** Node for inserting children */
     children: React.ReactNode;
+    /** Node for inserting content at the start side of the component */
+    startSlot?: React.ReactNode;
+    /** Node for inserting content at the end side of the component */
     endSlot?: React.ReactNode;
+    /** Highlight the component as hovered or focused. For example, when displaying currently focused item in Autocomplete */
     highlighted?: boolean;
+    /** Highlight the component as selected */
     selected?: boolean;
+    /** Component size */
     size?: G.Responsive<Size>;
+    /** Round the corners of the component */
     roundedCorners?: G.Responsive<boolean>;
 };
 export type AlignerProps = {
+    /** Node for inserting children */
     children: React.ReactElement;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type Export = React.ForwardRefExoticComponent<Props & {

package/dist/components/Modal/Modal.types.d.ts

@@ -9,28 +9,47 @@ export type Context = {
     setSubtitleMounted: (b: boolean) => void;
 };
 export type TitleProps = {
+    /** Node for inserting the title text */
     children: React.ReactNode;
 };
 export type SubtitleProps = {
+    /** Node for inserting the subtitle text */
     children: React.ReactNode;
 };
 export type Props = {
+    /** Node for inserting children */
     children?: React.ReactNode;
+    /** Component position on the screen */
     position?: G.Responsive<"center" | "end" | "bottom" | "start" | "full-screen">;
+    /** Component size, literal css value */
     size?: G.Responsive<string>;
+    /** Component padding, unit token multiplier */
     padding?: G.Responsive<number>;
+    /** Remove overflow from the component content */
     overflow?: "visible";
+    /** Callback when the component is closed */
     onClose?: (args: {
         reason: OverlayCloseReason | "drag";
     }) => void;
+    /** Make the overlay transparent */
     transparentOverlay?: boolean;
+    /** Make the overlay blurred */
     blurredOverlay?: boolean;
+    /** Disable swipe gesture to close the component on touch devices */
     disableSwipeGesture?: boolean;
+    /** Disable closing the component on outside click */
     disableCloseOnOutsideClick?: boolean;
+    /** Focus the first focusable element in the component when it is opened, when false, focus will be set on the component content container
+     * @default true
+     */
     autoFocus?: boolean;
+    /** aria-label attribute for the root element, useful when there is no visible title */
     ariaLabel?: string;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional classname for the overlay element */
     overlayClassName?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement | null>;
     };

package/dist/components/NumberField/NumberField.types.d.ts

@@ -1,19 +1,29 @@
 import type { TextFieldBaseProps } from "../TextField";
 import type * as G from "../../types/global";
 export type BaseProps = Omit<TextFieldBaseProps, "endSlot" | "onChange" | "rounded" | "multiline"> & {
+    /** Callback when the component value is changed */
     onChange?: G.ChangeHandler<number>;
+    /** aria-label attribute for the increase button */
     increaseAriaLabel: string;
+    /** aria-label attribute for the decrease button */
     decreaseAriaLabel: string;
+    /** Minimum value supported in the form field	 */
     min?: number;
+    /** Maximum value supported in the form field */
     max?: number;
+    /** Step at which the value will increase or decrease when clicking the button controls */
     step?: number;
 };
 export type ControlledProps = BaseProps & {
+    /** Value of the form field, enables controlled mode */
     value: number | null;
+    /** Default value of the form field, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the form field, enables controlled mode */
     value?: never;
+    /** Default value of the form field, enables uncontrolled mode */
     defaultValue?: number;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Overlay/Overlay.types.d.ts

@@ -2,21 +2,34 @@ import type React from "react";
 import type * as G from "../../types/global";
 export type CloseReason = "overlay-click" | "escape-key";
 export type Props = {
+    /** Make the overlay transparent */
     transparent?: boolean | number;
+    /** Make the overlay blurred */
     blurred?: boolean;
+    /** Control the overflow of the component content */
     overflow?: "auto" | "hidden";
+    /** Node for inserting children, render function receives the state of the component as an argument */
     children?: React.ReactNode | ((props: {
         active: boolean;
     }) => React.ReactNode);
+    /** Control the visibility of the component */
     active?: boolean;
+    /** Callback when the component is closed */
     onClose?: (args: {
         reason: CloseReason;
     }) => void;
+    /** Callback after the component close transition is complete */
     onAfterClose?: () => void;
+    /** Callback when the component is opened */
     onOpen?: () => void;
+    /** Callback after the component open transition is complete */
     onAfterOpen?: () => void;
+    /** Disable closing the component on outside click */
     disableCloseOnClick?: boolean;
+    /** Element to render the component in */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Pagination/Pagination.types.d.ts

@@ -1,52 +1,34 @@
 import type * as G from "../../types/global";
 export type BaseProps = {
-    /**
-     * Total number of pages available
-     */
+    /** Total number of pages available */
     total: number;
-    /**
-     * Event handler triggered when the current page changes
-     */
+    /** Callback when the current page changes */
     onChange?: (args: {
         page: number;
     }) => void;
-    /**
-     * Function to dynamically get an aria-label for each
-     */
+    /** Function to dynamically get an aria-label for each page */
     pageAriaLabel?: (args: {
         page: number;
     }) => string;
-    /**
-     * aria-label for the previous page button
-     */
+    /** aria-label attribute for the previous page button */
     previousAriaLabel: string;
-    /**
-     * aria-label for the next page button
-     */
+    /** aria-label attribute for the next page button */
     nextAriaLabel: string;
-    /**
-     * Custom root element className
-     */
+    /** Additional classname for the root element */
     className?: G.ClassName;
-    /**
-     * Custom root element attributes
-     */
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
-    /**
-     * Currently selected page number, starts with 1.
-     * Enables controlled component behavior.
-     */
+    /** Currently selected page number, starts with 1, enables controlled mode */
     page: number;
+    /** Default selected page number, starts with 1, enables uncontrolled mode */
     defaultPage?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Currently selected page number, starts with 1, enables controlled mode */
     page?: never;
-    /**
-     * Default selected page number, starts with 1.
-     * Enables uncontrolled component behavior.
-     */
+    /** Default selected page number, starts with 1, enables uncontrolled mode */
     defaultPage?: number;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/PinField/PinField.module.css

@@ -1 +1 @@
-.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}
+.root{display:inline-flex}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;clip-path:inset(0 calc(50% + var(--rs-unit-x2)) 0 0);color:transparent;font-size:16px;inset-block:0;inset-inline-start:0;outline:none;padding-left:100%;position:absolute}.item{box-sizing:border-box;cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:var(--rs-radius-circular);content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}

package/dist/components/PinField/PinField.types.d.ts

@@ -1,22 +1,35 @@
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large" | "xlarge";
 type BaseProps = {
+    /** Name of the input element */
     name: string;
+    /** Amount of characters in the pin */
     valueLength?: number;
+    /** Character pattern used in the input value */
     pattern?: "alphabetic" | "numeric" | "alphanumeric";
+    /** Component size */
     size?: G.Responsive<Size>;
+    /** Input fields render variant */
     variant?: "outline" | "faded";
+    /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
+    /** Additional attributes for the input element */
     inputAttributes?: G.Attributes<"input">;
+    /** Additional classname for the root element */
     className?: G.ClassName;
+    /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
+    /** Value of the input element, enables controlled mode */
     value: string;
+    /** Default value of the input element, enables uncontrolled mode */
     defaultValue?: never;
 };
 export type UncontrolledProps = BaseProps & {
+    /** Value of the input element, enables controlled mode */
     value?: never;
+    /** Default value of the input element, enables uncontrolled mode */
     defaultValue?: string;
 };
 export type Props = ControlledProps | UncontrolledProps;

package/dist/components/PinField/tests/PinField.stories.d.ts

@@ -1,3 +1,5 @@
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/internal/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PinFieldProps>;
@@ -8,6 +10,25 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const variant: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
+export declare const base: StoryObj;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const valueLength: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const pattern: StoryObj<{
+    handleChange?: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;
+export declare const formControl: StoryObj;
+export declare const keyboard: StoryObj;