{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tick-bar",
  "title": "Tick Bar",
  "description": "A progress bar drawn as a row of ticks, lit up to the current value.",
  "files": [
    {
      "path": "registry/dashboardcn/ui/tick-bar.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface TickBarProps extends React.ComponentProps<\"div\"> {\n  /** Current value, from 0 to max. */\n  value: number\n  max?: number\n  /** Number of ticks. */\n  segments?: number\n  /** Any CSS color for the filled ticks. Defaults to chart-1. */\n  color?: string\n  /** Any CSS color for the unfilled ticks. Defaults to muted. */\n  trackColor?: string\n  /** \"tick\" draws thin bars; \"pill\" draws wide rounded ones. */\n  shape?: \"tick\" | \"pill\"\n  /** Reveal filled ticks in sequence when the bar mounts. */\n  animate?: boolean\n  /** Total reveal time in milliseconds. */\n  animationDuration?: number\n}\n\n/** A progress bar drawn as a row of ticks, lit up to the current value. */\nfunction TickBar({\n  value,\n  max = 100,\n  segments = 40,\n  color = \"var(--chart-1)\",\n  trackColor,\n  shape = \"tick\",\n  animate = false,\n  animationDuration = 700,\n  className,\n  ...props\n}: TickBarProps) {\n  const fraction = Math.min(1, Math.max(0, value / (max || 1)))\n  // Any non-zero value lights at least one tick so small values still register.\n  const filled = fraction === 0 ? 0 : Math.max(1, Math.round(fraction * segments))\n\n  return (\n    <div\n      data-slot=\"tick-bar\"\n      data-shape={shape}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-valuenow={value}\n      className={cn(\n        \"flex w-full\",\n        shape === \"tick\" ? \"h-6 gap-[3px]\" : \"h-4 gap-1.5\",\n        className\n      )}\n      {...props}\n    >\n      {Array.from({ length: segments }, (_, index) => {\n        const lit = index < filled\n        return (\n          <span\n            key={index}\n            data-filled={lit}\n            className={cn(\n              \"bg-muted relative h-full min-w-0 flex-1 overflow-hidden transition-colors\",\n              shape === \"tick\" ? \"rounded-[1.5px]\" : \"rounded-full\"\n            )}\n            style={{ backgroundColor: trackColor }}\n          >\n            {lit ? (\n              <span\n                className={cn(\n                  \"absolute inset-0\",\n                  shape === \"tick\" ? \"rounded-[1.5px]\" : \"rounded-full\",\n                  animate && \"motion-safe:animate-in motion-safe:fade-in\"\n                )}\n                style={{\n                  backgroundColor: color,\n                  ...(animate\n                    ? {\n                        animationDelay: `${(index / Math.max(1, filled)) * animationDuration * 0.8}ms`,\n                        animationDuration: `${Math.max(120, animationDuration * 0.25)}ms`,\n                        animationFillMode: \"both\",\n                      }\n                    : null),\n                }}\n              />\n            ) : null}\n          </span>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { TickBar }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}