@zendir/ui 0.5.0 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sources":["../../../../src/react/core/display/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// Font stacks\n// ============================================================================\n\n/**\n * Primary body font stack used by all components.\n *\n * Public Sans is the lead face for body text; Roboto is the fallback that\n * activates when web fonts fail to load (Public Sans is not installed\n * locally on most machines, but Roboto is on Android by default — and\n * AstroUXDS specifies Roboto as the canonical engineering-grade fallback).\n * Below that, the OS-native system fonts complete the chain so the UI\n * never falls through to Times.\n *\n * Read by `var(--font-family-primary)` so consumers can override at the\n * `:root` level (set by `<ThemeProvider>` from `tokens.typography.fontFamily.primary`).\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 stack for tabular data, code, and numeric readouts.\n * Roboto Mono leads (AstroUXDS canonical), then OS-native mono fonts.\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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"}
+{"version":3,"file":"Typography.js","names":[],"sources":["../../../../src/react/core/display/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// Font stacks\n// ============================================================================\n\n/**\n * Primary body font stack used by all components.\n *\n * Public Sans is the lead face for body text; Roboto is the fallback that\n * activates when web fonts fail to load (Public Sans is not installed\n * locally on most machines, but Roboto is on Android by default — and\n * AstroUXDS specifies Roboto as the canonical engineering-grade fallback).\n * Below that, the OS-native system fonts complete the chain so the UI\n * never falls through to Times.\n *\n * Read by `var(--font-family-primary)` so consumers can override at the\n * `:root` level (set by `<ThemeProvider>` from `tokens.typography.fontFamily.primary`).\n */\nexport const FONT_FAMILY_PRIMARY =\n  'var(--font-family-primary, \"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif)';\n\n/**\n * Monospace stack for tabular data, code, and numeric readouts.\n * Roboto Mono leads (AstroUXDS canonical), then OS-native mono fonts.\n */\nexport const FONT_FAMILY_MONO =\n  '\"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: {\n      fontSize: \"3.75rem\",\n      fontWeight: 300,\n      lineHeight: \"4.375rem\",\n      letterSpacing: \"-0.5px\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    display2: {\n      fontSize: \"3rem\",\n      fontWeight: 400,\n      lineHeight: \"3.5rem\",\n      letterSpacing: \"0\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n\n    // Heading variants\n    h1: {\n      fontSize: \"2.125rem\",\n      fontWeight: 400,\n      lineHeight: \"2.5rem\",\n      letterSpacing: \"0.25px\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h1Bold: {\n      fontSize: \"2.125rem\",\n      fontWeight: 700,\n      lineHeight: \"2.5rem\",\n      letterSpacing: \"0.25px\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h2: {\n      fontSize: \"1.5rem\",\n      fontWeight: 400,\n      lineHeight: \"1.75rem\",\n      letterSpacing: \"0\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h3: {\n      fontSize: \"1.25rem\",\n      fontWeight: 500,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0.15px\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h4: {\n      fontSize: \"1.25rem\",\n      fontWeight: 300,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0.15px\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h5: {\n      fontSize: \"1.125rem\",\n      fontWeight: 400,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n    h6: {\n      fontSize: \"1.125rem\",\n      fontWeight: 300,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0\",\n      fontFamily: 'var(--font-family-heading, \"Sora\", \"Roboto\", sans-serif)',\n    },\n\n    // Body variants\n    body1: {\n      fontSize: \"1rem\",\n      fontWeight: 400,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0.5px\",\n    },\n    body1Bold: {\n      fontSize: \"1rem\",\n      fontWeight: 700,\n      lineHeight: \"1.5rem\",\n      letterSpacing: \"0.5px\",\n    },\n    body2: {\n      fontSize: \"0.875rem\",\n      fontWeight: 400,\n      lineHeight: \"1.25rem\",\n      letterSpacing: \"0.5px\",\n    },\n    body2Bold: {\n      fontSize: \"0.875rem\",\n      fontWeight: 700,\n      lineHeight: \"1.25rem\",\n      letterSpacing: \"0.5px\",\n    },\n    body3: {\n      fontSize: \"0.75rem\",\n      fontWeight: 400,\n      lineHeight: \"1rem\",\n      letterSpacing: \"0\",\n    },\n    body3Bold: {\n      fontSize: \"0.75rem\",\n      fontWeight: 700,\n      lineHeight: \"1rem\",\n      letterSpacing: \"0\",\n    },\n\n    // Control variants (UI labels)\n    control1: {\n      fontSize: \"1rem\",\n      fontWeight: 400,\n      lineHeight: \"1.25rem\",\n      letterSpacing: \"0.5px\",\n    },\n    control1Bold: {\n      fontSize: \"1rem\",\n      fontWeight: 700,\n      lineHeight: \"1.25rem\",\n      letterSpacing: \"0.5px\",\n    },\n\n    // Compact variants for dense UIs (cards, badges, data labels)\n    compact: {\n      fontSize: \"0.625rem\",\n      fontWeight: 400,\n      lineHeight: \"0.875rem\",\n      letterSpacing: \"0\",\n    }, // 10px\n    compactBold: {\n      fontSize: \"0.625rem\",\n      fontWeight: 500,\n      lineHeight: \"0.875rem\",\n      letterSpacing: \"0\",\n    },\n    micro: {\n      fontSize: \"0.5625rem\",\n      fontWeight: 400,\n      lineHeight: \"0.75rem\",\n      letterSpacing: \"0\",\n    }, // 9px\n    microBold: {\n      fontSize: \"0.5625rem\",\n      fontWeight: 500,\n      lineHeight: \"0.75rem\",\n      letterSpacing: \"0\",\n    },\n\n    // Monospace variants for data/code\n    mono: {\n      fontSize: \"0.875rem\",\n      fontWeight: 400,\n      lineHeight: \"1.25rem\",\n      letterSpacing: \"0\",\n      fontFamily: FONT_FAMILY_MONO,\n    },\n    monoSmall: {\n      fontSize: \"0.75rem\",\n      fontWeight: 400,\n      lineHeight: \"1rem\",\n      letterSpacing: \"0\",\n      fontFamily: FONT_FAMILY_MONO,\n    },\n    monoCompact: {\n      fontSize: \"0.625rem\",\n      fontWeight: 400,\n      lineHeight: \"0.875rem\",\n      letterSpacing: \"0\",\n      fontFamily: FONT_FAMILY_MONO,\n    },\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\")\n      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 &&\n      !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 className={className} style={combinedStyle} data-testid={testId}>\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<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ 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<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography variant={bold ? \"body1Bold\" : \"body1\"} {...props} />\n);\n\n/** Body text level 2 (14px) */\nexport const Body2: React.FC<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography variant={bold ? \"body2Bold\" : \"body2\"} {...props} />\n);\n\n/** Body text level 3 (12px) */\nexport const Body3: React.FC<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography variant={bold ? \"body3Bold\" : \"body3\"} {...props} />\n);\n\n/** Compact text for dense UIs (10px) */\nexport const Compact: React.FC<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography variant={bold ? \"compactBold\" : \"compact\"} {...props} />\n);\n\n/** Micro text for very tight spaces (9px) */\nexport const Micro: React.FC<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography variant={bold ? \"microBold\" : \"micro\"} {...props} />\n);\n\n/** Monospace text for data/code */\nexport const Mono: React.FC<\n  Omit<TypographyProps, \"variant\"> & { size?: \"normal\" | \"small\" | \"compact\" }\n> = ({\n  size = \"normal\",\n  tabular = true, // Default to tabular for mono\n  ...props\n}) => {\n  const variant =\n    size === \"compact\"\n      ? \"monoCompact\"\n      : size === \"small\"\n        ? \"monoSmall\"\n        : \"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<\n  Omit<TypographyProps, \"variant\" | \"tabular\"> & {\n    size?: \"large\" | \"normal\" | \"small\" | \"compact\";\n  }\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<\n  Omit<TypographyProps, \"variant\"> & { bold?: boolean }\n> = ({ bold, ...props }) => (\n  <Typography\n    variant={bold ? \"control1Bold\" : \"control1\"}\n    as=\"label\"\n    {...props}\n  />\n);\n\nexport default Typography;\n"],"mappings":"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"}

package/dist/react/core/feedback/ConfirmDialog.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type ConfirmStatus = 'normal' | 'caution' | 'serious' | 'critical';
+export type ConfirmStatus = "normal" | "caution" | "serious" | "critical";
 export interface ConfirmOptions {
     /** Dialog title */
     title: string;