@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/src/components/charts/radial-chart.tsx

@@ -1,312 +0,0 @@
-"use client";
-
-import {
-  Cell,
-  PolarAngleAxis,
-  PolarGrid,
-  Radar,
-  RadarChart as RechartsRadarChart,
-  RadialBar,
-  RadialBarChart as RechartsRadialBarChart,
-} from "recharts";
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "../ui/chart";
-import { cn } from "@/lib/utils";
-
-export interface RadialChartData {
-  [key: string]: string | number;
-}
-
-export interface RadialBarChartProps {
-  /**
-   * Array of data objects to be displayed in the chart
-   */
-  data: RadialChartData[];
-  /**
-   * Configuration for chart styling and labels
-   */
-  config: ChartConfig;
-  /**
-   * Key from data objects to use for segment names
-   */
-  nameKey: string;
-  /**
-   * Key from data objects to use for values
-   */
-  dataKey: string;
-  /**
-   * Show legend
-   * @default false
-   */
-  showLegend?: boolean;
-  /**
-   * Show tooltip on hover
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * Inner radius (0-100)
-   * @default 30
-   */
-  innerRadius?: number;
-  /**
-   * Outer radius (0-100)
-   * @default 100
-   */
-  outerRadius?: number;
-  /**
-   * Start angle in degrees
-   * @default 90
-   */
-  startAngle?: number;
-  /**
-   * End angle in degrees
-   * @default -270
-   */
-  endAngle?: number;
-  /**
-   * Custom className for the container
-   */
-  className?: string;
-  /**
-   * Chart height aspect ratio
-   * @default "aspect-square"
-   */
-  aspectRatio?: string;
-  /**
-   * Show labels on bars
-   * @default false
-   */
-  showLabels?: boolean;
-  /**
-   * Corner radius for bars
-   * @default 2
-   */
-  cornerRadius?: number;
-  /**
-   * Enable gradient fill for bars (uses Recharts native gradient support via Cell component)
-   * @default true
-   */
-  gradient?: boolean;
-  /**
-   * Make chart grow to fill parent container (ignores aspectRatio if true)
-   * @default false
-   */
-  grow?: boolean;
-  /**
-   * Custom formatter function for tooltip values
-   * @example (value, name, item, index, payload) => `$${value.toLocaleString()}`
-   */
-  tooltipFormatter?: (
-    value: any,
-    name: any,
-    item: any,
-    index: number,
-    payload: any
-  ) => React.ReactNode;
-}
-
-export function RadialBarChart({
-  data,
-  config,
-  nameKey,
-  dataKey,
-  showLegend = false,
-  showTooltip = true,
-  innerRadius = 30,
-  outerRadius = 100,
-  startAngle = 90,
-  endAngle = -270,
-  className,
-  aspectRatio = "aspect-square",
-  showLabels = false,
-  cornerRadius = 2,
-  gradient = true,
-  grow = false,
-  tooltipFormatter,
-}: RadialBarChartProps) {
-  return (
-    <ChartContainer config={config} className={cn(grow ? "h-full w-full" : aspectRatio, className)}>
-      <RechartsRadialBarChart
-        data={data}
-        startAngle={startAngle}
-        endAngle={endAngle}
-        innerRadius={`${innerRadius}%`}
-        outerRadius={`${outerRadius}%`}
-      >
-        <PolarGrid gridType="circle" />
-
-        {showTooltip && (
-          <ChartTooltip
-            cursor={false}
-            content={
-              <ChartTooltipContent hideLabel nameKey={nameKey} formatter={tooltipFormatter} />
-            }
-          />
-        )}
-
-        {showLegend && <ChartLegend content={<ChartLegendContent nameKey={nameKey} />} />}
-
-        <defs>
-          {gradient &&
-            data.map((entry, index) => {
-              const name = entry[nameKey] as string;
-              return (
-                <linearGradient
-                  key={name}
-                  id={`gradient-radial-${name}`}
-                  x1="1"
-                  y1="0"
-                  x2="0"
-                  y2="0"
-                >
-                  <stop offset="0%" stopColor={`var(--color-${name})`} stopOpacity={0.1} />
-                  <stop offset="100%" stopColor={`var(--color-${name})`} stopOpacity={1} />
-                </linearGradient>
-              );
-            })}
-        </defs>
-
-        <RadialBar
-          dataKey={dataKey}
-          cornerRadius={cornerRadius}
-          label={showLabels ? { position: "insideStart", fill: "#fff" } : false}
-          background={{ fill: "transparent" }}
-        >
-          {/* Using Recharts native Cell component for per-bar styling and gradients */}
-          {data.map((entry, index) => {
-            const name = entry[nameKey] as string;
-            const fill = gradient ? `url(#gradient-radial-${name})` : `var(--color-${name})`;
-            return <Cell key={`cell-${index}`} fill={fill} />;
-          })}
-        </RadialBar>
-      </RechartsRadialBarChart>
-    </ChartContainer>
-  );
-}
-
-export interface RadarChartProps {
-  /**
-   * Array of data objects to be displayed in the chart
-   */
-  data: RadialChartData[];
-  /**
-   * Configuration for chart styling and labels
-   */
-  config: ChartConfig;
-  /**
-   * Key from data objects to use for categories
-   */
-  categoryKey: string;
-  /**
-   * Array of keys from data objects to display as radar areas
-   */
-  dataKeys: string[];
-  /**
-   * Show legend
-   * @default false
-   */
-  showLegend?: boolean;
-  /**
-   * Show tooltip on hover
-   * @default true
-   */
-  showTooltip?: boolean;
-  /**
-   * Show dots on data points
-   * @default true
-   */
-  showDots?: boolean;
-  /**
-   * Fill opacity for radar areas
-   * @default 0.6
-   */
-  fillOpacity?: number;
-  /**
-   * Stroke width for radar lines
-   * @default 2
-   */
-  strokeWidth?: number;
-  /**
-   * Custom className for the container
-   */
-  className?: string;
-  /**
-   * Chart height aspect ratio
-   * @default "aspect-square"
-   */
-  aspectRatio?: string;
-  /**
-   * Make chart grow to fill parent container (ignores aspectRatio if true)
-   * @default false
-   */
-  grow?: boolean;
-  /**
-   * Custom formatter function for tooltip values
-   * @example (value, name, item, index, payload) => `$${value.toLocaleString()}`
-   */
-  tooltipFormatter?: (
-    value: any,
-    name: any,
-    item: any,
-    index: number,
-    payload: any
-  ) => React.ReactNode;
-}
-
-export function RadarChart({
-  data,
-  config,
-  categoryKey,
-  dataKeys,
-  showLegend = false,
-  showTooltip = true,
-  showDots = true,
-  fillOpacity = 0.6,
-  strokeWidth = 2,
-  className,
-  aspectRatio = "aspect-square",
-  grow = false,
-  tooltipFormatter,
-}: RadarChartProps) {
-  return (
-    <ChartContainer config={config} className={cn(grow ? "h-full w-full" : aspectRatio, className)}>
-      <RechartsRadarChart data={data}>
-        <PolarGrid />
-        <PolarAngleAxis
-          dataKey={categoryKey}
-          tickFormatter={(value) =>
-            config[value as keyof typeof config]?.label?.toString() || value
-          }
-        />
-
-        {showTooltip && (
-          <ChartTooltip
-            cursor={false}
-            content={<ChartTooltipContent indicator="line" formatter={tooltipFormatter} />}
-          />
-        )}
-
-        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
-
-        {dataKeys.map((key) => (
-          <Radar
-            key={key}
-            dataKey={key}
-            fill={`var(--color-${key})`}
-            stroke={`var(--color-${key})`}
-            fillOpacity={fillOpacity}
-            strokeWidth={strokeWidth}
-            dot={showDots}
-          />
-        ))}
-      </RechartsRadarChart>
-    </ChartContainer>
-  );
-}

package/src/components/features/api-status/index.tsx

@@ -1,23 +0,0 @@
-import { TurtleTooltip } from "@/index";
-import { Circle } from "lucide-react";
-
-type APIStatusProps =
-  | { warning: true; tooltip: string }
-  | { warning: false; tooltip?: undefined };
-
-export function APIStatus(props: APIStatusProps) {
-  if (props.warning) {
-    return (
-      <TurtleTooltip
-        trigger={
-          <Circle className="size-3 rounded-full fill-orange-500 stroke-orange-500 stroke-2 p-0.5 ring-1 ring-orange-500/80 drop-shadow-sm drop-shadow-orange-500/50" />
-        }
-        content={props.tooltip}
-        className="text-left"
-      />
-    );
-  }
-  return (
-    <Circle className="fill-accent stroke-accent ring-accent/80 drop-shadow-accent/50 size-3 rounded-full stroke-2 p-0.5 ring-1 drop-shadow-sm" />
-  );
-}