@olympusoss/canvas 2.6.19

package/package.json

@@ -0,0 +1,179 @@
+{
+	"name": "@olympusoss/canvas",
+	"version": "2.6.19",
+	"type": "module",
+	"main": "./src/index.ts",
+	"types": "./src/index.ts",
+	"exports": {
+		".": {
+			"react-native": "./src/native.ts",
+			"types": "./src/index.ts",
+			"default": "./src/index.ts"
+		},
+		"./tokens": {
+			"types": "./src/tokens/index.ts",
+			"default": "./src/tokens/index.ts"
+		},
+		"./styles/*": "./styles/*"
+	},
+	"files": [
+		"src",
+		"styles",
+		"package.json",
+		"tsconfig.json",
+		"tailwind.config.ts"
+	],
+	"sideEffects": [
+		"*.css",
+		"**/sonner.tsx",
+		"**/theme-provider.tsx"
+	],
+	"scripts": {
+		"typecheck": "tsc --noEmit",
+		"lint": "biome check",
+		"lint:fix": "biome check --write",
+		"format": "biome format --write .",
+		"ci": "biome ci && tsc --noEmit && vitest run",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:ui": "vitest --ui",
+		"test:coverage": "vitest run --coverage",
+		"snapshot-coverage": "node scripts/check-snapshot-coverage.mjs",
+		"size": "size-limit",
+		"size:why": "size-limit --why",
+		"changeset": "changeset",
+		"version-packages": "changeset version",
+		"release": "changeset publish",
+		"prepare": "husky"
+	},
+	"lint-staged": {
+		"*.{ts,tsx,js,jsx,mjs,cjs,json,jsonc,md,css}": "biome check --write --no-errors-on-unmatched"
+	},
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org",
+		"access": "public"
+	},
+	"peerDependencies": {
+		"react": ">=18.0.0",
+		"react-dom": ">=18.0.0",
+		"@rjsf/core": "^6.0.0",
+		"@rjsf/utils": "^6.0.0",
+		"@rjsf/validator-ajv8": "^6.0.0",
+		"libphonenumber-js": "^1.12.0"
+	},
+	"peerDependenciesMeta": {
+		"@rjsf/core": {
+			"optional": true
+		},
+		"@rjsf/utils": {
+			"optional": true
+		},
+		"@rjsf/validator-ajv8": {
+			"optional": true
+		},
+		"libphonenumber-js": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"@codemirror/commands": "^6.7.0",
+		"@codemirror/lang-css": "^6.3.0",
+		"@codemirror/lang-html": "^6.4.9",
+		"@codemirror/lang-javascript": "^6.2.2",
+		"@codemirror/lang-json": "^6.0.1",
+		"@codemirror/lang-markdown": "^6.3.0",
+		"@codemirror/language": "^6.10.3",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.34.1",
+		"@hookform/resolvers": "^5.2.2",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
+		"@radix-ui/react-aspect-ratio": "^1.1.8",
+		"@radix-ui/react-avatar": "^1.1.11",
+		"@radix-ui/react-checkbox": "^1.3.3",
+		"@radix-ui/react-collapsible": "^1.1.12",
+		"@radix-ui/react-context-menu": "^2.2.16",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@radix-ui/react-hover-card": "^1.1.15",
+		"@radix-ui/react-label": "^2.1.8",
+		"@radix-ui/react-menubar": "^1.1.16",
+		"@radix-ui/react-navigation-menu": "^1.2.14",
+		"@radix-ui/react-popover": "^1.1.15",
+		"@radix-ui/react-progress": "^1.1.8",
+		"@radix-ui/react-radio-group": "^1.3.8",
+		"@radix-ui/react-scroll-area": "^1.2.10",
+		"@radix-ui/react-select": "^2.2.6",
+		"@radix-ui/react-separator": "^1.1.8",
+		"@radix-ui/react-slider": "^1.3.6",
+		"@radix-ui/react-slot": "^1.2.4",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tabs": "^1.1.13",
+		"@radix-ui/react-toggle": "^1.1.10",
+		"@radix-ui/react-toggle-group": "^1.1.11",
+		"@radix-ui/react-tooltip": "^1.2.8",
+		"@tanstack/react-table": "^8.21.3",
+		"@tiptap/core": "^2.10.0",
+		"@tiptap/extension-link": "^2.10.0",
+		"@tiptap/extension-placeholder": "^2.10.0",
+		"@tiptap/react": "^2.10.0",
+		"@tiptap/starter-kit": "^2.10.0",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"cmdk": "^1.1.1",
+		"codemirror": "^6.0.1",
+		"d3-geo": "^3.1.1",
+		"date-fns": "^4.1.0",
+		"dompurify": "^3.2.0",
+		"embla-carousel-react": "^8.6.0",
+		"input-otp": "^1.4.2",
+		"leaflet": "^1.9.4",
+		"lucide-react": "^1.8.0",
+		"marked": "^15.0.0",
+		"next-themes": "^0.4.6",
+		"react-day-picker": "^9.14.0",
+		"react-grid-layout": "1.5.3",
+		"react-hook-form": "^7.72.1",
+		"react-leaflet": "^5.0.0",
+		"react-resizable-panels": "^4.10.0",
+		"react-simple-maps": "^3.0.0",
+		"recharts": "2.15.4",
+		"sonner": "^2.0.7",
+		"tailwind-merge": "^3.0.2",
+		"vaul": "^1.1.2",
+		"zod": "^4.3.6"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.4.10",
+		"@changesets/cli": "^2.31.0",
+		"@rjsf/core": "^6.4.1",
+		"@rjsf/utils": "^6.4.1",
+		"@rjsf/validator-ajv8": "^6.3.1",
+		"@size-limit/esbuild": "^12.1.0",
+		"@size-limit/file": "^12.1.0",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@types/d3-geo": "^3.1.0",
+		"@types/dompurify": "^3.0.5",
+		"@types/leaflet": "^1.9.0",
+		"@types/react": "^19.1.0",
+		"@types/react-dom": "^19.1.0",
+		"@types/react-grid-layout": "1.3.6",
+		"@types/react-simple-maps": "^3.0.6",
+		"@vitejs/plugin-react": "^6.0.1",
+		"@vitest/coverage-v8": "^4.1.4",
+		"@vitest/ui": "^4.1.4",
+		"husky": "^9.1.7",
+		"jsdom": "^29.0.2",
+		"libphonenumber-js": "^1.12.0",
+		"lint-staged": "^16.4.0",
+		"react": "^19.1.0",
+		"react-docgen-typescript": "^2.4.0",
+		"react-dom": "^19.1.0",
+		"size-limit": "^12.1.0",
+		"tailwindcss": "^4.1.4",
+		"typescript": "^5.8.3",
+		"vitest": "^4.1.4",
+		"vitest-axe": "^0.1.0"
+	}
+}

package/src/components/atoms/README.md

@@ -0,0 +1,11 @@
+# Atoms
+
+Single primitive wrappers. Zero composition.
+
+**Can import**: `tokens/`, `lib/utils`, React. **That's it.**
+
+**Cannot import**: anything from `molecules/`, `organisms/`, or `templates/`.
+
+If an atom wants to compose another atom, it's probably a molecule — promote it.
+
+See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for the full atomic-design rules.

package/src/components/atoms/aspect-ratio.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import type * as React from "react";
+
+export interface AspectRatioProps
+	extends React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root> {
+	/**
+	 * Aspect ratio expressed as a number (e.g. `16/9`, `4/3`, `1`). The
+	 * child element is sized to fit this ratio while preserving the
+	 * container's width.
+	 */
+	ratio?: number;
+	/**
+	 * Render as a Radix Slot — useful when wrapping a custom container that
+	 * already has its own DOM element.
+	 * @default false
+	 */
+	asChild?: boolean;
+	children?: React.ReactNode;
+	className?: string;
+}
+
+/**
+ * Re-export of Radix's `AspectRatio.Root`. Pass `ratio` (number, e.g.
+ * `16/9`) to lock a child's aspect ratio.
+ */
+const AspectRatio = AspectRatioPrimitive.Root as React.ForwardRefExoticComponent<
+	AspectRatioProps & React.RefAttributes<HTMLDivElement>
+>;
+
+export { AspectRatio };

package/src/components/atoms/avatar.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+	/**
+	 * Render as a Radix Slot — wrap a custom element while keeping the
+	 * Avatar's image-loading behaviour.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Avatar content — typically `<AvatarImage>` + `<AvatarFallback>`. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+/**
+ * Round profile-image container. Composes `Avatar` + `AvatarImage` +
+ * `AvatarFallback`. Defaults to `h-10 w-10`.
+ */
+const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(
+	({ className, ...props }, ref) => (
+		<AvatarPrimitive.Root
+			ref={ref}
+			className={cn(
+				"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full bg-white",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+export interface AvatarImageProps
+	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {
+	/** Image URL. Hides itself if loading errors so the fallback can render. */
+	src?: string;
+	/** Accessible label. Defaults to the empty string for decorative use. */
+	alt?: string;
+	/** Radix lifecycle hook for tracking the load state. */
+	onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
+	asChild?: boolean;
+	className?: string;
+}
+
+/**
+ * The `<img>` slot inside `<Avatar>`. Hides itself if loading errors so the
+ * fallback can render.
+ */
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	AvatarImageProps
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+export interface AvatarFallbackProps
+	extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+	/**
+	 * Wait this many ms before showing the fallback (avoids flash on fast
+	 * image loads).
+	 */
+	delayMs?: number;
+	asChild?: boolean;
+	/** Initials, icon, or silhouette. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+/**
+ * Rendered when the image is missing or still loading — typically initials,
+ * an icon, or a silhouette.
+ */
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	AvatarFallbackProps
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-white",
+			className,
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/src/components/atoms/badge.tsx

@@ -0,0 +1,44 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {
+	/**
+	 * Visual style. `default` is filled brand colour, `secondary` is a muted
+	 * neutral, `outline` is bordered with no fill, `destructive` flags an
+	 * error or warning state.
+	 * @default "default"
+	 */
+	variant?: "default" | "secondary" | "destructive" | "outline";
+	/** Badge label or any nested elements. */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/src/components/atoms/brand-mark.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface BrandMarkProps extends React.SVGAttributes<SVGSVGElement> {
+	/**
+	 * SVG path data (`d` attribute) for the brand mark. Required — canvas
+	 * does not ship a default brand shape; consuming apps supply their own.
+	 */
+	path: string;
+	/**
+	 * SVG `viewBox` matching the path's coordinate space.
+	 * @default "0 0 24 24"
+	 */
+	viewBox?: string;
+	/**
+	 * Optional inner `transform` applied to the path's `<g>` group — useful
+	 * when the path coordinates need to be translated, rotated, or scaled
+	 * relative to the viewBox.
+	 */
+	transform?: string;
+	/**
+	 * Gradient start colour. When omitted, the path is filled with
+	 * `currentColor` and no gradient is generated.
+	 */
+	from?: string;
+	/**
+	 * Gradient end colour. Required when `from` is set.
+	 */
+	to?: string;
+}
+
+/**
+ * Generic brand-mark primitive. Renders a single SVG `path` either with
+ * `currentColor` (the default) or with a two-stop linear gradient when both
+ * `from` and `to` are provided. Sizing is controlled via `className`
+ * (`h-10 w-auto`); the SVG honours its `viewBox` aspect ratio.
+ *
+ * Apps consuming canvas typically build a thin wrapper around this component
+ * that hard-codes their own brand path / gradient — see the docs site's
+ * `OlympusLogo` for a worked example.
+ */
+const BrandMark = React.forwardRef<SVGSVGElement, BrandMarkProps>(
+	({ path, viewBox = "0 0 24 24", transform, from, to, className, ...props }, ref) => {
+		const gradientId = React.useId();
+		const useGradient = from !== undefined && to !== undefined;
+		const fill = useGradient ? `url(#${gradientId})` : "currentColor";
+		const pathEl = <path d={path} fill={fill} fillRule="evenodd" />;
+		return (
+			<svg
+				ref={ref}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox={viewBox}
+				className={cn("shrink-0", className)}
+				{...props}
+			>
+				{useGradient && (
+					<defs>
+						<linearGradient id={gradientId} x1="1" y1="1" x2="0" y2="0">
+							<stop offset="0%" stopColor={from} />
+							<stop offset="100%" stopColor={to} />
+						</linearGradient>
+					</defs>
+				)}
+				{transform ? <g transform={transform}>{pathEl}</g> : pathEl}
+			</svg>
+		);
+	},
+);
+BrandMark.displayName = "BrandMark";
+
+export { BrandMark };

package/src/components/atoms/button.tsx

@@ -0,0 +1,104 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	/**
+	 * Visual emphasis preset. `default` is the primary action, `destructive`
+	 * is for irreversible actions, `outline` and `secondary` are quieter,
+	 * `ghost` is borderless, `link` looks like body-text underlined.
+	 * @default "default"
+	 */
+	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+	/**
+	 * Height + horizontal padding preset. `sm` is 32px, `default` is 36px,
+	 * `lg` is 40px, `icon` is square 36×36 for icon-only buttons (always
+	 * pair with `aria-label`).
+	 * @default "default"
+	 */
+	size?: "default" | "sm" | "lg" | "icon";
+	/**
+	 * Render as a Radix Slot — forwards className and behaviour onto the
+	 * immediate child element instead of rendering a wrapper `<button>`.
+	 * Common pattern for using a router `<Link>` while keeping the Button
+	 * styling.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Visible label or any nested elements (icons, badges). */
+	children?: React.ReactNode;
+	/** Tailwind / CSS classes merged onto the root element via `cn()`. */
+	className?: string;
+	/**
+	 * When true, dims the button to 50% opacity and blocks pointer/keyboard
+	 * input.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Native HTML button type. `submit` triggers parent form submission;
+	 * `reset` resets parent form fields; `button` does neither.
+	 * @default "button"
+	 */
+	type?: "button" | "submit" | "reset";
+	/** Click handler. Receives a `MouseEvent<HTMLButtonElement>`. */
+	onClick?: React.MouseEventHandler<HTMLButtonElement>;
+	/** Form name when this button submits/resets a form (for forms with multiple buttons). */
+	name?: string;
+	/** Form value sent with the form when this button is the submitter. */
+	value?: string | number | readonly string[];
+	/**
+	 * ID of the form this button belongs to, when the button sits outside
+	 * the `<form>` element.
+	 */
+	form?: string;
+	/** Tab order. Default behaviour is one of native `<button>` tab focus. */
+	tabIndex?: number;
+	/** Accessible label, required for icon-only buttons (`size="icon"`). */
+	"aria-label"?: string;
+	/** ID of an element that describes the button's purpose. */
+	"aria-describedby"?: string;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/atoms/checkbox.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface CheckboxProps
+	extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+	/**
+	 * Controlled checked state. Pass `'indeterminate'` to render the dash
+	 * glyph instead of the check.
+	 */
+	checked?: boolean | "indeterminate";
+	/**
+	 * Initial state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultChecked?: boolean | "indeterminate";
+	/** Fires when the user toggles the checkbox. Use this instead of `onChange`. */
+	onCheckedChange?: (checked: boolean | "indeterminate") => void;
+	/**
+	 * Dims to 50% and blocks input.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Block native form submit unless the box is checked.
+	 * @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 `Checkbox.Root`. The check glyph is rendered inside
+ * automatically.
+ */
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+	({ className, ...props }, ref) => (
+		<CheckboxPrimitive.Root
+			ref={ref}
+			className={cn(
+				"grid place-content-center peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+				className,
+			)}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator className={cn("grid place-content-center text-current")}>
+				<Check className="h-4 w-4" />
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	),
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };