{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-linear",
  "title": "Progress Linear",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/progress-linear/progress-linear.component.ts",
      "content": "import { Component, Input, ViewEncapsulation, booleanAttribute, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n\n// Copied verbatim from React ProgressLinear (injected there as an inline <style>). Unscoped\n// (ViewEncapsulation.None) so the `.uipkge-pl` descendant selectors match the template.\nconst PROGRESS_LINEAR_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  .uipkge-pl .animate-stream {\n    animation: uipkge-pl-stream 1s linear infinite;\n  }\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\n/**\n * Angular port of UIPKGE ProgressLinear (React `ProgressLinear`). The host is the\n * progressbar container (height, rounded variant); inside: a background track (striped /\n * dimmed when buffered), an optional buffer fill, an optional stream overlay, and the value\n * bar — which in indeterminate mode carries two sliding inner bars. Value and buffer clamp\n * to 0..100; `reverse` fills right-to-left.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-progress-linear, [ui-progress-linear]',\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n  styles: [PROGRESS_LINEAR_STYLES],\n  host: {\n    '[attr.data-uipkge]': '\"\"',\n    '[attr.data-slot]': '\"progress-linear\"',\n    '[attr.role]': '\"progressbar\"',\n    '[attr.aria-valuemin]': '0',\n    '[attr.aria-valuemax]': '100',\n    '[attr.aria-valuenow]': 'indeterminate ? null : normalizedValue',\n    '[class]': 'containerClasses',\n    '[style.height]': 'heightValue',\n  },\n  template: `\n    <div\n      [class]=\"backgroundClass\"\n      [style.background-color]=\"bgColorValue\"\n      [style.width]=\"normalizedBuffer > 0 ? normalizedBuffer + '%' : '100%'\"\n    ></div>\n    @if (!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100) {\n      <div\n        [class]=\"bufferClass\"\n        [style.background-color]=\"bgColorValue\"\n        [style.width.%]=\"normalizedBuffer\"\n        [style.opacity]=\"0.3\"\n      ></div>\n    }\n    @if (stream && !indeterminate && active) {\n      <div [class]=\"streamClass\">\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        ></div>\n      </div>\n    }\n    <div\n      [class]=\"barClass\"\n      [style.width]=\"indeterminate ? '100%' : normalizedValue + '%'\"\n      [style.background-color]=\"indeterminate ? null : progressColorValue\"\n    >\n      @if (indeterminate) {\n        <div\n          class=\"animate-indeterminate1 absolute inset-y-0 w-full bg-inherit\"\n          [style.background-color]=\"progressColorValue\"\n        ></div>\n        <div\n          class=\"animate-indeterminate2 absolute inset-y-0 w-full bg-inherit\"\n          [style.background-color]=\"progressColorValue\"\n        ></div>\n      }\n    </div>\n  `,\n})\nexport class UiProgressLinearComponent {\n  @Input() value = 0\n  @Input() bgColor?: string\n  @Input() buffer?: number\n  @Input() color?: string\n  @Input() height?: number | string\n  @Input({ transform: booleanAttribute }) indeterminate = false\n  @Input({ transform: booleanAttribute }) reverse = false\n  @Input() rounded?: ProgressLinearVariants['rounded']\n  @Input({ transform: booleanAttribute }) stream = false\n  @Input({ transform: booleanAttribute }) striped = false\n  @Input({ transform: booleanAttribute }) active = true\n  @Input('class') className?: string\n\n  get normalizedValue(): number {\n    return Math.min(100, Math.max(0, this.value ?? 0))\n  }\n\n  get normalizedBuffer(): number {\n    return Math.min(100, Math.max(0, this.buffer || 0))\n  }\n\n  get heightValue(): string {\n    if (typeof this.height === 'number') return `${this.height}px`\n    if (typeof this.height === 'string') return this.height\n    return '4px'\n  }\n\n  get bgColorValue(): string {\n    return this.bgColor || 'currentColor'\n  }\n\n  get progressColorValue(): string {\n    return this.color || 'currentColor'\n  }\n\n  get containerClasses(): string {\n    return cn('block uipkge-pl', progressLinearVariants({ rounded: this.rounded }), this.className)\n  }\n\n  private get side(): string {\n    return this.reverse ? 'right-0 left-auto' : 'right-auto left-0'\n  }\n\n  get backgroundClass(): string {\n    return cn(\n      'absolute inset-0 transition-colors duration-300',\n      this.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      !this.indeterminate && this.normalizedBuffer > 0 ? 'opacity-30' : 'opacity-100',\n    )\n  }\n\n  get bufferClass(): string {\n    return cn(\n      'absolute inset-0 transition-colors duration-300',\n      this.side,\n      this.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  }\n\n  get streamClass(): string {\n    return cn('absolute inset-0 overflow-hidden', this.side)\n  }\n\n  get barClass(): string {\n    return cn(\n      'absolute inset-y-0 transition-colors duration-300',\n      this.side,\n      this.indeterminate ? 'animate-indeterminate' : '',\n      this.striped && !this.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  }\n}\n\nexport { progressLinearVariants, type ProgressLinearVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/progress-linear/progress-linear.component.ts"
    },
    {
      "path": "packages/registry-angular/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/app/components/ui/progress-linear/progress-linear.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/progress-linear/index.ts",
      "content": "export {\n  UiProgressLinearComponent,\n  progressLinearVariants,\n  type ProgressLinearVariants,\n} from './progress-linear.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/progress-linear/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Thin linear progress bar: determinate value, indeterminate slide, buffer fill, animated stream overlay, striped hatch, reverse (right-to-left), custom color / track color / height and rounded variants.",
  "categories": [
    "feedback"
  ]
}