@olympusoss/canvas 2.20.2 → 4.0.0

package/src/components/atoms/toggle.tsx

@@ -1,80 +0,0 @@
-"use client";
-
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const toggleVariants = cva(
-	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand data-[state=on]:text-brand-foreground data-[state=on]:hover:bg-brand/90 data-[state=on]:hover:text-brand-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-transparent",
-				outline:
-					"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
-			},
-			size: {
-				default: "h-9 px-2 min-w-9",
-				sm: "h-8 px-1.5 min-w-8",
-				lg: "h-10 px-2.5 min-w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-
-export interface ToggleProps
-	extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
-		VariantProps<typeof toggleVariants> {
-	/**
-	 * `default` (filled when on) or `outline` (bordered).
-	 * @default "default"
-	 */
-	variant?: "default" | "outline";
-	/**
-	 * Square size — `sm` (32px), `default` (36px), or `lg` (40px).
-	 * @default "default"
-	 */
-	size?: "default" | "sm" | "lg";
-	/** Controlled pressed state. Pair with `onPressedChange`. */
-	pressed?: boolean;
-	/**
-	 * Initial pressed state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultPressed?: boolean;
-	/** Fires when the user toggles the pressed state. */
-	onPressedChange?: (pressed: boolean) => void;
-	/**
-	 * Disable the toggle.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Toggle content (typically an icon or short label). */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
-	({ className, variant, size, ...props }, ref) => (
-		<TogglePrimitive.Root
-			ref={ref}
-			className={cn(toggleVariants({ variant, size, className }))}
-			{...props}
-		/>
-	),
-);
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };

package/src/components/charts/activity-heatmap.tsx

@@ -1,186 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const DEFAULT_WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] as const;
-
-export interface ActivityHeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Cell values in row-major order. Each entry is a number in `[0, 1]`
-	 * where `0` paints the lowest tint and `1` paints the highest. Values are
-	 * clamped on render. The grid dimensions come from `data.length` and
-	 * `data[0].length`; pass jagged arrays only if you accept short rows.
-	 */
-	data: number[][];
-	/**
-	 * CSS variable name (without leading `--`) used for the cell hue. Default
-	 * `chart-1`. Cells render as `hsl(var(--{colorVar}) / opacity)`.
-	 */
-	colorVar?: string;
-	/** Pixel height of each cell row. Default `14`. */
-	cellHeight?: number;
-	/** Pixel gap between cells. Default `2`. */
-	gap?: number;
-	/** Pixel border-radius on each cell. Default `3`. */
-	cellRadius?: number;
-	/**
-	 * Render the cell `title` attribute (browser tooltip on hover) for each
-	 * coordinate. Receives `(rowIndex, colIndex, value)` and should return a
-	 * string. Returns nothing → no title set.
-	 */
-	cellTitle?: (row: number, col: number, value: number) => string | undefined;
-	/**
-	 * Optional left-side row labels (Y-axis). When provided, must align with
-	 * `data.length`. Empty / nullish entries render as blank cells so the
-	 * label column stays aligned with the grid.
-	 */
-	rowLabels?: React.ReactNode[];
-	/**
-	 * Optional bottom-side column labels (X-axis). When provided, must align
-	 * with `data[0].length`. Pass empty strings (or `null`) for indices you
-	 * want to leave blank — useful for sparse hour ticks (e.g. only label
-	 * 0/6/12/18/23 across a 24-column matrix).
-	 */
-	colLabels?: React.ReactNode[];
-	/**
-	 * Show a "Fewer ↔ More" gradient legend below the grid. Pass `true` for
-	 * the default labels, or an object to override one or both ends. The
-	 * gradient mirrors the cell-opacity ramp (`0.08` → `0.93`).
-	 * @default false
-	 */
-	legend?: boolean | { fromLabel?: React.ReactNode; toLabel?: React.ReactNode };
-}
-
-/**
- * CSS-grid heatmap of opacity-tinted cells. Useful for time-of-day × day-of-week
- * matrices (token issuance, sign-in concentration, queue depth) where a full
- * chart would be overkill. Rendering is a flat `display: grid` — no canvas, no
- * SVG, fully interactive via hover titles.
- *
- * Optionally renders row labels on the left, sparse column labels below, and a
- * `Fewer ↔ More` gradient legend — toggle each with `rowLabels` / `colLabels` /
- * `legend` props.
- */
-export const ActivityHeatmap = React.forwardRef<HTMLDivElement, ActivityHeatmapProps>(
-	(
-		{
-			data,
-			colorVar = "chart-1",
-			cellHeight = 14,
-			gap = 2,
-			cellRadius = 3,
-			cellTitle,
-			rowLabels,
-			colLabels,
-			legend = false,
-			className,
-			...props
-		},
-		ref,
-	) => {
-		const cols = data[0]?.length ?? 0;
-		const legendObj = typeof legend === "object" ? legend : null;
-		const fromLabel = legendObj?.fromLabel ?? "Fewer";
-		const toLabel = legendObj?.toLabel ?? "More";
-		const showLegend = legend !== false;
-		// 7-row grids default to weekday labels (Mon–Sun) — covers the common
-		// GitHub-style yearly contribution pattern without each consumer
-		// re-declaring the array.
-		const resolvedRowLabels =
-			rowLabels ?? (data.length === 7 ? DEFAULT_WEEKDAY_LABELS.slice() : undefined);
-
-		return (
-			<div ref={ref} className={cn("w-full", className)} {...props}>
-				<div className="flex gap-2">
-					{resolvedRowLabels && resolvedRowLabels.length > 0 && (
-						<div
-							className="grid text-[10px] tabular-nums text-muted-foreground"
-							style={{
-								gridTemplateRows: `repeat(${data.length}, ${cellHeight}px)`,
-								rowGap: gap,
-							}}
-							aria-hidden
-						>
-							{Array.from({ length: data.length }, (_, i) => (
-								<span key={`row-label-${i}`} className="flex items-center leading-none">
-									{resolvedRowLabels[i] ?? ""}
-								</span>
-							))}
-						</div>
-					)}
-					<div className="flex-1">
-						<div
-							style={{
-								display: "grid",
-								gridTemplateRows: `repeat(${data.length}, ${cellHeight}px)`,
-								gap,
-							}}
-						>
-							{data.map((row, r) => (
-								<div
-									key={`r-${r}`}
-									style={{
-										display: "grid",
-										gridTemplateColumns: `repeat(${cols}, 1fr)`,
-										gap,
-									}}
-								>
-									{row.map((raw, c) => {
-										const v = Math.max(0, Math.min(1, raw));
-										const opacity = 0.08 + v * 0.85;
-										const title = cellTitle?.(r, c, v);
-										return (
-											<div
-												key={`c-${r}-${c}`}
-												data-cell=""
-												title={title}
-												aria-hidden
-												style={{
-													borderRadius: cellRadius,
-													background: `hsl(var(--${colorVar}) / ${opacity})`,
-												}}
-											/>
-										);
-									})}
-								</div>
-							))}
-						</div>
-						{colLabels && colLabels.length > 0 && (
-							<div
-								className="mt-2 grid text-[10px] tabular-nums text-muted-foreground"
-								style={{
-									gridTemplateColumns: `repeat(${cols}, 1fr)`,
-									columnGap: gap,
-								}}
-							>
-								{Array.from({ length: cols }, (_, i) => {
-									const label = colLabels[i];
-									const empty = label === undefined || label === null || label === "";
-									return (
-										<span key={`col-label-${i}`} className="text-center" aria-hidden={empty}>
-											{empty ? "" : label}
-										</span>
-									);
-								})}
-							</div>
-						)}
-					</div>
-				</div>
-				{showLegend && (
-					<div className="mt-3 flex items-center gap-2 text-xs text-muted-foreground">
-						<span>{fromLabel}</span>
-						<div
-							className="h-2 flex-1 rounded-full"
-							style={{
-								background: `linear-gradient(90deg, hsl(var(--${colorVar}) / 0.08) 0%, hsl(var(--${colorVar}) / 0.93) 100%)`,
-							}}
-							aria-hidden
-						/>
-						<span>{toLabel}</span>
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-ActivityHeatmap.displayName = "ActivityHeatmap";

package/src/components/charts/axes.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-/**
- * Axis re-exports — pure pass-throughs of the Recharts primitives. Wrapping
- * them in function components breaks Recharts' `findAllByType` introspection
- * (chart types like LineChart look for `child.type === XAxis` to detect axes;
- * our wrapper would have a different type, so the chart can't find them and
- * crashes with "xAxisId requires a corresponding xAxisId on the targeted
- * graphical component" errors).
- *
- * Theming is applied via CSS selectors on the `<ChartContainer>` wrapping div
- * (`[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground`, etc.).
- */
-export {
-	CartesianAxis,
-	PolarAngleAxis,
-	PolarRadiusAxis,
-	XAxis,
-	YAxis,
-	ZAxis,
-} from "recharts";

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

@@ -1,254 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "../../lib/utils";
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
-
-/**
- * Recharts data primitives that should auto-cycle through `--chart-N`
- * colours when the consumer didn't pass an explicit `fill` / `stroke`.
- *
- * We compare by reference (the actual class component from `recharts`) — the
- * deep-clone walker uses `child.type === T` to detect them. This works because
- * canvas re-exports these symbols from `recharts` directly (see `data.tsx`).
- */
-const PALETTE_TARGETS = new Set<unknown>([
-	RechartsPrimitive.Line,
-	RechartsPrimitive.Bar,
-	RechartsPrimitive.Area,
-	RechartsPrimitive.Pie,
-	RechartsPrimitive.Scatter,
-	RechartsPrimitive.Radar,
-	RechartsPrimitive.RadialBar,
-	RechartsPrimitive.Funnel,
-]);
-
-const PALETTE_SIZE = 5;
-
-function nextColour(counter: { i: number }) {
-	const idx = counter.i++ % PALETTE_SIZE;
-	return `hsl(var(--chart-${idx + 1}))`;
-}
-
-/**
- * Walk a Pie's `<Cell>` children and inject per-cell palette fills when none
- * is set, so each slice gets a distinct hue without requiring the consumer to
- * write `<Cell fill={...} />` for every entry.
- */
-function paintPieCells(children: React.ReactNode, counter: { i: number }): React.ReactNode {
-	return React.Children.map(children, (child) => {
-		if (!React.isValidElement(child)) return child;
-		const cellProps = child.props as { fill?: unknown };
-		if (child.type === RechartsPrimitive.Cell && cellProps.fill === undefined) {
-			return React.cloneElement(child, { fill: nextColour(counter) } as Partial<typeof cellProps>);
-		}
-		return child;
-	});
-}
-
-/**
- * Inject per-row `fill` on Funnel data when the consumer didn't supply one.
- * Recharts Funnel reads each datum's `fill` to colour the stage, so we map
- * the array and assign palette colours in order.
- */
-function paintFunnelData<T extends { fill?: unknown }>(data: T[], counter: { i: number }): T[] {
-	return data.map((row) => (row.fill === undefined ? { ...row, fill: nextColour(counter) } : row));
-}
-
-/**
- * Recursively walk the children, cloning any data primitive that's missing
- * `fill`/`stroke` and injecting an `hsl(var(--chart-N))` default. Counter is
- * passed by reference so order is deterministic across the entire tree.
- */
-function applyPalette(children: React.ReactNode, counter: { i: number }): React.ReactNode {
-	return React.Children.map(children, (child) => {
-		if (!React.isValidElement(child)) return child;
-		const props = child.props as {
-			fill?: unknown;
-			stroke?: unknown;
-			children?: React.ReactNode;
-			data?: unknown;
-			label?: unknown;
-		};
-
-		// Pie: walk Cell children and assign per-slice palette colours so each
-		// slice is distinct. Also default `label={true}` so slices render their
-		// data-key value at the perimeter without needing a `<LabelList>`.
-		if (child.type === RechartsPrimitive.Pie) {
-			const next: Record<string, unknown> = {};
-			if (props.children !== undefined) {
-				next.children = paintPieCells(props.children, counter);
-			} else if (props.fill === undefined && props.stroke === undefined) {
-				const colour = nextColour(counter);
-				next.fill = colour;
-				next.stroke = colour;
-			}
-			if (props.label === undefined) next.label = true;
-			return React.cloneElement(child, next as Partial<typeof props>);
-		}
-
-		// Funnel: distribute palette colours across the data array (Recharts
-		// reads `fill` from each datum, not from the <Funnel> element).
-		if (child.type === RechartsPrimitive.Funnel && Array.isArray(props.data)) {
-			return React.cloneElement(child, {
-				data: paintFunnelData(props.data as { fill?: unknown }[], counter),
-			} as Partial<typeof props>);
-		}
-
-		if (PALETTE_TARGETS.has(child.type)) {
-			if (props.fill === undefined && props.stroke === undefined) {
-				const colour = nextColour(counter);
-				// Pie/Radar/Area also benefit from a matching stroke; the
-				// component decides which one applies (Bar reads fill, Line
-				// reads stroke, etc.).
-				return React.cloneElement(child, {
-					fill: colour,
-					stroke: colour,
-				} as Partial<typeof props>);
-			}
-			return child;
-		}
-
-		// Recurse into children of layout / chart-type / fragment elements so
-		// data primitives nested inside (e.g. <BarChart><Bar/></BarChart>)
-		// still get assigned a palette colour.
-		if (props.children !== undefined) {
-			return React.cloneElement(
-				child,
-				{} as Partial<typeof props>,
-				applyPalette(props.children, counter),
-			);
-		}
-		return child;
-	});
-}
-
-export type ChartConfig = {
-	[k in string]: {
-		label?: React.ReactNode;
-		icon?: React.ComponentType;
-	} & (
-		| { color?: string; theme?: never }
-		| { color?: never; theme: Record<keyof typeof THEMES, string> }
-	);
-};
-
-interface ChartContextProps {
-	config: ChartConfig;
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-export function useChart() {
-	const context = React.useContext(ChartContext);
-
-	if (!context) {
-		throw new Error("useChart must be used within a <ChartContainer />");
-	}
-
-	return context;
-}
-
-const ChartContainer = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> & {
-		config: ChartConfig;
-		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
-	}
->(({ id, className, children, config, ...props }, ref) => {
-	const uniqueId = React.useId();
-	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-
-	const themedChildren = React.useMemo(
-		() => applyPalette(children, { i: 0 }) as typeof children,
-		[children],
-	);
-
-	return (
-		<ChartContext.Provider value={{ config }}>
-			<div
-				data-chart={chartId}
-				ref={ref}
-				className={cn(
-					"flex aspect-video w-full justify-center text-xs [&_.recharts-cartesian-axis-line]:stroke-border [&_.recharts-cartesian-axis-tick-line]:stroke-transparent [&_.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-none [&_.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[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-					className,
-				)}
-				{...props}
-			>
-				<ChartStyle id={chartId} config={config} />
-				<RechartsPrimitive.ResponsiveContainer>
-					{themedChildren}
-				</RechartsPrimitive.ResponsiveContainer>
-			</div>
-		</ChartContext.Provider>
-	);
-});
-ChartContainer.displayName = "Chart";
-
-export const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
-
-	if (!colorConfig.length) {
-		return null;
-	}
-
-	return (
-		<style
-			dangerouslySetInnerHTML={{
-				__html: Object.entries(THEMES)
-					.map(
-						([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	})
-	.join("\n")}
-}
-`,
-					)
-					.join("\n"),
-			}}
-		/>
-	);
-};
-
-/**
- * Look up the canvas config entry that matches a Recharts payload item.
- * Used by tooltip and legend components to resolve labels / icons / colours
- * from the ChartConfig prop.
- */
-export function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-	/* c8 ignore next 3 -- defensive guard: payload is always a recharts item object at call sites */
-	if (typeof payload !== "object" || payload === null) {
-		return undefined;
-	}
-
-	const payloadPayload =
-		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
-			? payload.payload
-			: undefined;
-
-	let configLabelKey: string = key;
-
-	/* c8 ignore next 3 -- defensive name-key lookup: real recharts payloads don't carry this shape */
-	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
-		configLabelKey = payload[key as keyof typeof payload] as string;
-	} else if (
-		/* c8 ignore next 3 -- defensive nested-name lookup: only reachable with custom dataset shape */
-		payloadPayload &&
-		key in payloadPayload &&
-		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-	) {
-		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
-	}
-
-	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
-}
-
-export { ChartContainer };

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

@@ -1,67 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as RechartsPrimitive from "recharts";
-
-import { cn } from "../../lib/utils";
-import { getPayloadConfigFromPayload, useChart } from "./chart-container";
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> &
-		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-			hideIcon?: boolean;
-			nameKey?: string;
-		}
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
-	const { config } = useChart();
-
-	if (!payload?.length) {
-		return null;
-	}
-
-	return (
-		<div
-			ref={ref}
-			className={cn(
-				"flex items-center justify-center gap-4",
-				verticalAlign === "top" ? "pb-3" : "pt-3",
-				className,
-			)}
-		>
-			{payload
-				.filter((item) => item.type !== "none")
-				.map((item) => {
-					/* c8 ignore next -- prefers nameKey when provided; remaining fallbacks are recharts-internal edge cases */
-					const key = `${nameKey || item.dataKey || "value"}`;
-					const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-					return (
-						<div
-							key={item.value}
-							className={cn(
-								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-							)}
-						>
-							{itemConfig?.icon && !hideIcon ? (
-								<itemConfig.icon />
-							) : (
-								<div
-									className="h-2 w-2 shrink-0 rounded-[2px]"
-									style={{
-										backgroundColor: item.color,
-									}}
-								/>
-							)}
-							{itemConfig?.label}
-						</div>
-					);
-				})}
-		</div>
-	);
-});
-ChartLegendContent.displayName = "ChartLegend";
-
-export { ChartLegend, ChartLegendContent };