Partition Bar

1"use client";
2 
3import {
4  Children,
5  createContext,
6  HTMLAttributes,
7  isValidElement,
8  type ReactElement,
9  useContext
10} from "react";
11import { cn } from "@/lib/utils";
12import { cva, VariantProps } from "class-variance-authority";
13 
14type PartitionBarContextType = {
15  total: number;
16  size: VariantProps<typeof partitionBarVariants>["size"];
17};
18 
19const PartitionBarCtxt = createContext<PartitionBarContextType | null>(null);
20 
21function usePartitionBarContext(): PartitionBarContextType {
22  const context = useContext(PartitionBarCtxt);
23  if (!context) {
24    throw new Error(
25      "usePartitionBarContext must be used within a PartitionBarProvider"
26    );
27  }
28  return context;
29}
30 
31//////////////////////////////////////////////////////////////////////////////
32 
33const partitionBarVariants = cva("flex flex-row", {
34  variants: {
35    size: {
36      sm: "text-xs",
37      md: "text-sm",
38      lg: "text-md"
39    }
40  },
41  defaultVariants: {
42    size: "md"
43  }
44});
45 
46interface PartitionBar
47  extends HTMLAttributes<HTMLUListElement>,
48    VariantProps<typeof partitionBarVariants> {
49  children?:
50    | ReactElement<PartitionBarSegment>
51    | ReactElement<PartitionBarSegment>[];
52  gap?: number;
53}
54 
55export default function PartitionBar({
56  children,
57  className,
58  gap = 1,
59  size,
60  ...props
61}: PartitionBar) {
62  const total = Children.toArray(children).reduce<number>(
63    (sum, child) =>
64      isValidElement(child)
65        ? sum + ((child.props as PartitionBarSegment).num || 0)
66        : sum,
67    0
68  );
69 
70  return (
71    <PartitionBarCtxt.Provider value={{ total, size }}>
72      <ul
73        className={cn("w-full", partitionBarVariants({ size }), className)}
74        style={{
75          gap: `${gap * 4}px`
76        }}
77        {...props}
78      >
79        {children}
80      </ul>
81    </PartitionBarCtxt.Provider>
82  );
83}
84 
85////////////////////////////////////////////////////////////////////////////
86 
87const partitionBarLineVariants = cva("", {
88  variants: {
89    variant: {
90      default: "bg-primary",
91      secondary: "bg-primary/60",
92      destructive: "bg-destructive",
93      outline: "border border-input bg-background",
94      muted: "bg-primary/40"
95    }
96  },
97  defaultVariants: {
98    variant: "default"
99  }
100});
101 
102const partitionBarTitleVariants = cva("", {
103  variants: {
104    variant: {
105      default: "text-primary",
106      secondary: "text-primary/60",
107      destructive: "text-destructive",
108      outline: "text-foreground",
109      muted: "text-primary/40"
110    }
111  },
112  defaultVariants: {
113// … truncated