@zendir/ui 0.5.0 → 0.6.0

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

@@ -1,74 +1,131 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import React, { memo, forwardRef } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
 import { useBreakpoint } from "./useBreakpoint.js";
 import { resolveResponsiveSpacing } from "./responsive.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 });
+import React, { forwardRef, memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/layout/Stack.tsx
+/**
+* @zendir/ui - Stack Layout Primitives
+*
+* Consistent spacing stacks — the most common layout pattern in operator dashboards.
+* Stack, HStack, and VStack provide directional flex with uniform gaps.
+*
+* @example
+* ```tsx
+* // Vertical stack (default)
+* <Stack spacing="md">
+*   <TelemetryCard />
+*   <LinkBudgetCard />
+*   <SpacecraftCard />
+* </Stack>
+*
+* // Horizontal stack
+* <HStack spacing="sm" align="center">
+*   <StatusIndicator status="normal" />
+*   <Body1>Connected</Body1>
+* </HStack>
+*
+* // Responsive spacing
+* <VStack spacing={['sm', 'md', 'lg']}>
+*   <Content />
+* </VStack>
+* ```
+*/
+var Stack = memo(forwardRef(function Stack({ 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
+	});
+}));
+/**
+* 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>
+* ```
+*/
+var HStack = memo(forwardRef(function HStack(props, ref) {
+	return /* @__PURE__ */ jsx(Stack, {
+		ref,
+		direction: "row",
+		...props
+	});
+}));
+/**
+* Vertical Stack — `<Stack direction="column">` shorthand.
+*
+* @example
+* ```tsx
+* <VStack spacing="md">
+*   <TelemetryCard />
+*   <LinkBudgetCard />
+* </VStack>
+* ```
+*/
+var VStack = memo(forwardRef(function VStack(props, ref) {
+	return /* @__PURE__ */ jsx(Stack, {
+		ref,
+		direction: "column",
+		...props
+	});
 }));
-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
+//#endregion
+export { HStack, Stack, Stack as default, VStack };
+
+//# sourceMappingURL=Stack.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"Stack.js","names":[],"sources":["../../../../src/react/core/layout/Stack.tsx"],"sourcesContent":["/**\n * @zendir/ui - Stack Layout Primitives\n *\n * Consistent spacing stacks — the most common layout pattern in operator dashboards.\n * Stack, HStack, and VStack provide directional flex with uniform gaps.\n *\n * @example\n * ```tsx\n * // Vertical stack (default)\n * <Stack spacing=\"md\">\n *   <TelemetryCard />\n *   <LinkBudgetCard />\n *   <SpacecraftCard />\n * </Stack>\n *\n * // Horizontal stack\n * <HStack spacing=\"sm\" align=\"center\">\n *   <StatusIndicator status=\"normal\" />\n *   <Body1>Connected</Body1>\n * </HStack>\n *\n * // Responsive spacing\n * <VStack spacing={['sm', 'md', 'lg']}>\n *   <Content />\n * </VStack>\n * ```\n */\n\nimport React, { memo, forwardRef } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { resolveResponsiveSpacing } from \"./responsive\";\nimport type { ResponsiveValue } from \"./useBreakpoint\";\nimport type { SpacingToken } from \"./responsive\";\n\ntype SpacingInput = SpacingToken | string | number;\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Element type to render */\n  as?: React.ElementType;\n  /** Stack direction */\n  direction?: ResponsiveValue<\n    \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\n  >;\n  /** Space between children (spacing token, px, or CSS string) */\n  spacing?: ResponsiveValue<SpacingInput>;\n  /** Align items (cross-axis) */\n  align?: \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\" | \"stretch\";\n  /** Justify content (main-axis) */\n  justify?:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n  /** Flex wrap */\n  wrap?: \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n  /** Full width */\n  fullWidth?: boolean;\n  /** Full height */\n  fullHeight?: boolean;\n  /** Divider between items — renders a themed line */\n  divider?: boolean;\n  /** Children */\n  children?: React.ReactNode;\n}\n\nexport const Stack = memo(\n  forwardRef<HTMLDivElement, StackProps>(function Stack(\n    {\n      as: Component = \"div\",\n      direction = \"column\",\n      spacing = \"md\",\n      align,\n      justify,\n      wrap,\n      fullWidth = false,\n      fullHeight = false,\n      divider = false,\n      style,\n      children,\n      ...rest\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens } = useTheme();\n    const { breakpoint } = useBreakpoint();\n\n    const resolvedSpacing = resolveResponsiveSpacing(\n      spacing,\n      breakpoint,\n      tokens,\n    );\n    const resolvedDirection = Array.isArray(direction)\n      ? (direction[\n          Math.min(\n            [\"base\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"].indexOf(breakpoint),\n            direction.length - 1,\n          )\n        ] ?? direction[direction.length - 1])\n      : direction;\n    const isVertical =\n      resolvedDirection === \"column\" || resolvedDirection === \"column-reverse\";\n\n    const computedStyle: React.CSSProperties = {\n      display: \"flex\",\n      flexDirection: resolvedDirection as\n        | \"row\"\n        | \"column\"\n        | \"row-reverse\"\n        | \"column-reverse\",\n      ...(divider || !resolvedSpacing ? {} : { gap: resolvedSpacing }),\n      alignItems: align,\n      justifyContent: justify,\n      flexWrap: wrap,\n      ...(fullWidth ? { width: \"100%\" } : {}),\n      ...(fullHeight ? { height: \"100%\" } : {}),\n      ...style,\n    };\n\n    // If divider is enabled, interleave divider elements\n    if (divider) {\n      const items = React.Children.toArray(children).filter(Boolean);\n      const dividerStyle: React.CSSProperties = isVertical\n        ? {\n            width: \"100%\",\n            height: \"1px\",\n            backgroundColor: tokens.colors.border.muted,\n            flexShrink: 0,\n            margin: `${resolvedSpacing} 0`,\n          }\n        : {\n            height: \"100%\",\n            width: \"1px\",\n            backgroundColor: tokens.colors.border.muted,\n            flexShrink: 0,\n            alignSelf: \"stretch\",\n            margin: `0 ${resolvedSpacing}`,\n          };\n\n      return (\n        <Component ref={ref} style={computedStyle} {...rest}>\n          {items.map((child, index) => (\n            <React.Fragment key={index}>\n              {child}\n              {index < items.length - 1 && (\n                <div style={dividerStyle} aria-hidden=\"true\" />\n              )}\n            </React.Fragment>\n          ))}\n        </Component>\n      );\n    }\n\n    return (\n      <Component ref={ref} style={computedStyle} {...rest}>\n        {children}\n      </Component>\n    );\n  }),\n);\n\n/**\n * Horizontal Stack — `<Stack direction=\"row\">` shorthand.\n *\n * @example\n * ```tsx\n * <HStack spacing=\"sm\" align=\"center\">\n *   <Icon name=\"satellite\" />\n *   <Body1>SAT-1</Body1>\n *   <Badge status=\"normal\">Nominal</Badge>\n * </HStack>\n * ```\n */\nexport const HStack = memo(\n  forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>(\n    function HStack(props, ref) {\n      return <Stack ref={ref} direction=\"row\" {...props} />;\n    },\n  ),\n);\n\n/**\n * Vertical Stack — `<Stack direction=\"column\">` shorthand.\n *\n * @example\n * ```tsx\n * <VStack spacing=\"md\">\n *   <TelemetryCard />\n *   <LinkBudgetCard />\n * </VStack>\n * ```\n */\nexport const VStack = memo(\n  forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>(\n    function VStack(props, ref) {\n      return <Stack ref={ref} direction=\"column\" {...props} />;\n    },\n  ),\n);\n\nexport default Stack;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,IAAa,QAAQ,KACnB,WAAuC,SAAS,MAC9C,EACE,IAAI,YAAY,OAChB,YAAY,UACZ,UAAU,MACV,OACA,SACA,MACA,YAAY,OACZ,aAAa,OACb,UAAU,OACV,OACA,UACA,GAAG,QAEL,KACoB;CACpB,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,EAAE,eAAe,cAAc;CAErC,MAAM,kBAAkB,yBACtB,SACA,YACA,MACF;CACA,MAAM,oBAAoB,MAAM,QAAQ,SAAS,IAC5C,UACC,KAAK,IACH;EAAC;EAAQ;EAAM;EAAM;EAAM;EAAM;CAAK,CAAC,CAAC,QAAQ,UAAU,GAC1D,UAAU,SAAS,CACrB,MACG,UAAU,UAAU,SAAS,KAClC;CACJ,MAAM,aACJ,sBAAsB,YAAY,sBAAsB;CAE1D,MAAM,gBAAqC;EACzC,SAAS;EACT,eAAe;EAKf,GAAI,WAAW,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,gBAAgB;EAC9D,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,GAAI,YAAY,EAAE,OAAO,OAAO,IAAI,CAAC;EACrC,GAAI,aAAa,EAAE,QAAQ,OAAO,IAAI,CAAC;EACvC,GAAG;CACL;CAGA,IAAI,SAAS;EACX,MAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,OAAO,OAAO;EAC7D,MAAM,eAAoC,aACtC;GACE,OAAO;GACP,QAAQ;GACR,iBAAiB,OAAO,OAAO,OAAO;GACtC,YAAY;GACZ,QAAQ,GAAG,gBAAgB;EAC7B,IACA;GACE,QAAQ;GACR,OAAO;GACP,iBAAiB,OAAO,OAAO,OAAO;GACtC,YAAY;GACZ,WAAW;GACX,QAAQ,KAAK;EACf;EAEJ,OACE,oBAAC,WAAD;GAAgB;GAAK,OAAO;GAAe,GAAI;aAC5C,MAAM,KAAK,OAAO,UACjB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,OACA,QAAQ,MAAM,SAAS,KACtB,oBAAC,OAAD;IAAK,OAAO;IAAc,eAAY;GAAQ,CAAA,CAElC,EAAA,GALK,KAKL,CACjB;EACQ,CAAA;CAEf;CAEA,OACE,oBAAC,WAAD;EAAgB;EAAK,OAAO;EAAe,GAAI;EAC5C;CACQ,CAAA;AAEf,CAAC,CACH;;;;;;;;;;;;;AAcA,IAAa,SAAS,KACpB,WACE,SAAS,OAAO,OAAO,KAAK;CAC1B,OAAO,oBAAC,OAAD;EAAY;EAAK,WAAU;EAAM,GAAI;CAAQ,CAAA;AACtD,CACF,CACF;;;;;;;;;;;;AAaA,IAAa,SAAS,KACpB,WACE,SAAS,OAAO,OAAO,KAAK;CAC1B,OAAO,oBAAC,OAAD;EAAY;EAAK,WAAU;EAAS,GAAI;CAAQ,CAAA;AACzD,CACF,CACF"}

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

@@ -1,8 +1,7 @@
 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';
+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;
 /**

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

@@ -1,26 +1,32 @@
 import { resolveResponsiveValue } from "./useBreakpoint.js";
+//#region src/react/core/layout/responsive.ts
+/**
+* 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%')
+*/
 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;
+	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;
 }
+/**
+* Resolve a responsive spacing value at the current breakpoint.
+*/
 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);
+	if (value === void 0 || value === null) return void 0;
+	return resolveSpacing(Array.isArray(value) ? resolveResponsiveValue(value, breakpoint) : value, tokens);
 }
+/**
+* Resolve a responsive value (non-spacing) at the current breakpoint.
+*/
 function resolveResponsive(value, breakpoint) {
-  if (value === void 0 || value === null) return void 0;
-  return Array.isArray(value) ? resolveResponsiveValue(value, breakpoint) : value;
+	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
+//#endregion
+export { resolveResponsive, resolveResponsiveSpacing, resolveSpacing };
+
+//# sourceMappingURL=responsive.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"responsive.js","sources":["../../../../src/react/core/layout/responsive.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Responsive Utilities\r\n * \r\n * Helpers for resolving responsive values and spacing tokens to CSS values.\r\n * Used internally by layout primitives (Box, Flex, Grid, Stack).\r\n */\r\n\r\nimport type { ThemeTokens } from '../../theme';\r\nimport type { Breakpoint, ResponsiveValue } from './useBreakpoint';\r\nimport { resolveResponsiveValue } from './useBreakpoint';\r\n\r\n/** Spacing token names matching ThemeTokens.spacing */\r\nexport type SpacingToken = 'xxs' | 'xs' | 'sm' | 'smd' | 'md' | 'mdl' | 'lg' | 'xl' | 'xxl';\r\n\r\n/** Value that can be a spacing token, a CSS string, or a number (px) */\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\n/**\r\n * Resolve a spacing value to a CSS string.\r\n * - SpacingToken ('xs', 'sm', etc.) → looks up token value\r\n * - number → converts to px string\r\n * - string → passes through (e.g., '1rem', '50%')\r\n */\r\nexport function resolveSpacing(\r\n  value: SpacingInput | undefined,\r\n  tokens: ThemeTokens\r\n): string | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  \r\n  // Spacing token\r\n  if (typeof value === 'string' && value in tokens.spacing) {\r\n    return tokens.spacing[value as SpacingToken];\r\n  }\r\n  \r\n  // Number → px\r\n  if (typeof value === 'number') {\r\n    return `${value}px`;\r\n  }\r\n  \r\n  // CSS string passthrough\r\n  return value;\r\n}\r\n\r\n/**\r\n * Resolve a responsive spacing value at the current breakpoint.\r\n */\r\nexport function resolveResponsiveSpacing(\r\n  value: ResponsiveValue<SpacingInput> | undefined,\r\n  breakpoint: Breakpoint,\r\n  tokens: ThemeTokens\r\n): string | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  \r\n  const resolved = Array.isArray(value)\r\n    ? resolveResponsiveValue(value, breakpoint)\r\n    : value;\r\n    \r\n  return resolveSpacing(resolved, tokens);\r\n}\r\n\r\n/**\r\n * Resolve a responsive value (non-spacing) at the current breakpoint.\r\n */\r\nexport function resolveResponsive<T>(\r\n  value: ResponsiveValue<T> | undefined,\r\n  breakpoint: Breakpoint\r\n): T | undefined {\r\n  if (value === undefined || value === null) return undefined;\r\n  return Array.isArray(value)\r\n    ? resolveResponsiveValue(value, breakpoint)\r\n    : value;\r\n}\r\n"],"names":[],"mappings":";AAuBO,SAAS,eACd,OACA,QACoB;AACpB,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAGlD,MAAI,OAAO,UAAU,YAAY,SAAS,OAAO,SAAS;AACxD,WAAO,OAAO,QAAQ,KAAqB;AAAA,EAC7C;AAGA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO,GAAG,KAAK;AAAA,EACjB;AAGA,SAAO;AACT;AAKO,SAAS,yBACd,OACA,YACA,QACoB;AACpB,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAElD,QAAM,WAAW,MAAM,QAAQ,KAAK,IAChC,uBAAuB,OAAO,UAAU,IACxC;AAEJ,SAAO,eAAe,UAAU,MAAM;AACxC;AAKO,SAAS,kBACd,OACA,YACe;AACf,MAAI,UAAU,UAAa,UAAU,KAAM,QAAO;AAClD,SAAO,MAAM,QAAQ,KAAK,IACtB,uBAAuB,OAAO,UAAU,IACxC;AACN;"}
+{"version":3,"file":"responsive.js","names":[],"sources":["../../../../src/react/core/layout/responsive.ts"],"sourcesContent":["/**\n * @zendir/ui - Responsive Utilities\n *\n * Helpers for resolving responsive values and spacing tokens to CSS values.\n * Used internally by layout primitives (Box, Flex, Grid, Stack).\n */\n\nimport type { ThemeTokens } from \"../../theme\";\nimport type { Breakpoint, ResponsiveValue } from \"./useBreakpoint\";\nimport { resolveResponsiveValue } from \"./useBreakpoint\";\n\n/** Spacing token names matching ThemeTokens.spacing */\nexport type SpacingToken =\n  | \"xxs\"\n  | \"xs\"\n  | \"sm\"\n  | \"smd\"\n  | \"md\"\n  | \"mdl\"\n  | \"lg\"\n  | \"xl\"\n  | \"xxl\";\n\n/** Value that can be a spacing token, a CSS string, or a number (px) */\ntype SpacingInput = SpacingToken | string | number;\n\n/**\n * Resolve a spacing value to a CSS string.\n * - SpacingToken ('xs', 'sm', etc.) → looks up token value\n * - number → converts to px string\n * - string → passes through (e.g., '1rem', '50%')\n */\nexport function resolveSpacing(\n  value: SpacingInput | undefined,\n  tokens: ThemeTokens,\n): string | undefined {\n  if (value === undefined || value === null) return undefined;\n\n  // Spacing token\n  if (typeof value === \"string\" && value in tokens.spacing) {\n    return tokens.spacing[value as SpacingToken];\n  }\n\n  // Number → px\n  if (typeof value === \"number\") {\n    return `${value}px`;\n  }\n\n  // CSS string passthrough\n  return value;\n}\n\n/**\n * Resolve a responsive spacing value at the current breakpoint.\n */\nexport function resolveResponsiveSpacing(\n  value: ResponsiveValue<SpacingInput> | undefined,\n  breakpoint: Breakpoint,\n  tokens: ThemeTokens,\n): string | undefined {\n  if (value === undefined || value === null) return undefined;\n\n  const resolved = Array.isArray(value)\n    ? resolveResponsiveValue(value, breakpoint)\n    : value;\n\n  return resolveSpacing(resolved, tokens);\n}\n\n/**\n * Resolve a responsive value (non-spacing) at the current breakpoint.\n */\nexport function resolveResponsive<T>(\n  value: ResponsiveValue<T> | undefined,\n  breakpoint: Breakpoint,\n): T | undefined {\n  if (value === undefined || value === null) return undefined;\n  return Array.isArray(value)\n    ? resolveResponsiveValue(value, breakpoint)\n    : value;\n}\n"],"mappings":";;;;;;;;AAgCA,SAAgB,eACd,OACA,QACoB;CACpB,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,OAAO,KAAA;CAGlD,IAAI,OAAO,UAAU,YAAY,SAAS,OAAO,SAC/C,OAAO,OAAO,QAAQ;CAIxB,IAAI,OAAO,UAAU,UACnB,OAAO,GAAG,MAAM;CAIlB,OAAO;AACT;;;;AAKA,SAAgB,yBACd,OACA,YACA,QACoB;CACpB,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,OAAO,KAAA;CAMlD,OAAO,eAJU,MAAM,QAAQ,KAAK,IAChC,uBAAuB,OAAO,UAAU,IACxC,OAE4B,MAAM;AACxC;;;;AAKA,SAAgB,kBACd,OACA,YACe;CACf,IAAI,UAAU,KAAA,KAAa,UAAU,MAAM,OAAO,KAAA;CAClD,OAAO,MAAM,QAAQ,KAAK,IACtB,uBAAuB,OAAO,UAAU,IACxC;AACN"}

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

@@ -16,7 +16,7 @@
  * const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();
  * ```
  */
-export type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+export type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "xxl";
 /** Responsive value: single value or [base, sm?, md?, lg?, xl?, xxl?] */
 export type ResponsiveValue<T> = T | [T, T?, T?, T?, T?, T?];
 export declare const BREAKPOINTS: {

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

@@ -1,73 +1,126 @@
-import { useState, useEffect, useMemo, useCallback } from "react";
-const BREAKPOINTS = {
-  base: 0,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  xxl: 1920
+import { useCallback, useEffect, useMemo, useState } from "react";
+//#region src/react/core/layout/useBreakpoint.ts
+/**
+* @zendir/ui - Responsive Breakpoint System
+*
+* Breakpoints aligned with Astro UX Design System responsive guidelines.
+* Supports mission control displays (4K) down to mobile field devices.
+*
+* Breakpoints:
+* - sm:  640px  — Mobile landscape / small tablets
+* - md:  768px  — Tablets
+* - lg:  1024px — Laptops / desktop
+* - xl:  1280px — Large monitors
+* - xxl: 1920px — Mission control displays (HD)
+*
+* @example
+* ```tsx
+* const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();
+* ```
+*/
+var BREAKPOINTS = {
+	base: 0,
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	xxl: 1920
 };
-const BREAKPOINT_ORDER = ["base", "sm", "md", "lg", "xl", "xxl"];
+var BREAKPOINT_ORDER = [
+	"base",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"xxl"
+];
 function getBreakpoint(width) {
-  if (width >= BREAKPOINTS.xxl) return "xxl";
-  if (width >= BREAKPOINTS.xl) return "xl";
-  if (width >= BREAKPOINTS.lg) return "lg";
-  if (width >= BREAKPOINTS.md) return "md";
-  if (width >= BREAKPOINTS.sm) return "sm";
-  return "base";
+	if (width >= BREAKPOINTS.xxl) return "xxl";
+	if (width >= BREAKPOINTS.xl) return "xl";
+	if (width >= BREAKPOINTS.lg) return "lg";
+	if (width >= BREAKPOINTS.md) return "md";
+	if (width >= BREAKPOINTS.sm) return "sm";
+	return "base";
 }
+/**
+* Hook for responsive breakpoint detection.
+*
+* Uses matchMedia for efficient, debounce-free breakpoint tracking.
+* Respects SSR by defaulting to 'lg' (desktop).
+*
+* @example
+* ```tsx
+* const { isMobile, isDesktop, breakpoint } = useBreakpoint();
+*
+* return (
+*   <Grid columns={isMobile ? 1 : 3}>
+*     ...
+*   </Grid>
+* );
+* ```
+*/
 function useBreakpoint() {
-  const [width, setWidth] = useState(() => {
-    if (typeof window !== "undefined") return window.innerWidth;
-    return 1024;
-  });
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    let rafId;
-    const handleResize = () => {
-      cancelAnimationFrame(rafId);
-      rafId = requestAnimationFrame(() => {
-        setWidth(window.innerWidth);
-      });
-    };
-    window.addEventListener("resize", handleResize, { passive: true });
-    return () => {
-      window.removeEventListener("resize", handleResize);
-      cancelAnimationFrame(rafId);
-    };
-  }, []);
-  const breakpoint = useMemo(() => getBreakpoint(width), [width]);
-  const isAbove = useCallback((bp) => {
-    return width >= BREAKPOINTS[bp];
-  }, [width]);
-  const isBelow = useCallback((bp) => {
-    return width < BREAKPOINTS[bp];
-  }, [width]);
-  return useMemo(() => ({
-    breakpoint,
-    width,
-    isMobile: width < BREAKPOINTS.md,
-    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,
-    isDesktop: width >= BREAKPOINTS.lg,
-    isWidescreen: width >= BREAKPOINTS.xxl,
-    isAbove,
-    isBelow
-  }), [breakpoint, width, isAbove, isBelow]);
+	const [width, setWidth] = useState(() => {
+		if (typeof window !== "undefined") return window.innerWidth;
+		return 1024;
+	});
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		let rafId;
+		const handleResize = () => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(() => {
+				setWidth(window.innerWidth);
+			});
+		};
+		window.addEventListener("resize", handleResize, { passive: true });
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			cancelAnimationFrame(rafId);
+		};
+	}, []);
+	const breakpoint = useMemo(() => getBreakpoint(width), [width]);
+	const isAbove = useCallback((bp) => {
+		return width >= BREAKPOINTS[bp];
+	}, [width]);
+	const isBelow = useCallback((bp) => {
+		return width < BREAKPOINTS[bp];
+	}, [width]);
+	return useMemo(() => ({
+		breakpoint,
+		width,
+		isMobile: width < BREAKPOINTS.md,
+		isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,
+		isDesktop: width >= BREAKPOINTS.lg,
+		isWidescreen: width >= BREAKPOINTS.xxl,
+		isAbove,
+		isBelow
+	}), [
+		breakpoint,
+		width,
+		isAbove,
+		isBelow
+	]);
 }
+/**
+* Resolve a responsive value based on current breakpoint.
+*
+* Given `[1, 2, 3]` at breakpoint 'lg', returns 3.
+* Falls back to the last defined value for higher breakpoints.
+*
+* @example
+* resolveResponsiveValue([1, 2, 3], 'lg') // → 3
+* resolveResponsiveValue([1, 2], 'xl')     // → 2 (falls back to last defined)
+* resolveResponsiveValue(5, 'md')          // → 5 (non-array passthrough)
+*/
 function resolveResponsiveValue(value, breakpoint) {
-  if (!Array.isArray(value)) return value;
-  const index = BREAKPOINT_ORDER.indexOf(breakpoint);
-  for (let i = Math.min(index, value.length - 1); i >= 0; i--) {
-    if (value[i] !== void 0 && value[i] !== null) return value[i];
-  }
-  for (let i = 0; i < value.length; i++) {
-    if (value[i] !== void 0 && value[i] !== null) return value[i];
-  }
-  return value[0];
+	if (!Array.isArray(value)) return value;
+	const index = BREAKPOINT_ORDER.indexOf(breakpoint);
+	for (let i = Math.min(index, value.length - 1); i >= 0; i--) if (value[i] !== void 0 && value[i] !== null) return value[i];
+	for (let i = 0; i < value.length; i++) if (value[i] !== void 0 && value[i] !== null) return value[i];
+	return value[0];
 }
-export {
-  BREAKPOINTS,
-  resolveResponsiveValue,
-  useBreakpoint
-};
-//# sourceMappingURL=useBreakpoint.js.map
+//#endregion
+export { BREAKPOINTS, resolveResponsiveValue, useBreakpoint };
+
+//# sourceMappingURL=useBreakpoint.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sources":["../../../../src/react/core/layout/useBreakpoint.ts"],"sourcesContent":["/**\r\n * @zendir/ui - Responsive Breakpoint System\r\n * \r\n * Breakpoints aligned with Astro UX Design System responsive guidelines.\r\n * Supports mission control displays (4K) down to mobile field devices.\r\n * \r\n * Breakpoints:\r\n * - sm:  640px  — Mobile landscape / small tablets\r\n * - md:  768px  — Tablets\r\n * - lg:  1024px — Laptops / desktop\r\n * - xl:  1280px — Large monitors\r\n * - xxl: 1920px — Mission control displays (HD)\r\n * \r\n * @example\r\n * ```tsx\r\n * const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();\r\n * ```\r\n */\r\n\r\nimport { useState, useEffect, useCallback, useMemo } from 'react';\r\n\r\nexport type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\r\n\r\n/** Responsive value: single value or [base, sm?, md?, lg?, xl?, xxl?] */\r\nexport type ResponsiveValue<T> = T | [T, T?, T?, T?, T?, T?];\r\n\r\nexport const BREAKPOINTS = {\r\n  base: 0,\r\n  sm: 640,\r\n  md: 768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n  xxl: 1920,\r\n} as const;\r\n\r\nconst BREAKPOINT_ORDER: Breakpoint[] = ['base', 'sm', 'md', 'lg', 'xl', 'xxl'];\r\n\r\nfunction getBreakpoint(width: number): Breakpoint {\r\n  if (width >= BREAKPOINTS.xxl) return 'xxl';\r\n  if (width >= BREAKPOINTS.xl) return 'xl';\r\n  if (width >= BREAKPOINTS.lg) return 'lg';\r\n  if (width >= BREAKPOINTS.md) return 'md';\r\n  if (width >= BREAKPOINTS.sm) return 'sm';\r\n  return 'base';\r\n}\r\n\r\nexport interface UseBreakpointReturn {\r\n  /** Current breakpoint name */\r\n  breakpoint: Breakpoint;\r\n  /** Current viewport width in px */\r\n  width: number;\r\n  /** True when viewport < 768px (base, sm) */\r\n  isMobile: boolean;\r\n  /** True when viewport >= 768px and < 1024px */\r\n  isTablet: boolean;\r\n  /** True when viewport >= 1024px */\r\n  isDesktop: boolean;\r\n  /** True when viewport >= 1920px (mission control) */\r\n  isWidescreen: boolean;\r\n  /** Check if viewport is at or above a given breakpoint */\r\n  isAbove: (bp: Breakpoint) => boolean;\r\n  /** Check if viewport is below a given breakpoint */\r\n  isBelow: (bp: Breakpoint) => boolean;\r\n}\r\n\r\n/**\r\n * Hook for responsive breakpoint detection.\r\n * \r\n * Uses matchMedia for efficient, debounce-free breakpoint tracking.\r\n * Respects SSR by defaulting to 'lg' (desktop).\r\n * \r\n * @example\r\n * ```tsx\r\n * const { isMobile, isDesktop, breakpoint } = useBreakpoint();\r\n * \r\n * return (\r\n *   <Grid columns={isMobile ? 1 : 3}>\r\n *     ...\r\n *   </Grid>\r\n * );\r\n * ```\r\n */\r\nexport function useBreakpoint(): UseBreakpointReturn {\r\n  const [width, setWidth] = useState(() => {\r\n    if (typeof window !== 'undefined') return window.innerWidth;\r\n    return 1024; // SSR default: desktop\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined') return;\r\n\r\n    let rafId: number;\r\n    const handleResize = () => {\r\n      cancelAnimationFrame(rafId);\r\n      rafId = requestAnimationFrame(() => {\r\n        setWidth(window.innerWidth);\r\n      });\r\n    };\r\n\r\n    window.addEventListener('resize', handleResize, { passive: true });\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n      cancelAnimationFrame(rafId);\r\n    };\r\n  }, []);\r\n\r\n  const breakpoint = useMemo(() => getBreakpoint(width), [width]);\r\n\r\n  const isAbove = useCallback((bp: Breakpoint) => {\r\n    return width >= BREAKPOINTS[bp];\r\n  }, [width]);\r\n\r\n  const isBelow = useCallback((bp: Breakpoint) => {\r\n    return width < BREAKPOINTS[bp];\r\n  }, [width]);\r\n\r\n  return useMemo(() => ({\r\n    breakpoint,\r\n    width,\r\n    isMobile: width < BREAKPOINTS.md,\r\n    isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\r\n    isDesktop: width >= BREAKPOINTS.lg,\r\n    isWidescreen: width >= BREAKPOINTS.xxl,\r\n    isAbove,\r\n    isBelow,\r\n  }), [breakpoint, width, isAbove, isBelow]);\r\n}\r\n\r\n/**\r\n * Resolve a responsive value based on current breakpoint.\r\n * \r\n * Given `[1, 2, 3]` at breakpoint 'lg', returns 3.\r\n * Falls back to the last defined value for higher breakpoints.\r\n * \r\n * @example\r\n * resolveResponsiveValue([1, 2, 3], 'lg') // → 3\r\n * resolveResponsiveValue([1, 2], 'xl')     // → 2 (falls back to last defined)\r\n * resolveResponsiveValue(5, 'md')          // → 5 (non-array passthrough)\r\n */\r\nexport function resolveResponsiveValue<T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T {\r\n  if (!Array.isArray(value)) return value;\r\n  \r\n  const index = BREAKPOINT_ORDER.indexOf(breakpoint);\r\n  \r\n  // Walk backwards from current breakpoint to find a defined value\r\n  for (let i = Math.min(index, value.length - 1); i >= 0; i--) {\r\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\r\n  }\r\n  \r\n  // Fallback: find first defined value in the responsive array.\r\n  for (let i = 0; i < value.length; i++) {\r\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\r\n  }\r\n\r\n  return value[0] as T;\r\n}\r\n"],"names":[],"mappings":";AA0BO,MAAM,cAAc;AAAA,EACzB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAEA,MAAM,mBAAiC,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK;AAE7E,SAAS,cAAc,OAA2B;AAChD,MAAI,SAAS,YAAY,IAAK,QAAO;AACrC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,MAAI,SAAS,YAAY,GAAI,QAAO;AACpC,SAAO;AACT;AAsCO,SAAS,gBAAqC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM;AACvC,QAAI,OAAO,WAAW,YAAa,QAAO,OAAO;AACjD,WAAO;AAAA,EACT,CAAC;AAED,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AAEnC,QAAI;AACJ,UAAM,eAAe,MAAM;AACzB,2BAAqB,KAAK;AAC1B,cAAQ,sBAAsB,MAAM;AAClC,iBAAS,OAAO,UAAU;AAAA,MAC5B,CAAC;AAAA,IACH;AAEA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM;AACjE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,YAAY;AACjD,2BAAqB,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa,QAAQ,MAAM,cAAc,KAAK,GAAG,CAAC,KAAK,CAAC;AAE9D,QAAM,UAAU,YAAY,CAAC,OAAmB;AAC9C,WAAO,SAAS,YAAY,EAAE;AAAA,EAChC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,UAAU,YAAY,CAAC,OAAmB;AAC9C,WAAO,QAAQ,YAAY,EAAE;AAAA,EAC/B,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,QAAQ,OAAO;AAAA,IACpB;AAAA,IACA;AAAA,IACA,UAAU,QAAQ,YAAY;AAAA,IAC9B,UAAU,SAAS,YAAY,MAAM,QAAQ,YAAY;AAAA,IACzD,WAAW,SAAS,YAAY;AAAA,IAChC,cAAc,SAAS,YAAY;AAAA,IACnC;AAAA,IACA;AAAA,EAAA,IACE,CAAC,YAAY,OAAO,SAAS,OAAO,CAAC;AAC3C;AAaO,SAAS,uBAA0B,OAA2B,YAA2B;AAC9F,MAAI,CAAC,MAAM,QAAQ,KAAK,EAAG,QAAO;AAElC,QAAM,QAAQ,iBAAiB,QAAQ,UAAU;AAGjD,WAAS,IAAI,KAAK,IAAI,OAAO,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,KAAK;AAC3D,QAAI,MAAM,CAAC,MAAM,UAAa,MAAM,CAAC,MAAM,KAAM,QAAO,MAAM,CAAC;AAAA,EACjE;AAGA,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,QAAI,MAAM,CAAC,MAAM,UAAa,MAAM,CAAC,MAAM,KAAM,QAAO,MAAM,CAAC;AAAA,EACjE;AAEA,SAAO,MAAM,CAAC;AAChB;"}
+{"version":3,"file":"useBreakpoint.js","names":[],"sources":["../../../../src/react/core/layout/useBreakpoint.ts"],"sourcesContent":["/**\n * @zendir/ui - Responsive Breakpoint System\n *\n * Breakpoints aligned with Astro UX Design System responsive guidelines.\n * Supports mission control displays (4K) down to mobile field devices.\n *\n * Breakpoints:\n * - sm:  640px  — Mobile landscape / small tablets\n * - md:  768px  — Tablets\n * - lg:  1024px — Laptops / desktop\n * - xl:  1280px — Large monitors\n * - xxl: 1920px — Mission control displays (HD)\n *\n * @example\n * ```tsx\n * const { isMobile, isTablet, isDesktop, breakpoint, width } = useBreakpoint();\n * ```\n */\n\nimport { useState, useEffect, useCallback, useMemo } from \"react\";\n\nexport type Breakpoint = \"base\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\n/** Responsive value: single value or [base, sm?, md?, lg?, xl?, xxl?] */\nexport type ResponsiveValue<T> = T | [T, T?, T?, T?, T?, T?];\n\nexport const BREAKPOINTS = {\n  base: 0,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  xxl: 1920,\n} as const;\n\nconst BREAKPOINT_ORDER: Breakpoint[] = [\"base\", \"sm\", \"md\", \"lg\", \"xl\", \"xxl\"];\n\nfunction getBreakpoint(width: number): Breakpoint {\n  if (width >= BREAKPOINTS.xxl) return \"xxl\";\n  if (width >= BREAKPOINTS.xl) return \"xl\";\n  if (width >= BREAKPOINTS.lg) return \"lg\";\n  if (width >= BREAKPOINTS.md) return \"md\";\n  if (width >= BREAKPOINTS.sm) return \"sm\";\n  return \"base\";\n}\n\nexport interface UseBreakpointReturn {\n  /** Current breakpoint name */\n  breakpoint: Breakpoint;\n  /** Current viewport width in px */\n  width: number;\n  /** True when viewport < 768px (base, sm) */\n  isMobile: boolean;\n  /** True when viewport >= 768px and < 1024px */\n  isTablet: boolean;\n  /** True when viewport >= 1024px */\n  isDesktop: boolean;\n  /** True when viewport >= 1920px (mission control) */\n  isWidescreen: boolean;\n  /** Check if viewport is at or above a given breakpoint */\n  isAbove: (bp: Breakpoint) => boolean;\n  /** Check if viewport is below a given breakpoint */\n  isBelow: (bp: Breakpoint) => boolean;\n}\n\n/**\n * Hook for responsive breakpoint detection.\n *\n * Uses matchMedia for efficient, debounce-free breakpoint tracking.\n * Respects SSR by defaulting to 'lg' (desktop).\n *\n * @example\n * ```tsx\n * const { isMobile, isDesktop, breakpoint } = useBreakpoint();\n *\n * return (\n *   <Grid columns={isMobile ? 1 : 3}>\n *     ...\n *   </Grid>\n * );\n * ```\n */\nexport function useBreakpoint(): UseBreakpointReturn {\n  const [width, setWidth] = useState(() => {\n    if (typeof window !== \"undefined\") return window.innerWidth;\n    return 1024; // SSR default: desktop\n  });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    let rafId: number;\n    const handleResize = () => {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(() => {\n        setWidth(window.innerWidth);\n      });\n    };\n\n    window.addEventListener(\"resize\", handleResize, { passive: true });\n    return () => {\n      window.removeEventListener(\"resize\", handleResize);\n      cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  const breakpoint = useMemo(() => getBreakpoint(width), [width]);\n\n  const isAbove = useCallback(\n    (bp: Breakpoint) => {\n      return width >= BREAKPOINTS[bp];\n    },\n    [width],\n  );\n\n  const isBelow = useCallback(\n    (bp: Breakpoint) => {\n      return width < BREAKPOINTS[bp];\n    },\n    [width],\n  );\n\n  return useMemo(\n    () => ({\n      breakpoint,\n      width,\n      isMobile: width < BREAKPOINTS.md,\n      isTablet: width >= BREAKPOINTS.md && width < BREAKPOINTS.lg,\n      isDesktop: width >= BREAKPOINTS.lg,\n      isWidescreen: width >= BREAKPOINTS.xxl,\n      isAbove,\n      isBelow,\n    }),\n    [breakpoint, width, isAbove, isBelow],\n  );\n}\n\n/**\n * Resolve a responsive value based on current breakpoint.\n *\n * Given `[1, 2, 3]` at breakpoint 'lg', returns 3.\n * Falls back to the last defined value for higher breakpoints.\n *\n * @example\n * resolveResponsiveValue([1, 2, 3], 'lg') // → 3\n * resolveResponsiveValue([1, 2], 'xl')     // → 2 (falls back to last defined)\n * resolveResponsiveValue(5, 'md')          // → 5 (non-array passthrough)\n */\nexport function resolveResponsiveValue<T>(\n  value: ResponsiveValue<T>,\n  breakpoint: Breakpoint,\n): T {\n  if (!Array.isArray(value)) return value;\n\n  const index = BREAKPOINT_ORDER.indexOf(breakpoint);\n\n  // Walk backwards from current breakpoint to find a defined value\n  for (let i = Math.min(index, value.length - 1); i >= 0; i--) {\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\n  }\n\n  // Fallback: find first defined value in the responsive array.\n  for (let i = 0; i < value.length; i++) {\n    if (value[i] !== undefined && value[i] !== null) return value[i] as T;\n  }\n\n  return value[0] as T;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,cAAc;CACzB,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,IAAM,mBAAiC;CAAC;CAAQ;CAAM;CAAM;CAAM;CAAM;AAAK;AAE7E,SAAS,cAAc,OAA2B;CAChD,IAAI,SAAS,YAAY,KAAK,OAAO;CACrC,IAAI,SAAS,YAAY,IAAI,OAAO;CACpC,IAAI,SAAS,YAAY,IAAI,OAAO;CACpC,IAAI,SAAS,YAAY,IAAI,OAAO;CACpC,IAAI,SAAS,YAAY,IAAI,OAAO;CACpC,OAAO;AACT;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,gBAAqC;CACnD,MAAM,CAAC,OAAO,YAAY,eAAe;EACvC,IAAI,OAAO,WAAW,aAAa,OAAO,OAAO;EACjD,OAAO;CACT,CAAC;CAED,gBAAgB;EACd,IAAI,OAAO,WAAW,aAAa;EAEnC,IAAI;EACJ,MAAM,qBAAqB;GACzB,qBAAqB,KAAK;GAC1B,QAAQ,4BAA4B;IAClC,SAAS,OAAO,UAAU;GAC5B,CAAC;EACH;EAEA,OAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACjE,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;GACjD,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,aAAa,cAAc,cAAc,KAAK,GAAG,CAAC,KAAK,CAAC;CAE9D,MAAM,UAAU,aACb,OAAmB;EAClB,OAAO,SAAS,YAAY;CAC9B,GACA,CAAC,KAAK,CACR;CAEA,MAAM,UAAU,aACb,OAAmB;EAClB,OAAO,QAAQ,YAAY;CAC7B,GACA,CAAC,KAAK,CACR;CAEA,OAAO,eACE;EACL;EACA;EACA,UAAU,QAAQ,YAAY;EAC9B,UAAU,SAAS,YAAY,MAAM,QAAQ,YAAY;EACzD,WAAW,SAAS,YAAY;EAChC,cAAc,SAAS,YAAY;EACnC;EACA;CACF,IACA;EAAC;EAAY;EAAO;EAAS;CAAO,CACtC;AACF;;;;;;;;;;;;AAaA,SAAgB,uBACd,OACA,YACG;CACH,IAAI,CAAC,MAAM,QAAQ,KAAK,GAAG,OAAO;CAElC,MAAM,QAAQ,iBAAiB,QAAQ,UAAU;CAGjD,KAAK,IAAI,IAAI,KAAK,IAAI,OAAO,MAAM,SAAS,CAAC,GAAG,KAAK,GAAG,KACtD,IAAI,MAAM,OAAO,KAAA,KAAa,MAAM,OAAO,MAAM,OAAO,MAAM;CAIhE,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAChC,IAAI,MAAM,OAAO,KAAA,KAAa,MAAM,OAAO,MAAM,OAAO,MAAM;CAGhE,OAAO,MAAM;AACf"}

package/dist/react/core/navigation/AppBar.d.ts

@@ -1,6 +1,5 @@
 import { default as React, ReactNode } from 'react';
 import { ThemeVariant, ThemeMode } from '../../theme';
-
 export interface AppBarBranding {
     /** Logo image URL (takes precedence over text) */
     logoUrl?: string;
@@ -53,7 +52,7 @@ export interface AppBarProps {
     /** Let center slot grow to fill space and stay centered (e.g. simulation controls). */
     centerGrow?: boolean;
     /** Bar variant: default (52px) or dense (44px min height, tighter padding/gap). */
-    variant?: 'default' | 'dense';
+    variant?: "default" | "dense";
     /** Callback when theme changes */
     onThemeChange?: (theme: ThemeVariant) => void;
     /** Callback when mode changes */