@olympusoss/canvas 2.20.2 → 3.1.0

package/src/components/atoms/separator.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SeparatorProps
-	extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
-	/**
-	 * Layout direction. `horizontal` is a 1px row spanning width;
-	 * `vertical` is a 1px column spanning height.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * When true (default), the separator is hidden from screen readers. Set
-	 * to false for separators that have semantic meaning.
-	 * @default true
-	 */
-	decorative?: boolean;
-	asChild?: boolean;
-	className?: string;
-}
-
-/** Thin divider line — horizontal (default) or vertical. */
-const Separator = React.forwardRef<
-	React.ElementRef<typeof SeparatorPrimitive.Root>,
-	SeparatorProps
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-	<SeparatorPrimitive.Root
-		ref={ref}
-		decorative={decorative}
-		orientation={orientation}
-		className={cn(
-			"shrink-0 bg-border",
-			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-			className,
-		)}
-		{...props}
-	/>
-));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };

package/src/components/atoms/skeleton.tsx

@@ -1,17 +0,0 @@
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-	className?: string;
-}
-
-/**
- * Animated placeholder for content that's loading. Set width/height via
- * className; Skeleton fills with a pulsing tinted block.
- */
-function Skeleton({ className, ...props }: SkeletonProps) {
-	return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
-}
-
-export { Skeleton };

package/src/components/atoms/slider.tsx

@@ -1,93 +0,0 @@
-"use client";
-
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
-	/**
-	 * Controlled value. Pass an array — single-thumb sliders use a length-1
-	 * tuple (`[40]`), range sliders use length-2 (`[20, 80]`). Pair with
-	 * `onValueChange`.
-	 */
-	value?: number[];
-	/**
-	 * Initial value for uncontrolled usage. Same array shape as `value`.
-	 * @default [0]
-	 */
-	defaultValue?: number[];
-	/** Fires on every move. Use this for live previews. */
-	onValueChange?: (value: number[]) => void;
-	/** Fires when the user releases the thumb (commit handler). */
-	onValueCommit?: (value: number[]) => void;
-	/**
-	 * Minimum value the slider can reach.
-	 * @default 0
-	 */
-	min?: number;
-	/**
-	 * Maximum value the slider can reach.
-	 * @default 100
-	 */
-	max?: number;
-	/**
-	 * Quantum the slider snaps to. Set to `1` for integer-only values.
-	 * @default 1
-	 */
-	step?: number;
-	/**
-	 * Minimum gap between two thumbs in a range slider. Ignored for
-	 * single-thumb sliders.
-	 * @default 0
-	 */
-	minStepsBetweenThumbs?: number;
-	/**
-	 * Layout direction.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Reading direction. Affects which end is "min" on the visual axis.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * Whether the slider is inverted — flips which end is "min".
-	 * @default false
-	 */
-	inverted?: boolean;
-	/**
-	 * Disable the slider.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/** Form field name. Required when relying on uncontrolled native form submission. */
-	name?: string;
-	/**
-	 * Render as a Radix Slot — forwards props onto the immediate child
-	 * element instead of rendering a wrapper `<span>`.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tailwind / CSS classes merged onto the slider via `cn()`. */
-	className?: string;
-}
-
-const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
-	({ className, ...props }, ref) => (
-		<SliderPrimitive.Root
-			ref={ref}
-			className={cn("relative flex w-full touch-none select-none items-center", className)}
-			{...props}
-		>
-			<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-				<SliderPrimitive.Range className="absolute h-full bg-primary" />
-			</SliderPrimitive.Track>
-			<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-		</SliderPrimitive.Root>
-	),
-);
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

package/src/components/atoms/spinner.tsx

@@ -1,47 +0,0 @@
-"use client";
-
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
-	/**
-	 * Pixel size of the rendered SVG.
-	 * @default 16
-	 */
-	size?: number;
-	/** Tailwind / CSS classes merged via `cn()`. */
-	className?: string;
-	/**
-	 * Accessible label announced by screen readers. Defaults to `"Loading"`.
-	 * Pass an empty string to mark as purely decorative when the surrounding
-	 * label already announces the loading state.
-	 */
-	label?: string;
-}
-
-/**
- * Inline loading indicator. Wraps `Loader2` from lucide-react with the
- * canvas `animate-spin` keyframe and an accessible label.
- *
- * Use inside buttons (`{loading ? <Spinner/> : 'Submit'}`), next to inline
- * labels, or anywhere a small spinning indicator is appropriate. For a
- * full-section loader with a message, use `LoadingState` (molecule).
- */
-const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
-	({ size = 16, className, label = "Loading", ...props }, ref) => (
-		<Loader2
-			ref={ref}
-			size={size}
-			className={cn("animate-spin shrink-0", className)}
-			role={label ? "status" : undefined}
-			aria-label={label || undefined}
-			aria-hidden={label ? undefined : true}
-			{...props}
-		/>
-	),
-);
-Spinner.displayName = "Spinner";
-
-export { Spinner };

package/src/components/atoms/switch.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
-	/** Controlled state. */
-	checked?: boolean;
-	/**
-	 * Initial state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultChecked?: boolean;
-	/** Fires when the user flips the switch. */
-	onCheckedChange?: (checked: boolean) => void;
-	/**
-	 * Dims and blocks input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Block native form submit unless the switch is on.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name for native form submission. */
-	name?: string;
-	/** Form field value when submitted. */
-	value?: string;
-	asChild?: boolean;
-	className?: string;
-}
-
-/**
- * Wraps Radix's `Switch.Root` — a binary on/off toggle. Pair with `<Label>`
- * for accessibility.
- */
-const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
-	({ className, ...props }, ref) => (
-		<SwitchPrimitives.Root
-			className={cn(
-				"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-				className,
-			)}
-			{...props}
-			ref={ref}
-		>
-			<SwitchPrimitives.Thumb
-				className={cn(
-					"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-				)}
-			/>
-		</SwitchPrimitives.Root>
-	),
-);
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/components/atoms/textarea.tsx

@@ -1,78 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TextareaProps extends React.ComponentProps<"textarea"> {
-	/** Controlled value. Pair with `onChange`. */
-	value?: string | number | readonly string[];
-	/** Uncontrolled initial value. */
-	defaultValue?: string | number | readonly string[];
-	/** Hint text shown when empty. */
-	placeholder?: string;
-	/**
-	 * Visible row count. Canvas's default min-height is 60px regardless;
-	 * `rows` overrides.
-	 */
-	rows?: number;
-	/** Visible column count (width). Canvas overrides this with `w-full`. */
-	cols?: number;
-	/**
-	 * Dim and block input.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Selectable but not editable.
-	 * @default false
-	 */
-	readOnly?: boolean;
-	/**
-	 * Block native form submit unless the textarea has a value.
-	 * @default false
-	 */
-	required?: boolean;
-	/** Form field name for native form submission. */
-	name?: string;
-	/** DOM id for `<Label htmlFor>` association. */
-	id?: string;
-	/** Browser autofill hint. */
-	autoComplete?: string;
-	/**
-	 * Focus on mount.
-	 * @default false
-	 */
-	autoFocus?: boolean;
-	/** Character count upper limit. */
-	maxLength?: number;
-	/** Character count lower limit. */
-	minLength?: number;
-	/** Fires on every keystroke. */
-	onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
-	/** Fires on focus. */
-	onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-	/** Fires on blur. */
-	onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
-	className?: string;
-}
-
-/**
- * Styled wrapper around the native `<textarea>`. 60px min-height, rounded-md,
- * 1px border, transparent background.
- */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-	({ className, ...props }, ref) => {
-		return (
-			<textarea
-				className={cn(
-					"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };

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";