{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "adminlte-progress",
  "title": "AdminLTE Progress Bar",
  "description": "Progress bar with 6 colors (aqua/red/green/yellow/blue/purple), 4 sizes, striped and animated variants, vertical mode, and description labels.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json"
  ],
  "files": [
    {
      "path": "registry/new-york/adminlte-progress/ui/adminlte-progress.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ntype ProgressColor =\n  | \"aqua\"\n  | \"red\"\n  | \"green\"\n  | \"yellow\"\n  | \"blue\"\n  | \"purple\"\n  | \"light-blue\"\n  | \"primary\"\n  | \"success\"\n  | \"info\"\n  | \"warning\"\n  | \"danger\"\n\ntype ProgressSize = \"xs\" | \"sm\" | \"md\" | \"xxs\"\n\nconst progressColorStyles: Record<ProgressColor, string> = {\n  aqua: \"bg-[#00c0ef]\",\n  red: \"bg-[#dd4b39]\",\n  green: \"bg-[#00a65a]\",\n  yellow: \"bg-[#f39c12]\",\n  blue: \"bg-[#3c8dbc]\",\n  purple: \"bg-[#605ca8]\",\n  \"light-blue\": \"bg-[#3c8dbc]\",\n  primary: \"bg-[#3c8dbc]\",\n  success: \"bg-[#00a65a]\",\n  info: \"bg-[#00c0ef]\",\n  warning: \"bg-[#f39c12]\",\n  danger: \"bg-[#dd4b39]\",\n}\n\nconst progressSizeStyles: Record<ProgressSize, string> = {\n  xxs: \"h-[3px]\",\n  xs: \"h-[7px]\",\n  sm: \"h-[10px]\",\n  md: \"h-[20px]\",\n}\n\ninterface AdminLTEProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: number\n  color?: ProgressColor\n  size?: ProgressSize\n  striped?: boolean\n  animated?: boolean\n  showLabel?: boolean\n  vertical?: boolean\n  description?: string\n}\n\nconst AdminLTEProgress = React.forwardRef<HTMLDivElement, AdminLTEProgressProps>(\n  (\n    {\n      className,\n      value,\n      color = \"light-blue\",\n      size = \"md\",\n      striped = false,\n      animated = false,\n      showLabel = false,\n      vertical = false,\n      description,\n      ...props\n    },\n    ref\n  ) => {\n    const clampedValue = Math.max(0, Math.min(100, value))\n\n    if (vertical) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\"inline-block h-[200px] w-[30px] mr-[10px]\", className)}\n          {...props}\n        >\n          <div className=\"relative h-full w-full bg-[#f4f4f4] rounded-[3px] overflow-hidden\">\n            <div\n              className={cn(\n                \"absolute bottom-0 w-full transition-all duration-500\",\n                progressColorStyles[color],\n                striped &&\n                  \"bg-[length:40px_40px] bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)]\",\n                animated && \"animate-[progress-bar-stripes_2s_linear_infinite]\"\n              )}\n              style={{ height: `${clampedValue}%` }}\n              role=\"progressbar\"\n              aria-valuenow={clampedValue}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            />\n          </div>\n        </div>\n      )\n    }\n\n    return (\n      <div ref={ref} className={cn(\"mb-0\", className)} {...props}>\n        {description && (\n          <div className=\"flex justify-between mb-[5px]\">\n            <span className=\"text-[13px]\">{description}</span>\n            <span className=\"text-[13px] text-[#777]\">{clampedValue}%</span>\n          </div>\n        )}\n        <div\n          className={cn(\n            \"w-full bg-[#f4f4f4] rounded-[3px] overflow-hidden shadow-[inset_0_1px_1px_rgba(0,0,0,0.1)]\",\n            progressSizeStyles[size]\n          )}\n        >\n          <div\n            className={cn(\n              \"h-full float-left transition-[width] duration-600 ease\",\n              progressColorStyles[color],\n              striped &&\n                \"bg-[length:40px_40px] bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)]\",\n              animated && \"animate-[progress-bar-stripes_2s_linear_infinite]\",\n              showLabel &&\n                \"text-[12px] leading-[20px] text-white text-center\"\n            )}\n            style={{ width: `${clampedValue}%` }}\n            role=\"progressbar\"\n            aria-valuenow={clampedValue}\n            aria-valuemin={0}\n            aria-valuemax={100}\n          >\n            {showLabel && `${clampedValue}%`}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\nAdminLTEProgress.displayName = \"AdminLTEProgress\"\n\nexport { AdminLTEProgress }\nexport type { AdminLTEProgressProps, ProgressColor, ProgressSize }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}