progress

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import * as ProgressPrimitive from "@kobalte/core/progress";
3 
4import { cn } from "~/lib/utils.ts";
5import type { JSX, ValidComponent } from "solid-js";
6 
7import { splitProps } from "solid-js";
8 
9type ProgressRootProps<T extends ValidComponent = "div"> =
10  & ProgressPrimitive.ProgressRootProps<T>
11  & { class?: string | undefined; children?: JSX.Element };
12 
13const Progress = <T extends ValidComponent = "div">(
14  props: PolymorphicProps<T, ProgressRootProps<T>>,
15) => {
16  const [local, others] = splitProps(props as ProgressRootProps, [
17    "class",
18    "children",
19  ]);
20  return (
21    <ProgressPrimitive.Root
22      data-slot="progress"
23      class={cn("flex flex-wrap gap-3", local.class)}
24      {...others}
25    >
26      {local.children}
27      <ProgressTrack>
28        <ProgressIndicator />
29      </ProgressTrack>
30    </ProgressPrimitive.Root>
31  );
32};
33 
34type ProgressTrackProps<T extends ValidComponent = "div"> =
35  & ProgressPrimitive.ProgressTrackProps<T>
36  & { class?: string | undefined; children?: JSX.Element };
37 
38const ProgressTrack = <T extends ValidComponent = "div">(
39  props: PolymorphicProps<T, ProgressTrackProps<T>>,
40) => {
41  const [local, others] = splitProps(props as ProgressTrackProps, ["class"]);
42  return (
43    <ProgressPrimitive.Track
44      data-slot="progress-track"
45      class={cn(
46        "bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden",
47        local.class,
48      )}
49      {...others}
50    />
51  );
52};
53 
54type ProgressIndicatorProps<T extends ValidComponent = "div"> =
55  & ProgressPrimitive.ProgressFillProps<T>
56  & { class?: string | undefined };
57 
58const ProgressIndicator = <T extends ValidComponent = "div">(
59  props: PolymorphicProps<T, ProgressIndicatorProps<T>>,
60) => {
61  const [local, others] = splitProps(props as ProgressIndicatorProps, [
62    "class",
63    "style",
64  ]);
65  // the fill rides on transform, so a consumer style has to merge with it
66  // rather than replace it
67  const transform =
68    "translateX(calc(var(--kb-progress-fill-width, 0%) - 100%))";
69  return (
70    <ProgressPrimitive.Fill
71      data-slot="progress-indicator"
72      class={cn(
73        "bg-primary size-full flex-1 transition-all",
74        local.class,
75      )}
76      style={typeof local.style === "string"
77        ? `transform:${transform};${local.style}`
78        : { transform, ...local.style }}
79      {...others}
80    />
81  );
82};
83 
84type ProgressLabelProps<T extends ValidComponent = "span"> =
85// … truncated