@olympusoss/canvas 2.20.1 → 4.0.0

package/styles/patterns/high-contrast.css

@@ -0,0 +1,70 @@
+@layer canvas.patterns {
+  @media (prefers-contrast: more) {
+    :root {
+      --border: 240 5.9% 50%;
+      --input: 240 5.9% 50%;
+      --muted-foreground: 240 6% 25%;
+      --shadow-xs: none;
+      --shadow-sm: none;
+      --shadow-md: none;
+      --shadow-lg: none;
+      --shadow-elevated: none;
+    }
+
+    .dark {
+      --border: 240 5% 60%;
+      --input: 240 5% 60%;
+      --muted-foreground: 240 5% 80%;
+    }
+
+    .btn,
+    .input,
+    .select,
+    .textarea,
+    .checkbox,
+    .radio,
+    .switch {
+      border-width: 2px;
+    }
+
+    .card,
+    .stat-card,
+    .section-card,
+    .dt-wrap,
+    .empty-card,
+    .alert {
+      border-width: 2px;
+    }
+
+    .badge,
+    .status-badge,
+    .kbd {
+      border-width: 2px;
+    }
+
+    .sidebar {
+      border-right-width: 2px;
+    }
+
+    .topbar {
+      border-bottom-width: 2px;
+    }
+
+    .dt-table th,
+    .dt-table td {
+      border-bottom-width: 2px;
+    }
+
+    .tab.active {
+      border-bottom-width: 3px;
+    }
+
+    .sep {
+      border-top-width: 2px;
+    }
+
+    .sep-v {
+      border-left-width: 2px;
+    }
+  }
+}

package/styles/patterns/reduced-motion.css

@@ -0,0 +1,12 @@
+@layer canvas.patterns {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/styles/patterns/scrollbar.css

@@ -0,0 +1,10 @@
+@layer canvas.patterns {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
+  }
+
+  html[data-surface="glass"] * {
+    scrollbar-color: hsl(255 100% 100% / 0.30) transparent;
+  }
+}

package/styles/reset.css

@@ -0,0 +1,89 @@
+@layer canvas.reset {
+  *,
+  ::after,
+  ::before {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+  }
+
+  body {
+    line-height: inherit;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  button, input, optgroup, select, textarea {
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+  }
+
+  button, select {
+    text-transform: none;
+  }
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+    appearance: button;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  [hidden] {
+    display: none;
+  }
+}

package/styles/tokens/colors.css

@@ -0,0 +1,106 @@
+@layer canvas.tokens {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --brand-blue-700: #1e40af;
+    --brand-blue-400: #60a5fa;
+    --brand-gradient: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
+
+    --orb-indigo: #6366f1;
+    --orb-violet: #8b5cf6;
+    --orb-cyan: #06b6d4;
+
+    --color-success: hsl(143 70% 45%);
+    --color-warning: hsl(38 92% 50%);
+    --color-info: hsl(217 91% 60%);
+
+    --success-bg: 141 79% 85%;
+    --success-fg: 144 61% 20%;
+    --warning-bg: 48 96% 89%;
+    --warning-fg: 40 80% 27%;
+    --error-bg: 0 93% 94%;
+    --error-fg: 0 70% 35%;
+    --info-bg: 214 95% 93%;
+    --info-fg: 221 83% 45%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --success-bg: 149 50% 22%;
+    --success-fg: 142 70% 65%;
+    --warning-bg: 38 50% 20%;
+    --warning-fg: 43 90% 65%;
+    --error-bg: 0 50% 18%;
+    --error-fg: 0 80% 70%;
+    --info-bg: 217 50% 22%;
+    --info-fg: 217 90% 72%;
+  }
+}

package/styles/tokens/motion.css

@@ -0,0 +1,33 @@
+@layer canvas.tokens {
+  @keyframes toast-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes modal-in {
+    from { opacity: 0; transform: scale(0.96); }
+    to   { opacity: 1; transform: scale(1); }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+  }
+
+  @keyframes slide-in {
+    from { transform: translateX(100%); }
+    to   { transform: translateX(0); }
+  }
+
+  :root {
+    --duration-fast: 150ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
+
+    --animate-toast-in: toast-in var(--duration-normal) ease-out;
+    --animate-modal-in: modal-in 180ms ease-out;
+    --animate-fade-in: fade-in var(--duration-normal) ease-out;
+    --animate-slide-in: slide-in 240ms var(--ease-out);
+  }
+}

package/styles/tokens/radius.css

@@ -0,0 +1,10 @@
+@layer canvas.tokens {
+  :root {
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --radius-xl: 12px;
+    --radius-2xl: 16px;
+    --radius-full: 9999px;
+  }
+}

package/styles/tokens/shadows.css

@@ -0,0 +1,35 @@
+@layer canvas.tokens {
+  :root {
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-sm:
+      0 1px 2px hsl(220 30% 20% / 0.04),
+      0 2px 4px -1px hsl(220 30% 20% / 0.06);
+    --shadow-md:
+      0 1px 2px hsl(220 30% 20% / 0.04),
+      0 8px 24px -12px hsl(220 30% 20% / 0.12);
+    --shadow-lg:
+      0 2px 4px hsl(220 30% 20% / 0.04),
+      0 12px 32px -8px hsl(220 30% 20% / 0.16);
+    --shadow-elevated:
+      0 1px 2px hsl(220 30% 20% / 0.04),
+      0 8px 24px -12px hsl(220 30% 20% / 0.12),
+      inset 0 1px 0 hsl(0 0% 100% / 0.5);
+  }
+
+  .dark {
+    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+    --shadow-sm:
+      0 1px 2px hsl(0 0% 0% / 0.2),
+      0 2px 4px -1px hsl(0 0% 0% / 0.2);
+    --shadow-md:
+      0 1px 2px hsl(0 0% 0% / 0.4),
+      0 8px 24px -12px hsl(0 0% 0% / 0.5);
+    --shadow-lg:
+      0 2px 4px hsl(0 0% 0% / 0.3),
+      0 12px 32px -8px hsl(0 0% 0% / 0.5);
+    --shadow-elevated:
+      0 1px 2px hsl(0 0% 0% / 0.4),
+      0 8px 24px -12px hsl(0 0% 0% / 0.5),
+      inset 0 1px 0 hsl(0 0% 100% / 0.06);
+  }
+}

package/styles/tokens/spacing.css

@@ -0,0 +1,19 @@
+@layer canvas.tokens {
+  :root {
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1-5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2-5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+  }
+}

package/styles/tokens/typography.css

@@ -0,0 +1,6 @@
+@layer canvas.tokens {
+  :root {
+    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+    --font-mono: "JetBrains Mono", "Fira Code", monospace;
+  }
+}

package/styles/tokens/z-index.css

@@ -0,0 +1,12 @@
+@layer canvas.tokens {
+  :root {
+    --z-base: 0;
+    --z-dropdown: 10;
+    --z-sticky: 20;
+    --z-overlay: 30;
+    --z-sidebar: 40;
+    --z-modal: 50;
+    --z-popover: 60;
+    --z-toast: 70;
+  }
+}

package/tsconfig.json

@@ -1,23 +1,22 @@
 {
-	"compilerOptions": {
-		"target": "ES2020",
-		"module": "ESNext",
-		"moduleResolution": "bundler",
-		"jsx": "react-jsx",
-		"strict": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"declaration": true,
-		"declarationMap": true,
-		"outDir": "./dist",
-		"baseUrl": ".",
-		"paths": {
-			"@/*": ["./src/*"]
-		}
-	},
-	"include": ["src/**/*.ts", "src/**/*.tsx"],
-	"exclude": ["node_modules", "dist"]
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
 }

package/README.md

@@ -1,60 +0,0 @@
-# @olympusoss/canvas
-
-The Olympus design system — a React + Tailwind component library used by every Olympus app (Athena, Hera, Daedalus, …). Built on top of Radix primitives, Lucide icons, and Tailwind v4.
-
-**Source-only package.** Ships TypeScript source via `main: ./src/index.ts` rather than a built bundle, so consumers tree-shake what they actually use and get accurate types from the source.
-
-## Install
-
-```sh
-npm install @olympusoss/canvas
-# peers
-npm install react react-dom
-```
-
-Optional peers (only install if you use the related components):
-
-```sh
-npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8   # SchemaForm
-npm install libphonenumber-js                              # PhoneInput
-```
-
-## Quick start
-
-```tsx
-import "@olympusoss/canvas/styles/tokens.css";
-import { Button, Icon } from "@olympusoss/canvas";
-
-export default function App() {
-  return (
-    <Button variant="default" size="sm">
-      <Icon name="Plus" />
-      New identity
-    </Button>
-  );
-}
-```
-
-Tailwind v4 setup (in your app's CSS entrypoint):
-
-```css
-@import "tailwindcss";
-@source "../node_modules/@olympusoss/canvas/src/**/*.{ts,tsx}";
-```
-
-That `@source` directive tells Tailwind to scan Canvas's source files so utility classes used by Canvas components are included in your build.
-
-## Components
-
-- **Atoms** — Button, Input, Badge, Icon, Avatar, Switch, Slider, …
-- **Molecules** — PageHeader, StatCard, SectionCard, StatusBadge, FieldDisplay, EmptyState, DataTable's pieces, …
-- **Organisms** — DashboardGrid, DataTable, Sidebar, Dialog, Sheet, Drawer, Popover, Form, Tabs, CodeEditor, MarkdownEditor, RichTextEditor, …
-- **Charts** — Theme-aware Recharts wrappers + extras: Sparkline, Gauge, ActivityHeatmap, LabeledBarList, ServiceHealthList, StackedBar, WorldHeatMap, …
-
-Browse the live docs for usage, props, and interactive examples for every component:
-
-→ **https://olympusoss.github.io/canvas/**
-
-## License
-
-MIT — see [LICENSE](./LICENSE) (or the `license` field in `package.json`).

package/src/components/atoms/README.md

@@ -1,11 +0,0 @@
-# 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

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

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