aivory-ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -11663,7 +11663,7 @@ export { Button, buttonVariants }
   "ui/calendar.tsx": '"use client"\n\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react"\nimport * as React from "react"\nimport { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picker"\n\nimport { Button, buttonVariants } from "@/components/ui/button"\nimport { cn } from "@/lib/utils"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = "label",\n  buttonVariant = "ghost",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>["variant"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className,\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn("w-fit", defaultClassNames.root),\n        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),\n        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),\n        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",\n          defaultClassNames.button_previous,\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",\n          defaultClassNames.button_next,\n        ),\n        month_caption: cn(\n          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",\n          defaultClassNames.month_caption,\n        ),\n        dropdowns: cn(\n          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",\n          defaultClassNames.dropdowns,\n        ),\n        dropdown_root: cn(\n          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",\n          defaultClassNames.dropdown_root,\n        ),\n        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),\n        caption_label: cn(\n          "font-medium select-none",\n          captionLayout === "label"\n            ? "text-sm"\n            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",\n          defaultClassNames.caption_label,\n        ),\n        table: "w-full border-collapse",\n        weekdays: cn("flex", defaultClassNames.weekdays),\n        weekday: cn(\n          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",\n          defaultClassNames.weekday,\n        ),\n        week: cn("mt-2 flex w-full", defaultClassNames.week),\n        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),\n        week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),\n        day: cn(\n          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",\n          props.showWeekNumber\n            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"\n            : "[&:first-child[data-selected=true]_button]:rounded-l-md",\n          defaultClassNames.day,\n        ),\n        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),\n        range_middle: cn("rounded-none", defaultClassNames.range_middle),\n        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),\n        today: cn(\n          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",\n          defaultClassNames.today,\n        ),\n        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),\n        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),\n        hidden: cn("invisible", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === "left") {\n            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />\n          }\n\n          if (orientation === "right") {\n            return <ChevronRightIcon className={cn("size-4", className)} {...props} />\n          }\n\n          return <ChevronDownIcon className={cn("size-4", className)} {...props} />\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant="ghost"\n      size="icon"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",\n        defaultClassNames.day,\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n',
   "ui/card.tsx": 'import * as React from "react"\n\nimport { cn } from "@/lib/utils"\n\nfunction Card({ className, ...props }: React.ComponentProps<"div">) {\n  return (\n    <div\n      data-slot="card"\n      className={cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<"div">) {\n  return (\n    <div\n      data-slot="card-header"\n      className={cn(\n        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<"div">) {\n  return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<"div">) {\n  return <div data-slot="card-description" className={cn("text-sm text-muted-foreground", className)} {...props} />\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<"div">) {\n  return (\n    <div\n      data-slot="card-action"\n      className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<"div">) {\n  return <div data-slot="card-content" className={cn("px-6", className)} {...props} />\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<"div">) {\n  return <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />\n}\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }\n',
   "ui/carousel.tsx": '"use client"\n\nimport useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react"\nimport { ArrowLeft, ArrowRight } from "lucide-react"\nimport * as React from "react"\n\nimport { Button } from "@/components/ui/button"\nimport { cn } from "@/lib/utils"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n  opts?: CarouselOptions\n  plugins?: CarouselPlugin\n  orientation?: "horizontal" | "vertical"\n  setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n  api: ReturnType<typeof useEmblaCarousel>[1]\n  scrollPrev: () => void\n  scrollNext: () => void\n  canScrollPrev: boolean\n  canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n  const context = React.useContext(CarouselContext)\n\n  if (!context) {\n    throw new Error("useCarousel must be used within a <Carousel />")\n  }\n\n  return context\n}\n\nfunction Carousel({\n  orientation = "horizontal",\n  opts,\n  setApi,\n  plugins,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<"div"> & CarouselProps) {\n  const [carouselRef, api] = useEmblaCarousel(\n    {\n      ...opts,\n      axis: orientation === "horizontal" ? "x" : "y",\n    },\n    plugins,\n  )\n  const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n  const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n  const onSelect = React.useCallback((api: CarouselApi) => {\n    if (!api) return\n    setCanScrollPrev(api.canScrollPrev())\n    setCanScrollNext(api.canScrollNext())\n  }, [])\n\n  const scrollPrev = React.useCallback(() => {\n    api?.scrollPrev()\n  }, [api])\n\n  const scrollNext = React.useCallback(() => {\n    api?.scrollNext()\n  }, [api])\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === "ArrowLeft") {\n        event.preventDefault()\n        scrollPrev()\n      } else if (event.key === "ArrowRight") {\n        event.preventDefault()\n        scrollNext()\n      }\n    },\n    [scrollPrev, scrollNext],\n  )\n\n  React.useEffect(() => {\n    if (!api || !setApi) return\n    setApi(api)\n  }, [api, setApi])\n\n  React.useEffect(() => {\n    if (!api) return\n    onSelect(api)\n    api.on("reInit", onSelect)\n    api.on("select", onSelect)\n\n    return () => {\n      api?.off("select", onSelect)\n    }\n  }, [api, onSelect])\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        carouselRef,\n        api: api,\n        opts,\n        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),\n        scrollPrev,\n        scrollNext,\n        canScrollPrev,\n        canScrollNext,\n      }}\n    >\n      <div\n        onKeyDownCapture={handleKeyDown}\n        className={cn("relative", className)}\n        role="region"\n        aria-roledescription="carousel"\n        data-slot="carousel"\n        {...props}\n      >\n        {children}\n      </div>\n    </CarouselContext.Provider>\n  )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<"div">) {\n  const { carouselRef, orientation } = useCarousel()\n\n  return (\n    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">\n      <div className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)} {...props} />\n    </div>\n  )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<"div">) {\n  const { orientation } = useCarousel()\n\n  return (\n    <div\n      role="group"\n      aria-roledescription="slide"\n      data-slot="carousel-item"\n      className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CarouselPrevious({\n  className,\n  variant = "outline",\n  size = "icon",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n  return (\n    <Button\n      data-slot="carousel-previous"\n      variant={variant}\n      size={size}\n      className={cn(\n        "absolute size-8 rounded-full",\n        orientation === "horizontal"\n          ? "top-1/2 -left-12 -translate-y-1/2"\n          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",\n        className,\n      )}\n      disabled={!canScrollPrev}\n      onClick={scrollPrev}\n      {...props}\n    >\n      <ArrowLeft />\n      <span className="sr-only">Previous slide</span>\n    </Button>\n  )\n}\n\nfunction CarouselNext({\n  className,\n  variant = "outline",\n  size = "icon",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n  return (\n    <Button\n      data-slot="carousel-next"\n      variant={variant}\n      size={size}\n      className={cn(\n        "absolute size-8 rounded-full",\n        orientation === "horizontal"\n          ? "top-1/2 -right-12 -translate-y-1/2"\n          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",\n        className,\n      )}\n      disabled={!canScrollNext}\n      onClick={scrollNext}\n      {...props}\n    >\n      <ArrowRight />\n      <span className="sr-only">Next slide</span>\n    </Button>\n  )\n}\n\nexport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi }\n',
-  "ui/chart.tsx": '"use client"\n\nimport * as React from "react"\nimport * as RechartsPrimitive from "recharts"\n\nimport { cn } from "@/lib/utils"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: "", dark: ".dark" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error("useChart must be used within a <ChartContainer />")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<"div"> & {\n  config: ChartConfig\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot="chart"\n        data-chart={chartId}\n        className={cn(\n          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join("\\n")}\n}\n`,\n          )\n          .join("\\n"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = "dot",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<"div"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: "line" | "dot" | "dashed"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || "value"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === "string" ? config[label as keyof typeof config]?.label || label : itemConfig?.label\n\n    if (labelFormatter) {\n      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn("font-medium", labelClassName)}>{value}</div>\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== "dot"\n\n  return (\n    <div\n      className={cn(\n        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className="grid gap-1.5">\n        {payload\n          .filter((item) => item.type !== "none")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || "value"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",\n                  indicator === "dot" && "items-center",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {\n                            "h-2.5 w-2.5": indicator === "dot",\n                            "w-1": indicator === "line",\n                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",\n                            "my-0.5": nestLabel && indicator === "dashed",\n                          })}\n                          style={\n                            {\n                              "--color-bg": indicatorColor,\n                              "--color-border": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        "flex flex-1 justify-between leading-none",\n                        nestLabel ? "items-end" : "items-center",\n                      )}\n                    >\n                      <div className="grid gap-1.5">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>\n                      </div>\n                      {item.value && (\n                        <span className="font-mono font-medium text-foreground tabular-nums">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = "bottom",\n  nameKey,\n}: React.ComponentProps<"div"> &\n  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>\n      {payload\n        .filter((item) => item.type !== "none")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || "value"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className="h-2 w-2 shrink-0 rounded-[2px]"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== "object" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]\n}\n\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent }\n',
+  "ui/chart.tsx": '"use client"\n\nimport * as React from "react"\nimport * as RechartsPrimitive from "recharts"\n\nimport { cn } from "@/lib/utils"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: "", dark: ".dark" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error("useChart must be used within a <ChartContainer />")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<"div"> & {\n  config: ChartConfig\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot="chart"\n        data-chart={chartId}\n        className={cn(\n          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-surface]:outline-hidden",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join("\\n")}\n}\n`,\n          )\n          .join("\\n"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  className,\n  indicator = "dot",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n  ...props\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<"div"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: "line" | "dot" | "dashed"\n    nameKey?: string\n    labelKey?: string\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    payload?: any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    label?: any\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    labelFormatter?: any\n    labelClassName?: string\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    formatter?: any\n  }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const payload = (props as any).payload\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || "value"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === "string" ? config[label as keyof typeof config]?.label || label : itemConfig?.label\n\n    if (labelFormatter) {\n      return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn("font-medium", labelClassName)}>{value}</div>\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== "dot"\n\n  return (\n    <div\n      className={cn(\n        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className="grid gap-1.5">\n        {payload\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          .filter((item: any) => item.type !== "none")\n           // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          .map((item: any, index: number) => {\n            const key = `${nameKey || item.name || item.dataKey || "value"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",\n                  indicator === "dot" && "items-center",\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {\n                            "h-2.5 w-2.5": indicator === "dot",\n                            "w-1": indicator === "line",\n                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",\n                            "my-0.5": nestLabel && indicator === "dashed",\n                          })}\n                          style={\n                            {\n                              "--color-bg": indicatorColor,\n                              "--color-border": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        "flex flex-1 justify-between leading-none",\n                        nestLabel ? "items-end" : "items-center",\n                      )}\n                    >\n                      <div className="grid gap-1.5">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>\n                      </div>\n                      {item.value && (\n                        <span className="font-mono font-medium text-foreground tabular-nums">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  verticalAlign = "bottom",\n  nameKey,\n  ...props\n}: React.ComponentProps<"div"> & {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    payload?: any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    verticalAlign?: any\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const payload = (props as any).payload\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}>\n      {payload\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .filter((item: any) => item.type !== "none")\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .map((item: any) => {\n          const key = `${nameKey || item.dataKey || "value"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className="h-2 w-2 shrink-0 rounded-[2px]"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== "object" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]\n}\n\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent }\n',
   "ui/checkbox.tsx": '"use client"\n\nimport { CheckIcon } from "lucide-react"\nimport { Checkbox as CheckboxPrimitive } from "radix-ui"\nimport * as React from "react"\n\nimport { cn } from "@/lib/utils"\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot="checkbox"\n      className={cn(\n        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot="checkbox-indicator"\n        className="grid place-content-center text-current transition-none"\n      >\n        <CheckIcon className="size-3.5" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n',
   "ui/collapsible.tsx": '"use client"\n\nimport { Collapsible as CollapsiblePrimitive } from "radix-ui"\n\nfunction Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />\n}\n\nfunction CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />\n}\n\nfunction CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />\n}\n\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger }\n',
   "ui/combobox.tsx": `"use client"