@zendir/ui 0.1.0

package/dist/react/core/Tooltip.js

@@ -0,0 +1,179 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const Tooltip = memo(function Tooltip2({
+  content,
+  placement = "top",
+  delay = 200,
+  disabled = false,
+  children,
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const [visible, setVisible] = useState(false);
+  const [positioned, setPositioned] = useState(false);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef();
+  const hideTimeoutRef = useRef();
+  const showTooltip = useCallback(() => {
+    if (disabled) return;
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = void 0;
+    }
+    timeoutRef.current = window.setTimeout(() => {
+      setVisible(true);
+      setPositioned(false);
+    }, delay);
+  }, [disabled, delay]);
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    hideTimeoutRef.current = window.setTimeout(() => {
+      setVisible(false);
+      setPositioned(false);
+    }, 100);
+  }, []);
+  const hideImmediately = useCallback(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    setVisible(false);
+    setPositioned(false);
+  }, []);
+  const calculatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const gap = 8;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "left":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case "right":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+    if (left < gap) left = gap;
+    if (left + tooltipRect.width > viewportWidth - gap) {
+      left = viewportWidth - tooltipRect.width - gap;
+    }
+    if (top < gap) top = gap;
+    if (top + tooltipRect.height > viewportHeight - gap) {
+      top = viewportHeight - tooltipRect.height - gap;
+    }
+    setPosition({ top, left });
+    setPositioned(true);
+  }, [placement]);
+  useLayoutEffect(() => {
+    if (visible && triggerRef.current && tooltipRef.current) {
+      calculatePosition();
+    }
+  }, [visible, calculatePosition]);
+  useEffect(() => {
+    if (!visible) return;
+    const handleScrollOrResize = () => {
+      calculatePosition();
+    };
+    window.addEventListener("scroll", handleScrollOrResize, true);
+    window.addEventListener("resize", handleScrollOrResize);
+    return () => {
+      window.removeEventListener("scroll", handleScrollOrResize, true);
+      window.removeEventListener("resize", handleScrollOrResize);
+    };
+  }, [visible, calculatePosition]);
+  useEffect(() => {
+    if (!visible) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        hideImmediately();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [visible, hideImmediately]);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: classNames("zendir-tooltip-trigger", className),
+        style: { display: "inline-flex", pointerEvents: "auto", maxWidth: "100%", width: "inherit" },
+        onMouseEnter: showTooltip,
+        onMouseLeave: hideTooltip,
+        onFocus: showTooltip,
+        onBlur: hideTooltip,
+        children
+      }
+    ),
+    visible && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: tooltipRef,
+          role: "tooltip",
+          onMouseEnter: showTooltip,
+          onMouseLeave: hideTooltip,
+          style: {
+            position: "fixed",
+            top: positioned ? position.top : 0,
+            left: positioned ? position.left : 0,
+            width: "max-content",
+            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,
+            backgroundColor: tokens.colors.background.elevated,
+            color: tokens.colors.text.primary,
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            fontFamily: tokens.typography.fontFamily.primary,
+            borderRadius: tokens.borderRadius.md,
+            border: `1px solid ${tokens.colors.accent.primary}20`,
+            boxShadow: positioned ? `${tokens.shadows.lg}, 0 0 20px ${tokens.colors.accent.primary}10` : "none",
+            zIndex: 2147483100,
+            maxWidth: "min(280px, calc(100vw - 24px))",
+            whiteSpace: "normal",
+            pointerEvents: "auto",
+            visibility: positioned ? "visible" : "hidden",
+            opacity: positioned ? 1 : 0,
+            transition: positioned ? void 0 : "none",
+            animation: positioned ? `zendir-tooltip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : "none",
+            backdropFilter: "blur(8px)"
+          },
+          children: [
+            content,
+            /* @__PURE__ */ jsx("style", { children: `@keyframes zendir-tooltip { from { opacity: 0; transform: scale(0.95) translateY(${placement === "bottom" ? "-4px" : placement === "top" ? "4px" : "0"}); } to { opacity: 1; transform: scale(1) translateY(0); } }
+            @media (prefers-reduced-motion: reduce) { @keyframes zendir-tooltip { from, to { opacity: 1; transform: none; } } }` })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/react/core/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/react/core/Tooltip.tsx"],"sourcesContent":["/**\n * @zendir/ui - Tooltip Component\n * \n * Tooltip following Astro UX Design System.\n * Uses a portal to render in document.body, ensuring correct positioning\n * even when the trigger is inside containers with CSS transforms or overflow.\n * \n * @example\n * ```tsx\n * <Tooltip content=\"Click to enable telemetry\">\n *   <Button>Enable</Button>\n * </Tooltip>\n * ```\n */\n\nimport React, { memo, useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';\nimport ReactDOM from 'react-dom';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface TooltipProps {\n  /** Tooltip content */\n  content: React.ReactNode;\n  /** Placement */\n  placement?: TooltipPlacement;\n  /** Delay before showing (ms) */\n  delay?: number;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Children element to trigger tooltip */\n  children: React.ReactElement;\n  /** Custom className */\n  className?: string;\n}\n\nexport const Tooltip = memo(function Tooltip({\n  content,\n  placement = 'top',\n  delay = 200,\n  disabled = false,\n  children,\n  className = '',\n}: TooltipProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const [visible, setVisible] = useState(false);\n  const [positioned, setPositioned] = useState(false);\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const timeoutRef = useRef<number>();\n  const hideTimeoutRef = useRef<number>();\n  \n  const showTooltip = useCallback(() => {\n    if (disabled) return;\n    // Cancel any pending hide so moving between trigger ↔ tooltip keeps it open\n    if (hideTimeoutRef.current) {\n      clearTimeout(hideTimeoutRef.current);\n      hideTimeoutRef.current = undefined;\n    }\n    timeoutRef.current = window.setTimeout(() => {\n      setVisible(true);\n      setPositioned(false);\n    }, delay);\n  }, [disabled, delay]);\n  \n  const hideTooltip = useCallback(() => {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n    // Small delay so user can move pointer from trigger to tooltip (WCAG 1.4.13)\n    hideTimeoutRef.current = window.setTimeout(() => {\n      setVisible(false);\n      setPositioned(false);\n    }, 100);\n  }, []);\n  \n  const hideImmediately = useCallback(() => {\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n    setVisible(false);\n    setPositioned(false);\n  }, []);\n  \n  const calculatePosition = useCallback(() => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n    \n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.current.getBoundingClientRect();\n    const gap = 8;\n    const viewportWidth = window.innerWidth;\n    const viewportHeight = window.innerHeight;\n    \n    let top = 0;\n    let left = 0;\n    \n    switch (placement) {\n      case 'top':\n        top = triggerRect.top - tooltipRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case 'left':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.left - tooltipRect.width - gap;\n        break;\n      case 'right':\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n    \n    // Keep tooltip within viewport bounds\n    if (left < gap) left = gap;\n    if (left + tooltipRect.width > viewportWidth - gap) {\n      left = viewportWidth - tooltipRect.width - gap;\n    }\n    if (top < gap) top = gap;\n    if (top + tooltipRect.height > viewportHeight - gap) {\n      top = viewportHeight - tooltipRect.height - gap;\n    }\n    \n    setPosition({ top, left });\n    setPositioned(true);\n  }, [placement]);\n  \n  // Use useLayoutEffect for initial positioning - runs synchronously\n  // before browser paint, preventing flash at wrong position\n  useLayoutEffect(() => {\n    if (visible && triggerRef.current && tooltipRef.current) {\n      calculatePosition();\n    }\n  }, [visible, calculatePosition]);\n  \n  // Use useEffect for scroll/resize listeners\n  useEffect(() => {\n    if (!visible) return;\n    \n    const handleScrollOrResize = () => {\n      calculatePosition();\n    };\n    \n    window.addEventListener('scroll', handleScrollOrResize, true);\n    window.addEventListener('resize', handleScrollOrResize);\n    \n    return () => {\n      window.removeEventListener('scroll', handleScrollOrResize, true);\n      window.removeEventListener('resize', handleScrollOrResize);\n    };\n  }, [visible, calculatePosition]);\n  \n  // Escape key dismisses tooltip (WCAG 1.4.13 Content on Hover or Focus)\n  useEffect(() => {\n    if (!visible) return;\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        hideImmediately();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => document.removeEventListener('keydown', handleEscape);\n  }, [visible, hideImmediately]);\n  \n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);\n    };\n  }, []);\n  \n  return (\n    <>\n      <div\n        ref={triggerRef}\n        className={classNames('zendir-tooltip-trigger', className)}\n        style={{ display: 'inline-flex', pointerEvents: 'auto', maxWidth: '100%', width: 'inherit' }}\n        onMouseEnter={showTooltip}\n        onMouseLeave={hideTooltip}\n        onFocus={showTooltip}\n        onBlur={hideTooltip}\n      >\n        {children}\n      </div>\n      \n      {visible && ReactDOM.createPortal(\n        <div\n          ref={tooltipRef}\n          role=\"tooltip\"\n          onMouseEnter={showTooltip}\n          onMouseLeave={hideTooltip}\n          style={{\n            position: 'fixed',\n            top: positioned ? position.top : 0,\n            left: positioned ? position.left : 0,\n            width: 'max-content',\n            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n            backgroundColor: tokens.colors.background.elevated,\n            color: tokens.colors.text.primary,\n            fontSize: '0.75rem',\n            fontWeight: 500,\n            fontFamily: tokens.typography.fontFamily.primary,\n            borderRadius: tokens.borderRadius.md,\n            border: `1px solid ${tokens.colors.accent.primary}20`,\n            boxShadow: positioned ? `${tokens.shadows.lg}, 0 0 20px ${tokens.colors.accent.primary}10` : 'none',\n            zIndex: 2147483100,\n            maxWidth: 'min(280px, calc(100vw - 24px))',\n            whiteSpace: 'normal',\n            pointerEvents: 'auto',\n            visibility: positioned ? 'visible' : 'hidden',\n            opacity: positioned ? 1 : 0,\n            transition: positioned ? undefined : 'none',\n            animation: positioned ? `zendir-tooltip ${tokens.animation.duration.fast}ms ${tokens.animation.easing.default} both` : 'none',\n            backdropFilter: 'blur(8px)',\n          }}\n        >\n          {content}\n          <style>\n            {`@keyframes zendir-tooltip { from { opacity: 0; transform: scale(0.95) translateY(${placement === 'bottom' ? '-4px' : placement === 'top' ? '4px' : '0'}); } to { opacity: 1; transform: scale(1) translateY(0); } }\n            @media (prefers-reduced-motion: reduce) { @keyframes zendir-tooltip { from, to { opacity: 1; transform: none; } } }`}\n          </style>\n        </div>,\n        document.body\n      )}\n    </>\n  );\n});\n\nexport default Tooltip;\n"],"names":["Tooltip"],"mappings":"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"}

package/dist/react/core/Typography.d.ts

@@ -0,0 +1,127 @@
+import { default as React } from 'react';
+
+/**
+ * Typography variant following Astro UX Design System
+ * Maps directly to official Astro typography tokens
+ */
+export type TypographyVariant = 'display1' | 'display2' | 'h1' | 'h1Bold' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body1Bold' | 'body2' | 'body2Bold' | 'body3' | 'body3Bold' | 'control1' | 'control1Bold' | 'compact' | 'compactBold' | 'micro' | 'microBold' | 'mono' | 'monoSmall' | 'monoCompact';
+/**
+ * Semantic element to render
+ */
+export type TypographyElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'code' | 'pre';
+/**
+ * Text color variants
+ */
+export type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'muted' | 'inverse' | 'inherit' | 'normal' | 'standby' | 'caution' | 'serious' | 'critical' | 'off';
+export interface TypographyProps {
+    /** Typography variant (required) */
+    variant: TypographyVariant;
+    /** HTML element to render */
+    as?: TypographyElement;
+    /** Text color */
+    color?: TypographyColor;
+    /** Enable tabular figures for numeric alignment */
+    tabular?: boolean;
+    /** Truncate with ellipsis */
+    truncate?: boolean;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Disable text wrapping */
+    noWrap?: boolean;
+    /** Transform text case */
+    transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    /** Additional CSS styles */
+    style?: React.CSSProperties;
+    /** Additional CSS class */
+    className?: string;
+    /** Children */
+    children?: React.ReactNode;
+    /** Test ID */
+    'data-testid'?: string;
+}
+/**
+ * Standard font family fallback stack per AstroUXDS
+ * Roboto is the primary font for all Astro applications
+ */
+export declare const FONT_FAMILY_PRIMARY = "\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+/**
+ * Monospace font stack for tabular data and code
+ * Roboto Mono is the primary monospace font for Astro
+ */
+export declare const FONT_FAMILY_MONO = "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
+export declare const FONT_WEIGHTS: {
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly bold: 700;
+};
+/**
+ * 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>
+ * ```
+ */
+export declare const Typography: React.FC<TypographyProps>;
+/** Display 1 - Largest display text */
+export declare const Display1: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Display 2 - Large display text */
+export declare const Display2: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Heading 1 */
+export declare const H1: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Heading 2 */
+export declare const H2: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Heading 3 */
+export declare const H3: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Heading 4 */
+export declare const H4: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Heading 5 */
+export declare const H5: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Heading 6 */
+export declare const H6: React.FC<Omit<TypographyProps, 'variant'>>;
+/** Body text level 1 (16px) */
+export declare const Body1: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Body text level 2 (14px) */
+export declare const Body2: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Body text level 3 (12px) */
+export declare const Body3: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Compact text for dense UIs (10px) */
+export declare const Compact: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Micro text for very tight spaces (9px) */
+export declare const Micro: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+/** Monospace text for data/code */
+export declare const Mono: React.FC<Omit<TypographyProps, 'variant'> & {
+    size?: 'normal' | 'small' | 'compact';
+}>;
+/** Data value text - monospace with tabular figures (for numeric displays) */
+export declare const DataText: React.FC<Omit<TypographyProps, 'variant' | 'tabular'> & {
+    size?: 'large' | 'normal' | 'small' | 'compact';
+}>;
+/** Label text for form controls and card headers */
+export declare const Label: React.FC<Omit<TypographyProps, 'variant'> & {
+    bold?: boolean;
+}>;
+export default Typography;

package/dist/react/core/Typography.js

@@ -0,0 +1,187 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "../theme/ThemeProvider.js";
+const FONT_FAMILY_PRIMARY = '"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
+};
+function getTypographyStyles(variant) {
+  const styles = {
+    // Display variants
+    display1: { fontSize: "3.75rem", fontWeight: 300, lineHeight: "4.375rem", letterSpacing: "-0.5px" },
+    display2: { fontSize: "3rem", fontWeight: 400, lineHeight: "3.5rem", letterSpacing: "0" },
+    // Heading variants
+    h1: { fontSize: "2.125rem", fontWeight: 400, lineHeight: "2.5rem", letterSpacing: "0.25px" },
+    h1Bold: { fontSize: "2.125rem", fontWeight: 700, lineHeight: "2.5rem", letterSpacing: "0.25px" },
+    h2: { fontSize: "1.5rem", fontWeight: 400, lineHeight: "1.75rem", letterSpacing: "0" },
+    h3: { fontSize: "1.25rem", fontWeight: 500, lineHeight: "1.5rem", letterSpacing: "0.15px" },
+    h4: { fontSize: "1.25rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0.15px" },
+    h5: { fontSize: "1.125rem", fontWeight: 400, lineHeight: "1.5rem", letterSpacing: "0" },
+    h6: { fontSize: "1.125rem", fontWeight: 300, lineHeight: "1.5rem", letterSpacing: "0" },
+    // 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];
+}
+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";
+}
+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 });
+};
+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 });
+};
+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
+};
+//# sourceMappingURL=Typography.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sources":["../../../src/react/core/Typography.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Typography Component\r\n * \r\n * AstroUXDS-compliant typography component providing consistent text styling\r\n * across the design system. All sizing uses rem units per Astro specifications.\r\n * \r\n * Typography Scale (Astro UX Design System):\r\n * - Display: Large hero text (display1, display2)\r\n * - Heading: Section headers (h1-h6)\r\n * - Body: Content text (body1, body2, body3)\r\n * - Control: UI element labels\r\n * - Mono: Tabular/code data\r\n * \r\n * @see https://www.astrouxds.com/foundations/typography/\r\n */\r\n\r\nimport React from 'react';\r\nimport { useTheme } from '../theme/ThemeProvider';\r\n\r\n// ============================================================================\r\n// Typography Variants (AstroUXDS Compliant)\r\n// ============================================================================\r\n\r\n/**\r\n * Typography variant following Astro UX Design System\r\n * Maps directly to official Astro typography tokens\r\n */\r\nexport type TypographyVariant =\r\n  // Display - Large hero text\r\n  | 'display1'\r\n  | 'display2'\r\n  // Headings\r\n  | 'h1'\r\n  | 'h1Bold'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  // Body text\r\n  | 'body1'\r\n  | 'body1Bold'\r\n  | 'body2'\r\n  | 'body2Bold'\r\n  | 'body3'\r\n  | 'body3Bold'\r\n  // Control (UI labels)\r\n  | 'control1'\r\n  | 'control1Bold'\r\n  // Compact variants for dense UIs (cards, badges)\r\n  | 'compact'      // 10px - for tight spaces\r\n  | 'compactBold'\r\n  | 'micro'        // 9px - for very tight spaces\r\n  | 'microBold'\r\n  // Monospace for data/code\r\n  | 'mono'\r\n  | 'monoSmall'\r\n  | 'monoCompact';\r\n\r\n/**\r\n * Semantic element to render\r\n */\r\nexport type TypographyElement =\r\n  | 'h1'\r\n  | 'h2'\r\n  | 'h3'\r\n  | 'h4'\r\n  | 'h5'\r\n  | 'h6'\r\n  | 'p'\r\n  | 'span'\r\n  | 'div'\r\n  | 'label'\r\n  | 'code'\r\n  | 'pre';\r\n\r\n/**\r\n * Text color variants\r\n */\r\nexport type TypographyColor =\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'tertiary'\r\n  | 'muted'\r\n  | 'inverse'\r\n  | 'inherit'\r\n  // Status colors\r\n  | 'normal'\r\n  | 'standby'\r\n  | 'caution'\r\n  | 'serious'\r\n  | 'critical'\r\n  | 'off';\r\n\r\nexport interface TypographyProps {\r\n  /** Typography variant (required) */\r\n  variant: TypographyVariant;\r\n  /** HTML element to render */\r\n  as?: TypographyElement;\r\n  /** Text color */\r\n  color?: TypographyColor;\r\n  /** Enable tabular figures for numeric alignment */\r\n  tabular?: boolean;\r\n  /** Truncate with ellipsis */\r\n  truncate?: boolean;\r\n  /** Text alignment */\r\n  align?: 'left' | 'center' | 'right';\r\n  /** Disable text wrapping */\r\n  noWrap?: boolean;\r\n  /** Transform text case */\r\n  transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\r\n  /** Additional CSS styles */\r\n  style?: React.CSSProperties;\r\n  /** Additional CSS class */\r\n  className?: string;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n  /** Test ID */\r\n  'data-testid'?: string;\r\n}\r\n\r\n// ============================================================================\r\n// AstroUXDS Font Stack (Standardized)\r\n// ============================================================================\r\n\r\n/**\r\n * Standard font family fallback stack per AstroUXDS\r\n * Roboto is the primary font for all Astro applications\r\n */\r\nexport const FONT_FAMILY_PRIMARY = '\"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif';\r\n\r\n/**\r\n * Monospace font stack for tabular data and code\r\n * Roboto Mono is the primary monospace font for Astro\r\n */\r\nexport const FONT_FAMILY_MONO = '\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace';\r\n\r\n// ============================================================================\r\n// AstroUXDS Font Weights\r\n// Official weights: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)\r\n// Note: Astro does NOT use 600 (semibold) - use 500 or 700 instead\r\n// ============================================================================\r\n\r\nexport const FONT_WEIGHTS = {\r\n  light: 300,\r\n  regular: 400,\r\n  medium: 500,\r\n  bold: 700,\r\n} as const;\r\n\r\n// ============================================================================\r\n// Typography Style Definitions\r\n// ============================================================================\r\n\r\ninterface TypographyStyleDef {\r\n  fontSize: string;\r\n  fontWeight: number;\r\n  lineHeight: string;\r\n  letterSpacing: string;\r\n  fontFamily?: string;\r\n}\r\n\r\n/**\r\n * Get typography styles for a variant\r\n * All sizes in rem for Astro compliance\r\n */\r\nfunction getTypographyStyles(variant: TypographyVariant): TypographyStyleDef {\r\n  const styles: Record<TypographyVariant, TypographyStyleDef> = {\r\n    // Display variants\r\n    display1: { fontSize: '3.75rem', fontWeight: 300, lineHeight: '4.375rem', letterSpacing: '-0.5px' },\r\n    display2: { fontSize: '3rem', fontWeight: 400, lineHeight: '3.5rem', letterSpacing: '0' },\r\n    \r\n    // Heading variants\r\n    h1: { fontSize: '2.125rem', fontWeight: 400, lineHeight: '2.5rem', letterSpacing: '0.25px' },\r\n    h1Bold: { fontSize: '2.125rem', fontWeight: 700, lineHeight: '2.5rem', letterSpacing: '0.25px' },\r\n    h2: { fontSize: '1.5rem', fontWeight: 400, lineHeight: '1.75rem', letterSpacing: '0' },\r\n    h3: { fontSize: '1.25rem', fontWeight: 500, lineHeight: '1.5rem', letterSpacing: '0.15px' },\r\n    h4: { fontSize: '1.25rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0.15px' },\r\n    h5: { fontSize: '1.125rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0' },\r\n    h6: { fontSize: '1.125rem', fontWeight: 300, lineHeight: '1.5rem', letterSpacing: '0' },\r\n    \r\n    // Body variants\r\n    body1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.5rem', letterSpacing: '0.5px' },\r\n    body1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.5rem', letterSpacing: '0.5px' },\r\n    body2: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    body2Bold: { fontSize: '0.875rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    body3: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0' },\r\n    body3Bold: { fontSize: '0.75rem', fontWeight: 700, lineHeight: '1rem', letterSpacing: '0' },\r\n    \r\n    // Control variants (UI labels)\r\n    control1: { fontSize: '1rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    control1Bold: { fontSize: '1rem', fontWeight: 700, lineHeight: '1.25rem', letterSpacing: '0.5px' },\r\n    \r\n    // Compact variants for dense UIs (cards, badges, data labels)\r\n    compact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0' },      // 10px\r\n    compactBold: { fontSize: '0.625rem', fontWeight: 500, lineHeight: '0.875rem', letterSpacing: '0' },\r\n    micro: { fontSize: '0.5625rem', fontWeight: 400, lineHeight: '0.75rem', letterSpacing: '0' },        // 9px\r\n    microBold: { fontSize: '0.5625rem', fontWeight: 500, lineHeight: '0.75rem', letterSpacing: '0' },\r\n    \r\n    // Monospace variants for data/code\r\n    mono: { fontSize: '0.875rem', fontWeight: 400, lineHeight: '1.25rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n    monoSmall: { fontSize: '0.75rem', fontWeight: 400, lineHeight: '1rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n    monoCompact: { fontSize: '0.625rem', fontWeight: 400, lineHeight: '0.875rem', letterSpacing: '0', fontFamily: FONT_FAMILY_MONO },\r\n  };\r\n  \r\n  return styles[variant];\r\n}\r\n\r\n/**\r\n * Get default HTML element for variant\r\n */\r\nfunction getDefaultElement(variant: TypographyVariant): TypographyElement {\r\n  if (variant.startsWith('display')) return 'h1';\r\n  if (variant.startsWith('h1')) return 'h1';\r\n  if (variant.startsWith('h2')) return 'h2';\r\n  if (variant.startsWith('h3')) return 'h3';\r\n  if (variant.startsWith('h4')) return 'h4';\r\n  if (variant.startsWith('h5')) return 'h5';\r\n  if (variant.startsWith('h6')) return 'h6';\r\n  if (variant.startsWith('mono')) return 'code';\r\n  if (variant.startsWith('control')) return 'label';\r\n  return 'span';\r\n}\r\n\r\n// ============================================================================\r\n// Typography Component\r\n// ============================================================================\r\n\r\n/**\r\n * Typography component providing AstroUXDS-compliant text styling.\r\n * \r\n * @example\r\n * ```tsx\r\n * // Heading\r\n * <Typography variant=\"h3\">Section Title</Typography>\r\n * \r\n * // Body text\r\n * <Typography variant=\"body1\" color=\"secondary\">Description text</Typography>\r\n * \r\n * // Monospace data with tabular figures\r\n * <Typography variant=\"mono\" tabular>123.456</Typography>\r\n * \r\n * // Compact label for cards\r\n * <Typography variant=\"compact\" color=\"tertiary\">LABEL</Typography>\r\n * ```\r\n */\r\nexport const Typography: React.FC<TypographyProps> = ({\r\n  variant,\r\n  as,\r\n  color = 'primary',\r\n  tabular = false,\r\n  truncate = false,\r\n  align,\r\n  noWrap = false,\r\n  transform,\r\n  style,\r\n  className,\r\n  children,\r\n  'data-testid': testId,\r\n}) => {\r\n  const { tokens } = useTheme();\r\n  \r\n  const typographyStyles = getTypographyStyles(variant);\r\n  const Element = as || getDefaultElement(variant);\r\n  \r\n  // Resolve color\r\n  const getColor = (): string | undefined => {\r\n    if (color === 'inherit') return 'inherit';\r\n    if (color === 'primary') return tokens.colors.text.primary;\r\n    if (color === 'secondary') return tokens.colors.text.secondary;\r\n    if (color === 'tertiary') return tokens.colors.text.tertiary;\r\n    if (color === 'muted') return tokens.colors.text.muted || tokens.colors.text.tertiary;\r\n    if (color === 'inverse') return tokens.colors.text.inverse;\r\n    // Status colors\r\n    if (color === 'normal') return tokens.colors.status.normal;\r\n    if (color === 'standby') return tokens.colors.status.standby;\r\n    if (color === 'caution') return tokens.colors.status.caution;\r\n    if (color === 'serious') return tokens.colors.status.serious;\r\n    if (color === 'critical') return tokens.colors.status.critical;\r\n    if (color === 'off') return tokens.colors.status.off;\r\n    return undefined;\r\n  };\r\n  \r\n  const combinedStyle: React.CSSProperties = {\r\n    fontFamily: typographyStyles.fontFamily || FONT_FAMILY_PRIMARY,\r\n    fontSize: typographyStyles.fontSize,\r\n    fontWeight: typographyStyles.fontWeight,\r\n    lineHeight: typographyStyles.lineHeight,\r\n    letterSpacing: typographyStyles.letterSpacing,\r\n    color: getColor(),\r\n    margin: 0,\r\n    padding: 0,\r\n    // Tabular figures for numeric alignment\r\n    ...(tabular && {\r\n      fontVariantNumeric: 'tabular-nums',\r\n      fontFeatureSettings: '\"tnum\"',\r\n    }),\r\n    // Truncation\r\n    ...(truncate && {\r\n      overflow: 'hidden',\r\n      textOverflow: 'ellipsis',\r\n      whiteSpace: 'nowrap',\r\n    }),\r\n    // No wrap\r\n    ...(noWrap && !truncate && {\r\n      whiteSpace: 'nowrap',\r\n    }),\r\n    // Text alignment\r\n    ...(align && { textAlign: align }),\r\n    // Text transform\r\n    ...(transform && { textTransform: transform }),\r\n    // Custom styles (can override defaults)\r\n    ...style,\r\n  };\r\n  \r\n  return (\r\n    <Element\r\n      className={className}\r\n      style={combinedStyle}\r\n      data-testid={testId}\r\n    >\r\n      {children}\r\n    </Element>\r\n  );\r\n};\r\n\r\n// ============================================================================\r\n// Convenience Components\r\n// ============================================================================\r\n\r\n/** Display 1 - Largest display text */\r\nexport const Display1: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"display1\" {...props} />\r\n);\r\n\r\n/** Display 2 - Large display text */\r\nexport const Display2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"display2\" {...props} />\r\n);\r\n\r\n/** Heading 1 */\r\nexport const H1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'h1Bold' : 'h1'} {...props} />\r\n);\r\n\r\n/** Heading 2 */\r\nexport const H2: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h2\" {...props} />\r\n);\r\n\r\n/** Heading 3 */\r\nexport const H3: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h3\" {...props} />\r\n);\r\n\r\n/** Heading 4 */\r\nexport const H4: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h4\" {...props} />\r\n);\r\n\r\n/** Heading 5 */\r\nexport const H5: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h5\" {...props} />\r\n);\r\n\r\n/** Heading 6 */\r\nexport const H6: React.FC<Omit<TypographyProps, 'variant'>> = (props) => (\r\n  <Typography variant=\"h6\" {...props} />\r\n);\r\n\r\n/** Body text level 1 (16px) */\r\nexport const Body1: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body1Bold' : 'body1'} {...props} />\r\n);\r\n\r\n/** Body text level 2 (14px) */\r\nexport const Body2: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body2Bold' : 'body2'} {...props} />\r\n);\r\n\r\n/** Body text level 3 (12px) */\r\nexport const Body3: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'body3Bold' : 'body3'} {...props} />\r\n);\r\n\r\n/** Compact text for dense UIs (10px) */\r\nexport const Compact: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'compactBold' : 'compact'} {...props} />\r\n);\r\n\r\n/** Micro text for very tight spaces (9px) */\r\nexport const Micro: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'microBold' : 'micro'} {...props} />\r\n);\r\n\r\n/** Monospace text for data/code */\r\nexport const Mono: React.FC<Omit<TypographyProps, 'variant'> & { size?: 'normal' | 'small' | 'compact' }> = ({ \r\n  size = 'normal', \r\n  tabular = true, // Default to tabular for mono\r\n  ...props \r\n}) => {\r\n  const variant = size === 'compact' ? 'monoCompact' : size === 'small' ? 'monoSmall' : 'mono';\r\n  return <Typography variant={variant} tabular={tabular} {...props} />;\r\n};\r\n\r\n/** Data value text - monospace with tabular figures (for numeric displays) */\r\nexport const DataText: React.FC<Omit<TypographyProps, 'variant' | 'tabular'> & { \r\n  size?: 'large' | 'normal' | 'small' | 'compact';\r\n}> = ({ size = 'normal', ...props }) => {\r\n  const variantMap: Record<string, TypographyVariant> = {\r\n    large: 'mono',\r\n    normal: 'mono',\r\n    small: 'monoSmall',\r\n    compact: 'monoCompact',\r\n  };\r\n  return <Typography variant={variantMap[size]} tabular {...props} />;\r\n};\r\n\r\n/** Label text for form controls and card headers */\r\nexport const Label: React.FC<Omit<TypographyProps, 'variant'> & { bold?: boolean }> = ({ bold, ...props }) => (\r\n  <Typography variant={bold ? 'control1Bold' : 'control1'} as=\"label\" {...props} />\r\n);\r\n\r\nexport default Typography;\r\n"],"names":[],"mappings":"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"}