@enjoys/context-engine 1.2.0 → 1.4.1

package/data/hover/shadcn.json

@@ -0,0 +1,450 @@
+{
+  "language": "shadcn",
+  "hovers": {
+    "Accordion": {
+      "contents": [
+        { "value": "```tsx\nconst Accordion: React.ForwardRefExoticComponent<AccordionProps>\n```\nA vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI Accordion.\n\n```tsx\n<Accordion type=\"single\" collapsible>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Title</AccordionTrigger>\n    <AccordionContent>Content</AccordionContent>\n  </AccordionItem>\n</Accordion>\n```" }
+      ]
+    },
+    "AccordionItem": {
+      "contents": [
+        { "value": "```tsx\nconst AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps>\n```\nContains all parts of a collapsible section within an Accordion. Requires a unique `value` prop." }
+      ]
+    },
+    "AccordionTrigger": {
+      "contents": [
+        { "value": "```tsx\nconst AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps>\n```\nToggles the collapsed state of its associated AccordionItem." }
+      ]
+    },
+    "AccordionContent": {
+      "contents": [
+        { "value": "```tsx\nconst AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps>\n```\nContains the collapsible content for an AccordionItem. Animates open/close." }
+      ]
+    },
+    "Alert": {
+      "contents": [
+        { "value": "```tsx\nconst Alert: React.ForwardRefExoticComponent<AlertProps & { variant?: 'default' | 'destructive' }>\n```\nDisplays a callout for important information. Supports `default` and `destructive` variants.\n\n```tsx\n<Alert variant=\"destructive\">\n  <AlertTitle>Error</AlertTitle>\n  <AlertDescription>Something went wrong.</AlertDescription>\n</Alert>\n```" }
+      ]
+    },
+    "AlertTitle": {
+      "contents": [
+        { "value": "```tsx\nconst AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement>>\n```\nTitle element rendered inside an Alert component." }
+      ]
+    },
+    "AlertDescription": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement>>\n```\nDescription element rendered inside an Alert component." }
+      ]
+    },
+    "AlertDialog": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDialog: React.FC<AlertDialogProps>\n```\nA modal dialog that interrupts the user with important content and expects a response. Built on Radix UI AlertDialog.\n\n```tsx\n<AlertDialog>\n  <AlertDialogTrigger>Open</AlertDialogTrigger>\n  <AlertDialogContent>\n    <AlertDialogHeader>\n      <AlertDialogTitle>Are you sure?</AlertDialogTitle>\n      <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>\n    </AlertDialogHeader>\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction>Continue</AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>\n```" }
+      ]
+    },
+    "AlertDialogTrigger": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogTriggerProps>\n```\nThe button that opens the AlertDialog. Use `asChild` to merge onto a custom trigger element." }
+      ]
+    },
+    "AlertDialogContent": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps>\n```\nThe content container for the AlertDialog overlay." }
+      ]
+    },
+    "AlertDialogAction": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDialogAction: React.ForwardRefExoticComponent<AlertDialogActionProps>\n```\nThe confirm action button that closes the AlertDialog." }
+      ]
+    },
+    "AlertDialogCancel": {
+      "contents": [
+        { "value": "```tsx\nconst AlertDialogCancel: React.ForwardRefExoticComponent<AlertDialogCancelProps>\n```\nThe cancel button that closes the AlertDialog without action." }
+      ]
+    },
+    "AspectRatio": {
+      "contents": [
+        { "value": "```tsx\nconst AspectRatio: React.ForwardRefExoticComponent<AspectRatioProps>\n```\nDisplays content within a desired aspect ratio. Built on Radix UI AspectRatio.\n\n```tsx\n<AspectRatio ratio={16 / 9}>\n  <img src=\"...\" alt=\"...\" className=\"object-cover\" />\n</AspectRatio>\n```" }
+      ]
+    },
+    "Avatar": {
+      "contents": [
+        { "value": "```tsx\nconst Avatar: React.ForwardRefExoticComponent<AvatarProps>\n```\nAn image element with a fallback for representing the user. Built on Radix UI Avatar.\n\n```tsx\n<Avatar>\n  <AvatarImage src=\"url\" />\n  <AvatarFallback>CN</AvatarFallback>\n</Avatar>\n```" }
+      ]
+    },
+    "AvatarImage": {
+      "contents": [
+        { "value": "```tsx\nconst AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps>\n```\nThe image to render inside an Avatar. Falls back to AvatarFallback on load error." }
+      ]
+    },
+    "AvatarFallback": {
+      "contents": [
+        { "value": "```tsx\nconst AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps>\n```\nFallback element rendered when AvatarImage fails to load. Typically shows initials." }
+      ]
+    },
+    "Badge": {
+      "contents": [
+        { "value": "```tsx\nconst Badge: React.FC<BadgeProps & VariantProps<typeof badgeVariants>>\n```\nDisplays a badge or label. Variants: `default`, `secondary`, `outline`, `destructive`.\n\n```tsx\n<Badge variant=\"secondary\">New</Badge>\n```" }
+      ]
+    },
+    "Button": {
+      "contents": [
+        { "value": "```tsx\nconst Button: React.ForwardRefExoticComponent<ButtonProps & VariantProps<typeof buttonVariants>>\n```\nA button component with multiple variants and sizes.\n\nVariants: `default`, `destructive`, `outline`, `secondary`, `ghost`, `link`\nSizes: `default`, `sm`, `lg`, `icon`\n\n```tsx\n<Button variant=\"outline\" size=\"sm\">Click me</Button>\n```" }
+      ]
+    },
+    "Calendar": {
+      "contents": [
+        { "value": "```tsx\nconst Calendar: React.FC<CalendarProps>\n```\nA date picker calendar built on react-day-picker. Supports `single`, `multiple`, and `range` selection modes.\n\n```tsx\n<Calendar mode=\"single\" selected={date} onSelect={setDate} />\n```" }
+      ]
+    },
+    "Card": {
+      "contents": [
+        { "value": "```tsx\nconst Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>>\n```\nA container with header, content, and footer sections.\n\n```tsx\n<Card>\n  <CardHeader><CardTitle>Title</CardTitle></CardHeader>\n  <CardContent>Content</CardContent>\n</Card>\n```" }
+      ]
+    },
+    "CardHeader": {
+      "contents": [
+        { "value": "```tsx\nconst CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>>\n```\nThe header section of a Card. Contains CardTitle and CardDescription." }
+      ]
+    },
+    "CardTitle": {
+      "contents": [
+        { "value": "```tsx\nconst CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement>>\n```\nThe title element within a CardHeader." }
+      ]
+    },
+    "CardDescription": {
+      "contents": [
+        { "value": "```tsx\nconst CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement>>\n```\nThe description element within a CardHeader." }
+      ]
+    },
+    "CardContent": {
+      "contents": [
+        { "value": "```tsx\nconst CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>>\n```\nThe main content area of a Card." }
+      ]
+    },
+    "CardFooter": {
+      "contents": [
+        { "value": "```tsx\nconst CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>>\n```\nThe footer section of a Card." }
+      ]
+    },
+    "Checkbox": {
+      "contents": [
+        { "value": "```tsx\nconst Checkbox: React.ForwardRefExoticComponent<CheckboxProps>\n```\nA control that allows toggling between checked and not checked. Built on Radix UI Checkbox.\n\n```tsx\n<Checkbox checked={checked} onCheckedChange={setChecked} />\n```" }
+      ]
+    },
+    "Collapsible": {
+      "contents": [
+        { "value": "```tsx\nconst Collapsible: React.ForwardRefExoticComponent<CollapsibleProps>\n```\nAn interactive component which expands/collapses content. Built on Radix UI Collapsible." }
+      ]
+    },
+    "Command": {
+      "contents": [
+        { "value": "```tsx\nconst Command: React.ForwardRefExoticComponent<CommandProps>\n```\nFast, composable command menu. Built on cmdk.\n\n```tsx\n<Command>\n  <CommandInput placeholder=\"Search...\" />\n  <CommandList>\n    <CommandGroup heading=\"Suggestions\">\n      <CommandItem>Item</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>\n```" }
+      ]
+    },
+    "CommandDialog": {
+      "contents": [
+        { "value": "```tsx\nconst CommandDialog: React.FC<CommandDialogProps>\n```\nA dialog wrapper for the Command component for modal command palette usage." }
+      ]
+    },
+    "ContextMenu": {
+      "contents": [
+        { "value": "```tsx\nconst ContextMenu: React.FC<ContextMenuProps>\n```\nDisplays a menu at the pointer's position on right-click. Built on Radix UI ContextMenu." }
+      ]
+    },
+    "Dialog": {
+      "contents": [
+        { "value": "```tsx\nconst Dialog: React.FC<DialogProps>\n```\nA window overlaid on the primary content. Built on Radix UI Dialog.\n\n```tsx\n<Dialog>\n  <DialogTrigger>Open</DialogTrigger>\n  <DialogContent>\n    <DialogHeader><DialogTitle>Title</DialogTitle></DialogHeader>\n  </DialogContent>\n</Dialog>\n```" }
+      ]
+    },
+    "DialogContent": {
+      "contents": [
+        { "value": "```tsx\nconst DialogContent: React.ForwardRefExoticComponent<DialogContentProps>\n```\nThe content container for Dialog with overlay backdrop and close button." }
+      ]
+    },
+    "DialogTrigger": {
+      "contents": [
+        { "value": "```tsx\nconst DialogTrigger: React.ForwardRefExoticComponent<DialogTriggerProps>\n```\nThe element that triggers opening the Dialog. Use `asChild` to compose with custom elements." }
+      ]
+    },
+    "DialogTitle": {
+      "contents": [
+        { "value": "```tsx\nconst DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps>\n```\nAccessible title for the Dialog. Required for screen reader support." }
+      ]
+    },
+    "DialogDescription": {
+      "contents": [
+        { "value": "```tsx\nconst DialogDescription: React.ForwardRefExoticComponent<DialogDescriptionProps>\n```\nAccessible description for the Dialog." }
+      ]
+    },
+    "Drawer": {
+      "contents": [
+        { "value": "```tsx\nconst Drawer: React.FC<DrawerProps>\n```\nA drawer component for mobile-friendly panels that slides in from the screen edge. Built on vaul." }
+      ]
+    },
+    "DropdownMenu": {
+      "contents": [
+        { "value": "```tsx\nconst DropdownMenu: React.FC<DropdownMenuProps>\n```\nDisplays a menu triggered by a button. Built on Radix UI DropdownMenu.\n\n```tsx\n<DropdownMenu>\n  <DropdownMenuTrigger>Open</DropdownMenuTrigger>\n  <DropdownMenuContent>\n    <DropdownMenuItem>Item</DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>\n```" }
+      ]
+    },
+    "Form": {
+      "contents": [
+        { "value": "```tsx\nconst Form: React.FC<FormProviderProps>\n```\nForm component wrapping react-hook-form's FormProvider. Provides form context to FormField children.\n\n```tsx\nconst form = useForm();\n<Form {...form}>\n  <form onSubmit={form.handleSubmit(onSubmit)}>\n    <FormField ... />\n  </form>\n</Form>\n```" }
+      ]
+    },
+    "FormField": {
+      "contents": [
+        { "value": "```tsx\nconst FormField: <TFieldValues, TName>({ control, name, render }) => ReactElement\n```\nConnects a form control to react-hook-form with automatic error handling. Uses render prop pattern.\n\n```tsx\n<FormField control={form.control} name=\"email\" render={({ field }) => (\n  <FormItem>\n    <FormLabel>Email</FormLabel>\n    <FormControl><Input {...field} /></FormControl>\n    <FormMessage />\n  </FormItem>\n)} />\n```" }
+      ]
+    },
+    "FormItem": {
+      "contents": [
+        { "value": "```tsx\nconst FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement>>\n```\nContainer for a single form field including label, control, description, and message." }
+      ]
+    },
+    "FormLabel": {
+      "contents": [
+        { "value": "```tsx\nconst FormLabel: React.ForwardRefExoticComponent<LabelProps>\n```\nAccessible label for a form field. Automatically associated with the FormControl." }
+      ]
+    },
+    "FormControl": {
+      "contents": [
+        { "value": "```tsx\nconst FormControl: React.ForwardRefExoticComponent<SlotProps>\n```\nWraps the form input element with proper aria attributes (aria-describedby, aria-invalid)." }
+      ]
+    },
+    "FormDescription": {
+      "contents": [
+        { "value": "```tsx\nconst FormDescription: React.ForwardRefExoticComponent<HTMLParagraphElement>\n```\nDescriptive help text displayed below a form control." }
+      ]
+    },
+    "FormMessage": {
+      "contents": [
+        { "value": "```tsx\nconst FormMessage: React.ForwardRefExoticComponent<HTMLParagraphElement>\n```\nDisplays the validation error message for a form field. Automatically reads from react-hook-form error state." }
+      ]
+    },
+    "HoverCard": {
+      "contents": [
+        { "value": "```tsx\nconst HoverCard: React.FC<HoverCardProps>\n```\nFor sighted users to preview content available behind a link. Built on Radix UI HoverCard." }
+      ]
+    },
+    "Input": {
+      "contents": [
+        { "value": "```tsx\nconst Input: React.ForwardRefExoticComponent<InputProps>\n```\nA styled HTML input element that extends native input attributes.\n\n```tsx\n<Input type=\"email\" placeholder=\"Enter email\" />\n```" }
+      ]
+    },
+    "Label": {
+      "contents": [
+        { "value": "```tsx\nconst Label: React.ForwardRefExoticComponent<LabelProps>\n```\nRenders an accessible label associated with controls. Built on Radix UI Label.\n\n```tsx\n<Label htmlFor=\"email\">Email</Label>\n```" }
+      ]
+    },
+    "Popover": {
+      "contents": [
+        { "value": "```tsx\nconst Popover: React.FC<PopoverProps>\n```\nDisplays rich content in a portal, triggered by a button. Built on Radix UI Popover." }
+      ]
+    },
+    "Progress": {
+      "contents": [
+        { "value": "```tsx\nconst Progress: React.ForwardRefExoticComponent<ProgressProps>\n```\nDisplays a progress indicator. Built on Radix UI Progress.\n\n```tsx\n<Progress value={60} />\n```" }
+      ]
+    },
+    "RadioGroup": {
+      "contents": [
+        { "value": "```tsx\nconst RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps>\n```\nA set of checkable buttons where only one can be checked at a time. Built on Radix UI RadioGroup." }
+      ]
+    },
+    "ScrollArea": {
+      "contents": [
+        { "value": "```tsx\nconst ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps>\n```\nAugments native scroll with custom cross-browser styling. Built on Radix UI ScrollArea." }
+      ]
+    },
+    "Select": {
+      "contents": [
+        { "value": "```tsx\nconst Select: React.FC<SelectProps>\n```\nDisplays a list of options for the user to pick from. Built on Radix UI Select.\n\n```tsx\n<Select>\n  <SelectTrigger><SelectValue placeholder=\"Pick\" /></SelectTrigger>\n  <SelectContent>\n    <SelectItem value=\"a\">A</SelectItem>\n  </SelectContent>\n</Select>\n```" }
+      ]
+    },
+    "Separator": {
+      "contents": [
+        { "value": "```tsx\nconst Separator: React.ForwardRefExoticComponent<SeparatorProps>\n```\nVisually or semantically separates content. Supports horizontal and vertical orientation." }
+      ]
+    },
+    "Sheet": {
+      "contents": [
+        { "value": "```tsx\nconst Sheet: React.FC<SheetProps>\n```\nA panel that slides in from the edge of the screen. Sides: `right`, `left`, `top`, `bottom`." }
+      ]
+    },
+    "Skeleton": {
+      "contents": [
+        { "value": "```tsx\nconst Skeleton: React.FC<React.HTMLAttributes<HTMLDivElement>>\n```\nUsed to show a placeholder while content is loading.\n\n```tsx\n<Skeleton className=\"h-4 w-[250px]\" />\n```" }
+      ]
+    },
+    "Slider": {
+      "contents": [
+        { "value": "```tsx\nconst Slider: React.ForwardRefExoticComponent<SliderProps>\n```\nAn input for selecting a value from a range. Built on Radix UI Slider.\n\n```tsx\n<Slider defaultValue={[50]} max={100} step={1} />\n```" }
+      ]
+    },
+    "Switch": {
+      "contents": [
+        { "value": "```tsx\nconst Switch: React.ForwardRefExoticComponent<SwitchProps>\n```\nA toggle control that switches between on and off states. Built on Radix UI Switch." }
+      ]
+    },
+    "Table": {
+      "contents": [
+        { "value": "```tsx\nconst Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement>>\n```\nA responsive table with TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption subcomponents." }
+      ]
+    },
+    "Tabs": {
+      "contents": [
+        { "value": "```tsx\nconst Tabs: React.ForwardRefExoticComponent<TabsProps>\n```\nA set of layered sections of content displayed one at a time. Built on Radix UI Tabs.\n\n```tsx\n<Tabs defaultValue=\"tab1\">\n  <TabsList><TabsTrigger value=\"tab1\">Tab 1</TabsTrigger></TabsList>\n  <TabsContent value=\"tab1\">Content</TabsContent>\n</Tabs>\n```" }
+      ]
+    },
+    "Textarea": {
+      "contents": [
+        { "value": "```tsx\nconst Textarea: React.ForwardRefExoticComponent<TextareaProps>\n```\nA styled textarea element for multi-line text input.\n\n```tsx\n<Textarea placeholder=\"Type here...\" />\n```" }
+      ]
+    },
+    "Toast": {
+      "contents": [
+        { "value": "```tsx\nconst Toast: React.ForwardRefExoticComponent<ToastProps>\n```\nA succinct message displayed temporarily. Variants: `default`, `destructive`." }
+      ]
+    },
+    "Toaster": {
+      "contents": [
+        { "value": "```tsx\nconst Toaster: React.FC<{}>\n```\nRenders toast notifications. Place once in your root layout.\n\n```tsx\n// app/layout.tsx\n<Toaster />\n```" }
+      ]
+    },
+    "Toggle": {
+      "contents": [
+        { "value": "```tsx\nconst Toggle: React.ForwardRefExoticComponent<ToggleProps>\n```\nA two-state button that can be on or off. Built on Radix UI Toggle." }
+      ]
+    },
+    "ToggleGroup": {
+      "contents": [
+        { "value": "```tsx\nconst ToggleGroup: React.ForwardRefExoticComponent<ToggleGroupProps>\n```\nA group of toggle buttons. Supports `single` and `multiple` selection types." }
+      ]
+    },
+    "Tooltip": {
+      "contents": [
+        { "value": "```tsx\nconst Tooltip: React.FC<TooltipProps>\n```\nA popup that displays information on hover/focus. Must be wrapped in TooltipProvider.\n\n```tsx\n<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger>Hover</TooltipTrigger>\n    <TooltipContent>Info</TooltipContent>\n  </Tooltip>\n</TooltipProvider>\n```" }
+      ]
+    },
+    "TooltipProvider": {
+      "contents": [
+        { "value": "```tsx\nconst TooltipProvider: React.FC<TooltipProviderProps>\n```\nRequired ancestor for Tooltip components. Typically wraps your entire app or a section of it." }
+      ]
+    },
+    "TooltipTrigger": {
+      "contents": [
+        { "value": "```tsx\nconst TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps>\n```\nThe element that triggers the Tooltip on hover or focus." }
+      ]
+    },
+    "TooltipContent": {
+      "contents": [
+        { "value": "```tsx\nconst TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps>\n```\nThe content displayed inside the Tooltip popup." }
+      ]
+    },
+    "cn": {
+      "contents": [
+        { "value": "```tsx\nfunction cn(...inputs: ClassValue[]): string\n```\nMerges Tailwind CSS class names using `clsx` and `tailwind-merge`. Handles conditional classes, deduplication, and conflict resolution.\n\n```tsx\nimport { cn } from \"@/lib/utils\";\ncn(\"px-2 py-1\", isActive && \"bg-primary text-white\");\n```" }
+      ]
+    },
+    "cva": {
+      "contents": [
+        { "value": "```tsx\nfunction cva(base?: ClassValue, config?: Config): (props?) => string\n```\nCreates variant-based className functions from `class-variance-authority`. Used to define reusable component variants.\n\n```tsx\nconst buttonVariants = cva(\"inline-flex items-center\", {\n  variants: {\n    variant: { default: \"bg-primary\", outline: \"border\" },\n    size: { default: \"h-10 px-4\", sm: \"h-9 px-3\" },\n  },\n  defaultVariants: { variant: \"default\", size: \"default\" },\n});\n```" }
+      ]
+    },
+    "buttonVariants": {
+      "contents": [
+        { "value": "```tsx\nconst buttonVariants: (props?: { variant?, size? } & ClassProp) => string\n```\nPre-defined CVA variant function for Button. Apply button styles to non-button elements.\n\n```tsx\n<Link className={buttonVariants({ variant: \"outline\" })}>Link</Link>\n```" }
+      ]
+    },
+    "badgeVariants": {
+      "contents": [
+        { "value": "```tsx\nconst badgeVariants: (props?: { variant? } & ClassProp) => string\n```\nPre-defined CVA variant function for Badge. Apply badge styles to any element.\n\n```tsx\n<span className={badgeVariants({ variant: \"secondary\" })}>Tag</span>\n```" }
+      ]
+    },
+    "useToast": {
+      "contents": [
+        { "value": "```tsx\nfunction useToast(): { toast, toasts, dismiss }\n```\nHook that returns the toast function and state for managing toast notifications.\n\n```tsx\nconst { toast } = useToast();\ntoast({ title: \"Success\", description: \"Saved.\" });\n```" }
+      ]
+    },
+    "toast": {
+      "contents": [
+        { "value": "```tsx\nfunction toast(props: ToastProps): { id, dismiss, update }\n```\nImperatively show a toast notification.\n\n```tsx\ntoast({ title: \"Done\", description: \"Task completed.\", variant: \"default\" });\n```" }
+      ]
+    },
+    "useFormField": {
+      "contents": [
+        { "value": "```tsx\nfunction useFormField(): { invalid, isDirty, isTouched, error?, id, name, formItemId, formDescriptionId, formMessageId }\n```\nReturns the current form field context. Used internally by Form subcomponents." }
+      ]
+    },
+    "asChild": {
+      "contents": [
+        { "value": "```tsx\nasChild?: boolean\n```\nRadix UI prop that merges the component's props onto its child element instead of rendering a default wrapper element.\n\n```tsx\n<DialogTrigger asChild>\n  <Button>Open Dialog</Button>\n</DialogTrigger>\n```" }
+      ]
+    },
+    "--background": {
+      "contents": [
+        { "value": "```css\n--background: <hsl-value>\n```\nshadcn/ui CSS variable for the default page background color. Set in `:root` and `.dark` selectors in globals.css." }
+      ]
+    },
+    "--foreground": {
+      "contents": [
+        { "value": "```css\n--foreground: <hsl-value>\n```\nshadcn/ui CSS variable for the default text/foreground color." }
+      ]
+    },
+    "--primary": {
+      "contents": [
+        { "value": "```css\n--primary: <hsl-value>\n```\nshadcn/ui CSS variable for the primary brand color. Used by Button default variant and other primary elements." }
+      ]
+    },
+    "--secondary": {
+      "contents": [
+        { "value": "```css\n--secondary: <hsl-value>\n```\nshadcn/ui CSS variable for the secondary color. Used by Button secondary variant." }
+      ]
+    },
+    "--muted": {
+      "contents": [
+        { "value": "```css\n--muted: <hsl-value>\n```\nshadcn/ui CSS variable for muted backgrounds and text." }
+      ]
+    },
+    "--accent": {
+      "contents": [
+        { "value": "```css\n--accent: <hsl-value>\n```\nshadcn/ui CSS variable for accent highlights like hover states." }
+      ]
+    },
+    "--destructive": {
+      "contents": [
+        { "value": "```css\n--destructive: <hsl-value>\n```\nshadcn/ui CSS variable for destructive action colors." }
+      ]
+    },
+    "--border": {
+      "contents": [
+        { "value": "```css\n--border: <hsl-value>\n```\nshadcn/ui CSS variable for default border colors." }
+      ]
+    },
+    "--input": {
+      "contents": [
+        { "value": "```css\n--input: <hsl-value>\n```\nshadcn/ui CSS variable for input element border colors." }
+      ]
+    },
+    "--ring": {
+      "contents": [
+        { "value": "```css\n--ring: <hsl-value>\n```\nshadcn/ui CSS variable for focus ring outline colors." }
+      ]
+    },
+    "--radius": {
+      "contents": [
+        { "value": "```css\n--radius: <rem-value>\n```\nshadcn/ui CSS variable for the global border radius." }
+      ]
+    },
+    "--card": {
+      "contents": [
+        { "value": "```css\n--card: <hsl-value>\n```\nshadcn/ui CSS variable for card background color." }
+      ]
+    },
+    "--popover": {
+      "contents": [
+        { "value": "```css\n--popover: <hsl-value>\n```\nshadcn/ui CSS variable for popover background color." }
+      ]
+    }
+  }
+}