banhaten 0.5.0 → 0.6.0

package/registry/components/chart.tsx

@@ -1,203 +1,203 @@
-"use client"
-
-import * as React from "react"
-import {
-  Legend as RechartsLegend,
-  ResponsiveContainer,
-  Tooltip as RechartsTooltip,
-} from "recharts"
-
-import { cn } from "@/lib/utils"
-
-type ChartConfig = Record<
-  string,
-  {
-    color?: string
-    label?: React.ReactNode
-  }
->
-type ChartContainerProps = React.ComponentProps<"div"> & {
-  config?: ChartConfig
-}
-type ChartTooltipProps = React.ComponentProps<typeof RechartsTooltip>
-type ChartLegendProps = React.ComponentProps<typeof RechartsLegend>
-type ChartPayloadItem = {
-  color?: string
-  dataKey?: string | number
-  name?: React.ReactNode
-  value?: React.ReactNode
-}
-type ChartTooltipContentProps = React.ComponentProps<"div"> & {
-  active?: boolean
-  hideLabel?: boolean
-  label?: React.ReactNode
-  payload?: ChartPayloadItem[]
-}
-type ChartLegendContentProps = React.ComponentProps<"div"> & {
-  payload?: ChartPayloadItem[]
-}
-
-const chartCategoricalTokens = [
-  "--bh-chart-categorical-brand",
-  "--bh-chart-categorical-success",
-  "--bh-chart-categorical-warning",
-  "--bh-chart-categorical-danger",
-  "--bh-chart-categorical-information",
-  "--bh-chart-categorical-purple",
-  "--bh-chart-categorical-aqua",
-  "--bh-chart-categorical-fuchsia",
-] as const
-
-function ChartContainer({
-  children,
-  className,
-  config,
-  style,
-  ...props
-}: ChartContainerProps) {
-  return (
-    <div
-      data-slot="chart"
-      style={{ ...getChartStyle(config), ...style }}
-      className={cn(
-        "h-[var(--bh-space-19xl-384)] w-full text-[length:var(--bh-text-body-xs-regular-font-size)] text-[var(--bh-content-subtle)] [&_.recharts-cartesian-axis-tick_text]:fill-[var(--bh-content-muted)] [&_.recharts-cartesian-grid_line]:stroke-[var(--bh-border-subtle)] [&_.recharts-tooltip-cursor]:fill-[var(--bh-bg-neutral-subtle)]",
-        className
-      )}
-      {...props}
-    >
-      <ResponsiveContainer>{children}</ResponsiveContainer>
-    </div>
-  )
-}
-
-const ChartTooltip = RechartsTooltip
-const ChartLegend = RechartsLegend
-
-/**
- * Recharts clones the element passed as `content` and injects its own internal
- * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
- * not valid DOM attributes, so forward only what a presentational element can
- * legitimately receive.
- */
-function forwardableDomProps(props: Record<string, unknown>) {
-  return Object.fromEntries(
-    Object.entries(props).filter(
-      ([key]) =>
-        key === "id" ||
-        key === "role" ||
-        key === "style" ||
-        key === "tabIndex" ||
-        key.startsWith("aria-") ||
-        key.startsWith("data-")
-    )
-  )
-}
-
-function ChartTooltipContent({
-  active,
-  className,
-  hideLabel = false,
-  label,
-  payload,
-  ...props
-}: ChartTooltipContentProps) {
-  if (!active || !payload?.length) return null
-
-  return (
-    <div
-      data-slot="chart-tooltip"
-      className={cn(
-        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)]",
-        className
-      )}
-      {...forwardableDomProps(props)}
-    >
-      {!hideLabel && label ? (
-        <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
-          {label}
-        </div>
-      ) : null}
-      <div className="grid gap-[var(--bh-space-xs-4)]">
-        {payload.map((item, index) => (
-          <div
-            key={`${String(item.dataKey ?? item.name)}-${index}`}
-            className="flex items-center gap-[var(--bh-space-md-8)]"
-          >
-            <span
-              aria-hidden="true"
-              className="size-[var(--bh-space-md-8)] shrink-0 rounded-[var(--bh-radius-full)]"
-              style={{ backgroundColor: item.color }}
-            />
-            <span className="min-w-0 flex-1 text-[var(--bh-content-subtle)]">
-              {item.name}
-            </span>
-            <span className="font-[var(--bh-text-body-xs-medium-font-weight)]">
-              {item.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function ChartLegendContent({
-  className,
-  payload,
-  ...props
-}: ChartLegendContentProps) {
-  if (!payload?.length) return null
-
-  return (
-    <div
-      data-slot="chart-legend"
-      className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
-      {...forwardableDomProps(props)}
-    >
-      {payload.map((item, index) => (
-        <div
-          key={`${String(item.dataKey ?? item.name)}-${index}`}
-          className="inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-subtle)]"
-        >
-          <span
-            aria-hidden="true"
-            className="size-[var(--bh-space-md-8)] rounded-[var(--bh-radius-full)]"
-            style={{ backgroundColor: item.color }}
-          />
-          {item.value ?? item.name}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function getChartStyle(config?: ChartConfig): React.CSSProperties {
-  if (!config) return {}
-
-  return Object.entries(config).reduce<React.CSSProperties>(
-    (style, [key, value], index) => ({
-      ...style,
-      [`--color-${key}`]:
-        value.color ??
-        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
-    }),
-    {}
-  )
-}
-
-export {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-}
-export type {
-  ChartConfig,
-  ChartContainerProps,
-  ChartLegendContentProps,
-  ChartLegendProps,
-  ChartPayloadItem,
-  ChartTooltipContentProps,
-  ChartTooltipProps,
-}
+"use client"
+
+import * as React from "react"
+import {
+  Legend as RechartsLegend,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+} from "recharts"
+
+import { cn } from "@/lib/utils"
+
+type ChartConfig = Record<
+  string,
+  {
+    color?: string
+    label?: React.ReactNode
+  }
+>
+type ChartContainerProps = React.ComponentProps<"div"> & {
+  config?: ChartConfig
+}
+type ChartTooltipProps = React.ComponentProps<typeof RechartsTooltip>
+type ChartLegendProps = React.ComponentProps<typeof RechartsLegend>
+type ChartPayloadItem = {
+  color?: string
+  dataKey?: string | number
+  name?: React.ReactNode
+  value?: React.ReactNode
+}
+type ChartTooltipContentProps = React.ComponentProps<"div"> & {
+  active?: boolean
+  hideLabel?: boolean
+  label?: React.ReactNode
+  payload?: ChartPayloadItem[]
+}
+type ChartLegendContentProps = React.ComponentProps<"div"> & {
+  payload?: ChartPayloadItem[]
+}
+
+const chartCategoricalTokens = [
+  "--bh-chart-categorical-brand",
+  "--bh-chart-categorical-success",
+  "--bh-chart-categorical-warning",
+  "--bh-chart-categorical-danger",
+  "--bh-chart-categorical-information",
+  "--bh-chart-categorical-purple",
+  "--bh-chart-categorical-aqua",
+  "--bh-chart-categorical-fuchsia",
+] as const
+
+function ChartContainer({
+  children,
+  className,
+  config,
+  style,
+  ...props
+}: ChartContainerProps) {
+  return (
+    <div
+      data-slot="chart"
+      style={{ ...getChartStyle(config), ...style }}
+      className={cn(
+        "h-[var(--bh-space-19xl-384)] w-full text-[length:var(--bh-text-body-xs-regular-font-size)] text-[var(--bh-content-subtle)] [&_.recharts-cartesian-axis-tick_text]:fill-[var(--bh-content-muted)] [&_.recharts-cartesian-grid_line]:stroke-[var(--bh-border-subtle)] [&_.recharts-tooltip-cursor]:fill-[var(--bh-bg-neutral-subtle)]",
+        className
+      )}
+      {...props}
+    >
+      <ResponsiveContainer>{children}</ResponsiveContainer>
+    </div>
+  )
+}
+
+const ChartTooltip = RechartsTooltip
+const ChartLegend = RechartsLegend
+
+/**
+ * Recharts clones the element passed as `content` and injects its own internal
+ * props (`iconSize`, `verticalAlign`, `chartWidth`, `itemSorter`, …). Those are
+ * not valid DOM attributes, so forward only what a presentational element can
+ * legitimately receive.
+ */
+function forwardableDomProps(props: Record<string, unknown>) {
+  return Object.fromEntries(
+    Object.entries(props).filter(
+      ([key]) =>
+        key === "id" ||
+        key === "role" ||
+        key === "style" ||
+        key === "tabIndex" ||
+        key.startsWith("aria-") ||
+        key.startsWith("data-")
+    )
+  )
+}
+
+function ChartTooltipContent({
+  active,
+  className,
+  hideLabel = false,
+  label,
+  payload,
+  ...props
+}: ChartTooltipContentProps) {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-tooltip"
+      className={cn(
+        "grid min-w-[var(--bh-space-17xl-288)] gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] bg-[var(--bh-bg-raised)] p-[var(--bh-space-xl-12)] text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-default)] shadow-[var(--elevation-popover)]",
+        className
+      )}
+      {...forwardableDomProps(props)}
+    >
+      {!hideLabel && label ? (
+        <div className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+          {label}
+        </div>
+      ) : null}
+      <div className="grid gap-[var(--bh-space-xs-4)]">
+        {payload.map((item, index) => (
+          <div
+            key={`${String(item.dataKey ?? item.name)}-${index}`}
+            className="flex items-center gap-[var(--bh-space-md-8)]"
+          >
+            <span
+              aria-hidden="true"
+              className="size-[var(--bh-space-md-8)] shrink-0 rounded-[var(--bh-radius-full)]"
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="min-w-0 flex-1 text-[var(--bh-content-subtle)]">
+              {item.name}
+            </span>
+            <span className="font-[var(--bh-text-body-xs-medium-font-weight)]">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ChartLegendContent({
+  className,
+  payload,
+  ...props
+}: ChartLegendContentProps) {
+  if (!payload?.length) return null
+
+  return (
+    <div
+      data-slot="chart-legend"
+      className={cn("flex flex-wrap items-center justify-center gap-[var(--bh-space-3xl-16)]", className)}
+      {...forwardableDomProps(props)}
+    >
+      {payload.map((item, index) => (
+        <div
+          key={`${String(item.dataKey ?? item.name)}-${index}`}
+          className="inline-flex items-center gap-[var(--bh-space-xs-4)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)] text-[var(--bh-content-subtle)]"
+        >
+          <span
+            aria-hidden="true"
+            className="size-[var(--bh-space-md-8)] rounded-[var(--bh-radius-full)]"
+            style={{ backgroundColor: item.color }}
+          />
+          {item.value ?? item.name}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function getChartStyle(config?: ChartConfig): React.CSSProperties {
+  if (!config) return {}
+
+  return Object.entries(config).reduce<React.CSSProperties>(
+    (style, [key, value], index) => ({
+      ...style,
+      [`--color-${key}`]:
+        value.color ??
+        `var(${chartCategoricalTokens[index % chartCategoricalTokens.length]})`,
+    }),
+    {}
+  )
+}
+
+export {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+}
+export type {
+  ChartConfig,
+  ChartContainerProps,
+  ChartLegendContentProps,
+  ChartLegendProps,
+  ChartPayloadItem,
+  ChartTooltipContentProps,
+  ChartTooltipProps,
+}