{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "title": "Progress",
  "description": "A bar for how far along a task is, with an optional label and value.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/progress.tsx",
      "content": "\"use client\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { trackStyles, typeStyles } from \"@/lib/constella/styles\";\nimport {\n  durations,\n  easings,\n  media,\n  opacities,\n} from \"@/lib/constella/tokens.stylex\";\n\ntype Styled<T> = Omit<T, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\n// A segment a third the track's width, crossing it while the amount is unknown.\nconst sweep = stylex.keyframes({\n  from: { transform: \"translateX(-100%)\" },\n  to: { transform: \"translateX(300%)\" },\n});\nconst breathe = stylex.keyframes({\n  \"50%\": { opacity: opacities.pulse },\n});\nconst unknown = \":is([data-indeterminate])\";\n\nconst styles = stylex.create({\n  indeterminate: {\n    animationDuration: { default: null, [unknown]: durations.pulse },\n    animationIterationCount: { default: null, [unknown]: \"infinite\" },\n    animationName: {\n      default: null,\n      [unknown]: { default: sweep, [media.reducedMotion]: breathe },\n    },\n    animationTimingFunction: { default: null, [unknown]: easings.inOut },\n    width: { default: null, [unknown]: \"33.333%\" },\n  },\n});\n\n/** Renders the track and indicator after its children, so a label and value sit above. */\nfunction Progress({\n  children,\n  sx,\n  ...props\n}: Styled<ProgressPrimitive.Root.Props>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      {...props}\n      {...stylex.props(trackStyles.root, sx)}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  );\n}\n\nfunction ProgressTrack({\n  sx,\n  ...props\n}: Styled<ProgressPrimitive.Track.Props>) {\n  return (\n    <ProgressPrimitive.Track\n      data-slot=\"progress-track\"\n      {...props}\n      {...stylex.props(trackStyles.track, sx)}\n    />\n  );\n}\n\nfunction ProgressIndicator({\n  sx,\n  ...props\n}: Styled<ProgressPrimitive.Indicator.Props>) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      {...props}\n      {...stylex.props(trackStyles.indicator, styles.indeterminate, sx)}\n    />\n  );\n}\n\nfunction ProgressLabel({\n  sx,\n  ...props\n}: Styled<ProgressPrimitive.Label.Props>) {\n  return (\n    <ProgressPrimitive.Label\n      data-slot=\"progress-label\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, trackStyles.label], sx)}\n    />\n  );\n}\n\nfunction ProgressValue({\n  sx,\n  ...props\n}: Styled<ProgressPrimitive.Value.Props>) {\n  return (\n    <ProgressPrimitive.Value\n      data-slot=\"progress-value\"\n      {...props}\n      {...stylex.props([typeStyles.textSm, trackStyles.value], sx)}\n    />\n  );\n}\n\nexport {\n  Progress,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressTrack,\n  ProgressValue,\n};\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/progress/index.md",
  "type": "registry:ui"
}