@olympusoss/canvas 2.6.19

package/src/components/organisms/sonner.tsx

@@ -0,0 +1,96 @@
+"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

@@ -0,0 +1,132 @@
+"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}
+			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

@@ -0,0 +1,101 @@
+"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

@@ -0,0 +1,19 @@
+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;
+}