{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "progress-linear",
  "title": "Progress Linear",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/progress-linear/ProgressLinear.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport { progressLinearVariants } from './progress-linear.variants'\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes['class']\n    modelValue?: number\n    bgColor?: string\n    buffer?: number\n    color?: string\n    height?: number | string\n    indeterminate?: boolean\n    reverse?: boolean\n    rounded?: 'none' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'full'\n    stream?: boolean\n    striped?: boolean\n    active?: boolean\n  }>(),\n  {\n    modelValue: 0,\n    indeterminate: false,\n    reverse: false,\n    stream: false,\n    striped: false,\n    active: true,\n  },\n)\n\nconst normalizedValue = computed(() => {\n  return Math.min(100, Math.max(0, props.modelValue))\n})\n\nconst normalizedBuffer = computed(() => {\n  return Math.min(100, Math.max(0, props.buffer || 0))\n})\n\nconst heightValue = computed(() => {\n  if (typeof props.height === 'number') return `${props.height}px`\n  if (typeof props.height === 'string') return props.height\n  return '4px'\n})\n\nconst bgColorValue = computed(() => props.bgColor || 'currentColor')\n\nconst progressColorValue = computed(() => props.color || 'currentColor')\n\nconst containerClasses = computed(() => cn(progressLinearVariants({ rounded: props.rounded }), props.class))\n</script>\n\n<template>\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    :class=\"containerClasses\"\n    :style=\"{ height: heightValue }\"\n  >\n    <!-- Background -->\n    <div\n      class=\"absolute inset-0 transition-colors duration-300\"\n      :class=\"[\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    <div\n      v-if=\"!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100\"\n      class=\"absolute inset-0 transition-colors duration-300\"\n      :class=\"[\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    <!-- Stream lines (when stream is true) -->\n    <div\n      v-if=\"stream && !indeterminate && active\"\n      class=\"absolute inset-0 overflow-hidden\"\n      :class=\"reverse ? 'right-0 left-auto' : 'right-auto left-0'\"\n    >\n      <div\n        class=\"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    <!-- Progress bar -->\n    <div\n      class=\"absolute inset-y-0 transition-colors duration-300\"\n      :class=\"[\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      <template v-if=\"indeterminate\">\n        <div\n          class=\"motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit\"\n          :style=\"{ backgroundColor: progressColorValue }\"\n        />\n        <div\n          class=\"motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit\"\n          :style=\"{ backgroundColor: progressColorValue }\"\n        />\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n@media (prefers-reduced-motion: no-preference) {\n  .animate-indeterminate {\n    animation: indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n\n  .animate-indeterminate1 {\n    animation: indeterminate1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n\n  .animate-indeterminate2 {\n    animation: indeterminate2 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  }\n}\n\n.animate-stream {\n  animation: stream 1s linear infinite;\n}\n\n@keyframes indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n@keyframes indeterminate1 {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(400%);\n  }\n}\n\n@keyframes indeterminate2 {\n  0% {\n    transform: translateX(-100%);\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(400%);\n    opacity: 0;\n  }\n}\n\n@keyframes stream {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(40px);\n  }\n}\n</style>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/progress-linear/ProgressLinear.vue"
    },
    {
      "path": "packages/registry-vue/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": "~/app/components/ui/progress-linear/progress-linear.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/progress-linear/index.ts",
      "content": "export { default as ProgressLinear } from './ProgressLinear.vue'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// ProgressLinear.vue <-> index.ts circular import that broke dev SSR).\nexport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n",
      "type": "registry:ui",
      "target": "~/app/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"
  ]
}