{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-linear",
  "title": "Progress Linear",
  "type": "registry:ui",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/progress-linear/progress-linear.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { progressLinearVariants, type ProgressLinearVariants } from './progress-linear.variants'\n\ntype Rounded = NonNullable<ProgressLinearVariants['rounded']>\n\n// Boolean props whose React default is `true`: `attr=\"false\"` turns them off.\nconst trueByDefault = { fromAttribute: (v: string | null) => v !== 'false', toAttribute: () => null }\n\n/**\n * <uip-progress-linear> — the registry ProgressLinear as a web component.\n *\n * Class strings are React's verbatim, on the same elements (container,\n * background, buffer, stream, progress bar). React's injected keyframes are\n * copied into the static styles — the one allowed CSS exception for\n * React-injected keyframes — with one fix: React's markup uses\n * `motion-safe:animate-indeterminate{,1,2}` while its <style> defines the\n * unprefixed `.animate-indeterminate{,1,2}`, so the indeterminate slide never\n * runs in React; here the rules match the markup's exact class names (escaped)\n * so the animation works. Reported, not silently diverged.\n *\n * `height` is a pixel number or any CSS length (`height=\"8\"` / `height=\"2px\"`).\n * Parts: `base` (the progressbar root), `fill` (the progress bar).\n */\nexport class UipProgressLinear extends LitElement {\n  // React's root is a block-level <div> (relative w-full).\n  static styles = [\n    tailwind,\n    css`:host { display: block; width: 100%; }`,\n    // React's injected keyframes, with selectors matching the markup's exact\n    // class names (see class comment).\n    css`\n      @media (prefers-reduced-motion: no-preference) {\n        .uipkge-pl .motion-safe\\\\:animate-indeterminate {\n          animation: uipkge-pl-indeterminate 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n        }\n        .uipkge-pl .motion-safe\\\\:animate-indeterminate1 {\n          animation: uipkge-pl-indeterminate1 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n        }\n        .uipkge-pl .motion-safe\\\\: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% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(400%);\n        }\n      }\n      @keyframes uipkge-pl-indeterminate1 {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(400%);\n        }\n      }\n      @keyframes uipkge-pl-indeterminate2 {\n        0% {\n          transform: translateX(-100%);\n          opacity: 1;\n        }\n        100% {\n          transform: translateX(400%);\n          opacity: 0;\n        }\n      }\n      @keyframes uipkge-pl-stream {\n        0% {\n          transform: translateX(0);\n        }\n        100% {\n          transform: translateX(40px);\n        }\n      }\n    `,\n  ]\n\n  static properties = {\n    value: { type: Number },\n    bgColor: { attribute: 'bg-color' },\n    buffer: { type: Number },\n    color: {},\n    height: {\n      converter: {\n        fromAttribute: (v: string | null) => {\n          if (v === null || v === '') return undefined\n          const n = Number(v)\n          return Number.isNaN(n) ? v : n\n        },\n        toAttribute: (v: unknown) => String(v),\n      },\n    },\n    indeterminate: { type: Boolean, reflect: true },\n    reverse: { type: Boolean, reflect: true },\n    rounded: { reflect: true },\n    stream: { type: Boolean, reflect: true },\n    striped: { type: Boolean, reflect: true },\n    active: { type: Boolean, converter: trueByDefault },\n  }\n\n  value = 0\n  bgColor?: string\n  buffer?: number\n  color?: string\n  height?: number | string\n  indeterminate = false\n  reverse = false\n  rounded: Rounded = 'default'\n  stream = false\n  striped = false\n  active = true\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'progress-linear')\n  }\n\n  render() {\n    const normalizedValue = Math.min(100, Math.max(0, this.value))\n    const normalizedBuffer = Math.min(100, Math.max(0, this.buffer || 0))\n    const heightValue =\n      typeof this.height === 'number' ? `${this.height}px` : typeof this.height === 'string' ? this.height : '4px'\n    const bgColorValue = this.bgColor || 'currentColor'\n    const progressColorValue = this.color || 'currentColor'\n    const indeterminate = this.indeterminate\n    const reverse = this.reverse\n\n    return html`<div\n      part=\"base\"\n      data-uipkge=\"\"\n      data-slot=\"progress-linear\"\n      role=\"progressbar\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n      aria-valuenow=${indeterminate ? nothing : normalizedValue}\n      class=${cn('uipkge-pl', progressLinearVariants({ rounded: this.rounded }))}\n      style=${styleMap({ height: heightValue })}\n    >\n      <div\n        class=${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          !indeterminate && normalizedBuffer > 0 ? 'opacity-30' : 'opacity-100',\n        )}\n        style=${styleMap({\n          backgroundColor: bgColorValue,\n          width: normalizedBuffer > 0 ? `${normalizedBuffer}%` : '100%',\n        })}\n      ></div>\n\n      ${!indeterminate && normalizedBuffer > 0 && normalizedBuffer < 100\n        ? html`<div\n            class=${cn(\n              'absolute inset-0 transition-colors duration-300',\n              reverse ? 'right-0 left-auto' : 'right-auto left-0',\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            style=${styleMap({ backgroundColor: bgColorValue, width: `${normalizedBuffer}%`, opacity: '0.3' })}\n          ></div>`\n        : nothing}\n      ${this.stream && !indeterminate && this.active\n        ? html`<div class=${cn('absolute inset-0 overflow-hidden', reverse ? 'right-0 left-auto' : 'right-auto left-0')}>\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=${styleMap({ width: `${normalizedBuffer || 100}%` })}\n            ></div>\n          </div>`\n        : nothing}\n\n      <div\n        part=\"fill\"\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          this.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=${indeterminate\n          ? styleMap({ width: '100%' })\n          : styleMap({ width: `${normalizedValue}%`, backgroundColor: progressColorValue })}\n      >\n        ${indeterminate\n          ? html`<div\n                class=\"motion-safe:animate-indeterminate1 absolute inset-y-0 w-full bg-inherit\"\n                style=${styleMap({ backgroundColor: progressColorValue })}\n              ></div>\n              <div\n                class=\"motion-safe:animate-indeterminate2 absolute inset-y-0 w-full bg-inherit\"\n                style=${styleMap({ backgroundColor: progressColorValue })}\n              ></div>`\n          : nothing}\n      </div>\n    </div>`\n  }\n}\n\ncustomElements.get('uip-progress-linear') || customElements.define('uip-progress-linear', UipProgressLinear)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-progress-linear': UipProgressLinear\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/progress-linear/progress-linear.ts"
    },
    {
      "path": "packages/elements-lit/src/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:file",
      "target": "src/uip/components/progress-linear/progress-linear.variants.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}