@olympusoss/canvas 2.6.19

package/src/index.ts

@@ -0,0 +1,547 @@
+// Utility
+
+/* ────────────────────────────────────────────────────────────────
+   ATOMS — single primitive wrappers, no composition.
+   Can import only: tokens/, lib/utils.
+   ──────────────────────────────────────────────────────────────── */
+export { AspectRatio } from "./components/atoms/aspect-ratio";
+export { Avatar, AvatarFallback, AvatarImage } from "./components/atoms/avatar";
+export { Badge, badgeVariants } from "./components/atoms/badge";
+export { BrandMark, type BrandMarkProps } from "./components/atoms/brand-mark";
+export { Button, type ButtonProps, buttonVariants } from "./components/atoms/button";
+export { Checkbox } from "./components/atoms/checkbox";
+export { FlexBox, type FlexBoxProps } from "./components/atoms/flex-box";
+export {
+	Icon,
+	type IconName,
+	type IconProps,
+	iconNames,
+} from "./components/atoms/icon";
+export { Input } from "./components/atoms/input";
+export { Label } from "./components/atoms/label";
+export { Logo, type LogoProps } from "./components/atoms/logo";
+export { Progress } from "./components/atoms/progress";
+export { RadioGroup, RadioGroupItem } from "./components/atoms/radio-group";
+export { ScrollArea, ScrollBar } from "./components/atoms/scroll-area";
+export { Section, type SectionProps } from "./components/atoms/section";
+export { Separator } from "./components/atoms/separator";
+export { Skeleton } from "./components/atoms/skeleton";
+export { Slider } from "./components/atoms/slider";
+export { Switch } from "./components/atoms/switch";
+export { Textarea } from "./components/atoms/textarea";
+export { Toggle, toggleVariants } from "./components/atoms/toggle";
+/* ────────────────────────────────────────────────────────────────
+   CHARTS — theme-aware Recharts wrappers + auto-palette container,
+   plus hand-rolled data-viz primitives (Gauge, StackedBar,
+   LabeledBarList, ServiceHealthList, ActivityHeatmap) built on
+   canvas tokens.
+   ──────────────────────────────────────────────────────────────── */
+export {
+	ActivityHeatmap,
+	type ActivityHeatmapProps,
+} from "./components/charts/activity-heatmap";
+export {
+	CartesianAxis,
+	PolarAngleAxis,
+	PolarRadiusAxis,
+	XAxis,
+	YAxis,
+	ZAxis,
+} from "./components/charts/axes";
+export {
+	type ChartConfig,
+	ChartContainer,
+	ChartStyle,
+	useChart,
+} from "./components/charts/chart-container";
+export { ChartLegend, ChartLegendContent } from "./components/charts/chart-legend";
+export { ChartTooltip, ChartTooltipContent } from "./components/charts/chart-tooltip";
+export {
+	AreaChart,
+	BarChart,
+	ComposedChart,
+	FunnelChart,
+	LineChart,
+	PieChart,
+	RadarChart,
+	RadialBarChart,
+	Sankey,
+	ScatterChart,
+	SunburstChart,
+	Treemap,
+} from "./components/charts/chart-types";
+export { Brush, Layer, ResponsiveContainer, Surface } from "./components/charts/containers";
+export {
+	Area,
+	Bar,
+	Funnel,
+	Line,
+	Pie,
+	Radar,
+	RadialBar,
+	Scatter,
+} from "./components/charts/data";
+export {
+	ChartCell,
+	ChartCustomized,
+	Cross,
+	Curve,
+	Dot,
+	ErrorBar,
+	Polygon,
+	Rectangle,
+	Sector,
+	Trapezoid,
+} from "./components/charts/details";
+export { Gauge, type GaugeProps } from "./components/charts/gauge";
+export { CartesianGrid, PolarGrid } from "./components/charts/grids";
+export {
+	LabeledBarList,
+	type LabeledBarListItem,
+	type LabeledBarListProps,
+} from "./components/charts/labeled-bar-list";
+export {
+	ReferenceArea,
+	ReferenceDot,
+	ReferenceLine,
+} from "./components/charts/references";
+export {
+	type ServiceHealthItem,
+	ServiceHealthList,
+	type ServiceHealthListProps,
+	type ServiceHealthStatus,
+} from "./components/charts/service-health-list";
+export {
+	Sparkline,
+	type SparklineProps,
+} from "./components/charts/sparkline";
+export {
+	StackedBar,
+	type StackedBarProps,
+	type StackedBarSegment,
+} from "./components/charts/stacked-bar";
+export { ChartLabel, LabelList, Text } from "./components/charts/text";
+export {
+	WorldHeatMap,
+	type WorldHeatMapPoint,
+	type WorldHeatMapProps,
+} from "./components/charts/world-heat-map";
+/* ────────────────────────────────────────────────────────────────
+   MOLECULES — small compositions of atoms.
+   Can import: tokens/, lib/utils, atoms/.
+   ──────────────────────────────────────────────────────────────── */
+export {
+	ActionBar,
+	type ActionBarAction,
+	type ActionBarProps,
+	type ActionBarSecondary,
+} from "./components/molecules/action-bar";
+export {
+	ActivityFeed,
+	type ActivityFeedProps,
+	ActivityItem,
+	type ActivityItemProps,
+} from "./components/molecules/activity-item";
+export { Alert, AlertDescription, AlertTitle } from "./components/molecules/alert";
+export {
+	AnimatedBackground,
+	type AnimatedBackgroundOrb,
+	type AnimatedBackgroundProps,
+} from "./components/molecules/animated-background";
+export {
+	BrandLockup,
+	type BrandLockupProps,
+} from "./components/molecules/brand-lockup";
+export {
+	Breadcrumb,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "./components/molecules/breadcrumb";
+export {
+	ButtonGroup,
+	ButtonGroupSeparator,
+	ButtonGroupText,
+	buttonGroupVariants,
+} from "./components/molecules/button-group";
+export { Calendar, CalendarDayButton } from "./components/molecules/calendar";
+export {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "./components/molecules/card";
+export { CodeBlock, type CodeBlockProps } from "./components/molecules/code-block";
+export { EmptyState, type EmptyStateProps } from "./components/molecules/empty-state";
+export { ErrorState, type ErrorStateProps } from "./components/molecules/error-state";
+export {
+	FieldDisplay,
+	type FieldDisplayProps,
+} from "./components/molecules/field-display";
+export {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSeparator,
+	InputOTPSlot,
+} from "./components/molecules/input-otp";
+export {
+	LoadingState,
+	type LoadingStateProps,
+} from "./components/molecules/loading-state";
+export {
+	NotificationItem,
+	type NotificationItemProps,
+} from "./components/molecules/notification-item";
+export {
+	NotificationList,
+	type NotificationListProps,
+} from "./components/molecules/notification-list";
+export {
+	NumberBadge,
+	type NumberBadgeProps,
+} from "./components/molecules/number-badge";
+export {
+	PageHeader,
+	type PageHeaderBreadcrumb,
+	type PageHeaderProps,
+} from "./components/molecules/page-header";
+export {
+	PageTabs,
+	type PageTabsItem,
+	type PageTabsProps,
+} from "./components/molecules/page-tabs";
+export {
+	Pagination,
+	PaginationContent,
+	PaginationEllipsis,
+	PaginationItem,
+	PaginationLink,
+	PaginationNext,
+	PaginationPrevious,
+} from "./components/molecules/pagination";
+export {
+	PhoneInput,
+	type PhoneInputProps,
+} from "./components/molecules/phone-input";
+export { SearchBar, type SearchBarProps } from "./components/molecules/search-bar";
+export {
+	SecretField,
+	type SecretFieldProps,
+	type SecretFieldStatus,
+} from "./components/molecules/secret-field";
+export {
+	SectionCard,
+	type SectionCardProps,
+} from "./components/molecules/section-card";
+export { StatCard, type StatCardProps } from "./components/molecules/stat-card";
+export {
+	StatusBadge,
+	type StatusBadgeProps,
+	statusBadgeVariants,
+} from "./components/molecules/status-badge";
+export {
+	Stepper,
+	type StepperProps,
+	type StepperStep,
+	type StepStatus,
+} from "./components/molecules/stepper";
+export {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "./components/molecules/table";
+export { ToggleGroup, ToggleGroupItem } from "./components/molecules/toggle-group";
+export {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "./components/molecules/tooltip";
+export {
+	UserAvatarChip,
+	type UserAvatarChipProps,
+} from "./components/molecules/user-avatar-chip";
+/* ────────────────────────────────────────────────────────────────
+   ORGANISMS — stateful surfaces, compositions of atoms + molecules.
+   Can import: tokens/, lib/utils, atoms/, molecules/.
+   ──────────────────────────────────────────────────────────────── */
+export {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "./components/organisms/accordion";
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "./components/organisms/alert-dialog";
+export {
+	Carousel,
+	type CarouselApi,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from "./components/organisms/carousel";
+export {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "./components/organisms/collapsible";
+export {
+	Command,
+	CommandDialog,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+	CommandSeparator,
+	CommandShortcut,
+} from "./components/organisms/command";
+export {
+	ContextMenu,
+	ContextMenuCheckboxItem,
+	ContextMenuContent,
+	ContextMenuGroup,
+	ContextMenuItem,
+	ContextMenuLabel,
+	ContextMenuPortal,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuTrigger,
+} from "./components/organisms/context-menu";
+export {
+	DashboardGrid,
+	type DashboardGridBreakpoint,
+	type DashboardGridProps,
+	type DashboardItem,
+} from "./components/organisms/dashboard-grid";
+export {
+	DataTable,
+	type DataTableColumn,
+	type DataTableProps,
+} from "./components/organisms/data-table";
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+} from "./components/organisms/dialog";
+export {
+	Drawer,
+	DrawerClose,
+	DrawerContent,
+	DrawerDescription,
+	DrawerFooter,
+	DrawerHeader,
+	DrawerOverlay,
+	DrawerPortal,
+	DrawerTitle,
+	DrawerTrigger,
+} from "./components/organisms/drawer";
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+} from "./components/organisms/dropdown-menu";
+export {
+	CodeEditor,
+	type CodeEditorLanguage,
+	type CodeEditorProps,
+	MarkdownEditor,
+	type MarkdownEditorProps,
+	RichTextEditor,
+	type RichTextEditorProps,
+	TOOLBAR_ITEM_IDS,
+	type ToolbarItemId,
+} from "./components/organisms/editors";
+export {
+	ErrorBoundary,
+	type ErrorBoundaryProps,
+} from "./components/organisms/error-boundary";
+export {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+	useFormField,
+} from "./components/organisms/form";
+export {
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "./components/organisms/hover-card";
+export {
+	Menubar,
+	MenubarCheckboxItem,
+	MenubarContent,
+	MenubarGroup,
+	MenubarItem,
+	MenubarLabel,
+	MenubarMenu,
+	MenubarPortal,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+} from "./components/organisms/menubar";
+export {
+	NavBar,
+	type NavBarProps,
+	type NavLink,
+} from "./components/organisms/navbar";
+export {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuIndicator,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+} from "./components/organisms/navigation-menu";
+export {
+	Popover,
+	PopoverAnchor,
+	PopoverContent,
+	PopoverTrigger,
+} from "./components/organisms/popover";
+export {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from "./components/organisms/resizable";
+export {
+	canvasSchemaFormTemplates,
+	canvasSchemaFormWidgets,
+	type IChangeEvent,
+	type RJSFSchema,
+	SchemaForm,
+	type SchemaFormProps,
+	type UiSchema,
+	type WidgetProps,
+} from "./components/organisms/schema-form";
+export {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+} from "./components/organisms/select";
+export {
+	Sheet,
+	SheetClose,
+	SheetContent,
+	SheetDescription,
+	SheetFooter,
+	SheetHeader,
+	SheetOverlay,
+	SheetPortal,
+	SheetTitle,
+	SheetTrigger,
+} from "./components/organisms/sheet";
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+} from "./components/organisms/sidebar";
+export { Toaster, toast } from "./components/organisms/sonner";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/organisms/tabs";
+export {
+	type ResolvedTheme,
+	type Theme,
+	ThemeProvider,
+	type ThemeProviderProps,
+	useTheme,
+} from "./components/organisms/theme-provider";
+// Hooks
+export { useIsMobile } from "./hooks/use-mobile";
+export {
+	PortalContainerProvider,
+	usePortalContainer,
+} from "./lib/portal-container";
+export { cn } from "./lib/utils";
+
+/* ────────────────────────────────────────────────────────────────
+   Design tokens (cross-platform)
+   ──────────────────────────────────────────────────────────────── */
+export { colors, hslToString, hslToVar } from "./tokens/colors";
+export { defaultRadius, radius, spacing } from "./tokens/spacing";
+export { fontFamily, fontSize, fontWeight } from "./tokens/typography";

package/src/lib/portal-container.tsx

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

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

package/src/native.ts

@@ -0,0 +1,23 @@
+/**
+ * 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

@@ -0,0 +1,91 @@
+/**
+ * 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

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