@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/display/Typography.js

@@ -1,187 +1,369 @@
-import { jsx } from "react/jsx-runtime";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const FONT_FAMILY_PRIMARY = 'var(--font-family-primary, "Public Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif)';
-const FONT_FAMILY_MONO = '"Roboto Mono", "SF Mono", "Consolas", "Liberation Mono", monospace';
-const FONT_WEIGHTS = {
-  light: 300,
-  regular: 400,
-  medium: 500,
-  bold: 700
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/core/display/Typography.tsx
+/**
+* Primary body font stack used by all components.
+*
+* Public Sans is the lead face for body text; Roboto is the fallback that
+* activates when web fonts fail to load (Public Sans is not installed
+* locally on most machines, but Roboto is on Android by default — and
+* AstroUXDS specifies Roboto as the canonical engineering-grade fallback).
+* Below that, the OS-native system fonts complete the chain so the UI
+* never falls through to Times.
+*
+* Read by `var(--font-family-primary)` so consumers can override at the
+* `:root` level (set by `<ThemeProvider>` from `tokens.typography.fontFamily.primary`).
+*/
+var FONT_FAMILY_PRIMARY = "var(--font-family-primary, \"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif)";
+/**
+* Monospace stack for tabular data, code, and numeric readouts.
+* Roboto Mono leads (AstroUXDS canonical), then OS-native mono fonts.
+*/
+var FONT_FAMILY_MONO = "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
+var FONT_WEIGHTS = {
+	light: 300,
+	regular: 400,
+	medium: 500,
+	bold: 700
 };
+/**
+* Get typography styles for a variant
+* All sizes in rem for Astro compliance
+*/
 function getTypographyStyles(variant) {
-  const styles = {
-    // Display variants
-    display1: { fontSize: "3.75rem", fontWeight: 300, lineHeight: "4.375rem", letterSpacing: "-0.5px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    display2: { fontSize: "3rem", fontWeight: 400, lineHeight: "3.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    // Heading variants
-    h1: { fontSize: "2.125rem", fontWeight: 400, lineHeight: "2.5rem", letterSpacing: "0.25px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h1Bold: { fontSize: "2.125rem", fontWeight: 700, lineHeight: "2.5rem", letterSpacing: "0.25px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h2: { fontSize: "1.5rem", fontWeight: 400, lineHeight: "1.75rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h3: { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.5rem", letterSpacing: "0.15px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h4: { fontSize: "1.25rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0.15px", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h5: { fontSize: "1.125rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    h6: { fontSize: "1.125rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0", fontFamily: 'var(--font-family-heading, "Sora", "Roboto", sans-serif)' },
-    // Body variants
-    body1: { fontSize: "1rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0.5px" },
-    body1Bold: { fontSize: "1rem", fontWeight: 700, lineHeight: "1.5rem", letterSpacing: "0.5px" },
-    body2: { fontSize: "0.875rem", fontWeight: 400, lineHeight: "1.25rem", letterSpacing: "0.5px" },
-    body2Bold: { fontSize: "0.875rem", fontWeight: 700, lineHeight: "1.25rem", letterSpacing: "0.5px" },
-    body3: { fontSize: "0.75rem", fontWeight: 400, lineHeight: "1rem", letterSpacing: "0" },
-    body3Bold: { fontSize: "0.75rem", fontWeight: 700, lineHeight: "1rem", letterSpacing: "0" },
-    // Control variants (UI labels)
-    control1: { fontSize: "1rem", fontWeight: 400, lineHeight: "1.25rem", letterSpacing: "0.5px" },
-    control1Bold: { fontSize: "1rem", fontWeight: 700, lineHeight: "1.25rem", letterSpacing: "0.5px" },
-    // Compact variants for dense UIs (cards, badges, data labels)
-    compact: { fontSize: "0.625rem", fontWeight: 400, lineHeight: "0.875rem", letterSpacing: "0" },
-    // 10px
-    compactBold: { fontSize: "0.625rem", fontWeight: 500, lineHeight: "0.875rem", letterSpacing: "0" },
-    micro: { fontSize: "0.5625rem", fontWeight: 400, lineHeight: "0.75rem", letterSpacing: "0" },
-    // 9px
-    microBold: { fontSize: "0.5625rem", fontWeight: 500, lineHeight: "0.75rem", letterSpacing: "0" },
-    // Monospace variants for data/code
-    mono: { fontSize: "0.875rem", fontWeight: 400, lineHeight: "1.25rem", letterSpacing: "0", fontFamily: FONT_FAMILY_MONO },
-    monoSmall: { fontSize: "0.75rem", fontWeight: 400, lineHeight: "1rem", letterSpacing: "0", fontFamily: FONT_FAMILY_MONO },
-    monoCompact: { fontSize: "0.625rem", fontWeight: 400, lineHeight: "0.875rem", letterSpacing: "0", fontFamily: FONT_FAMILY_MONO }
-  };
-  return styles[variant];
+	return {
+		display1: {
+			fontSize: "3.75rem",
+			fontWeight: 300,
+			lineHeight: "4.375rem",
+			letterSpacing: "-0.5px",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		display2: {
+			fontSize: "3rem",
+			fontWeight: 400,
+			lineHeight: "3.5rem",
+			letterSpacing: "0",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h1: {
+			fontSize: "2.125rem",
+			fontWeight: 400,
+			lineHeight: "2.5rem",
+			letterSpacing: "0.25px",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h1Bold: {
+			fontSize: "2.125rem",
+			fontWeight: 700,
+			lineHeight: "2.5rem",
+			letterSpacing: "0.25px",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h2: {
+			fontSize: "1.5rem",
+			fontWeight: 400,
+			lineHeight: "1.75rem",
+			letterSpacing: "0",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h3: {
+			fontSize: "1.25rem",
+			fontWeight: 500,
+			lineHeight: "1.5rem",
+			letterSpacing: "0.15px",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h4: {
+			fontSize: "1.25rem",
+			fontWeight: 300,
+			lineHeight: "1.5rem",
+			letterSpacing: "0.15px",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h5: {
+			fontSize: "1.125rem",
+			fontWeight: 400,
+			lineHeight: "1.5rem",
+			letterSpacing: "0",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		h6: {
+			fontSize: "1.125rem",
+			fontWeight: 300,
+			lineHeight: "1.5rem",
+			letterSpacing: "0",
+			fontFamily: "var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)"
+		},
+		body1: {
+			fontSize: "1rem",
+			fontWeight: 400,
+			lineHeight: "1.5rem",
+			letterSpacing: "0.5px"
+		},
+		body1Bold: {
+			fontSize: "1rem",
+			fontWeight: 700,
+			lineHeight: "1.5rem",
+			letterSpacing: "0.5px"
+		},
+		body2: {
+			fontSize: "0.875rem",
+			fontWeight: 400,
+			lineHeight: "1.25rem",
+			letterSpacing: "0.5px"
+		},
+		body2Bold: {
+			fontSize: "0.875rem",
+			fontWeight: 700,
+			lineHeight: "1.25rem",
+			letterSpacing: "0.5px"
+		},
+		body3: {
+			fontSize: "0.75rem",
+			fontWeight: 400,
+			lineHeight: "1rem",
+			letterSpacing: "0"
+		},
+		body3Bold: {
+			fontSize: "0.75rem",
+			fontWeight: 700,
+			lineHeight: "1rem",
+			letterSpacing: "0"
+		},
+		control1: {
+			fontSize: "1rem",
+			fontWeight: 400,
+			lineHeight: "1.25rem",
+			letterSpacing: "0.5px"
+		},
+		control1Bold: {
+			fontSize: "1rem",
+			fontWeight: 700,
+			lineHeight: "1.25rem",
+			letterSpacing: "0.5px"
+		},
+		compact: {
+			fontSize: "0.625rem",
+			fontWeight: 400,
+			lineHeight: "0.875rem",
+			letterSpacing: "0"
+		},
+		compactBold: {
+			fontSize: "0.625rem",
+			fontWeight: 500,
+			lineHeight: "0.875rem",
+			letterSpacing: "0"
+		},
+		micro: {
+			fontSize: "0.5625rem",
+			fontWeight: 400,
+			lineHeight: "0.75rem",
+			letterSpacing: "0"
+		},
+		microBold: {
+			fontSize: "0.5625rem",
+			fontWeight: 500,
+			lineHeight: "0.75rem",
+			letterSpacing: "0"
+		},
+		mono: {
+			fontSize: "0.875rem",
+			fontWeight: 400,
+			lineHeight: "1.25rem",
+			letterSpacing: "0",
+			fontFamily: FONT_FAMILY_MONO
+		},
+		monoSmall: {
+			fontSize: "0.75rem",
+			fontWeight: 400,
+			lineHeight: "1rem",
+			letterSpacing: "0",
+			fontFamily: FONT_FAMILY_MONO
+		},
+		monoCompact: {
+			fontSize: "0.625rem",
+			fontWeight: 400,
+			lineHeight: "0.875rem",
+			letterSpacing: "0",
+			fontFamily: FONT_FAMILY_MONO
+		}
+	}[variant];
 }
+/**
+* Get default HTML element for variant
+*/
 function getDefaultElement(variant) {
-  if (variant.startsWith("display")) return "h1";
-  if (variant.startsWith("h1")) return "h1";
-  if (variant.startsWith("h2")) return "h2";
-  if (variant.startsWith("h3")) return "h3";
-  if (variant.startsWith("h4")) return "h4";
-  if (variant.startsWith("h5")) return "h5";
-  if (variant.startsWith("h6")) return "h6";
-  if (variant.startsWith("mono")) return "code";
-  if (variant.startsWith("control")) return "label";
-  return "span";
+	if (variant.startsWith("display")) return "h1";
+	if (variant.startsWith("h1")) return "h1";
+	if (variant.startsWith("h2")) return "h2";
+	if (variant.startsWith("h3")) return "h3";
+	if (variant.startsWith("h4")) return "h4";
+	if (variant.startsWith("h5")) return "h5";
+	if (variant.startsWith("h6")) return "h6";
+	if (variant.startsWith("mono")) return "code";
+	if (variant.startsWith("control")) return "label";
+	return "span";
 }
-const Typography = ({
-  variant,
-  as,
-  color = "primary",
-  tabular = false,
-  truncate = false,
-  align,
-  noWrap = false,
-  transform,
-  style,
-  className,
-  children,
-  "data-testid": testId
-}) => {
-  const { tokens } = useTheme();
-  const typographyStyles = getTypographyStyles(variant);
-  const Element = as || getDefaultElement(variant);
-  const getColor = () => {
-    if (color === "inherit") return "inherit";
-    if (color === "primary") return tokens.colors.text.primary;
-    if (color === "secondary") return tokens.colors.text.secondary;
-    if (color === "tertiary") return tokens.colors.text.tertiary;
-    if (color === "muted") return tokens.colors.text.muted || tokens.colors.text.tertiary;
-    if (color === "inverse") return tokens.colors.text.inverse;
-    if (color === "normal") return tokens.colors.status.normal;
-    if (color === "standby") return tokens.colors.status.standby;
-    if (color === "caution") return tokens.colors.status.caution;
-    if (color === "serious") return tokens.colors.status.serious;
-    if (color === "critical") return tokens.colors.status.critical;
-    if (color === "off") return tokens.colors.status.off;
-    return void 0;
-  };
-  const combinedStyle = {
-    fontFamily: typographyStyles.fontFamily || FONT_FAMILY_PRIMARY,
-    fontSize: typographyStyles.fontSize,
-    fontWeight: typographyStyles.fontWeight,
-    lineHeight: typographyStyles.lineHeight,
-    letterSpacing: typographyStyles.letterSpacing,
-    color: getColor(),
-    margin: 0,
-    padding: 0,
-    // Tabular figures for numeric alignment
-    ...tabular && {
-      fontVariantNumeric: "tabular-nums",
-      fontFeatureSettings: '"tnum"'
-    },
-    // Truncation
-    ...truncate && {
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      whiteSpace: "nowrap"
-    },
-    // No wrap
-    ...noWrap && !truncate && {
-      whiteSpace: "nowrap"
-    },
-    // Text alignment
-    ...align && { textAlign: align },
-    // Text transform
-    ...transform && { textTransform: transform },
-    // Custom styles (can override defaults)
-    ...style
-  };
-  return /* @__PURE__ */ jsx(
-    Element,
-    {
-      className,
-      style: combinedStyle,
-      "data-testid": testId,
-      children
-    }
-  );
-};
-const Display1 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "display1", ...props });
-const Display2 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "display2", ...props });
-const H1 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "h1Bold" : "h1", ...props });
-const H2 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "h2", ...props });
-const H3 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "h3", ...props });
-const H4 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "h4", ...props });
-const H5 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "h5", ...props });
-const H6 = (props) => /* @__PURE__ */ jsx(Typography, { variant: "h6", ...props });
-const Body1 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "body1Bold" : "body1", ...props });
-const Body2 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "body2Bold" : "body2", ...props });
-const Body3 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "body3Bold" : "body3", ...props });
-const Compact = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "compactBold" : "compact", ...props });
-const Micro = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "microBold" : "micro", ...props });
-const Mono = ({
-  size = "normal",
-  tabular = true,
-  // Default to tabular for mono
-  ...props
-}) => {
-  const variant = size === "compact" ? "monoCompact" : size === "small" ? "monoSmall" : "mono";
-  return /* @__PURE__ */ jsx(Typography, { variant, tabular, ...props });
+/**
+* Typography component providing AstroUXDS-compliant text styling.
+*
+* @example
+* ```tsx
+* // Heading
+* <Typography variant="h3">Section Title</Typography>
+*
+* // Body text
+* <Typography variant="body1" color="secondary">Description text</Typography>
+*
+* // Monospace data with tabular figures
+* <Typography variant="mono" tabular>123.456</Typography>
+*
+* // Compact label for cards
+* <Typography variant="compact" color="tertiary">LABEL</Typography>
+* ```
+*/
+var Typography = ({ variant, as, color = "primary", tabular = false, truncate = false, align, noWrap = false, transform, style, className, children, "data-testid": testId }) => {
+	const { tokens } = useTheme();
+	const typographyStyles = getTypographyStyles(variant);
+	const Element = as || getDefaultElement(variant);
+	const getColor = () => {
+		if (color === "inherit") return "inherit";
+		if (color === "primary") return tokens.colors.text.primary;
+		if (color === "secondary") return tokens.colors.text.secondary;
+		if (color === "tertiary") return tokens.colors.text.tertiary;
+		if (color === "muted") return tokens.colors.text.muted || tokens.colors.text.tertiary;
+		if (color === "inverse") return tokens.colors.text.inverse;
+		if (color === "normal") return tokens.colors.status.normal;
+		if (color === "standby") return tokens.colors.status.standby;
+		if (color === "caution") return tokens.colors.status.caution;
+		if (color === "serious") return tokens.colors.status.serious;
+		if (color === "critical") return tokens.colors.status.critical;
+		if (color === "off") return tokens.colors.status.off;
+	};
+	return /* @__PURE__ */ jsx(Element, {
+		className,
+		style: {
+			fontFamily: typographyStyles.fontFamily || "var(--font-family-primary, \"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif)",
+			fontSize: typographyStyles.fontSize,
+			fontWeight: typographyStyles.fontWeight,
+			lineHeight: typographyStyles.lineHeight,
+			letterSpacing: typographyStyles.letterSpacing,
+			color: getColor(),
+			margin: 0,
+			padding: 0,
+			...tabular && {
+				fontVariantNumeric: "tabular-nums",
+				fontFeatureSettings: "\"tnum\""
+			},
+			...truncate && {
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			...noWrap && !truncate && { whiteSpace: "nowrap" },
+			...align && { textAlign: align },
+			...transform && { textTransform: transform },
+			...style
+		},
+		"data-testid": testId,
+		children
+	});
 };
-const DataText = ({ size = "normal", ...props }) => {
-  const variantMap = {
-    large: "mono",
-    normal: "mono",
-    small: "monoSmall",
-    compact: "monoCompact"
-  };
-  return /* @__PURE__ */ jsx(Typography, { variant: variantMap[size], tabular: true, ...props });
+/** Display 1 - Largest display text */
+var Display1 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "display1",
+	...props
+});
+/** Display 2 - Large display text */
+var Display2 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "display2",
+	...props
+});
+/** Heading 1 */
+var H1 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "h1Bold" : "h1",
+	...props
+});
+/** Heading 2 */
+var H2 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "h2",
+	...props
+});
+/** Heading 3 */
+var H3 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "h3",
+	...props
+});
+/** Heading 4 */
+var H4 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "h4",
+	...props
+});
+/** Heading 5 */
+var H5 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "h5",
+	...props
+});
+/** Heading 6 */
+var H6 = (props) => /* @__PURE__ */ jsx(Typography, {
+	variant: "h6",
+	...props
+});
+/** Body text level 1 (16px) */
+var Body1 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "body1Bold" : "body1",
+	...props
+});
+/** Body text level 2 (14px) */
+var Body2 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "body2Bold" : "body2",
+	...props
+});
+/** Body text level 3 (12px) */
+var Body3 = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "body3Bold" : "body3",
+	...props
+});
+/** Compact text for dense UIs (10px) */
+var Compact = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "compactBold" : "compact",
+	...props
+});
+/** Micro text for very tight spaces (9px) */
+var Micro = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "microBold" : "micro",
+	...props
+});
+/** Monospace text for data/code */
+var Mono = ({ size = "normal", tabular = true, ...props }) => {
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: size === "compact" ? "monoCompact" : size === "small" ? "monoSmall" : "mono",
+		tabular,
+		...props
+	});
 };
-const Label = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, { variant: bold ? "control1Bold" : "control1", as: "label", ...props });
-export {
-  Body1,
-  Body2,
-  Body3,
-  Compact,
-  DataText,
-  Display1,
-  Display2,
-  FONT_FAMILY_MONO,
-  FONT_FAMILY_PRIMARY,
-  FONT_WEIGHTS,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Label,
-  Micro,
-  Mono,
-  Typography
+/** Data value text - monospace with tabular figures (for numeric displays) */
+var DataText = ({ size = "normal", ...props }) => {
+	return /* @__PURE__ */ jsx(Typography, {
+		variant: {
+			large: "mono",
+			normal: "mono",
+			small: "monoSmall",
+			compact: "monoCompact"
+		}[size],
+		tabular: true,
+		...props
+	});
 };
-//# sourceMappingURL=Typography.js.map
+/** Label text for form controls and card headers */
+var Label = ({ bold, ...props }) => /* @__PURE__ */ jsx(Typography, {
+	variant: bold ? "control1Bold" : "control1",
+	as: "label",
+	...props
+});
+//#endregion
+export { Body1, Body2, Body3, Compact, DataText, Display1, Display2, FONT_FAMILY_MONO, FONT_FAMILY_PRIMARY, FONT_WEIGHTS, H1, H2, H3, H4, H5, H6, Label, Micro, Mono, Typography, Typography as default };
+
+//# sourceMappingURL=Typography.js.map