{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ui-themed-card","type":"registry:component","title":"Themed Card","description":"Theme-adaptive glass card: frosted paper in light mode, indigo underglow in dark mode. Pure CSS — no JS, no hydration flicker.","version":"1.0.0","status":"beta","dependencies":["lucide-react"],"files":[{"path":"src/components/ui/themed-card.tsx","type":"registry:component","content":"/**\n * ThemedCard — Aavya brand portal\n *\n * Theme-adaptive glass card: frosted paper in light mode, indigo-underglow\n * glass in dark mode. Uses CSS dark: variants — no JS, no hydration flicker.\n *\n * Same composable API as GlassCard / FrostedCard. Use this when the card\n * appears in a context that can be either light or dark.\n *\n * Usage:\n *   <ThemedCard size=\"md\">\n *     <ThemedCardArrow />\n *     <ThemedCardHeader>\n *       <ThemedCardEyebrow>Platform</ThemedCardEyebrow>\n *       <ThemedCardTitle>Enterprise AI</ThemedCardTitle>\n *       <ThemedCardDescription>Engineered for governance.</ThemedCardDescription>\n *     </ThemedCardHeader>\n *     <ThemedCardFooter>\n *       <ThemedCardPills pills={['MCP', 'Live']} />\n *     </ThemedCardFooter>\n *   </ThemedCard>\n */\n\nimport * as React from 'react'\nimport { ArrowUpRight, TrendingUp } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nconst sizePad = { sm: 'p-[22px]', md: 'p-[28px]', lg: 'p-[36px]' } as const\nconst sizeText = { sm: 'text-[18px]', md: 'text-[22px]', lg: 'text-[28px]' } as const\n\nfunction ThemedCard({\n  size = 'md',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & { size?: 'sm' | 'md' | 'lg' }) {\n  return (\n    <div\n      data-slot=\"themed-card\"\n      className={cn(\n        // Shared\n        'relative isolate overflow-hidden rounded-[18px] flex flex-col gap-4 text-foreground',\n        // Light — frosted paper surface\n        'bg-[linear-gradient(135deg,rgba(255,255,255,0.85)_0%,rgba(241,243,246,0.65)_100%)]',\n        'backdrop-blur-[16px] backdrop-saturate-[1.1]',\n        'border border-[rgba(30,35,56,0.06)]',\n        'shadow-[inset_1px_1px_0_rgba(255,255,255,0.9),0_12px_32px_-12px_rgba(30,35,56,0.16),0_1px_2px_rgba(30,35,56,0.04)]',\n        // Dark — glass surface overrides (bg-none clears the light gradient)\n        'dark:bg-none dark:bg-white/4 dark:backdrop-blur-xl dark:backdrop-saturate-150',\n        'dark:border-white/8',\n        'dark:shadow-[inset_0_1px_0_rgb(255_255_255/0.06),0_24px_48px_-16px_rgb(0_0_0/0.6)]',\n        // Decorative wash (before pseudo)\n        // Light: subtle indigo in upper-right corner\n        // Dark: indigo wash rising from below\n        'before:absolute before:inset-0 before:-z-10 before:pointer-events-none',\n        'before:bg-[radial-gradient(ellipse_80%_60%_at_100%_0%,rgba(79,70,229,0.05)_0%,transparent_70%)]',\n        'dark:before:bg-[radial-gradient(ellipse_80%_60%_at_50%_110%,rgb(99_102_241/0.18)_0%,transparent_65%)]',\n        // Underglow seam at bottom edge — dark only\n        \"after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2\",\n        'after:w-[120px] after:h-[3px] after:rounded-[50%] after:pointer-events-none',\n        'after:opacity-0 dark:after:opacity-100',\n        'after:bg-[radial-gradient(ellipse,var(--primary)_0%,color-mix(in_srgb,var(--primary)_45%,transparent)_35%,transparent_70%)]',\n        'after:shadow-[0_-10px_26px_4px_color-mix(in_srgb,var(--primary)_28%,transparent),0_-28px_60px_12px_color-mix(in_srgb,var(--primary)_14%,transparent)]',\n        sizePad[size],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ThemedCardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"themed-card-header\" className={cn('flex flex-col gap-2', className)} {...props} />\n  )\n}\n\nfunction ThemedCardTitle({\n  size = 'md',\n  className,\n  ...props\n}: React.ComponentProps<'div'> & { size?: 'sm' | 'md' | 'lg' }) {\n  return (\n    <div\n      data-slot=\"themed-card-title\"\n      className={cn('font-bold leading-[1.18] tracking-[-0.02em] text-foreground', sizeText[size], className)}\n      {...props}\n    />\n  )\n}\n\nfunction ThemedCardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"themed-card-description\"\n      className={cn('text-sm leading-[1.55] text-muted-foreground', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ThemedCardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"themed-card-content\" className={cn('', className)} {...props} />\n}\n\nfunction ThemedCardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"themed-card-footer\" className={cn('flex items-center', className)} {...props} />\n  )\n}\n\n/** Arrow badge — adapts border/bg between light and dark. */\nfunction ThemedCardArrow({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"themed-card-arrow\"\n      className={cn(\n        'absolute right-6 top-6 flex h-8 w-8 items-center justify-center rounded-full',\n        // Light\n        'border border-[rgba(30,35,56,0.08)] bg-[rgba(30,35,56,0.04)] text-[rgba(30,35,56,0.65)]',\n        // Dark\n        'dark:border-white/10 dark:bg-white/5 dark:text-foreground/70',\n        className,\n      )}\n      {...props}\n    >\n      <ArrowUpRight className=\"h-3.5 w-3.5\" strokeWidth={2.2} />\n    </div>\n  )\n}\n\n/** Cyan mono eyebrow with glow dot. */\nfunction ThemedCardEyebrow({ className, children, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"themed-card-eyebrow\"\n      className={cn(\n        'inline-flex items-center gap-2 font-mono text-[11px] font-bold uppercase tracking-[0.12em] text-aavya',\n        className,\n      )}\n      {...props}\n    >\n      <span\n        className=\"h-1.5 w-1.5 rounded-full bg-aavya\"\n        style={{ boxShadow: '0 0 8px rgba(58,173,221,0.6)' }}\n      />\n      {children}\n    </div>\n  )\n}\n\n/** Pill row — adapts border/bg between light and dark. */\nfunction ThemedCardPills({ pills, className }: { pills: string[]; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'flex flex-wrap items-center gap-2.5 font-mono text-[11px] tracking-[0.04em] text-muted-foreground',\n        className,\n      )}\n    >\n      {pills.map((p) => (\n        <span\n          key={p}\n          className={cn(\n            'rounded-full px-2.25 py-1',\n            'border border-[rgba(30,35,56,0.08)] bg-[rgba(30,35,56,0.04)]',\n            'dark:border-white/8 dark:bg-white/6',\n          )}\n        >\n          {p}\n        </span>\n      ))}\n    </div>\n  )\n}\n\n/** 44×44 gradient icon block (works on both surfaces). */\nfunction ThemedCardIcon({\n  icon: Icon,\n  className,\n}: {\n  icon: React.ComponentType<{ className?: string }>\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex h-11 w-11 items-center justify-center rounded-[11px]',\n        'bg-[linear-gradient(135deg,#3AADDD_0%,#4F46E5_100%)]',\n        'shadow-[0_6px_16px_-4px_rgba(79,70,229,0.4)]',\n        className,\n      )}\n    >\n      <Icon className=\"h-5.5 w-5.5 text-white\" />\n    </div>\n  )\n}\n\n/** Convenience KPI tile — stat label, large number, optional trend badge. */\nfunction ThemedStatCard({\n  size = 'sm',\n  label,\n  value,\n  trend,\n  className,\n}: {\n  size?: 'sm' | 'md' | 'lg'\n  label: string\n  value: string\n  trend?: string\n  className?: string\n}) {\n  return (\n    <ThemedCard size={size} className={className}>\n      <p className=\"font-mono text-[11px] uppercase tracking-[0.08em] text-muted-foreground\">\n        {label}\n      </p>\n      <p className=\"font-bold leading-none tracking-[-0.03em] text-foreground tabular-nums text-[56px]\">\n        {value}\n      </p>\n      {trend && (\n        <div className=\"inline-flex items-center gap-1.5 text-[12px] font-semibold text-mint\">\n          <TrendingUp className=\"h-3 w-3\" strokeWidth={2.5} />\n          {trend}\n        </div>\n      )}\n    </ThemedCard>\n  )\n}\n\nexport {\n  ThemedCard,\n  ThemedCardHeader,\n  ThemedCardTitle,\n  ThemedCardDescription,\n  ThemedCardContent,\n  ThemedCardFooter,\n  ThemedCardArrow,\n  ThemedCardEyebrow,\n  ThemedCardPills,\n  ThemedCardIcon,\n  ThemedStatCard,\n}\n"}]}