{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text",
  "title": "Text",
  "description": "the only Text · the scale is previewed in **Foundations › Typography**, not Components",
  "dependencies": [
    "@rn-primitives/slot@^1.5.2",
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "@kit-native/lib-fonts",
    "@kit-native/lib-palette-context",
    "@kit-native/lib-utils"
  ],
  "files": [
    {
      "path": "components/ui/text.tsx",
      "content": "import { FONT_FAMILY } from '@/lib/fonts';\nimport { useLiveFonts } from '@/lib/palette-context';\nimport { cn } from '@/lib/utils';\nimport { Slot } from '@rn-primitives/slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\nimport { Platform, Text as RNText, type Role } from 'react-native';\n\nconst textVariants = cva(\n  cn(\n    'text-foreground text-base',\n    Platform.select({\n      web: 'select-text',\n    })\n  ),\n  {\n    variants: {\n      variant: {\n        default: '',\n        h1: cn(\n          'text-center text-4xl font-extrabold tracking-tight',\n          Platform.select({ web: 'scroll-m-20 text-balance' })\n        ),\n        h2: cn(\n          'text-3xl font-semibold tracking-tight',\n          Platform.select({ web: 'scroll-m-20 first:mt-0' })\n        ),\n        h3: cn('text-2xl font-semibold tracking-tight', Platform.select({ web: 'scroll-m-20' })),\n        h4: cn('text-xl font-semibold tracking-tight', Platform.select({ web: 'scroll-m-20' })),\n        p: 'mt-3 leading-prose sm:mt-6',\n        blockquote: 'mt-4 border-l-2 pl-3 italic sm:mt-6 sm:pl-6',\n        code: cn(\n          'bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold'\n        ),\n        lead: 'text-muted-foreground text-xl',\n        large: 'text-lg font-semibold',\n        small: 'text-sm font-medium leading-none',\n        muted: 'text-muted-foreground text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\ntype TextVariantProps = VariantProps<typeof textVariants>;\n\ntype TextVariant = NonNullable<TextVariantProps['variant']>;\n\nconst ROLE: Partial<Record<TextVariant, Role>> = {\n  h1: 'heading',\n  h2: 'heading',\n  h3: 'heading',\n  h4: 'heading',\n  blockquote: Platform.select({ web: 'blockquote' as Role }),\n  code: Platform.select({ web: 'code' as Role }),\n};\n\nconst ARIA_LEVEL: Partial<Record<TextVariant, string>> = {\n  h1: '1',\n  h2: '2',\n  h3: '3',\n  h4: '4',\n};\n\nconst TextClassContext = React.createContext<string | undefined>(undefined);\n\nconst WEIGHT: Record<string, number> = {\n  'font-thin': 100,\n  'font-extralight': 200,\n  'font-light': 300,\n  'font-normal': 400,\n  'font-medium': 500,\n  'font-semibold': 600,\n  'font-bold': 700,\n  'font-extrabold': 800,\n  'font-black': 900,\n};\nconst HEADINGS = new Set<TextVariant>(['h1', 'h2', 'h3', 'h4']);\nconst SYSTEM_STACK = 'ui-sans-serif, system-ui, -apple-system, sans-serif';\nconst MONO_STACK = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * The theme's font for this text (lib/fonts.ts). Headings (h1–h4, or a `font-heading` class) take the\n * heading font, `font-mono` the mono font, everything else the body font. A custom font is one\n * family per weight on native (Android ignores fontWeight for it), so the weight in the classes picks the\n * family and fontWeight is reset. A live theme from the docs picker (web only) uses its Google font.\n */\nfunction useFontStyle(classes: string, variant: TextVariant = 'default') {\n  const live = useLiveFonts();\n  const mono = /(^|\\s)font-mono(\\s|$)/.test(classes);\n  const role = mono ? 'mono' : HEADINGS.has(variant) || /(^|\\s)font-heading(\\s|$)/.test(classes) ? 'heading' : 'body';\n  const families = FONT_FAMILY[role];\n  if (live) {\n    // A live theme decides every role: its font, or the system font over a committed custom one.\n    const family = live[role];\n    const stack = mono ? MONO_STACK : SYSTEM_STACK;\n    if (family) return { fontFamily: `\"${family}\", ${stack}` };\n    return families ? { fontFamily: stack } : undefined;\n  }\n  if (!families) return undefined;\n  const weight = classes.split(/\\s+/).reduce((w, c) => WEIGHT[c] ?? w, 400);\n  const loaded = Object.keys(families).map(Number);\n  const nearest = loaded.reduce((best, w) => (Math.abs(w - weight) < Math.abs(best - weight) ? w : best), loaded[0]);\n  return { fontFamily: families[nearest], fontWeight: 'normal' as const };\n}\n\nfunction Text({\n  className,\n  asChild = false,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof RNText> &\n  React.RefAttributes<typeof RNText> &\n  TextVariantProps & {\n    asChild?: boolean;\n  }) {\n  const textClass = React.useContext(TextClassContext);\n  const Component = asChild ? Slot : RNText;\n  const classes = cn(textVariants({ variant }), textClass, className);\n  const font = useFontStyle(classes, variant ?? 'default');\n  return (\n    <Component\n      className={classes}\n      role={variant ? ROLE[variant] : undefined}\n      aria-level={variant ? ARIA_LEVEL[variant] : undefined}\n      {...props}\n      style={font ? [font, props.style] : props.style}\n    />\n  );\n}\n\nexport { Text, TextClassContext, useFontStyle };\n",
      "type": "registry:ui",
      "target": "components/ui/text.tsx"
    }
  ],
  "meta": {
    "exports": [
      "Text"
    ]
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "data"
  ],
  "type": "registry:ui"
}