{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "title": "Progress",
  "author": "andongmin94",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "src/components/ui/progress.tsx",
      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype RenderProps = React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> };\n\nfunction mergeRefs(...refs: (React.Ref<HTMLElement> | undefined)[]) {\n  return (element: HTMLElement | null) => {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(element);\n      } else if (ref) {\n        ref.current = element;\n      }\n    });\n  };\n}\n\nfunction preserveRadixEventCancellation(\n  child: React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,\n) {\n  const eventProps: Record<string, unknown> = {};\n\n  for (const [name, handler] of Object.entries(child.props)) {\n    if (/^on[A-Z]/.test(name) && typeof handler === \"function\") {\n      eventProps[name] = (...args: unknown[]) => {\n        (handler as (...handlerArgs: unknown[]) => void)(...args);\n        const event = args[0] as\n          | { defaultPrevented?: boolean; preventBaseUIHandler?: () => void }\n          | undefined;\n        if (event?.defaultPrevented) event.preventBaseUIHandler?.();\n      };\n    }\n  }\n\n  return React.cloneElement(child, eventProps);\n}\n\nfunction renderWithAliases<State>(\n  render:\n    | React.ReactElement\n    | ((props: RenderProps, state: State) => React.ReactElement)\n    | undefined,\n  fallback: React.ReactElement,\n  getAliases: (state: State) => Record<string, string | undefined>,\n) {\n  return (elementProps: RenderProps, state: State) => {\n    const aliasedProps = mergeProps(\n      elementProps as React.ComponentPropsWithRef<\"div\">,\n      getAliases(state) as React.ComponentPropsWithRef<\"div\">,\n    ) as RenderProps;\n\n    if (typeof render === \"function\") {\n      return render(aliasedProps, state);\n    }\n\n    const element = (render ?? fallback) as React.ReactElement<RenderProps>;\n    const mergedProps = mergeProps(\n      aliasedProps as React.ComponentPropsWithRef<\"div\">,\n      element.props as React.ComponentPropsWithRef<\"div\">,\n    ) as RenderProps;\n    mergedProps.ref = mergeRefs(aliasedProps.ref, element.props.ref);\n    return React.cloneElement(element, mergedProps);\n  };\n}\n\nfunction getChildElement(children: React.ReactNode, componentName: string) {\n  const child = React.Children.toArray(children).find(React.isValidElement);\n  if (child === undefined) {\n    throw new Error(`${componentName} with asChild requires a valid React element child.`);\n  }\n  return preserveRadixEventCancellation(\n    child as React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,\n  );\n}\n\ntype ProgressProps = Omit<ProgressPrimitive.Root.Props, \"value\"> & {\n  asChild?: boolean;\n  children?: React.ReactNode;\n  getValueLabel?: (value: number, max: number) => string;\n  value?: number | null;\n};\n\nfunction Progress({\n  asChild = false,\n  children,\n  className,\n  getAriaValueText,\n  getValueLabel,\n  max = 100,\n  render,\n  value = null,\n  ...props\n}: ProgressProps) {\n  const child = asChild ? getChildElement(children, \"Progress\") : undefined;\n  const content = child ? (child.props as { children?: React.ReactNode }).children : children;\n  const progressChildren = (\n    <>\n      {content}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </>\n  );\n  const stateAliases = (state: ProgressPrimitive.Root.State) => ({\n    \"data-max\": String(max),\n    \"data-state\": state.status === \"progressing\" ? \"loading\" : state.status,\n    \"data-value\": value === null ? undefined : String(value),\n  });\n\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      max={max}\n      data-slot=\"progress\"\n      className={cn(\"flex w-full flex-wrap gap-3\", className)}\n      getAriaValueText={\n        getAriaValueText ??\n        (getValueLabel\n          ? (_formattedValue, currentValue) =>\n              currentValue === null ? \"indeterminate\" : getValueLabel(currentValue, max)\n          : undefined)\n      }\n      render={renderWithAliases<ProgressPrimitive.Root.State>(\n        child ? React.cloneElement(child, undefined, progressChildren) : render,\n        <div />,\n        stateAliases,\n      )}\n      {...props}\n    >\n      {child ? undefined : progressChildren}\n    </ProgressPrimitive.Root>\n  );\n}\n\nfunction ProgressTrack({\n  asChild = false,\n  children,\n  className,\n  render,\n  ...props\n}: ProgressPrimitive.Track.Props & { asChild?: boolean; children?: React.ReactNode }) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-4 w-full items-center overflow-hidden rounded-base border-2 border-border bg-secondary-background\",\n        className,\n      )}\n      data-slot=\"progress-track\"\n      render={asChild ? getChildElement(children, \"ProgressTrack\") : render}\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </ProgressPrimitive.Track>\n  );\n}\n\nfunction ProgressIndicator({\n  asChild = false,\n  children,\n  className,\n  render,\n  ...props\n}: ProgressPrimitive.Indicator.Props & { asChild?: boolean; children?: React.ReactNode }) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full border-r-2 border-border bg-main transition-all\", className)}\n      render={renderWithAliases<ProgressPrimitive.Indicator.State>(\n        asChild ? getChildElement(children, \"ProgressIndicator\") : render,\n        <div />,\n        (state) => ({\n          \"data-state\": state.status === \"progressing\" ? \"loading\" : state.status,\n        }),\n      )}\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </ProgressPrimitive.Indicator>\n  );\n}\n\nfunction ProgressLabel({\n  asChild = false,\n  children,\n  className,\n  render,\n  ...props\n}: ProgressPrimitive.Label.Props & { asChild?: boolean; children?: React.ReactNode }) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-heading\", className)}\n      data-slot=\"progress-label\"\n      render={asChild ? getChildElement(children, \"ProgressLabel\") : render}\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </ProgressPrimitive.Label>\n  );\n}\n\nfunction ProgressValue({\n  asChild = false,\n  children,\n  className,\n  render,\n  ...props\n}: ProgressPrimitive.Value.Props & { asChild?: boolean; children?: React.ReactNode }) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\"ml-auto text-sm font-base text-foreground tabular-nums\", className)}\n      data-slot=\"progress-value\"\n      render={asChild ? getChildElement(children, \"ProgressValue\") : render}\n      {...props}\n    >\n      {asChild ? undefined : children}\n    </ProgressPrimitive.Value>\n  );\n}\n\nexport { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}