@cerberus-design/data-grid 1.1.3 → 1.2.0

package/dist/components/grid.client.js

@@ -1,107 +1,61 @@
 "use client";
 "use client";
-import { PARTS, SCOPE } from "../const.js";
+import { OPERATORS, PARTS, SCOPE } from "../const.js";
 import { useDataGridContext } from "../context.client.js";
 import { useColumnStyles, usePinnedAttribute, usePinnedState } from "../hooks.client.js";
-import { useVirtualizer } from "../virtualizer.client.js";
 import { HeaderCellOptions } from "./features.client.js";
 import { For, IconButton, Show, Tooltip, useCerberusContext } from "@cerberus-design/react";
-import { useRead } from "@cerberus-design/signals";
-import { memo, useMemo, useRef } from "react";
-import { Box, HStack, Scrollable, Stack } from "styled-system/jsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { batch, createComputed, useRead } from "@cerberus-design/signals";
+import { memo } from "react";
+import { Box, Center, HStack } from "styled-system/jsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/grid.client.tsx
-function GridViewport() {
-	const viewportRef = useRef(null);
-	const store = useDataGridContext();
-	const { virtualRows, totalHeight } = useVirtualizer(store, viewportRef);
-	const columns = useRead(store.columns);
-	const isServerPaginated = useRead(store.isServerPaginated);
-	const staticRows = useRead(store.rows);
-	const currentPageRange = useRead(store.currentPageRange);
-	return /* @__PURE__ */ jsxs(Scrollable, {
-		hideScrollbar: true,
-		"data-scope": SCOPE,
-		"data-part": PARTS.VIEWPORT,
-		h: "full",
-		minH: "0",
-		minW: "full",
-		pos: "relative",
-		w: "full",
-		ref: viewportRef,
-		children: [/* @__PURE__ */ jsx(Box, {
-			role: "grid",
-			"aria-rowcount": staticRows.length + 1,
-			"aria-colcount": columns.length,
-			h: "var(--row-height)",
-			pos: "sticky",
-			top: "0",
-			w: "var(--total-grid-width)",
-			zIndex: "sticky",
-			children: /* @__PURE__ */ jsx(HStack, {
-				"aria-rowindex": 1,
-				role: "rowgroup",
-				gap: "0",
-				h: "full",
-				pos: "relative",
-				w: "full",
-				children: /* @__PURE__ */ jsx(For, {
-					each: columns,
-					children: (col) => /* @__PURE__ */ jsx(Show, {
-						when: col.isVisible(),
-						children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col })
-					}, col.id)
-				})
-			})
-		}), /* @__PURE__ */ jsx(Show, {
-			when: isServerPaginated,
-			fallback: /* @__PURE__ */ jsx(Box, {
-				pos: "relative",
-				w: "var(--total-grid-width)",
-				style: { height: `${totalHeight}px` },
-				children: /* @__PURE__ */ jsx(For, {
-					each: virtualRows,
-					children: (vRow) => /* @__PURE__ */ jsx(GridRow, {
-						row: vRow.data,
-						index: vRow.index,
-						offsetY: vRow.offsetY
-					}, vRow.index)
-				})
-			}),
-			children: () => /* @__PURE__ */ jsx(Stack, {
-				direction: "column",
-				gap: "0",
-				w: "var(--total-grid-width)",
-				children: /* @__PURE__ */ jsx(For, {
-					each: staticRows.slice(currentPageRange.start, currentPageRange.end),
-					children: (row, index) => /* @__PURE__ */ jsx(GridRow, {
-						row,
-						index
-					}, index)
-				})
-			})
-		})]
-	});
-}
 var GridHeaderCell = memo(function GridHeaderCell(props) {
 	const { column } = props;
 	const store = useDataGridContext();
 	const { icons } = useCerberusContext();
 	const pinnedVal = useRead(column.pinned);
 	const sortingVal = useRead(store.sorting);
+	const colFilters = useRead(store.colFilters);
 	const pinnedState = usePinnedState(pinnedVal);
 	const pinnedAttr = usePinnedAttribute(pinnedVal);
 	const style = useColumnStyles(column, pinnedVal);
-	const isSortedDesc = useMemo(() => {
+	const isSortedDesc = createComputed(() => {
 		const result = sortingVal.find((item) => item.id === column.id);
 		if (result) return result.desc;
 		return false;
-	}, [sortingVal, column.id]);
+	});
+	const hasFilters = createComputed(() => {
+		return colFilters.active.some((filterId) => filterId === column.id);
+	});
 	const SortAscIcon = icons.sortAsc;
 	const SortDescIcon = icons.sortDesc;
+	const EditFilterIcon = icons.filterEdit;
 	function handleToggleSorting(e) {
 		store.toggleSort(column.id, e.shiftKey);
 	}
+	function handleEditFilters() {
+		const fallbackFilter = {
+			id: column.id,
+			operator: OPERATORS.contains,
+			value: ""
+		};
+		batch(() => {
+			store.setColFilter((prev) => ({
+				...prev,
+				active: [...prev.active, column.id],
+				filters: {
+					...prev.filters,
+					[column.id]: {
+						...fallbackFilter,
+						...prev.filters[column.id]
+					}
+				},
+				editing: column.id
+			}));
+			store.setShowColFilter(true);
+		});
+	}
 	return /* @__PURE__ */ jsxs(HStack, {
 		role: "columnheader",
 		"data-scope": SCOPE,
@@ -142,32 +96,59 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
 			/* @__PURE__ */ jsxs(HStack, {
 				gap: "sm",
 				_groupHover: { "& :is(button)": { opacity: "1" } },
-				children: [typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header, /* @__PURE__ */ jsx(Show, {
-					when: column.sortable,
-					children: /* @__PURE__ */ jsx(Tooltip, {
-						content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
-						openDelay: 800,
-						asChild: true,
-						children: /* @__PURE__ */ jsx(IconButton, {
-							ariaLabel: "Toggle sorting",
-							size: "sm",
-							opacity: {
-								base: 1,
-								md: 0
-							},
-							transitionProperty: "opacity",
-							transitionDuration: "fast",
-							onClick: handleToggleSorting,
-							children: /* @__PURE__ */ jsx(Show, {
-								when: isSortedDesc,
-								fallback: /* @__PURE__ */ jsx(SortAscIcon, {}),
-								children: /* @__PURE__ */ jsx(SortDescIcon, {})
+				children: [
+					typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header,
+					/* @__PURE__ */ jsx(Show, {
+						when: hasFilters(),
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							content: "Edit filters",
+							openDelay: 800,
+							asChild: true,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								ariaLabel: "Edit filters",
+								size: "sm",
+								onClick: handleEditFilters,
+								children: /* @__PURE__ */ jsx(EditFilterIcon, {})
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(Show, {
+						when: column.sortable,
+						children: /* @__PURE__ */ jsx(Tooltip, {
+							content: isSortedDesc() ? "Sort Ascending" : "Sort Decending",
+							openDelay: 800,
+							asChild: true,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								ariaLabel: "Toggle sorting",
+								size: "sm",
+								opacity: {
+									base: 1,
+									md: 0
+								},
+								transitionProperty: "opacity",
+								transitionDuration: "fast",
+								onClick: handleToggleSorting,
+								children: /* @__PURE__ */ jsx(Show, {
+									when: isSortedDesc(),
+									fallback: /* @__PURE__ */ jsx(SortAscIcon, {}),
+									children: /* @__PURE__ */ jsx(SortDescIcon, {})
+								})
 							})
 						})
 					})
-				})]
+				]
+			}),
+			/* @__PURE__ */ jsx(Center, {
+				bgColor: "var(--head-cell-bg-color)",
+				bottom: "0",
+				pos: "absolute",
+				px: "sm",
+				right: "0",
+				top: "0",
+				w: "fit-content",
+				zIndex: "11",
+				children: /* @__PURE__ */ jsx(HeaderCellOptions, { ...column })
 			}),
-			/* @__PURE__ */ jsx(HeaderCellOptions, { ...column }),
 			/* @__PURE__ */ jsx(Show, {
 				when: pinnedState === "pinned",
 				children: () => /* @__PURE__ */ jsx(ShadowFiller, {
@@ -212,10 +193,20 @@ var GridCell = memo(function GridCell(props) {
 			borderLeft: "1px solid"
 		},
 		style,
-		children: [column.original.cell ? column.original.cell({
-			row,
-			value
-		}) : value, /* @__PURE__ */ jsx(Show, {
+		children: [/* @__PURE__ */ jsx(Show, {
+			when: props.pending && props.hasSkeleton,
+			fallback: /* @__PURE__ */ jsx(Fragment, { children: column.original.cell ? column.original.cell({
+				row,
+				value
+			}) : value }),
+			children: /* @__PURE__ */ jsx(Box, {
+				"aria-busy": "true",
+				my: "xs",
+				rounded: "md",
+				w: "full",
+				style: { height: "calc(var(--row-height) / 3)" }
+			})
+		}), /* @__PURE__ */ jsx(Show, {
 			when: pinnedState === "pinned",
 			children: () => /* @__PURE__ */ jsx(ShadowFiller, {
 				style,
@@ -225,7 +216,10 @@ var GridCell = memo(function GridCell(props) {
 	});
 });
 var GridRow = memo(function GridRow(props) {
-	const columns = useRead(useDataGridContext().columns);
+	const store = useDataGridContext();
+	const columns = useRead(store.columns);
+	const pending = useRead(store.pending);
+	const hasSkeleton = useRead(store.hasSkeleton);
 	return /* @__PURE__ */ jsx(GridRowContainer, {
 		offsetY: props.offsetY,
 		children: /* @__PURE__ */ jsx(For, {
@@ -234,7 +228,9 @@ var GridRow = memo(function GridRow(props) {
 				when: col.isVisible(),
 				children: () => /* @__PURE__ */ jsx(GridCell, {
 					row: props.row,
-					column: col
+					column: col,
+					hasSkeleton,
+					pending
 				})
 			}, col.id)
 		})
@@ -287,4 +283,4 @@ function ShadowFiller(props) {
 	});
 }
 //#endregion
-export { GridViewport };
+export { GridHeaderCell, GridRow };

package/dist/components/no-content.client.cjs

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+let _cerberus_design_react = require("@cerberus-design/react");
+let styled_system_jsx = require("styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/no-content.client.tsx
+function NoContent() {
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const Icon = icons.table;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.VStack, {
+		gap: "md",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Avatar, {
+			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}),
+			gradient: "charon-light",
+			size: "sm"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Text, {
+			textStyle: "label-sm",
+			children: "No rows found"
+		})]
+	});
+}
+//#endregion
+exports.NoContent = NoContent;

package/dist/components/no-content.client.d.cts

@@ -0,0 +1 @@
+export declare function NoContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/no-content.client.d.ts

@@ -0,0 +1 @@
+export declare function NoContent(): import("react/jsx-runtime").JSX.Element;

package/dist/components/no-content.client.js

@@ -0,0 +1,23 @@
+"use client";
+"use client";
+import { Avatar, Text, useCerberusContext } from "@cerberus-design/react";
+import { VStack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/no-content.client.tsx
+function NoContent() {
+	const { icons } = useCerberusContext();
+	const Icon = icons.table;
+	return /* @__PURE__ */ jsxs(VStack, {
+		gap: "md",
+		children: [/* @__PURE__ */ jsx(Avatar, {
+			fallback: /* @__PURE__ */ jsx(Icon, {}),
+			gradient: "charon-light",
+			size: "sm"
+		}), /* @__PURE__ */ jsx(Text, {
+			textStyle: "label-sm",
+			children: "No rows found"
+		})]
+	});
+}
+//#endregion
+export { NoContent };

package/dist/components/overlays.cjs

@@ -0,0 +1,69 @@
+"use client";
+const require_no_content_client = require("./no-content.client.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let styled_system_jsx = require("styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/overlays.tsx
+var overlayStyle = {
+	backgroundColor: "color-mix(in srgb, var(--cerberus-colors-page-surface-initial) 70%, transparent)",
+	height: "calc(100% - var(--row-height))"
+};
+function NoContentOverlay(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Center, {
+		w: "full",
+		userSelect: "none",
+		style: overlayStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+			when: props.custom,
+			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_no_content_client.NoContent, {}),
+			children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.custom })
+		})
+	});
+}
+function PendingOverlay(props) {
+	if (props.variant === "skeleton") return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+		bottom: "0",
+		left: "0",
+		overflow: "hidden",
+		pos: "absolute",
+		right: "0",
+		top: "var(--row-height)",
+		userSelect: "none",
+		w: "full",
+		zIndex: "decorator",
+		style: overlayStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatchPendingOverlay, { ...props })
+	});
+}
+function MatchPendingOverlay(props) {
+	if (typeof props.variant !== "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.variant });
+	switch (props.variant) {
+		case "skeleton": return null;
+		case "linear": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinearOverlay, {});
+		case "circular": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircularOverlay, {});
+		default: throw new Error("An unknown variant option was provided to the Data Grid overlays.pending property. The only avaiable options are: skeleton, linear, circular, or ReactNode.");
+	}
+}
+function LinearOverlay() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.ProgressBar, {
+		id: "dg-loading",
+		indeterminate: true,
+		label: "Data grid loading",
+		size: "xs",
+		usage: "block"
+	});
+}
+function CircularOverlay() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Center, {
+		h: "full",
+		w: "full",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Square, {
+			size: "12",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Spinner, {})
+		})
+	});
+}
+//#endregion
+exports.NoContentOverlay = NoContentOverlay;
+exports.PendingOverlay = PendingOverlay;

package/dist/components/overlays.d.cts

@@ -0,0 +1,14 @@
+import { OverlaySlots } from '../types';
+export declare const overlayStyle: {
+    backgroundColor: string;
+    height: string;
+};
+interface NoContentOverlayProps {
+    custom?: OverlaySlots['noContent'];
+}
+export declare function NoContentOverlay(props: NoContentOverlayProps): import("react/jsx-runtime").JSX.Element;
+interface PendingOverlayProps {
+    variant?: OverlaySlots['pending'];
+}
+export declare function PendingOverlay(props: PendingOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/overlays.d.ts

@@ -0,0 +1,14 @@
+import { OverlaySlots } from '../types';
+export declare const overlayStyle: {
+    backgroundColor: string;
+    height: string;
+};
+interface NoContentOverlayProps {
+    custom?: OverlaySlots['noContent'];
+}
+export declare function NoContentOverlay(props: NoContentOverlayProps): import("react/jsx-runtime").JSX.Element;
+interface PendingOverlayProps {
+    variant?: OverlaySlots['pending'];
+}
+export declare function PendingOverlay(props: PendingOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/overlays.js

@@ -0,0 +1,68 @@
+"use client";
+import { NoContent } from "./no-content.client.js";
+import { ProgressBar, Show, Spinner } from "@cerberus-design/react";
+import { Box, Center, Square } from "styled-system/jsx";
+import { Fragment, jsx } from "react/jsx-runtime";
+//#region src/components/overlays.tsx
+var overlayStyle = {
+	backgroundColor: "color-mix(in srgb, var(--cerberus-colors-page-surface-initial) 70%, transparent)",
+	height: "calc(100% - var(--row-height))"
+};
+function NoContentOverlay(props) {
+	return /* @__PURE__ */ jsx(Center, {
+		w: "full",
+		userSelect: "none",
+		style: overlayStyle,
+		children: /* @__PURE__ */ jsx(Show, {
+			when: props.custom,
+			fallback: /* @__PURE__ */ jsx(NoContent, {}),
+			children: () => /* @__PURE__ */ jsx(Fragment, { children: props.custom })
+		})
+	});
+}
+function PendingOverlay(props) {
+	if (props.variant === "skeleton") return null;
+	return /* @__PURE__ */ jsx(Box, {
+		bottom: "0",
+		left: "0",
+		overflow: "hidden",
+		pos: "absolute",
+		right: "0",
+		top: "var(--row-height)",
+		userSelect: "none",
+		w: "full",
+		zIndex: "decorator",
+		style: overlayStyle,
+		children: /* @__PURE__ */ jsx(MatchPendingOverlay, { ...props })
+	});
+}
+function MatchPendingOverlay(props) {
+	if (typeof props.variant !== "string") return /* @__PURE__ */ jsx(Fragment, { children: props.variant });
+	switch (props.variant) {
+		case "skeleton": return null;
+		case "linear": return /* @__PURE__ */ jsx(LinearOverlay, {});
+		case "circular": return /* @__PURE__ */ jsx(CircularOverlay, {});
+		default: throw new Error("An unknown variant option was provided to the Data Grid overlays.pending property. The only avaiable options are: skeleton, linear, circular, or ReactNode.");
+	}
+}
+function LinearOverlay() {
+	return /* @__PURE__ */ jsx(ProgressBar, {
+		id: "dg-loading",
+		indeterminate: true,
+		label: "Data grid loading",
+		size: "xs",
+		usage: "block"
+	});
+}
+function CircularOverlay() {
+	return /* @__PURE__ */ jsx(Center, {
+		h: "full",
+		w: "full",
+		children: /* @__PURE__ */ jsx(Square, {
+			size: "12",
+			children: /* @__PURE__ */ jsx(Spinner, {})
+		})
+	});
+}
+//#endregion
+export { NoContentOverlay, PendingOverlay };

package/dist/components/pinned-items.client.cjs

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+const require_const = require("../const.cjs");
 let _cerberus_design_react = require("@cerberus-design/react");
 let _cerberus_design_signals = require("@cerberus-design/signals");
 let styled_system_jsx = require("styled-system/jsx");
@@ -23,7 +24,7 @@ function UnpinRightItem() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.pinRightFilled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "unpin_right",
+		value: require_const.FEATURE_VALUES.unpinRight,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",
@@ -35,7 +36,7 @@ function UnpinLeftItem() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.pinLeftFilled;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "unpin_left",
+		value: require_const.FEATURE_VALUES.unpinLeft,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",
@@ -47,7 +48,7 @@ function PinRightItem() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.pinRight;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "pin_right",
+		value: require_const.FEATURE_VALUES.pinRight,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",
@@ -59,7 +60,7 @@ function PinLeftItem() {
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const Icon = icons.pinLeft;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
-		value: "pin_left",
+		value: require_const.FEATURE_VALUES.pinLeft,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 			gap: "sm",
 			w: "full",

package/dist/components/pinned-items.client.js

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+import { FEATURE_VALUES } from "../const.js";
 import { MenuItem, useCerberusContext } from "@cerberus-design/react";
 import { useRead } from "@cerberus-design/signals";
 import { HStack } from "styled-system/jsx";
@@ -23,7 +24,7 @@ function UnpinRightItem() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.pinRightFilled;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "unpin_right",
+		value: FEATURE_VALUES.unpinRight,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",
@@ -35,7 +36,7 @@ function UnpinLeftItem() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.pinLeftFilled;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "unpin_left",
+		value: FEATURE_VALUES.unpinLeft,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",
@@ -47,7 +48,7 @@ function PinRightItem() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.pinRight;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "pin_right",
+		value: FEATURE_VALUES.pinRight,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",
@@ -59,7 +60,7 @@ function PinLeftItem() {
 	const { icons } = useCerberusContext();
 	const Icon = icons.pinLeft;
 	return /* @__PURE__ */ jsx(MenuItem, {
-		value: "pin_left",
+		value: FEATURE_VALUES.pinLeft,
 		children: /* @__PURE__ */ jsxs(HStack, {
 			gap: "sm",
 			w: "full",