@zendir/ui 0.2.21 → 0.3.0

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

@@ -1 +0,0 @@
-{"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.js.map

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