@zendir/ui 0.4.1 → 0.6.0

package/dist/react/core/layout/Grid.d.ts

@@ -2,9 +2,8 @@ import { default as React } from 'react';
 import { ResponsiveValue } from './useBreakpoint';
 import { SpacingToken } from './responsive';
 import { BoxProps } from './Box';
-
 type SpacingInput = SpacingToken | string | number;
-export interface GridProps extends Omit<BoxProps, 'display'> {
+export interface GridProps extends Omit<BoxProps, "display"> {
     /** Number of equal columns (responsive) */
     columns?: ResponsiveValue<number>;
     /** Auto-fit: minimum column width in px. Creates `repeat(auto-fit, minmax(Npx, 1fr))` */
@@ -22,13 +21,13 @@ export interface GridProps extends Omit<BoxProps, 'display'> {
     /** Column gap (overrides gap for columns) */
     columnGap?: ResponsiveValue<SpacingInput>;
     /** Align items (cross-axis per cell) */
-    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    align?: "start" | "end" | "center" | "stretch" | "baseline";
     /** Justify items (main-axis per cell) */
-    justifyItems?: 'start' | 'end' | 'center' | 'stretch';
+    justifyItems?: "start" | "end" | "center" | "stretch";
     /** Align content (cross-axis for the grid as a whole) */
-    alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+    alignContent?: "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
     /** Justify content (main-axis for the grid as a whole) */
-    justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+    justifyContent?: "start" | "end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly";
     /** Make grid inline */
     inline?: boolean;
 }

package/dist/react/core/layout/Grid.js

@@ -1,142 +1,135 @@
-import { jsx } from "react/jsx-runtime";
-import { memo, forwardRef } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
-const Grid = memo(forwardRef(function Grid2({
-  columns,
-  autoFit,
-  autoFill,
-  template,
-  rows,
-  gap,
-  rowGap,
-  columnGap,
-  align,
-  justifyItems,
-  alignContent,
-  justifyContent,
-  inline = false,
-  // Box props
-  padding,
-  p,
-  px,
-  py,
-  pt,
-  pr,
-  pb,
-  pl,
-  margin,
-  m,
-  mx,
-  my,
-  mt,
-  mr,
-  mb,
-  ml,
-  background,
-  border,
-  borderRadius,
-  shadow,
-  width,
-  height,
-  minWidth,
-  minHeight,
-  maxWidth,
-  maxHeight,
-  overflow,
-  position,
-  flex,
-  flexGrow,
-  flexShrink,
-  as: Component = "div",
-  style,
-  children,
-  ...rest
-}, ref) {
-  const { tokens } = useTheme();
-  const { breakpoint } = useBreakpoint();
-  const resolveSpacing = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
-  let gridTemplateColumns;
-  if (autoFit) {
-    gridTemplateColumns = `repeat(auto-fit, minmax(${autoFit}px, 1fr))`;
-  } else if (autoFill) {
-    gridTemplateColumns = `repeat(auto-fill, minmax(${autoFill}px, 1fr))`;
-  } else if (template) {
-    gridTemplateColumns = resolveResponsive(template, breakpoint);
-  } else if (columns !== void 0) {
-    const cols = resolveResponsive(columns, breakpoint);
-    gridTemplateColumns = cols ? `repeat(${cols}, 1fr)` : void 0;
-  }
-  const bgMap = {
-    base: tokens.colors.background.base,
-    surface: tokens.colors.background.surface,
-    elevated: tokens.colors.background.elevated,
-    overlay: tokens.colors.background.overlay
-  };
-  const resolveSize = (val) => {
-    if (val === void 0) return void 0;
-    if (typeof val === "number") return `${val}px`;
-    return val;
-  };
-  const paddingAll = resolveSpacing(padding ?? p);
-  const paddingXVal = resolveSpacing(px);
-  const paddingYVal = resolveSpacing(py);
-  const marginAll = resolveSpacing(margin ?? m);
-  const marginXVal = resolveSpacing(mx);
-  const marginYVal = resolveSpacing(my);
-  const resolvedGap = resolveSpacing(gap);
-  const resolvedRowGap = resolveSpacing(rowGap);
-  const resolvedColumnGap = resolveSpacing(columnGap);
-  const computedStyle = {
-    display: inline ? "inline-grid" : "grid",
-    gridTemplateColumns,
-    gridTemplateRows: rows,
-    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
-    ...resolvedRowGap !== void 0 ? { rowGap: resolvedRowGap } : {},
-    ...resolvedColumnGap !== void 0 ? { columnGap: resolvedColumnGap } : {},
-    alignItems: align,
-    justifyItems,
-    alignContent,
-    justifyContent,
-    // Padding
-    ...paddingAll ? { padding: paddingAll } : {},
-    ...paddingXVal ? { paddingLeft: paddingXVal, paddingRight: paddingXVal } : {},
-    ...paddingYVal ? { paddingTop: paddingYVal, paddingBottom: paddingYVal } : {},
-    ...resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {},
-    ...resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {},
-    ...resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {},
-    ...resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {},
-    // Margin
-    ...marginAll ? { margin: marginAll } : {},
-    ...marginXVal ? { marginLeft: marginXVal, marginRight: marginXVal } : {},
-    ...marginYVal ? { marginTop: marginYVal, marginBottom: marginYVal } : {},
-    ...resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {},
-    ...resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {},
-    ...resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {},
-    ...resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {},
-    // Visual
-    ...background ? { backgroundColor: bgMap[background] || background } : {},
-    ...border ? { border: border === true ? `1px solid ${tokens.colors.border.default}` : border } : {},
-    ...borderRadius ? { borderRadius: tokens.borderRadius[borderRadius] || borderRadius } : {},
-    ...shadow && shadow !== "glow" ? { boxShadow: tokens.shadows[shadow] || shadow } : {},
-    // Size
-    width: resolveSize(resolveResponsive(width, breakpoint)),
-    height: resolveSize(resolveResponsive(height, breakpoint)),
-    minWidth: resolveSize(minWidth),
-    minHeight: resolveSize(minHeight),
-    maxWidth: resolveSize(maxWidth),
-    maxHeight: resolveSize(maxHeight),
-    overflow,
-    position,
-    flex,
-    flexGrow,
-    flexShrink,
-    ...style
-  };
-  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+import { forwardRef, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/core/layout/Grid.tsx
+/**
+* @zendir/ui - Grid Layout Primitive
+*
+* CSS Grid container with responsive columns and auto-fit support.
+* Designed for operator dashboard layouts: telemetry grids, card layouts,
+* multi-panel mission control views.
+*
+* Astro UX Compliance:
+* - 4px grid spacing tokens
+* - Responsive column count for mobile → 4K mission control
+*
+* @example
+* ```tsx
+* // Fixed responsive columns
+* <Grid columns={[1, 2, 3]} gap="md">
+*   <TelemetryCard />
+*   <LinkBudgetCard />
+*   <SpacecraftCard />
+* </Grid>
+*
+* // Auto-fit: as many 300px-min columns as fit
+* <Grid autoFit={300} gap="md">
+*   {telemetryItems.map(item => <DataValue key={item.key} {...item} />)}
+* </Grid>
+*
+* // Template-based for complex layouts
+* <Grid template="1fr 2fr 1fr" rows="auto 1fr" gap="md">
+*   <SideNav />
+*   <MainContent />
+*   <DetailPanel />
+* </Grid>
+* ```
+*/
+var Grid = memo(forwardRef(function Grid({ columns, autoFit, autoFill, template, rows, gap, rowGap, columnGap, align, justifyItems, alignContent, justifyContent, inline = false, padding, p, px, py, pt, pr, pb, pl, margin, m, mx, my, mt, mr, mb, ml, background, border, borderRadius, shadow, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, position, flex, flexGrow, flexShrink, as: Component = "div", style, children, ...rest }, ref) {
+	const { tokens } = useTheme();
+	const { breakpoint } = useBreakpoint();
+	const resolveSpacing = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
+	let gridTemplateColumns;
+	if (autoFit) gridTemplateColumns = `repeat(auto-fit, minmax(${autoFit}px, 1fr))`;
+	else if (autoFill) gridTemplateColumns = `repeat(auto-fill, minmax(${autoFill}px, 1fr))`;
+	else if (template) gridTemplateColumns = resolveResponsive(template, breakpoint);
+	else if (columns !== void 0) {
+		const cols = resolveResponsive(columns, breakpoint);
+		gridTemplateColumns = cols ? `repeat(${cols}, 1fr)` : void 0;
+	}
+	const bgMap = {
+		base: tokens.colors.background.base,
+		surface: tokens.colors.background.surface,
+		elevated: tokens.colors.background.elevated,
+		overlay: tokens.colors.background.overlay
+	};
+	const resolveSize = (val) => {
+		if (val === void 0) return void 0;
+		if (typeof val === "number") return `${val}px`;
+		return val;
+	};
+	const paddingAll = resolveSpacing(padding ?? p);
+	const paddingXVal = resolveSpacing(px);
+	const paddingYVal = resolveSpacing(py);
+	const marginAll = resolveSpacing(margin ?? m);
+	const marginXVal = resolveSpacing(mx);
+	const marginYVal = resolveSpacing(my);
+	const resolvedGap = resolveSpacing(gap);
+	const resolvedRowGap = resolveSpacing(rowGap);
+	const resolvedColumnGap = resolveSpacing(columnGap);
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		style: {
+			display: inline ? "inline-grid" : "grid",
+			gridTemplateColumns,
+			gridTemplateRows: rows,
+			...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
+			...resolvedRowGap !== void 0 ? { rowGap: resolvedRowGap } : {},
+			...resolvedColumnGap !== void 0 ? { columnGap: resolvedColumnGap } : {},
+			alignItems: align,
+			justifyItems,
+			alignContent,
+			justifyContent,
+			...paddingAll ? { padding: paddingAll } : {},
+			...paddingXVal ? {
+				paddingLeft: paddingXVal,
+				paddingRight: paddingXVal
+			} : {},
+			...paddingYVal ? {
+				paddingTop: paddingYVal,
+				paddingBottom: paddingYVal
+			} : {},
+			...resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {},
+			...resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {},
+			...resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {},
+			...resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {},
+			...marginAll ? { margin: marginAll } : {},
+			...marginXVal ? {
+				marginLeft: marginXVal,
+				marginRight: marginXVal
+			} : {},
+			...marginYVal ? {
+				marginTop: marginYVal,
+				marginBottom: marginYVal
+			} : {},
+			...resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {},
+			...resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {},
+			...resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {},
+			...resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {},
+			...background ? { backgroundColor: bgMap[background] || background } : {},
+			...border ? { border: border === true ? `1px solid ${tokens.colors.border.default}` : border } : {},
+			...borderRadius ? { borderRadius: tokens.borderRadius[borderRadius] || borderRadius } : {},
+			...shadow && shadow !== "glow" ? { boxShadow: tokens.shadows[shadow] || shadow } : {},
+			width: resolveSize(resolveResponsive(width, breakpoint)),
+			height: resolveSize(resolveResponsive(height, breakpoint)),
+			minWidth: resolveSize(minWidth),
+			minHeight: resolveSize(minHeight),
+			maxWidth: resolveSize(maxWidth),
+			maxHeight: resolveSize(maxHeight),
+			overflow,
+			position,
+			flex,
+			flexGrow,
+			flexShrink,
+			...style
+		},
+		...rest,
+		children
+	});
 }));
-export {
-  Grid
-};
-//# sourceMappingURL=Grid.js.map
+//#endregion
+export { Grid, Grid as default };
+
+//# sourceMappingURL=Grid.js.map

package/dist/react/core/layout/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/react/core/layout/Grid.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Grid Layout Primitive\r\n * \r\n * CSS Grid container with responsive columns and auto-fit support.\r\n * Designed for operator dashboard layouts: telemetry grids, card layouts,\r\n * multi-panel mission control views.\r\n * \r\n * Astro UX Compliance:\r\n * - 4px grid spacing tokens\r\n * - Responsive column count for mobile → 4K mission control\r\n * \r\n * @example\r\n * ```tsx\r\n * // Fixed responsive columns\r\n * <Grid columns={[1, 2, 3]} gap=\"md\">\r\n *   <TelemetryCard />\r\n *   <LinkBudgetCard />\r\n *   <SpacecraftCard />\r\n * </Grid>\r\n * \r\n * // Auto-fit: as many 300px-min columns as fit\r\n * <Grid autoFit={300} gap=\"md\">\r\n *   {telemetryItems.map(item => <DataValue key={item.key} {...item} />)}\r\n * </Grid>\r\n * \r\n * // Template-based for complex layouts\r\n * <Grid template=\"1fr 2fr 1fr\" rows=\"auto 1fr\" gap=\"md\">\r\n *   <SideNav />\r\n *   <MainContent />\r\n *   <DetailPanel />\r\n * </Grid>\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { useBreakpoint } from './useBreakpoint';\r\nimport { resolveResponsiveSpacing, resolveResponsive } from './responsive';\r\nimport type { ResponsiveValue } from './useBreakpoint';\r\nimport type { SpacingToken } from './responsive';\r\nimport type { BoxProps } from './Box';\r\n\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\nexport interface GridProps extends Omit<BoxProps, 'display'> {\r\n  /** Number of equal columns (responsive) */\r\n  columns?: ResponsiveValue<number>;\r\n  /** Auto-fit: minimum column width in px. Creates `repeat(auto-fit, minmax(Npx, 1fr))` */\r\n  autoFit?: number;\r\n  /** Auto-fill: minimum column width in px. Creates `repeat(auto-fill, minmax(Npx, 1fr))` */\r\n  autoFill?: number;\r\n  /** Explicit grid-template-columns CSS value */\r\n  template?: ResponsiveValue<string>;\r\n  /** Explicit grid-template-rows CSS value */\r\n  rows?: string;\r\n  /** Gap between grid items */\r\n  gap?: ResponsiveValue<SpacingInput>;\r\n  /** Row gap (overrides gap for rows) */\r\n  rowGap?: ResponsiveValue<SpacingInput>;\r\n  /** Column gap (overrides gap for columns) */\r\n  columnGap?: ResponsiveValue<SpacingInput>;\r\n  /** Align items (cross-axis per cell) */\r\n  align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';\r\n  /** Justify items (main-axis per cell) */\r\n  justifyItems?: 'start' | 'end' | 'center' | 'stretch';\r\n  /** Align content (cross-axis for the grid as a whole) */\r\n  alignContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';\r\n  /** Justify content (main-axis for the grid as a whole) */\r\n  justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';\r\n  /** Make grid inline */\r\n  inline?: boolean;\r\n}\r\n\r\nexport const Grid = memo(forwardRef<HTMLDivElement, GridProps>(function Grid(\r\n  {\r\n    columns,\r\n    autoFit,\r\n    autoFill,\r\n    template,\r\n    rows,\r\n    gap,\r\n    rowGap,\r\n    columnGap,\r\n    align,\r\n    justifyItems,\r\n    alignContent,\r\n    justifyContent,\r\n    inline = false,\r\n    // Box props\r\n    padding, p, px, py, pt, pr, pb, pl,\r\n    margin, m, mx, my, mt, mr, mb, ml,\r\n    background,\r\n    border,\r\n    borderRadius,\r\n    shadow,\r\n    width,\r\n    height,\r\n    minWidth,\r\n    minHeight,\r\n    maxWidth,\r\n    maxHeight,\r\n    overflow,\r\n    position,\r\n    flex,\r\n    flexGrow,\r\n    flexShrink,\r\n    as: Component = 'div',\r\n    style,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref\r\n): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { breakpoint } = useBreakpoint();\r\n  \r\n  const resolveSpacing = (val: ResponsiveValue<SpacingInput> | undefined) =>\r\n    resolveResponsiveSpacing(val, breakpoint, tokens);\r\n  \r\n  // Determine grid-template-columns\r\n  let gridTemplateColumns: string | undefined;\r\n  \r\n  if (autoFit) {\r\n    gridTemplateColumns = `repeat(auto-fit, minmax(${autoFit}px, 1fr))`;\r\n  } else if (autoFill) {\r\n    gridTemplateColumns = `repeat(auto-fill, minmax(${autoFill}px, 1fr))`;\r\n  } else if (template) {\r\n    gridTemplateColumns = resolveResponsive(template, breakpoint);\r\n  } else if (columns !== undefined) {\r\n    const cols = resolveResponsive(columns, breakpoint);\r\n    gridTemplateColumns = cols ? `repeat(${cols}, 1fr)` : undefined;\r\n  }\r\n  \r\n  // Background resolution\r\n  const bgMap: Record<string, string> = {\r\n    base: tokens.colors.background.base,\r\n    surface: tokens.colors.background.surface,\r\n    elevated: tokens.colors.background.elevated,\r\n    overlay: tokens.colors.background.overlay,\r\n  };\r\n  \r\n  const resolveSize = (val: string | number | undefined): string | undefined => {\r\n    if (val === undefined) return undefined;\r\n    if (typeof val === 'number') return `${val}px`;\r\n    return val;\r\n  };\r\n  \r\n  // Resolve padding\r\n  const paddingAll = resolveSpacing(padding ?? p);\r\n  const paddingXVal = resolveSpacing(px);\r\n  const paddingYVal = resolveSpacing(py);\r\n  \r\n  // Resolve margin\r\n  const marginAll = resolveSpacing(margin ?? m);\r\n  const marginXVal = resolveSpacing(mx);\r\n  const marginYVal = resolveSpacing(my);\r\n  \r\n  // Resolve gap values — use conditional spreads to avoid setting\r\n  // rowGap/columnGap to undefined, which clears the gap shorthand\r\n  // in browsers (setting `style.rowGap = ''` removes the value\r\n  // that `style.gap` set for row-gap).\r\n  const resolvedGap = resolveSpacing(gap);\r\n  const resolvedRowGap = resolveSpacing(rowGap);\r\n  const resolvedColumnGap = resolveSpacing(columnGap);\r\n\r\n  const computedStyle: React.CSSProperties = {\r\n    display: inline ? 'inline-grid' : 'grid',\r\n    gridTemplateColumns,\r\n    gridTemplateRows: rows,\r\n    ...(resolvedGap !== undefined ? { gap: resolvedGap } : {}),\r\n    ...(resolvedRowGap !== undefined ? { rowGap: resolvedRowGap } : {}),\r\n    ...(resolvedColumnGap !== undefined ? { columnGap: resolvedColumnGap } : {}),\r\n    alignItems: align,\r\n    justifyItems,\r\n    alignContent,\r\n    justifyContent,\r\n    \r\n    // Padding\r\n    ...(paddingAll ? { padding: paddingAll } : {}),\r\n    ...(paddingXVal ? { paddingLeft: paddingXVal, paddingRight: paddingXVal } : {}),\r\n    ...(paddingYVal ? { paddingTop: paddingYVal, paddingBottom: paddingYVal } : {}),\r\n    ...(resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {}),\r\n    ...(resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {}),\r\n    ...(resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {}),\r\n    ...(resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {}),\r\n    \r\n    // Margin\r\n    ...(marginAll ? { margin: marginAll } : {}),\r\n    ...(marginXVal ? { marginLeft: marginXVal, marginRight: marginXVal } : {}),\r\n    ...(marginYVal ? { marginTop: marginYVal, marginBottom: marginYVal } : {}),\r\n    ...(resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {}),\r\n    ...(resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {}),\r\n    ...(resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {}),\r\n    ...(resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {}),\r\n    \r\n    // Visual\r\n    ...(background ? { backgroundColor: bgMap[background] || background } : {}),\r\n    ...(border ? { border: border === true ? `1px solid ${tokens.colors.border.default}` : border as string } : {}),\r\n    ...(borderRadius ? { borderRadius: (tokens.borderRadius as Record<string, string>)[borderRadius as string] || borderRadius } : {}),\r\n    ...(shadow && shadow !== 'glow' ? { boxShadow: (tokens.shadows as unknown as Record<string, string>)[shadow as string] || shadow } : {}),\r\n    \r\n    // Size\r\n    width: resolveSize(resolveResponsive(width, breakpoint)),\r\n    height: resolveSize(resolveResponsive(height, breakpoint)),\r\n    minWidth: resolveSize(minWidth),\r\n    minHeight: resolveSize(minHeight),\r\n    maxWidth: resolveSize(maxWidth),\r\n    maxHeight: resolveSize(maxHeight),\r\n    overflow,\r\n    position,\r\n    flex,\r\n    flexGrow,\r\n    flexShrink,\r\n    \r\n    ...style,\r\n  };\r\n  \r\n  return (\r\n    <Component ref={ref} style={computedStyle} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n}));\r\n\r\nexport default Grid;\r\n"],"names":["Grid"],"mappings":"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"}
+{"version":3,"file":"Grid.js","names":[],"sources":["../../../../src/react/core/layout/Grid.tsx"],"sourcesContent":["/**\n * @zendir/ui - Grid Layout Primitive\n *\n * CSS Grid container with responsive columns and auto-fit support.\n * Designed for operator dashboard layouts: telemetry grids, card layouts,\n * multi-panel mission control views.\n *\n * Astro UX Compliance:\n * - 4px grid spacing tokens\n * - Responsive column count for mobile → 4K mission control\n *\n * @example\n * ```tsx\n * // Fixed responsive columns\n * <Grid columns={[1, 2, 3]} gap=\"md\">\n *   <TelemetryCard />\n *   <LinkBudgetCard />\n *   <SpacecraftCard />\n * </Grid>\n *\n * // Auto-fit: as many 300px-min columns as fit\n * <Grid autoFit={300} gap=\"md\">\n *   {telemetryItems.map(item => <DataValue key={item.key} {...item} />)}\n * </Grid>\n *\n * // Template-based for complex layouts\n * <Grid template=\"1fr 2fr 1fr\" rows=\"auto 1fr\" gap=\"md\">\n *   <SideNav />\n *   <MainContent />\n *   <DetailPanel />\n * </Grid>\n * ```\n */\n\nimport React, { memo, forwardRef } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { resolveResponsiveSpacing, resolveResponsive } from \"./responsive\";\nimport type { ResponsiveValue } from \"./useBreakpoint\";\nimport type { SpacingToken } from \"./responsive\";\nimport type { BoxProps } from \"./Box\";\n\ntype SpacingInput = SpacingToken | string | number;\n\nexport interface GridProps extends Omit<BoxProps, \"display\"> {\n  /** Number of equal columns (responsive) */\n  columns?: ResponsiveValue<number>;\n  /** Auto-fit: minimum column width in px. Creates `repeat(auto-fit, minmax(Npx, 1fr))` */\n  autoFit?: number;\n  /** Auto-fill: minimum column width in px. Creates `repeat(auto-fill, minmax(Npx, 1fr))` */\n  autoFill?: number;\n  /** Explicit grid-template-columns CSS value */\n  template?: ResponsiveValue<string>;\n  /** Explicit grid-template-rows CSS value */\n  rows?: string;\n  /** Gap between grid items */\n  gap?: ResponsiveValue<SpacingInput>;\n  /** Row gap (overrides gap for rows) */\n  rowGap?: ResponsiveValue<SpacingInput>;\n  /** Column gap (overrides gap for columns) */\n  columnGap?: ResponsiveValue<SpacingInput>;\n  /** Align items (cross-axis per cell) */\n  align?: \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\n  /** Justify items (main-axis per cell) */\n  justifyItems?: \"start\" | \"end\" | \"center\" | \"stretch\";\n  /** Align content (cross-axis for the grid as a whole) */\n  alignContent?:\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"stretch\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /** Justify content (main-axis for the grid as a whole) */\n  justifyContent?:\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"stretch\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /** Make grid inline */\n  inline?: boolean;\n}\n\nexport const Grid = memo(\n  forwardRef<HTMLDivElement, GridProps>(function Grid(\n    {\n      columns,\n      autoFit,\n      autoFill,\n      template,\n      rows,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      justifyItems,\n      alignContent,\n      justifyContent,\n      inline = false,\n      // Box props\n      padding,\n      p,\n      px,\n      py,\n      pt,\n      pr,\n      pb,\n      pl,\n      margin,\n      m,\n      mx,\n      my,\n      mt,\n      mr,\n      mb,\n      ml,\n      background,\n      border,\n      borderRadius,\n      shadow,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      overflow,\n      position,\n      flex,\n      flexGrow,\n      flexShrink,\n      as: Component = \"div\",\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens } = useTheme();\n    const { breakpoint } = useBreakpoint();\n\n    const resolveSpacing = (val: ResponsiveValue<SpacingInput> | undefined) =>\n      resolveResponsiveSpacing(val, breakpoint, tokens);\n\n    // Determine grid-template-columns\n    let gridTemplateColumns: string | undefined;\n\n    if (autoFit) {\n      gridTemplateColumns = `repeat(auto-fit, minmax(${autoFit}px, 1fr))`;\n    } else if (autoFill) {\n      gridTemplateColumns = `repeat(auto-fill, minmax(${autoFill}px, 1fr))`;\n    } else if (template) {\n      gridTemplateColumns = resolveResponsive(template, breakpoint);\n    } else if (columns !== undefined) {\n      const cols = resolveResponsive(columns, breakpoint);\n      gridTemplateColumns = cols ? `repeat(${cols}, 1fr)` : undefined;\n    }\n\n    // Background resolution\n    const bgMap: Record<string, string> = {\n      base: tokens.colors.background.base,\n      surface: tokens.colors.background.surface,\n      elevated: tokens.colors.background.elevated,\n      overlay: tokens.colors.background.overlay,\n    };\n\n    const resolveSize = (\n      val: string | number | undefined,\n    ): string | undefined => {\n      if (val === undefined) return undefined;\n      if (typeof val === \"number\") return `${val}px`;\n      return val;\n    };\n\n    // Resolve padding\n    const paddingAll = resolveSpacing(padding ?? p);\n    const paddingXVal = resolveSpacing(px);\n    const paddingYVal = resolveSpacing(py);\n\n    // Resolve margin\n    const marginAll = resolveSpacing(margin ?? m);\n    const marginXVal = resolveSpacing(mx);\n    const marginYVal = resolveSpacing(my);\n\n    // Resolve gap values — use conditional spreads to avoid setting\n    // rowGap/columnGap to undefined, which clears the gap shorthand\n    // in browsers (setting `style.rowGap = ''` removes the value\n    // that `style.gap` set for row-gap).\n    const resolvedGap = resolveSpacing(gap);\n    const resolvedRowGap = resolveSpacing(rowGap);\n    const resolvedColumnGap = resolveSpacing(columnGap);\n\n    const computedStyle: React.CSSProperties = {\n      display: inline ? \"inline-grid\" : \"grid\",\n      gridTemplateColumns,\n      gridTemplateRows: rows,\n      ...(resolvedGap !== undefined ? { gap: resolvedGap } : {}),\n      ...(resolvedRowGap !== undefined ? { rowGap: resolvedRowGap } : {}),\n      ...(resolvedColumnGap !== undefined\n        ? { columnGap: resolvedColumnGap }\n        : {}),\n      alignItems: align,\n      justifyItems,\n      alignContent,\n      justifyContent,\n\n      // Padding\n      ...(paddingAll ? { padding: paddingAll } : {}),\n      ...(paddingXVal\n        ? { paddingLeft: paddingXVal, paddingRight: paddingXVal }\n        : {}),\n      ...(paddingYVal\n        ? { paddingTop: paddingYVal, paddingBottom: paddingYVal }\n        : {}),\n      ...(resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {}),\n      ...(resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {}),\n      ...(resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {}),\n      ...(resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {}),\n\n      // Margin\n      ...(marginAll ? { margin: marginAll } : {}),\n      ...(marginXVal\n        ? { marginLeft: marginXVal, marginRight: marginXVal }\n        : {}),\n      ...(marginYVal\n        ? { marginTop: marginYVal, marginBottom: marginYVal }\n        : {}),\n      ...(resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {}),\n      ...(resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {}),\n      ...(resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {}),\n      ...(resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {}),\n\n      // Visual\n      ...(background\n        ? { backgroundColor: bgMap[background] || background }\n        : {}),\n      ...(border\n        ? {\n            border:\n              border === true\n                ? `1px solid ${tokens.colors.border.default}`\n                : (border as string),\n          }\n        : {}),\n      ...(borderRadius\n        ? {\n            borderRadius:\n              (tokens.borderRadius as Record<string, string>)[\n                borderRadius as string\n              ] || borderRadius,\n          }\n        : {}),\n      ...(shadow && shadow !== \"glow\"\n        ? {\n            boxShadow:\n              (tokens.shadows as unknown as Record<string, string>)[\n                shadow as string\n              ] || shadow,\n          }\n        : {}),\n\n      // Size\n      width: resolveSize(resolveResponsive(width, breakpoint)),\n      height: resolveSize(resolveResponsive(height, breakpoint)),\n      minWidth: resolveSize(minWidth),\n      minHeight: resolveSize(minHeight),\n      maxWidth: resolveSize(maxWidth),\n      maxHeight: resolveSize(maxHeight),\n      overflow,\n      position,\n      flex,\n      flexGrow,\n      flexShrink,\n\n      ...style,\n    };\n\n    return (\n      <Component ref={ref} style={computedStyle} {...rest}>\n        {children}\n      </Component>\n    );\n  }),\n);\n\nexport default Grid;\n"],"mappings":"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"}

package/dist/react/core/layout/Spacer.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface SpacerProps {
     /** Fixed size instead of flexible (spacing token compatible, number → px) */
     size?: string | number;

package/dist/react/core/layout/Spacer.js

@@ -1,31 +1,38 @@
-import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
-const Spacer = memo(function Spacer2({ size }) {
-  const resolvedSize = typeof size === "number" ? `${size}px` : size;
-  if (resolvedSize) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": "true",
-        style: {
-          flexShrink: 0,
-          width: resolvedSize,
-          height: resolvedSize
-        }
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": "true",
-      style: {
-        flex: "1 1 0%"
-      }
-    }
-  );
+import { jsx } from "react/jsx-runtime";
+//#region src/react/core/layout/Spacer.tsx
+/**
+* @zendir/ui - Spacer Layout Primitive
+*
+* Flexible space filler for Flex and Stack layouts.
+* Expands to fill available space, pushing siblings apart.
+*
+* @example
+* ```tsx
+* <Flex align="center" gap="sm">
+*   <H3>Telemetry</H3>
+*   <Spacer />
+*   <Button variant="secondary" size="small">Refresh</Button>
+*   <Button size="small">Export</Button>
+* </Flex>
+* ```
+*/
+var Spacer = memo(function Spacer({ size }) {
+	const resolvedSize = typeof size === "number" ? `${size}px` : size;
+	if (resolvedSize) return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: {
+			flexShrink: 0,
+			width: resolvedSize,
+			height: resolvedSize
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		style: { flex: "1 1 0%" }
+	});
 });
-export {
-  Spacer
-};
-//# sourceMappingURL=Spacer.js.map
+//#endregion
+export { Spacer, Spacer as default };
+
+//# sourceMappingURL=Spacer.js.map

package/dist/react/core/layout/Spacer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacer.js","sources":["../../../../src/react/core/layout/Spacer.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Spacer Layout Primitive\r\n * \r\n * Flexible space filler for Flex and Stack layouts.\r\n * Expands to fill available space, pushing siblings apart.\r\n * \r\n * @example\r\n * ```tsx\r\n * <Flex align=\"center\" gap=\"sm\">\r\n *   <H3>Telemetry</H3>\r\n *   <Spacer />\r\n *   <Button variant=\"secondary\" size=\"small\">Refresh</Button>\r\n *   <Button size=\"small\">Export</Button>\r\n * </Flex>\r\n * ```\r\n */\r\n\r\nimport React, { memo } from 'react';\r\n\r\nexport interface SpacerProps {\r\n  /** Fixed size instead of flexible (spacing token compatible, number → px) */\r\n  size?: string | number;\r\n}\r\n\r\nexport const Spacer = memo(function Spacer({ size }: SpacerProps): React.ReactElement {\r\n  const resolvedSize = typeof size === 'number' ? `${size}px` : size;\r\n  \r\n  if (resolvedSize) {\r\n    return (\r\n      <div\r\n        aria-hidden=\"true\"\r\n        style={{\r\n          flexShrink: 0,\r\n          width: resolvedSize,\r\n          height: resolvedSize,\r\n        }}\r\n      />\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <div\r\n      aria-hidden=\"true\"\r\n      style={{\r\n        flex: '1 1 0%',\r\n      }}\r\n    />\r\n  );\r\n});\r\n\r\nexport default Spacer;\r\n"],"names":["Spacer"],"mappings":";;AAwBO,MAAM,SAAS,KAAK,SAASA,QAAO,EAAE,QAAyC;AACpF,QAAM,eAAe,OAAO,SAAS,WAAW,GAAG,IAAI,OAAO;AAE9D,MAAI,cAAc;AAChB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,EAGN;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAO;AAAA,QACL,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"Spacer.js","names":[],"sources":["../../../../src/react/core/layout/Spacer.tsx"],"sourcesContent":["/**\n * @zendir/ui - Spacer Layout Primitive\n *\n * Flexible space filler for Flex and Stack layouts.\n * Expands to fill available space, pushing siblings apart.\n *\n * @example\n * ```tsx\n * <Flex align=\"center\" gap=\"sm\">\n *   <H3>Telemetry</H3>\n *   <Spacer />\n *   <Button variant=\"secondary\" size=\"small\">Refresh</Button>\n *   <Button size=\"small\">Export</Button>\n * </Flex>\n * ```\n */\n\nimport React, { memo } from \"react\";\n\nexport interface SpacerProps {\n  /** Fixed size instead of flexible (spacing token compatible, number → px) */\n  size?: string | number;\n}\n\nexport const Spacer = memo(function Spacer({\n  size,\n}: SpacerProps): React.ReactElement {\n  const resolvedSize = typeof size === \"number\" ? `${size}px` : size;\n\n  if (resolvedSize) {\n    return (\n      <div\n        aria-hidden=\"true\"\n        style={{\n          flexShrink: 0,\n          width: resolvedSize,\n          height: resolvedSize,\n        }}\n      />\n    );\n  }\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      style={{\n        flex: \"1 1 0%\",\n      }}\n    />\n  );\n});\n\nexport default Spacer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,SAAS,KAAK,SAAS,OAAO,EACzC,QACkC;CAClC,MAAM,eAAe,OAAO,SAAS,WAAW,GAAG,KAAK,MAAM;CAE9D,IAAI,cACF,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO;GACL,YAAY;GACZ,OAAO;GACP,QAAQ;EACV;CACD,CAAA;CAIL,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,OAAO,EACL,MAAM,SACR;CACD,CAAA;AAEL,CAAC"}

package/dist/react/core/layout/Stack.d.ts

@@ -1,21 +1,20 @@
 import { default as React } from 'react';
 import { ResponsiveValue } from './useBreakpoint';
 import { SpacingToken } from './responsive';
-
 type SpacingInput = SpacingToken | string | number;
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Element type to render */
     as?: React.ElementType;
     /** Stack direction */
-    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
     /** Space between children (spacing token, px, or CSS string) */
     spacing?: ResponsiveValue<SpacingInput>;
     /** Align items (cross-axis) */
-    align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    align?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
     /** Justify content (main-axis) */
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
     /** Flex wrap */
-    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
     /** Full width */
     fullWidth?: boolean;
     /** Full height */