@zendir/ui 0.1.0

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

@@ -0,0 +1,128 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const Flex = memo(forwardRef(function Flex2({
+  direction,
+  wrap,
+  gap,
+  rowGap,
+  columnGap,
+  align,
+  justify,
+  column = false,
+  center = false,
+  inline = false,
+  style,
+  children,
+  // Extract BoxProps we handle ourselves
+  padding,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  margin,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  background,
+  border,
+  borderRadius,
+  shadow,
+  display: _display,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  overflow,
+  position,
+  flex: flexProp,
+  flexGrow,
+  flexShrink,
+  as: Component = "div",
+  ...rest
+}, ref) {
+  const { tokens } = useTheme();
+  const { breakpoint } = useBreakpoint();
+  const resolveSpacing = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
+  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 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 resolvedDirection = column ? "column" : resolveResponsive(direction, breakpoint) ?? "row";
+  const resolvedGap = resolveSpacing(gap);
+  const resolvedRowGap = resolveSpacing(rowGap);
+  const resolvedColumnGap = resolveSpacing(columnGap);
+  const computedStyle = {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: resolvedDirection,
+    flexWrap: resolveResponsive(wrap, breakpoint),
+    ...resolvedGap !== void 0 ? { gap: resolvedGap } : {},
+    ...resolvedRowGap !== void 0 ? { rowGap: resolvedRowGap } : {},
+    ...resolvedColumnGap !== void 0 ? { columnGap: resolvedColumnGap } : {},
+    alignItems: center ? "center" : resolveResponsive(align, breakpoint),
+    justifyContent: center ? "center" : resolveResponsive(justify, breakpoint),
+    // 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: flexProp,
+    flexGrow,
+    flexShrink,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+}));
+export {
+  Flex
+};
+//# sourceMappingURL=Flex.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../../src/react/core/layout/Flex.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Flex Layout Primitive\r\n * \r\n * Flexbox container with theme-aware spacing and responsive direction/alignment.\r\n * The workhorse layout component for horizontal and vertical arrangements.\r\n * \r\n * Astro UX Compliance:\r\n * - 4px grid spacing tokens\r\n * - Responsive gap for mobile → mission control\r\n * \r\n * @example\r\n * ```tsx\r\n * // Horizontal row with centered items\r\n * <Flex gap=\"md\" align=\"center\">\r\n *   <StatusIndicator status=\"normal\" />\r\n *   <Body1>All Systems Nominal</Body1>\r\n * </Flex>\r\n * \r\n * // Vertical column, responsive gap\r\n * <Flex direction=\"column\" gap={['sm', 'md', 'lg']}>\r\n *   <TelemetryCard />\r\n *   <LinkBudgetCard />\r\n * </Flex>\r\n * \r\n * // Space between items\r\n * <Flex justify=\"space-between\" align=\"center\">\r\n *   <H3>Telemetry</H3>\r\n *   <Button variant=\"secondary\">Refresh</Button>\r\n * </Flex>\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 FlexProps extends BoxProps {\r\n  /** Flex direction */\r\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;\r\n  /** Flex wrap */\r\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;\r\n  /** Gap between children (spacing token, px number, or CSS string) */\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) */\r\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'>;\r\n  /** Justify content (main-axis) */\r\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;\r\n  /** Shorthand: set both direction=\"column\" */\r\n  column?: boolean;\r\n  /** Shorthand: center both axes */\r\n  center?: boolean;\r\n  /** Make flex container inline */\r\n  inline?: boolean;\r\n}\r\n\r\nexport const Flex = memo(forwardRef<HTMLDivElement, FlexProps>(function Flex(\r\n  {\r\n    direction,\r\n    wrap,\r\n    gap,\r\n    rowGap,\r\n    columnGap,\r\n    align,\r\n    justify,\r\n    column = false,\r\n    center = false,\r\n    inline = false,\r\n    style,\r\n    children,\r\n    // Extract BoxProps we handle ourselves\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    display: _display,\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: flexProp,\r\n    flexGrow,\r\n    flexShrink,\r\n    as: Component = 'div',\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  // 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  // Background color 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  const resolvedDirection = column\r\n    ? 'column'\r\n    : resolveResponsive(direction, breakpoint) ?? 'row';\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-flex' : 'flex',\r\n    flexDirection: resolvedDirection,\r\n    flexWrap: resolveResponsive(wrap, breakpoint),\r\n    ...(resolvedGap !== undefined ? { gap: resolvedGap } : {}),\r\n    ...(resolvedRowGap !== undefined ? { rowGap: resolvedRowGap } : {}),\r\n    ...(resolvedColumnGap !== undefined ? { columnGap: resolvedColumnGap } : {}),\r\n    alignItems: center\r\n      ? 'center'\r\n      : resolveResponsive(align, breakpoint),\r\n    justifyContent: center\r\n      ? 'center'\r\n      : resolveResponsive(justify, breakpoint),\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: flexProp,\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 Flex;\r\n"],"names":["Flex"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+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'> {
+    /** Number of equal columns (responsive) */
+    columns?: ResponsiveValue<number>;
+    /** Auto-fit: minimum column width in px. Creates `repeat(auto-fit, minmax(Npx, 1fr))` */
+    autoFit?: number;
+    /** Auto-fill: minimum column width in px. Creates `repeat(auto-fill, minmax(Npx, 1fr))` */
+    autoFill?: number;
+    /** Explicit grid-template-columns CSS value */
+    template?: ResponsiveValue<string>;
+    /** Explicit grid-template-rows CSS value */
+    rows?: string;
+    /** Gap between grid items */
+    gap?: ResponsiveValue<SpacingInput>;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: ResponsiveValue<SpacingInput>;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: ResponsiveValue<SpacingInput>;
+    /** Align items (cross-axis per cell) */
+    align?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    /** Justify items (main-axis per cell) */
+    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';
+    /** Justify content (main-axis for the grid as a whole) */
+    justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Make grid inline */
+    inline?: boolean;
+}
+export declare const Grid: React.MemoExoticComponent<React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>>;
+export default Grid;

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

@@ -0,0 +1,142 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
+import { useTheme } from "../../theme/ThemeProvider.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 });
+}));
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface SpacerProps {
+    /** Fixed size instead of flexible (spacing token compatible, number → px) */
+    size?: string | number;
+}
+export declare const Spacer: React.NamedExoticComponent<SpacerProps>;
+export default Spacer;

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

@@ -0,0 +1,31 @@
+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%"
+      }
+    }
+  );
+});
+export {
+  Spacer
+};
+//# sourceMappingURL=Spacer.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,54 @@
+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'>;
+    /** Space between children (spacing token, px, or CSS string) */
+    spacing?: ResponsiveValue<SpacingInput>;
+    /** Align items (cross-axis) */
+    align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+    /** Justify content (main-axis) */
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    /** Flex wrap */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    /** Full width */
+    fullWidth?: boolean;
+    /** Full height */
+    fullHeight?: boolean;
+    /** Divider between items — renders a themed line */
+    divider?: boolean;
+    /** Children */
+    children?: React.ReactNode;
+}
+export declare const Stack: React.MemoExoticComponent<React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>>;
+/**
+ * Horizontal Stack — `<Stack direction="row">` shorthand.
+ *
+ * @example
+ * ```tsx
+ * <HStack spacing="sm" align="center">
+ *   <Icon name="satellite" />
+ *   <Body1>SAT-1</Body1>
+ *   <Badge status="normal">Nominal</Badge>
+ * </HStack>
+ * ```
+ */
+export declare const HStack: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React.RefAttributes<HTMLDivElement>>>;
+/**
+ * Vertical Stack — `<Stack direction="column">` shorthand.
+ *
+ * @example
+ * ```tsx
+ * <VStack spacing="md">
+ *   <TelemetryCard />
+ *   <LinkBudgetCard />
+ * </VStack>
+ * ```
+ */
+export declare const VStack: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<StackProps, "direction"> & React.RefAttributes<HTMLDivElement>>>;
+export default Stack;

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

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, forwardRef } from "react";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { resolveResponsiveSpacing } from "./responsive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const Stack = memo(forwardRef(function Stack2({
+  as: Component = "div",
+  direction = "column",
+  spacing = "md",
+  align,
+  justify,
+  wrap,
+  fullWidth = false,
+  fullHeight = false,
+  divider = false,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const { tokens } = useTheme();
+  const { breakpoint } = useBreakpoint();
+  const resolvedSpacing = resolveResponsiveSpacing(spacing, breakpoint, tokens);
+  const resolvedDirection = Array.isArray(direction) ? direction[Math.min(["base", "sm", "md", "lg", "xl", "xxl"].indexOf(breakpoint), direction.length - 1)] ?? direction[direction.length - 1] : direction;
+  const isVertical = resolvedDirection === "column" || resolvedDirection === "column-reverse";
+  const computedStyle = {
+    display: "flex",
+    flexDirection: resolvedDirection,
+    ...divider || !resolvedSpacing ? {} : { gap: resolvedSpacing },
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap,
+    ...fullWidth ? { width: "100%" } : {},
+    ...fullHeight ? { height: "100%" } : {},
+    ...style
+  };
+  if (divider) {
+    const items = React.Children.toArray(children).filter(Boolean);
+    const dividerStyle = isVertical ? {
+      width: "100%",
+      height: "1px",
+      backgroundColor: tokens.colors.border.muted,
+      flexShrink: 0,
+      margin: `${resolvedSpacing} 0`
+    } : {
+      height: "100%",
+      width: "1px",
+      backgroundColor: tokens.colors.border.muted,
+      flexShrink: 0,
+      alignSelf: "stretch",
+      margin: `0 ${resolvedSpacing}`
+    };
+    return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children: items.map((child, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      child,
+      index < items.length - 1 && /* @__PURE__ */ jsx("div", { style: dividerStyle, "aria-hidden": "true" })
+    ] }, index)) });
+  }
+  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+}));
+const HStack = memo(forwardRef(
+  function HStack2(props, ref) {
+    return /* @__PURE__ */ jsx(Stack, { ref, direction: "row", ...props });
+  }
+));
+const VStack = memo(forwardRef(
+  function VStack2(props, ref) {
+    return /* @__PURE__ */ jsx(Stack, { ref, direction: "column", ...props });
+  }
+));
+export {
+  HStack,
+  Stack,
+  VStack
+};
+//# sourceMappingURL=Stack.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sources":["../../../../src/react/core/layout/Stack.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Stack Layout Primitives\r\n * \r\n * Consistent spacing stacks — the most common layout pattern in operator dashboards.\r\n * Stack, HStack, and VStack provide directional flex with uniform gaps.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Vertical stack (default)\r\n * <Stack spacing=\"md\">\r\n *   <TelemetryCard />\r\n *   <LinkBudgetCard />\r\n *   <SpacecraftCard />\r\n * </Stack>\r\n * \r\n * // Horizontal stack\r\n * <HStack spacing=\"sm\" align=\"center\">\r\n *   <StatusIndicator status=\"normal\" />\r\n *   <Body1>Connected</Body1>\r\n * </HStack>\r\n * \r\n * // Responsive spacing\r\n * <VStack spacing={['sm', 'md', 'lg']}>\r\n *   <Content />\r\n * </VStack>\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 } from './responsive';\r\nimport type { ResponsiveValue } from './useBreakpoint';\r\nimport type { SpacingToken } from './responsive';\r\n\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  /** Stack direction */\r\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;\r\n  /** Space between children (spacing token, px, or CSS string) */\r\n  spacing?: ResponsiveValue<SpacingInput>;\r\n  /** Align items (cross-axis) */\r\n  align?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';\r\n  /** Justify content (main-axis) */\r\n  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';\r\n  /** Flex wrap */\r\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';\r\n  /** Full width */\r\n  fullWidth?: boolean;\r\n  /** Full height */\r\n  fullHeight?: boolean;\r\n  /** Divider between items — renders a themed line */\r\n  divider?: boolean;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Stack = memo(forwardRef<HTMLDivElement, StackProps>(function Stack(\r\n  {\r\n    as: Component = 'div',\r\n    direction = 'column',\r\n    spacing = 'md',\r\n    align,\r\n    justify,\r\n    wrap,\r\n    fullWidth = false,\r\n    fullHeight = false,\r\n    divider = false,\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 resolvedSpacing = resolveResponsiveSpacing(spacing, breakpoint, tokens);\r\n  const resolvedDirection = Array.isArray(direction)\r\n    ? (direction[Math.min(['base', 'sm', 'md', 'lg', 'xl', 'xxl'].indexOf(breakpoint), direction.length - 1)] ?? direction[direction.length - 1])\r\n    : direction;\r\n  const isVertical = resolvedDirection === 'column' || resolvedDirection === 'column-reverse';\r\n  \r\n  const computedStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: resolvedDirection as 'row' | 'column' | 'row-reverse' | 'column-reverse',\r\n    ...(divider || !resolvedSpacing ? {} : { gap: resolvedSpacing }),\r\n    alignItems: align,\r\n    justifyContent: justify,\r\n    flexWrap: wrap,\r\n    ...(fullWidth ? { width: '100%' } : {}),\r\n    ...(fullHeight ? { height: '100%' } : {}),\r\n    ...style,\r\n  };\r\n  \r\n  // If divider is enabled, interleave divider elements\r\n  if (divider) {\r\n    const items = React.Children.toArray(children).filter(Boolean);\r\n    const dividerStyle: React.CSSProperties = isVertical\r\n      ? {\r\n          width: '100%',\r\n          height: '1px',\r\n          backgroundColor: tokens.colors.border.muted,\r\n          flexShrink: 0,\r\n          margin: `${resolvedSpacing} 0`,\r\n        }\r\n      : {\r\n          height: '100%',\r\n          width: '1px',\r\n          backgroundColor: tokens.colors.border.muted,\r\n          flexShrink: 0,\r\n          alignSelf: 'stretch',\r\n          margin: `0 ${resolvedSpacing}`,\r\n        };\r\n    \r\n    return (\r\n      <Component ref={ref} style={computedStyle} {...rest}>\r\n        {items.map((child, index) => (\r\n          <React.Fragment key={index}>\r\n            {child}\r\n            {index < items.length - 1 && <div style={dividerStyle} aria-hidden=\"true\" />}\r\n          </React.Fragment>\r\n        ))}\r\n      </Component>\r\n    );\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\n/**\r\n * Horizontal Stack — `<Stack direction=\"row\">` shorthand.\r\n * \r\n * @example\r\n * ```tsx\r\n * <HStack spacing=\"sm\" align=\"center\">\r\n *   <Icon name=\"satellite\" />\r\n *   <Body1>SAT-1</Body1>\r\n *   <Badge status=\"normal\">Nominal</Badge>\r\n * </HStack>\r\n * ```\r\n */\r\nexport const HStack = memo(forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(\r\n  function HStack(props, ref) {\r\n    return <Stack ref={ref} direction=\"row\" {...props} />;\r\n  }\r\n));\r\n\r\n/**\r\n * Vertical Stack — `<Stack direction=\"column\">` shorthand.\r\n * \r\n * @example\r\n * ```tsx\r\n * <VStack spacing=\"md\">\r\n *   <TelemetryCard />\r\n *   <LinkBudgetCard />\r\n * </VStack>\r\n * ```\r\n */\r\nexport const VStack = memo(forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(\r\n  function VStack(props, ref) {\r\n    return <Stack ref={ref} direction=\"column\" {...props} />;\r\n  }\r\n));\r\n\r\nexport default Stack;\r\n"],"names":["Stack","HStack","VStack"],"mappings":";;;;;AA4DO,MAAM,QAAQ,KAAK,WAAuC,SAASA,OACxE;AAAA,EACE,IAAI,YAAY;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACoB;AACpB,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,QAAM,EAAE,WAAA,IAAe,cAAA;AAEvB,QAAM,kBAAkB,yBAAyB,SAAS,YAAY,MAAM;AAC5E,QAAM,oBAAoB,MAAM,QAAQ,SAAS,IAC5C,UAAU,KAAK,IAAI,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,UAAU,SAAS,CAAC,CAAC,KAAK,UAAU,UAAU,SAAS,CAAC,IACzI;AACJ,QAAM,aAAa,sBAAsB,YAAY,sBAAsB;AAE3E,QAAM,gBAAqC;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,GAAI,WAAW,CAAC,kBAAkB,CAAA,IAAK,EAAE,KAAK,gBAAA;AAAA,IAC9C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,GAAI,YAAY,EAAE,OAAO,OAAA,IAAW,CAAA;AAAA,IACpC,GAAI,aAAa,EAAE,QAAQ,OAAA,IAAW,CAAA;AAAA,IACtC,GAAG;AAAA,EAAA;AAIL,MAAI,SAAS;AACX,UAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,OAAO;AAC7D,UAAM,eAAoC,aACtC;AAAA,MACE,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB,OAAO,OAAO,OAAO;AAAA,MACtC,YAAY;AAAA,MACZ,QAAQ,GAAG,eAAe;AAAA,IAAA,IAE5B;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,iBAAiB,OAAO,OAAO,OAAO;AAAA,MACtC,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,QAAQ,KAAK,eAAe;AAAA,IAAA;AAGlC,WACE,oBAAC,WAAA,EAAU,KAAU,OAAO,eAAgB,GAAG,MAC5C,UAAA,MAAM,IAAI,CAAC,OAAO,UACjB,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,MAAA;AAAA,MACA,QAAQ,MAAM,SAAS,yBAAM,OAAA,EAAI,OAAO,cAAc,eAAY,OAAA,CAAO;AAAA,IAAA,KAFvD,KAGrB,CACD,GACH;AAAA,EAEJ;AAEA,6BACG,WAAA,EAAU,KAAU,OAAO,eAAgB,GAAG,MAC5C,UACH;AAEJ,CAAC,CAAC;AAcK,MAAM,SAAS,KAAK;AAAA,EACzB,SAASC,QAAO,OAAO,KAAK;AAC1B,+BAAQ,OAAA,EAAM,KAAU,WAAU,OAAO,GAAG,OAAO;AAAA,EACrD;AACF,CAAC;AAaM,MAAM,SAAS,KAAK;AAAA,EACzB,SAASC,QAAO,OAAO,KAAK;AAC1B,+BAAQ,OAAA,EAAM,KAAU,WAAU,UAAU,GAAG,OAAO;AAAA,EACxD;AACF,CAAC;"}

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

@@ -0,0 +1,38 @@
+/**
+ * @zendir/ui - Layout Primitives
+ *
+ * Foundation layout components following Astro UX Design System spacing tokens.
+ * Inspired by Apple's precision layout and Google Material's systematic spacing,
+ * built for mission-critical space operations dashboards.
+ *
+ * Components:
+ * - Box: Base layout container with theme-aware padding, margin, and styling
+ * - Flex: Flexbox layout with gap, alignment, and wrapping
+ * - Grid: CSS Grid with responsive columns and auto-fit
+ * - Stack: Vertical or horizontal stack with consistent spacing
+ * - Center: Centers content horizontally and vertically
+ * - Spacer: Flexible space filler for Flex/Stack layouts
+ * - Divider: Visual separator line
+ *
+ * All components support responsive props via array syntax:
+ * - `columns={[1, 2, 3]}` → 1 col mobile, 2 col tablet, 3 col desktop
+ * - `gap={['sm', 'md', 'lg']}` → sm mobile, md tablet, lg desktop
+ */
+export { Box } from './Box';
+export type { BoxProps } from './Box';
+export { Flex } from './Flex';
+export type { FlexProps } from './Flex';
+export { Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { Stack, HStack, VStack } from './Stack';
+export type { StackProps } from './Stack';
+export { Center } from './Center';
+export type { CenterProps } from './Center';
+export { Spacer } from './Spacer';
+export type { SpacerProps } from './Spacer';
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { useBreakpoint, BREAKPOINTS } from './useBreakpoint';
+export type { Breakpoint, ResponsiveValue } from './useBreakpoint';
+export { resolveResponsive, resolveSpacing } from './responsive';
+export type { SpacingToken } from './responsive';

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

@@ -0,0 +1,23 @@
+import { ThemeTokens } from '../../theme';
+import { Breakpoint, ResponsiveValue } from './useBreakpoint';
+
+/** Spacing token names matching ThemeTokens.spacing */
+export type SpacingToken = 'xxs' | 'xs' | 'sm' | 'smd' | 'md' | 'mdl' | 'lg' | 'xl' | 'xxl';
+/** Value that can be a spacing token, a CSS string, or a number (px) */
+type SpacingInput = SpacingToken | string | number;
+/**
+ * Resolve a spacing value to a CSS string.
+ * - SpacingToken ('xs', 'sm', etc.) → looks up token value
+ * - number → converts to px string
+ * - string → passes through (e.g., '1rem', '50%')
+ */
+export declare function resolveSpacing(value: SpacingInput | undefined, tokens: ThemeTokens): string | undefined;
+/**
+ * Resolve a responsive spacing value at the current breakpoint.
+ */
+export declare function resolveResponsiveSpacing(value: ResponsiveValue<SpacingInput> | undefined, breakpoint: Breakpoint, tokens: ThemeTokens): string | undefined;
+/**
+ * Resolve a responsive value (non-spacing) at the current breakpoint.
+ */
+export declare function resolveResponsive<T>(value: ResponsiveValue<T> | undefined, breakpoint: Breakpoint): T | undefined;
+export {};

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

@@ -0,0 +1,26 @@
+import { resolveResponsiveValue } from "./useBreakpoint.js";
+function resolveSpacing(value, tokens) {
+  if (value === void 0 || value === null) return void 0;
+  if (typeof value === "string" && value in tokens.spacing) {
+    return tokens.spacing[value];
+  }
+  if (typeof value === "number") {
+    return `${value}px`;
+  }
+  return value;
+}
+function resolveResponsiveSpacing(value, breakpoint, tokens) {
+  if (value === void 0 || value === null) return void 0;
+  const resolved = Array.isArray(value) ? resolveResponsiveValue(value, breakpoint) : value;
+  return resolveSpacing(resolved, tokens);
+}
+function resolveResponsive(value, breakpoint) {
+  if (value === void 0 || value === null) return void 0;
+  return Array.isArray(value) ? resolveResponsiveValue(value, breakpoint) : value;
+}
+export {
+  resolveResponsive,
+  resolveResponsiveSpacing,
+  resolveSpacing
+};
+//# sourceMappingURL=responsive.js.map