{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-linear",
  "title": "Progress Linear",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/progress-linear/ProgressLinear.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n\nexport interface ProgressLinearProps {\n  className?: string\n  value?: number\n  bgColor?: string\n  buffer?: number\n  color?: string\n  height?: number | string\n  indeterminate?: boolean\n  reverse?: boolean\n  rounded?: ProgressLinearVariants['rounded']\n  stream?: boolean\n  striped?: boolean\n  active?: boolean\n}\n\n// Keyframes are scoped in the Vue SFC via <style scoped>; React has no\n// scoped styles, so we inline the same keyframes + animation utilities once.\n// The class names (animate-indeterminate*, animate-stream) are referenced\n// from the markup below and match the Vue source 1:1.\nconst styles = `\n@media (prefers-reduced-motion: no-preference) {\n  .uipkge-pl .animate-indeterminate {\n    animation: uipkge-pl-indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .uipkge-pl .animate-indeterminate1 {\n    animation: uipkge-pl-indeterminate1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n  .uipkge-pl .animate-indeterminate2 {\n    animation: uipkge-pl-indeterminate2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n}\n.uipkge-pl .animate-stream {\n  animation: uipkge-pl-stream 1s linear infinite;\n}\n@keyframes uipkge-pl-indeterminate {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n@keyframes uipkge-pl-indeterminate1 {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(400%); }\n}\n@keyframes uipkge-pl-indeterminate2 {\n  0% { transform: translateX(-100%); opacity: 1; }\n  100% { transform: translateX(400%); opacity: 0; }\n}\n@keyframes uipkge-pl-stream {\n  0% { transform: translateX(0); }\n  100% { transform: translateX(40px); }\n}\n`\n\nfunction ProgressLinear({\n  className,\n  value = 0,\n  bgColor,\n  buffer,\n  color,\n  height,\n  indeterminate = false,\n  reverse = false,\n  rounded,\n  stream = false,\n  striped = false,\n  active = true,\n}: ProgressLinearProps) {\n  const normalizedValue = Math.min(100, Math.max(0, value))\n  const normalizedBuffer = Math.min(100, Math.max(0, buffer || 0))\n\n  const heightValue =\n    typeof height === 'number' ? `${height}px` : typeof height === 'string' ? height : '4px'\n\n  const bgColorValue = bgColor || 'currentColor'\n  const progressColorValue = color || 'currentColor'\n\n  const containerClasses = cn('uipkge-pl', progressLinearVariants({ rounded }), className)\n\n  return (\n    <div\n      data-uipkge=\"\"\n      data-slot=\"progress-linear\"\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      aria-valuenow={indeterminate ? undefined : normalizedValue}\n      className={containerClasses}\n      style={{ height: heightValue }}\n    >\n      <style>{styles}</style>\n\n      {/* Background */}\n      <div\n        className={cn(\n          'absolute inset-0 transition-colors duration-300',\n          striped\n            ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.1)_8px,rgba(255,255,255,0.1)_16px)]'\n            : '',\n          !indeterminate && normalizedBuffer > 0 ? 'opacity-30' : 'opacity-100',\n        )}\n        style={{\n          backgroundColor: bgColorValue,\n          width: normalizedBuffer > 0 ? `${normalizedBuffer}%` : '100%',\n        }}\n      />\n\n      {/* Buffer (if buffer > 0) */}\n      {!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100 && (\n        <div\n          className={cn(\n            'absolute inset-0 transition-colors duration-300',\n            reverse ? 'right-0 left-auto' : 'right-auto left-0',\n            striped\n              ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.15)_8px,rgba(255,255,255,0.15)_16px)]'\n              : '',\n          )}\n          style={{\n            backgroundColor: bgColorValue,\n            width: `${normalizedBuffer}%`,\n            opacity: 0.3,\n          }}\n        />\n      )}\n\n      {/* Stream lines (when stream is true) */}\n      {stream && !indeterminate && active && (\n        <div\n          className={cn('absolute inset-0 overflow-hidden', reverse ? 'right-0 left-auto' : 'right-auto left-0')}\n        >\n          <div\n            className=\"animate-stream absolute inset-0 bg-[repeating-linear-gradient(90deg,transparent,transparent_10px,rgba(255,255,255,0.2)_10px,rgba(255,255,255,0.2)_20px)] bg-[length:40px_40px]\"\n            style={{ width: `${normalizedBuffer || 100}%` }}\n          />\n        </div>\n      )}\n\n      {/* Progress bar */}\n      <div\n        className={cn(\n          'absolute inset-y-0 transition-colors duration-300',\n          reverse ? 'right-0 left-auto' : 'right-auto left-0',\n          indeterminate ? 'motion-safe:animate-indeterminate' : '',\n          striped && !indeterminate\n            ? 'bg-[repeating-linear-gradient(45deg,transparent,transparent_8px,rgba(255,255,255,0.25)_8px,rgba(255,255,255,0.25)_16px)]'\n            : '',\n        )}\n        style={{\n          width: indeterminate ? '100%' : `${normalizedValue}%`,\n          backgroundColor: indeterminate ? undefined : progressColorValue,\n        }}\n      >\n        {/* Indeterminate animations */}\n        {indeterminate && (\n          <>\n            <div\n              className=\"motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit\"\n              style={{ backgroundColor: progressColorValue }}\n            />\n            <div\n              className=\"motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit\"\n              style={{ backgroundColor: progressColorValue }}\n            />\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { ProgressLinear }\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-linear/ProgressLinear.tsx"
    },
    {
      "path": "packages/registry-react/components/progress-linear/progress-linear.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than inline in the\n * SFC) so `ProgressLinear.vue` can import them without the cva runtime\n * coupling that breaks SSR when several `<ProgressLinear>` instances\n * render before the module graph fully resolves. Sibling pattern to\n * `card/card.variants.ts`.\n */\nexport const progressLinearVariants = cva('relative overflow-hidden w-full', {\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      default: 'rounded-full',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      full: 'rounded-full',\n    },\n    color: {\n      default: 'bg-primary',\n      primary: 'bg-primary',\n      secondary: 'bg-secondary',\n      destructive: 'bg-destructive',\n      success: 'bg-[var(--success)]',\n      warning: 'bg-[var(--warning)]',\n      info: 'bg-[var(--info)]',\n      error: 'bg-destructive',\n    },\n  },\n  defaultVariants: {\n    rounded: 'default',\n    color: 'default',\n  },\n})\n\nexport type ProgressLinearVariants = VariantProps<typeof progressLinearVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-linear/progress-linear.variants.ts"
    },
    {
      "path": "packages/registry-react/components/progress-linear/index.ts",
      "content": "export { ProgressLinear, type ProgressLinearProps } from './ProgressLinear'\nexport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-linear/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Top-of-screen page-loading bar (à la NProgress / nuxt loading-indicator). Auto-advances while a navigation or fetch is in flight, then completes. Drop into the app shell once.",
  "categories": [
    "feedback"
  ]
}