Progress

1import type { Component, JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as ProgressPrimitive from "@kobalte/core/progress"
6 
7import { Label } from "~/registry/ui/label"
8 
9type ProgressRootProps<T extends ValidComponent = "div"> =
10  ProgressPrimitive.ProgressRootProps<T> & { children?: JSX.Element }
11 
12const Progress = <T extends ValidComponent = "div">(
13  props: PolymorphicProps<T, ProgressRootProps<T>>
14) => {
15  const [local, others] = splitProps(props as ProgressRootProps, ["children"])
16  return (
17    <ProgressPrimitive.Root {...others}>
18      {local.children}
19      <ProgressPrimitive.Track class="relative h-2 w-full overflow-hidden rounded-full bg-secondary">
20        <ProgressPrimitive.Fill class="h-full w-[var(--kb-progress-fill-width)] flex-1 bg-primary transition-all" />
21      </ProgressPrimitive.Track>
22    </ProgressPrimitive.Root>
23  )
24}
25 
26const ProgressLabel: Component<ProgressPrimitive.ProgressLabelProps> = (props) => {
27  return <ProgressPrimitive.Label as={Label} {...props} />
28}
29 
30const ProgressValueLabel: Component<ProgressPrimitive.ProgressValueLabelProps> = (props) => {
31  return <ProgressPrimitive.ValueLabel as={Label} {...props} />
32}
33 
34export { Progress, ProgressLabel, ProgressValueLabel }