@zendir/ui 0.5.0 → 0.6.1

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

@@ -1,126 +1,122 @@
-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 Box = memo(forwardRef(function Box2({
-  as: Component = "div",
-  padding,
-  p,
-  px,
-  py,
-  pt,
-  pr,
-  pb,
-  pl,
-  margin,
-  m,
-  mx,
-  my,
-  mt,
-  mr,
-  mb,
-  ml,
-  background,
-  border,
-  borderRadius,
-  shadow,
-  display,
-  width,
-  height,
-  minWidth,
-  minHeight,
-  maxWidth,
-  maxHeight,
-  overflow,
-  position,
-  flex,
-  flexGrow,
-  flexShrink,
-  style,
-  children,
-  ...rest
-}, ref) {
-  const { tokens } = useTheme();
-  const { breakpoint } = useBreakpoint();
-  const resolve = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
-  const paddingAll = resolve(padding ?? p);
-  const paddingX = resolve(px);
-  const paddingY = resolve(py);
-  const marginAll = resolve(margin ?? m);
-  const marginX = resolve(mx);
-  const marginY = resolve(my);
-  const resolveBackground = (bg) => {
-    if (!bg) return void 0;
-    const bgMap = {
-      base: tokens.colors.background.base,
-      surface: tokens.colors.background.surface,
-      elevated: tokens.colors.background.elevated,
-      overlay: tokens.colors.background.overlay
-    };
-    return bgMap[bg] || bg;
-  };
-  const resolveBorder = (b) => {
-    if (!b) return void 0;
-    if (b === true) return `1px solid ${tokens.colors.border.default}`;
-    return b;
-  };
-  const resolveBorderRadius = (br) => {
-    if (!br) return void 0;
-    if (br in tokens.borderRadius) return tokens.borderRadius[br];
-    return br;
-  };
-  const resolveShadow = (s) => {
-    if (!s) return void 0;
-    if (s in tokens.shadows && s !== "glow") return tokens.shadows[s];
-    return s;
-  };
-  const resolveSize = (val) => {
-    if (val === void 0) return void 0;
-    if (typeof val === "number") return `${val}px`;
-    return val;
-  };
-  const computedStyle = {
-    // Padding
-    ...paddingAll ? { padding: paddingAll } : {},
-    ...paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : {},
-    ...paddingY ? { paddingTop: paddingY, paddingBottom: paddingY } : {},
-    ...resolve(pt) ? { paddingTop: resolve(pt) } : {},
-    ...resolve(pr) ? { paddingRight: resolve(pr) } : {},
-    ...resolve(pb) ? { paddingBottom: resolve(pb) } : {},
-    ...resolve(pl) ? { paddingLeft: resolve(pl) } : {},
-    // Margin
-    ...marginAll ? { margin: marginAll } : {},
-    ...marginX ? { marginLeft: marginX, marginRight: marginX } : {},
-    ...marginY ? { marginTop: marginY, marginBottom: marginY } : {},
-    ...resolve(mt) ? { marginTop: resolve(mt) } : {},
-    ...resolve(mr) ? { marginRight: resolve(mr) } : {},
-    ...resolve(mb) ? { marginBottom: resolve(mb) } : {},
-    ...resolve(ml) ? { marginLeft: resolve(ml) } : {},
-    // Visual
-    backgroundColor: resolveBackground(background),
-    border: resolveBorder(border),
-    borderRadius: resolveBorderRadius(borderRadius),
-    boxShadow: resolveShadow(shadow),
-    // Layout
-    display: resolveResponsive(display, breakpoint),
-    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,
-    // User overrides
-    ...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/Box.tsx
+/**
+* @zendir/ui - Box Layout Primitive
+*
+* The foundational layout building block. A themed <div> with shorthand props
+* for padding, margin, background, border, and display properties.
+*
+* Follows Astro UX spacing tokens (4px grid system).
+* All spacing props accept SpacingTokens ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'),
+* numbers (px), or CSS strings.
+*
+* @example
+* ```tsx
+* <Box padding="md" background="surface">
+*   <H3>Section Title</H3>
+*   <Body1>Content here</Body1>
+* </Box>
+*
+* <Box padding={['sm', 'md', 'lg']} borderRadius="md">
+*   Responsive padding
+* </Box>
+* ```
+*/
+var Box = memo(forwardRef(function Box({ as: Component = "div", padding, p, px, py, pt, pr, pb, pl, margin, m, mx, my, mt, mr, mb, ml, background, border, borderRadius, shadow, display, width, height, minWidth, minHeight, maxWidth, maxHeight, overflow, position, flex, flexGrow, flexShrink, style, children, ...rest }, ref) {
+	const { tokens } = useTheme();
+	const { breakpoint } = useBreakpoint();
+	const resolve = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
+	const paddingAll = resolve(padding ?? p);
+	const paddingX = resolve(px);
+	const paddingY = resolve(py);
+	const marginAll = resolve(margin ?? m);
+	const marginX = resolve(mx);
+	const marginY = resolve(my);
+	const resolveBackground = (bg) => {
+		if (!bg) return void 0;
+		return {
+			base: tokens.colors.background.base,
+			surface: tokens.colors.background.surface,
+			elevated: tokens.colors.background.elevated,
+			overlay: tokens.colors.background.overlay
+		}[bg] || bg;
+	};
+	const resolveBorder = (b) => {
+		if (!b) return void 0;
+		if (b === true) return `1px solid ${tokens.colors.border.default}`;
+		return b;
+	};
+	const resolveBorderRadius = (br) => {
+		if (!br) return void 0;
+		if (br in tokens.borderRadius) return tokens.borderRadius[br];
+		return br;
+	};
+	const resolveShadow = (s) => {
+		if (!s) return void 0;
+		if (s in tokens.shadows && s !== "glow") return tokens.shadows[s];
+		return s;
+	};
+	const resolveSize = (val) => {
+		if (val === void 0) return void 0;
+		if (typeof val === "number") return `${val}px`;
+		return val;
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		style: {
+			...paddingAll ? { padding: paddingAll } : {},
+			...paddingX ? {
+				paddingLeft: paddingX,
+				paddingRight: paddingX
+			} : {},
+			...paddingY ? {
+				paddingTop: paddingY,
+				paddingBottom: paddingY
+			} : {},
+			...resolve(pt) ? { paddingTop: resolve(pt) } : {},
+			...resolve(pr) ? { paddingRight: resolve(pr) } : {},
+			...resolve(pb) ? { paddingBottom: resolve(pb) } : {},
+			...resolve(pl) ? { paddingLeft: resolve(pl) } : {},
+			...marginAll ? { margin: marginAll } : {},
+			...marginX ? {
+				marginLeft: marginX,
+				marginRight: marginX
+			} : {},
+			...marginY ? {
+				marginTop: marginY,
+				marginBottom: marginY
+			} : {},
+			...resolve(mt) ? { marginTop: resolve(mt) } : {},
+			...resolve(mr) ? { marginRight: resolve(mr) } : {},
+			...resolve(mb) ? { marginBottom: resolve(mb) } : {},
+			...resolve(ml) ? { marginLeft: resolve(ml) } : {},
+			backgroundColor: resolveBackground(background),
+			border: resolveBorder(border),
+			borderRadius: resolveBorderRadius(borderRadius),
+			boxShadow: resolveShadow(shadow),
+			display: resolveResponsive(display, breakpoint),
+			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 {
-  Box
-};
-//# sourceMappingURL=Box.js.map
+//#endregion
+export { Box, Box as default };
+
+//# sourceMappingURL=Box.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../../src/react/core/layout/Box.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Box Layout Primitive\r\n * \r\n * The foundational layout building block. A themed <div> with shorthand props\r\n * for padding, margin, background, border, and display properties.\r\n * \r\n * Follows Astro UX spacing tokens (4px grid system).\r\n * All spacing props accept SpacingTokens ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'),\r\n * numbers (px), or CSS strings.\r\n * \r\n * @example\r\n * ```tsx\r\n * <Box padding=\"md\" background=\"surface\">\r\n *   <H3>Section Title</H3>\r\n *   <Body1>Content here</Body1>\r\n * </Box>\r\n * \r\n * <Box padding={['sm', 'md', 'lg']} borderRadius=\"md\">\r\n *   Responsive padding\r\n * </Box>\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\n\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  \r\n  // Spacing\r\n  /** Padding (all sides) */\r\n  padding?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for padding */\r\n  p?: ResponsiveValue<SpacingInput>;\r\n  /** Padding horizontal (left + right) */\r\n  px?: ResponsiveValue<SpacingInput>;\r\n  /** Padding vertical (top + bottom) */\r\n  py?: ResponsiveValue<SpacingInput>;\r\n  /** Padding top */\r\n  pt?: ResponsiveValue<SpacingInput>;\r\n  /** Padding right */\r\n  pr?: ResponsiveValue<SpacingInput>;\r\n  /** Padding bottom */\r\n  pb?: ResponsiveValue<SpacingInput>;\r\n  /** Padding left */\r\n  pl?: ResponsiveValue<SpacingInput>;\r\n  /** Margin (all sides) */\r\n  margin?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for margin */\r\n  m?: ResponsiveValue<SpacingInput>;\r\n  /** Margin horizontal (left + right) */\r\n  mx?: ResponsiveValue<SpacingInput>;\r\n  /** Margin vertical (top + bottom) */\r\n  my?: ResponsiveValue<SpacingInput>;\r\n  /** Margin top */\r\n  mt?: ResponsiveValue<SpacingInput>;\r\n  /** Margin right */\r\n  mr?: ResponsiveValue<SpacingInput>;\r\n  /** Margin bottom */\r\n  mb?: ResponsiveValue<SpacingInput>;\r\n  /** Margin left */\r\n  ml?: ResponsiveValue<SpacingInput>;\r\n  \r\n  // Visual\r\n  /** Background color: 'base' | 'surface' | 'elevated' | 'overlay' | custom CSS color */\r\n  background?: string;\r\n  /** Border: true for default border, or custom CSS border */\r\n  border?: boolean | string;\r\n  /** Border radius token or CSS value */\r\n  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;\r\n  /** Box shadow token or CSS value */\r\n  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;\r\n  \r\n  // Layout\r\n  /** CSS display property */\r\n  display?: ResponsiveValue<string>;\r\n  /** CSS width */\r\n  width?: ResponsiveValue<string | number>;\r\n  /** CSS height */\r\n  height?: ResponsiveValue<string | number>;\r\n  /** CSS min-width */\r\n  minWidth?: string | number;\r\n  /** CSS min-height */\r\n  minHeight?: string | number;\r\n  /** CSS max-width */\r\n  maxWidth?: string | number;\r\n  /** CSS max-height */\r\n  maxHeight?: string | number;\r\n  /** CSS overflow */\r\n  overflow?: string;\r\n  /** CSS position */\r\n  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';\r\n  /** CSS flex property */\r\n  flex?: string | number;\r\n  /** CSS flex-grow */\r\n  flexGrow?: number;\r\n  /** CSS flex-shrink */\r\n  flexShrink?: number;\r\n  \r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Box = memo(forwardRef<HTMLDivElement, BoxProps>(function Box(\r\n  {\r\n    as: Component = 'div',\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,\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    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 resolve = (val: ResponsiveValue<SpacingInput> | undefined) =>\r\n    resolveResponsiveSpacing(val, breakpoint, tokens);\r\n  \r\n  // Resolve padding (p is alias for padding)\r\n  const paddingAll = resolve(padding ?? p);\r\n  const paddingX = resolve(px);\r\n  const paddingY = resolve(py);\r\n  \r\n  // Resolve margin (m is alias for margin)\r\n  const marginAll = resolve(margin ?? m);\r\n  const marginX = resolve(mx);\r\n  const marginY = resolve(my);\r\n  \r\n  // Background color resolution\r\n  const resolveBackground = (bg: string | undefined): string | undefined => {\r\n    if (!bg) return undefined;\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    return bgMap[bg] || bg;\r\n  };\r\n  \r\n  // Border resolution\r\n  const resolveBorder = (b: boolean | string | undefined): string | undefined => {\r\n    if (!b) return undefined;\r\n    if (b === true) return `1px solid ${tokens.colors.border.default}`;\r\n    return b;\r\n  };\r\n  \r\n  // Border radius resolution\r\n  const resolveBorderRadius = (br: string | undefined): string | undefined => {\r\n    if (!br) return undefined;\r\n    if (br in tokens.borderRadius) return tokens.borderRadius[br as keyof typeof tokens.borderRadius];\r\n    return br;\r\n  };\r\n  \r\n  // Shadow resolution\r\n  const resolveShadow = (s: string | undefined): string | undefined => {\r\n    if (!s) return undefined;\r\n    if (s in tokens.shadows && s !== 'glow') return tokens.shadows[s as keyof Omit<typeof tokens.shadows, 'glow'>];\r\n    return s;\r\n  };\r\n  \r\n  // Size resolution (number → px)\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 computedStyle: React.CSSProperties = {\r\n    // Padding\r\n    ...(paddingAll ? { padding: paddingAll } : {}),\r\n    ...(paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : {}),\r\n    ...(paddingY ? { paddingTop: paddingY, paddingBottom: paddingY } : {}),\r\n    ...(resolve(pt) ? { paddingTop: resolve(pt) } : {}),\r\n    ...(resolve(pr) ? { paddingRight: resolve(pr) } : {}),\r\n    ...(resolve(pb) ? { paddingBottom: resolve(pb) } : {}),\r\n    ...(resolve(pl) ? { paddingLeft: resolve(pl) } : {}),\r\n    \r\n    // Margin\r\n    ...(marginAll ? { margin: marginAll } : {}),\r\n    ...(marginX ? { marginLeft: marginX, marginRight: marginX } : {}),\r\n    ...(marginY ? { marginTop: marginY, marginBottom: marginY } : {}),\r\n    ...(resolve(mt) ? { marginTop: resolve(mt) } : {}),\r\n    ...(resolve(mr) ? { marginRight: resolve(mr) } : {}),\r\n    ...(resolve(mb) ? { marginBottom: resolve(mb) } : {}),\r\n    ...(resolve(ml) ? { marginLeft: resolve(ml) } : {}),\r\n    \r\n    // Visual\r\n    backgroundColor: resolveBackground(background),\r\n    border: resolveBorder(border),\r\n    borderRadius: resolveBorderRadius(borderRadius),\r\n    boxShadow: resolveShadow(shadow),\r\n    \r\n    // Layout\r\n    display: resolveResponsive(display, breakpoint),\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    // User overrides\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 Box;\r\n"],"names":["Box"],"mappings":"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"}
+{"version":3,"file":"Box.js","names":[],"sources":["../../../../src/react/core/layout/Box.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Box Layout Primitive\r\n *\r\n * The foundational layout building block. A themed <div> with shorthand props\r\n * for padding, margin, background, border, and display properties.\r\n *\r\n * Follows Astro UX spacing tokens (4px grid system).\r\n * All spacing props accept SpacingTokens ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'),\r\n * numbers (px), or CSS strings.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Box padding=\"md\" background=\"surface\">\r\n *   <H3>Section Title</H3>\r\n *   <Body1>Content here</Body1>\r\n * </Box>\r\n *\r\n * <Box padding={['sm', 'md', 'lg']} borderRadius=\"md\">\r\n *   Responsive padding\r\n * </Box>\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\n\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n\r\n  // Spacing\r\n  /** Padding (all sides) */\r\n  padding?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for padding */\r\n  p?: ResponsiveValue<SpacingInput>;\r\n  /** Padding horizontal (left + right) */\r\n  px?: ResponsiveValue<SpacingInput>;\r\n  /** Padding vertical (top + bottom) */\r\n  py?: ResponsiveValue<SpacingInput>;\r\n  /** Padding top */\r\n  pt?: ResponsiveValue<SpacingInput>;\r\n  /** Padding right */\r\n  pr?: ResponsiveValue<SpacingInput>;\r\n  /** Padding bottom */\r\n  pb?: ResponsiveValue<SpacingInput>;\r\n  /** Padding left */\r\n  pl?: ResponsiveValue<SpacingInput>;\r\n  /** Margin (all sides) */\r\n  margin?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for margin */\r\n  m?: ResponsiveValue<SpacingInput>;\r\n  /** Margin horizontal (left + right) */\r\n  mx?: ResponsiveValue<SpacingInput>;\r\n  /** Margin vertical (top + bottom) */\r\n  my?: ResponsiveValue<SpacingInput>;\r\n  /** Margin top */\r\n  mt?: ResponsiveValue<SpacingInput>;\r\n  /** Margin right */\r\n  mr?: ResponsiveValue<SpacingInput>;\r\n  /** Margin bottom */\r\n  mb?: ResponsiveValue<SpacingInput>;\r\n  /** Margin left */\r\n  ml?: ResponsiveValue<SpacingInput>;\r\n\r\n  // Visual\r\n  /** Background color: 'base' | 'surface' | 'elevated' | 'overlay' | custom CSS color */\r\n  background?: string;\r\n  /** Border: true for default border, or custom CSS border */\r\n  border?: boolean | string;\r\n  /** Border radius token or CSS value */\r\n  borderRadius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | string;\r\n  /** Box shadow token or CSS value */\r\n  shadow?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string;\r\n\r\n  // Layout\r\n  /** CSS display property */\r\n  display?: ResponsiveValue<string>;\r\n  /** CSS width */\r\n  width?: ResponsiveValue<string | number>;\r\n  /** CSS height */\r\n  height?: ResponsiveValue<string | number>;\r\n  /** CSS min-width */\r\n  minWidth?: string | number;\r\n  /** CSS min-height */\r\n  minHeight?: string | number;\r\n  /** CSS max-width */\r\n  maxWidth?: string | number;\r\n  /** CSS max-height */\r\n  maxHeight?: string | number;\r\n  /** CSS overflow */\r\n  overflow?: string;\r\n  /** CSS position */\r\n  position?: \"static\" | \"relative\" | \"absolute\" | \"fixed\" | \"sticky\";\r\n  /** CSS flex property */\r\n  flex?: string | number;\r\n  /** CSS flex-grow */\r\n  flexGrow?: number;\r\n  /** CSS flex-shrink */\r\n  flexShrink?: number;\r\n\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Box = memo(\r\n  forwardRef<HTMLDivElement, BoxProps>(function Box(\r\n    {\r\n      as: Component = \"div\",\r\n      padding,\r\n      p,\r\n      px,\r\n      py,\r\n      pt,\r\n      pr,\r\n      pb,\r\n      pl,\r\n      margin,\r\n      m,\r\n      mx,\r\n      my,\r\n      mt,\r\n      mr,\r\n      mb,\r\n      ml,\r\n      background,\r\n      border,\r\n      borderRadius,\r\n      shadow,\r\n      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,\r\n      flexGrow,\r\n      flexShrink,\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 resolve = (val: ResponsiveValue<SpacingInput> | undefined) =>\r\n      resolveResponsiveSpacing(val, breakpoint, tokens);\r\n\r\n    // Resolve padding (p is alias for padding)\r\n    const paddingAll = resolve(padding ?? p);\r\n    const paddingX = resolve(px);\r\n    const paddingY = resolve(py);\r\n\r\n    // Resolve margin (m is alias for margin)\r\n    const marginAll = resolve(margin ?? m);\r\n    const marginX = resolve(mx);\r\n    const marginY = resolve(my);\r\n\r\n    // Background color resolution\r\n    const resolveBackground = (bg: string | undefined): string | undefined => {\r\n      if (!bg) return undefined;\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      return bgMap[bg] || bg;\r\n    };\r\n\r\n    // Border resolution\r\n    const resolveBorder = (\r\n      b: boolean | string | undefined,\r\n    ): string | undefined => {\r\n      if (!b) return undefined;\r\n      if (b === true) return `1px solid ${tokens.colors.border.default}`;\r\n      return b;\r\n    };\r\n\r\n    // Border radius resolution\r\n    const resolveBorderRadius = (\r\n      br: string | undefined,\r\n    ): string | undefined => {\r\n      if (!br) return undefined;\r\n      if (br in tokens.borderRadius)\r\n        return tokens.borderRadius[br as keyof typeof tokens.borderRadius];\r\n      return br;\r\n    };\r\n\r\n    // Shadow resolution\r\n    const resolveShadow = (s: string | undefined): string | undefined => {\r\n      if (!s) return undefined;\r\n      if (s in tokens.shadows && s !== \"glow\")\r\n        return tokens.shadows[s as keyof Omit<typeof tokens.shadows, \"glow\">];\r\n      return s;\r\n    };\r\n\r\n    // Size resolution (number → px)\r\n    const resolveSize = (\r\n      val: string | number | undefined,\r\n    ): 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 computedStyle: React.CSSProperties = {\r\n      // Padding\r\n      ...(paddingAll ? { padding: paddingAll } : {}),\r\n      ...(paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : {}),\r\n      ...(paddingY ? { paddingTop: paddingY, paddingBottom: paddingY } : {}),\r\n      ...(resolve(pt) ? { paddingTop: resolve(pt) } : {}),\r\n      ...(resolve(pr) ? { paddingRight: resolve(pr) } : {}),\r\n      ...(resolve(pb) ? { paddingBottom: resolve(pb) } : {}),\r\n      ...(resolve(pl) ? { paddingLeft: resolve(pl) } : {}),\r\n\r\n      // Margin\r\n      ...(marginAll ? { margin: marginAll } : {}),\r\n      ...(marginX ? { marginLeft: marginX, marginRight: marginX } : {}),\r\n      ...(marginY ? { marginTop: marginY, marginBottom: marginY } : {}),\r\n      ...(resolve(mt) ? { marginTop: resolve(mt) } : {}),\r\n      ...(resolve(mr) ? { marginRight: resolve(mr) } : {}),\r\n      ...(resolve(mb) ? { marginBottom: resolve(mb) } : {}),\r\n      ...(resolve(ml) ? { marginLeft: resolve(ml) } : {}),\r\n\r\n      // Visual\r\n      backgroundColor: resolveBackground(background),\r\n      border: resolveBorder(border),\r\n      borderRadius: resolveBorderRadius(borderRadius),\r\n      boxShadow: resolveShadow(shadow),\r\n\r\n      // Layout\r\n      display: resolveResponsive(display, breakpoint),\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      // User overrides\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\n\r\nexport default Box;\r\n"],"mappings":"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"}

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Element type to render */
     as?: React.ElementType;

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

@@ -1,34 +1,47 @@
+import { forwardRef, memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { memo, forwardRef } from "react";
-const Center = memo(forwardRef(function Center2({
-  as: Component = "div",
-  width,
-  height,
-  maxWidth,
-  textAlign = false,
-  inline = false,
-  style,
-  children,
-  ...rest
-}, ref) {
-  const resolveSize = (val) => {
-    if (val === void 0) return void 0;
-    if (typeof val === "number") return `${val}px`;
-    return val;
-  };
-  const computedStyle = {
-    display: inline ? "inline-flex" : "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: resolveSize(width),
-    height: resolveSize(height),
-    maxWidth: resolveSize(maxWidth),
-    textAlign: textAlign ? "center" : void 0,
-    ...style
-  };
-  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+//#region src/react/core/layout/Center.tsx
+/**
+* @zendir/ui - Center Layout Primitive
+*
+* Centers content horizontally and vertically using flexbox.
+* Common in operator dashboards for loading states, empty states, and hero sections.
+*
+* @example
+* ```tsx
+* <Center height="100vh">
+*   <VStack spacing="md" align="center">
+*     <Icon name="satellite" size={64} />
+*     <H2>No Telemetry Data</H2>
+*     <Body2>Connect to a spacecraft to begin monitoring.</Body2>
+*     <Button>Connect</Button>
+*   </VStack>
+* </Center>
+* ```
+*/
+var Center = memo(forwardRef(function Center({ as: Component = "div", width, height, maxWidth, textAlign = false, inline = false, style, children, ...rest }, ref) {
+	const resolveSize = (val) => {
+		if (val === void 0) return void 0;
+		if (typeof val === "number") return `${val}px`;
+		return val;
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		style: {
+			display: inline ? "inline-flex" : "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: resolveSize(width),
+			height: resolveSize(height),
+			maxWidth: resolveSize(maxWidth),
+			textAlign: textAlign ? "center" : void 0,
+			...style
+		},
+		...rest,
+		children
+	});
 }));
-export {
-  Center
-};
-//# sourceMappingURL=Center.js.map
+//#endregion
+export { Center, Center as default };
+
+//# sourceMappingURL=Center.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Center.js","sources":["../../../../src/react/core/layout/Center.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Center Layout Primitive\r\n * \r\n * Centers content horizontally and vertically using flexbox.\r\n * Common in operator dashboards for loading states, empty states, and hero sections.\r\n * \r\n * @example\r\n * ```tsx\r\n * <Center height=\"100vh\">\r\n *   <VStack spacing=\"md\" align=\"center\">\r\n *     <Icon name=\"satellite\" size={64} />\r\n *     <H2>No Telemetry Data</H2>\r\n *     <Body2>Connect to a spacecraft to begin monitoring.</Body2>\r\n *     <Button>Connect</Button>\r\n *   </VStack>\r\n * </Center>\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef } from 'react';\r\n\r\nexport interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  /** Width (CSS value or number for px) */\r\n  width?: string | number;\r\n  /** Height (CSS value or number for px) */\r\n  height?: string | number;\r\n  /** Max width constraint */\r\n  maxWidth?: string | number;\r\n  /** Also center text */\r\n  textAlign?: boolean;\r\n  /** Inline-flex instead of flex */\r\n  inline?: boolean;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Center = memo(forwardRef<HTMLDivElement, CenterProps>(function Center(\r\n  {\r\n    as: Component = 'div',\r\n    width,\r\n    height,\r\n    maxWidth,\r\n    textAlign = false,\r\n    inline = false,\r\n    style,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref\r\n): React.ReactElement {\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 computedStyle: React.CSSProperties = {\r\n    display: inline ? 'inline-flex' : 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: resolveSize(width),\r\n    height: resolveSize(height),\r\n    maxWidth: resolveSize(maxWidth),\r\n    textAlign: textAlign ? 'center' : undefined,\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 Center;\r\n"],"names":["Center"],"mappings":";;AAsCO,MAAM,SAAS,KAAK,WAAwC,SAASA,QAC1E;AAAA,EACE,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACoB;AACpB,QAAM,cAAc,CAAC,QAAyD;AAC5E,QAAI,QAAQ,OAAW,QAAO;AAC9B,QAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,gBAAqC;AAAA,IACzC,SAAS,SAAS,gBAAgB;AAAA,IAClC,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO,YAAY,KAAK;AAAA,IACxB,QAAQ,YAAY,MAAM;AAAA,IAC1B,UAAU,YAAY,QAAQ;AAAA,IAC9B,WAAW,YAAY,WAAW;AAAA,IAClC,GAAG;AAAA,EAAA;AAGL,6BACG,WAAA,EAAU,KAAU,OAAO,eAAgB,GAAG,MAC5C,UACH;AAEJ,CAAC,CAAC;"}
+{"version":3,"file":"Center.js","names":[],"sources":["../../../../src/react/core/layout/Center.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Center Layout Primitive\r\n *\r\n * Centers content horizontally and vertically using flexbox.\r\n * Common in operator dashboards for loading states, empty states, and hero sections.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Center height=\"100vh\">\r\n *   <VStack spacing=\"md\" align=\"center\">\r\n *     <Icon name=\"satellite\" size={64} />\r\n *     <H2>No Telemetry Data</H2>\r\n *     <Body2>Connect to a spacecraft to begin monitoring.</Body2>\r\n *     <Button>Connect</Button>\r\n *   </VStack>\r\n * </Center>\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef } from \"react\";\r\n\r\nexport interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  /** Width (CSS value or number for px) */\r\n  width?: string | number;\r\n  /** Height (CSS value or number for px) */\r\n  height?: string | number;\r\n  /** Max width constraint */\r\n  maxWidth?: string | number;\r\n  /** Also center text */\r\n  textAlign?: boolean;\r\n  /** Inline-flex instead of flex */\r\n  inline?: boolean;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Center = memo(\r\n  forwardRef<HTMLDivElement, CenterProps>(function Center(\r\n    {\r\n      as: Component = \"div\",\r\n      width,\r\n      height,\r\n      maxWidth,\r\n      textAlign = false,\r\n      inline = false,\r\n      style,\r\n      children,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ): React.ReactElement {\r\n    const resolveSize = (\r\n      val: string | number | undefined,\r\n    ): 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 computedStyle: React.CSSProperties = {\r\n      display: inline ? \"inline-flex\" : \"flex\",\r\n      alignItems: \"center\",\r\n      justifyContent: \"center\",\r\n      width: resolveSize(width),\r\n      height: resolveSize(height),\r\n      maxWidth: resolveSize(maxWidth),\r\n      textAlign: textAlign ? \"center\" : undefined,\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\n\r\nexport default Center;\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCA,IAAa,SAAS,KACpB,WAAwC,SAAS,OAC/C,EACE,IAAI,YAAY,OAChB,OACA,QACA,UACA,YAAY,OACZ,SAAS,OACT,OACA,UACA,GAAG,QAEL,KACoB;CACpB,MAAM,eACJ,QACuB;EACvB,IAAI,QAAQ,KAAA,GAAW,OAAO,KAAA;EAC9B,IAAI,OAAO,QAAQ,UAAU,OAAO,GAAG,IAAI;EAC3C,OAAO;CACT;CAaA,OACE,oBAAC,WAAD;EAAgB;EAAK,OAAO;GAX5B,SAAS,SAAS,gBAAgB;GAClC,YAAY;GACZ,gBAAgB;GAChB,OAAO,YAAY,KAAK;GACxB,QAAQ,YAAY,MAAM;GAC1B,UAAU,YAAY,QAAQ;GAC9B,WAAW,YAAY,WAAW,KAAA;GAClC,GAAG;EAIyB;EAAe,GAAI;EAC5C;CACQ,CAAA;AAEf,CAAC,CACH"}

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

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
-
 export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Divider orientation */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: "horizontal" | "vertical";
     /** Optional centered label text */
     label?: string;
     /** Spacing around the divider (CSS value) */