{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "atomus", "homepage": "https://docs.atomus.io", "items": [ { "name": "atomus", "type": "registry:base", "title": "Atomus design system", "description": "The whole Atomus 4.0 system for a shadcn project: tokens (light/dark, brand and radius modes, breakpoints), the shadcn/ui theme mapped to Atomus, Inter and Roboto Mono, base styles, and the @stanvision/atomus-react and @stanvision/atomus-tokens packages.", "dependencies": [ "@stanvision/atomus-react", "@stanvision/atomus-tokens" ], "registryDependencies": [ "https://docs.atomus.io/r/atomus-theme.json", "https://docs.atomus.io/r/atomus-utils.json" ], "docs": "Atomus is installed: tokens, the shadcn/ui theme, fonts and base styles are in your CSS file.\nComponents: add them as source with `npx shadcn@latest add @atomus/button` (see https://docs.atomus.io/ai/registry/) or import them from \"@stanvision/atomus-react\" (and import \"@stanvision/atomus-react/styles.css\" once).\nAgents: read https://docs.atomus.io/llms.txt and the rules at https://docs.atomus.io/ai/rules/", "categories": [ "base" ], "meta": { "page": "https://docs.atomus.io/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer base": { "body": { "font-family": "var(--font-family-body)", "color": "var(--color-text-secondary)", "background": "var(--color-bg-primary)", "-webkit-font-smoothing": "antialiased" }, "code, kbd, pre, samp": { "font-family": "\"Roboto Mono\", ui-monospace, monospace" }, ":focus-visible": { "outline": "2px solid var(--color-border-focus)", "outline-offset": "2px" } } } }, { "name": "atomus-tokens", "type": "registry:style", "title": "Atomus tokens", "description": "All Atomus design tokens as CSS custom properties: light and dark themes, the violet brand, sharp and round radius modes, tablet and mobile breakpoints, plus the Figma text-style classes.", "extends": "none", "dependencies": [ "@fontsource/inter", "@fontsource/roboto-mono" ], "docs": "Atomus tokens were added to your CSS file (unlayered custom properties on :root), with the Inter and Roboto Mono fonts.\nSwitch themes with attributes on or any element: data-theme=\"dark\", data-brand=\"violet\", data-radius=\"round\" | \"sharp\".\nUse semantic tokens only, e.g. var(--color-text-primary), var(--spacing-xl), var(--radius-md). Reference: https://docs.atomus.io/code/tokens/", "categories": [ "tokens" ], "meta": { "source": "css/atomus.css", "page": "https://docs.atomus.io/code/tokens/" }, "author": "StanVision (https://stan.vision)", "css": { "@import \"@fontsource/inter/300.css\"": {}, "@import \"@fontsource/inter/400.css\"": {}, "@import \"@fontsource/inter/500.css\"": {}, "@import \"@fontsource/inter/600.css\"": {}, "@import \"@fontsource/inter/700.css\"": {}, "@import \"@fontsource/roboto-mono/400.css\"": {}, "@import \"@fontsource/roboto-mono/500.css\"": {}, ":root": { "--color-blue-gray-900": "#0f172a", "--color-blue-gray-800": "#1e293c", "--color-blue-gray-700": "#334155", "--color-blue-gray-600": "#475569", "--color-blue-gray-500": "#64748b", "--color-blue-gray-400": "#94a3b8", "--color-blue-gray-300": "#cbd5e1", "--color-blue-gray-200": "#e2e8f0", "--color-blue-gray-100": "#f1f5f9", "--color-blue-gray-50": "#f8fafc", "--color-blue-gray-25": "#fbfdfd", "--color-blue-gray-950": "#090e19", "--color-cool-gray-900": "#111827", "--color-cool-gray-800": "#1f2937", "--color-cool-gray-700": "#374151", "--color-cool-gray-600": "#4b5563", "--color-cool-gray-500": "#6b7280", "--color-cool-gray-400": "#9ca3af", "--color-cool-gray-300": "#d1d5db", "--color-cool-gray-200": "#e5e7eb", "--color-cool-gray-100": "#f3f4f6", "--color-cool-gray-50": "#f9fafb", "--color-cool-gray-25": "#fcfdfd", "--color-cool-gray-950": "#0a0e17", "--color-gray-900": "#18181b", "--color-gray-800": "#27272a", "--color-gray-700": "#3f3f46", "--color-gray-600": "#52525b", "--color-gray-500": "#71717a", "--color-gray-400": "#a1a1aa", "--color-gray-300": "#d4d4d8", "--color-gray-200": "#e4e4e7", "--color-gray-100": "#f4f4f5", "--color-gray-50": "#fafafa", "--color-gray-25": "#fdfdfd", "--color-gray-950": "#0e0e10", "--color-true-gray-900": "#171717", "--color-true-gray-800": "#262626", "--color-true-gray-700": "#404040", "--color-true-gray-600": "#525252", "--color-true-gray-500": "#737373", "--color-true-gray-400": "#a3a3a3", "--color-true-gray-300": "#d4d4d4", "--color-true-gray-200": "#e5e5e5", "--color-true-gray-100": "#f5f5f5", "--color-true-gray-50": "#fafafa", "--color-true-gray-25": "#fdfdfd", "--color-true-gray-950": "#0e0e0e", "--color-warm-gray-900": "#1c1917", "--color-warm-gray-800": "#292524", "--color-warm-gray-700": "#44403c", "--color-warm-gray-600": "#57534e", "--color-warm-gray-500": "#78716c", "--color-warm-gray-400": "#a8a29e", "--color-warm-gray-300": "#d6d3d1", "--color-warm-gray-200": "#e7e5e4", "--color-warm-gray-100": "#f5f5f4", "--color-warm-gray-50": "#fafaf9", "--color-warm-gray-25": "#fdfdfc", "--color-warm-gray-950": "#110f0e", "--color-red-900": "#7f1d1d", "--color-red-800": "#991b1b", "--color-red-700": "#b91c1c", "--color-red-600": "#dc2626", "--color-red-500": "#ef4444", "--color-red-400": "#f87171", "--color-red-300": "#fca5a5", "--color-red-200": "#fecaca", "--color-red-100": "#fee2e2", "--color-red-50": "#fef2f2", "--color-red-25": "#fff9f9", "--color-red-950": "#4c1111", "--color-orange-900": "#7c2d12", "--color-orange-800": "#9a3412", "--color-orange-700": "#c2410c", "--color-orange-600": "#ea580c", "--color-orange-500": "#f97316", "--color-orange-400": "#fb923c", "--color-orange-300": "#fdba74", "--color-orange-200": "#fed7aa", "--color-orange-100": "#ffedd5", "--color-orange-50": "#fff7ed", "--color-orange-25": "#fffbf6", "--color-orange-950": "#4a1b0b", "--color-amber-900": "#78350f", "--color-amber-800": "#92400e", "--color-amber-700": "#b45309", "--color-amber-600": "#d97706", "--color-amber-500": "#f59e0b", "--color-amber-400": "#fbbf24", "--color-amber-300": "#fcd34d", "--color-amber-200": "#fde68a", "--color-amber-100": "#fef3c7", "--color-amber-50": "#fffbeb", "--color-amber-25": "#fffdf5", "--color-amber-950": "#482009", "--color-yellow-900": "#713f12", "--color-yellow-800": "#854d0e", "--color-yellow-700": "#a16207", "--color-yellow-600": "#ca8a04", "--color-yellow-500": "#eab308", "--color-yellow-400": "#facc15", "--color-yellow-300": "#fde047", "--color-yellow-200": "#fef08a", "--color-yellow-100": "#fef9c3", "--color-yellow-50": "#fefce8", "--color-yellow-25": "#fffdf3", "--color-yellow-950": "#44260b", "--color-lime-900": "#365314", "--color-lime-800": "#3f6212", "--color-lime-700": "#4d7c0f", "--color-lime-600": "#65a30d", "--color-lime-500": "#84cc16", "--color-lime-400": "#a3e635", "--color-lime-300": "#bef264", "--color-lime-200": "#d9f99d", "--color-lime-100": "#ecfccb", "--color-lime-50": "#f7fee7", "--color-lime-25": "#fbfff3", "--color-lime-950": "#20320c", "--color-green-900": "#14532d", "--color-green-800": "#166534", "--color-green-700": "#15803d", "--color-green-600": "#16a34a", "--color-green-500": "#22c55d", "--color-green-400": "#49de80", "--color-green-300": "#85efab", "--color-green-200": "#baf7d0", "--color-green-100": "#dcfce7", "--color-green-50": "#f0fdf4", "--color-green-25": "#f7fef9", "--color-green-950": "#0c321b", "--color-emerald-900": "#064e3b", "--color-emerald-800": "#065f46", "--color-emerald-700": "#047857", "--color-emerald-600": "#059669", "--color-emerald-500": "#10b981", "--color-emerald-400": "#34d399", "--color-emerald-300": "#6ee7b7", "--color-emerald-200": "#a7f3d0", "--color-emerald-100": "#d1fae5", "--color-emerald-50": "#ecfdf5", "--color-emerald-25": "#f5fefa", "--color-emerald-950": "#042f23", "--color-teal-900": "#134e4a", "--color-teal-800": "#115e59", "--color-teal-700": "#0f766e", "--color-teal-600": "#0d9488", "--color-teal-500": "#14b8a6", "--color-teal-400": "#2dd4bf", "--color-teal-300": "#5eead4", "--color-teal-200": "#99f6e4", "--color-teal-100": "#ccfbf1", "--color-teal-50": "#f0fdfa", "--color-teal-25": "#f7fefd", "--color-teal-950": "#0b2f2c", "--color-cyan-900": "#164e63", "--color-cyan-800": "#155e75", "--color-cyan-700": "#0e7490", "--color-cyan-600": "#0891b2", "--color-cyan-500": "#06b6d4", "--color-cyan-400": "#22d3ee", "--color-cyan-300": "#67e8f9", "--color-cyan-200": "#a5f3fc", "--color-cyan-100": "#cffafe", "--color-cyan-50": "#ecfeff", "--color-cyan-25": "#f5ffff", "--color-cyan-950": "#0d2f3b", "--color-light-blue-900": "#0c4a6e", "--color-light-blue-800": "#075985", "--color-light-blue-700": "#0369a1", "--color-light-blue-600": "#0284c7", "--color-light-blue-500": "#0ea5e9", "--color-light-blue-400": "#38bdf8", "--color-light-blue-300": "#7dd3fc", "--color-light-blue-200": "#bae6fd", "--color-light-blue-100": "#e0f2fe", "--color-light-blue-50": "#f0f9ff", "--color-light-blue-25": "#f7fcff", "--color-light-blue-950": "#072c42", "--color-blue-900": "#1e3a8a", "--color-blue-800": "#1e40af", "--color-blue-700": "#1d4ed8", "--color-blue-600": "#2563eb", "--color-blue-500": "#3b82f6", "--color-blue-400": "#60a5fa", "--color-blue-300": "#93c5fd", "--color-blue-200": "#bfdbfe", "--color-blue-100": "#dbeafe", "--color-blue-50": "#eff6ff", "--color-blue-25": "#f7fbff", "--color-blue-950": "#122353", "--color-indigo-900": "#312e81", "--color-indigo-800": "#3730a3", "--color-indigo-700": "#4338ca", "--color-indigo-600": "#4f46e5", "--color-indigo-500": "#6366f1", "--color-indigo-400": "#818cf8", "--color-indigo-300": "#a5b4fc", "--color-indigo-200": "#c7d2fe", "--color-indigo-100": "#e0e7ff", "--color-indigo-50": "#eef2ff", "--color-indigo-25": "#f7f9ff", "--color-indigo-950": "#1d1c4d", "--color-violet-900": "#4c1d95", "--color-violet-800": "#5b21b6", "--color-violet-700": "#6d28d9", "--color-violet-600": "#7c3aed", "--color-violet-500": "#8b5cf6", "--color-violet-400": "#a78bfa", "--color-violet-300": "#c4b5fd", "--color-violet-200": "#ddd6fe", "--color-violet-100": "#ede9fe", "--color-violet-50": "#f5f3ff", "--color-violet-25": "#faf9ff", "--color-violet-950": "#2e1159", "--color-purple-900": "#581c87", "--color-purple-800": "#6b21a8", "--color-purple-700": "#7e22ce", "--color-purple-600": "#9333ea", "--color-purple-500": "#a855f7", "--color-purple-400": "#c084fc", "--color-purple-300": "#d8b4fe", "--color-purple-200": "#e9d5ff", "--color-purple-100": "#f3e8ff", "--color-purple-50": "#faf5ff", "--color-purple-25": "#fdfaff", "--color-purple-950": "#351151", "--color-fuschia-900": "#701a75", "--color-fuschia-800": "#86198f", "--color-fuschia-700": "#a21caf", "--color-fuschia-600": "#c026d3", "--color-fuschia-500": "#d946ef", "--color-fuschia-400": "#e879f9", "--color-fuschia-300": "#f0abfc", "--color-fuschia-200": "#f5d0fe", "--color-fuschia-100": "#fae8ff", "--color-fuschia-50": "#fdf4ff", "--color-fuschia-25": "#fef9ff", "--color-fuschia-950": "#431046", "--color-pink-900": "#831843", "--color-pink-800": "#9d174d", "--color-pink-700": "#be185d", "--color-pink-600": "#db2777", "--color-pink-500": "#ec4899", "--color-pink-400": "#f472b6", "--color-pink-300": "#f9a8d4", "--color-pink-200": "#fbcfe8", "--color-pink-100": "#fce7f3", "--color-pink-50": "#fdf2f8", "--color-pink-25": "#fef9fb", "--color-pink-950": "#4f0e28", "--color-rose-900": "#881337", "--color-rose-800": "#9f1239", "--color-rose-700": "#be123c", "--color-rose-600": "#e11d48", "--color-rose-500": "#f43f5e", "--color-rose-400": "#fb7185", "--color-rose-300": "#fda4af", "--color-rose-200": "#fecdd3", "--color-rose-100": "#ffe4e6", "--color-rose-50": "#fff1f2", "--color-rose-25": "#fff8f9", "--color-rose-950": "#520b21", "--color-atomus-blue-900": "#121f8c", "--color-atomus-blue-800": "#1d2fb6", "--color-atomus-blue-700": "#2335d6", "--color-atomus-blue-600": "#4057ff", "--color-atomus-blue-500": "#4c70ff", "--color-atomus-blue-400": "#6e96ff", "--color-atomus-blue-300": "#97bdff", "--color-atomus-blue-200": "#bed9ff", "--color-atomus-blue-100": "#dbeaff", "--color-atomus-blue-50": "#ebf5ff", "--color-atomus-blue-25": "#f5faff", "--color-atomus-blue-950": "#0b1354", "--color-black": "#000000", "--color-white": "#ffffff", "--color-transparent": "#ffffff03", "--color-alpha-black-5": "#0000000d", "--color-alpha-white-5": "#ffffff0d", "--color-alpha-black-10": "#0000001a", "--color-alpha-white-10": "#ffffff1a", "--color-alpha-black-20": "#00000033", "--color-alpha-white-20": "#ffffff33", "--color-alpha-black-30": "#0000004d", "--color-alpha-white-30": "#ffffff4d", "--color-alpha-black-40": "#00000066", "--color-alpha-white-40": "#ffffff66", "--color-alpha-black-50": "#00000080", "--color-alpha-white-50": "#ffffff80", "--color-alpha-black-60": "#00000099", "--color-alpha-white-60": "#ffffff99", "--color-alpha-black-70": "#000000b2", "--color-alpha-white-70": "#ffffffb2", "--color-alpha-black-80": "#000000cc", "--color-alpha-white-80": "#ffffffcc", "--color-alpha-black-90": "#000000e5", "--color-alpha-white-90": "#ffffffe5", "--size-0": "0px", "--size-2": "2px", "--size-4": "4px", "--size-6": "6px", "--size-8": "8px", "--size-10": "10px", "--size-12": "12px", "--size-16": "16px", "--size-20": "20px", "--size-24": "24px", "--size-32": "32px", "--size-40": "40px", "--size-48": "48px", "--size-56": "56px", "--size-64": "64px", "--size-72": "72px", "--size-80": "80px", "--size-88": "88px", "--size-96": "96px", "--size-104": "104px", "--size-112": "112px", "--size-120": "120px", "--size-160": "160px", "--size-200": "200px", "--size-240": "240px", "--size-320": "320px", "--size-400": "400px", "--size-9999": "9999px", "--color-brand-25": "var(--color-atomus-blue-25)", "--color-brand-50": "var(--color-atomus-blue-50)", "--color-brand-100": "var(--color-atomus-blue-100)", "--color-brand-200": "var(--color-atomus-blue-200)", "--color-brand-300": "var(--color-atomus-blue-300)", "--color-brand-400": "var(--color-atomus-blue-400)", "--color-brand-500": "var(--color-atomus-blue-500)", "--color-brand-600": "var(--color-atomus-blue-600)", "--color-brand-700": "var(--color-atomus-blue-700)", "--color-brand-800": "var(--color-atomus-blue-800)", "--color-brand-900": "var(--color-atomus-blue-900)", "--color-brand-950": "var(--color-atomus-blue-950)", "--radius-none": "var(--size-0)", "--radius-xxs": "var(--size-2)", "--radius-xs": "var(--size-4)", "--radius-sm": "var(--size-6)", "--radius-md": "var(--size-8)", "--radius-lg": "var(--size-10)", "--radius-xl": "var(--size-12)", "--radius-2xl": "var(--size-16)", "--radius-3xl": "var(--size-20)", "--radius-4xl": "var(--size-24)", "--radius-full": "var(--size-9999)", "--radius-5xl": "var(--size-32)", "--radius-6xl": "var(--size-40)", "--spacing-none": "var(--size-0)", "--spacing-xxs": "var(--size-2)", "--spacing-xs": "var(--size-4)", "--spacing-sm": "var(--size-6)", "--spacing-md": "var(--size-8)", "--spacing-lg": "var(--size-12)", "--spacing-xl": "var(--size-16)", "--spacing-2xl": "var(--size-20)", "--spacing-3xl": "var(--size-24)", "--layout-xs": "var(--size-32)", "--layout-sm": "var(--size-40)", "--layout-md": "var(--size-48)", "--layout-lg": "var(--size-56)", "--layout-xl": "var(--size-64)", "--layout-2xl": "var(--size-72)", "--layout-3xl": "var(--size-80)", "--layout-4xl": "var(--size-96)", "--layout-5xl": "var(--size-120)", "--layout-6xl": "var(--size-160)", "--layout-7xl": "var(--size-200)", "--layout-8xl": "var(--size-240)", "--icon-xs": "12px", "--icon-sm": "16px", "--icon-md": "20px", "--icon-lg": "24px", "--icon-xl": "32px", "--size-xs": "24px", "--size-sm": "32px", "--size-md": "40px", "--size-lg": "48px", "--size-xl": "56px", "--size-2xl": "64px", "--container-padding": "80px", "--container-max-width": "1280px", "--section-padding": "96px", "--font-family-title": "\"Inter Display\", ui-sans-serif, system-ui, sans-serif", "--font-family-body": "\"Inter\", ui-sans-serif, system-ui, sans-serif", "--font-family-component": "\"Inter\", ui-sans-serif, system-ui, sans-serif", "--font-weight-light": "300", "--font-weight-normal": "400", "--font-weight-medium": "500", "--font-weight-semi-bold": "600", "--font-weight-bold": "700", "--font-weight-huge": "var(--font-weight-semi-bold)", "--font-size-huge": "120px", "--line-height-huge": "140px", "--letter-spacing-huge": "-1.25px", "--font-weight-h1": "var(--font-weight-semi-bold)", "--font-size-h1": "64px", "--line-height-h1": "72px", "--letter-spacing-h1": "-1.25px", "--font-weight-h2": "var(--font-weight-medium)", "--font-size-h2": "56px", "--line-height-h2": "64px", "--letter-spacing-h2": "-0.75px", "--font-weight-h3": "var(--font-weight-medium)", "--font-size-h3": "40px", "--line-height-h3": "44px", "--letter-spacing-h3": "-0.5px", "--font-weight-h4": "var(--font-weight-medium)", "--font-size-h4": "32px", "--line-height-h4": "40px", "--font-weight-h5": "var(--font-weight-medium)", "--font-size-h5": "24px", "--line-height-h5": "32px", "--font-weight-h6": "var(--font-weight-medium)", "--font-size-h6": "20px", "--line-height-h6": "28px", "--font-weight-subtitle": "var(--font-weight-medium)", "--font-size-subtitle": "12px", "--line-height-subtitle": "20px", "--font-weight-overline": "var(--font-weight-bold)", "--font-size-overline": "14px", "--line-height-overline": "20px", "--font-weight-body-leading": "var(--font-weight-medium)", "--font-weight-bold-body-leading": "var(--font-weight-bold)", "--font-size-body-leading": "18px", "--line-height-body-leading": "28px", "--paragraph-spacing-body-leading": "16px", "--font-weight-body": "var(--font-weight-normal)", "--font-weight-bold-body": "var(--font-weight-semi-bold)", "--font-size-body": "16px", "--line-height-body": "24px", "--paragraph-spacing-body": "12px", "--font-weight-small": "var(--font-weight-normal)", "--font-weight-bold-small": "var(--font-weight-semi-bold)", "--font-size-small": "14px", "--line-height-small": "20px", "--paragraph-spacing-small": "8px", "--font-weight-tiny": "var(--font-weight-normal)", "--font-weight-bold-tiny": "var(--font-weight-medium)", "--font-size-tiny": "12px", "--line-height-tiny": "16px", "--paragraph-spacing-tiny": "6px", "--font-weight-micro": "var(--font-weight-normal)", "--font-weight-bold-micro": "var(--font-weight-semi-bold)", "--font-size-micro": "10px", "--line-height-micro": "12px", "--paragraph-spacing-micro": "4px", "--font-weight-button-xs": "var(--font-weight-semi-bold)", "--font-size-button-xs": "10px", "--line-height-button-xs": "12px", "--font-weight-button-sm": "var(--font-weight-semi-bold)", "--font-size-button-sm": "12px", "--line-height-button-sm": "16px", "--font-weight-button-md": "var(--font-weight-semi-bold)", "--font-size-button-md": "14px", "--line-height-button-md": "16px", "--font-weight-button-lg": "var(--font-weight-semi-bold)", "--font-size-button-lg": "16px", "--line-height-button-lg": "20px", "--font-weight-button-xl": "var(--font-weight-semi-bold)", "--font-size-button-xl": "18px", "--line-height-button-xl": "20px", "--font-weight-input-xs": "var(--font-weight-normal)", "--font-size-input-xs": "12px", "--line-height-input-xs": "12px", "--font-weight-input-sm": "var(--font-weight-normal)", "--font-size-input-sm": "14px", "--line-height-input-sm": "16px", "--font-weight-input-md": "var(--font-weight-normal)", "--font-size-input-md": "15px", "--line-height-input-md": "16px", "--font-weight-input-lg": "var(--font-weight-normal)", "--font-size-input-lg": "18px", "--line-height-input-lg": "20px", "--font-weight-caption-xs": "var(--font-weight-semi-bold)", "--font-size-caption-xs": "10px", "--line-height-caption-xs": "12px", "--font-weight-caption-sm": "var(--font-weight-medium)", "--font-size-caption-sm": "12px", "--line-height-caption-sm": "12px", "--font-weight-caption-md": "var(--font-weight-semi-bold)", "--font-size-caption-md": "14px", "--line-height-caption-md": "16px", "--font-weight-caption-lg": "var(--font-weight-semi-bold)", "--font-size-caption-lg": "16px", "--line-height-caption-lg": "16px", "--shadow-elevation-1": "0px 1px 2px 0px #1111140f", "--shadow-elevation-2": "0px 1px 3px 0px #11111414, 0px 1px 2px 0px #1111140f", "--shadow-elevation-3": "0px 4px 8px -2px #1111141a, 0px 1px 2px 0px #1111140a", "--shadow-elevation-4": "0px 12px 16px -4px #11111414, 0px 4px 6px -2px #1111140a", "--shadow-elevation-6": "0px 20px 24px -4px #11111414, 0px 8px 8px -4px #11111408", "--shadow-elevation-8": "0px 24px 48px -12px #1111142e", "--shadow-elevation-9": "0px 32px 64px -12px #1111143d", "--shadow-elevation-12": "0px 40px 80px -12px #11111452", "--shadow-elevation-16": "0px 48px 96px -12px #11111466", "--shadow-elevation-24": "0px 56px 112px -12px #1111147a", "--shadow-focus-ring": "0 0 0 4px var(--color-bg-brand-subtle)", "--shadow-focus-ring-error": "0 0 0 4px var(--color-bg-error-subtle)", "--motion-stream-shimmer-duration": "1.8s", "--motion-stream-caret-blink": "1s" }, ":root, [data-theme], [data-brand]": { "--color-text-primary": "var(--color-gray-900)", "--color-text-secondary": "var(--color-gray-700)", "--color-text-white": "var(--color-white)", "--color-button-primary-color": "var(--color-brand-600)", "--color-button-primary-text": "var(--color-white)", "--color-button-primary-text-hover": "var(--color-white)", "--color-button-primary-color-hover": "var(--color-brand-500)", "--color-button-secondary-text": "var(--color-gray-900)", "--color-button-secondary-text-hover": "var(--color-gray-900)", "--color-button-secondary-color": "var(--color-gray-100)", "--color-button-secondary-color-hover": "var(--color-gray-200)", "--color-button-outline-color": "var(--color-gray-300)", "--color-button-outline-text-hover": "var(--color-gray-800)", "--color-button-outline-color-hover": "var(--color-gray-400)", "--color-button-outline-text": "var(--color-gray-800)", "--color-button-inv-text": "var(--color-text-primary)", "--color-button-inv-color": "var(--color-transparent)", "--color-button-inv-text-hover": "var(--color-text-primary)", "--color-button-inv-color-hover": "var(--color-gray-100)", "--color-button-link-text": "var(--color-brand-600)", "--color-button-link-text-hover": "var(--color-brand-500)", "--color-button-disabled-color": "var(--color-gray-100)", "--color-button-disabled-text": "var(--color-gray-300)", "--color-button-primary-border": "var(--color-brand-600)", "--color-button-primary-border-focus": "var(--color-white)", "--color-button-secondary-border": "var(--color-gray-100)", "--color-button-secondary-border-focus": "var(--color-white)", "--color-button-outline-border-focus": "var(--color-white)", "--color-button-inv-border-active": "var(--color-white)", "--color-button-link-border-active": "var(--color-white)", "--color-badge-primary-text": "var(--color-brand-700)", "--color-badge-primary-border": "var(--color-brand-200)", "--color-badge-primary-color": "var(--color-brand-50)", "--color-badge-light-color": "var(--color-gray-200)", "--color-badge-light-text": "var(--color-gray-800)", "--color-badge-light-border": "var(--color-gray-300)", "--color-badge-success-color": "var(--color-green-100)", "--color-badge-success-border": "var(--color-green-300)", "--color-badge-success-text": "var(--color-green-700)", "--color-badge-danger-color": "var(--color-rose-100)", "--color-badge-danger-border": "var(--color-rose-300)", "--color-badge-danger-text": "var(--color-rose-700)", "--color-badge-info-color": "var(--color-cyan-100)", "--color-badge-info-border": "var(--color-cyan-300)", "--color-badge-info-text": "var(--color-cyan-700)", "--color-badge-warning-color": "var(--color-amber-100)", "--color-badge-warning-border": "var(--color-amber-300)", "--color-badge-warning-text": "var(--color-amber-700)", "--color-badge-dark-text": "var(--color-gray-100)", "--color-badge-dark-border": "var(--color-gray-700)", "--color-badge-dark-color": "var(--color-gray-700)", "--color-gradient-primary-start": "var(--color-blue-600)", "--color-gradient-primary-end": "var(--color-blue-400)", "--color-gradient-secondary-start": "var(--color-blue-600)", "--color-gradient-secondary-end": "var(--color-violet-400)", "--color-gradient-tertiary-start": "var(--color-blue-gray-400)", "--color-gradient-tertiary-end": "var(--color-blue-gray-100)", "--color-focus-m-color": "#2563eb52", "--focus-m-spread": "3px", "--focus-s-spread": "2px", "--color-focus-s-color": "#2563eb3d", "--color-text-opacity": "#00000099", "--color-text-link": "var(--color-brand-600)", "--color-button-link-border-hover": "var(--color-brand-500)", "--color-text-tertiary": "var(--color-gray-500)", "--color-text-placeholder": "var(--color-gray-500)", "--color-text-disabled": "var(--color-gray-300)", "--color-text-brand": "var(--color-brand-600)", "--color-text-on-brand": "var(--color-white)", "--color-text-error": "var(--color-rose-700)", "--color-text-warning": "var(--color-amber-700)", "--color-text-success": "var(--color-green-700)", "--color-bg-primary": "var(--color-white)", "--color-bg-primary-hover": "var(--color-gray-50)", "--color-bg-secondary": "var(--color-gray-50)", "--color-bg-tertiary": "var(--color-gray-100)", "--color-bg-inverse": "var(--color-gray-900)", "--color-bg-disabled": "var(--color-gray-100)", "--color-bg-brand-solid": "var(--color-brand-600)", "--color-bg-brand-solid-hover": "var(--color-brand-700)", "--color-bg-brand-subtle": "var(--color-brand-50)", "--color-bg-error-solid": "var(--color-rose-600)", "--color-bg-error-subtle": "var(--color-rose-50)", "--color-bg-warning-subtle": "var(--color-amber-50)", "--color-bg-success-subtle": "var(--color-green-50)", "--color-border-primary": "var(--color-gray-300)", "--color-border-secondary": "var(--color-gray-200)", "--color-border-disabled": "var(--color-gray-200)", "--color-border-brand": "var(--color-brand-600)", "--color-border-focus": "var(--color-brand-500)", "--color-border-error": "var(--color-rose-600)", "--color-fg-primary": "var(--color-gray-900)", "--color-fg-secondary": "var(--color-gray-600)", "--color-fg-tertiary": "var(--color-gray-500)", "--color-fg-disabled": "var(--color-gray-300)", "--color-fg-brand": "var(--color-brand-600)", "--color-fg-on-brand": "var(--color-white)", "--color-fg-error": "var(--color-rose-600)", "--color-fg-warning": "var(--color-amber-600)", "--color-fg-success": "var(--color-green-600)", "--color-bg-tertiary-hover": "var(--color-gray-200)", "--color-text-brand-hover": "var(--color-brand-700)", "--color-bg-warning-solid": "var(--color-amber-500)", "--color-bg-success-solid": "var(--color-green-700)", "--color-bg-overlay": "#18181bb2", "--color-text-inverse": "var(--color-white)", "--color-fg-inverse": "var(--color-white)", "--color-bg-quaternary": "var(--color-gray-200)", "--color-bg-quaternary-hover": "var(--color-gray-300)", "--color-border-warning": "var(--color-amber-500)", "--color-border-success": "var(--color-green-600)", "--color-text-on-warning": "var(--color-gray-900)", "--color-fg-on-warning": "var(--color-gray-900)", "--color-alert-brand-bg": "var(--color-brand-100)", "--color-alert-brand-border": "var(--color-brand-200)", "--color-alert-brand-title": "var(--color-brand-800)", "--color-alert-brand-icon": "var(--color-brand-700)", "--color-alert-error-bg": "var(--color-rose-100)", "--color-alert-error-border": "var(--color-rose-200)", "--color-alert-error-title": "var(--color-rose-800)", "--color-alert-error-icon": "var(--color-rose-700)", "--color-alert-warning-bg": "var(--color-amber-100)", "--color-alert-warning-border": "var(--color-amber-300)", "--color-alert-warning-title": "var(--color-amber-800)", "--color-alert-warning-icon": "var(--color-amber-700)", "--color-alert-success-bg": "var(--color-green-100)", "--color-alert-success-border": "var(--color-green-300)", "--color-alert-success-title": "var(--color-green-800)", "--color-alert-success-icon": "var(--color-green-700)", "--color-alert-gray-bg": "var(--color-gray-100)", "--color-alert-gray-border": "var(--color-gray-300)", "--color-alert-gray-title": "var(--color-gray-900)", "--color-alert-gray-icon": "var(--color-gray-600)", "--color-fg-contrast": "var(--color-black)", "--color-fg-contrast-inverse": "var(--color-white)", "--color-bg-ai-subtle": "color-mix(in srgb, var(--color-brand-50) 55%, var(--color-purple-50))", "--color-border-ai": "color-mix(in srgb, var(--color-brand-300) 55%, var(--color-purple-300))", "--color-text-ai": "color-mix(in srgb, var(--color-brand-700) 55%, var(--color-purple-700))", "--gradient-ai": "linear-gradient(135deg, var(--color-brand-500) 0%, color-mix(in srgb, var(--color-brand-500) 35%, var(--color-purple-500)) 55%, var(--color-pink-400) 100%)" }, "[data-theme=\"dark\"], .dark, [data-theme=\"dark\"] [data-brand], .dark [data-brand]": { "--color-text-primary": "var(--color-gray-50)", "--color-text-secondary": "var(--color-gray-300)", "--color-text-white": "var(--color-white)", "--color-button-primary-color": "var(--color-brand-600)", "--color-button-primary-text": "var(--color-white)", "--color-button-primary-text-hover": "var(--color-white)", "--color-button-primary-color-hover": "var(--color-brand-500)", "--color-button-secondary-text": "var(--color-gray-50)", "--color-button-secondary-text-hover": "var(--color-gray-50)", "--color-button-secondary-color": "var(--color-gray-800)", "--color-button-secondary-color-hover": "var(--color-gray-700)", "--color-button-outline-color": "var(--color-gray-600)", "--color-button-outline-text-hover": "var(--color-gray-300)", "--color-button-outline-color-hover": "var(--color-gray-700)", "--color-button-outline-text": "var(--color-gray-200)", "--color-button-inv-text": "var(--color-text-primary)", "--color-button-inv-color": "var(--color-transparent)", "--color-button-inv-text-hover": "var(--color-text-primary)", "--color-button-inv-color-hover": "var(--color-gray-800)", "--color-button-link-text": "var(--color-brand-600)", "--color-button-link-text-hover": "var(--color-brand-200)", "--color-button-disabled-color": "var(--color-gray-800)", "--color-button-disabled-text": "var(--color-gray-600)", "--color-button-primary-border": "var(--color-brand-600)", "--color-button-primary-border-focus": "var(--color-white)", "--color-button-secondary-border": "var(--color-gray-800)", "--color-button-secondary-border-focus": "var(--color-white)", "--color-button-outline-border-focus": "var(--color-white)", "--color-button-inv-border-active": "var(--color-black)", "--color-button-link-border-active": "var(--color-white)", "--color-badge-primary-text": "var(--color-brand-500)", "--color-badge-primary-border": "var(--color-gray-800)", "--color-badge-primary-color": "var(--color-gray-900)", "--color-badge-light-color": "var(--color-gray-900)", "--color-badge-light-text": "var(--color-gray-100)", "--color-badge-light-border": "var(--color-gray-800)", "--color-badge-success-color": "var(--color-gray-900)", "--color-badge-success-border": "var(--color-gray-800)", "--color-badge-success-text": "var(--color-green-500)", "--color-badge-danger-color": "var(--color-gray-900)", "--color-badge-danger-border": "var(--color-gray-800)", "--color-badge-danger-text": "var(--color-rose-500)", "--color-badge-info-color": "var(--color-gray-900)", "--color-badge-info-border": "var(--color-gray-800)", "--color-badge-info-text": "var(--color-cyan-500)", "--color-badge-warning-color": "var(--color-gray-900)", "--color-badge-warning-border": "var(--color-gray-800)", "--color-badge-warning-text": "var(--color-amber-500)", "--color-badge-dark-text": "var(--color-gray-400)", "--color-badge-dark-border": "var(--color-gray-800)", "--color-badge-dark-color": "var(--color-gray-900)", "--color-gradient-primary-start": "var(--color-blue-600)", "--color-gradient-primary-end": "var(--color-blue-400)", "--color-gradient-secondary-start": "var(--color-blue-600)", "--color-gradient-secondary-end": "var(--color-violet-400)", "--color-gradient-tertiary-start": "var(--color-blue-gray-400)", "--color-gradient-tertiary-end": "var(--color-blue-gray-100)", "--color-focus-m-color": "#2563eb52", "--focus-m-spread": "3px", "--focus-s-spread": "2px", "--color-focus-s-color": "#2563eb3d", "--color-text-opacity": "#ffffff99", "--color-text-link": "var(--color-brand-400)", "--color-button-link-border-hover": "var(--color-brand-500)", "--color-text-tertiary": "var(--color-gray-400)", "--color-text-placeholder": "var(--color-gray-400)", "--color-text-disabled": "var(--color-gray-600)", "--color-text-brand": "var(--color-brand-400)", "--color-text-on-brand": "var(--color-white)", "--color-text-error": "var(--color-rose-300)", "--color-text-warning": "var(--color-amber-400)", "--color-text-success": "var(--color-green-400)", "--color-bg-primary": "var(--color-gray-900)", "--color-bg-primary-hover": "var(--color-gray-800)", "--color-bg-secondary": "var(--color-gray-800)", "--color-bg-tertiary": "var(--color-gray-700)", "--color-bg-inverse": "var(--color-white)", "--color-bg-disabled": "var(--color-gray-800)", "--color-bg-brand-solid": "var(--color-brand-600)", "--color-bg-brand-solid-hover": "var(--color-brand-700)", "--color-bg-brand-subtle": "var(--color-brand-900)", "--color-bg-error-solid": "var(--color-rose-600)", "--color-bg-error-subtle": "var(--color-rose-900)", "--color-bg-warning-subtle": "var(--color-amber-900)", "--color-bg-success-subtle": "var(--color-green-900)", "--color-border-primary": "var(--color-gray-700)", "--color-border-secondary": "var(--color-gray-800)", "--color-border-disabled": "var(--color-gray-700)", "--color-border-brand": "var(--color-brand-400)", "--color-border-focus": "var(--color-brand-400)", "--color-border-error": "var(--color-rose-400)", "--color-fg-primary": "var(--color-white)", "--color-fg-secondary": "var(--color-gray-300)", "--color-fg-tertiary": "var(--color-gray-400)", "--color-fg-disabled": "var(--color-gray-600)", "--color-fg-brand": "var(--color-brand-400)", "--color-fg-on-brand": "var(--color-white)", "--color-fg-error": "var(--color-rose-400)", "--color-fg-warning": "var(--color-amber-400)", "--color-fg-success": "var(--color-green-400)", "--color-bg-tertiary-hover": "var(--color-gray-600)", "--color-text-brand-hover": "var(--color-brand-300)", "--color-bg-warning-solid": "var(--color-amber-500)", "--color-bg-success-solid": "var(--color-green-700)", "--color-bg-overlay": "#000000b2", "--color-text-inverse": "var(--color-gray-900)", "--color-fg-inverse": "var(--color-gray-900)", "--color-bg-quaternary": "var(--color-gray-700)", "--color-bg-quaternary-hover": "var(--color-gray-600)", "--color-border-warning": "var(--color-amber-400)", "--color-border-success": "var(--color-green-400)", "--color-text-on-warning": "var(--color-gray-900)", "--color-fg-on-warning": "var(--color-gray-900)", "--shadow-elevation-1": "0px 1px 2px 0px #00000026", "--shadow-elevation-2": "0px 1px 3px 0px #00000033, 0px 1px 2px 0px #00000026", "--shadow-elevation-3": "0px 4px 8px -2px #00000040, 0px 1px 2px 0px #00000019", "--shadow-elevation-4": "0px 12px 16px -4px #00000033, 0px 4px 6px -2px #00000019", "--shadow-elevation-6": "0px 20px 24px -4px #00000033, 0px 8px 8px -4px #00000013", "--shadow-elevation-8": "0px 24px 48px -12px #00000073", "--shadow-elevation-9": "0px 32px 64px -12px #00000099", "--shadow-elevation-12": "0px 40px 80px -12px #00000099", "--shadow-elevation-16": "0px 48px 96px -12px #00000099", "--shadow-elevation-24": "0px 56px 112px -12px #00000099", "--color-alert-brand-bg": "color-mix(in srgb, var(--color-brand-400) 14%, transparent)", "--color-alert-brand-border": "color-mix(in srgb, var(--color-brand-400) 36%, transparent)", "--color-alert-brand-title": "var(--color-brand-300)", "--color-alert-brand-icon": "var(--color-brand-400)", "--color-alert-error-bg": "color-mix(in srgb, var(--color-rose-400) 14%, transparent)", "--color-alert-error-border": "color-mix(in srgb, var(--color-rose-400) 36%, transparent)", "--color-alert-error-title": "var(--color-rose-300)", "--color-alert-error-icon": "var(--color-rose-400)", "--color-alert-warning-bg": "color-mix(in srgb, var(--color-amber-400) 14%, transparent)", "--color-alert-warning-border": "color-mix(in srgb, var(--color-amber-400) 36%, transparent)", "--color-alert-warning-title": "var(--color-amber-300)", "--color-alert-warning-icon": "var(--color-amber-400)", "--color-alert-success-bg": "color-mix(in srgb, var(--color-green-400) 14%, transparent)", "--color-alert-success-border": "color-mix(in srgb, var(--color-green-400) 36%, transparent)", "--color-alert-success-title": "var(--color-green-300)", "--color-alert-success-icon": "var(--color-green-400)", "--color-alert-gray-bg": "color-mix(in srgb, var(--color-gray-400) 14%, transparent)", "--color-alert-gray-border": "color-mix(in srgb, var(--color-gray-400) 36%, transparent)", "--color-alert-gray-title": "var(--color-gray-50)", "--color-alert-gray-icon": "var(--color-gray-400)", "--color-fg-contrast": "var(--color-white)", "--color-fg-contrast-inverse": "var(--color-black)", "--color-bg-ai-subtle": "color-mix(in srgb, color-mix(in srgb, var(--color-brand-400) 55%, var(--color-purple-400)) 12%, transparent)", "--color-border-ai": "color-mix(in srgb, color-mix(in srgb, var(--color-brand-400) 55%, var(--color-purple-400)) 40%, transparent)", "--color-text-ai": "color-mix(in srgb, var(--color-brand-300) 55%, var(--color-purple-300))", "--gradient-ai": "linear-gradient(135deg, var(--color-brand-400) 0%, color-mix(in srgb, var(--color-brand-400) 35%, var(--color-purple-400)) 55%, var(--color-pink-300) 100%)" }, "@media (prefers-color-scheme: dark)": { "[data-theme=\"system\"], [data-theme=\"system\"] [data-brand]": { "--color-text-primary": "var(--color-gray-50)", "--color-text-secondary": "var(--color-gray-300)", "--color-text-white": "var(--color-white)", "--color-button-primary-color": "var(--color-brand-600)", "--color-button-primary-text": "var(--color-white)", "--color-button-primary-text-hover": "var(--color-white)", "--color-button-primary-color-hover": "var(--color-brand-500)", "--color-button-secondary-text": "var(--color-gray-50)", "--color-button-secondary-text-hover": "var(--color-gray-50)", "--color-button-secondary-color": "var(--color-gray-800)", "--color-button-secondary-color-hover": "var(--color-gray-700)", "--color-button-outline-color": "var(--color-gray-600)", "--color-button-outline-text-hover": "var(--color-gray-300)", "--color-button-outline-color-hover": "var(--color-gray-700)", "--color-button-outline-text": "var(--color-gray-200)", "--color-button-inv-text": "var(--color-text-primary)", "--color-button-inv-color": "var(--color-transparent)", "--color-button-inv-text-hover": "var(--color-text-primary)", "--color-button-inv-color-hover": "var(--color-gray-800)", "--color-button-link-text": "var(--color-brand-600)", "--color-button-link-text-hover": "var(--color-brand-200)", "--color-button-disabled-color": "var(--color-gray-800)", "--color-button-disabled-text": "var(--color-gray-600)", "--color-button-primary-border": "var(--color-brand-600)", "--color-button-primary-border-focus": "var(--color-white)", "--color-button-secondary-border": "var(--color-gray-800)", "--color-button-secondary-border-focus": "var(--color-white)", "--color-button-outline-border-focus": "var(--color-white)", "--color-button-inv-border-active": "var(--color-black)", "--color-button-link-border-active": "var(--color-white)", "--color-badge-primary-text": "var(--color-brand-500)", "--color-badge-primary-border": "var(--color-gray-800)", "--color-badge-primary-color": "var(--color-gray-900)", "--color-badge-light-color": "var(--color-gray-900)", "--color-badge-light-text": "var(--color-gray-100)", "--color-badge-light-border": "var(--color-gray-800)", "--color-badge-success-color": "var(--color-gray-900)", "--color-badge-success-border": "var(--color-gray-800)", "--color-badge-success-text": "var(--color-green-500)", "--color-badge-danger-color": "var(--color-gray-900)", "--color-badge-danger-border": "var(--color-gray-800)", "--color-badge-danger-text": "var(--color-rose-500)", "--color-badge-info-color": "var(--color-gray-900)", "--color-badge-info-border": "var(--color-gray-800)", "--color-badge-info-text": "var(--color-cyan-500)", "--color-badge-warning-color": "var(--color-gray-900)", "--color-badge-warning-border": "var(--color-gray-800)", "--color-badge-warning-text": "var(--color-amber-500)", "--color-badge-dark-text": "var(--color-gray-400)", "--color-badge-dark-border": "var(--color-gray-800)", "--color-badge-dark-color": "var(--color-gray-900)", "--color-gradient-primary-start": "var(--color-blue-600)", "--color-gradient-primary-end": "var(--color-blue-400)", "--color-gradient-secondary-start": "var(--color-blue-600)", "--color-gradient-secondary-end": "var(--color-violet-400)", "--color-gradient-tertiary-start": "var(--color-blue-gray-400)", "--color-gradient-tertiary-end": "var(--color-blue-gray-100)", "--color-focus-m-color": "#2563eb52", "--focus-m-spread": "3px", "--focus-s-spread": "2px", "--color-focus-s-color": "#2563eb3d", "--color-text-opacity": "#ffffff99", "--color-text-link": "var(--color-brand-400)", "--color-button-link-border-hover": "var(--color-brand-500)", "--color-text-tertiary": "var(--color-gray-400)", "--color-text-placeholder": "var(--color-gray-400)", "--color-text-disabled": "var(--color-gray-600)", "--color-text-brand": "var(--color-brand-400)", "--color-text-on-brand": "var(--color-white)", "--color-text-error": "var(--color-rose-300)", "--color-text-warning": "var(--color-amber-400)", "--color-text-success": "var(--color-green-400)", "--color-bg-primary": "var(--color-gray-900)", "--color-bg-primary-hover": "var(--color-gray-800)", "--color-bg-secondary": "var(--color-gray-800)", "--color-bg-tertiary": "var(--color-gray-700)", "--color-bg-inverse": "var(--color-white)", "--color-bg-disabled": "var(--color-gray-800)", "--color-bg-brand-solid": "var(--color-brand-600)", "--color-bg-brand-solid-hover": "var(--color-brand-700)", "--color-bg-brand-subtle": "var(--color-brand-900)", "--color-bg-error-solid": "var(--color-rose-600)", "--color-bg-error-subtle": "var(--color-rose-900)", "--color-bg-warning-subtle": "var(--color-amber-900)", "--color-bg-success-subtle": "var(--color-green-900)", "--color-border-primary": "var(--color-gray-700)", "--color-border-secondary": "var(--color-gray-800)", "--color-border-disabled": "var(--color-gray-700)", "--color-border-brand": "var(--color-brand-400)", "--color-border-focus": "var(--color-brand-400)", "--color-border-error": "var(--color-rose-400)", "--color-fg-primary": "var(--color-white)", "--color-fg-secondary": "var(--color-gray-300)", "--color-fg-tertiary": "var(--color-gray-400)", "--color-fg-disabled": "var(--color-gray-600)", "--color-fg-brand": "var(--color-brand-400)", "--color-fg-on-brand": "var(--color-white)", "--color-fg-error": "var(--color-rose-400)", "--color-fg-warning": "var(--color-amber-400)", "--color-fg-success": "var(--color-green-400)", "--color-bg-tertiary-hover": "var(--color-gray-600)", "--color-text-brand-hover": "var(--color-brand-300)", "--color-bg-warning-solid": "var(--color-amber-500)", "--color-bg-success-solid": "var(--color-green-700)", "--color-bg-overlay": "#000000b2", "--color-text-inverse": "var(--color-gray-900)", "--color-fg-inverse": "var(--color-gray-900)", "--color-bg-quaternary": "var(--color-gray-700)", "--color-bg-quaternary-hover": "var(--color-gray-600)", "--color-border-warning": "var(--color-amber-400)", "--color-border-success": "var(--color-green-400)", "--color-text-on-warning": "var(--color-gray-900)", "--color-fg-on-warning": "var(--color-gray-900)", "--color-alert-brand-bg": "color-mix(in srgb, var(--color-brand-400) 14%, transparent)", "--color-alert-brand-border": "color-mix(in srgb, var(--color-brand-400) 36%, transparent)", "--color-alert-brand-title": "var(--color-brand-300)", "--color-alert-brand-icon": "var(--color-brand-400)", "--color-alert-error-bg": "color-mix(in srgb, var(--color-rose-400) 14%, transparent)", "--color-alert-error-border": "color-mix(in srgb, var(--color-rose-400) 36%, transparent)", "--color-alert-error-title": "var(--color-rose-300)", "--color-alert-error-icon": "var(--color-rose-400)", "--color-alert-warning-bg": "color-mix(in srgb, var(--color-amber-400) 14%, transparent)", "--color-alert-warning-border": "color-mix(in srgb, var(--color-amber-400) 36%, transparent)", "--color-alert-warning-title": "var(--color-amber-300)", "--color-alert-warning-icon": "var(--color-amber-400)", "--color-alert-success-bg": "color-mix(in srgb, var(--color-green-400) 14%, transparent)", "--color-alert-success-border": "color-mix(in srgb, var(--color-green-400) 36%, transparent)", "--color-alert-success-title": "var(--color-green-300)", "--color-alert-success-icon": "var(--color-green-400)", "--color-alert-gray-bg": "color-mix(in srgb, var(--color-gray-400) 14%, transparent)", "--color-alert-gray-border": "color-mix(in srgb, var(--color-gray-400) 36%, transparent)", "--color-alert-gray-title": "var(--color-gray-50)", "--color-alert-gray-icon": "var(--color-gray-400)", "--color-fg-contrast": "var(--color-white)", "--color-fg-contrast-inverse": "var(--color-black)", "--color-bg-ai-subtle": "color-mix(in srgb, color-mix(in srgb, var(--color-brand-400) 55%, var(--color-purple-400)) 12%, transparent)", "--color-border-ai": "color-mix(in srgb, color-mix(in srgb, var(--color-brand-400) 55%, var(--color-purple-400)) 40%, transparent)", "--color-text-ai": "color-mix(in srgb, var(--color-brand-300) 55%, var(--color-purple-300))", "--gradient-ai": "linear-gradient(135deg, var(--color-brand-400) 0%, color-mix(in srgb, var(--color-brand-400) 35%, var(--color-purple-400)) 55%, var(--color-pink-300) 100%)" } }, "@media (prefers-reduced-motion: reduce)": { ":root": { "--motion-stream-shimmer-duration": "0s", "--motion-stream-caret-blink": "0s" } }, "[data-brand=\"violet\"]": { "--color-brand-25": "var(--color-violet-25)", "--color-brand-50": "var(--color-violet-50)", "--color-brand-100": "var(--color-violet-100)", "--color-brand-200": "var(--color-violet-200)", "--color-brand-300": "var(--color-violet-300)", "--color-brand-400": "var(--color-violet-400)", "--color-brand-500": "var(--color-violet-500)", "--color-brand-600": "var(--color-violet-600)", "--color-brand-700": "var(--color-violet-700)", "--color-brand-800": "var(--color-violet-800)", "--color-brand-900": "var(--color-violet-900)", "--color-brand-950": "var(--color-violet-950)" }, "[data-radius=\"sharp\"]": { "--radius-none": "var(--size-0)", "--radius-xxs": "var(--size-0)", "--radius-xs": "var(--size-2)", "--radius-sm": "var(--size-2)", "--radius-md": "var(--size-4)", "--radius-lg": "var(--size-4)", "--radius-xl": "var(--size-6)", "--radius-2xl": "var(--size-8)", "--radius-3xl": "var(--size-10)", "--radius-4xl": "var(--size-12)", "--radius-full": "var(--size-9999)", "--radius-5xl": "var(--size-16)", "--radius-6xl": "var(--size-20)" }, "[data-radius=\"round\"]": { "--radius-none": "var(--size-0)", "--radius-xxs": "var(--size-4)", "--radius-xs": "var(--size-6)", "--radius-sm": "var(--size-8)", "--radius-md": "var(--size-12)", "--radius-lg": "var(--size-16)", "--radius-xl": "var(--size-20)", "--radius-2xl": "var(--size-24)", "--radius-3xl": "var(--size-32)", "--radius-4xl": "var(--size-40)", "--radius-full": "var(--size-9999)", "--radius-5xl": "var(--size-48)", "--radius-6xl": "var(--size-64)" }, "@media (max-width: 1023px)": { ":root": { "--layout-sm": "var(--size-32)", "--layout-md": "var(--size-40)", "--layout-lg": "var(--size-48)", "--layout-xl": "var(--size-48)", "--layout-2xl": "var(--size-56)", "--layout-3xl": "var(--size-64)", "--layout-4xl": "var(--size-72)", "--layout-5xl": "var(--size-80)", "--layout-6xl": "var(--size-120)", "--layout-7xl": "var(--size-160)", "--layout-8xl": "var(--size-160)", "--container-padding": "32px", "--container-max-width": "704px", "--section-padding": "72px", "--font-size-huge": "88px", "--line-height-huge": "100px", "--letter-spacing-huge": "-1.0px", "--font-size-h1": "52px", "--line-height-h1": "60px", "--letter-spacing-h1": "-1.0px", "--font-size-h2": "44px", "--line-height-h2": "52px", "--letter-spacing-h2": "-0.6px", "--font-size-h3": "36px", "--letter-spacing-h3": "-0.4px", "--font-size-h4": "30px" } }, "@media (max-width: 767px)": { ":root": { "--layout-xs": "var(--size-24)", "--layout-sm": "var(--size-24)", "--layout-md": "var(--size-32)", "--layout-lg": "var(--size-32)", "--layout-xl": "var(--size-40)", "--layout-2xl": "var(--size-40)", "--layout-3xl": "var(--size-40)", "--layout-4xl": "var(--size-56)", "--layout-5xl": "var(--size-56)", "--layout-6xl": "var(--size-80)", "--layout-7xl": "var(--size-80)", "--layout-8xl": "var(--size-80)", "--container-padding": "16px", "--container-max-width": "343px", "--section-padding": "56px", "--font-size-huge": "56px", "--line-height-huge": "64px", "--letter-spacing-huge": "-0.5px", "--font-size-h1": "40px", "--line-height-h1": "52px", "--letter-spacing-h1": "-0.5px", "--font-size-h2": "36px", "--line-height-h2": "48px", "--letter-spacing-h2": "-0.5px", "--font-size-h3": "32px", "--line-height-h3": "40px", "--letter-spacing-h3": "-0.25px", "--font-size-h4": "28px", "--line-height-h4": "36px" } }, ".text-headline-huge": { "font-family": "var(--font-family-title)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-huge)", "line-height": "var(--line-height-huge)", "letter-spacing": "-1.25px" }, ".text-headline-h1": { "font-family": "var(--font-family-title)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h1)", "line-height": "var(--line-height-h1)", "letter-spacing": "-1.25px" }, ".text-headline-h2": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-h2)", "line-height": "var(--line-height-h2)", "letter-spacing": "-0.75px" }, ".text-headline-h3": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-h3)", "line-height": "var(--line-height-h3)", "letter-spacing": "-0.5px" }, ".text-headline-h4": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-h4)", "line-height": "var(--line-height-h4)", "letter-spacing": "0" }, ".text-headline-h5": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-h5)", "line-height": "var(--line-height-h5)", "letter-spacing": "0" }, ".text-headline-h6": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-h6)", "line-height": "var(--line-height-h6)", "letter-spacing": "0" }, ".text-headline-subtitle": { "font-family": "var(--font-family-title)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-subtitle)", "line-height": "var(--line-height-subtitle)", "letter-spacing": "0" }, ".text-headline-overline": { "font-family": "var(--font-family-title)", "font-weight": "700", "font-style": "normal", "font-size": "var(--font-size-overline)", "line-height": "var(--line-height-overline)", "letter-spacing": "0.05em" }, ".text-content-body-leading": { "font-family": "var(--font-family-body)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "letter-spacing": "0" }, ".text-content-body-leading-bold": { "font-family": "var(--font-family-body)", "font-weight": "700", "font-style": "normal", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "letter-spacing": "0" }, ".text-content-body": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "letter-spacing": "0" }, ".text-content-body-bold": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "letter-spacing": "0" }, ".text-content-small": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "letter-spacing": "0" }, ".text-content-small-bold": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "letter-spacing": "0" }, ".text-content-tiny": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "letter-spacing": "0" }, ".text-content-tiny-bold": { "font-family": "var(--font-family-body)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "letter-spacing": "0" }, ".text-content-micro": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)", "letter-spacing": "0" }, ".text-content-micro-bold": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)", "letter-spacing": "0" }, ".text-components-button-xsmall": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-button-xs)", "line-height": "var(--line-height-button-xs)", "letter-spacing": "0" }, ".text-components-button-small": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-button-sm)", "line-height": "var(--line-height-button-sm)", "letter-spacing": "0" }, ".text-components-button-medium": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-button-md)", "line-height": "var(--line-height-button-md)", "letter-spacing": "0" }, ".text-components-button-large": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-button-lg)", "line-height": "var(--line-height-button-lg)", "letter-spacing": "0" }, ".text-components-button-xlarge": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-button-xl)", "line-height": "var(--line-height-button-xl)", "letter-spacing": "0" }, ".text-components-input-xsmall": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-input-xs)", "line-height": "var(--line-height-input-xs)", "letter-spacing": "0" }, ".text-components-input-small": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-input-sm)", "line-height": "var(--line-height-input-sm)", "letter-spacing": "0" }, ".text-components-input-medium": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-input-md)", "line-height": "var(--line-height-input-md)", "letter-spacing": "0" }, ".text-components-input-large": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-input-lg)", "line-height": "var(--line-height-input-lg)", "letter-spacing": "0" }, ".text-components-caption-xsmall": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-caption-xs)", "line-height": "var(--line-height-caption-xs)", "letter-spacing": "0" }, ".text-components-caption-small": { "font-family": "var(--font-family-body)", "font-weight": "500", "font-style": "normal", "font-size": "var(--font-size-caption-sm)", "line-height": "var(--line-height-caption-sm)", "letter-spacing": "0" }, ".text-components-caption-medium": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-caption-md)", "line-height": "var(--line-height-caption-md)", "letter-spacing": "0" }, ".text-components-caption-large": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-caption-lg)", "line-height": "var(--line-height-caption-lg)", "letter-spacing": "0" }, ".text-components-metric-value": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "36px", "line-height": "44px", "letter-spacing": "-0.72px" }, ".text-components-code": { "font-family": "\"Roboto Mono\", ui-monospace, monospace", "font-weight": "400", "font-style": "normal", "font-size": "14px", "line-height": "20px", "letter-spacing": "0" }, ".text-template-title": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "48px", "line-height": "56px", "letter-spacing": "-0.96px" }, ".text-template-heading": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "24px", "line-height": "32px", "letter-spacing": "-0.24px" }, ".text-template-eyebrow": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "14px", "line-height": "20px", "letter-spacing": "0.6px" }, ".text-web-display": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h1)", "line-height": "var(--line-height-h1)", "letter-spacing": "-0.02em" }, ".text-web-heading-xl": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h2)", "line-height": "var(--line-height-h2)", "letter-spacing": "-0.02em" }, ".text-web-heading-lg": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h3)", "line-height": "var(--line-height-h3)", "letter-spacing": "-0.01em" }, ".text-web-heading-md": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h4)", "line-height": "var(--line-height-h4)", "letter-spacing": "-0.01em" }, ".text-web-heading-sm": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h5)", "line-height": "var(--line-height-h5)", "letter-spacing": "0" }, ".text-web-heading-xs": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-h6)", "line-height": "var(--line-height-h6)", "letter-spacing": "0" }, ".text-web-body-lg": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "letter-spacing": "0" }, ".text-web-body": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "normal", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "letter-spacing": "0" }, ".text-web-eyebrow": { "font-family": "var(--font-family-body)", "font-weight": "600", "font-style": "normal", "font-size": "var(--font-size-overline)", "line-height": "var(--line-height-overline)", "letter-spacing": "0.04em" }, ".text-web-quote": { "font-family": "var(--font-family-body)", "font-weight": "400", "font-style": "italic", "font-size": "var(--font-size-h6)", "line-height": "var(--line-height-h6)", "letter-spacing": "0" } } }, { "name": "atomus-theme", "type": "registry:theme", "title": "Atomus theme for shadcn/ui", "description": "Maps the shadcn/ui variables (background, primary, muted, border, ring, sidebar, chart …) to Atomus semantic tokens, so shadcn/ui components follow the Atomus theme, brand and radius modes.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-tokens.json" ], "cssVars": { "theme": { "font-sans": "var(--font-family-body)", "font-heading": "var(--font-family-title)" }, "light": { "background": "var(--color-bg-primary)", "foreground": "var(--color-text-primary)", "card": "var(--color-bg-primary)", "card-foreground": "var(--color-text-primary)", "popover": "var(--color-bg-primary)", "popover-foreground": "var(--color-text-primary)", "primary": "var(--color-bg-brand-solid)", "primary-foreground": "var(--color-text-on-brand)", "secondary": "var(--color-bg-secondary)", "secondary-foreground": "var(--color-text-primary)", "muted": "var(--color-bg-tertiary)", "muted-foreground": "var(--color-text-tertiary)", "accent": "var(--color-bg-brand-subtle)", "accent-foreground": "var(--color-text-brand)", "destructive": "var(--color-bg-error-solid)", "destructive-foreground": "var(--color-text-white)", "border": "var(--color-border-secondary)", "input": "var(--color-border-primary)", "ring": "var(--color-border-focus)", "chart-1": "var(--color-brand-600)", "chart-2": "var(--color-brand-400)", "chart-3": "var(--color-brand-200)", "chart-4": "var(--color-gray-400)", "chart-5": "var(--color-gray-200)", "sidebar": "var(--color-bg-secondary)", "sidebar-foreground": "var(--color-text-secondary)", "sidebar-primary": "var(--color-bg-brand-solid)", "sidebar-primary-foreground": "var(--color-text-on-brand)", "sidebar-accent": "var(--color-bg-tertiary)", "sidebar-accent-foreground": "var(--color-text-primary)", "sidebar-border": "var(--color-border-secondary)", "sidebar-ring": "var(--color-border-focus)", "radius": "var(--radius-lg)" }, "dark": { "background": "var(--color-bg-primary)", "foreground": "var(--color-text-primary)", "card": "var(--color-bg-primary)", "card-foreground": "var(--color-text-primary)", "popover": "var(--color-bg-primary)", "popover-foreground": "var(--color-text-primary)", "primary": "var(--color-bg-brand-solid)", "primary-foreground": "var(--color-text-on-brand)", "secondary": "var(--color-bg-secondary)", "secondary-foreground": "var(--color-text-primary)", "muted": "var(--color-bg-tertiary)", "muted-foreground": "var(--color-text-tertiary)", "accent": "var(--color-bg-brand-subtle)", "accent-foreground": "var(--color-text-brand)", "destructive": "var(--color-bg-error-solid)", "destructive-foreground": "var(--color-text-white)", "border": "var(--color-border-secondary)", "input": "var(--color-border-primary)", "ring": "var(--color-border-focus)", "chart-1": "var(--color-brand-600)", "chart-2": "var(--color-brand-400)", "chart-3": "var(--color-brand-200)", "chart-4": "var(--color-gray-400)", "chart-5": "var(--color-gray-200)", "sidebar": "var(--color-bg-secondary)", "sidebar-foreground": "var(--color-text-secondary)", "sidebar-primary": "var(--color-bg-brand-solid)", "sidebar-primary-foreground": "var(--color-text-on-brand)", "sidebar-accent": "var(--color-bg-tertiary)", "sidebar-accent-foreground": "var(--color-text-primary)", "sidebar-border": "var(--color-border-secondary)", "sidebar-ring": "var(--color-border-focus)", "radius": "var(--radius-lg)" } }, "docs": "shadcn/ui variables now point at Atomus tokens. Dark mode: set data-theme=\"dark\" (or the .dark class) on .\nFor Tailwind's dark: variant to follow data-theme too, use: @custom-variant dark (&:where([data-theme=\"dark\"], [data-theme=\"dark\"] *, .dark, .dark *));\nBrand and shape: data-brand=\"violet\", data-radius=\"round\" | \"sharp\". Docs: https://docs.atomus.io/code/shadcn/", "categories": [ "theme" ], "meta": { "source": "shadcn/globals.css", "page": "https://docs.atomus.io/code/shadcn/" }, "author": "StanVision (https://stan.vision)", "css": { ":root, .dark, [data-theme], [data-brand]": { "background": "var(--color-bg-primary)", "foreground": "var(--color-text-primary)", "card": "var(--color-bg-primary)", "card-foreground": "var(--color-text-primary)", "popover": "var(--color-bg-primary)", "popover-foreground": "var(--color-text-primary)", "primary": "var(--color-bg-brand-solid)", "primary-foreground": "var(--color-text-on-brand)", "secondary": "var(--color-bg-secondary)", "secondary-foreground": "var(--color-text-primary)", "muted": "var(--color-bg-tertiary)", "muted-foreground": "var(--color-text-tertiary)", "accent": "var(--color-bg-brand-subtle)", "accent-foreground": "var(--color-text-brand)", "destructive": "var(--color-bg-error-solid)", "destructive-foreground": "var(--color-text-white)", "border": "var(--color-border-secondary)", "input": "var(--color-border-primary)", "ring": "var(--color-border-focus)", "chart-1": "var(--color-brand-600)", "chart-2": "var(--color-brand-400)", "chart-3": "var(--color-brand-200)", "chart-4": "var(--color-gray-400)", "chart-5": "var(--color-gray-200)", "sidebar": "var(--color-bg-secondary)", "sidebar-foreground": "var(--color-text-secondary)", "sidebar-primary": "var(--color-bg-brand-solid)", "sidebar-primary-foreground": "var(--color-text-on-brand)", "sidebar-accent": "var(--color-bg-tertiary)", "sidebar-accent-foreground": "var(--color-text-primary)", "sidebar-border": "var(--color-border-secondary)", "sidebar-ring": "var(--color-border-focus)", "radius": "var(--radius-lg)" }, "@layer base": { "*": { "@apply border-border outline-ring/50": {} }, "body": { "@apply bg-background text-foreground": {} } } } }, { "name": "atomus-utils", "type": "registry:lib", "title": "Atomus utils", "description": "Helpers the Atomus components share (cx, useFieldId, useOutsideClick) and their base CSS. Installed automatically with any component.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-tokens.json" ], "files": [ { "path": "atomus/utils.ts", "type": "registry:lib", "target": "components/atomus/utils.ts" } ], "categories": [ "lib" ], "meta": { "source": "react/src/utils.ts" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-icon": { "flex": "none", "display": "block" }, ".at-btn, .at-input input, .at-tab, .at-badge, .at-tag, .at-choice, .at-alert, .at-card, .at-metric, .at-empty, .at-progress, .at-field": { "font-family": "var(--font-family-body)" } } } }, { "name": "ai-internal", "type": "registry:lib", "title": "Agent kit helpers", "description": "Helpers and base CSS the Agent kit components share (controllable state, dismiss, durations, the AI mark). Installed automatically with any AI component.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/ai-internal.tsx", "type": "registry:lib", "target": "components/atomus/ai-internal.tsx" } ], "categories": [ "lib", "ai" ], "meta": { "source": "react/src/components/ai/internal.tsx" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-vh": { "position": "absolute !important", "width": "1px", "height": "1px", "margin": "0", "padding": "0", "overflow": "hidden", "clip": "rect(0 0 0 0)", "clip-path": "inset(50%)", "white-space": "nowrap", "border": "0" }, ".at-prompt-wrap, .at-msg, .at-reasoning, .at-tool, .at-approval, .at-sources, .at-cite, .at-suggestions, .at-model, .at-feedback, .at-ai-label, .at-ai-pop, .at-context, .at-stream, .at-shimmer": { "font-family": "var(--font-family-body)" }, ".at-code, .at-tool__name, .at-approval__tool": { "font-family": "ui-monospace, \"Roboto Mono\", SFMono-Regular, Menlo, Consolas, monospace" }, ".at-ai-mark": { "display": "inline-block", "flex": "none", "background": "var(--gradient-ai)", "-webkit-mask": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 1.5c.6 4.3 2.7 6.4 7 7-4.3.6-6.4 2.7-7 7-.6-4.3-2.7-6.4-7-7 4.3-.6 6.4-2.7 7-7zM15.5 12.5c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3z'/%3E%3C/svg%3E\") center / contain no-repeat", "mask": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8.5 1.5c.6 4.3 2.7 6.4 7 7-4.3.6-6.4 2.7-7 7-.6-4.3-2.7-6.4-7-7 4.3-.6 6.4-2.7 7-7zM15.5 12.5c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3z'/%3E%3C/svg%3E\") center / contain no-repeat" }, "@media (forced-colors: active)": { ".at-ai-mark": { "background": "CanvasText" } } } } }, { "name": "button", "type": "registry:ui", "title": "Button", "description": "Triggers an action. Five hierarchies (primary, secondary, outline, tertiary, link), five sizes, icons and a loading state.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/button.tsx", "type": "registry:ui", "target": "components/atomus/button.tsx" } ], "docs": "import { Button } from \"@/components/atomus/button\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/button/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Button.tsx", "exports": [ "Button" ], "page": "https://docs.atomus.io/components/button/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-btn": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "border": "1px solid transparent", "cursor": "pointer", "white-space": "nowrap", "font-weight": "var(--font-weight-semi-bold)", "text-decoration": "none", "transition": "background-color .15s, border-color .15s, color .15s, box-shadow .15s" }, ".at-btn--xs": { "height": "var(--size-xs)", "padding": "0 var(--spacing-md)", "gap": "var(--spacing-xs)", "border-radius": "var(--radius-xs)", "font-size": "var(--font-size-button-xs)", "line-height": "var(--line-height-button-xs)" }, ".at-btn--sm": { "height": "var(--size-sm)", "padding": "0 var(--spacing-lg)", "gap": "var(--spacing-sm)", "border-radius": "var(--radius-sm)", "font-size": "var(--font-size-button-sm)", "line-height": "var(--line-height-button-sm)" }, ".at-btn--md": { "height": "var(--size-md)", "padding": "0 var(--spacing-xl)", "gap": "var(--spacing-sm)", "border-radius": "var(--radius-sm)", "font-size": "var(--font-size-button-md)", "line-height": "var(--line-height-button-md)" }, ".at-btn--lg": { "height": "var(--size-lg)", "padding": "0 var(--spacing-2xl)", "gap": "var(--spacing-md)", "border-radius": "var(--radius-md)", "font-size": "var(--font-size-button-lg)", "line-height": "var(--line-height-button-lg)" }, ".at-btn--xl": { "height": "var(--size-xl)", "padding": "0 var(--spacing-3xl)", "gap": "var(--spacing-md)", "border-radius": "var(--radius-md)", "font-size": "var(--font-size-button-xl)", "line-height": "var(--line-height-button-xl)" }, ".at-btn--icon": { "padding": "0", "aspect-ratio": "1" }, ".at-btn--full": { "width": "100%" }, ".at-btn--primary": { "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)" }, ".at-btn--primary:hover": { "background": "var(--color-bg-brand-solid-hover)" }, ".at-btn--secondary": { "background": "var(--color-bg-tertiary)", "color": "var(--color-text-primary)" }, ".at-btn--secondary:hover": { "background": "var(--color-bg-tertiary-hover)" }, ".at-btn--outline": { "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)", "border-color": "var(--color-border-primary)" }, ".at-btn--outline:hover": { "background": "var(--color-bg-primary-hover)" }, ".at-btn--tertiary": { "background": "transparent", "color": "var(--color-text-secondary)" }, ".at-btn--tertiary:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-primary)" }, ".at-btn--link": { "background": "transparent", "color": "var(--color-text-brand)", "padding-left": "0", "padding-right": "0", "height": "auto" }, ".at-btn--link:hover": { "color": "var(--color-text-brand-hover)", "text-decoration": "underline" }, ".at-btn:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-btn:disabled": { "background": "var(--color-bg-disabled)", "color": "var(--color-text-disabled)", "border-color": "transparent", "cursor": "not-allowed" }, ".at-btn--link:disabled, .at-btn--tertiary:disabled": { "background": "transparent" }, ".at-spinner": { "width": "1em", "height": "1em", "border-radius": "var(--radius-full)", "border": "2px solid currentColor", "border-right-color": "transparent", "animation": "at-spin .7s linear infinite" }, "@keyframes at-spin": { "to": { "transform": "rotate(360deg)" } }, "@media (prefers-reduced-motion: reduce)": { ".at-spinner": { "animation-duration": "2s" } } } } }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "Short status or category label in five colours, light or solid, with an optional dot, icon or remove button.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/badge.tsx", "type": "registry:ui", "target": "components/atomus/badge.tsx" } ], "docs": "import { Badge } from \"@/components/atomus/badge\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/badge-tag/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Badge.tsx", "exports": [ "Badge" ], "page": "https://docs.atomus.io/components/badge-tag/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-badge": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "border-radius": "var(--radius-full)", "white-space": "nowrap", "font-weight": "var(--font-weight-semi-bold)" }, ".at-badge--sm": { "height": "20px", "padding": "0 var(--spacing-md)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-medium)" }, ".at-badge--md": { "height": "var(--size-xs)", "padding": "0 var(--spacing-md)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-badge--lg": { "height": "28px", "padding": "0 var(--spacing-lg)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-badge__dot": { "width": "6px", "height": "6px", "border-radius": "var(--radius-full)", "background": "var(--at-badge-dot, currentColor)" }, ".at-badge__close": { "display": "inline-flex", "padding": "0", "border": "0", "background": "none", "color": "inherit", "cursor": "pointer", "opacity": ".8" }, ".at-badge__close:hover": { "opacity": "1" }, ".at-badge--light-gray": { "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)", "--at-badge-dot": "var(--color-fg-tertiary)" }, ".at-badge--light-brand": { "background": "var(--color-bg-brand-subtle)", "color": "var(--color-text-brand)", "--at-badge-dot": "var(--color-fg-brand)" }, ".at-badge--light-error": { "background": "var(--color-bg-error-subtle)", "color": "var(--color-text-error)", "--at-badge-dot": "var(--color-fg-error)" }, ".at-badge--light-warning": { "background": "var(--color-bg-warning-subtle)", "color": "var(--color-text-warning)", "--at-badge-dot": "var(--color-fg-warning)" }, ".at-badge--light-success": { "background": "var(--color-bg-success-subtle)", "color": "var(--color-text-success)", "--at-badge-dot": "var(--color-fg-success)" }, ".at-badge--solid-gray": { "background": "var(--color-bg-inverse)", "color": "var(--color-text-inverse)" }, ".at-badge--solid-brand": { "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)" }, ".at-badge--solid-error": { "background": "var(--color-bg-error-solid)", "color": "var(--color-text-on-brand)" }, ".at-badge--solid-warning": { "background": "var(--color-bg-warning-solid)", "color": "var(--color-text-on-warning)" }, ".at-badge--solid-success": { "background": "var(--color-bg-success-solid)", "color": "var(--color-text-on-brand)" } } } }, { "name": "tag", "type": "registry:ui", "title": "Tag", "description": "Removable keyword chip for filters and multi-value fields.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/tag.tsx", "type": "registry:ui", "target": "components/atomus/tag.tsx" } ], "docs": "import { Tag } from \"@/components/atomus/tag\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/badge-tag/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Tag.tsx", "exports": [ "Tag" ], "page": "https://docs.atomus.io/components/badge-tag/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-tag": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "padding": "0 var(--spacing-md)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-sm)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-semi-bold)", "white-space": "nowrap" }, ".at-tag--sm": { "height": "var(--size-xs)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-medium)" }, ".at-tag--md": { "height": "28px", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-tag--lg": { "height": "var(--size-sm)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-tag__x": { "display": "inline-flex", "padding": "0", "border": "0", "background": "none", "color": "var(--color-fg-tertiary)", "cursor": "pointer", "border-radius": "var(--radius-xxs)" }, ".at-tag__x:hover": { "color": "var(--color-fg-secondary)" }, ".at-tag__x:focus-visible, .at-badge__close:focus-visible, .at-alert__close:focus-visible": { "outline": "2px solid var(--color-border-focus)", "outline-offset": "1px" } } } }, { "name": "input", "type": "registry:ui", "title": "Input", "description": "Text field with label, hint, error message, three sizes and leading/trailing icons.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/input.tsx", "type": "registry:ui", "target": "components/atomus/input.tsx" } ], "docs": "import { Input } from \"@/components/atomus/input\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/input/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Input.tsx", "exports": [ "Input" ], "page": "https://docs.atomus.io/components/input/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-field": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "min-width": "0" }, ".at-field__label": { "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-field__hint": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-field__hint--error": { "color": "var(--color-text-error)" }, ".at-input": { "display": "flex", "align-items": "center", "gap": "var(--spacing-md)", "padding": "0 var(--spacing-lg)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-fg-secondary)", "transition": "border-color .15s, box-shadow .15s" }, ".at-input--sm": { "height": "var(--size-sm)" }, ".at-input--md": { "height": "var(--size-md)" }, ".at-input--lg": { "height": "var(--size-lg)", "padding": "0 var(--spacing-xl)" }, ".at-input input": { "flex": "1", "min-width": "0", "height": "100%", "border": "0", "outline": "0", "padding": "0", "background": "transparent", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-input--lg input": { "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-input input::placeholder": { "color": "var(--color-text-placeholder)" }, ".at-input:focus-within": { "border-color": "var(--color-border-brand)", "box-shadow": "var(--shadow-focus-ring)" }, ".at-input--error": { "border-color": "var(--color-border-error)" }, ".at-input--error:focus-within": { "box-shadow": "0 0 0 4px var(--color-bg-error-subtle)" }, ".at-input--disabled": { "background": "var(--color-bg-disabled)", "border-color": "var(--color-border-disabled)" }, ".at-input--disabled input": { "color": "var(--color-text-disabled)", "cursor": "not-allowed" } } } }, { "name": "checkbox-radio-toggle", "type": "registry:ui", "title": "Checkbox, Radio, Toggle", "description": "Native checkbox (with indeterminate), radio and switch controls with label and description.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/checkbox-radio-toggle.tsx", "type": "registry:ui", "target": "components/atomus/checkbox-radio-toggle.tsx" } ], "docs": "import { Checkbox, Radio, Toggle } from \"@/components/atomus/checkbox-radio-toggle\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/checkbox-radio-toggle/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Choice.tsx", "exports": [ "Checkbox", "Radio", "Toggle" ], "page": "https://docs.atomus.io/components/checkbox-radio-toggle/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-choice": { "display": "inline-flex", "align-items": "flex-start", "gap": "var(--spacing-md)", "cursor": "pointer" }, ".at-choice--disabled": { "cursor": "not-allowed" }, ".at-choice__text": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)" }, ".at-choice__label": { "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-choice__desc": { "color": "var(--color-text-tertiary)" }, ".at-choice--sm .at-choice__label, .at-choice--sm .at-choice__desc": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-choice--md .at-choice__label, .at-choice--md .at-choice__desc": { "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-choice--disabled .at-choice__label, .at-choice--disabled .at-choice__desc": { "color": "var(--color-text-disabled)" }, ".at-checkbox, .at-radio": { "appearance": "none", "flex": "none", "margin": "var(--spacing-xxs) 0 0", "border": "1px solid var(--color-border-primary)", "background": "var(--color-bg-primary) no-repeat center / 75%", "cursor": "inherit", "transition": "background-color .15s, border-color .15s" }, ".at-choice--sm .at-checkbox, .at-choice--sm .at-radio": { "width": "16px", "height": "16px" }, ".at-choice--md .at-checkbox, .at-choice--md .at-radio": { "width": "20px", "height": "20px" }, ".at-checkbox": { "border-radius": "var(--radius-xs)" }, ".at-radio": { "border-radius": "var(--radius-full)" }, ".at-checkbox:checked, .at-checkbox:indeterminate": { "background-color": "var(--color-bg-brand-solid)", "border-color": "var(--color-bg-brand-solid)" }, ".at-checkbox:checked": { "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E\")" }, ".at-checkbox:indeterminate": { "background-image": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E\")" }, ".at-radio:checked": { "border-color": "var(--color-bg-brand-solid)", "background-color": "var(--color-fg-on-brand)", "box-shadow": "inset 0 0 0 4px var(--color-bg-brand-solid)" }, ".at-choice--md .at-radio:checked": { "box-shadow": "inset 0 0 0 5px var(--color-bg-brand-solid)" }, ".at-checkbox:focus-visible, .at-radio:focus-visible, .at-toggle:focus-visible": { "outline": "none", "border-color": "var(--color-border-brand)", "box-shadow": "var(--shadow-focus-ring)" }, ".at-radio:checked:focus-visible": { "box-shadow": "inset 0 0 0 4px var(--color-bg-brand-solid), var(--shadow-focus-ring)" }, ".at-checkbox:disabled, .at-radio:disabled": { "background-color": "var(--color-bg-disabled)", "border-color": "var(--color-border-disabled)" }, ".at-toggle": { "appearance": "none", "flex": "none", "position": "relative", "margin": "0", "padding": "0", "border": "0", "background": "var(--color-bg-quaternary)", "cursor": "inherit", "transition": "background-color .15s" }, ".at-toggle::after": { "content": "''", "position": "absolute", "top": "2px", "left": "2px", "background": "var(--color-fg-on-brand)", "box-shadow": "var(--shadow-elevation-1)", "transition": "transform .15s" }, ".at-choice--sm .at-toggle": { "width": "36px", "height": "20px" }, ".at-choice--sm .at-toggle::after": { "width": "16px", "height": "16px" }, ".at-choice--sm .at-toggle:checked::after": { "transform": "translateX(16px)" }, ".at-choice--md .at-toggle": { "width": "44px", "height": "24px" }, ".at-choice--md .at-toggle::after": { "width": "20px", "height": "20px" }, ".at-choice--md .at-toggle:checked::after": { "transform": "translateX(20px)" }, ".at-toggle--pill, .at-toggle--pill::after": { "border-radius": "var(--radius-full)" }, ".at-toggle--square": { "border-radius": "var(--radius-xs)" }, ".at-toggle--square::after": { "border-radius": "var(--radius-xxs)" }, ".at-toggle:hover": { "background": "var(--color-bg-quaternary-hover)" }, ".at-toggle:checked": { "background": "var(--color-bg-brand-solid)" }, ".at-toggle:checked:hover": { "background": "var(--color-bg-brand-solid-hover)" }, ".at-toggle:disabled": { "background": "var(--color-bg-disabled)" }, ".at-toggle:disabled::after": { "background": "var(--color-bg-tertiary)", "box-shadow": "none" } } } }, { "name": "avatar", "type": "registry:ui", "title": "Avatar", "description": "Image, initials or icon avatar in six sizes, circle or rounded, with an online/away/offline status.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/avatar.tsx", "type": "registry:ui", "target": "components/atomus/avatar.tsx" } ], "docs": "import { Avatar } from \"@/components/atomus/avatar\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/avatar/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Avatar.tsx", "exports": [ "Avatar" ], "page": "https://docs.atomus.io/components/avatar/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-avatar": { "position": "relative", "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "background": "var(--color-bg-brand-subtle)", "color": "var(--color-text-brand)", "box-shadow": "inset 0 0 0 1px var(--color-border-secondary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-avatar img": { "width": "100%", "height": "100%", "border-radius": "inherit", "object-fit": "cover" }, ".at-avatar__icon": { "display": "inline-flex", "color": "var(--color-fg-brand)" }, ".at-avatar--circle": { "border-radius": "var(--radius-full)" }, ".at-avatar--xs": { "width": "var(--size-xs)", "height": "var(--size-xs)", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)" }, ".at-avatar--sm": { "width": "var(--size-sm)", "height": "var(--size-sm)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-avatar--md": { "width": "var(--size-md)", "height": "var(--size-md)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-avatar--lg": { "width": "var(--size-lg)", "height": "var(--size-lg)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-avatar--xl": { "width": "var(--size-xl)", "height": "var(--size-xl)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)" }, ".at-avatar--2xl": { "width": "var(--size-2xl)", "height": "var(--size-2xl)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)" }, ".at-avatar--rounded.at-avatar--xs": { "border-radius": "var(--radius-xs)" }, ".at-avatar--rounded.at-avatar--sm": { "border-radius": "var(--radius-sm)" }, ".at-avatar--rounded.at-avatar--md": { "border-radius": "var(--radius-md)" }, ".at-avatar--rounded.at-avatar--lg": { "border-radius": "var(--radius-lg)" }, ".at-avatar--rounded.at-avatar--xl": { "border-radius": "var(--radius-xl)" }, ".at-avatar--rounded.at-avatar--2xl": { "border-radius": "var(--radius-2xl)" }, ".at-avatar__status": { "position": "absolute", "right": "0", "bottom": "0", "width": "25%", "height": "25%", "min-width": "6px", "min-height": "6px", "border-radius": "var(--radius-full)", "box-shadow": "0 0 0 1.5px var(--color-bg-primary)" }, ".at-avatar__status--online": { "background": "var(--color-bg-success-solid)" }, ".at-avatar__status--away": { "background": "var(--color-bg-warning-solid)" }, ".at-avatar__status--offline": { "background": "var(--color-bg-quaternary)" } } } }, { "name": "alert", "type": "registry:ui", "title": "Alert", "description": "Inline message in five colours and three styles (subtle, outline, solid) with actions and dismiss.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/alert.tsx", "type": "registry:ui", "target": "components/atomus/alert.tsx" } ], "docs": "import { Alert } from \"@/components/atomus/alert\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/alert/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Alert.tsx", "exports": [ "Alert" ], "page": "https://docs.atomus.io/components/alert/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-alert": { "--at-alert-bg": "var(--color-alert-brand-bg)", "--at-alert-border": "var(--color-alert-brand-border)", "--at-alert-title": "var(--color-alert-brand-title)", "--at-alert-icon": "var(--color-alert-brand-icon)", "--at-alert-solid": "var(--color-bg-brand-solid)", "--at-alert-on-solid": "var(--color-text-on-brand)", "position": "relative", "display": "flex", "align-items": "flex-start", "gap": "var(--spacing-lg)", "padding": "var(--spacing-lg) var(--spacing-xl)", "border": "1px solid var(--at-alert-border)", "border-radius": "var(--radius-lg)", "background": "var(--at-alert-bg)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-alert--gray": { "--at-alert-bg": "var(--color-alert-gray-bg)", "--at-alert-border": "var(--color-alert-gray-border)", "--at-alert-title": "var(--color-alert-gray-title)", "--at-alert-icon": "var(--color-alert-gray-icon)", "--at-alert-solid": "var(--color-bg-inverse)", "--at-alert-on-solid": "var(--color-text-inverse)" }, ".at-alert--error": { "--at-alert-bg": "var(--color-alert-error-bg)", "--at-alert-border": "var(--color-alert-error-border)", "--at-alert-title": "var(--color-alert-error-title)", "--at-alert-icon": "var(--color-alert-error-icon)", "--at-alert-solid": "var(--color-bg-error-solid)", "--at-alert-on-solid": "var(--color-text-white)" }, ".at-alert--warning": { "--at-alert-bg": "var(--color-alert-warning-bg)", "--at-alert-border": "var(--color-alert-warning-border)", "--at-alert-title": "var(--color-alert-warning-title)", "--at-alert-icon": "var(--color-alert-warning-icon)", "--at-alert-solid": "var(--color-bg-warning-solid)", "--at-alert-on-solid": "var(--color-text-on-warning)" }, ".at-alert--success": { "--at-alert-bg": "var(--color-alert-success-bg)", "--at-alert-border": "var(--color-alert-success-border)", "--at-alert-title": "var(--color-alert-success-title)", "--at-alert-icon": "var(--color-alert-success-icon)", "--at-alert-solid": "var(--color-bg-success-solid)", "--at-alert-on-solid": "var(--color-text-white)" }, ".at-alert__icon": { "display": "inline-flex", "flex": "none", "color": "var(--at-alert-icon)" }, ".at-alert__icon svg": { "stroke-width": "1.9" }, ".at-alert__body": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)" }, ".at-alert__title": { "margin": "0", "color": "var(--at-alert-title)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-alert__text": { "color": "inherit" }, ".at-alert__text a": { "color": "var(--at-alert-title)", "font-weight": "var(--font-weight-medium)", "text-decoration": "underline", "text-underline-offset": "2px" }, ".at-alert__actions": { "display": "flex", "flex-wrap": "wrap", "align-items": "center", "gap": "var(--spacing-lg)", "margin-top": "var(--spacing-md)" }, ".at-alert__close": { "display": "inline-flex", "flex": "none", "align-items": "center", "justify-content": "center", "width": "var(--size-sm)", "height": "var(--size-sm)", "margin": "calc(var(--spacing-sm)*-1) calc(var(--spacing-sm)*-1) calc(var(--spacing-sm)*-1) 0", "padding": "0", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--at-alert-icon)", "cursor": "pointer", "transition": "background-color .15s" }, ".at-alert__close:hover": { "background": "color-mix(in srgb,currentColor 12%,transparent)" }, ".at-alert .at-btn--link,.at-alert .at-btn--link:hover": { "color": "var(--at-alert-title)" }, ".at-alert .at-btn--tertiary": { "color": "var(--at-alert-title)" }, ".at-alert .at-btn--tertiary:hover": { "color": "var(--at-alert-title)", "background": "color-mix(in srgb,currentColor 10%,transparent)" }, ".at-alert--outline": { "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-1)" }, ".at-alert--solid": { "--at-alert-title": "var(--at-alert-on-solid)", "--at-alert-icon": "var(--at-alert-on-solid)", "background": "var(--at-alert-solid)", "border-color": "transparent", "color": "var(--at-alert-on-solid)" }, ".at-alert--solid .at-btn--link,.at-alert--solid .at-btn--tertiary": { "color": "inherit" }, ".at-alert--solid .at-alert__close:focus-visible,.at-alert--solid .at-btn:focus-visible": { "outline-color": "currentColor" }, ".at-alert--sm": { "gap": "var(--spacing-md)", "padding": "var(--spacing-md) var(--spacing-lg)", "border-radius": "var(--radius-md)" }, ".at-alert--sm .at-alert__icon svg,.at-alert--sm .at-alert__close svg": { "width": "16px", "height": "16px" }, ".at-alert--sm .at-alert__close": { "width": "var(--size-xs)", "height": "var(--size-xs)" }, ".at-alert--sm .at-alert__actions": { "margin-top": "var(--spacing-xs)" }, ".at-alert--flush": { "border-radius": "0", "border-inline": "0" }, "@media (forced-colors:active)": { ".at-alert": { "border-color": "CanvasText" }, ".at-alert__icon": { "color": "CanvasText" } } } } }, { "name": "card", "type": "registry:ui", "title": "Card", "description": "Surface with header (title, supporting text, action), content slot and footer; outlined, elevated or filled.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/card.tsx", "type": "registry:ui", "target": "components/atomus/card.tsx" } ], "docs": "import { Card } from \"@/components/atomus/card\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/card/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Card.tsx", "exports": [ "Card" ], "page": "https://docs.atomus.io/components/card/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-card": { "display": "flex", "flex-direction": "column", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)" }, ".at-card--pad-md": { "padding": "var(--spacing-xl)", "gap": "var(--spacing-xl)" }, ".at-card--pad-lg": { "padding": "var(--spacing-3xl)", "gap": "var(--spacing-2xl)" }, ".at-card--outlined": { "border": "1px solid var(--color-border-secondary)" }, ".at-card--elevated": { "box-shadow": "var(--shadow-elevation-2)" }, ".at-card--filled": { "background": "var(--color-bg-secondary)" }, ".at-card__header": { "display": "flex", "align-items": "flex-start", "justify-content": "space-between", "gap": "var(--spacing-xl)" }, ".at-card__heading": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)", "min-width": "0" }, ".at-card__title": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "font-weight": "var(--font-weight-bold)" }, ".at-card__supporting": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-card__action": { "display": "flex", "gap": "var(--spacing-md)", "flex": "none" }, ".at-card__content": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-card__footer": { "display": "flex", "justify-content": "flex-end", "gap": "var(--spacing-lg)" } } } }, { "name": "tabs", "type": "registry:ui", "title": "Tabs", "description": "Accessible tab list (arrow keys, Home, End) in underline, pill and segmented styles with counts.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/tabs.tsx", "type": "registry:ui", "target": "components/atomus/tabs.tsx" } ], "docs": "import { Tabs } from \"@/components/atomus/tabs\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/tabs/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Tabs.tsx", "exports": [ "Tabs" ], "page": "https://docs.atomus.io/components/tabs/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-tabs": { "display": "flex" }, ".at-tab": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "height": "var(--size-md)", "border": "0", "background": "none", "color": "var(--color-text-tertiary)", "cursor": "pointer", "white-space": "nowrap", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "font-weight": "var(--font-weight-semi-bold)", "transition": "color .15s, background-color .15s" }, ".at-tab:hover": { "color": "var(--color-text-secondary)" }, ".at-tab:disabled": { "color": "var(--color-text-disabled)", "cursor": "not-allowed" }, ".at-tab:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-radius": "var(--radius-sm)" }, ".at-tab__count": { "padding": "0 var(--spacing-sm)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "20px", "font-weight": "var(--font-weight-medium)" }, ".at-tab.is-active .at-tab__count": { "background": "var(--color-bg-brand-subtle)", "color": "var(--color-text-brand)" }, ".at-tabs--underline": { "gap": "var(--spacing-xl)", "box-shadow": "inset 0 -1px 0 var(--color-border-secondary)" }, ".at-tabs--underline .at-tab": { "padding": "0 var(--spacing-xs)", "box-shadow": "inset 0 -2px 0 transparent" }, ".at-tabs--underline .at-tab.is-active": { "color": "var(--color-text-brand)", "box-shadow": "inset 0 -2px 0 var(--color-border-brand)" }, ".at-tabs--pill": { "gap": "var(--spacing-xs)" }, ".at-tabs--pill .at-tab": { "padding": "0 var(--spacing-lg)", "border-radius": "var(--radius-sm)" }, ".at-tabs--pill .at-tab.is-active": { "background": "var(--color-bg-brand-subtle)", "color": "var(--color-text-brand)" }, ".at-tabs--segmented": { "display": "inline-flex", "align-self": "flex-start", "gap": "var(--spacing-xxs)", "padding": "var(--spacing-xs)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-tertiary)" }, ".at-tabs--segmented .at-tab": { "height": "var(--size-sm)", "padding": "0 var(--spacing-lg)", "border-radius": "var(--radius-sm)", "color": "var(--color-text-secondary)" }, ".at-tabs--segmented .at-tab:hover": { "color": "var(--color-text-primary)" }, ".at-tabs--segmented .at-tab:disabled": { "color": "var(--color-text-disabled)" }, ".at-tabs--segmented .at-tab.is-active": { "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)", "box-shadow": "var(--shadow-elevation-1)" }, ".at-tabs--segmented .at-tab.is-active .at-tab__count": { "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)" } } } }, { "name": "progress-bar", "type": "registry:ui", "title": "Progress bar", "description": "Determinate progress bar with the percentage on the right, below or hidden.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/progress-bar.tsx", "type": "registry:ui", "target": "components/atomus/progress-bar.tsx" } ], "docs": "import { ProgressBar } from \"@/components/atomus/progress-bar\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/progress-bar/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/ProgressBar.tsx", "exports": [ "ProgressBar" ], "page": "https://docs.atomus.io/components/progress-bar/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-progress": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)" }, ".at-progress--bottom": { "flex-direction": "column", "align-items": "flex-end", "gap": "var(--spacing-md)" }, ".at-progress--bottom .at-progress__track": { "flex": "none", "width": "100%" }, ".at-progress__track": { "flex": "1", "align-self": "stretch", "height": "8px", "border-radius": "var(--radius-full)", "background": "var(--color-bg-quaternary)", "overflow": "hidden" }, ".at-progress--right .at-progress__track, .at-progress--none .at-progress__track": { "align-self": "center" }, ".at-progress__fill": { "height": "100%", "border-radius": "inherit", "background": "var(--color-bg-brand-solid)", "transition": "width .3s" }, ".at-progress__value": { "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)", "font-variant-numeric": "tabular-nums" } } } }, { "name": "metric-card", "type": "registry:ui", "title": "Metric card", "description": "KPI card: label, value, change vs a period and an optional sparkline.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/metric-card.tsx", "type": "registry:ui", "target": "components/atomus/metric-card.tsx" } ], "docs": "import { MetricCard } from \"@/components/atomus/metric-card\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/metric-card/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/MetricCard.tsx", "exports": [ "MetricCard" ], "page": "https://docs.atomus.io/components/metric-card/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-metric": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)", "padding": "var(--spacing-3xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)" }, ".at-metric__header": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-md)" }, ".at-metric__label": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-metric__row": { "display": "flex", "align-items": "flex-end", "justify-content": "space-between", "gap": "var(--spacing-xl)", "min-width": "0" }, ".at-metric__main": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "flex": "1 1 auto", "min-width": "min-content" }, ".at-metric__value": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "36px", "line-height": "44px", "font-weight": "var(--font-weight-semi-bold)", "letter-spacing": "-0.72px", "font-variant-numeric": "tabular-nums", "white-space": "nowrap" }, ".at-metric__trend": { "display": "flex", "flex-wrap": "wrap", "align-items": "center", "column-gap": "var(--spacing-sm)", "row-gap": "var(--spacing-xxs)", "margin": "0", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-metric__change": { "display": "inline-flex", "white-space": "nowrap", "align-items": "center", "gap": "var(--spacing-xxs)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-metric__change--up": { "color": "var(--color-text-success)" }, ".at-metric__change--down": { "color": "var(--color-text-error)" }, ".at-metric__caption": { "color": "var(--color-text-tertiary)" }, ".at-metric__chart": { "display": "block", "flex": "0 1 112px", "min-width": "64px", "margin-left": "auto", "height": "56px", "overflow": "visible" }, ".at-metric__chart--up": { "color": "var(--color-fg-success)" }, ".at-metric__chart--down": { "color": "var(--color-fg-error)" }, ".at-metric__chart polyline": { "stroke": "currentColor" }, ".at-metric__chart-area": { "fill": "currentColor", "opacity": ".12" } } } }, { "name": "empty-state", "type": "registry:ui", "title": "Empty state", "description": "Featured icon, title, description and actions for empty lists, searches and first runs.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/empty-state.tsx", "type": "registry:ui", "target": "components/atomus/empty-state.tsx" } ], "docs": "import { EmptyState } from \"@/components/atomus/empty-state\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/empty-state/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/EmptyState.tsx", "exports": [ "EmptyState" ], "page": "https://docs.atomus.io/components/empty-state/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-empty": { "display": "flex", "flex-direction": "column", "align-items": "center", "text-align": "center", "margin": "0 auto" }, ".at-empty--sm": { "gap": "var(--spacing-xl)", "max-width": "320px" }, ".at-empty--md": { "gap": "var(--spacing-3xl)", "max-width": "480px" }, ".at-empty__icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "var(--size-lg)", "height": "var(--size-lg)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-tertiary)", "color": "var(--color-fg-secondary)" }, ".at-empty__text": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)" }, ".at-empty__title": { "margin": "0", "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-empty--sm .at-empty__title": { "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-empty--md .at-empty__title": { "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)" }, ".at-empty__desc": { "margin": "0", "color": "var(--color-text-tertiary)" }, ".at-empty--sm .at-empty__desc": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-empty--md .at-empty__desc": { "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-empty__actions": { "display": "flex", "flex-wrap": "wrap", "justify-content": "center", "gap": "var(--spacing-md)" } } } }, { "name": "icon", "type": "registry:ui", "title": "Icon", "description": "The small set of glyphs the Atomus components use internally (check, close, status, chevrons, navigation).", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/icon.tsx", "type": "registry:ui", "target": "components/atomus/icon.tsx" } ], "docs": "import { Icon } from \"@/components/atomus/icon\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/foundations/icons/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Icon.tsx", "exports": [ "Icon" ], "page": "https://docs.atomus.io/foundations/icons/" }, "author": "StanVision (https://stan.vision)" }, { "name": "dropdown-menu", "type": "registry:ui", "title": "Dropdown menu", "description": "Menu item rows and a keyboard-accessible dropdown / context menu with headings, separators and shortcuts.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/dropdown-menu.tsx", "type": "registry:ui", "target": "components/atomus/dropdown-menu.tsx" } ], "docs": "import { MenuItem, DropdownMenu } from \"@/components/atomus/dropdown-menu\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/dropdown-menu/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Menu.tsx", "exports": [ "MenuItem", "DropdownMenu" ], "page": "https://docs.atomus.io/components/dropdown-menu/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-dropdown, .at-select, .at-datepicker": { "position": "relative" }, ".at-menu": { "position": "absolute", "z-index": "50", "top": "calc(100% + var(--spacing-xs))", "min-width": "200px", "max-height": "320px", "overflow-y": "auto", "padding": "var(--spacing-xs)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-4)", "outline": "none", "font-family": "var(--font-family-body)" }, ".at-menu--start": { "left": "0" }, ".at-menu--end": { "right": "0" }, ".at-menu__sep": { "height": "1px", "margin": "var(--spacing-xs) calc(var(--spacing-xs) * -1)", "background": "var(--color-border-secondary)" }, ".at-menu__heading": { "padding": "var(--spacing-sm) var(--spacing-md)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-menu-item": { "display": "flex", "align-items": "center", "gap": "var(--spacing-md)", "padding": "0 var(--spacing-md)", "border-radius": "var(--radius-sm)", "color": "var(--color-text-secondary)", "cursor": "pointer", "user-select": "none", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-medium)" }, ".at-menu-item--sm": { "min-height": "var(--size-sm)" }, ".at-menu-item--md": { "min-height": "var(--size-md)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-menu-item__icon": { "display": "inline-flex", "color": "var(--color-fg-tertiary)" }, ".at-menu-item__label": { "flex": "1", "min-width": "0", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }, ".at-menu-item__shortcut": { "padding": "0 var(--spacing-xs)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xs)", "color": "var(--color-text-tertiary)", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-menu-item__check": { "color": "var(--color-fg-brand)" }, ".at-menu-item:hover, .at-menu-item.is-active": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-primary)" }, ".at-menu-item.is-selected": { "color": "var(--color-text-primary)" }, ".at-menu-item--destructive, .at-menu-item--destructive .at-menu-item__icon": { "color": "var(--color-text-error)" }, ".at-menu-item.is-disabled": { "color": "var(--color-text-disabled)", "cursor": "not-allowed", "background": "none" }, ".at-menu-item.is-disabled .at-menu-item__icon": { "color": "var(--color-fg-disabled)" } } } }, { "name": "select", "type": "registry:ui", "title": "Select", "description": "WAI-ARIA select-only combobox with label, hint, error, type-ahead and a hidden input for forms.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/dropdown-menu.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/select.tsx", "type": "registry:ui", "target": "components/atomus/select.tsx" } ], "docs": "import { Select } from \"@/components/atomus/select\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/select/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Select.tsx", "exports": [ "Select" ], "page": "https://docs.atomus.io/components/select/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-select__trigger": { "width": "100%", "cursor": "pointer", "text-align": "left", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "color": "var(--color-text-primary)" }, ".at-select__trigger:focus-visible, .at-select__trigger.is-open": { "outline": "none", "border-color": "var(--color-border-brand)", "box-shadow": "var(--shadow-focus-ring)" }, ".at-select__trigger:disabled": { "cursor": "not-allowed" }, ".at-select__value": { "flex": "1", "min-width": "0", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }, ".at-select__value.is-placeholder": { "color": "var(--color-text-placeholder)" }, ".at-input--disabled .at-select__value": { "color": "var(--color-text-disabled)" }, ".at-select__chevron": { "color": "var(--color-fg-tertiary)", "transition": "transform .15s" }, ".at-select__trigger.is-open .at-select__chevron": { "transform": "rotate(180deg)" }, ".at-anchor": { "position": "relative" }, ".at-select__list": { "right": "0" } } } }, { "name": "modal", "type": "registry:ui", "title": "Modal", "description": "Dialog on the native element (focus trap, Esc, inert background) in three sizes, with a destructive type.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/modal.tsx", "type": "registry:ui", "target": "components/atomus/modal.tsx" } ], "docs": "import { Modal } from \"@/components/atomus/modal\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/modal/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Modal.tsx", "exports": [ "Modal" ], "page": "https://docs.atomus.io/components/modal/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-modal": { "padding": "0", "border": "0", "background": "transparent", "max-width": "calc(100vw - 2 * var(--spacing-xl))", "width": "100%", "color": "var(--color-text-secondary)", "font-family": "var(--font-family-body)" }, ".at-modal--sm": { "width": "400px" }, ".at-modal--md": { "width": "544px" }, ".at-modal--lg": { "width": "720px" }, ".at-modal::backdrop": { "background": "var(--color-bg-overlay)", "backdrop-filter": "blur(8px)" }, ".at-modal__panel": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "padding": "var(--spacing-3xl)", "border-radius": "var(--radius-2xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-8)" }, ".at-modal__header": { "display": "flex", "align-items": "flex-start", "gap": "var(--spacing-xl)" }, ".at-modal__icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-lg)", "height": "var(--size-lg)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-brand-subtle)", "color": "var(--color-fg-brand)" }, ".at-modal--destructive .at-modal__icon": { "background": "var(--color-bg-error-subtle)", "color": "var(--color-fg-error)" }, ".at-modal__heading": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)" }, ".at-modal__title": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-modal__desc": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-modal__close": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-md)", "height": "var(--size-md)", "margin": "calc(var(--spacing-md) * -1) calc(var(--spacing-md) * -1) 0 0", "padding": "0", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-fg-tertiary)", "cursor": "pointer" }, ".at-modal__close:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-fg-secondary)" }, ".at-modal__close:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-modal__content": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-modal__actions": { "display": "flex", "justify-content": "flex-end", "gap": "var(--spacing-lg)" }, "@media (max-width: 767px)": { ".at-modal__actions": { "flex-direction": "column-reverse" }, ".at-modal__actions > *": { "width": "100%" } } } } }, { "name": "toast", "type": "registry:ui", "title": "Toast", "description": "Floating notifications: Toast, ToastProvider and the useToast() hook, with auto-dismiss that pauses on hover and focus.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/toast.tsx", "type": "registry:ui", "target": "components/atomus/toast.tsx" } ], "docs": "import { Toast, ToastProvider, useToast } from \"@/components/atomus/toast\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/toast/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Toast.tsx", "exports": [ "Toast", "ToastProvider", "useToast" ], "page": "https://docs.atomus.io/components/toast/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-toast": { "display": "flex", "align-items": "flex-start", "gap": "var(--spacing-lg)", "width": "400px", "max-width": "100%", "padding": "var(--spacing-xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-6)", "font-family": "var(--font-family-body)" }, ".at-toast__icon": { "display": "inline-flex", "flex": "none" }, ".at-toast--brand .at-toast__icon": { "color": "var(--color-fg-brand)" }, ".at-toast--gray .at-toast__icon": { "color": "var(--color-fg-secondary)" }, ".at-toast--error .at-toast__icon": { "color": "var(--color-fg-error)" }, ".at-toast--warning .at-toast__icon": { "color": "var(--color-fg-warning)" }, ".at-toast--success .at-toast__icon": { "color": "var(--color-fg-success)" }, ".at-toast__body": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)" }, ".at-toast__title": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-toast__desc": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-toast__action": { "margin-top": "var(--spacing-md)", "display": "flex", "gap": "var(--spacing-lg)" }, ".at-toast__close": { "display": "inline-flex", "padding": "var(--spacing-xs)", "margin": "calc(var(--spacing-xs) * -1)", "border": "0", "border-radius": "var(--radius-xs)", "background": "none", "color": "var(--color-fg-tertiary)", "cursor": "pointer" }, ".at-toast__close:hover": { "color": "var(--color-fg-secondary)" }, ".at-toaster": { "position": "fixed", "z-index": "100", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "padding": "var(--spacing-3xl)", "pointer-events": "none", "max-width": "100vw" }, ".at-toaster > *": { "pointer-events": "auto", "animation": "at-toast-in .2s ease-out" }, ".at-toaster--top-right": { "top": "0", "right": "0" }, ".at-toaster--bottom-right": { "bottom": "0", "right": "0" }, ".at-toaster--bottom-center": { "bottom": "0", "left": "50%", "transform": "translateX(-50%)" }, "@keyframes at-toast-in": { "from": { "opacity": "0", "transform": "translateY(8px)" } }, "@media (prefers-reduced-motion: reduce)": { ".at-toaster > *": { "animation": "none" } } } } }, { "name": "table", "type": "registry:ui", "title": "Table", "description": "Data table with sortable columns, row selection, supporting text, two densities and an empty slot.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json" ], "files": [ { "path": "atomus/table.tsx", "type": "registry:ui", "target": "components/atomus/table.tsx" } ], "docs": "import { Table } from \"@/components/atomus/table\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/table/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Table.tsx", "exports": [ "Table" ], "page": "https://docs.atomus.io/components/table/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-table-wrap": { "overflow-x": "auto", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)" }, ".at-table": { "width": "100%", "border-collapse": "collapse", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "color": "var(--color-text-tertiary)" }, ".at-table__caption": { "padding": "var(--spacing-xl) var(--spacing-3xl)", "text-align": "left", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "font-weight": "var(--font-weight-semi-bold)", "border-bottom": "1px solid var(--color-border-secondary)" }, ".at-table th": { "height": "44px", "padding": "0 var(--spacing-3xl)", "background": "var(--color-bg-secondary)", "border-bottom": "1px solid var(--color-border-secondary)", "color": "var(--color-text-tertiary)", "text-align": "left", "white-space": "nowrap", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-medium)" }, ".at-table td": { "padding": "0 var(--spacing-3xl)", "border-bottom": "1px solid var(--color-border-secondary)" }, ".at-table tbody tr:last-child td": { "border-bottom": "0" }, ".at-table--sm td": { "height": "52px" }, ".at-table--md td": { "height": "72px" }, ".at-table td.is-primary": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-medium)" }, ".at-table .is-end": { "text-align": "right" }, ".at-table__cell": { "display": "flex", "flex-direction": "column" }, ".at-table .is-end .at-table__cell": { "align-items": "flex-end" }, ".at-table__supporting": { "color": "var(--color-text-tertiary)", "font-weight": "var(--font-weight-normal)" }, ".at-table__check": { "width": "1px", "padding-right": "0 !important" }, ".at-table__check .at-checkbox": { "width": "16px", "height": "16px", "margin": "0", "display": "block" }, ".at-table__sort": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "padding": "0", "border": "0", "background": "none", "color": "inherit", "font": "inherit", "cursor": "pointer" }, ".at-table__sort:hover": { "color": "var(--color-text-secondary)" }, ".at-table__sort:focus-visible": { "outline": "2px solid var(--color-border-focus)", "outline-offset": "2px", "border-radius": "var(--radius-xxs)" }, ".at-table tbody tr:hover": { "background": "var(--color-bg-primary-hover)" }, ".at-table tbody tr.is-selected": { "background": "var(--color-bg-secondary)" }, ".at-table__empty": { "padding": "var(--layout-sm) var(--spacing-3xl) !important", "height": "auto !important" } } } }, { "name": "date-picker", "type": "registry:ui", "title": "Date picker", "description": "Calendar (single or range, keyboard navigation) and a date field that opens it in a popover.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/input.json", "https://docs.atomus.io/r/select.json" ], "files": [ { "path": "atomus/date-picker.tsx", "type": "registry:ui", "target": "components/atomus/date-picker.tsx" } ], "docs": "import { Calendar, DatePicker } from \"@/components/atomus/date-picker\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/date-picker/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/DatePicker.tsx", "exports": [ "Calendar", "DatePicker" ], "page": "https://docs.atomus.io/components/date-picker/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-calendar": { "display": "inline-flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "padding": "var(--spacing-2xl) var(--spacing-3xl)", "font-family": "var(--font-family-body)" }, ".at-calendar__head": { "display": "flex", "align-items": "center", "justify-content": "space-between" }, ".at-calendar__month": { "color": "var(--color-text-secondary)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-calendar__nav": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "var(--size-sm)", "height": "var(--size-sm)", "padding": "0", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-fg-tertiary)", "cursor": "pointer" }, ".at-calendar__nav:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-fg-secondary)" }, ".at-calendar__nav:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-calendar__grid": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)" }, ".at-calendar__row": { "display": "grid", "grid-template-columns": "repeat(7, var(--size-md))" }, ".at-calendar__weekday": { "display": "flex", "align-items": "center", "justify-content": "center", "height": "var(--size-md)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "font-weight": "var(--font-weight-medium)" }, ".at-day": { "position": "relative", "width": "var(--size-md)", "height": "var(--size-md)", "padding": "0", "border": "0", "border-radius": "var(--radius-full)", "background": "none", "color": "var(--color-text-secondary)", "cursor": "pointer", "font": "inherit", "font-size": "var(--font-size-small)", "font-weight": "var(--font-weight-medium)" }, ".at-day:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-primary)" }, ".at-day:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-day.is-outside": { "color": "var(--color-text-placeholder)" }, ".at-day.is-today::after": { "content": "''", "position": "absolute", "left": "50%", "bottom": "6px", "width": "5px", "height": "5px", "transform": "translateX(-50%)", "border-radius": "var(--radius-full)", "background": "var(--color-fg-brand)" }, ".at-day.is-in-range": { "border-radius": "0", "background": "var(--color-bg-tertiary)", "color": "var(--color-text-primary)" }, ".at-day.is-selected": { "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)" }, ".at-day.is-selected.is-today::after": { "background": "var(--color-fg-on-brand)" }, ".at-day:disabled": { "color": "var(--color-text-disabled)", "cursor": "not-allowed", "background": "none" }, ".at-datepicker__pop": { "position": "absolute", "z-index": "50", "top": "calc(100% + var(--spacing-xs))", "left": "0", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-6)" } } } }, { "name": "navigation", "type": "registry:ui", "title": "Navigation", "description": "NavItem, SidebarNavigation (280px or a 72px rail) and AppHeader for product apps.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/navigation.tsx", "type": "registry:ui", "target": "components/atomus/navigation.tsx" } ], "docs": "import { NavItem, SidebarNavigation, AppHeader } from \"@/components/atomus/navigation\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/navigation/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component" ], "meta": { "source": "react/src/components/Navigation.tsx", "exports": [ "NavItem", "SidebarNavigation", "AppHeader" ], "page": "https://docs.atomus.io/components/navigation/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-nav-item": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "min-height": "var(--size-md)", "padding": "0 var(--spacing-lg)", "border-radius": "var(--radius-md)", "color": "var(--color-text-secondary)", "text-decoration": "none", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "font-weight": "var(--font-weight-semi-bold)", "transition": "background-color .15s, color .15s" }, ".at-nav-item__icon": { "display": "inline-flex", "color": "var(--color-fg-tertiary)" }, ".at-nav-item__label": { "flex": "1", "min-width": "0", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }, ".at-nav-item__badge": { "padding": "0 var(--spacing-md)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "20px", "font-weight": "var(--font-weight-medium)" }, ".at-nav-item__chevron": { "color": "var(--color-fg-tertiary)" }, ".at-nav-item:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-primary)" }, ".at-nav-item.is-active": { "background": "var(--color-bg-tertiary)", "color": "var(--color-text-primary)" }, ".at-nav-item.is-active .at-nav-item__icon": { "color": "var(--color-fg-secondary)" }, ".at-nav-item:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-nav-item.is-collapsed": { "justify-content": "center", "width": "var(--size-md)", "height": "var(--size-md)", "padding": "0" }, ".at-sidebar": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "width": "280px", "height": "100%", "padding": "var(--layout-xs) var(--spacing-xl) var(--spacing-3xl)", "border-right": "1px solid var(--color-border-secondary)", "background": "var(--color-bg-primary)", "box-sizing": "border-box" }, ".at-sidebar.is-collapsed": { "width": "72px", "padding-left": "var(--spacing-lg)", "padding-right": "var(--spacing-lg)", "align-items": "center" }, ".at-sidebar__header": { "padding": "0 var(--spacing-lg)" }, ".at-sidebar.is-collapsed .at-sidebar__header": { "padding": "0" }, ".at-sidebar__items": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)", "flex": "1" }, ".at-sidebar__footer": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "padding-top": "var(--spacing-3xl)", "border-top": "1px solid var(--color-border-secondary)" }, ".at-app-header": { "display": "flex", "align-items": "center", "gap": "var(--layout-xs)", "height": "64px", "padding": "0 var(--layout-xs)", "border-bottom": "1px solid var(--color-border-secondary)", "background": "var(--color-bg-primary)", "font-family": "var(--font-family-body)", "box-sizing": "border-box" }, ".at-app-header__nav": { "display": "flex", "align-items": "center", "gap": "var(--spacing-xxs)", "flex": "1" }, ".at-app-header__nav .at-nav-item": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-app-header__actions": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "margin-left": "auto" }, "@media (max-width: 767px)": { ".at-app-header": { "padding": "0 var(--spacing-xl)", "height": "64px" }, ".at-app-header__nav": { "display": "none" } } } } }, { "name": "ai-prompt-input", "type": "registry:ui", "title": "Prompt input", "description": "Chat composer: auto-growing text, attachments, a toolbar slot, Send that turns into Stop while streaming, and / and @ menus.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-prompt-input.tsx", "type": "registry:ui", "target": "components/atomus/ai-prompt-input.tsx" } ], "docs": "import { PromptInput } from \"@/components/atomus/ai-prompt-input\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-prompt-input/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/PromptInput.tsx", "exports": [ "PromptInput" ], "page": "https://docs.atomus.io/components/ai-prompt-input/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-prompt-wrap": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "width": "100%", "margin": "0" }, ".at-prompt": { "position": "relative", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)", "padding": "var(--spacing-md)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-2xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-2)", "cursor": "text", "transition": "box-shadow .2s, border-color .2s" }, ".at-prompt:focus-within": { "border-color": "transparent", "background": "linear-gradient(var(--color-bg-primary), var(--color-bg-primary)) padding-box, var(--gradient-ai) border-box", "box-shadow": "0 0 0 4px var(--color-bg-ai-subtle), var(--shadow-elevation-3)" }, ".at-prompt.is-busy": { "border-color": "transparent", "background": "linear-gradient(var(--color-bg-primary), var(--color-bg-primary)) padding-box, var(--gradient-ai) border-box" }, ".at-prompt.is-error": { "border-color": "var(--color-border-error)" }, ".at-prompt.is-disabled": { "background": "var(--color-bg-disabled)", "cursor": "not-allowed", "box-shadow": "none" }, ".at-prompt--lg": { "padding": "var(--spacing-lg)", "border-radius": "var(--radius-3xl)" }, ".at-prompt__textarea": { "display": "block", "width": "100%", "box-sizing": "border-box", "margin": "0", "padding": "var(--spacing-sm) var(--spacing-md)", "border": "0", "outline": "0", "background": "transparent", "color": "var(--color-text-primary)", "resize": "none", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-input-md)", "line-height": "var(--line-height-body)" }, ".at-prompt--lg .at-prompt__textarea": { "font-size": "var(--font-size-body)" }, ".at-prompt__textarea::placeholder": { "color": "var(--color-text-placeholder)" }, ".at-prompt__textarea:disabled": { "color": "var(--color-text-disabled)", "cursor": "not-allowed" }, ".at-prompt__bar": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-md)" }, ".at-prompt__tools, .at-prompt__actions": { "display": "flex", "align-items": "center", "gap": "var(--spacing-xs)", "min-width": "0" }, ".at-prompt__tools .at-btn--tertiary": { "color": "var(--color-fg-tertiary)" }, ".at-prompt__tools .at-btn--tertiary:hover": { "color": "var(--color-fg-primary)" }, ".at-prompt__send": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-sm)", "height": "var(--size-sm)", "padding": "0", "border": "0", "border-radius": "var(--radius-md)", "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)", "cursor": "pointer", "transition": "background-color .15s, transform .1s" }, ".at-prompt--lg .at-prompt__send": { "width": "36px", "height": "36px" }, ".at-prompt__send:hover:not(:disabled)": { "background": "var(--color-bg-brand-solid-hover)" }, ".at-prompt__send:active:not(:disabled)": { "transform": "scale(.94)" }, ".at-prompt__send:focus-visible": { "outline": "none", "box-shadow": "0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-border-focus)" }, ".at-prompt__send:disabled": { "background": "var(--color-bg-disabled)", "color": "var(--color-fg-disabled)", "cursor": "not-allowed" }, ".at-prompt__send--stop, .at-prompt__send--stop:hover:not(:disabled)": { "background": "var(--color-fg-contrast)", "color": "var(--color-fg-contrast-inverse)" }, ".at-prompt__stop": { "width": "10px", "height": "10px", "border-radius": "var(--radius-xxs)", "background": "currentColor" }, ".at-prompt__files": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "margin": "0", "padding": "var(--spacing-xs) var(--spacing-xs) var(--spacing-sm)", "list-style": "none" }, ".at-prompt__file": { "display": "flex", "align-items": "center", "gap": "var(--spacing-md)", "max-width": "240px", "padding": "var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-secondary)" }, ".at-prompt__file.is-error": { "border-color": "var(--color-border-error)" }, ".at-prompt__file-thumb": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-sm)", "height": "var(--size-sm)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-fg-tertiary)", "overflow": "hidden", "box-shadow": "inset 0 0 0 1px var(--color-border-secondary)" }, ".at-prompt__file-thumb img": { "width": "100%", "height": "100%", "object-fit": "cover" }, ".at-prompt__file-text": { "display": "flex", "flex-direction": "column", "min-width": "0" }, ".at-prompt__file-name": { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", "color": "var(--color-text-primary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-prompt__file-meta": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)" }, ".at-prompt__file.is-error .at-prompt__file-meta": { "color": "var(--color-text-error)" }, ".at-prompt__file-x": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-xs)", "height": "var(--size-xs)", "padding": "0", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-fg-tertiary)", "cursor": "pointer" }, ".at-prompt__file-x:hover": { "background": "var(--color-bg-tertiary)", "color": "var(--color-fg-secondary)" }, ".at-prompt__file-x:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-prompt__menu": { "top": "auto", "bottom": "calc(100% + var(--spacing-sm))", "left": "var(--spacing-md)", "width": "360px", "max-width": "calc(100% - 2 * var(--spacing-md))" }, ".at-prompt__option": { "min-height": "var(--size-md)" }, ".at-prompt__option-text": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "padding": "var(--spacing-xs) 0" }, ".at-prompt__option-label": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-medium)" }, ".at-prompt__option-desc": { "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-normal)" }, ".at-prompt__disclaimer": { "margin": "0", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "text-align": "center" }, "@media (forced-colors: active)": { ".at-prompt:focus-within": { "border-color": "Highlight" } } } } }, { "name": "ai-message", "type": "registry:ui", "title": "Message", "description": "One conversation turn (user, assistant, system or tool) with streaming, error and stopped states, copy, regenerate, edit and branches.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-label.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-message.tsx", "type": "registry:ui", "target": "components/atomus/ai-message.tsx" } ], "docs": "import { Message } from \"@/components/atomus/ai-message\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-message/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Message.tsx", "exports": [ "Message" ], "page": "https://docs.atomus.io/components/ai-message/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-msg": { "display": "flex", "gap": "var(--spacing-lg)", "width": "100%", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)" }, ".at-msg__avatar": { "flex": "none" }, ".at-msg__ai-avatar, .at-msg__tool-avatar": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "var(--size-sm)", "height": "var(--size-sm)", "border": "1px solid var(--color-border-ai)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-ai-subtle)" }, ".at-msg__tool-avatar": { "border-color": "var(--color-border-secondary)", "background": "var(--color-bg-secondary)", "color": "var(--color-fg-tertiary)" }, ".at-msg__main": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)" }, ".at-msg__header": { "display": "flex", "align-items": "center", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "min-height": "var(--size-sm)" }, ".at-msg__name": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-msg__time": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-msg__content": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "min-width": "0", "overflow-wrap": "anywhere" }, ".at-msg__content > p": { "margin": "0" }, ".at-msg--user": { "justify-content": "flex-end" }, ".at-msg--user .at-msg__main": { "align-items": "flex-end", "flex": "0 1 auto", "max-width": "min(80%, 640px)" }, ".at-msg--user .at-msg__header": { "min-height": "0" }, ".at-msg--user .at-msg__content": { "padding": "var(--spacing-md) var(--spacing-xl)", "border-radius": "var(--radius-2xl) var(--radius-2xl) var(--radius-sm) var(--radius-2xl)", "background": "var(--color-bg-tertiary)", "color": "var(--color-text-primary)" }, ".at-msg--system": { "justify-content": "center" }, ".at-msg__system": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "width": "100%", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "text-align": "center" }, ".at-msg__system::before, .at-msg__system::after": { "content": "''", "flex": "1", "min-width": "var(--spacing-xl)", "height": "1px", "background": "var(--color-border-secondary)" }, ".at-msg__system-text": { "flex": "0 1 auto" }, ".at-msg__system strong": { "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-msg--tool .at-msg__content": { "gap": "var(--spacing-md)" }, ".at-msg__notice": { "display": "flex", "align-items": "center", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "align-self": "flex-start", "padding": "var(--spacing-sm) var(--spacing-md)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-secondary)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-msg__notice--error": { "padding": "var(--spacing-md) var(--spacing-lg)", "border": "1px solid var(--color-alert-error-border)", "background": "var(--color-alert-error-bg)", "color": "var(--color-alert-error-title)" }, ".at-msg__notice--error > .at-icon": { "color": "var(--color-alert-error-icon)" }, ".at-msg__actions": { "display": "flex", "align-items": "center", "flex-wrap": "wrap", "gap": "var(--spacing-xxs)", "margin": "calc(var(--spacing-xs) * -1) 0 0 calc(var(--spacing-xs) * -1)", "color": "var(--color-fg-tertiary)" }, ".at-msg--user .at-msg__actions": { "margin": "calc(var(--spacing-xs) * -1) calc(var(--spacing-xs) * -1) 0 0", "justify-content": "flex-end" }, ".at-msg__actions .at-btn--tertiary": { "color": "var(--color-fg-tertiary)" }, ".at-msg__actions .at-btn--tertiary:hover": { "color": "var(--color-fg-primary)" }, ".at-msg__branch": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xxs)", "margin-right": "var(--spacing-xs)" }, ".at-msg__branch-count": { "min-width": "28px", "text-align": "center", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-variant-numeric": "tabular-nums" }, ".at-msg--hover-actions .at-msg__actions": { "opacity": "0", "transition": "opacity .15s" }, ".at-msg--hover-actions:hover .at-msg__actions, .at-msg--hover-actions:focus-within .at-msg__actions": { "opacity": "1" }, "@media (hover: none)": { ".at-msg--hover-actions .at-msg__actions": { "opacity": "1" } }, "@media (max-width: 767px)": { ".at-msg": { "gap": "var(--spacing-md)" }, ".at-msg--user .at-msg__main": { "max-width": "88%" } } } } }, { "name": "ai-streaming-text", "type": "registry:ui", "title": "Streaming text", "description": "A reply that renders as it streams, with a caret and batched screen-reader announcements, plus a shimmer for status lines.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json" ], "files": [ { "path": "atomus/ai-streaming-text.tsx", "type": "registry:ui", "target": "components/atomus/ai-streaming-text.tsx" } ], "docs": "import { StreamingText, Shimmer } from \"@/components/atomus/ai-streaming-text\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-streaming-text/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/StreamingText.tsx", "exports": [ "StreamingText", "Shimmer" ], "page": "https://docs.atomus.io/components/ai-streaming-text/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-shimmer": { "color": "var(--color-text-tertiary)" }, ".at-shimmer.is-active": { "background": "linear-gradient(90deg, var(--color-text-tertiary) 0%, var(--color-text-tertiary) 35%, var(--color-text-ai) 50%, var(--color-text-tertiary) 65%, var(--color-text-tertiary) 100%) 0 0 / 250% 100%", "-webkit-background-clip": "text", "background-clip": "text", "-webkit-text-fill-color": "transparent", "color": "transparent", "animation": "at-shimmer var(--motion-stream-shimmer-duration) linear infinite" }, "@keyframes at-shimmer": { "from": { "background-position": "100% 0" }, "to": { "background-position": "-150% 0" } }, ".at-stream__text": { "white-space": "pre-wrap", "overflow-wrap": "anywhere" }, ".at-stream__caret": { "display": "inline-block", "width": ".5em", "height": "1.1em", "margin-left": "var(--spacing-xxs)", "vertical-align": "-.2em", "border-radius": "var(--radius-xxs)", "background": "var(--gradient-ai)", "animation": "at-caret var(--motion-stream-caret-blink) steps(1, end) infinite" }, "@keyframes at-caret": { "50%": { "opacity": "0" } }, "@media (prefers-reduced-motion: reduce)": { ".at-shimmer.is-active": { "animation": "none", "background": "none", "-webkit-text-fill-color": "currentColor", "color": "var(--color-text-tertiary)" }, ".at-stream__caret": { "animation": "none" } }, "@media (forced-colors: active)": { ".at-shimmer.is-active": { "-webkit-text-fill-color": "CanvasText", "background": "none" }, ".at-stream__caret": { "background": "CanvasText" } } } } }, { "name": "ai-reasoning", "type": "registry:ui", "title": "Reasoning", "description": "Collapsible \"Thought for 12s\" disclosure with the agent's reasoning steps.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json", "https://docs.atomus.io/r/ai-streaming-text.json" ], "files": [ { "path": "atomus/ai-reasoning.tsx", "type": "registry:ui", "target": "components/atomus/ai-reasoning.tsx" } ], "docs": "import { Reasoning } from \"@/components/atomus/ai-reasoning\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-reasoning/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Reasoning.tsx", "exports": [ "Reasoning" ], "page": "https://docs.atomus.io/components/ai-reasoning/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-reasoning": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "align-items": "flex-start" }, ".at-reasoning__trigger": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "height": "28px", "margin-left": "calc(var(--spacing-sm) * -1)", "padding": "0 var(--spacing-sm)", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-text-tertiary)", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-medium)", "transition": "color .15s, background-color .15s" }, ".at-reasoning__trigger:hover:not(:disabled)": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-secondary)" }, ".at-reasoning__trigger:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-reasoning__trigger:disabled": { "cursor": "default" }, ".at-reasoning__icon": { "color": "var(--color-text-ai)" }, ".at-reasoning__chev": { "transition": "transform .15s" }, ".at-reasoning.is-open .at-reasoning__chev": { "transform": "rotate(180deg)" }, ".at-reasoning__body": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "margin-left": "var(--spacing-xs)", "padding": "var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xl)", "border-left": "2px solid var(--color-border-ai)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-reasoning__steps": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "margin": "0", "padding": "0", "list-style": "none" }, ".at-reasoning__step": { "display": "flex", "gap": "var(--spacing-md)" }, ".at-reasoning__dot": { "flex": "none", "width": "8px", "height": "8px", "margin-top": "var(--spacing-sm)", "border-radius": "var(--radius-full)", "background": "var(--color-fg-tertiary)" }, ".at-reasoning__step.is-done .at-reasoning__dot": { "background": "var(--color-text-ai)" }, ".at-reasoning__step.is-active .at-reasoning__dot": { "background": "var(--gradient-ai)", "box-shadow": "0 0 0 3px var(--color-bg-ai-subtle)" }, ".at-reasoning__step.is-pending .at-reasoning__dot": { "background": "transparent", "box-shadow": "inset 0 0 0 1.5px var(--color-fg-disabled)" }, ".at-reasoning__step.is-pending": { "color": "var(--color-text-placeholder)" }, ".at-reasoning__step-text": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)", "min-width": "0" }, ".at-reasoning__step-label": { "color": "var(--color-text-secondary)" }, ".at-reasoning__step.is-pending .at-reasoning__step-label": { "color": "var(--color-text-tertiary)" }, ".at-reasoning__step-detail": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-reasoning__text p": { "margin": "0 0 var(--spacing-md)" }, ".at-reasoning__text p:last-child": { "margin": "0" }, ".at-code": { "margin": "0", "max-height": "240px", "overflow": "auto", "padding": "var(--spacing-lg)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-secondary)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "white-space": "pre", "tab-size": "2" }, ".at-code:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" } } } }, { "name": "ai-tool-call", "type": "registry:ui", "title": "Tool call", "description": "One function call: name, status, duration, and its input and output as JSON.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-tool-call.tsx", "type": "registry:ui", "target": "components/atomus/ai-tool-call.tsx" } ], "docs": "import { ToolCall } from \"@/components/atomus/ai-tool-call\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-tool-call/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/ToolCall.tsx", "exports": [ "ToolCall" ], "page": "https://docs.atomus.io/components/ai-tool-call/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-tool": { "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-primary)", "overflow": "hidden", "transition": "border-color .15s, box-shadow .15s" }, ".at-tool.is-open": { "box-shadow": "var(--shadow-elevation-1)" }, ".at-tool--error": { "border-color": "var(--color-alert-error-border)" }, ".at-tool__head": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "width": "100%", "min-height": "var(--size-lg)", "padding": "var(--spacing-sm) var(--spacing-lg)", "border": "0", "background": "none", "color": "inherit", "cursor": "pointer", "text-align": "left", "font-family": "var(--font-family-body)" }, ".at-tool__head:hover:not(:disabled)": { "background": "var(--color-bg-primary-hover)" }, ".at-tool__head:disabled": { "cursor": "default" }, ".at-tool__head:focus-visible": { "outline": "none", "box-shadow": "inset 0 0 0 2px var(--color-border-focus)", "border-radius": "var(--radius-lg)" }, ".at-tool__icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "28px", "height": "28px", "border-radius": "var(--radius-sm)", "background": "var(--color-bg-tertiary)", "color": "var(--color-fg-secondary)" }, ".at-tool--running .at-tool__icon": { "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)" }, ".at-tool__title": { "flex": "1", "min-width": "0", "display": "flex", "align-items": "baseline", "flex-wrap": "wrap", "column-gap": "var(--spacing-md)" }, ".at-tool__label": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-tool__name": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-tool__meta": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-md)", "flex": "none", "color": "var(--color-fg-tertiary)" }, ".at-tool__duration": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-variant-numeric": "tabular-nums" }, ".at-tool__status": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "height": "22px", "padding": "0 var(--spacing-md) 0 var(--spacing-sm)", "border-radius": "var(--radius-full)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-medium)", "white-space": "nowrap" }, ".at-tool__status .at-spinner": { "width": "10px", "height": "10px", "border-width": "1.5px" }, ".at-tool__status--pending": { "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)" }, ".at-tool__status--running": { "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)" }, ".at-tool__status--success": { "background": "var(--color-bg-success-subtle)", "color": "var(--color-text-success)" }, ".at-tool__status--error": { "background": "var(--color-bg-error-subtle)", "color": "var(--color-text-error)" }, ".at-tool__chev": { "transition": "transform .15s" }, ".at-tool.is-open .at-tool__chev": { "transform": "rotate(180deg)" }, ".at-tool__body": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "padding": "var(--spacing-md) var(--spacing-lg) var(--spacing-lg)", "border-top": "1px solid var(--color-border-secondary)" }, ".at-tool__section": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-sm)", "min-width": "0" }, ".at-tool__section-label": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)", "font-weight": "var(--font-weight-semi-bold)", "letter-spacing": ".06em", "text-transform": "uppercase" }, ".at-tool__error": { "display": "flex", "gap": "var(--spacing-md)", "padding": "var(--spacing-md) var(--spacing-lg)", "border-radius": "var(--radius-md)", "background": "var(--color-alert-error-bg)", "color": "var(--color-alert-error-title)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-tool__error .at-icon": { "flex": "none", "margin-top": "var(--spacing-xxs)", "color": "var(--color-alert-error-icon)" }, "@media (max-width: 767px)": { ".at-tool__name, .at-tool__duration": { "display": "none" } } } } }, { "name": "ai-approval", "type": "registry:ui", "title": "Approval", "description": "Human-in-the-loop confirmation before an agent acts: risk level, edit then approve, deny, always allow.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/ai-approval.tsx", "type": "registry:ui", "target": "components/atomus/ai-approval.tsx" } ], "docs": "import { Approval } from \"@/components/atomus/ai-approval\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-approval/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Approval.tsx", "exports": [ "Approval" ], "page": "https://docs.atomus.io/components/ai-approval/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-approval": { "--at-approval-accent": "var(--color-alert-warning-icon)", "--at-approval-tint": "var(--color-alert-warning-bg)", "position": "relative", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)", "padding": "var(--spacing-xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-2)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "overflow": "hidden" }, ".at-approval::before": { "content": "''", "position": "absolute", "inset": "0 auto 0 0", "width": "3px", "background": "var(--at-approval-accent)" }, ".at-approval--low": { "--at-approval-accent": "var(--color-alert-success-icon)", "--at-approval-tint": "var(--color-alert-success-bg)" }, ".at-approval--high": { "--at-approval-accent": "var(--color-alert-error-icon)", "--at-approval-tint": "var(--color-alert-error-bg)", "border-color": "var(--color-alert-error-border)" }, ".at-approval.is-approved, .at-approval.is-denied": { "box-shadow": "none" }, ".at-approval.is-denied::before": { "background": "var(--color-border-primary)" }, ".at-approval.is-approved::before": { "background": "var(--color-fg-success)" }, ".at-approval__head": { "display": "flex", "gap": "var(--spacing-lg)" }, ".at-approval__icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "width": "var(--size-md)", "height": "var(--size-md)", "border-radius": "var(--radius-md)", "background": "var(--at-approval-tint)", "color": "var(--at-approval-accent)" }, ".at-approval__heading": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)" }, ".at-approval__eyebrow": { "display": "flex", "align-items": "center", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "margin": "0" }, ".at-approval__risk": { "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-approval__risk--low": { "color": "var(--color-text-success)" }, ".at-approval__risk--medium": { "color": "var(--color-text-warning)" }, ".at-approval__risk--high": { "color": "var(--color-text-error)" }, ".at-approval__tool": { "padding": "0 var(--spacing-sm)", "border-radius": "var(--radius-xs)", "background": "var(--color-bg-tertiary)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "20px" }, ".at-approval__title": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body)", "line-height": "var(--line-height-body)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-approval__desc": { "color": "var(--color-text-tertiary)" }, ".at-approval__details": { "padding": "var(--spacing-lg)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-secondary)" }, ".at-approval__preview": { "margin": "0", "color": "var(--color-text-secondary)", "white-space": "pre-wrap" }, ".at-approval__textarea": { "width": "100%", "box-sizing": "border-box", "padding": "var(--spacing-md) var(--spacing-lg)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)", "font": "inherit", "resize": "vertical" }, ".at-approval__textarea:focus": { "outline": "none", "border-color": "var(--color-border-brand)", "box-shadow": "var(--shadow-focus-ring)" }, ".at-approval__foot": { "display": "flex", "align-items": "center", "justify-content": "space-between", "flex-wrap": "wrap", "gap": "var(--spacing-lg)" }, ".at-approval__actions": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "margin-left": "auto" }, ".at-approval__outcome": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "margin": "0", "font-weight": "var(--font-weight-semi-bold)" }, ".at-approval__outcome--approved": { "color": "var(--color-text-success)" }, ".at-approval__outcome--denied": { "color": "var(--color-text-tertiary)" }, "@media (max-width: 767px)": { ".at-approval__actions": { "width": "100%" }, ".at-approval__actions > .at-btn": { "flex": "1" } } } } }, { "name": "ai-sources", "type": "registry:ui", "title": "Sources", "description": "Citations for an AI answer: a sources list or chips, and numbered inline citations with a preview.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-sources.tsx", "type": "registry:ui", "target": "components/atomus/ai-sources.tsx" } ], "docs": "import { Sources, InlineCitation } from \"@/components/atomus/ai-sources\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-sources/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Sources.tsx", "exports": [ "Sources", "InlineCitation" ], "page": "https://docs.atomus.io/components/ai-sources/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-sources": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "align-items": "flex-start" }, ".at-sources__trigger": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "height": "28px", "padding": "0 var(--spacing-md) 0 var(--spacing-xs)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-semi-bold)", "transition": "background-color .15s" }, ".at-sources__trigger:hover": { "background": "var(--color-bg-primary-hover)" }, ".at-sources__trigger:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-sources__stack": { "display": "inline-flex" }, ".at-sources__favicon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "20px", "height": "20px", "border-radius": "var(--radius-full)", "background": "var(--color-bg-tertiary)", "color": "var(--color-fg-tertiary)", "box-shadow": "0 0 0 2px var(--color-bg-primary)", "overflow": "hidden" }, ".at-sources__favicon + .at-sources__favicon": { "margin-left": "calc(var(--spacing-xs) * -1)" }, ".at-sources__favicon svg, .at-sources__favicon img": { "width": "12px", "height": "12px" }, ".at-sources__chev": { "color": "var(--color-fg-tertiary)", "transition": "transform .15s" }, ".at-sources.is-open .at-sources__chev": { "transform": "rotate(180deg)" }, ".at-sources__list": { "display": "grid", "grid-template-columns": "repeat(auto-fill, minmax(220px, 1fr))", "gap": "var(--spacing-md)", "width": "100%", "margin": "0", "padding": "0", "list-style": "none" }, ".at-sources--list .at-sources__list": { "grid-template-columns": "1fr" }, ".at-sources__item": { "display": "flex", "min-width": "0" }, ".at-sources__link": { "display": "flex", "align-items": "flex-start", "gap": "var(--spacing-md)", "width": "100%", "padding": "var(--spacing-md) var(--spacing-lg)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-primary)", "color": "inherit", "text-decoration": "none", "transition": "border-color .15s, background-color .15s" }, "a.at-sources__link:hover": { "border-color": "var(--color-border-primary)", "background": "var(--color-bg-primary-hover)" }, "a.at-sources__link:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-sources__item:target .at-sources__link": { "border-color": "var(--color-border-ai)", "background": "var(--color-bg-ai-subtle)" }, ".at-sources__num, .at-cite__chip": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none", "min-width": "18px", "height": "18px", "padding": "0 var(--spacing-xs)", "border-radius": "var(--radius-xs)", "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)", "box-shadow": "inset 0 0 0 1px var(--color-border-ai)", "font-size": "var(--font-size-micro)", "line-height": "1", "font-weight": "var(--font-weight-semi-bold)", "font-variant-numeric": "tabular-nums" }, ".at-sources__num": { "margin-top": "calc(var(--spacing-xxs) / 2)" }, ".at-sources__main": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)" }, ".at-sources__title": { "display": "-webkit-box", "-webkit-line-clamp": "2", "-webkit-box-orient": "vertical", "overflow": "hidden", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-sources__domain": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-sources__snippet": { "display": "-webkit-box", "-webkit-line-clamp": "2", "-webkit-box-orient": "vertical", "overflow": "hidden", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-sources__ext": { "flex": "none", "margin-top": "var(--spacing-xxs)", "color": "var(--color-fg-tertiary)" }, ".at-cite": { "position": "relative", "display": "inline-block", "margin": "0 calc(var(--spacing-xxs) / 2)", "vertical-align": "2px", "line-height": "1" }, ".at-cite__chip": { "text-decoration": "none", "cursor": "pointer", "transition": "background-color .15s, color .15s" }, ".at-cite__chip:hover, .at-cite__chip:focus-visible": { "background": "var(--color-text-ai)", "color": "var(--color-bg-primary)", "box-shadow": "none" }, ".at-cite__chip:focus-visible": { "outline": "2px solid var(--color-border-focus)", "outline-offset": "1px" }, ".at-cite__card": { "position": "absolute", "z-index": "60", "bottom": "calc(100% + var(--spacing-sm))", "left": "50%", "display": "none", "flex-direction": "column", "gap": "var(--spacing-xs)", "width": "280px", "max-width": "calc(100vw - 2 * var(--spacing-xl))", "padding": "var(--spacing-lg)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-6)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-normal)", "text-align": "left", "white-space": "normal", "transform": "translateX(-50%)", "pointer-events": "none" }, ".at-cite__card.is-open": { "display": "flex", "animation": "at-pop-in .12s ease-out" }, ".at-cite__domain": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "color": "var(--color-text-tertiary)" }, ".at-cite__title": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-cite__snippet": { "display": "-webkit-box", "-webkit-line-clamp": "3", "-webkit-box-orient": "vertical", "overflow": "hidden" }, "@keyframes at-pop-in": { "from": { "opacity": "0", "transform": "translate(-50%, 4px)" } }, "@media (prefers-reduced-motion: reduce)": { ".at-cite__card.is-open": { "animation": "none" } } } } }, { "name": "ai-suggestions", "type": "registry:ui", "title": "Suggestions", "description": "Prompt starters and follow-up prompts as chips or cards.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/ai-suggestions.tsx", "type": "registry:ui", "target": "components/atomus/ai-suggestions.tsx" } ], "docs": "import { Suggestions } from \"@/components/atomus/ai-suggestions\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-suggestions/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Suggestions.tsx", "exports": [ "Suggestions" ], "page": "https://docs.atomus.io/components/ai-suggestions/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-suggestions": { "position": "relative", "min-width": "0" }, ".at-suggestions__list": { "display": "flex", "gap": "var(--spacing-md)", "margin": "0", "padding": "var(--spacing-xxs)", "list-style": "none", "overflow-x": "auto", "scrollbar-width": "none", "scroll-snap-type": "x proximity", "-webkit-mask-image": "linear-gradient(90deg, var(--color-bg-primary) calc(100% - var(--spacing-3xl)), transparent 100%)", "mask-image": "linear-gradient(90deg, var(--color-bg-primary) calc(100% - var(--spacing-3xl)), transparent 100%)" }, ".at-suggestions__list::-webkit-scrollbar": { "display": "none" }, ".at-suggestions__list > li": { "flex": "none", "scroll-snap-align": "start" }, ".at-suggestions.is-wrap .at-suggestions__list": { "flex-wrap": "wrap", "overflow": "visible", "-webkit-mask-image": "none", "mask-image": "none" }, ".at-suggestion": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "height": "var(--size-sm)", "padding": "0 var(--spacing-md) 0 var(--spacing-lg)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)", "cursor": "pointer", "white-space": "nowrap", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-medium)", "transition": "border-color .15s, background-color .15s, color .15s" }, ".at-suggestion:hover": { "border-color": "var(--color-border-ai)", "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-primary)" }, ".at-suggestion:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-suggestion__icon": { "display": "inline-flex", "color": "var(--color-fg-tertiary)" }, ".at-suggestion__text": { "display": "flex", "flex-direction": "column", "min-width": "0", "text-align": "left" }, ".at-suggestion__go": { "color": "var(--color-fg-tertiary)", "opacity": ".7", "transition": "opacity .15s, transform .15s" }, ".at-suggestion:hover .at-suggestion__go": { "opacity": "1", "color": "var(--color-text-ai)", "transform": "translateY(-1px)" }, ".at-suggestions--cards .at-suggestions__list": { "display": "grid", "grid-template-columns": "repeat(auto-fit, minmax(200px, 1fr))", "overflow": "visible", "-webkit-mask-image": "none", "mask-image": "none" }, ".at-suggestions--cards .at-suggestion": { "position": "relative", "align-items": "flex-start", "width": "100%", "height": "100%", "min-height": "88px", "padding": "var(--spacing-lg) var(--spacing-xl)", "border-color": "var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "white-space": "normal", "box-shadow": "var(--shadow-elevation-1)", "gap": "var(--spacing-md)" }, ".at-suggestions--cards .at-suggestion__icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "var(--size-sm)", "height": "var(--size-sm)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)" }, ".at-suggestions--cards .at-suggestion__text": { "flex": "1", "gap": "var(--spacing-xxs)" }, ".at-suggestions--cards .at-suggestion__label": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-suggestion__desc": { "color": "var(--color-text-tertiary)", "font-weight": "var(--font-weight-normal)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-suggestions--cards .at-suggestion__go": { "position": "absolute", "top": "var(--spacing-lg)", "right": "var(--spacing-lg)" }, "@media (max-width: 767px)": { ".at-suggestions--cards .at-suggestions__list": { "grid-template-columns": "1fr" }, ".at-suggestions--cards .at-suggestion": { "min-height": "0" } } } } }, { "name": "ai-model-selector", "type": "registry:ui", "title": "Model selector", "description": "Listbox for picking a model, with provider, description, capabilities and a badge.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-model-selector.tsx", "type": "registry:ui", "target": "components/atomus/ai-model-selector.tsx" } ], "docs": "import { ModelSelector } from \"@/components/atomus/ai-model-selector\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-model-selector/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/ModelSelector.tsx", "exports": [ "ModelSelector" ], "page": "https://docs.atomus.io/components/ai-model-selector/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-model": { "position": "relative", "display": "inline-flex", "flex-direction": "column", "gap": "var(--spacing-md)", "min-width": "0" }, ".at-model__trigger": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "max-width": "100%", "padding": "0 var(--spacing-md)", "border": "1px solid transparent", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-text-secondary)", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)", "transition": "background-color .15s, color .15s" }, ".at-model--sm .at-model__trigger": { "height": "var(--size-sm)" }, ".at-model--md .at-model__trigger": { "height": "var(--size-md)", "padding": "0 var(--spacing-lg)" }, ".at-model--ghost .at-model__trigger:hover, .at-model__trigger.is-open": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-primary)" }, ".at-model--outline": { "display": "flex" }, ".at-model--outline .at-model__trigger": { "width": "100%", "border-color": "var(--color-border-primary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)" }, ".at-model--outline .at-model__value": { "flex": "1", "text-align": "left" }, ".at-model__trigger:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-model__trigger:disabled": { "color": "var(--color-text-disabled)", "cursor": "not-allowed" }, ".at-model__icon, .at-model__option-icon": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "flex": "none" }, ".at-model__value": { "min-width": "0", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" }, ".at-model__chev": { "flex": "none", "color": "var(--color-fg-tertiary)", "transition": "transform .15s" }, ".at-model__trigger.is-open .at-model__chev": { "transform": "rotate(180deg)" }, ".at-model__list": { "left": "0", "width": "320px", "max-width": "calc(100vw - 2 * var(--spacing-xl))", "max-height": "360px" }, ".at-model__list--up": { "top": "auto", "bottom": "calc(100% + var(--spacing-xs))" }, ".at-model__option": { "display": "flex", "align-items": "flex-start", "gap": "var(--spacing-md)", "padding": "var(--spacing-md)", "border-radius": "var(--radius-sm)", "color": "var(--color-text-secondary)", "cursor": "pointer" }, ".at-model__option.is-active": { "background": "var(--color-bg-primary-hover)" }, ".at-model__option.is-disabled": { "cursor": "not-allowed", "opacity": ".5" }, ".at-model__option-icon": { "width": "var(--size-xs)", "height": "var(--size-xs)", "border-radius": "var(--radius-sm)", "background": "var(--color-bg-tertiary)", "color": "var(--color-fg-secondary)" }, ".at-model__option-main": { "flex": "1", "min-width": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xxs)" }, ".at-model__option-name": { "display": "flex", "align-items": "center", "gap": "var(--spacing-sm)", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-model__badge": { "padding": "0 var(--spacing-sm)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)", "font-size": "var(--font-size-micro)", "line-height": "18px", "font-weight": "var(--font-weight-semi-bold)" }, ".at-model__option-desc": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-model__caps": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-xs)", "margin-top": "var(--spacing-xxs)" }, ".at-model__cap": { "padding": "0 var(--spacing-sm)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xs)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-micro)", "line-height": "16px", "font-weight": "var(--font-weight-medium)" }, ".at-model__check": { "flex": "none", "margin-top": "var(--spacing-xxs)", "color": "var(--color-fg-brand)" } } } }, { "name": "ai-feedback", "type": "registry:ui", "title": "Feedback", "description": "Thumbs up / down on an AI answer, with an optional reason form.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-feedback.tsx", "type": "registry:ui", "target": "components/atomus/ai-feedback.tsx" } ], "docs": "import { Feedback } from \"@/components/atomus/ai-feedback\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-feedback/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/Feedback.tsx", "exports": [ "Feedback" ], "page": "https://docs.atomus.io/components/ai-feedback/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-feedback": { "display": "inline-flex", "flex-direction": "column", "gap": "var(--spacing-md)", "align-items": "flex-start" }, ".at-feedback__thumbs": { "display": "inline-flex", "gap": "var(--spacing-xxs)" }, ".at-feedback__thumb.at-btn--tertiary": { "color": "var(--color-fg-tertiary)" }, ".at-feedback__thumb.at-btn--tertiary:hover": { "color": "var(--color-fg-primary)" }, ".at-feedback__thumb.is-on, .at-feedback__thumb.is-on:hover": { "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)" }, ".at-feedback__status:empty": { "display": "none" }, ".at-feedback__status": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-feedback__form": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "width": "min(440px, 100%)", "padding": "var(--spacing-xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-3)" }, ".at-feedback__legend": { "margin": "0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-feedback__reasons": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-sm)" }, ".at-feedback__reason": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "height": "28px", "padding": "0 var(--spacing-md)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-medium)" }, ".at-feedback__reason:hover": { "background": "var(--color-bg-primary-hover)" }, ".at-feedback__reason.is-on": { "border-color": "var(--color-border-brand)", "background": "var(--color-bg-brand-subtle)", "color": "var(--color-text-brand)" }, ".at-feedback__reason:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-feedback__comment": { "width": "100%", "box-sizing": "border-box", "padding": "var(--spacing-md) var(--spacing-lg)", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "resize": "vertical" }, ".at-feedback__comment::placeholder": { "color": "var(--color-text-placeholder)" }, ".at-feedback__comment:focus": { "outline": "none", "border-color": "var(--color-border-brand)", "box-shadow": "var(--shadow-focus-ring)" }, ".at-feedback__actions": { "display": "flex", "justify-content": "flex-end", "gap": "var(--spacing-md)" } } } }, { "name": "ai-label", "type": "registry:ui", "title": "AI label", "description": "Marks AI-generated content, with an explanation popover, the model name and an edited state.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-label.tsx", "type": "registry:ui", "target": "components/atomus/ai-label.tsx" } ], "docs": "import { AILabel } from \"@/components/atomus/ai-label\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-label/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/AILabel.tsx", "exports": [ "AILabel" ], "page": "https://docs.atomus.io/components/ai-label/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-ai-label-wrap": { "position": "relative", "display": "inline-flex", "vertical-align": "middle" }, ".at-ai-label": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-xs)", "padding": "0 var(--spacing-sm)", "border": "1px solid var(--color-border-ai)", "border-radius": "var(--radius-full)", "background": "var(--color-bg-ai-subtle)", "color": "var(--color-text-ai)", "font-weight": "var(--font-weight-semi-bold)", "white-space": "nowrap", "vertical-align": "middle" }, "button.at-ai-label": { "cursor": "pointer", "font-family": "var(--font-family-body)", "transition": "box-shadow .15s, border-color .15s" }, "button.at-ai-label:hover": { "border-color": "var(--color-text-ai)" }, "button.at-ai-label:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)", "border-color": "var(--color-border-focus)" }, ".at-ai-label--xs": { "height": "20px", "font-size": "var(--font-size-micro)", "line-height": "var(--line-height-micro)", "padding": "0 var(--spacing-sm) 0 var(--spacing-xs)" }, ".at-ai-label--sm": { "height": "var(--size-xs)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-ai-label--md": { "height": "28px", "padding": "0 var(--spacing-md)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".at-ai-label--inline": { "border-color": "transparent", "background": "none", "padding": "0", "height": "auto" }, ".at-ai-label--icon": { "border-color": "transparent", "background": "none", "padding": "var(--spacing-xxs)", "height": "auto" }, ".at-ai-label.is-edited": { "border-color": "var(--color-border-primary)", "background": "var(--color-bg-primary)", "color": "var(--color-text-secondary)" }, ".at-ai-label__edited": { "color": "var(--color-fg-tertiary)" }, ".at-ai-label__chev": { "opacity": ".7", "margin-left": "calc(var(--spacing-xxs) * -1)" }, ".at-ai-pop": { "position": "absolute", "z-index": "60", "top": "calc(100% + var(--spacing-sm))", "left": "0", "width": "300px", "max-width": "calc(100vw - 2 * var(--spacing-xl))", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "padding": "var(--spacing-xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-6)", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "text-align": "left", "white-space": "normal" }, ".at-ai-pop--end": { "left": "auto", "right": "0" }, ".at-ai-pop::before": { "content": "''", "position": "absolute", "inset": "0 0 auto", "height": "3px", "border-radius": "var(--radius-xl) var(--radius-xl) 0 0", "background": "var(--gradient-ai)" }, ".at-ai-pop__head": { "display": "flex", "align-items": "center", "gap": "var(--spacing-md)" }, ".at-ai-pop__title": { "margin": "0", "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-ai-pop__body p": { "margin": "0 0 var(--spacing-md)" }, ".at-ai-pop__body p:last-child": { "margin": "0" }, ".at-ai-pop__foot": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-md)", "padding-top": "var(--spacing-lg)", "border-top": "1px solid var(--color-border-secondary)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-ai-pop__model strong": { "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-semi-bold)" } } } }, { "name": "ai-context-meter", "type": "registry:ui", "title": "Context meter", "description": "How much of the model's context window a conversation uses, with a token breakdown and cost.", "registryDependencies": [ "https://docs.atomus.io/r/atomus-utils.json", "https://docs.atomus.io/r/ai-internal.json" ], "files": [ { "path": "atomus/ai-context-meter.tsx", "type": "registry:ui", "target": "components/atomus/ai-context-meter.tsx" } ], "docs": "import { ContextMeter } from \"@/components/atomus/ai-context-meter\";\nProps mirror the Figma component properties. Usage and React API: https://docs.atomus.io/components/ai-context-meter/\nPrefer the npm package instead? npm i @stanvision/atomus-react and import from \"@stanvision/atomus-react\".", "categories": [ "component", "ai" ], "meta": { "source": "react/src/components/ai/ContextMeter.tsx", "exports": [ "ContextMeter" ], "page": "https://docs.atomus.io/components/ai-context-meter/" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".at-context": { "position": "relative", "display": "inline-flex", "--at-context-fill": "var(--color-text-ai)" }, ".at-context.is-warning": { "--at-context-fill": "var(--color-fg-warning)" }, ".at-context.is-error": { "--at-context-fill": "var(--color-fg-error)" }, ".at-context--bar": { "display": "flex", "width": "100%" }, ".at-context__trigger": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-sm)", "height": "var(--size-sm)", "padding": "0 var(--spacing-md)", "border": "0", "border-radius": "var(--radius-sm)", "background": "none", "color": "var(--color-text-tertiary)", "cursor": "pointer", "font-family": "var(--font-family-body)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)", "font-weight": "var(--font-weight-semi-bold)", "font-variant-numeric": "tabular-nums" }, ".at-context__trigger:hover": { "background": "var(--color-bg-primary-hover)", "color": "var(--color-text-secondary)" }, ".at-context__trigger:focus-visible": { "outline": "none", "box-shadow": "var(--shadow-focus-ring)" }, ".at-context__ring": { "flex": "none", "fill": "none", "stroke-width": "2.5" }, ".at-context__ring-track": { "stroke": "var(--color-bg-quaternary)" }, ".at-context__ring-fill": { "stroke": "var(--at-context-fill)", "stroke-linecap": "round", "transition": "stroke-dashoffset .3s" }, ".at-context__pop": { "position": "absolute", "z-index": "60", "right": "0", "bottom": "calc(100% + var(--spacing-sm))", "width": "280px", "max-width": "calc(100vw - 2 * var(--spacing-xl))", "padding": "var(--spacing-xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-6)" }, ".at-context__pop--down": { "bottom": "auto", "top": "calc(100% + var(--spacing-sm))", "left": "0", "right": "auto" }, ".at-context__meter": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "width": "100%", "color": "var(--color-text-secondary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".at-context__row": { "display": "flex", "align-items": "baseline", "justify-content": "space-between", "gap": "var(--spacing-md)" }, ".at-context__label": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-context__nums": { "color": "var(--color-text-tertiary)", "font-variant-numeric": "tabular-nums" }, ".at-context__track": { "height": "6px", "border-radius": "var(--radius-full)", "background": "var(--color-bg-quaternary)", "overflow": "hidden" }, ".at-context__fill": { "display": "block", "height": "100%", "border-radius": "inherit", "background": "var(--at-context-fill)", "transition": "width .3s" }, ".at-context:not(.is-warning):not(.is-error) .at-context__fill": { "background": "var(--gradient-ai)" }, ".at-context__list": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)", "margin": "var(--spacing-xs) 0 0" }, ".at-context__item": { "display": "flex", "justify-content": "space-between", "gap": "var(--spacing-md)" }, ".at-context__item dt": { "color": "var(--color-text-tertiary)" }, ".at-context__item dd": { "margin": "0", "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-medium)", "font-variant-numeric": "tabular-nums" }, ".at-context__item--total": { "margin-top": "var(--spacing-xs)", "padding-top": "var(--spacing-sm)", "border-top": "1px solid var(--color-border-secondary)" }, ".at-context__item--total dd": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".at-context__row--cost": { "color": "var(--color-text-tertiary)" }, ".at-context__hint": { "margin": "0", "color": "var(--color-text-tertiary)" }, ".at-context.is-warning .at-context__hint": { "color": "var(--color-text-warning)" }, ".at-context.is-error .at-context__hint": { "color": "var(--color-text-error)" } } } }, { "name": "app-shell", "type": "registry:component", "title": "App shell", "description": "Product layout: sidebar navigation, app header and a scrolling main area. The app screen blocks are built on it.", "registryDependencies": [ "https://docs.atomus.io/r/navigation.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/blocks/app-shell.tsx", "type": "registry:component", "target": "components/atomus/blocks/app-shell.tsx" } ], "docs": "import { AppShell } from \"@/components/atomus/blocks/app-shell\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app" ], "meta": { "kind": "app", "component": "AppShell" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-shell": { "display": "grid", "grid-template-columns": "auto minmax(0, 1fr)", "min-height": "100vh", "background": "var(--color-bg-secondary)", "color": "var(--color-text-secondary)", "font-family": "var(--font-family-body)" }, ".ab-shell__sidebar": { "position": "sticky", "top": "0", "height": "100vh" }, ".ab-shell__body": { "display": "flex", "flex-direction": "column", "min-width": "0" }, ".ab-shell__menu": { "display": "none" }, ".ab-shell__search": { "width": "240px" }, ".ab-brand": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-md)", "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-bold)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)" }, ".ab-brand__mark": { "width": "var(--size-xs)", "height": "var(--size-xs)", "border-radius": "var(--radius-sm)", "background": "var(--color-bg-brand-solid)" }, ".ab-user": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "min-width": "0" }, ".ab-user__text": { "display": "flex", "flex-direction": "column", "min-width": "0", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".ab-user__name": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".ab-user__mail": { "color": "var(--color-text-tertiary)", "overflow": "hidden", "text-overflow": "ellipsis" }, ".ab-main": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "width": "100%", "max-width": "var(--container-max-width)", "margin": "0 auto", "padding": "var(--layout-xs) var(--layout-xs) var(--layout-md)", "box-sizing": "border-box" }, ".ab-page-header": { "display": "flex", "flex-wrap": "wrap", "align-items": "flex-end", "justify-content": "space-between", "gap": "var(--spacing-xl)" }, ".ab-page-header__text": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)", "min-width": "0" }, ".ab-page-header__title": { "margin": "0", "color": "var(--color-text-primary)" }, ".ab-page-header__desc": { "margin": "0", "color": "var(--color-text-tertiary)" }, ".ab-page-header__actions": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-lg)" }, "@media (max-width: 1023px)": { ".ab-shell": { "grid-template-columns": "minmax(0, 1fr)" }, ".ab-shell__sidebar": { "display": "none" }, ".ab-shell__menu": { "display": "inline-flex" } }, "@media (max-width: 767px)": { ".ab-shell__search": { "display": "none" }, ".ab-main": { "padding": "var(--spacing-3xl) var(--spacing-xl) var(--layout-xs)" } } } } }, { "name": "dashboard", "type": "registry:block", "title": "Dashboard", "description": "Dashboard screen: KPI metric cards with sparklines, a recent-activity table and a usage card inside the app shell.", "registryDependencies": [ "https://docs.atomus.io/r/app-shell.json", "https://docs.atomus.io/r/metric-card.json", "https://docs.atomus.io/r/table.json", "https://docs.atomus.io/r/card.json", "https://docs.atomus.io/r/badge.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/progress-bar.json", "https://docs.atomus.io/r/tabs.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/blocks/dashboard.tsx", "type": "registry:component", "target": "components/atomus/blocks/dashboard.tsx" } ], "docs": "import { Dashboard } from \"@/components/atomus/blocks/dashboard\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app" ], "meta": { "kind": "app", "component": "Dashboard" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-metrics": { "display": "grid", "grid-template-columns": "repeat(3, minmax(0, 1fr))", "gap": "var(--spacing-3xl)" }, ".ab-columns": { "display": "grid", "grid-template-columns": "minmax(0, 2fr) minmax(0, 1fr)", "gap": "var(--spacing-3xl)", "align-items": "start" }, ".ab-person": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-lg)" }, ".ab-usage": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)" }, ".ab-usage__row": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xs)", "color": "var(--color-text-secondary)" }, "@media (max-width: 1023px)": { ".ab-metrics": { "grid-template-columns": "repeat(2, minmax(0, 1fr))" }, ".ab-columns": { "grid-template-columns": "minmax(0, 1fr)" } }, "@media (max-width: 767px)": { ".ab-metrics": { "grid-template-columns": "minmax(0, 1fr)" } } } } }, { "name": "settings", "type": "registry:block", "title": "Settings", "description": "Account settings screen: tabs, profile form, notification toggles and a danger zone with a confirmation modal.", "registryDependencies": [ "https://docs.atomus.io/r/app-shell.json", "https://docs.atomus.io/r/tabs.json", "https://docs.atomus.io/r/card.json", "https://docs.atomus.io/r/input.json", "https://docs.atomus.io/r/select.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/modal.json", "https://docs.atomus.io/r/alert.json" ], "files": [ { "path": "atomus/blocks/settings.tsx", "type": "registry:component", "target": "components/atomus/blocks/settings.tsx" } ], "docs": "import { Settings } from \"@/components/atomus/blocks/settings\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app" ], "meta": { "kind": "app", "component": "Settings" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-settings": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "max-width": "800px" }, ".ab-form": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)" }, ".ab-form__row": { "display": "grid", "grid-template-columns": "repeat(2, minmax(0, 1fr))", "gap": "var(--spacing-3xl)" }, ".ab-form__avatar": { "display": "flex", "align-items": "center", "gap": "var(--spacing-xl)" }, "@media (max-width: 767px)": { ".ab-form__row": { "grid-template-columns": "minmax(0, 1fr)" } } } } }, { "name": "auth", "type": "registry:block", "title": "Sign in", "description": "Centered sign-in card for product apps: email and password, remember me, SSO button and a sign-up link.", "registryDependencies": [ "https://docs.atomus.io/r/card.json", "https://docs.atomus.io/r/input.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/alert.json" ], "files": [ { "path": "atomus/blocks/auth.tsx", "type": "registry:component", "target": "components/atomus/blocks/auth.tsx" } ], "docs": "import { Auth } from \"@/components/atomus/blocks/auth\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app" ], "meta": { "kind": "app", "component": "Auth" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-auth": { "display": "grid", "place-items": "center", "min-height": "100vh", "padding": "var(--layout-xs) var(--spacing-xl)", "background": "var(--color-bg-secondary)", "font-family": "var(--font-family-body)", "box-sizing": "border-box" }, ".ab-auth__card": { "width": "100%", "max-width": "440px" }, ".ab-auth__head": { "display": "flex", "flex-direction": "column", "align-items": "center", "gap": "var(--spacing-md)", "text-align": "center" }, ".ab-auth__title": { "margin": "var(--spacing-lg) 0 0", "color": "var(--color-text-primary)" }, ".ab-auth__lead": { "margin": "0", "color": "var(--color-text-tertiary)" }, ".ab-auth__form": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)" }, ".ab-auth__row": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-lg)" }, ".ab-auth__link": { "color": "var(--color-text-brand)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)", "text-decoration": "none" }, ".ab-auth__link:hover": { "color": "var(--color-text-brand-hover)", "text-decoration": "underline" }, ".ab-auth__foot": { "margin": "0", "text-align": "center", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" } } } }, { "name": "table-view", "type": "registry:block", "title": "Table view", "description": "List screen: page header, search and filters, a selectable sortable table with status badges and row actions, an empty state and pagination.", "registryDependencies": [ "https://docs.atomus.io/r/app-shell.json", "https://docs.atomus.io/r/table.json", "https://docs.atomus.io/r/input.json", "https://docs.atomus.io/r/select.json", "https://docs.atomus.io/r/badge.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/empty-state.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/blocks/table-view.tsx", "type": "registry:component", "target": "components/atomus/blocks/table-view.tsx" } ], "docs": "import { TableView } from \"@/components/atomus/blocks/table-view\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app" ], "meta": { "kind": "app", "component": "TableView" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-filters": { "display": "flex", "flex-wrap": "wrap", "align-items": "flex-end", "gap": "var(--spacing-lg)" }, ".ab-filters__search": { "flex": "1 1 280px", "max-width": "400px" }, ".ab-filters__select": { "width": "200px" }, ".ab-pagination": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-lg)" }, ".ab-pagination__label": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".ab-owner": { "display": "inline-flex", "align-items": "center", "gap": "var(--spacing-md)" }, ".ab-sr-only": { "position": "absolute", "width": "1px", "height": "1px", "padding": "0", "margin": "-1px", "overflow": "hidden", "clip": "rect(0, 0, 0, 0)", "white-space": "nowrap", "border": "0" } } } }, { "name": "ai-chat", "type": "registry:block", "title": "AI chat", "description": "AI chat screen built from the Conversation pattern: header with AI label and context meter, a role=\"log\" thread of Messages with reasoning, tool calls, approvals, streamed text and sources, a welcome state with prompt starters, and a docked Prompt input with a model selector. Bring your own AI SDK: it takes plain messages and a status.", "registryDependencies": [ "https://docs.atomus.io/r/ai-message.json", "https://docs.atomus.io/r/ai-streaming-text.json", "https://docs.atomus.io/r/ai-reasoning.json", "https://docs.atomus.io/r/ai-tool-call.json", "https://docs.atomus.io/r/ai-approval.json", "https://docs.atomus.io/r/ai-sources.json", "https://docs.atomus.io/r/ai-suggestions.json", "https://docs.atomus.io/r/ai-prompt-input.json", "https://docs.atomus.io/r/ai-model-selector.json", "https://docs.atomus.io/r/ai-feedback.json", "https://docs.atomus.io/r/ai-label.json", "https://docs.atomus.io/r/ai-context-meter.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/blocks/ai-chat.tsx", "type": "registry:component", "target": "components/atomus/blocks/ai-chat.tsx" } ], "docs": "import { AiChat } from \"@/components/atomus/blocks/ai-chat\";\nReplace the sample data with yours; every colour, space and radius is an Atomus token. Rules: https://docs.atomus.io/ai/rules/", "categories": [ "block", "app", "ai" ], "meta": { "kind": "app", "component": "AiChat" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ".ab-ai-chat": { "display": "flex", "flex-direction": "column", "height": "100vh", "min-height": "480px", "background": "var(--color-bg-primary)", "font-family": "var(--font-family-body)", "box-sizing": "border-box" }, ".ab-ai-chat__header": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-lg)", "padding": "var(--spacing-md) var(--spacing-xl)", "border-bottom": "1px solid var(--color-border-secondary)" }, ".ab-ai-chat__title": { "display": "flex", "align-items": "center", "gap": "var(--spacing-md)", "min-width": "0" }, ".ab-ai-chat__name": { "margin": "0", "min-width": "0", "overflow": "hidden", "text-overflow": "ellipsis", "white-space": "nowrap", "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)", "font-weight": "var(--font-weight-semi-bold)" }, ".ab-ai-chat__logo": { "flex": "none", "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "var(--size-xs)", "height": "var(--size-xs)", "border-radius": "var(--radius-md)", "background": "var(--gradient-ai)", "color": "var(--color-fg-on-brand)" }, ".ab-ai-chat__header-actions": { "display": "flex", "align-items": "center", "gap": "var(--spacing-xs)" }, ".ab-ai-chat__thread": { "flex": "1", "overflow-y": "auto", "padding": "var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl)", "outline": "none" }, ".ab-ai-chat__thread:focus-visible": { "box-shadow": "inset 0 0 0 2px var(--color-border-focus)" }, ".ab-ai-chat__messages": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "max-width": "720px", "margin": "0 auto" }, ".ab-ai-chat__messages p": { "margin": "0" }, ".ab-ai-chat__composer": { "width": "100%", "max-width": "768px", "margin": "0 auto", "padding": "var(--spacing-md) var(--spacing-3xl) var(--spacing-xl)", "box-sizing": "border-box" }, ".ab-ai-chat__welcome": { "display": "flex", "flex-direction": "column", "align-items": "center", "gap": "var(--spacing-lg)", "max-width": "640px", "margin": "var(--layout-xs) auto 0", "text-align": "center" }, ".ab-ai-chat__mark": { "display": "inline-flex", "align-items": "center", "justify-content": "center", "width": "56px", "height": "56px", "border": "1px solid var(--color-border-ai)", "border-radius": "var(--radius-xl)", "background": "var(--color-bg-ai-subtle)" }, ".ab-ai-chat__mark-icon": { "width": "28px", "height": "28px" }, ".ab-ai-chat__welcome-title": { "margin": "var(--spacing-md) 0 0", "color": "var(--color-text-primary)" }, ".ab-ai-chat__welcome-text": { "margin": "0 0 var(--spacing-xl)", "max-width": "460px", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".ab-ai-chat__welcome .at-suggestions": { "width": "100%", "text-align": "left" }, "@media (max-width: 767px)": { ".ab-ai-chat__header": { "padding": "var(--spacing-md) var(--spacing-lg)" }, ".ab-ai-chat__thread": { "padding": "var(--spacing-xl) var(--spacing-lg)" }, ".ab-ai-chat__composer": { "padding": "var(--spacing-sm) var(--spacing-lg) var(--spacing-lg)" } } } } }, { "name": "website-parts", "type": "registry:component", "title": "Website section parts", "description": "Layout building blocks for the Atomus website sections (Section, Head, Img, logo and brand marks) and the responsive section CSS. Installed with every website section.", "registryDependencies": [ "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/sections/parts.tsx", "type": "registry:component", "target": "components/atomus/sections/parts.tsx" } ], "categories": [ "website" ], "meta": { "source": "sites/docs/src/components/sections/parts.tsx" }, "author": "StanVision (https://stan.vision)", "css": { "@layer components": { ":where(.ws-section, .ws-header, .ws-footer, .ws-auth)": { "font-family": "var(--font-family-body)", "color": "var(--color-text-secondary)" }, ":where(.ws-section, .ws-header, .ws-footer, .ws-auth) p": { "margin": "0" }, ".ws-section": { "padding": "var(--section-padding) var(--container-padding)", "background": "var(--color-bg-primary)" }, ".ws-section--alt": { "background": "var(--color-bg-secondary)" }, ".ws-section--tight": { "padding-top": "var(--layout-xl)", "padding-bottom": "var(--layout-xl)" }, ".ws-container": { "width": "100%", "max-width": "var(--container-max-width)", "margin": "0 auto" }, ".ws-head": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)", "max-width": "768px", "margin-bottom": "var(--layout-xl)" }, ".ws-head--center": { "align-items": "center", "margin-inline": "auto", "text-align": "center" }, ".ws-eyebrow": { "color": "var(--color-text-brand)" }, ".ws-title": { "margin": "0", "color": "var(--color-text-primary)" }, ".ws-lead": { "color": "var(--color-text-tertiary)" }, ".ws-actions": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-lg)" }, ".ws-head--center .ws-actions": { "justify-content": "center" }, ".ws-grid": { "display": "grid", "gap": "var(--layout-xs)" }, ".ws-grid--2": { "grid-template-columns": "repeat(2, minmax(0, 1fr))" }, ".ws-grid--3": { "grid-template-columns": "repeat(3, minmax(0, 1fr))" }, ".ws-grid--4": { "grid-template-columns": "repeat(4, minmax(0, 1fr))" }, ".ws-split": { "display": "grid", "grid-template-columns": "repeat(2, minmax(0, 1fr))", "align-items": "center", "gap": "var(--layout-xl)" }, ".ws-img": { "position": "relative", "width": "100%", "aspect-ratio": "var(--ratio, 4 / 3)", "border-radius": "var(--radius-2xl)", "overflow": "hidden", "background": "linear-gradient(135deg, var(--color-brand-100), var(--color-brand-300) 55%, var(--color-brand-500))" }, ".ws-img--soft": { "background": "linear-gradient(160deg, var(--color-bg-tertiary), var(--color-bg-quaternary))" }, ".ws-img--warm": { "background": "linear-gradient(135deg, var(--color-amber-100), var(--color-rose-300))" }, ".ws-img--green": { "background": "linear-gradient(135deg, var(--color-green-100), var(--color-teal-300))" }, ".ws-img__ui": { "position": "absolute", "inset": "10% 8% -6% 8%", "border-radius": "var(--radius-xl) var(--radius-xl) 0 0", "background": "var(--color-bg-primary)", "box-shadow": "var(--shadow-elevation-8)", "display": "grid", "grid-template-columns": "22% 1fr", "gap": "4%", "padding": "3.5%" }, ".ws-img__ui i": { "display": "block", "border-radius": "var(--radius-md)", "background": "var(--color-bg-tertiary)" }, ".ws-img__ui i:nth-child(2)": { "display": "grid", "background": "none", "grid-template-rows": "18% 1fr", "gap": "6%" }, ".ws-img__ui b": { "display": "block", "border-radius": "var(--radius-md)", "background": "var(--color-bg-secondary)", "box-shadow": "inset 0 0 0 1px var(--color-border-secondary)" }, ".ws-img__ui b:first-child": { "background": "var(--color-brand-100)", "box-shadow": "none" }, ".ws-ficon": { "display": "inline-grid", "place-items": "center", "flex": "none", "width": "48px", "height": "48px", "border-radius": "var(--radius-lg)", "background": "var(--color-bg-brand-subtle)", "color": "var(--color-fg-brand)" }, ".ws-feature": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)" }, ".ws-feature__title": { "color": "var(--color-text-primary)" }, ".ws-checks": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)", "margin": "0", "padding": "0", "list-style": "none" }, ".ws-checks li": { "display": "flex", "gap": "var(--spacing-lg)", "align-items": "flex-start", "margin": "0" }, ".ws-check": { "display": "inline-grid", "place-items": "center", "flex": "none", "width": "24px", "height": "24px", "border-radius": "50%", "background": "var(--color-bg-success-subtle)", "color": "var(--color-fg-success)" }, ".ws-card": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)", "padding": "var(--spacing-3xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-2xl)", "background": "var(--color-bg-primary)" }, ".ws-card--filled": { "border-color": "transparent", "background": "var(--color-bg-secondary)" }, ".ws-stars": { "display": "inline-flex", "gap": "2px", "color": "var(--color-amber-400)" }, ".ws-person": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)" }, ".ws-person__name": { "color": "var(--color-text-primary)", "font-weight": "var(--font-weight-semi-bold)" }, ".ws-person__role": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".ws-logo": { "display": "inline-flex", "align-items": "center", "gap": "8px", "color": "var(--color-fg-tertiary)", "font-weight": "700", "font-size": "20px", "letter-spacing": "-0.02em", "white-space": "nowrap" }, ".ws-logo i": { "display": "inline-block", "width": "22px", "height": "22px", "border-radius": "6px", "background": "currentColor", "opacity": ".85" }, ".ws-logo--round i": { "border-radius": "50%" }, ".ws-logo--serif": { "font-family": "Georgia, 'Times New Roman', serif", "font-weight": "600", "font-style": "italic" }, ".ws-brand": { "display": "inline-flex", "align-items": "center", "gap": "10px", "color": "var(--color-text-primary)", "font-weight": "700", "font-size": "18px", "letter-spacing": ".14em" }, ".ws-brand i": { "display": "grid", "grid-template-columns": "repeat(2, 9px)", "gap": "2px" }, ".ws-brand i::before, .ws-brand i::after": { "content": "''", "width": "9px", "height": "9px", "border-radius": "50%", "background": "currentColor", "box-shadow": "0 11px 0 currentColor" }, ".ws-link": { "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "font-weight": "var(--font-weight-semi-bold)", "text-decoration": "none" }, ".ws-small": { "font-size": "var(--font-size-small)", "line-height": "var(--line-height-small)" }, ".ws-tiny": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)", "line-height": "var(--line-height-tiny)" }, ".ws-divider": { "height": "1px", "background": "var(--color-border-secondary)" }, ".ws-header": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-3xl)", "padding": "var(--spacing-xl) var(--container-padding)", "border-bottom": "1px solid var(--color-border-secondary)", "background": "var(--color-bg-primary)" }, ".ws-header__nav": { "display": "flex", "gap": "var(--spacing-3xl)" }, ".ws-header__menu": { "display": "none" }, ".ws-mobile-menu": { "display": "none" }, ".ws-footer": { "padding": "var(--layout-3xl) var(--container-padding) var(--layout-sm)", "background": "var(--color-bg-primary)" }, ".ws-footer__top": { "display": "grid", "grid-template-columns": "1.6fr repeat(4, 1fr)", "gap": "var(--layout-xs)" }, ".ws-footer__col": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-lg)" }, ".ws-footer__col b": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-small)" }, ".ws-footer__bottom": { "display": "flex", "justify-content": "space-between", "gap": "var(--spacing-xl)", "margin-top": "var(--layout-xl)", "padding-top": "var(--layout-xs)", "border-top": "1px solid var(--color-border-secondary)" }, ".ws-bento": { "display": "grid", "grid-template-columns": "repeat(3, minmax(0, 1fr))", "grid-auto-rows": "minmax(220px, auto)", "gap": "var(--spacing-3xl)" }, ".ws-bento .ws-card": { "justify-content": "space-between", "overflow": "hidden" }, ".ws-bento__wide": { "grid-column": "span 2" }, ".ws-bento__tall": { "grid-row": "span 2" }, ".ws-band": { "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)" }, ".ws-band .ws-title, .ws-band .ws-lead, .ws-band .ws-stat__value": { "color": "inherit" }, ".ws-band .ws-lead": { "opacity": ".8" }, ".ws-stat": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)" }, ".ws-stat__value": { "color": "var(--color-text-primary)" }, ".ws-stat__label": { "opacity": ".8" }, ".ws-price": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)", "padding": "var(--spacing-3xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-2xl)", "background": "var(--color-bg-primary)" }, ".ws-price--hl": { "border": "2px solid var(--color-border-brand)", "box-shadow": "var(--shadow-elevation-6)" }, ".ws-price__amount": { "display": "flex", "align-items": "baseline", "gap": "4px", "color": "var(--color-text-primary)" }, ".ws-toggle-wrap": { "display": "flex", "justify-content": "center", "margin-bottom": "var(--layout-sm)" }, ".ws-faq": { "border-bottom": "1px solid var(--color-border-secondary)" }, ".ws-faq summary": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-xl)", "padding": "var(--spacing-3xl) 0", "color": "var(--color-text-primary)", "font-size": "var(--font-size-body-leading)", "line-height": "var(--line-height-body-leading)", "font-weight": "var(--font-weight-semi-bold)", "list-style": "none", "cursor": "pointer" }, ".ws-faq summary::-webkit-details-marker": { "display": "none" }, ".ws-faq summary span": { "display": "inline-grid", "place-items": "center", "flex": "none", "width": "28px", "height": "28px", "border": "1px solid var(--color-border-primary)", "border-radius": "50%", "color": "var(--color-fg-tertiary)", "transition": "transform .2s" }, ".ws-faq[open] summary span": { "transform": "rotate(45deg)" }, ".ws-faq p": { "padding": "0 var(--layout-sm) var(--spacing-3xl) 0" }, ".ws-faq-list": { "max-width": "768px", "margin": "0 auto", "border-top": "1px solid var(--color-border-secondary)" }, ".ws-cta": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--layout-xs)", "padding": "var(--layout-md)", "border-radius": "var(--radius-3xl)", "background": "var(--color-bg-brand-solid)", "color": "var(--color-text-on-brand)" }, ".ws-cta .ws-title": { "color": "inherit" }, ".ws-cta .at-btn--secondary": { "background": "var(--color-white)", "color": "var(--color-gray-900)", "border-color": "var(--color-white)" }, ".ws-cta .at-btn--outline": { "background": "transparent", "color": "var(--color-white)", "border-color": "rgb(255 255 255 / .5)" }, ".ws-inline-form": { "display": "flex", "gap": "var(--spacing-lg)", "align-items": "flex-start" }, ".ws-inline-form .at-field": { "flex": "1", "min-width": "0" }, ".ws-post": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)" }, ".ws-post__title": { "color": "var(--color-text-primary)" }, ".ws-member": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)" }, ".ws-member .ws-img": { "--ratio": "1", "border-radius": "var(--radius-xl)" }, ".ws-tile": { "display": "inline-grid", "place-items": "center", "width": "48px", "height": "48px", "border-radius": "var(--radius-lg)", "color": "#fff", "font-weight": "700", "font-size": "20px" }, ".ws-form": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-3xl)" }, ".ws-form__row": { "display": "grid", "grid-template-columns": "1fr 1fr", "gap": "var(--spacing-3xl)" }, ".ws-textarea": { "display": "flex", "flex-direction": "column", "gap": "6px" }, ".ws-textarea label": { "color": "var(--color-text-secondary)", "font-size": "var(--font-size-small)", "font-weight": "var(--font-weight-medium)" }, ".ws-textarea textarea": { "min-height": "120px", "padding": "10px 14px", "border": "1px solid var(--color-border-primary)", "border-radius": "var(--radius-md)", "background": "var(--color-bg-primary)", "color": "var(--color-text-primary)", "font": "inherit", "resize": "none" }, ".ws-job": { "display": "flex", "align-items": "center", "justify-content": "space-between", "gap": "var(--spacing-3xl)", "padding": "var(--spacing-3xl)", "border": "1px solid var(--color-border-secondary)", "border-radius": "var(--radius-xl)" }, ".ws-job__meta": { "display": "flex", "flex-wrap": "wrap", "gap": "var(--spacing-md)", "margin-top": "var(--spacing-md)" }, ".ws-compare": { "width": "100%", "border-collapse": "collapse", "font-size": "var(--font-size-small)" }, ".ws-compare th, .ws-compare td": { "padding": "var(--spacing-xl) var(--spacing-3xl)", "border-bottom": "1px solid var(--color-border-secondary)", "text-align": "center" }, ".ws-compare th:first-child, .ws-compare td:first-child": { "text-align": "left" }, ".ws-compare thead th": { "color": "var(--color-text-primary)", "font-size": "var(--font-size-body)", "vertical-align": "bottom" }, ".ws-compare tbody th": { "color": "var(--color-text-secondary)", "font-weight": "var(--font-weight-normal)" }, ".ws-compare .ws-compare__group th": { "padding-top": "var(--spacing-3xl)", "color": "var(--color-text-brand)", "font-size": "var(--font-size-tiny)", "font-weight": "var(--font-weight-semi-bold)", "text-transform": "uppercase", "letter-spacing": ".04em" }, ".ws-compare__hl": { "background": "var(--color-bg-brand-subtle)" }, ".ws-yes": { "color": "var(--color-fg-success)" }, ".ws-no": { "color": "var(--color-fg-disabled)" }, ".ws-scroll": { "overflow-x": "auto" }, ".ws-404": { "display": "flex", "flex-direction": "column", "align-items": "center", "gap": "var(--spacing-3xl)", "text-align": "center" }, ".ws-404__code": { "color": "var(--color-text-brand)", "font-size": "160px", "line-height": "1", "font-weight": "700", "letter-spacing": "-0.04em" }, ".ws-search": { "width": "100%", "max-width": "480px" }, ".ws-article": { "max-width": "720px", "margin": "0 auto" }, ".ws-article > * + *": { "margin-top": "var(--spacing-3xl)" }, ".ws-article h3": { "margin": "var(--layout-xs) 0 0", "color": "var(--color-text-primary)" }, ".ws-article blockquote": { "margin": "var(--layout-xs) 0 0", "padding-left": "var(--spacing-3xl)", "border-left": "3px solid var(--color-border-brand)", "color": "var(--color-text-primary)" }, ".ws-legal": { "display": "grid", "grid-template-columns": "240px 1fr", "gap": "var(--layout-lg)", "align-items": "start" }, ".ws-toc": { "position": "sticky", "top": "0", "display": "flex", "flex-direction": "column", "gap": "var(--spacing-md)", "padding-left": "var(--spacing-xl)", "border-left": "1px solid var(--color-border-secondary)" }, ".ws-toc a": { "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-small)", "text-decoration": "none" }, ".ws-toc a:first-child": { "color": "var(--color-text-brand)", "font-weight": "var(--font-weight-semi-bold)" }, ".ws-auth": { "display": "grid", "grid-template-columns": "1fr 1fr", "min-height": "640px" }, ".ws-auth__form": { "display": "flex", "flex-direction": "column", "justify-content": "center", "gap": "var(--spacing-3xl)", "max-width": "400px", "width": "100%", "margin": "0 auto", "padding": "var(--layout-md) var(--container-padding)" }, ".ws-auth__aside": { "display": "flex", "flex-direction": "column", "justify-content": "flex-end", "gap": "var(--spacing-3xl)", "padding": "var(--layout-md)", "background": "linear-gradient(160deg, var(--color-brand-600), var(--color-brand-900))", "color": "var(--color-white)" }, ".ws-auth__aside .ws-title": { "color": "inherit" }, ".ws-or": { "display": "flex", "align-items": "center", "gap": "var(--spacing-lg)", "color": "var(--color-text-tertiary)", "font-size": "var(--font-size-tiny)" }, ".ws-or::before, .ws-or::after": { "content": "''", "flex": "1", "height": "1px", "background": "var(--color-border-secondary)" }, ".ws-press": { "display": "flex", "flex-direction": "column", "gap": "var(--spacing-xl)", "padding": "var(--spacing-3xl)", "border-left": "2px solid var(--color-border-secondary)" }, "@media (max-width: 1023px)": { ".ws-grid--3, .ws-grid--4": { "grid-template-columns": "repeat(2, minmax(0, 1fr))" }, ".ws-split": { "grid-template-columns": "1fr" }, ".ws-footer__top": { "grid-template-columns": "repeat(2, 1fr)" }, ".ws-footer__top > :first-child": { "grid-column": "1 / -1" }, ".ws-header__nav, .ws-header .ws-actions": { "display": "none" }, ".ws-header__menu": { "display": "inline-flex" }, ".ws-bento": { "grid-template-columns": "repeat(2, minmax(0, 1fr))" }, ".ws-bento__tall": { "grid-row": "auto" }, ".ws-cta": { "flex-direction": "column", "align-items": "flex-start" }, ".ws-legal": { "grid-template-columns": "1fr" }, ".ws-toc": { "position": "static" }, ".ws-auth": { "grid-template-columns": "1fr" }, ".ws-auth__aside": { "display": "none" }, ".ws-grid--pricing": { "grid-template-columns": "1fr", "max-width": "420px", "margin": "0 auto" } }, "@media (max-width: 767px)": { ".ws-grid--2, .ws-grid--3, .ws-grid--4, .ws-bento, .ws-form__row": { "grid-template-columns": "1fr" }, ".ws-bento__wide": { "grid-column": "auto" }, ".ws-footer__top": { "grid-template-columns": "1fr 1fr" }, ".ws-footer__bottom, .ws-job, .ws-inline-form": { "flex-direction": "column", "align-items": "stretch" }, ".ws-cta": { "padding": "var(--layout-xs) var(--spacing-3xl)", "border-radius": "var(--radius-2xl)" }, ".ws-404__code": { "font-size": "96px" }, ".ws-mobile-menu": { "display": "block" }, ".ws-grid--logos": { "grid-template-columns": "repeat(2, minmax(0, 1fr))" }, ".ws-actions .at-btn": { "flex": "1" } }, ".ws-split .ws-head": { "margin-bottom": "var(--layout-xs)" } } } }, { "name": "header-navigation", "type": "registry:block", "title": "Header navigation", "description": "Website section: Header navigation. Logo (links home); Primary links — 4 to 6, sentence case; Secondary action (Log in, tertiary) and primary CTA; Tablet and mobile: links and actions collapse into a menu button (Type = Mobile menu open shows the panel).", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/sections/header-navigation.tsx", "type": "registry:component", "target": "components/atomus/sections/header-navigation.tsx" } ], "docs": "import HeaderNavigation from \"@/components/atomus/sections/header-navigation\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#header-navigation", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Header navigation", "component": "HeaderNavigation" }, "author": "StanVision (https://stan.vision)" }, { "name": "footer", "type": "registry:block", "title": "Footer", "description": "Website section: Footer. Brand column: logo and one-line pitch; 4 link columns with a bold heading each; Bottom bar: copyright and legal links; Style = Dark sets data-theme=\"dark\" on the footer, so every token flips.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/footer.tsx", "type": "registry:component", "target": "components/atomus/sections/footer.tsx" } ], "docs": "import Footer from \"@/components/atomus/sections/footer\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#footer", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Footer", "component": "Footer" }, "author": "StanVision (https://stan.vision)" }, { "name": "hero-section", "type": "registry:block", "title": "Hero section", "description": "Website section: Hero section. Badge or eyebrow (optional); Headline — Web/Display; Supporting text — Web/Body lg, max ~2 lines; Primary + secondary CTA; Product image or screenshot; Split image puts it beside the text, Email capture swaps the CTAs for an email field.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/badge.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/sections/hero-section.tsx", "type": "registry:component", "target": "components/atomus/sections/hero-section.tsx" } ], "docs": "import HeroSection from \"@/components/atomus/sections/hero-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#hero-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Hero section", "component": "HeroSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "features-section", "type": "registry:block", "title": "Features section", "description": "Website section: Features section. Section heading: eyebrow, title, supporting text; 6 features: featured icon, title (Web/Heading xs), one or two lines of text; Grid: 3 columns on desktop, 2 on tablet, 1 on mobile.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/features-section.tsx", "type": "registry:component", "target": "components/atomus/sections/features-section.tsx" } ], "docs": "import FeaturesSection from \"@/components/atomus/sections/features-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#features-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Features section", "component": "FeaturesSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "feature-split-section", "type": "registry:block", "title": "Feature split section", "description": "Website section: Feature split section. Text column: eyebrow, title, supporting text; Checklist — 3 to 5 short benefits; Optional CTA; Image column; Type = Image left mirrors the order. Stacks text-first on tablet and mobile.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json" ], "files": [ { "path": "atomus/sections/feature-split-section.tsx", "type": "registry:component", "target": "components/atomus/sections/feature-split-section.tsx" } ], "docs": "import FeatureSplitSection from \"@/components/atomus/sections/feature-split-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#feature-split-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Feature split section", "component": "FeatureSplitSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "bento-section", "type": "registry:block", "title": "Bento section", "description": "Website section: Bento section. Section heading; Bento grid of feature cards — one wide and one tall card for rhythm; Each card: icon or image, title, one line of text; 3 columns → 2 → 1.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/badge.json" ], "files": [ { "path": "atomus/sections/bento-section.tsx", "type": "registry:component", "target": "components/atomus/sections/bento-section.tsx" } ], "docs": "import BentoSection from \"@/components/atomus/sections/bento-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#bento-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Bento section", "component": "BentoSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "logo-cloud", "type": "registry:block", "title": "Logo cloud", "description": "Website section: Logo cloud. One-line label (\"Trusted by …\"), Web/Body, tertiary text; 5–6 customer logos in fg-tertiary (one colour); Wraps to 2 columns on mobile.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/logo-cloud.tsx", "type": "registry:component", "target": "components/atomus/sections/logo-cloud.tsx" } ], "docs": "import LogoCloud from \"@/components/atomus/sections/logo-cloud\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#logo-cloud", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Logo cloud", "component": "LogoCloud" }, "author": "StanVision (https://stan.vision)" }, { "name": "testimonial", "type": "registry:block", "title": "Testimonial", "description": "Website section: Testimonial. Company logo or star rating; Quote — Web/Heading md, centred, max ~3 lines; Author: avatar, name, role and company.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/avatar.json" ], "files": [ { "path": "atomus/sections/testimonial.tsx", "type": "registry:component", "target": "components/atomus/sections/testimonial.tsx" } ], "docs": "import Testimonial from \"@/components/atomus/sections/testimonial\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#testimonial", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Testimonial", "component": "Testimonial" }, "author": "StanVision (https://stan.vision)" }, { "name": "testimonials-grid", "type": "registry:block", "title": "Testimonials grid", "description": "Website section: Testimonials grid. Section heading; Testimonial cards: rating, quote (Web/Body), author row; 3 columns → 2 → 1.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/avatar.json" ], "files": [ { "path": "atomus/sections/testimonials-grid.tsx", "type": "registry:component", "target": "components/atomus/sections/testimonials-grid.tsx" } ], "docs": "import TestimonialsGrid from \"@/components/atomus/sections/testimonials-grid\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#testimonials-grid", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Testimonials grid", "component": "TestimonialsGrid" }, "author": "StanVision (https://stan.vision)" }, { "name": "metrics-section", "type": "registry:block", "title": "Metrics section", "description": "Website section: Metrics section. Brand background (bg-brand-solid) with on-brand text; Short heading and supporting line; 3–4 key numbers: value (Web/Heading xl) and label; 4 → 2 → 1 columns.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/metrics-section.tsx", "type": "registry:component", "target": "components/atomus/sections/metrics-section.tsx" } ], "docs": "import MetricsSection from \"@/components/atomus/sections/metrics-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#metrics-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Metrics section", "component": "MetricsSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "pricing-card", "type": "registry:block", "title": "Pricing card", "description": "Website section: Pricing card. Plan name and short description; Price (Web/Heading xl) with billing period; CTA — primary on the highlighted plan, outline on the rest; Feature checklist; Highlighted = True adds the brand border, shadow and a \"Most popular\" badge.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/badge.json", "https://docs.atomus.io/r/button.json" ], "files": [ { "path": "atomus/sections/pricing-card.tsx", "type": "registry:component", "target": "components/atomus/sections/pricing-card.tsx" } ], "docs": "import PricingCard from \"@/components/atomus/sections/pricing-card\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#pricing-card", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Pricing card", "component": "PricingCard" }, "author": "StanVision (https://stan.vision)" }, { "name": "pricing-section", "type": "registry:block", "title": "Pricing section", "description": "Website section: Pricing section. Section heading; Billing toggle (Tabs, segmented): Monthly / Yearly; 3 Pricing cards, the recommended plan highlighted; Cards stack on tablet and mobile with the highlighted plan kept in order.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/tabs.json", "https://docs.atomus.io/r/pricing-card.json" ], "files": [ { "path": "atomus/sections/pricing-section.tsx", "type": "registry:component", "target": "components/atomus/sections/pricing-section.tsx" } ], "docs": "import PricingSection from \"@/components/atomus/sections/pricing-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#pricing-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Pricing section", "component": "PricingSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "faq-item", "type": "registry:block", "title": "FAQ item", "description": "Website section: FAQ item. Question — Web/Body lg, semibold; Plus icon that turns into × when open; Answer — Web/Body, secondary text; State: Closed · Open; a hairline divider between items.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/faq-item.tsx", "type": "registry:component", "target": "components/atomus/sections/faq-item.tsx" } ], "docs": "import FaqItem from \"@/components/atomus/sections/faq-item\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#faq-item", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "FAQ item", "component": "FaqItem" }, "author": "StanVision (https://stan.vision)" }, { "name": "faq-section", "type": "registry:block", "title": "FAQ section", "description": "Website section: FAQ section. Section heading; 6 FAQ items (first one open); Optional \"Still have questions?\" line with a contact link.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/faq-item.json" ], "files": [ { "path": "atomus/sections/faq-section.tsx", "type": "registry:component", "target": "components/atomus/sections/faq-section.tsx" } ], "docs": "import FaqSection from \"@/components/atomus/sections/faq-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#faq-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "FAQ section", "component": "FaqSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "cta-section", "type": "registry:block", "title": "CTA section", "description": "Website section: CTA section. Brand band: bg-brand-solid with on-brand text and a large radius; Title (Web/Heading lg) and one supporting line; Two CTAs — white primary, translucent outline; Type = Card with image adds an image beside the text; stacks on tablet and mobile.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json" ], "files": [ { "path": "atomus/sections/cta-section.tsx", "type": "registry:component", "target": "components/atomus/sections/cta-section.tsx" } ], "docs": "import CtaSection from \"@/components/atomus/sections/cta-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#cta-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "CTA section", "component": "CtaSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "newsletter-section", "type": "registry:block", "title": "Newsletter section", "description": "Website section: Newsletter section. Title and one line of value; Email input (lg) + primary button on one row; stacks on mobile; Privacy hint under the field.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/sections/newsletter-section.tsx", "type": "registry:component", "target": "components/atomus/sections/newsletter-section.tsx" } ], "docs": "import NewsletterSection from \"@/components/atomus/sections/newsletter-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#newsletter-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Newsletter section", "component": "NewsletterSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "blog-card", "type": "registry:block", "title": "Blog card", "description": "Website section: Blog card. Cover image (16:10); Category badge; Title — Web/Heading xs, max 2 lines; Excerpt — 2 lines; Author row: avatar, name, date.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/badge.json" ], "files": [ { "path": "atomus/sections/blog-card.tsx", "type": "registry:component", "target": "components/atomus/sections/blog-card.tsx" } ], "docs": "import BlogCard from \"@/components/atomus/sections/blog-card\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#blog-card", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Blog card", "component": "BlogCard" }, "author": "StanVision (https://stan.vision)" }, { "name": "blog-section", "type": "registry:block", "title": "Blog section", "description": "Website section: Blog section. Heading with a \"View all posts\" action; 3 Blog cards — 3 → 2 → 1 columns.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/blog-card.json" ], "files": [ { "path": "atomus/sections/blog-section.tsx", "type": "registry:component", "target": "components/atomus/sections/blog-section.tsx" } ], "docs": "import BlogSection from \"@/components/atomus/sections/blog-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#blog-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Blog section", "component": "BlogSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "team-member", "type": "registry:block", "title": "Team member", "description": "Website section: Team member. Square photo; Name (Web/Heading xs) and role in brand text; Short bio — 2 lines; Social links (optional).", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/team-member.tsx", "type": "registry:component", "target": "components/atomus/sections/team-member.tsx" } ], "docs": "import TeamMember from \"@/components/atomus/sections/team-member\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#team-member", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Team member", "component": "TeamMember" }, "author": "StanVision (https://stan.vision)" }, { "name": "team-section", "type": "registry:block", "title": "Team section", "description": "Website section: Team section. Section heading with an optional \"We’re hiring\" CTA; Team member cards — 4 → 2 → 1 columns.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/team-member.json" ], "files": [ { "path": "atomus/sections/team-section.tsx", "type": "registry:component", "target": "components/atomus/sections/team-section.tsx" } ], "docs": "import TeamSection from \"@/components/atomus/sections/team-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#team-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Team section", "component": "TeamSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "contact-section", "type": "registry:block", "title": "Contact section", "description": "Website section: Contact section. Heading and supporting text; Form: first/last name row, email, message, consent checkbox, full-width submit; Contact info cards: icon, label, value (email, office, phone); Form and cards sit side by side on desktop and stack below.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/sections/contact-section.tsx", "type": "registry:component", "target": "components/atomus/sections/contact-section.tsx" } ], "docs": "import ContactSection from \"@/components/atomus/sections/contact-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#contact-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Contact section", "component": "ContactSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "careers-section", "type": "registry:block", "title": "Careers section", "description": "Website section: Careers section. Heading and supporting text; Department filter (Tabs, pill); Job cards: title, department badge, location and type, \"Apply\" action; Job cards stack their action under the text on mobile.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/badge.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/tabs.json" ], "files": [ { "path": "atomus/sections/careers-section.tsx", "type": "registry:component", "target": "components/atomus/sections/careers-section.tsx" } ], "docs": "import CareersSection from \"@/components/atomus/sections/careers-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#careers-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Careers section", "component": "CareersSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "comparison-table-section", "type": "registry:block", "title": "Comparison table section", "description": "Website section: Comparison table section. Section heading; Table header: plan names, prices and CTAs; the recommended plan column is tinted; Grouped feature rows with check / dash cells (never colour alone); Scrolls horizontally on mobile instead of squeezing columns.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json" ], "files": [ { "path": "atomus/sections/comparison-table-section.tsx", "type": "registry:component", "target": "components/atomus/sections/comparison-table-section.tsx" } ], "docs": "import ComparisonTableSection from \"@/components/atomus/sections/comparison-table-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#comparison-table-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Comparison table section", "component": "ComparisonTableSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "integrations-section", "type": "registry:block", "title": "Integrations section", "description": "Website section: Integrations section. Section heading; Integration cards: app tile, name, one-line description, \"View integration\" link; 3 → 2 → 1 columns.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json" ], "files": [ { "path": "atomus/sections/integrations-section.tsx", "type": "registry:component", "target": "components/atomus/sections/integrations-section.tsx" } ], "docs": "import IntegrationsSection from \"@/components/atomus/sections/integrations-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#integrations-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Integrations section", "component": "IntegrationsSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "not-found-section", "type": "registry:block", "title": "404 section", "description": "Website section: 404 section. Large \"404\" in brand text; Title and one line of help; Search field; Back and Home actions.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/icon.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/sections/not-found-section.tsx", "type": "registry:component", "target": "components/atomus/sections/not-found-section.tsx" } ], "docs": "import NotFoundSection from \"@/components/atomus/sections/not-found-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#404-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "404 section", "component": "NotFoundSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "blog-post-content", "type": "registry:block", "title": "Blog post content", "description": "Website section: Blog post content. Meta: category badge and reading time; Title (Web/Heading xl) and lead paragraph; Author row; Cover image; Rich-text body (max 720px): Web/Body paragraphs, Web/Heading sm subheads, quotes, lists.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/avatar.json", "https://docs.atomus.io/r/badge.json" ], "files": [ { "path": "atomus/sections/blog-post-content.tsx", "type": "registry:component", "target": "components/atomus/sections/blog-post-content.tsx" } ], "docs": "import BlogPostContent from \"@/components/atomus/sections/blog-post-content\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#blog-post-content", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Blog post content", "component": "BlogPostContent" }, "author": "StanVision (https://stan.vision)" }, { "name": "content-section", "type": "registry:block", "title": "Content section", "description": "Website section: Content section. Eyebrow and title; Long-form copy in two to four paragraphs; Supporting image beside the text (below on tablet and mobile); Optional pull quote.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/content-section.tsx", "type": "registry:component", "target": "components/atomus/sections/content-section.tsx" } ], "docs": "import ContentSection from \"@/components/atomus/sections/content-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#content-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Content section", "component": "ContentSection" }, "author": "StanVision (https://stan.vision)" }, { "name": "press-mentions", "type": "registry:block", "title": "Press mentions", "description": "Website section: Press mentions. Heading; Press items: publication logo, short quote, \"Read article\" link; 3 columns → 1, separated by a left rule.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json" ], "files": [ { "path": "atomus/sections/press-mentions.tsx", "type": "registry:component", "target": "components/atomus/sections/press-mentions.tsx" } ], "docs": "import PressMentions from \"@/components/atomus/sections/press-mentions\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#press-mentions", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Press mentions", "component": "PressMentions" }, "author": "StanVision (https://stan.vision)" }, { "name": "legal-content", "type": "registry:block", "title": "Legal content", "description": "Website section: Legal content. Title and \"Last updated\" date; Sticky table of contents (current section in brand text); moves above the content on tablet and mobile; Numbered sections: Web/Heading sm + Web/Body paragraphs.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json" ], "files": [ { "path": "atomus/sections/legal-content.tsx", "type": "registry:component", "target": "components/atomus/sections/legal-content.tsx" } ], "docs": "import LegalContent from \"@/components/atomus/sections/legal-content\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#legal-content", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Legal content", "component": "LegalContent" }, "author": "StanVision (https://stan.vision)" }, { "name": "auth-section", "type": "registry:block", "title": "Auth section", "description": "Website section: Auth section. Logo, title and one line of context; Form: email, password, \"Remember me\" and \"Forgot password\" row, full-width primary button; Divider and social sign-in; Footer link to the other flow (Sign up / Log in); Desktop adds a brand panel with a testimonial; Type switches between Log in, Sign up, Forgot password and Verification.", "registryDependencies": [ "https://docs.atomus.io/r/website-parts.json", "https://docs.atomus.io/r/button.json", "https://docs.atomus.io/r/checkbox-radio-toggle.json", "https://docs.atomus.io/r/input.json" ], "files": [ { "path": "atomus/sections/auth-section.tsx", "type": "registry:component", "target": "components/atomus/sections/auth-section.tsx" } ], "docs": "import AuthSection from \"@/components/atomus/sections/auth-section\";\nReplace the sample copy and images with yours. Layout and type switch at the Atomus tablet (1023px) and mobile (767px) breakpoints.\nPreview and Figma variants: https://docs.atomus.io/website-sections/#auth-section", "categories": [ "block", "website" ], "meta": { "kind": "website", "section": "Auth section", "component": "AuthSection" }, "author": "StanVision (https://stan.vision)" } ] }