{
  "name": "progress",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "progress.tsx",
      "content": "\"use client\";\r\n\r\nimport { createVariants, css, keyframes, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes } from \"react\";\r\n\r\nconst indeterminateSlide = keyframes({\r\n  \"0%\": { transform: \"translateX(-100%)\" },\r\n  \"100%\": { transform: \"translateX(400%)\" },\r\n});\r\n\r\nconst trackVariants = createVariants({\r\n  base: {\r\n    position: \"relative\",\r\n    width: \"100%\",\r\n    borderRadius: \"9999px\",\r\n    backgroundColor: theme.color.muted,\r\n    overflow: \"hidden\",\r\n  },\r\n  variants: {\r\n    size: {\r\n      sm: { height: \"4px\" },\r\n      md: { height: \"8px\" },\r\n      lg: { height: \"12px\" },\r\n    },\r\n  },\r\n  defaultVariants: { size: \"md\" },\r\n});\r\n\r\nconst fillVariants = createVariants({\r\n  base: {\r\n    height: \"100%\",\r\n    borderRadius: \"9999px\",\r\n    transitionProperty: \"width\",\r\n    transitionDuration: theme.duration.slow,\r\n    transitionTimingFunction: theme.easing.decelerate,\r\n  },\r\n  variants: {\r\n    tone: {\r\n      primary: { backgroundColor: theme.color.primary },\r\n      success: { backgroundColor: theme.color.success },\r\n      warning: { backgroundColor: theme.color.warning },\r\n      destructive: { backgroundColor: theme.color.destructive },\r\n    },\r\n  },\r\n  defaultVariants: { tone: \"primary\" },\r\n});\r\n\r\nconst indeterminateBarClass = css({\r\n  position: \"absolute\",\r\n  top: 0,\r\n  left: 0,\r\n  height: \"100%\",\r\n  width: \"25%\",\r\n  borderRadius: \"9999px\",\r\n  animation: `${indeterminateSlide} 1.4s ${theme.easing.standard} infinite`,\r\n});\r\n\r\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n  /** Omit (or pass undefined) for an indeterminate bar. */\r\n  value?: number;\r\n  max?: number;\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  tone?: \"primary\" | \"success\" | \"warning\" | \"destructive\";\r\n  label?: string;\r\n}\r\n\r\n/** A progress bar. With no `value` it renders an indeterminate sliding bar. */\r\nexport function Progress({\r\n  value,\r\n  max = 100,\r\n  size = \"md\",\r\n  tone = \"primary\",\r\n  label,\r\n  className,\r\n  ...props\r\n}: ProgressProps) {\r\n  const indeterminate = value == null;\r\n  const clamped = indeterminate ? 0 : Math.min(Math.max(value, 0), max);\r\n  const percent = indeterminate ? 0 : (clamped / (max || 1)) * 100;\r\n\r\n  return (\r\n    <div\r\n      role=\"progressbar\"\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-valuenow={indeterminate ? undefined : clamped}\r\n      aria-label={label}\r\n      className={trackVariants({ size, className })}\r\n      {...props}\r\n    >\r\n      {indeterminate ? (\r\n        <div\r\n          className={`${fillVariants({ tone })} ${indeterminateBarClass}`}\r\n          style={{ width: \"25%\" }}\r\n          aria-hidden=\"true\"\r\n        />\r\n      ) : (\r\n        <div className={fillVariants({ tone })} style={{ width: `${percent}%` }} />\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}