@neo-ui-kit/react 0.0.0-stage → 1.0.1

package/dist/components/foundation/Loader/Loader.d.ts

@@ -0,0 +1,30 @@
+import { type CommonProps } from "../../../core/base";
+import { tr } from "../../../core/i18n";
+export declare const loaderAnimations: readonly ["spin", "pulse", "breathe", "bounce", "flip", "orbit", "wave", "glow", "fill", "shine", "wobble", "radar", "palette"];
+export type LoaderAnimation = (typeof loaderAnimations)[number];
+/** Names of the animations for pickers, in the library's language. */
+export declare const loaderAnimationLabel: (animation: LoaderAnimation, translate?: typeof tr) => string;
+export interface LoaderProps extends Omit<CommonProps, "size"> {
+    /** The picture that moves: a logo, an icon, any image (transparent PNG/SVG/WebP look best). */
+    src?: string;
+    animation?: LoaderAnimation;
+    /** xs/sm/md/lg, a CSS length, or pixels converted to rem at the 16px design baseline. */
+    size?: number | string;
+    /** Speed multiplier: 2 is twice as fast. */
+    speed?: number;
+    /** Colour of rings, glows and the sweep; the theme colour by default. */
+    color?: string;
+    /** Extra colours used by multicolour animations. */
+    palette?: string[];
+    /** What screen readers hear. */
+    label?: string;
+}
+/**
+ * The loader's stylesheet. It lives here (not in a .css file) so the generator can hand the
+ * exact same animation out as a standalone page. Only transform and opacity move.
+ */
+export declare const loaderCss = "\n.ad-loader{--ad-loader-size:4rem;--ad-loader-speed:1;--ad-loader-color:var(--ad-primary,#ff244c);position:relative;display:inline-grid;place-items:center;width:var(--ad-loader-size);height:var(--ad-loader-size);flex:none}\n.ad-loader>*{grid-area:1/1}\n.ad-loader-img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 0 calc(var(--ad-loader-size)*.07) color-mix(in srgb,var(--ad-loader-color) 60%,transparent));user-select:none;pointer-events:none}\n.ad-loader:is([data-animation=spin],[data-animation=pulse],[data-animation=breathe],[data-animation=bounce],[data-animation=flip],[data-animation=orbit],[data-animation=wobble],[data-animation=palette]) .ad-loader-img,.ad-loader-fill>.ad-loader-img{will-change:transform,opacity}\n.ad-loader-default-image{display:block;background:linear-gradient(135deg,var(--ad-loader-color-2,var(--ad-secondary)),var(--ad-loader-color));-webkit-mask:var(--ad-loader-src) center/contain no-repeat;mask:var(--ad-loader-src) center/contain no-repeat}\n.ad-loader-ring{width:100%;height:100%;border-radius:50%;pointer-events:none}\n.ad-loader[data-animation=spin] .ad-loader-img{animation:ad-loader-spin calc(1.2s/var(--ad-loader-speed)) linear infinite}\n.ad-loader[data-animation=pulse] .ad-loader-img{animation:ad-loader-pulse calc(1s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=breathe] .ad-loader-img{animation:ad-loader-breathe calc(2.4s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=bounce] .ad-loader-img{width:60%;height:60%;animation:ad-loader-bounce calc(.9s/var(--ad-loader-speed)) cubic-bezier(.3,0,.6,1) infinite alternate}\n.ad-loader[data-animation=bounce] .ad-loader-ring{width:46%;height:10%;align-self:end;border-radius:50%;background:radial-gradient(closest-side,rgb(0 0 0/.45),transparent);animation:ad-loader-shadow calc(.9s/var(--ad-loader-speed)) cubic-bezier(.3,0,.6,1) infinite alternate}\n.ad-loader[data-animation=flip] .ad-loader-img{animation:ad-loader-flip calc(1.6s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=orbit] .ad-loader-img{width:34%;height:34%;animation:ad-loader-orbit calc(1.4s/var(--ad-loader-speed)) linear infinite}\n.ad-loader[data-animation=orbit] .ad-loader-ring{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ad-loader-color) 35%,transparent)}\n.ad-loader[data-animation=wave] .ad-loader-img{width:54%;height:54%}\n.ad-loader[data-animation=wave] .ad-loader-ring{box-shadow:0 0 0 2px var(--ad-loader-color);opacity:0;animation:ad-loader-wave calc(1.8s/var(--ad-loader-speed)) ease-out infinite}\n.ad-loader[data-animation=wave] .ad-loader-ring+.ad-loader-ring{animation-delay:calc(-.9s/var(--ad-loader-speed))}\n.ad-loader[data-animation=glow] .ad-loader-ring{width:80%;height:80%;background:radial-gradient(closest-side,var(--ad-loader-color),transparent);opacity:.25;animation:ad-loader-glow calc(1.6s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=fill] .ad-loader-img{opacity:.22;filter:grayscale(1) drop-shadow(0 0 calc(var(--ad-loader-size)*.07) color-mix(in srgb,var(--ad-loader-color) 60%,transparent))}\n.ad-loader-fill{width:72%;height:72%;overflow:hidden;transform:translateY(100%);animation:ad-loader-fill calc(2s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader-fill>.ad-loader-img{width:100%;height:100%;object-fit:contain;transform:translateY(-100%);animation:ad-loader-fill-back calc(2s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=shine] .ad-loader-sweep{width:72%;height:72%;overflow:hidden;-webkit-mask:var(--ad-loader-src) center/contain no-repeat;mask:var(--ad-loader-src) center/contain no-repeat}\n.ad-loader-sweep>i{display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ad-loader-color) 65%,white),transparent);transform:translateX(-120%) skewX(-15deg);animation:ad-loader-shine calc(1.6s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=wobble] .ad-loader-img{transform-origin:50% 90%;animation:ad-loader-wobble calc(1.2s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=radar] .ad-loader-img{width:46%;height:46%}\n.ad-loader[data-animation=radar] .ad-loader-ring{background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--ad-loader-color) 70%,transparent));-webkit-mask:radial-gradient(closest-side,transparent 30%,#000 32%);mask:radial-gradient(closest-side,transparent 30%,#000 32%);animation:ad-loader-spin calc(1.4s/var(--ad-loader-speed)) linear infinite}\n.ad-loader[data-animation=palette] .ad-loader-img{animation:ad-loader-palette-image calc(2.8s/var(--ad-loader-speed)) ease-in-out infinite}\n.ad-loader[data-animation=palette] .ad-loader-ring{width:92%;height:92%;border-radius:44% 56% 52% 48%;background:conic-gradient(from 30deg,transparent,var(--ad-loader-color),var(--ad-loader-color-2),var(--ad-loader-color-3),transparent);filter:blur(calc(var(--ad-loader-size)*.055));opacity:.48;mix-blend-mode:screen;animation:ad-loader-spin calc(3.2s/var(--ad-loader-speed)) linear infinite}\n.ad-loader[data-animation=palette] .ad-loader-ring+.ad-loader-ring{width:72%;height:72%;animation-direction:reverse;animation-duration:calc(2.3s/var(--ad-loader-speed));opacity:.32}\n@keyframes ad-loader-spin{to{transform:rotate(1turn)}}\n@keyframes ad-loader-pulse{50%{transform:scale(.78);opacity:.55}}\n@keyframes ad-loader-breathe{50%{transform:scale(1.12)}}\n@keyframes ad-loader-bounce{from{transform:translateY(-28%)}to{transform:translateY(12%) scale(1.06,.94)}}\n@keyframes ad-loader-shadow{from{transform:scale(.55);opacity:.5}to{transform:scale(1);opacity:1}}\n@keyframes ad-loader-flip{0%{transform:perspective(20rem) rotateY(0)}50%{transform:perspective(20rem) rotateY(180deg)}100%{transform:perspective(20rem) rotateY(360deg)}}\n@keyframes ad-loader-orbit{from{transform:rotate(0) translateX(140%) rotate(0)}to{transform:rotate(1turn) translateX(140%) rotate(-1turn)}}\n@keyframes ad-loader-wave{from{transform:scale(.5);opacity:.9}to{transform:scale(1);opacity:0}}\n@keyframes ad-loader-glow{50%{transform:scale(1.2);opacity:.8}}\n@keyframes ad-loader-fill{0%{transform:translateY(100%)}70%,100%{transform:translateY(0)}}\n@keyframes ad-loader-fill-back{0%{transform:translateY(-100%)}70%,100%{transform:translateY(0)}}\n@keyframes ad-loader-shine{0%,30%{transform:translateX(-120%) skewX(-15deg)}100%{transform:translateX(260%) skewX(-15deg)}}\n@keyframes ad-loader-wobble{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}\n@keyframes ad-loader-palette-image{0%,100%{transform:scale(.94);filter:drop-shadow(0 0 calc(var(--ad-loader-size)*.1) var(--ad-loader-color))}33%{filter:drop-shadow(0 0 calc(var(--ad-loader-size)*.13) var(--ad-loader-color-2))}66%{transform:scale(1.05);filter:drop-shadow(0 0 calc(var(--ad-loader-size)*.13) var(--ad-loader-color-3))}}\n";
+/** A music note, used when no picture is given. */
+export declare const loaderDefaultImage: string;
+/** A loading spinner made of your own picture, with one of the supplied animations. */
+export declare function Loader({ src, animation, size, speed, color, palette, label, style, ...p }: LoaderProps): import("react").JSX.Element;

package/dist/components/foundation/LoaderGenerator/LoaderGenerator.d.ts

@@ -0,0 +1,38 @@
+import { type CommonProps } from "../../../core/base";
+import { type LoaderAnimation } from "../Loader/Loader";
+export interface LoaderSettings {
+    src: string;
+    animation: LoaderAnimation;
+    /** rem */
+    size: number;
+    speed: number;
+    color: string;
+    /** Colours extracted from the image for multicolour effects. */
+    palette?: string[];
+}
+export interface LoaderGeneratorProps extends CommonProps {
+    value?: LoaderSettings;
+    defaultValue?: Partial<LoaderSettings>;
+    onValueChange?: (settings: LoaderSettings) => void;
+}
+export declare const loaderGeneratorAnimations: ("flip" | "fill" | "wave" | "palette" | "pulse" | "spin" | "breathe" | "bounce" | "glow" | "shine" | "wobble")[];
+export declare const loaderSizes: {
+    readonly xs: 4.5;
+    readonly sm: 6.5;
+    readonly md: 9;
+    readonly lg: 12;
+};
+export declare const loaderRenderKey: ({ animation }: Pick<LoaderSettings, "animation">) => "flip" | "fill" | "wave" | "palette" | "pulse" | "spin" | "breathe" | "bounce" | "orbit" | "glow" | "shine" | "wobble" | "radar";
+/** Removes large, smoothly connected background regions while preserving enclosed logo details. */
+export declare function removeBackgroundPixels(pixels: Uint8ClampedArray, width: number, height: number, signal?: AbortSignal): Promise<Uint8ClampedArray<ArrayBufferLike>>;
+/** Finds a representative visible colour for rings, highlights and image glow. */
+export declare function pickLoaderAccent(pixels: Uint8ClampedArray): string;
+export declare function pickLoaderPalette(pixels: Uint8ClampedArray, signal?: AbortSignal): Promise<string[]>;
+export declare const loaderCode: (settings: LoaderSettings) => string;
+/** A standalone page with just the loader: its markup and the animation it uses. */
+export declare function loaderHtml({ src, animation, size, speed, color, palette }: LoaderSettings): string;
+/**
+ * Make a loader from your own picture: upload it, pick an animation from live
+ * previews, set size, speed and colour, then copy the code or download a ready page.
+ */
+export declare function LoaderGenerator({ value, defaultValue, onValueChange, ...p }: LoaderGeneratorProps): import("react").JSX.Element;

package/dist/components/foundation/LoaderGenerator/styles.css

@@ -0,0 +1,104 @@
+/* Styles owned by LoaderGenerator (the loader's own animations live in Loader.tsx). */
+.ad-loader-generator {
+  display: grid;
+  gap: var(--ad-space-4);
+  min-width: 0;
+}
+.ad-loader-generator-top {
+  width: 100%;
+}
+.ad-loader-generator-stage {
+  place-items: center;
+  min-height: 14rem;
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.3);
+  border-radius: var(--ad-radius-lg);
+  background:
+    radial-gradient(circle at 50% 45%, rgb(from var(--ad-primary) r g b / 0.12), transparent 60%),
+    var(--ad-neutral-950);
+}
+.ad-loader-generator-controls {
+  align-content: start;
+  gap: var(--ad-space-3);
+  min-width: 0;
+}
+.ad-loader-generator-grid {
+  width: 100%;
+  min-width: 0;
+  padding-block-end: var(--ad-space-1);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary) transparent;
+}
+.ad-loader-generator-option.ad-button {
+  flex: 0 0 8.5rem;
+  flex-direction: column;
+  height: auto;
+  min-height: 6.5rem;
+  justify-items: center;
+  gap: var(--ad-space-2);
+  padding: var(--ad-space-2);
+  border: 0.0625rem solid rgb(from var(--ad-primary) r g b / 0.2);
+  border-radius: var(--ad-radius);
+  background: var(--ad-neutral-900);
+  color: var(--ad-muted);
+  font: inherit;
+  font-size: var(--ad-font-size-caption);
+  cursor: pointer;
+  transition: border-color var(--ad-duration-fast), background var(--ad-duration-fast);
+}
+.ad-loader-generator-option .ad-button-label {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ad-space-2);
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+}
+.ad-loader-generator-option > :is(.ad-button-fx, .ad-button-orbit) {
+  display: none;
+}
+.ad-loader-generator-option:hover {
+  border-color: rgb(from var(--ad-primary) r g b / 0.55);
+}
+.ad-loader-generator-option[aria-checked="true"] {
+  border-color: var(--ad-primary);
+  background: rgb(from var(--ad-primary) r g b / 0.14);
+  color: var(--ad-text);
+  box-shadow: 0 0 0.9rem rgb(from var(--ad-primary) r g b / 0.3);
+}
+.ad-loader-generator-slider {
+  display: flex;
+}
+.ad-loader-generator-toolbar {
+  width: 100%;
+  min-width: 0;
+  padding-block-end: var(--ad-space-1);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ad-primary) transparent;
+}
+.ad-loader-generator-toolbar > .ad-switch {
+  flex: 0 0 auto;
+  min-height: 2.25rem;
+  align-items: center;
+}
+.ad-loader-generator-color {
+  flex: 1 0 10rem;
+  min-width: 0;
+}
+.ad-loader-generator-size {
+  flex: 0 0 14rem;
+}
+.ad-loader-generator-slider {
+  flex: 1 0 10rem;
+}
+.ad-loader-generator-size .ad-segmented-control,
+.ad-loader-generator-size .ad-tabs {
+  width: 100%;
+}

package/dist/components/foundation/ThemeEditor/ThemeEditor.d.ts

@@ -0,0 +1,15 @@
+import { type CommonProps } from "../../../core/base";
+import { type ThemeConfig } from "./themeConfig";
+export interface ThemeEditorProps extends CommonProps {
+    value?: ThemeConfig;
+    defaultValue?: ThemeConfig;
+    onValueChange?: (config: ThemeConfig) => void;
+    /** File name for the exported theme. */
+    fileName?: string;
+}
+/**
+ * Editing a theme. Simple: a ready theme and two colours, everything else is calculated.
+ * Advanced: every token — palette, statuses, shape, type, motion — by hand, with search and
+ * per-token reset. Either way the theme exports to JSON and imports back.
+ */
+export declare function ThemeEditor({ value: controlled, defaultValue, onValueChange, fileName, ...p }: ThemeEditorProps): import("react").JSX.Element;

package/dist/components/foundation/ThemeEditor/styles.css

@@ -0,0 +1,97 @@
+/* Styles owned by ThemeEditor: a toolbar, the simple or the advanced panel, a live sample. */
+.ad-theme-editor {
+  display: grid;
+  gap: var(--ad-space-4);
+  min-width: 0;
+}
+.ad-theme-editor-bar,
+.ad-theme-editor-actions,
+.ad-theme-editor-search {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ad-space-2);
+}
+.ad-theme-editor-bar {
+  justify-content: space-between;
+}
+/* The import picker shows only its button here. */
+.ad-theme-editor-actions > .ad-file-picker > small {
+  display: none;
+}
+.ad-theme-editor-paste {
+  display: grid;
+  gap: var(--ad-space-2);
+  width: min(24rem, calc(100vw - 2rem));
+}
+.ad-theme-editor-simple,
+.ad-theme-editor-advanced {
+  display: grid;
+  gap: var(--ad-space-3);
+}
+.ad-theme-editor-colors {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--ad-space-3);
+}
+/* The swap sits between the two fields, level with their boxes. */
+.ad-theme-editor-swap.ad-icon-button {
+  margin-top: 1.55rem;
+  transition: rotate var(--ad-duration-slow) var(--ad-ease-spring);
+}
+.ad-theme-editor-swap.ad-icon-button:active {
+  rotate: 180deg;
+}
+@media (max-width: 30rem) {
+  .ad-theme-editor-colors {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .ad-theme-editor-swap.ad-icon-button {
+    justify-self: center;
+    margin-top: 0;
+  }
+}
+.ad-theme-editor-strip {
+  display: flex;
+  overflow: hidden;
+  height: 1.75rem;
+  border-radius: var(--ad-radius-pill);
+  box-shadow: inset 0 0 0 0.0625rem #fff2;
+}
+.ad-theme-editor-strip > i {
+  flex: 1;
+}
+.ad-theme-editor-search > .ad-field {
+  flex: 1 1 14rem;
+}
+.ad-theme-editor-tokens {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
+  gap: var(--ad-space-3);
+}
+.ad-theme-editor-token {
+  position: relative;
+  display: grid;
+  gap: 0.15rem;
+  padding: var(--ad-space-2);
+  border-radius: var(--ad-radius);
+  transition: background var(--ad-duration-fast);
+}
+.ad-theme-editor-token[data-changed] {
+  background: rgb(from var(--ad-primary) r g b / 0.1);
+  box-shadow: inset 0 0 0 0.0625rem rgb(from var(--ad-primary) r g b / 0.35);
+}
+.ad-theme-editor-token > code {
+  overflow: hidden;
+  color: var(--ad-muted);
+  font-family: var(--ad-font-family-mono);
+  font-size: var(--ad-font-size-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ad-theme-editor-token > .ad-icon-button {
+  position: absolute;
+  top: var(--ad-space-1);
+  right: var(--ad-space-1);
+}

package/dist/components/foundation/ThemeEditor/themeConfig.d.ts

@@ -0,0 +1,47 @@
+import { type Locale } from "../../../core/i18n";
+import { type ThemeName } from "../ThemeProvider/ThemeProvider";
+/**
+ * A whole theme as data, ready to save, share and load back. "simple": two colours, the rest is
+ * calculated. "advanced": the same plus any token set by hand.
+ */
+export interface ThemeConfig {
+    version: 1;
+    mode: "simple" | "advanced";
+    /** The built-in theme it starts from. */
+    theme: ThemeName;
+    primary?: string;
+    /** Without it (or with `autoSecondary`) the secondary colour is calculated from the primary. */
+    secondary?: string;
+    autoSecondary?: boolean;
+    /** Token overrides by name without the `--ad-` prefix, e.g. `{ "radius": "0.5rem" }`; advanced mode only. */
+    tokens?: Record<string, string>;
+}
+export type ThemeTokenKind = "color" | "length" | "font" | "number" | "time" | "easing";
+export interface ThemeTokenGroup {
+    title: string;
+    tokens: Array<{
+        name: string;
+        label: string;
+        kind: ThemeTokenKind;
+    }>;
+}
+/** Every token the advanced mode can change, in groups. */
+export declare const themeTokenGroups: ThemeTokenGroup[];
+/** A light companion for a primary colour: brighter, a little warmer — for highlights and glints. */
+export declare function deriveSecondary(primary: string): string;
+export declare const defaultThemeConfig: ThemeConfig;
+/** What to hand to ThemeProvider for a config: `<ThemeProvider {...themeProps(config)}>`. */
+export declare function themeProps(config: ThemeConfig): {
+    theme: "ruby" | "green" | "violet" | "light";
+    primary: string;
+    secondary: string;
+    tokens: {
+        [x: string]: string;
+    };
+};
+/** The config as a JSON file's text, stamped so it can be recognised on import. */
+export declare function exportTheme(config: ThemeConfig): string;
+/** Reads a theme back from JSON; throws an Error with a readable message when it is not one. */
+export declare function parseTheme(text: string, locale?: Locale): ThemeConfig;
+/** Current value of a token inside `scope`: colours as #rrggbb, everything else as written. */
+export declare function resolveToken(scope: Element, name: string, kind?: ThemeTokenKind): string;

package/dist/components/foundation/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,32 @@
+import { type CommonProps } from "../../../core/base";
+/** Ready colour pairs: [primary, secondary]. Everything else is derived from the pair. */
+export declare const themes: {
+    readonly ruby: readonly ["#ff244c", "#ff7c97"];
+    readonly light: readonly ["#e0a43a", "#f3d38f"];
+    readonly green: readonly ["#10c99a", "#7cf3d0"];
+    readonly violet: readonly ["#9b5cff", "#d3a8ff"];
+};
+export type ThemeName = keyof typeof themes;
+export interface ThemeProviderProps extends CommonProps {
+    theme?: ThemeName;
+    /** Colour scheme; nested providers inherit it unless they explicitly override it. */
+    colorScheme?: "light" | "dark";
+    /** Main colour; overrides the theme's. The whole palette is built from it and `secondary`. */
+    primary?: string;
+    /** Light accent colour for highlights and glints; overrides the theme's. */
+    secondary?: string;
+    /** Older name for `primary`. */
+    accent?: string;
+    /** Any token by name (`primary-700`, `neutral-900`, `--ad-text`…), for full control. */
+    tokens?: Record<string, string>;
+}
+export declare const useThemePalette: () => {
+    theme: ThemeName;
+    primary: string;
+    secondary: string;
+};
+/**
+ * Applies a theme: the primary/secondary pair sets the palette, painted artwork (canvas and
+ * vector illustrations, drawn in ruby) is turned to the primary's hue.
+ */
+export declare const ThemeProvider: ({ theme, colorScheme, primary, secondary, accent, tokens, style, children, id, className, ...attributes }: ThemeProviderProps) => import("react").JSX.Element;

package/dist/components/foundation/ThemeProvider/styles.css

@@ -0,0 +1,59 @@
+/* Styles owned by ThemeProvider: switching theme morphs the accent colours instead of snapping. */
+@property --ad-red {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ff244c;
+}
+@property --ad-pink {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ff7c97;
+}
+@property --ad-focus {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #ffdce4;
+}
+@property --ad-text {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #f7f5f8;
+}
+@property --ad-muted {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #bfc0d9;
+}
+.ad-theme {
+  --ad-primary: inherit;
+  --ad-secondary: inherit;
+  transition:
+    --ad-red 0.7s ease,
+    --ad-pink 0.7s ease,
+    --ad-focus 0.7s ease,
+    --ad-text 0.7s ease,
+    --ad-muted 0.7s ease;
+}
+
+/* A nested provider keeps the active scheme while still recomputing its palette from its own accent. */
+.ad-theme[data-ad-color-scheme="light"] {
+  color-scheme: light;
+  --ad-neutral-950: oklch(from var(--ad-primary) 0.98 0.006 h);
+  --ad-neutral-900: oklch(from var(--ad-primary) 0.965 0.008 h);
+  --ad-neutral-850: oklch(from var(--ad-primary) 0.94 0.01 h);
+  --ad-neutral-800: oklch(from var(--ad-primary) 0.9 0.012 h);
+  --ad-neutral-700: oklch(from var(--ad-primary) 0.82 0.014 h);
+  --ad-neutral-600: oklch(from var(--ad-primary) 0.7 0.016 h);
+  --ad-neutral-500: oklch(from var(--ad-primary) 0.58 0.018 h);
+  --ad-neutral-400: oklch(from var(--ad-primary) 0.46 0.02 h);
+  --ad-neutral-300: oklch(from var(--ad-primary) 0.34 0.018 h);
+  --ad-neutral-200: oklch(from var(--ad-primary) 0.22 0.014 h);
+  --ad-text: #211b1f;
+  --ad-muted: #6f6269;
+  --ad-surface-input:
+    linear-gradient(135deg, var(--ad-neutral-950), var(--ad-neutral-900)) padding-box,
+    linear-gradient(125deg, var(--ad-primary), var(--ad-secondary) 50%, var(--ad-primary)) border-box;
+  --ad-shadow-input:
+    inset 0 0.0625rem 0.125rem rgb(from var(--ad-text) r g b / 0.08),
+    0 0.1875rem 0.4375rem rgb(from var(--ad-primary) r g b / 0.12);
+}

package/dist/components/foundation/Typography/Typography.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties, ElementType, ReactNode } from "react";
+import { type CommonProps } from "../../../core/base";
+export type TypographyVariant = "display" | "h1" | "h2" | "h3" | "title" | "subtitle" | "body" | "body-sm" | "label" | "caption" | "eyebrow" | "mono";
+export type TypographyTone = "default" | "muted" | "accent" | "success" | "warning" | "danger";
+export type TypographyWeight = "regular" | "medium" | "semibold" | "bold";
+export interface TypographyProps extends Omit<CommonProps, "tone"> {
+    as?: ElementType;
+    variant?: TypographyVariant;
+    tone?: TypographyTone;
+    weight?: TypographyWeight;
+    align?: CSSProperties["textAlign"];
+    truncate?: boolean;
+    text?: ReactNode;
+    /** Hover text; a truncated plain string shows itself in full by default. */
+    title?: string;
+}
+export declare function Typography({ as, variant, tone, weight, align, truncate, text, title, children, style, ...props }: TypographyProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/dist/components/foundation/Typography/styles.css

@@ -0,0 +1,115 @@
+/* Typography owns the complete Neo UI type scale. */
+.ad-typography {
+  margin: 0;
+  color: var(--ad-text);
+  font-family: var(--ad-font-family-sans);
+  font-size: var(--ad-font-size-body);
+  font-weight: var(--ad-font-weight-regular);
+  line-height: var(--ad-line-height-body);
+}
+
+.ad-typography[data-ad-variant="display"] {
+  font-size: var(--ad-font-size-display);
+  font-weight: var(--ad-font-weight-bold);
+  line-height: var(--ad-line-height-display);
+  letter-spacing: var(--ad-letter-spacing-display);
+}
+.ad-typography[data-ad-variant="h1"] {
+  font-size: var(--ad-font-size-h1);
+  font-weight: var(--ad-font-weight-bold);
+  line-height: var(--ad-line-height-heading);
+  letter-spacing: var(--ad-letter-spacing-heading);
+}
+.ad-typography[data-ad-variant="h2"] {
+  font-size: var(--ad-font-size-h2);
+  font-weight: var(--ad-font-weight-semibold);
+  line-height: var(--ad-line-height-heading);
+  letter-spacing: var(--ad-letter-spacing-heading);
+}
+.ad-typography[data-ad-variant="h3"] {
+  font-size: var(--ad-font-size-h3);
+  font-weight: var(--ad-font-weight-semibold);
+  line-height: var(--ad-line-height-title);
+  letter-spacing: var(--ad-letter-spacing-title);
+}
+.ad-typography[data-ad-variant="title"] {
+  font-size: var(--ad-font-size-title);
+  font-weight: var(--ad-font-weight-semibold);
+  line-height: var(--ad-line-height-title);
+  letter-spacing: var(--ad-letter-spacing-title);
+}
+.ad-typography[data-ad-variant="subtitle"] {
+  font-size: var(--ad-font-size-subtitle);
+  font-weight: var(--ad-font-weight-medium);
+  line-height: var(--ad-line-height-body);
+}
+.ad-typography[data-ad-variant="body"] {
+  font-size: var(--ad-font-size-body);
+  line-height: var(--ad-line-height-body);
+}
+.ad-typography[data-ad-variant="body-sm"] {
+  font-size: var(--ad-font-size-body-sm);
+  line-height: var(--ad-line-height-body);
+}
+.ad-typography[data-ad-variant="label"] {
+  font-size: var(--ad-font-size-label);
+  font-weight: var(--ad-font-weight-semibold);
+  line-height: var(--ad-line-height-compact);
+  letter-spacing: var(--ad-letter-spacing-label);
+}
+.ad-typography[data-ad-variant="caption"] {
+  font-size: var(--ad-font-size-caption);
+  line-height: var(--ad-line-height-compact);
+}
+.ad-typography[data-ad-variant="eyebrow"] {
+  font-size: var(--ad-font-size-caption);
+  font-weight: var(--ad-font-weight-bold);
+  line-height: var(--ad-line-height-compact);
+  letter-spacing: var(--ad-letter-spacing-eyebrow);
+  text-transform: uppercase;
+}
+.ad-typography[data-ad-variant="mono"] {
+  font-family: var(--ad-font-family-mono);
+  font-size: var(--ad-font-size-body-sm);
+  line-height: var(--ad-line-height-body);
+  font-variant-numeric: tabular-nums;
+}
+
+.ad-typography[data-ad-tone="muted"] {
+  color: var(--ad-muted);
+}
+.ad-typography[data-ad-tone="accent"] {
+  color: var(--ad-pink);
+  text-shadow: 0 0 0.875rem rgb(from var(--ad-primary) r g b / 0.3);
+}
+.ad-typography[data-ad-tone="success"] {
+  color: var(--ad-success);
+}
+.ad-typography[data-ad-tone="warning"] {
+  color: var(--ad-warning);
+}
+.ad-typography[data-ad-tone="danger"] {
+  color: var(--ad-secondary);
+}
+
+.ad-typography[data-ad-weight="regular"] {
+  font-weight: var(--ad-font-weight-regular);
+}
+.ad-typography[data-ad-weight="medium"] {
+  font-weight: var(--ad-font-weight-medium);
+}
+.ad-typography[data-ad-weight="semibold"] {
+  font-weight: var(--ad-font-weight-semibold);
+}
+.ad-typography[data-ad-weight="bold"] {
+  font-weight: var(--ad-font-weight-bold);
+}
+.ad-typography[data-ad-truncate="true"] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Titles take the heading font (the text font unless a theme sets a display face). */
+.ad-typography:is([data-ad-variant="display"], [data-ad-variant="h1"], [data-ad-variant="h2"], [data-ad-variant="h3"]) {
+  font-family: var(--ad-font-family-heading);
+}

package/dist/components/layout/Avatar/Avatar.d.ts

@@ -0,0 +1,2 @@
+import { type AvatarProps } from "../shared";
+export declare const Avatar: ({ variant, src, badge, presence, ...p }: AvatarProps) => import("react").JSX.Element;

package/dist/components/layout/Avatar/HostSeal.d.ts

@@ -0,0 +1,5 @@
+/** The host's neon seal: a crown (or the host's photo) inside two counter-rotating rings of light. */
+export declare function HostSeal({ photo, name }: {
+    photo?: string;
+    name?: string;
+}): import("react").JSX.Element;