@ecopages/radiant-ui 0.1.0-beta.0

package/dist/lib/focusable-elements.d.ts

@@ -0,0 +1,2 @@
+/** Returns focusable descendants in DOM order, skipping hidden nodes. */
+export declare function getFocusableElements(root: ParentNode): HTMLElement[];

package/dist/lib/radiant-view.d.ts

@@ -0,0 +1,17 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+declare const RADIANT_VIEW_ELEMENT: unique symbol;
+declare const RADIANT_SCRIPT_MODULE: unique symbol;
+declare const RADIANT_SCRIPT_EXPORT: unique symbol;
+export type RadiantViewComponent<TArgs = unknown> = ((args: TArgs) => JsxRenderable) & {
+    [RADIANT_VIEW_ELEMENT]?: CustomElementConstructor;
+    [RADIANT_SCRIPT_MODULE]?: string;
+    [RADIANT_SCRIPT_EXPORT]?: string;
+};
+/** Link a JSX view export to its RadiantElement class (same symbols as the Storybook framework). */
+export declare function defineRadiantView<TArgs>(element: CustomElementConstructor & {
+    [RADIANT_SCRIPT_MODULE]?: string;
+    [RADIANT_SCRIPT_EXPORT]?: string;
+}, render: (args: TArgs) => JsxRenderable): RadiantViewComponent<TArgs>;
+/** Re-copy SSR metadata from the linked element (e.g. after HMR). */
+export declare function syncRadiantViewMetadata(view: RadiantViewComponent): void;
+export {};

package/dist/lib/roving-tabindex.d.ts

@@ -0,0 +1,27 @@
+export type RovingOrientation = 'horizontal' | 'vertical';
+export type RovingNavResult = {
+    handled: false;
+} | {
+    handled: true;
+    index: number;
+    item: HTMLElement;
+};
+/**
+ * Apply the APG roving-tabindex pattern: one item is tabbable, the rest are `-1`.
+ */
+export declare function applyRovingTabindex(items: HTMLElement[], activeIndex: number): void;
+/**
+ * Focus `items[index]` and update tabindexes. Returns the focused item, or null.
+ */
+export declare function focusRovingItem(items: HTMLElement[], index: number): HTMLElement | null;
+/**
+ * Handle arrow / Home / End navigation for a flat roving-tabindex collection.
+ * Does not activate the item — callers decide whether to select on move.
+ */
+export declare function navigateRovingTabindex(options: {
+    items: HTMLElement[];
+    current: HTMLElement | null;
+    key: string;
+    orientation?: RovingOrientation;
+    wrap?: boolean;
+}): RovingNavResult;

package/dist/styles/components/button.css

@@ -0,0 +1,115 @@
+@reference 'tailwindcss';
+@reference '../themes/default.css';
+
+@layer components {
+	.rui-button {
+		@apply inline-flex items-center justify-center h-fit w-fit gap-2;
+		@apply font-medium text-sm rounded-button border border-transparent;
+		@apply transition-[background-color,color,box-shadow] duration-300 ease-out;
+		@apply cursor-pointer;
+		@apply whitespace-nowrap;
+	}
+
+	.rui-button > svg {
+		@apply pointer-events-none;
+	}
+
+	.rui-button:focus-visible {
+		@apply ring-2 ring-focus-ring outline-hidden;
+	}
+
+	.rui-button:disabled {
+		@apply opacity-50 cursor-not-allowed;
+	}
+
+	/* Variants */
+	.rui-button--filled {
+		@apply bg-primary text-on-primary rui-sheen;
+	}
+
+	.rui-button--filled:hover:not(:disabled) {
+		@apply bg-primary/90;
+	}
+
+	.rui-button--filled:active:not(:disabled) {
+		@apply bg-primary-dark;
+	}
+
+	.rui-button--filled[aria-pressed='true'] {
+		@apply bg-primary-dark ring-2 ring-focus-ring;
+	}
+
+	.rui-button--outline {
+		@apply bg-transparent text-on-background border-border;
+	}
+
+	.rui-button--outline:hover:not(:disabled) {
+		@apply bg-surface rui-sheen;
+	}
+
+	.rui-button--outline:active:not(:disabled) {
+		@apply bg-surface/80 rui-sheen;
+	}
+
+	.rui-button--outline[aria-pressed='true'] {
+		@apply bg-background font-medium text-on-background shadow-sm ring-2 ring-focus-ring rui-sheen;
+	}
+
+	.rui-button--ghost {
+		@apply bg-transparent text-on-surface;
+	}
+
+	.rui-button--ghost:hover:not(:disabled) {
+		@apply bg-surface-container-low rui-sheen;
+	}
+
+	.rui-button--ghost:active:not(:disabled) {
+		@apply bg-surface-container;
+	}
+
+	.rui-button--ghost[aria-pressed='true'] {
+		@apply bg-background font-medium text-on-background shadow-sm ring-2 ring-inset ring-border;
+	}
+
+	.rui-button--destructive {
+		@apply bg-error text-on-error rui-sheen;
+	}
+
+	.rui-button--destructive:hover:not(:disabled) {
+		@apply bg-error/90;
+	}
+
+	.rui-button--destructive:active:not(:disabled) {
+		@apply bg-error-dark;
+	}
+
+	/* Sizes */
+	.rui-button--sm {
+		@apply text-xs py-1 px-2;
+	}
+
+	.rui-button--md {
+		@apply text-sm py-2 px-4;
+	}
+
+	.rui-button--lg {
+		@apply text-base py-3 px-6;
+	}
+
+	.rui-button--icon {
+		@apply text-sm p-2;
+	}
+
+	/* Back-compat aliases used by earlier stories */
+	.rui-button--primary {
+		@apply bg-primary text-on-primary rui-sheen;
+	}
+
+	.rui-button--secondary {
+		@apply bg-secondary text-on-secondary rui-sheen;
+	}
+
+	.rui-button--error {
+		@apply bg-error text-on-error rui-sheen;
+	}
+}

package/dist/styles/radiant-ui-core.css

@@ -0,0 +1,7 @@
+/**
+ * Tailwind + shared component primitives (no theme).
+ * Pair with a theme file, or use `radiant-ui.css` for the default bundle.
+ */
+@import 'tailwindcss';
+@import './utilities/sheen.css';
+@import './components/button.css';

package/dist/styles/radiant-ui.css

@@ -0,0 +1,10 @@
+/**
+ * radiant-ui base stylesheet (Tailwind + default theme + button).
+ * Published as `@ecopages/radiant-ui/radiant-ui.css`.
+ */
+@import './radiant-ui-core.css';
+@import './themes/default.css';
+
+:root {
+	color-scheme: light;
+}

package/dist/styles/styles.css

@@ -0,0 +1,36 @@
+/**
+ * All component styles (no theme). Import `@ecopages/radiant-ui/themes/default` separately.
+ * Generated by scripts/generate-exports.ts — do not edit by hand.
+ */
+@import './components/button.css';
+@import '../components/ui/alert/alert.css';
+@import '../components/ui/breadcrumb/breadcrumb.css';
+@import '../components/ui/carousel/carousel.css';
+@import '../components/ui/checkbox/checkbox.css';
+@import '../components/ui/combobox/combobox.css';
+@import '../components/ui/dialog/dialog.css';
+@import '../components/ui/disclosure/disclosure.css';
+@import '../components/ui/feed/feed.css';
+@import '../components/ui/field/field.css';
+@import '../components/ui/form/form.css';
+@import '../components/ui/grid/grid.css';
+@import '../components/ui/input/input.css';
+@import '../components/ui/label/label.css';
+@import '../components/ui/listbox/listbox.css';
+@import '../components/ui/menu-button/menu-button.css';
+@import '../components/ui/menubar/menubar.css';
+@import '../components/ui/meter/meter.css';
+@import '../components/ui/navigation-menu/navigation-menu.css';
+@import '../components/ui/radio-group/radio-group.css';
+@import '../components/ui/sidebar/sidebar.css';
+@import '../components/ui/slider/slider.css';
+@import '../components/ui/spinbutton/spinbutton.css';
+@import '../components/ui/switch/switch.css';
+@import '../components/ui/tabs/tabs.css';
+@import '../components/ui/textarea/textarea.css';
+@import '../components/ui/toast/toast.css';
+@import '../components/ui/toolbar/toolbar.css';
+@import '../components/ui/tooltip/tooltip.css';
+@import '../components/ui/tree/tree.css';
+@import '../components/ui/treegrid/treegrid.css';
+@import '../components/ui/window-splitter/window-splitter.css';

package/dist/styles/tailwind.css

@@ -0,0 +1,41 @@
+/**
+ * Storybook preview stylesheet.
+ * Keep canvas chrome here — do not put app layout (`container`, body padding, `main` gaps).
+ * Those fight Storybook's `layout: 'fullscreen' | 'padded'` and break `h-full` / `h-svh` stories.
+ */
+@import './radiant-ui.css';
+@import './tokens/presets/spacing.css';
+@import './tokens/presets/radius.css';
+
+html,
+body,
+#storybook-root {
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	@apply bg-background text-on-background;
+	font-family: var(--font-sans);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Mount wrappers from @ecopages/storybook-radiant-vite — pass height through to stories. */
+#storybook-root,
+#root-inner,
+.radiant-ssr-mount {
+	min-height: 100%;
+	height: 100%;
+}
+
+a,
+button,
+input,
+select,
+textarea {
+	&:focus,
+	&:focus-visible {
+		@apply outline-2 outline-focus-ring;
+	}
+}

package/dist/styles/themes/aurora.css

@@ -0,0 +1,19 @@
+/**
+ * Aurora — vivid palette (formerly the default color pack).
+ */
+@import '../tokens/colors/palettes.css';
+@import '../tokens/spacing/default.css';
+@import '../tokens/radius/default.css';
+@import '../tokens/elevation/default.css';
+@import '../tokens/typography/default.css';
+@import '../tokens/motion/default.css';
+@import '../tokens/system.css';
+@import '../tokens/semantic.css';
+
+:root {
+	color-scheme: light;
+}
+
+.dark {
+	color-scheme: dark;
+}

package/dist/styles/themes/default-compact-soft.css

@@ -0,0 +1,19 @@
+/**
+ * Composed theme: default colors + compact spacing + soft radius.
+ */
+@import '../tokens/colors/aurora.css';
+@import '../tokens/spacing/compact.css';
+@import '../tokens/radius/soft.css';
+@import '../tokens/elevation/default.css';
+@import '../tokens/typography/default.css';
+@import '../tokens/motion/default.css';
+@import '../tokens/system.css';
+@import '../tokens/semantic.css';
+
+:root {
+	color-scheme: light;
+}
+
+.dark {
+	color-scheme: dark;
+}

package/dist/styles/themes/default.css

@@ -0,0 +1,2 @@
+/** Default theme alias — glacier (docs brand). */
+@import './glacier.css';

package/dist/styles/themes/glacier.css

@@ -0,0 +1,19 @@
+/**
+ * Glacier — default brand (aligned with apps/docs).
+ */
+@import '../tokens/colors/palettes.css';
+@import '../tokens/spacing/default.css';
+@import '../tokens/radius/default.css';
+@import '../tokens/elevation/default.css';
+@import '../tokens/typography/default.css';
+@import '../tokens/motion/default.css';
+@import '../tokens/system.css';
+@import '../tokens/semantic.css';
+
+:root {
+	color-scheme: light;
+}
+
+.dark {
+	color-scheme: dark;
+}

package/dist/styles/tokens/colors/aurora.css

@@ -0,0 +1,73 @@
+/**
+ * Default color pack — raw OKLCH scales only (mode-agnostic).
+ * Semantic roles live in semantic.css.
+ */
+@theme {
+	--color-black: oklch(0% 0 0);
+	--color-white: oklch(100% 0 0);
+
+	--color-havelock-blue-50: oklch(97.6% 0.013 233.68);
+	--color-havelock-blue-100: oklch(94.6% 0.031 234.4);
+	--color-havelock-blue-200: oklch(88.9% 0.061 238.79);
+	--color-havelock-blue-300: oklch(83.3% 0.093 239.72);
+	--color-havelock-blue-400: oklch(77.1% 0.129 241.58);
+	--color-havelock-blue-500: oklch(70% 0.17 243.34);
+	--color-havelock-blue-600: oklch(60.7% 0.156 249.36);
+	--color-havelock-blue-700: oklch(49.4% 0.14 256.99);
+	--color-havelock-blue-800: oklch(36.7% 0.121 265.27);
+	--color-havelock-blue-900: oklch(24% 0.104 273.88);
+	--color-havelock-blue-950: oklch(17.9% 0.097 278.01);
+	--color-havelock-blue-975: oklch(15.1% 0.091 280.16);
+
+	--color-hit-pink-50: oklch(97.4% 0.015 54.97);
+	--color-hit-pink-100: oklch(95.7% 0.026 58.31);
+	--color-hit-pink-200: oklch(92.4% 0.045 57.5);
+	--color-hit-pink-300: oklch(89.2% 0.065 55.42);
+	--color-hit-pink-400: oklch(85.2% 0.088 52.7);
+	--color-hit-pink-500: oklch(80.1% 0.118 50.17);
+	--color-hit-pink-600: oklch(71.2% 0.109 47.02);
+	--color-hit-pink-700: oklch(57.8% 0.095 42.51);
+	--color-hit-pink-800: oklch(42.1% 0.078 38.8);
+	--color-hit-pink-900: oklch(26.1% 0.062 33.39);
+	--color-hit-pink-950: oklch(18.5% 0.054 30.65);
+	--color-hit-pink-975: oklch(15.2% 0.049 32.96);
+
+	--color-fruit-salad-50: oklch(97.6% 0.009 150.47);
+	--color-fruit-salad-100: oklch(93.9% 0.02 154.79);
+	--color-fruit-salad-200: oklch(87.1% 0.046 152.04);
+	--color-fruit-salad-300: oklch(79.9% 0.071 150.42);
+	--color-fruit-salad-400: oklch(72.7% 0.098 149.08);
+	--color-fruit-salad-500: oklch(64.7% 0.127 147.75);
+	--color-fruit-salad-600: oklch(55.4% 0.111 147.11);
+	--color-fruit-salad-700: oklch(45.1% 0.092 146.25);
+	--color-fruit-salad-800: oklch(33.9% 0.071 144.89);
+	--color-fruit-salad-900: oklch(23.3% 0.054 144.32);
+	--color-fruit-salad-950: oklch(17.4% 0.044 143.42);
+	--color-fruit-salad-975: oklch(14.9% 0.04 143.25);
+
+	--color-pale-sky-50: oklch(97.5% 0.002 228.43);
+	--color-pale-sky-100: oklch(93% 0.003 247.81);
+	--color-pale-sky-200: oklch(84% 0.009 247.91);
+	--color-pale-sky-300: oklch(74.9% 0.013 255.53);
+	--color-pale-sky-400: oklch(66% 0.016 251.22);
+	--color-pale-sky-500: oklch(56.9% 0.021 255.6);
+	--color-pale-sky-600: oklch(48.2% 0.022 255.62);
+	--color-pale-sky-700: oklch(39.2% 0.023 258.37);
+	--color-pale-sky-800: oklch(30.4% 0.024 261.16);
+	--color-pale-sky-900: oklch(21.6% 0.024 259.28);
+	--color-pale-sky-950: oklch(17.2% 0.026 259.11);
+	--color-pale-sky-975: oklch(15% 0.026 263.06);
+
+	--color-cardinal-50: oklch(97.4% 0.01 17.5);
+	--color-cardinal-100: oklch(92.2% 0.03 20.31);
+	--color-cardinal-200: oklch(81.3% 0.072 19.84);
+	--color-cardinal-300: oklch(70.4% 0.115 19.71);
+	--color-cardinal-400: oklch(59.9% 0.155 20.64);
+	--color-cardinal-500: oklch(50.6% 0.19 21.41);
+	--color-cardinal-600: oklch(42.2% 0.16 23.24);
+	--color-cardinal-700: oklch(34.8% 0.132 24.75);
+	--color-cardinal-800: oklch(27.5% 0.106 26.2);
+	--color-cardinal-900: oklch(20.4% 0.081 26.95);
+	--color-cardinal-950: oklch(16.9% 0.069 26.47);
+	--color-cardinal-975: oklch(15% 0.062 29.23);
+}

package/dist/styles/tokens/colors/basalt.css

@@ -0,0 +1,36 @@
+/**
+ * Basalt color pack — cool neutrals + Carbon-like blue accent (IBM Carbon inspired).
+ */
+@theme {
+	--color-basalt-50: oklch(98.2% 0.004 265);
+	--color-basalt-100: oklch(96% 0.006 265);
+	--color-basalt-200: oklch(91.5% 0.008 265);
+	--color-basalt-300: oklch(85% 0.01 265);
+	--color-basalt-400: oklch(74% 0.012 265);
+	--color-basalt-500: oklch(62% 0.014 265);
+	--color-basalt-600: oklch(50% 0.014 265);
+	--color-basalt-700: oklch(40% 0.012 265);
+	--color-basalt-800: oklch(30% 0.01 265);
+	--color-basalt-900: oklch(22% 0.008 265);
+	--color-basalt-950: oklch(16% 0.006 265);
+	--color-basalt-975: oklch(13% 0.005 265);
+
+	--color-carbon-blue-50: oklch(97% 0.02 264);
+	--color-carbon-blue-100: oklch(93% 0.04 264);
+	--color-carbon-blue-200: oklch(86% 0.08 264);
+	--color-carbon-blue-300: oklch(76% 0.12 264);
+	--color-carbon-blue-400: oklch(64% 0.16 264);
+	--color-carbon-blue-500: oklch(52% 0.19 264);
+	--color-carbon-blue-600: oklch(45% 0.17 264);
+	--color-carbon-blue-700: oklch(38% 0.14 264);
+	--color-carbon-blue-800: oklch(30% 0.11 264);
+	--color-carbon-blue-900: oklch(22% 0.08 264);
+
+	--color-carbon-teal-400: oklch(72% 0.1 195);
+	--color-carbon-teal-600: oklch(55% 0.09 195);
+
+	--color-carbon-red-500: oklch(52% 0.2 25);
+	--color-carbon-red-600: oklch(45% 0.18 25);
+	--color-carbon-red-100: oklch(92% 0.04 25);
+	--color-carbon-red-800: oklch(32% 0.12 25);
+}

package/dist/styles/tokens/colors/glacier.css

@@ -0,0 +1,45 @@
+/**
+ * Glacier color pack — matches apps/docs `theme.css` scales.
+ */
+@theme {
+	--color-night-sky-50: hsl(225 100% 98%);
+	--color-night-sky-100: hsl(225 100% 95%);
+	--color-night-sky-200: hsl(225 100% 90%);
+	--color-night-sky-300: hsl(225 90% 80%);
+	--color-night-sky-400: hsl(225 90% 70%);
+	--color-night-sky-500: hsl(225 85% 55%);
+	--color-night-sky-600: hsl(225 85% 45%);
+	--color-night-sky-700: hsl(225 90% 35%);
+	--color-night-sky-800: hsl(225 90% 25%);
+	--color-night-sky-900: hsl(225 80% 15%);
+	--color-night-sky-950: hsl(225 80% 10%);
+
+	--color-scarlet-100: hsl(353 100% 89%);
+	--color-scarlet-200: hsl(351 100% 81%);
+	--color-scarlet-300: hsl(350 100% 72%);
+	--color-scarlet-400: hsl(350 100% 63%);
+	--color-scarlet-500: hsl(350 100% 54%);
+	--color-scarlet-600: hsl(350 84% 44%);
+	--color-scarlet-700: hsl(351 83% 35%);
+	--color-scarlet-800: hsl(351 81% 25%);
+	--color-scarlet-900: hsl(353 76% 15%);
+	--color-scarlet-950: hsl(8 60% 5%);
+
+	--color-glacier-white-50: hsl(220 20% 99%);
+	--color-glacier-white-100: hsl(220 20% 97%);
+	--color-glacier-white-200: hsl(220 20% 94%);
+	--color-glacier-white-300: hsl(220 15% 90%);
+	--color-glacier-white-400: hsl(220 12% 80%);
+	--color-glacier-white-500: hsl(220 10% 72%);
+	--color-glacier-white-600: hsl(220 8% 58%);
+	--color-glacier-white-700: hsl(220 10% 35%);
+	--color-glacier-white-800: hsl(220 12% 25%);
+	--color-glacier-white-900: hsl(225 15% 5%);
+	--color-glacier-white-950: hsl(225 20% 2%);
+
+	--color-laser-lemon-300: hsl(60 100% 69%);
+	--color-laser-lemon-800: hsl(59 93% 23%);
+
+	--color-navy-blue-400: hsl(212 67% 58%);
+	--color-navy-blue-700: hsl(212 71% 30%);
+}

package/dist/styles/tokens/colors/palettes.css

@@ -0,0 +1,3 @@
+@import './glacier.css';
+@import './aurora.css';
+@import './basalt.css';

package/dist/styles/tokens/elevation/default.css

@@ -0,0 +1,22 @@
+/**
+ * Default elevation pack.
+ */
+:root {
+	--shadow-control: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--shadow-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+	--sheen-highlight: color-mix(in oklab, white 8%, transparent);
+	--sheen-shade: color-mix(in oklab, black 7%, transparent);
+	--sheen-image: linear-gradient(to bottom, var(--sheen-highlight), transparent 55%, var(--sheen-shade));
+}
+
+@theme {
+	--shadow-control: var(--shadow-control);
+	--shadow-overlay: var(--shadow-overlay);
+	--shadow-modal: var(--shadow-modal);
+	--shadow-sm: var(--shadow-control);
+	--shadow-md: var(--shadow-overlay);
+	--shadow-lg: var(--shadow-overlay);
+	--shadow-xl: var(--shadow-modal);
+}

package/dist/styles/tokens/elevation/flat.css

@@ -0,0 +1,22 @@
+/**
+ * Flat elevation pack — no drop shadows.
+ */
+:root {
+	--shadow-control: none;
+	--shadow-overlay: none;
+	--shadow-modal: none;
+
+	--sheen-highlight: color-mix(in oklab, white 14%, transparent);
+	--sheen-shade: color-mix(in oklab, black 7%, transparent);
+	--sheen-image: linear-gradient(to bottom, var(--sheen-highlight), transparent 55%, var(--sheen-shade));
+}
+
+@theme {
+	--shadow-control: var(--shadow-control);
+	--shadow-overlay: var(--shadow-overlay);
+	--shadow-modal: var(--shadow-modal);
+	--shadow-sm: var(--shadow-control);
+	--shadow-md: var(--shadow-overlay);
+	--shadow-lg: var(--shadow-overlay);
+	--shadow-xl: var(--shadow-modal);
+}

package/dist/styles/tokens/motion/default.css

@@ -0,0 +1,19 @@
+/**
+ * Default motion pack.
+ */
+:root {
+	--duration-fast: 150ms;
+	--duration-normal: 200ms;
+	--duration-slow: 300ms;
+	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@theme {
+	--transition-duration-fast: var(--duration-fast);
+	--transition-duration-normal: var(--duration-normal);
+	--transition-duration-slow: var(--duration-slow);
+	--duration-150: var(--duration-fast);
+	--duration-200: var(--duration-normal);
+	--duration-300: var(--duration-slow);
+}

package/dist/styles/tokens/motion/snappy.css

@@ -0,0 +1,19 @@
+/**
+ * Snappy motion pack.
+ */
+:root {
+	--duration-fast: 100ms;
+	--duration-normal: 150ms;
+	--duration-slow: 200ms;
+	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+}
+
+@theme {
+	--transition-duration-fast: var(--duration-fast);
+	--transition-duration-normal: var(--duration-normal);
+	--transition-duration-slow: var(--duration-slow);
+	--duration-150: var(--duration-fast);
+	--duration-200: var(--duration-normal);
+	--duration-300: var(--duration-slow);
+}