@zendir/ui 0.4.1 → 0.6.0

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

@@ -1,108 +1,114 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const Divider = memo(function Divider2({
-  orientation = "horizontal",
-  label,
-  spacing,
-  color,
-  dashed = false,
-  style,
-  ...rest
-}) {
-  const { tokens } = useTheme();
-  const lineColor = color || tokens.colors.border.muted;
-  const borderStyle = dashed ? "dashed" : "solid";
-  if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "separator",
-        "aria-orientation": "vertical",
-        style: {
-          width: "1px",
-          alignSelf: "stretch",
-          backgroundColor: lineColor,
-          flexShrink: 0,
-          ...spacing ? { margin: `0 ${spacing}` } : {},
-          ...dashed ? {
-            backgroundColor: "transparent",
-            borderLeft: `1px ${borderStyle} ${lineColor}`
-          } : {},
-          ...style
-        },
-        ...rest
-      }
-    );
-  }
-  if (label) {
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "separator",
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: tokens.spacing.sm,
-          ...spacing ? { margin: `${spacing} 0` } : {},
-          ...style
-        },
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx("div", { style: {
-            flex: 1,
-            height: "1px",
-            backgroundColor: lineColor,
-            ...dashed ? {
-              backgroundColor: "transparent",
-              borderTop: `1px ${borderStyle} ${lineColor}`
-            } : {}
-          } }),
-          /* @__PURE__ */ jsx("span", { style: {
-            fontSize: tokens.typography.fontSize.xs,
-            fontWeight: tokens.typography.fontWeight.medium,
-            color: tokens.colors.text.tertiary,
-            fontFamily: tokens.typography.fontFamily.primary,
-            letterSpacing: tokens.typography.letterSpacing.wide,
-            textTransform: "uppercase",
-            flexShrink: 0,
-            padding: `0 ${tokens.spacing.xs}`
-          }, children: label }),
-          /* @__PURE__ */ jsx("div", { style: {
-            flex: 1,
-            height: "1px",
-            backgroundColor: lineColor,
-            ...dashed ? {
-              backgroundColor: "transparent",
-              borderTop: `1px ${borderStyle} ${lineColor}`
-            } : {}
-          } })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "separator",
-      "aria-orientation": "horizontal",
-      style: {
-        width: "100%",
-        height: "1px",
-        backgroundColor: lineColor,
-        flexShrink: 0,
-        ...spacing ? { margin: `${spacing} 0` } : {},
-        ...dashed ? {
-          backgroundColor: "transparent",
-          borderTop: `1px ${borderStyle} ${lineColor}`
-        } : {},
-        ...style
-      },
-      ...rest
-    }
-  );
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/layout/Divider.tsx
+/**
+* @zendir/ui - Divider
+*
+* Visual separator line following Astro UX Design System.
+* Theme-aware with muted border colors. Supports horizontal and vertical orientation.
+*
+* @example
+* ```tsx
+* <VStack spacing="md">
+*   <Section1 />
+*   <Divider />
+*   <Section2 />
+* </VStack>
+*
+* <HStack spacing="md">
+*   <Panel1 />
+*   <Divider orientation="vertical" />
+*   <Panel2 />
+* </HStack>
+*
+* <Divider label="OR" />
+* ```
+*/
+var Divider = memo(function Divider({ orientation = "horizontal", label, spacing, color, dashed = false, style, ...rest }) {
+	const { tokens } = useTheme();
+	const lineColor = color || tokens.colors.border.muted;
+	const borderStyle = dashed ? "dashed" : "solid";
+	if (orientation === "vertical") return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "vertical",
+		style: {
+			width: "1px",
+			alignSelf: "stretch",
+			backgroundColor: lineColor,
+			flexShrink: 0,
+			...spacing ? { margin: `0 ${spacing}` } : {},
+			...dashed ? {
+				backgroundColor: "transparent",
+				borderLeft: `1px ${borderStyle} ${lineColor}`
+			} : {},
+			...style
+		},
+		...rest
+	});
+	if (label) return /* @__PURE__ */ jsxs("div", {
+		role: "separator",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing.sm,
+			...spacing ? { margin: `${spacing} 0` } : {},
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: "1px",
+				backgroundColor: lineColor,
+				...dashed ? {
+					backgroundColor: "transparent",
+					borderTop: `1px ${borderStyle} ${lineColor}`
+				} : {}
+			} }),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xs,
+					fontWeight: tokens.typography.fontWeight.medium,
+					color: tokens.colors.text.tertiary,
+					fontFamily: tokens.typography.fontFamily.primary,
+					letterSpacing: tokens.typography.letterSpacing.wide,
+					textTransform: "uppercase",
+					flexShrink: 0,
+					padding: `0 ${tokens.spacing.xs}`
+				},
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", { style: {
+				flex: 1,
+				height: "1px",
+				backgroundColor: lineColor,
+				...dashed ? {
+					backgroundColor: "transparent",
+					borderTop: `1px ${borderStyle} ${lineColor}`
+				} : {}
+			} })
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": "horizontal",
+		style: {
+			width: "100%",
+			height: "1px",
+			backgroundColor: lineColor,
+			flexShrink: 0,
+			...spacing ? { margin: `${spacing} 0` } : {},
+			...dashed ? {
+				backgroundColor: "transparent",
+				borderTop: `1px ${borderStyle} ${lineColor}`
+			} : {},
+			...style
+		},
+		...rest
+	});
 });
-export {
-  Divider
-};
-//# sourceMappingURL=Divider.js.map
+//#endregion
+export { Divider, Divider as default };
+
+//# sourceMappingURL=Divider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sources":["../../../../src/react/core/layout/Divider.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Divider\r\n * \r\n * Visual separator line following Astro UX Design System.\r\n * Theme-aware with muted border colors. Supports horizontal and vertical orientation.\r\n * \r\n * @example\r\n * ```tsx\r\n * <VStack spacing=\"md\">\r\n *   <Section1 />\r\n *   <Divider />\r\n *   <Section2 />\r\n * </VStack>\r\n * \r\n * <HStack spacing=\"md\">\r\n *   <Panel1 />\r\n *   <Divider orientation=\"vertical\" />\r\n *   <Panel2 />\r\n * </HStack>\r\n * \r\n * <Divider label=\"OR\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Divider orientation */\r\n  orientation?: 'horizontal' | 'vertical';\r\n  /** Optional centered label text */\r\n  label?: string;\r\n  /** Spacing around the divider (CSS value) */\r\n  spacing?: string;\r\n  /** Color override */\r\n  color?: string;\r\n  /** Dashed style */\r\n  dashed?: boolean;\r\n}\r\n\r\nexport const Divider = memo(function Divider({\r\n  orientation = 'horizontal',\r\n  label,\r\n  spacing,\r\n  color,\r\n  dashed = false,\r\n  style,\r\n  ...rest\r\n}: DividerProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  \r\n  const lineColor = color || tokens.colors.border.muted;\r\n  const borderStyle = dashed ? 'dashed' : 'solid';\r\n  \r\n  if (orientation === 'vertical') {\r\n    return (\r\n      <div\r\n        role=\"separator\"\r\n        aria-orientation=\"vertical\"\r\n        style={{\r\n          width: '1px',\r\n          alignSelf: 'stretch',\r\n          backgroundColor: lineColor,\r\n          flexShrink: 0,\r\n          ...(spacing ? { margin: `0 ${spacing}` } : {}),\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderLeft: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      />\r\n    );\r\n  }\r\n  \r\n  // Horizontal with optional label\r\n  if (label) {\r\n    return (\r\n      <div\r\n        role=\"separator\"\r\n        style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: tokens.spacing.sm,\r\n          ...(spacing ? { margin: `${spacing} 0` } : {}),\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        <div style={{\r\n          flex: 1,\r\n          height: '1px',\r\n          backgroundColor: lineColor,\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderTop: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n        }} />\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.primary,\r\n          letterSpacing: tokens.typography.letterSpacing.wide,\r\n          textTransform: 'uppercase',\r\n          flexShrink: 0,\r\n          padding: `0 ${tokens.spacing.xs}`,\r\n        }}>\r\n          {label}\r\n        </span>\r\n        <div style={{\r\n          flex: 1,\r\n          height: '1px',\r\n          backgroundColor: lineColor,\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderTop: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n        }} />\r\n      </div>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      aria-orientation=\"horizontal\"\r\n      style={{\r\n        width: '100%',\r\n        height: '1px',\r\n        backgroundColor: lineColor,\r\n        flexShrink: 0,\r\n        ...(spacing ? { margin: `${spacing} 0` } : {}),\r\n        ...(dashed ? {\r\n          backgroundColor: 'transparent',\r\n          borderTop: `1px ${borderStyle} ${lineColor}`,\r\n        } : {}),\r\n        ...style,\r\n      }}\r\n      {...rest}\r\n    />\r\n  );\r\n});\r\n\r\nexport default Divider;\r\n"],"names":["Divider"],"mappings":";;;AAwCO,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,QAAM,EAAE,OAAA,IAAW,SAAA;AAEnB,QAAM,YAAY,SAAS,OAAO,OAAO,OAAO;AAChD,QAAM,cAAc,SAAS,WAAW;AAExC,MAAI,gBAAgB,YAAY;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,YAAY;AAAA,UACZ,GAAI,UAAU,EAAE,QAAQ,KAAK,OAAO,GAAA,IAAO,CAAA;AAAA,UAC3C,GAAI,SAAS;AAAA,YACX,iBAAiB;AAAA,YACjB,YAAY,OAAO,WAAW,IAAI,SAAS;AAAA,UAAA,IACzC,CAAA;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAGA,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK,OAAO,QAAQ;AAAA,UACpB,GAAI,UAAU,EAAE,QAAQ,GAAG,OAAO,KAAA,IAAS,CAAA;AAAA,UAC3C,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,SAAI,OAAO;AAAA,YACV,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,GAAI,SAAS;AAAA,cACX,iBAAiB;AAAA,cACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,YAAA,IACxC,CAAA;AAAA,UAAC,GACJ;AAAA,UACH,oBAAC,UAAK,OAAO;AAAA,YACX,UAAU,OAAO,WAAW,SAAS;AAAA,YACrC,YAAY,OAAO,WAAW,WAAW;AAAA,YACzC,OAAO,OAAO,OAAO,KAAK;AAAA,YAC1B,YAAY,OAAO,WAAW,WAAW;AAAA,YACzC,eAAe,OAAO,WAAW,cAAc;AAAA,YAC/C,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS,KAAK,OAAO,QAAQ,EAAE;AAAA,UAAA,GAE9B,UAAA,OACH;AAAA,UACA,oBAAC,SAAI,OAAO;AAAA,YACV,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,GAAI,SAAS;AAAA,cACX,iBAAiB;AAAA,cACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,YAAA,IACxC,CAAA;AAAA,UAAC,EACP,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGT;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,GAAI,UAAU,EAAE,QAAQ,GAAG,OAAO,KAAA,IAAS,CAAA;AAAA,QAC3C,GAAI,SAAS;AAAA,UACX,iBAAiB;AAAA,UACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,QAAA,IACxC,CAAA;AAAA,QACJ,GAAG;AAAA,MAAA;AAAA,MAEJ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"Divider.js","names":[],"sources":["../../../../src/react/core/layout/Divider.tsx"],"sourcesContent":["/**\n * @zendir/ui - Divider\n *\n * Visual separator line following Astro UX Design System.\n * Theme-aware with muted border colors. Supports horizontal and vertical orientation.\n *\n * @example\n * ```tsx\n * <VStack spacing=\"md\">\n *   <Section1 />\n *   <Divider />\n *   <Section2 />\n * </VStack>\n *\n * <HStack spacing=\"md\">\n *   <Panel1 />\n *   <Divider orientation=\"vertical\" />\n *   <Panel2 />\n * </HStack>\n *\n * <Divider label=\"OR\" />\n * ```\n */\n\nimport React, { memo } from \"react\";\nimport { useTheme } from \"../../theme\";\n\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Divider orientation */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Optional centered label text */\n  label?: string;\n  /** Spacing around the divider (CSS value) */\n  spacing?: string;\n  /** Color override */\n  color?: string;\n  /** Dashed style */\n  dashed?: boolean;\n}\n\nexport const Divider = memo(function Divider({\n  orientation = \"horizontal\",\n  label,\n  spacing,\n  color,\n  dashed = false,\n  style,\n  ...rest\n}: DividerProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  const lineColor = color || tokens.colors.border.muted;\n  const borderStyle = dashed ? \"dashed\" : \"solid\";\n\n  if (orientation === \"vertical\") {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        style={{\n          width: \"1px\",\n          alignSelf: \"stretch\",\n          backgroundColor: lineColor,\n          flexShrink: 0,\n          ...(spacing ? { margin: `0 ${spacing}` } : {}),\n          ...(dashed\n            ? {\n                backgroundColor: \"transparent\",\n                borderLeft: `1px ${borderStyle} ${lineColor}`,\n              }\n            : {}),\n          ...style,\n        }}\n        {...rest}\n      />\n    );\n  }\n\n  // Horizontal with optional label\n  if (label) {\n    return (\n      <div\n        role=\"separator\"\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.sm,\n          ...(spacing ? { margin: `${spacing} 0` } : {}),\n          ...style,\n        }}\n        {...rest}\n      >\n        <div\n          style={{\n            flex: 1,\n            height: \"1px\",\n            backgroundColor: lineColor,\n            ...(dashed\n              ? {\n                  backgroundColor: \"transparent\",\n                  borderTop: `1px ${borderStyle} ${lineColor}`,\n                }\n              : {}),\n          }}\n        />\n        <span\n          style={{\n            fontSize: tokens.typography.fontSize.xs,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.tertiary,\n            fontFamily: tokens.typography.fontFamily.primary,\n            letterSpacing: tokens.typography.letterSpacing.wide,\n            textTransform: \"uppercase\",\n            flexShrink: 0,\n            padding: `0 ${tokens.spacing.xs}`,\n          }}\n        >\n          {label}\n        </span>\n        <div\n          style={{\n            flex: 1,\n            height: \"1px\",\n            backgroundColor: lineColor,\n            ...(dashed\n              ? {\n                  backgroundColor: \"transparent\",\n                  borderTop: `1px ${borderStyle} ${lineColor}`,\n                }\n              : {}),\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      style={{\n        width: \"100%\",\n        height: \"1px\",\n        backgroundColor: lineColor,\n        flexShrink: 0,\n        ...(spacing ? { margin: `${spacing} 0` } : {}),\n        ...(dashed\n          ? {\n              backgroundColor: \"transparent\",\n              borderTop: `1px ${borderStyle} ${lineColor}`,\n            }\n          : {}),\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n});\n\nexport default Divider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAa,UAAU,KAAK,SAAS,QAAQ,EAC3C,cAAc,cACd,OACA,SACA,OACA,SAAS,OACT,OACA,GAAG,QACgC;CACnC,MAAM,EAAE,WAAW,SAAS;CAE5B,MAAM,YAAY,SAAS,OAAO,OAAO,OAAO;CAChD,MAAM,cAAc,SAAS,WAAW;CAExC,IAAI,gBAAgB,YAClB,OACE,oBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,OAAO;GACL,OAAO;GACP,WAAW;GACX,iBAAiB;GACjB,YAAY;GACZ,GAAI,UAAU,EAAE,QAAQ,KAAK,UAAU,IAAI,CAAC;GAC5C,GAAI,SACA;IACE,iBAAiB;IACjB,YAAY,OAAO,YAAY,GAAG;GACpC,IACA,CAAC;GACL,GAAG;EACL;EACA,GAAI;CACL,CAAA;CAKL,IAAI,OACF,OACE,qBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,SAAS;GACT,YAAY;GACZ,KAAK,OAAO,QAAQ;GACpB,GAAI,UAAU,EAAE,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC;GAC5C,GAAG;EACL;EACA,GAAI;YATN;GAWE,oBAAC,OAAD,EACE,OAAO;IACL,MAAM;IACN,QAAQ;IACR,iBAAiB;IACjB,GAAI,SACA;KACE,iBAAiB;KACjB,WAAW,OAAO,YAAY,GAAG;IACnC,IACA,CAAC;GACP,EACD,CAAA;GACD,oBAAC,QAAD;IACE,OAAO;KACL,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KACzC,OAAO,OAAO,OAAO,KAAK;KAC1B,YAAY,OAAO,WAAW,WAAW;KACzC,eAAe,OAAO,WAAW,cAAc;KAC/C,eAAe;KACf,YAAY;KACZ,SAAS,KAAK,OAAO,QAAQ;IAC/B;cAEC;GACG,CAAA;GACN,oBAAC,OAAD,EACE,OAAO;IACL,MAAM;IACN,QAAQ;IACR,iBAAiB;IACjB,GAAI,SACA;KACE,iBAAiB;KACjB,WAAW,OAAO,YAAY,GAAG;IACnC,IACA,CAAC;GACP,EACD,CAAA;EACE;;CAIT,OACE,oBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,OAAO;GACL,OAAO;GACP,QAAQ;GACR,iBAAiB;GACjB,YAAY;GACZ,GAAI,UAAU,EAAE,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC;GAC5C,GAAI,SACA;IACE,iBAAiB;IACjB,WAAW,OAAO,YAAY,GAAG;GACnC,IACA,CAAC;GACL,GAAG;EACL;EACA,GAAI;CACL,CAAA;AAEL,CAAC"}

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

@@ -2,13 +2,12 @@ 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 FlexProps extends BoxProps {
     /** Flex direction */
-    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
     /** Flex wrap */
-    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
     /** Gap between children (spacing token, px number, or CSS string) */
     gap?: ResponsiveValue<SpacingInput>;
     /** Row gap (overrides gap for rows) */
@@ -16,9 +15,9 @@ export interface FlexProps extends BoxProps {
     /** Column gap (overrides gap for columns) */
     columnGap?: ResponsiveValue<SpacingInput>;
     /** Align items (cross-axis) */
-    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'>;
+    align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "baseline" | "stretch">;
     /** Justify content (main-axis) */
-    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
     /** Shorthand: set both direction="column" */
     column?: boolean;
     /** Shorthand: center both axes */

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

@@ -1,128 +1,124 @@
-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 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 });
+import { forwardRef, memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/core/layout/Flex.tsx
+/**
+* @zendir/ui - Flex Layout Primitive
+*
+* Flexbox container with theme-aware spacing and responsive direction/alignment.
+* The workhorse layout component for horizontal and vertical arrangements.
+*
+* Astro UX Compliance:
+* - 4px grid spacing tokens
+* - Responsive gap for mobile → mission control
+*
+* @example
+* ```tsx
+* // Horizontal row with centered items
+* <Flex gap="md" align="center">
+*   <StatusIndicator status="normal" />
+*   <Body1>All Systems Nominal</Body1>
+* </Flex>
+*
+* // Vertical column, responsive gap
+* <Flex direction="column" gap={['sm', 'md', 'lg']}>
+*   <TelemetryCard />
+*   <LinkBudgetCard />
+* </Flex>
+*
+* // Space between items
+* <Flex justify="space-between" align="center">
+*   <H3>Telemetry</H3>
+*   <Button variant="secondary">Refresh</Button>
+* </Flex>
+* ```
+*/
+var Flex = memo(forwardRef(function Flex({ direction, wrap, gap, rowGap, columnGap, align, justify, column = false, center = false, inline = false, style, children, 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);
+	return /* @__PURE__ */ jsx(Component, {
+		ref,
+		style: {
+			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),
+			...paddingAll ? { padding: paddingAll } : {},
+			...paddingXVal ? {
+				paddingLeft: paddingXVal,
+				paddingRight: paddingXVal
+			} : {},
+			...paddingYVal ? {
+				paddingTop: paddingYVal,
+				paddingBottom: paddingYVal
+			} : {},
+			...resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {},
+			...resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {},
+			...resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {},
+			...resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {},
+			...marginAll ? { margin: marginAll } : {},
+			...marginXVal ? {
+				marginLeft: marginXVal,
+				marginRight: marginXVal
+			} : {},
+			...marginYVal ? {
+				marginTop: marginYVal,
+				marginBottom: marginYVal
+			} : {},
+			...resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {},
+			...resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {},
+			...resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {},
+			...resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {},
+			...background ? { backgroundColor: bgMap[background] || background } : {},
+			...border ? { border: border === true ? `1px solid ${tokens.colors.border.default}` : border } : {},
+			...borderRadius ? { borderRadius: tokens.borderRadius[borderRadius] || borderRadius } : {},
+			...shadow && shadow !== "glow" ? { boxShadow: tokens.shadows[shadow] || shadow } : {},
+			width: resolveSize(resolveResponsive(width, breakpoint)),
+			height: resolveSize(resolveResponsive(height, breakpoint)),
+			minWidth: resolveSize(minWidth),
+			minHeight: resolveSize(minHeight),
+			maxWidth: resolveSize(maxWidth),
+			maxHeight: resolveSize(maxHeight),
+			overflow,
+			position,
+			flex: flexProp,
+			flexGrow,
+			flexShrink,
+			...style
+		},
+		...rest,
+		children
+	});
 }));
-export {
-  Flex
-};
-//# sourceMappingURL=Flex.js.map
+//#endregion
+export { Flex, Flex as default };
+
+//# sourceMappingURL=Flex.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"Flex.js","names":[],"sources":["../../../../src/react/core/layout/Flex.tsx"],"sourcesContent":["/**\n * @zendir/ui - Flex Layout Primitive\n *\n * Flexbox container with theme-aware spacing and responsive direction/alignment.\n * The workhorse layout component for horizontal and vertical arrangements.\n *\n * Astro UX Compliance:\n * - 4px grid spacing tokens\n * - Responsive gap for mobile → mission control\n *\n * @example\n * ```tsx\n * // Horizontal row with centered items\n * <Flex gap=\"md\" align=\"center\">\n *   <StatusIndicator status=\"normal\" />\n *   <Body1>All Systems Nominal</Body1>\n * </Flex>\n *\n * // Vertical column, responsive gap\n * <Flex direction=\"column\" gap={['sm', 'md', 'lg']}>\n *   <TelemetryCard />\n *   <LinkBudgetCard />\n * </Flex>\n *\n * // Space between items\n * <Flex justify=\"space-between\" align=\"center\">\n *   <H3>Telemetry</H3>\n *   <Button variant=\"secondary\">Refresh</Button>\n * </Flex>\n * ```\n */\n\nimport React, { memo, forwardRef } from \"react\";\nimport { useTheme } from \"../../theme\";\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { resolveResponsiveSpacing, resolveResponsive } from \"./responsive\";\nimport type { ResponsiveValue } from \"./useBreakpoint\";\nimport type { SpacingToken } from \"./responsive\";\nimport type { BoxProps } from \"./Box\";\n\ntype SpacingInput = SpacingToken | string | number;\n\nexport interface FlexProps extends BoxProps {\n  /** Flex direction */\n  direction?: ResponsiveValue<\n    \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\"\n  >;\n  /** Flex wrap */\n  wrap?: ResponsiveValue<\"nowrap\" | \"wrap\" | \"wrap-reverse\">;\n  /** Gap between children (spacing token, px number, or CSS string) */\n  gap?: ResponsiveValue<SpacingInput>;\n  /** Row gap (overrides gap for rows) */\n  rowGap?: ResponsiveValue<SpacingInput>;\n  /** Column gap (overrides gap for columns) */\n  columnGap?: ResponsiveValue<SpacingInput>;\n  /** Align items (cross-axis) */\n  align?: ResponsiveValue<\n    \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\" | \"stretch\"\n  >;\n  /** Justify content (main-axis) */\n  justify?: ResponsiveValue<\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\"\n  >;\n  /** Shorthand: set both direction=\"column\" */\n  column?: boolean;\n  /** Shorthand: center both axes */\n  center?: boolean;\n  /** Make flex container inline */\n  inline?: boolean;\n}\n\nexport const Flex = memo(\n  forwardRef<HTMLDivElement, FlexProps>(function Flex(\n    {\n      direction,\n      wrap,\n      gap,\n      rowGap,\n      columnGap,\n      align,\n      justify,\n      column = false,\n      center = false,\n      inline = false,\n      style,\n      children,\n      // Extract BoxProps we handle ourselves\n      padding,\n      p,\n      px,\n      py,\n      pt,\n      pr,\n      pb,\n      pl,\n      margin,\n      m,\n      mx,\n      my,\n      mt,\n      mr,\n      mb,\n      ml,\n      background,\n      border,\n      borderRadius,\n      shadow,\n      display: _display,\n      width,\n      height,\n      minWidth,\n      minHeight,\n      maxWidth,\n      maxHeight,\n      overflow,\n      position,\n      flex: flexProp,\n      flexGrow,\n      flexShrink,\n      as: Component = \"div\",\n      ...rest\n    },\n    ref,\n  ): React.ReactElement {\n    const { tokens } = useTheme();\n    const { breakpoint } = useBreakpoint();\n\n    const resolveSpacing = (val: ResponsiveValue<SpacingInput> | undefined) =>\n      resolveResponsiveSpacing(val, breakpoint, tokens);\n\n    // Resolve padding\n    const paddingAll = resolveSpacing(padding ?? p);\n    const paddingXVal = resolveSpacing(px);\n    const paddingYVal = resolveSpacing(py);\n\n    // Resolve margin\n    const marginAll = resolveSpacing(margin ?? m);\n    const marginXVal = resolveSpacing(mx);\n    const marginYVal = resolveSpacing(my);\n\n    // Background color resolution\n    const bgMap: Record<string, string> = {\n      base: tokens.colors.background.base,\n      surface: tokens.colors.background.surface,\n      elevated: tokens.colors.background.elevated,\n      overlay: tokens.colors.background.overlay,\n    };\n\n    const resolveSize = (\n      val: string | number | undefined,\n    ): string | undefined => {\n      if (val === undefined) return undefined;\n      if (typeof val === \"number\") return `${val}px`;\n      return val;\n    };\n\n    const resolvedDirection = column\n      ? \"column\"\n      : (resolveResponsive(direction, breakpoint) ?? \"row\");\n\n    // Resolve gap values — use conditional spreads to avoid setting\n    // rowGap/columnGap to undefined, which clears the gap shorthand\n    // in browsers (setting `style.rowGap = ''` removes the value\n    // that `style.gap` set for row-gap).\n    const resolvedGap = resolveSpacing(gap);\n    const resolvedRowGap = resolveSpacing(rowGap);\n    const resolvedColumnGap = resolveSpacing(columnGap);\n\n    const computedStyle: React.CSSProperties = {\n      display: inline ? \"inline-flex\" : \"flex\",\n      flexDirection: resolvedDirection,\n      flexWrap: resolveResponsive(wrap, breakpoint),\n      ...(resolvedGap !== undefined ? { gap: resolvedGap } : {}),\n      ...(resolvedRowGap !== undefined ? { rowGap: resolvedRowGap } : {}),\n      ...(resolvedColumnGap !== undefined\n        ? { columnGap: resolvedColumnGap }\n        : {}),\n      alignItems: center ? \"center\" : resolveResponsive(align, breakpoint),\n      justifyContent: center\n        ? \"center\"\n        : resolveResponsive(justify, breakpoint),\n\n      // Padding\n      ...(paddingAll ? { padding: paddingAll } : {}),\n      ...(paddingXVal\n        ? { paddingLeft: paddingXVal, paddingRight: paddingXVal }\n        : {}),\n      ...(paddingYVal\n        ? { paddingTop: paddingYVal, paddingBottom: paddingYVal }\n        : {}),\n      ...(resolveSpacing(pt) ? { paddingTop: resolveSpacing(pt) } : {}),\n      ...(resolveSpacing(pr) ? { paddingRight: resolveSpacing(pr) } : {}),\n      ...(resolveSpacing(pb) ? { paddingBottom: resolveSpacing(pb) } : {}),\n      ...(resolveSpacing(pl) ? { paddingLeft: resolveSpacing(pl) } : {}),\n\n      // Margin\n      ...(marginAll ? { margin: marginAll } : {}),\n      ...(marginXVal\n        ? { marginLeft: marginXVal, marginRight: marginXVal }\n        : {}),\n      ...(marginYVal\n        ? { marginTop: marginYVal, marginBottom: marginYVal }\n        : {}),\n      ...(resolveSpacing(mt) ? { marginTop: resolveSpacing(mt) } : {}),\n      ...(resolveSpacing(mr) ? { marginRight: resolveSpacing(mr) } : {}),\n      ...(resolveSpacing(mb) ? { marginBottom: resolveSpacing(mb) } : {}),\n      ...(resolveSpacing(ml) ? { marginLeft: resolveSpacing(ml) } : {}),\n\n      // Visual\n      ...(background\n        ? { backgroundColor: bgMap[background] || background }\n        : {}),\n      ...(border\n        ? {\n            border:\n              border === true\n                ? `1px solid ${tokens.colors.border.default}`\n                : (border as string),\n          }\n        : {}),\n      ...(borderRadius\n        ? {\n            borderRadius:\n              (tokens.borderRadius as Record<string, string>)[\n                borderRadius as string\n              ] || borderRadius,\n          }\n        : {}),\n      ...(shadow && shadow !== \"glow\"\n        ? {\n            boxShadow:\n              (tokens.shadows as unknown as Record<string, string>)[\n                shadow as string\n              ] || shadow,\n          }\n        : {}),\n\n      // Size\n      width: resolveSize(resolveResponsive(width, breakpoint)),\n      height: resolveSize(resolveResponsive(height, breakpoint)),\n      minWidth: resolveSize(minWidth),\n      minHeight: resolveSize(minHeight),\n      maxWidth: resolveSize(maxWidth),\n      maxHeight: resolveSize(maxHeight),\n      overflow,\n      position,\n      flex: flexProp,\n      flexGrow,\n      flexShrink,\n\n      ...style,\n    };\n\n    return (\n      <Component ref={ref} style={computedStyle} {...rest}>\n        {children}\n      </Component>\n    );\n  }),\n);\n\nexport default Flex;\n"],"mappings":"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"}