{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-linear",
  "title": "Progress Linear",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/progress-linear/ProgressLinear.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { ProgressLinearVariants } from './progress-linear.variants'\n\n  export interface ProgressLinearProps extends HTMLAttributes<HTMLDivElement> {\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    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { progressLinearVariants } from './progress-linear.variants'\n\n  let {\n    class: 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    ref = $bindable(null),\n    ...restProps\n  }: ProgressLinearProps = $props()\n\n  const normalizedValue = $derived(Math.min(100, Math.max(0, value)))\n  const normalizedBuffer = $derived(Math.min(100, Math.max(0, buffer || 0)))\n  const heightValue = $derived(\n    typeof height === 'number' ? `${height}px` : typeof height === 'string' ? height : '4px',\n  )\n  const bgColorValue = $derived(bgColor || 'currentColor')\n  const progressColorValue = $derived(color || 'currentColor')\n  const containerClasses = $derived(cn(progressLinearVariants({ rounded }), className))\n</script>\n\n<div\n  {...restProps}\n  bind:this={ref}\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={cn('absolute inset-0 transition-colors duration-300', striped && 'progress-striped-light')}\n    class:opacity-30={!indeterminate && normalizedBuffer > 0}\n    class:opacity-100={indeterminate || normalizedBuffer <= 0}\n    style:background-color={bgColorValue}\n    style:width={normalizedBuffer > 0 ? `${normalizedBuffer}%` : '100%'}\n  ></div>\n\n  <!-- Buffer (if buffer > 0) -->\n  {#if !indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100}\n    <div\n      class={cn(\n        'absolute inset-0 transition-colors duration-300',\n        reverse ? 'right-0 left-auto' : 'right-auto left-0',\n        striped && 'progress-striped-medium',\n      )}\n      style:background-color={bgColorValue}\n      style:width={`${normalizedBuffer}%`}\n      style:opacity={0.3}\n    ></div>\n  {/if}\n\n  <!-- Stream lines (when stream is true) -->\n  {#if stream && !indeterminate && active}\n    <div class={cn('absolute inset-0 overflow-hidden', reverse ? 'right-0 left-auto' : 'right-auto left-0')}>\n      <div class=\"animate-stream progress-stream absolute inset-0\" style:width={`${normalizedBuffer || 100}%`}></div>\n    </div>\n  {/if}\n\n  <!-- Progress bar -->\n  <div\n    class={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 && 'progress-striped-heavy',\n    )}\n    style:width={indeterminate ? '100%' : `${normalizedValue}%`}\n    style:background-color={indeterminate ? undefined : progressColorValue}\n  >\n    <!-- Indeterminate animations -->\n    {#if indeterminate}\n      <div\n        class=\"motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit\"\n        style:background-color={progressColorValue}\n      ></div>\n      <div\n        class=\"motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit\"\n        style:background-color={progressColorValue}\n      ></div>\n    {/if}\n  </div>\n</div>\n\n<style>\n  /* Gradient utilities */\n  .progress-striped-light {\n    background-image: repeating-linear-gradient(\n      45deg,\n      transparent,\n      transparent 8px,\n      rgba(255, 255, 255, 0.1) 8px,\n      rgba(255, 255, 255, 0.1) 16px\n    );\n  }\n\n  .progress-striped-medium {\n    background-image: repeating-linear-gradient(\n      45deg,\n      transparent,\n      transparent 8px,\n      rgba(255, 255, 255, 0.15) 8px,\n      rgba(255, 255, 255, 0.15) 16px\n    );\n  }\n\n  .progress-striped-heavy {\n    background-image: repeating-linear-gradient(\n      45deg,\n      transparent,\n      transparent 8px,\n      rgba(255, 255, 255, 0.25) 8px,\n      rgba(255, 255, 255, 0.25) 16px\n    );\n  }\n\n  .progress-stream {\n    background-image: repeating-linear-gradient(\n      90deg,\n      transparent,\n      transparent 10px,\n      rgba(255, 255, 255, 0.2) 10px,\n      rgba(255, 255, 255, 0.2) 20px\n    );\n    background-size: 40px 40px;\n  }\n\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    .animate-stream {\n      animation: stream 1s linear infinite;\n    }\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": "~/src/lib/components/ui/progress-linear/ProgressLinear.svelte"
    },
    {
      "path": "packages/registry-svelte/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-success',\n      warning: 'bg-warning',\n      info: 'bg-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": "~/src/lib/components/ui/progress-linear/progress-linear.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/progress-linear/index.ts",
      "content": "export { default as ProgressLinear, type ProgressLinearProps } from './ProgressLinear.svelte'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// ProgressLinear.svelte <-> index.ts circular import that broke dev SSR).\nexport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/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"
  ]
}