@olympusoss/canvas 2.20.1 → 3.1.0

package/src/components/organisms/sonner.tsx

@@ -1,96 +0,0 @@
-"use client";
-
-import { useTheme } from "next-themes";
-import { Toaster as Sonner, toast } from "sonner";
-
-type ToasterPropsBase = React.ComponentProps<typeof Sonner>;
-
-export interface ToasterProps extends ToasterPropsBase {
-	/**
-	 * Where toasts stack.
-	 * @default "bottom-right"
-	 */
-	position?:
-		| "top-left"
-		| "top-center"
-		| "top-right"
-		| "bottom-left"
-		| "bottom-center"
-		| "bottom-right";
-	/**
-	 * Toast colour scheme. Defaults to inheriting from `next-themes`.
-	 * @default "system"
-	 */
-	theme?: "light" | "dark" | "system";
-	/**
-	 * Make toasts rich-coloured by default — success/error/warning tints.
-	 * @default false
-	 */
-	richColors?: boolean;
-	/**
-	 * Show a close button on every toast.
-	 * @default false
-	 */
-	closeButton?: boolean;
-	/**
-	 * How long toasts stay visible (ms).
-	 * @default 4000
-	 */
-	duration?: number;
-	/**
-	 * Visual gap between stacked toasts (px).
-	 * @default 14
-	 */
-	gap?: number;
-	/**
-	 * Maximum number of toasts visible at once.
-	 * @default 3
-	 */
-	visibleToasts?: number;
-	/**
-	 * Hide the toaster's offset region — useful when you want toasts to
-	 * butt against the viewport edge.
-	 * @default 32
-	 */
-	offset?: string | number;
-	/**
-	 * Pause toast timers when the user hovers any toast.
-	 * @default true
-	 */
-	pauseWhenPageIsHidden?: boolean;
-	/**
-	 * Reading direction.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl" | "auto";
-	/** Tailwind / CSS classes merged onto the toaster region. */
-	className?: string;
-	/**
-	 * Default toast options applied to every toast (className,
-	 * descriptionClassName, etc.). See sonner docs for the full list.
-	 */
-	toastOptions?: ToasterPropsBase["toastOptions"];
-}
-
-const Toaster = ({ ...props }: ToasterProps) => {
-	const { theme = "system" } = useTheme();
-
-	return (
-		<Sonner
-			theme={theme as ToasterProps["theme"]}
-			className="toaster group"
-			toastOptions={{
-				classNames: {
-					toast:
-						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-					description: "group-[.toast]:text-muted-foreground",
-					actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-				},
-			}}
-			{...props}
-		/>
-	);
-};
-
-export { Toaster, toast };

package/src/components/organisms/tabs.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface TabsProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
-	/** Controlled active tab value. Pair with `onValueChange`. */
-	value?: string;
-	/** Initial active tab for uncontrolled usage. */
-	defaultValue?: string;
-	/** Fires when the user switches tabs. */
-	onValueChange?: (value: string) => void;
-	/**
-	 * Tab orientation. Affects keyboard arrow navigation.
-	 * @default "horizontal"
-	 */
-	orientation?: "horizontal" | "vertical";
-	/**
-	 * Reading direction.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/**
-	 * When and how content is activated.
-	 * - `automatic` activates on focus (best for tabs that load fast)
-	 * - `manual` requires Enter/Space (best for tabs that fetch data)
-	 * @default "automatic"
-	 */
-	activationMode?: "automatic" | "manual";
-	/** TabsList + TabsContent siblings. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const Tabs = TabsPrimitive.Root as React.FC<TabsProps>;
-
-export interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
-	/** When true, hold-to-skip-disabled-tabs is on. */
-	loop?: boolean;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** A flat list of `<TabsTrigger>`s. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, TabsListProps>(
-	({ className, ...props }, ref) => (
-		<TabsPrimitive.List
-			ref={ref}
-			data-slot="tabs-list"
-			className={cn(
-				"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-export interface TabsTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> {
-	/** Required — value of the tab this trigger activates. Match with `<TabsContent value>`. */
-	value: string;
-	/** Disable this tab. */
-	disabled?: boolean;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tab label. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const TabsTrigger = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Trigger>,
-	TabsTriggerProps
->(({ className, ...props }, ref) => (
-	<TabsPrimitive.Trigger
-		ref={ref}
-		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-			className,
-		)}
-		{...props}
-	/>
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-export interface TabsContentProps
-	extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
-	/** Required — matches the `value` of a `<TabsTrigger>`. */
-	value: string;
-	/**
-	 * Force the content to mount even when not active. Useful for
-	 * preserving form state across tab switches.
-	 * @default false
-	 */
-	forceMount?: true;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Tab pane body. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const TabsContent = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Content>,
-	TabsContentProps
->(({ className, ...props }, ref) => (
-	<TabsPrimitive.Content
-		ref={ref}
-		className={cn(
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-			className,
-		)}
-		{...props}
-	/>
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/organisms/theme-provider.tsx

@@ -1,101 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-export type Theme = "light" | "dark" | "system";
-export type ResolvedTheme = "light" | "dark";
-
-interface ThemeContextValue {
-	theme: Theme;
-	resolvedTheme: ResolvedTheme;
-	setTheme: (theme: Theme) => void;
-	toggleTheme: () => void;
-}
-
-const ThemeContext = React.createContext<ThemeContextValue | null>(null);
-
-export interface ThemeProviderProps {
-	defaultTheme?: Theme;
-	/** localStorage key. Default: `"olympus-theme"`. */
-	storageKey?: string;
-	/** Skip DOM/storage side effects (useful for SSR/tests). */
-	disableTransitionOnChange?: boolean;
-	children: React.ReactNode;
-}
-
-function systemTheme(): ResolvedTheme {
-	/* c8 ignore next -- SSR guard: window is always defined in jsdom tests */
-	if (typeof window === "undefined") return "light";
-	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-
-function resolve(theme: Theme): ResolvedTheme {
-	return theme === "system" ? systemTheme() : theme;
-}
-
-export function ThemeProvider({
-	defaultTheme = "system",
-	storageKey = "olympus-theme",
-	children,
-}: ThemeProviderProps) {
-	const [theme, setThemeState] = React.useState<Theme>(defaultTheme);
-	const [resolvedTheme, setResolvedTheme] = React.useState<ResolvedTheme>(() =>
-		resolve(defaultTheme),
-	);
-
-	// On mount: read storage and apply.
-	React.useEffect(() => {
-		/* c8 ignore next -- SSR guard: window is always defined in jsdom tests */
-		if (typeof window === "undefined") return;
-		const stored = window.localStorage.getItem(storageKey) as Theme | null;
-		const initial = stored ?? defaultTheme;
-		setThemeState(initial);
-		setResolvedTheme(resolve(initial));
-	}, [defaultTheme, storageKey]);
-
-	// Apply the resolved theme to <html> and persist.
-	React.useEffect(() => {
-		/* c8 ignore next -- SSR guard: document is always defined in jsdom tests */
-		if (typeof document === "undefined") return;
-		const root = document.documentElement;
-		if (resolvedTheme === "dark") root.classList.add("dark");
-		else root.classList.remove("dark");
-		/* c8 ignore next -- SSR guard: window is always defined in jsdom tests */
-		if (typeof window !== "undefined") {
-			window.localStorage.setItem(storageKey, theme);
-		}
-	}, [theme, resolvedTheme, storageKey]);
-
-	// Respond to system preference changes when theme === "system".
-	React.useEffect(() => {
-		if (theme !== "system" || typeof window === "undefined") return;
-		const mq = window.matchMedia("(prefers-color-scheme: dark)");
-		const listener = () => setResolvedTheme(mq.matches ? "dark" : "light");
-		mq.addEventListener("change", listener);
-		return () => mq.removeEventListener("change", listener);
-	}, [theme]);
-
-	const setTheme = React.useCallback((t: Theme) => {
-		setThemeState(t);
-		setResolvedTheme(resolve(t));
-	}, []);
-
-	const toggleTheme = React.useCallback(() => {
-		setTheme(resolvedTheme === "dark" ? "light" : "dark");
-	}, [resolvedTheme, setTheme]);
-
-	const value = React.useMemo<ThemeContextValue>(
-		() => ({ theme, resolvedTheme, setTheme, toggleTheme }),
-		[theme, resolvedTheme, setTheme, toggleTheme],
-	);
-
-	return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
-}
-
-export function useTheme(): ThemeContextValue {
-	const ctx = React.useContext(ThemeContext);
-	if (!ctx) throw new Error("useTheme must be used within a <ThemeProvider>");
-	return ctx;
-}
-
-ThemeProvider.displayName = "ThemeProvider";

package/src/hooks/use-mobile.tsx

@@ -1,19 +0,0 @@
-import * as React from "react";
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-	React.useEffect(() => {
-		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		};
-		mql.addEventListener("change", onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-		return () => mql.removeEventListener("change", onChange);
-	}, []);
-
-	return !!isMobile;
-}

package/src/lib/portal-container.tsx

@@ -1,35 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-/**
- * Where Radix-portalled UI (Select, DropdownMenu, Popover, Dialog, Tooltip,
- * etc.) should mount. Defaults to `undefined`, which lets each Radix Portal
- * fall back to its built-in default (`document.body`).
- *
- * Apps that render canvas inside iframes (e.g. the docs site's example
- * previews) override this with the iframe's body so the portalled content
- * stays in the same document as the trigger — without that, Radix's
- * outside-click detection treats the iframe boundary as "outside" and the
- * dropdown closes the moment it opens.
- */
-const PortalContainerContext = React.createContext<HTMLElement | null | undefined>(undefined);
-
-export interface PortalContainerProviderProps {
-	value: HTMLElement | null | undefined;
-	children: React.ReactNode;
-}
-
-export function PortalContainerProvider({ value, children }: PortalContainerProviderProps) {
-	return (
-		<PortalContainerContext.Provider value={value}>{children}</PortalContainerContext.Provider>
-	);
-}
-
-/**
- * Read the current portal container. Returns `undefined` if no provider is
- * mounted (Radix falls back to its default).
- */
-export function usePortalContainer(): HTMLElement | null | undefined {
-	return React.useContext(PortalContainerContext);
-}

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}

package/src/native.ts

@@ -1,23 +0,0 @@
-/**
- * React Native entry point.
- *
- * Currently exports only platform-agnostic tokens and types.
- * When an RN app is built, add .native.tsx component implementations
- * alongside the web components and export them here.
- */
-
-export type { ButtonProps } from "./components/atoms/button";
-// Types only (no DOM dependencies)
-export type { IconName, IconProps } from "./components/atoms/icon";
-export type { CodeBlockProps } from "./components/molecules/code-block";
-export type { EmptyStateProps } from "./components/molecules/empty-state";
-export type { ErrorStateProps } from "./components/molecules/error-state";
-export type { FieldDisplayProps } from "./components/molecules/field-display";
-export type { LoadingStateProps } from "./components/molecules/loading-state";
-export type { SearchBarProps } from "./components/molecules/search-bar";
-export type { StatusBadgeProps } from "./components/molecules/status-badge";
-export type { DataTableColumn, DataTableProps } from "./components/organisms/data-table";
-// Design tokens (shared with web)
-export { colors, hslToString, hslToVar } from "./tokens/colors";
-export { defaultRadius, radius, spacing } from "./tokens/spacing";
-export { fontFamily, fontSize, fontWeight } from "./tokens/typography";

package/src/tokens/colors.ts

@@ -1,91 +0,0 @@
-/**
- * shadcn/ui default color tokens — platform-agnostic.
- * Used by both web (via CSS custom properties) and React Native (via NativeWind/direct).
- *
- * Values are HSL arrays [h, s%, l%] matching the shadcn zinc/neutral theme.
- */
-
-export const colors = {
-	light: {
-		background: [0, 0, 100],
-		foreground: [240, 10, 3.9],
-		card: [0, 0, 100],
-		cardForeground: [240, 10, 3.9],
-		popover: [0, 0, 100],
-		popoverForeground: [240, 10, 3.9],
-		primary: [240, 5.9, 10],
-		primaryForeground: [0, 0, 98],
-		secondary: [240, 4.8, 95.9],
-		secondaryForeground: [240, 5.9, 10],
-		muted: [240, 4.8, 95.9],
-		mutedForeground: [240, 3.8, 46.1],
-		accent: [240, 4.8, 95.9],
-		accentForeground: [240, 5.9, 10],
-		destructive: [0, 84.2, 60.2],
-		destructiveForeground: [0, 0, 98],
-		border: [240, 5.9, 90],
-		input: [240, 5.9, 90],
-		ring: [240, 5.9, 10],
-		chart1: [12, 76, 61],
-		chart2: [173, 58, 39],
-		chart3: [197, 37, 24],
-		chart4: [43, 74, 66],
-		chart5: [27, 87, 67],
-		sidebar: {
-			background: [230, 25, 97],
-			foreground: [230, 15, 40],
-			primary: [230, 45, 25],
-			primaryForeground: [0, 0, 98],
-			accent: [230, 40, 92],
-			accentForeground: [230, 45, 25],
-			border: [230, 20, 90],
-			ring: [217.2, 91.2, 59.8],
-		},
-	},
-	dark: {
-		background: [240, 10, 3.9],
-		foreground: [0, 0, 98],
-		card: [240, 10, 3.9],
-		cardForeground: [0, 0, 98],
-		popover: [240, 10, 3.9],
-		popoverForeground: [0, 0, 98],
-		primary: [0, 0, 98],
-		primaryForeground: [240, 5.9, 10],
-		secondary: [240, 3.7, 15.9],
-		secondaryForeground: [0, 0, 98],
-		muted: [240, 3.7, 15.9],
-		mutedForeground: [240, 5, 64.9],
-		accent: [240, 3.7, 15.9],
-		accentForeground: [0, 0, 98],
-		destructive: [0, 62.8, 30.6],
-		destructiveForeground: [0, 0, 98],
-		border: [240, 3.7, 15.9],
-		input: [240, 3.7, 15.9],
-		ring: [240, 4.9, 83.9],
-		chart1: [220, 70, 50],
-		chart2: [160, 60, 45],
-		chart3: [30, 80, 55],
-		chart4: [280, 65, 60],
-		chart5: [340, 75, 55],
-		sidebar: {
-			background: [230, 12, 10],
-			foreground: [230, 8, 80],
-			primary: [217, 91, 65],
-			primaryForeground: [0, 0, 100],
-			accent: [230, 25, 22],
-			accentForeground: [230, 60, 88],
-			border: [230, 8, 18],
-			ring: [217.2, 91.2, 59.8],
-		},
-	},
-} as const;
-
-/** Convert an HSL tuple to a CSS-compatible string */
-export function hslToString(hsl: readonly [number, number, number]): string {
-	return `hsl(${hsl[0]} ${hsl[1]}% ${hsl[2]}%)`;
-}
-
-/** Convert an HSL tuple to the space-separated format used in CSS variables */
-export function hslToVar(hsl: readonly [number, number, number]): string {
-	return `${hsl[0]} ${hsl[1]}% ${hsl[2]}%`;
-}

package/src/tokens/index.ts

@@ -1,3 +0,0 @@
-export { colors, hslToString, hslToVar } from "./colors";
-export { defaultRadius, radius, spacing } from "./spacing";
-export { fontFamily, fontSize, fontWeight } from "./typography";

package/src/tokens/spacing.ts

@@ -1,55 +0,0 @@
-/**
- * Olympus spacing scale — platform-agnostic design tokens.
- * Values in pixels, convertible to rem (web) or dp (React Native).
- */
-
-export const spacing = {
-	0: 0,
-	0.5: 2,
-	1: 4,
-	1.5: 6,
-	2: 8,
-	2.5: 10,
-	3: 12,
-	3.5: 14,
-	4: 16,
-	5: 20,
-	6: 24,
-	7: 28,
-	8: 32,
-	9: 36,
-	10: 40,
-	11: 44,
-	12: 48,
-	14: 56,
-	16: 64,
-	20: 80,
-	24: 96,
-	28: 112,
-	32: 128,
-	36: 144,
-	40: 160,
-	44: 176,
-	48: 192,
-	52: 208,
-	56: 224,
-	60: 240,
-	64: 256,
-	72: 288,
-	80: 320,
-	96: 384,
-} as const;
-
-export const radius = {
-	none: 0,
-	sm: 4,
-	md: 6,
-	lg: 8,
-	xl: 12,
-	"2xl": 16,
-	"3xl": 24,
-	full: 9999,
-} as const;
-
-/** Default border radius used across components (0.5rem = 8px) */
-export const defaultRadius = "0.5rem";

package/src/tokens/typography.ts

@@ -1,27 +0,0 @@
-/**
- * Olympus typography tokens — platform-agnostic design tokens.
- * Font families, sizes, weights, and line heights.
- */
-
-export const fontFamily = {
-	sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
-	mono: ["JetBrains Mono", "Fira Code", "monospace"],
-} as const;
-
-export const fontSize = {
-	xs: { size: 12, lineHeight: 16 },
-	sm: { size: 14, lineHeight: 20 },
-	base: { size: 16, lineHeight: 24 },
-	lg: { size: 18, lineHeight: 28 },
-	xl: { size: 20, lineHeight: 28 },
-	"2xl": { size: 24, lineHeight: 32 },
-	"3xl": { size: 30, lineHeight: 36 },
-	"4xl": { size: 36, lineHeight: 40 },
-} as const;
-
-export const fontWeight = {
-	normal: 400,
-	medium: 500,
-	semibold: 600,
-	bold: 700,
-} as const;

package/styles/dashboard-grid.css

@@ -1,47 +0,0 @@
-/**
- * Re-export of react-grid-layout's base stylesheets.
- *
- * Consumers of `<DashboardGrid>` import this once at app entry:
- *
- *   import "@olympusoss/canvas/styles/dashboard-grid.css";
- *
- * The actual imports resolve through the consumer's bundler. Both
- * `react-grid-layout` and `react-resizable` are direct dependencies of
- * canvas; if either isn't installed (e.g. peer-only consumer) the @import
- * errors at build time, which is the right signal.
- *
- * On top of the lib's stock styles, the rules below recolour the placeholder
- * (drop-target hint) and resize handles to match canvas tokens — the lib
- * defaults are bright red / blue and don't fit the design system.
- */
-@import "react-grid-layout/css/styles.css";
-@import "react-resizable/css/styles.css";
-
-.react-grid-item.react-grid-placeholder {
-	background: hsl(var(--accent));
-	opacity: 0.45;
-	border-radius: 0.75rem;
-	transition-property: transform;
-}
-
-.react-grid-item > .react-resizable-handle {
-	opacity: 0;
-	transition: opacity 150ms ease;
-}
-
-.react-grid-item:hover > .react-resizable-handle,
-.react-grid-item.react-draggable-dragging > .react-resizable-handle {
-	opacity: 1;
-}
-
-/* Recolour the corner glyph the lib draws via ::after */
-.react-grid-item > .react-resizable-handle::after {
-	border-color: hsl(var(--muted-foreground));
-}
-
-/* When DashboardGrid is in view-mode (`editing=false`) we hide handles
- * entirely — the cursor never tells the user "you can resize this".
- */
-[data-dashboard-grid-editing="false"] .react-grid-item > .react-resizable-handle {
-	display: none;
-}