{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "description": "A determinate progress bar and an indeterminate spinner sharing one accent.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { forwardRef, type CSSProperties, type HTMLAttributes } from 'react'\nimport { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop'\n\nexport type LiquidProgressProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {\n  label?: string\n  max?: number\n  showValue?: boolean\n  tint?: string\n  value?: number\n}\n\nexport const LiquidProgress = forwardRef<HTMLDivElement, LiquidProgressProps>(({\n  className,\n  label,\n  max = 100,\n  showValue = false,\n  style,\n  styles,\n  tint,\n  value,\n  ...props\n}, ref) => {\n  const indeterminate = value === undefined\n  const ratio = indeterminate ? 0 : Math.min(1, Math.max(0, value / max))\n  const root = useLiquidStyles('lq-progress', { className, style, styles })\n\n  return (\n    <div className={root.className} ref={ref} style={root.style} {...props}>\n      {(label || showValue) && (\n        <span className=\"lq-progress__meta\">\n          {label && <span className=\"lq-control-label\">{label}</span>}\n          {showValue && !indeterminate && <span className=\"lq-progress__value\">{Math.round(ratio * 100)}%</span>}\n        </span>\n      )}\n      <span\n        aria-label={label}\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={indeterminate ? undefined : value}\n        className=\"lq-progress__track\"\n        data-indeterminate={indeterminate}\n        role=\"progressbar\"\n        style={{ '--lq-progress': ratio, ...(tint ? { '--lq-progress-tint': tint } : {}) } as CSSProperties}\n      >\n        <span className=\"lq-progress__fill\" />\n      </span>\n    </div>\n  )\n})\n\nLiquidProgress.displayName = 'LiquidProgress'\n\nexport type LiquidSpinnerProps = HTMLAttributes<HTMLSpanElement> & LiquidStyleProps & {\n  label?: string\n  size?: number\n  thickness?: number\n  tint?: string\n  value?: number\n}\n\nexport const LiquidSpinner = forwardRef<HTMLSpanElement, LiquidSpinnerProps>(({\n  className,\n  label = 'Loading',\n  size = 36,\n  style,\n  styles,\n  thickness = 3,\n  tint,\n  value,\n  ...props\n}, ref) => {\n  const indeterminate = value === undefined\n  const radius = (24 - thickness) / 2\n  const ratio = indeterminate ? 0.25 : Math.min(1, Math.max(0, value / 100))\n  const root = useLiquidStyles('lq-spinner', {\n    className,\n    style,\n    styles,\n    vars: tint ? { '--lq-spinner-tint': tint } : undefined,\n  })\n\n  // pathLength normalises the stroke to 100 units regardless of radius, so the\n  // indeterminate CSS keyframes can pulse the arc length at any size.\n  return (\n    <span\n      aria-label={label}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={indeterminate ? undefined : value}\n      className={root.className}\n      data-indeterminate={indeterminate}\n      ref={ref}\n      role=\"progressbar\"\n      style={root.style}\n      {...props}\n    >\n      <svg fill=\"none\" height={size} viewBox=\"0 0 24 24\" width={size}>\n        <circle className=\"lq-spinner__track\" cx=\"12\" cy=\"12\" r={radius} strokeWidth={thickness} />\n        <circle\n          className=\"lq-spinner__arc\"\n          cx=\"12\"\n          cy=\"12\"\n          pathLength={100}\n          r={radius}\n          strokeDasharray={indeterminate ? undefined : `${ratio * 100} 100`}\n          strokeDashoffset={indeterminate ? undefined : 0}\n          strokeLinecap=\"round\"\n          strokeWidth={thickness}\n        />\n      </svg>\n    </span>\n  )\n})\n\nLiquidSpinner.displayName = 'LiquidSpinner'\n",
      "path": "registry/liquid-progress.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-progress",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/styles-prop.json"
  ],
  "title": "LiquidProgress",
  "type": "registry:ui"
}