{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trial-bar",
  "title": "Trial Bar",
  "description": "A slim app bar showing days left in a trial with a progress line and an upgrade action, urgent in the last three days.",
  "files": [
    {
      "path": "registry/tealmac/trial-bar.tsx",
      "content": "import * as React from \"react\"\nimport { Clock } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TrialBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Days left in the trial. */\n  daysLeft: number\n  /** Length of the whole trial in days. Default 14. */\n  totalDays?: number\n  /** The upgrade link or button. */\n  action: React.ReactNode\n  /** Plan being trialled, for example \"Team\". */\n  plan?: string\n}\n\n/**\n * A slim bar for the top of an app that shows how much of a trial is left, with\n * a progress line and the upgrade action. It turns urgent in the last three\n * days (an amber tone, an alert-level wording) and says \"ended\" at zero. The\n * numbers are text, so the bar reads the same without colour.\n */\nexport function TrialBar({\n  daysLeft,\n  totalDays = 14,\n  action,\n  plan,\n  className,\n  ...props\n}: TrialBarProps) {\n  const left = Math.max(0, Math.round(daysLeft))\n  const urgent = left <= 3\n  const ended = left === 0\n  const pct = Math.min(100, Math.max(0, ((totalDays - left) / totalDays) * 100))\n  const text = ended\n    ? `Your ${plan ? `${plan} ` : \"\"}trial has ended`\n    : `${left} day${left === 1 ? \"\" : \"s\"} left in your ${plan ? `${plan} ` : \"\"}trial`\n  return (\n    <div\n      role=\"status\"\n      className={cn(\n        \"relative flex flex-wrap items-center justify-center gap-x-4 gap-y-1 border-b px-4 py-2 text-sm\",\n        urgent\n          ? \"border-amber-300 bg-amber-50 text-amber-950 dark:border-amber-800 dark:bg-amber-950/40 dark:text-amber-100\"\n          : \"bg-muted/50\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-2 font-medium\">\n        <Clock className=\"size-4\" aria-hidden />\n        {text}\n      </span>\n      <span className=\"font-medium underline-offset-2 [&_a]:underline [&_button]:underline\">\n        {action}\n      </span>\n      <div\n        aria-hidden\n        className=\"bg-foreground/10 absolute inset-x-0 bottom-0 h-0.5\"\n      >\n        <div\n          className={cn(\"h-full\", urgent ? \"bg-amber-600\" : \"bg-primary\")}\n          style={{ width: `${pct}%` }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default TrialBar\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}