radiant-docs 0.1.48 → 0.1.50

package/template/src/lib/validation.ts

@@ -131,7 +131,7 @@ const INTERNAL_ONLY_COMPONENTS = new Set(["ComponentPreview"]);
 export type NavPage = {
   page: string;
   icon?: string | null;
-  tag?: string;
+  tag?: NavTag;
   title?: string;
 };
 export type NavOpenApiPageRef = {
@@ -141,14 +141,14 @@ export type NavOpenApiPageRef = {
 export type NavOpenApiPage = {
   openapi: NavOpenApiPageRef;
   title?: string;
-  tag?: string;
+  tag?: NavTag;
 };
 export type NavGroup = {
   group: string;
   pages: (string | NavPage | NavGroup | NavOpenApiPage)[];
   icon?: string | null;
   expanded?: boolean; // need to add this logic
-  tag?: string;
+  tag?: NavTag;
 };
 export type NavOpenApi = {
   source: string;
@@ -199,6 +199,16 @@ export type Logo = {
   href?: string;
   pill?: string | false;
 };
+export type ThemeColorByMode = {
+  light?: string;
+  dark?: string;
+};
+export type NavTag =
+  | string
+  | {
+      text: string;
+      color?: string | ThemeColorByMode;
+    };
 export const BASE_COLOR_OPTIONS = [
   "slate",
   "gray",
@@ -217,10 +227,6 @@ export type BaseColorByMode = {
 };
 export const DEFAULT_THEME_COLOR_LIGHT = "#171717";
 export const DEFAULT_THEME_COLOR_DARK = "#f5f5f5";
-export type ThemeColorByMode = {
-  light?: string;
-  dark?: string;
-};
 export type CardCoverTheme = {
   colors?: string[];
   colorSeed?: string;
@@ -241,11 +247,15 @@ export type CodeSyntaxThemeConfig =
 export type CodeTheme = {
   syntaxTheme?: CodeSyntaxThemeConfig;
 };
+export type TagTheme = {
+  color?: string | ThemeColorByMode;
+};
 export type DocsTheme = {
   baseColor?: BaseColorOption | BaseColorByMode;
   themeColor?: string | ThemeColorByMode;
   card?: CardTheme;
   code?: CodeTheme;
+  tag?: TagTheme;
 };
 export type AssistantIcon = {
   src?: string;
@@ -428,6 +438,71 @@ function normalizeThemeColorConfig(
   };
 }
 
+function normalizeNavTagConfig(
+  value: unknown,
+  currentPath: Path,
+  label: string,
+): NavTag | undefined {
+  if (value === undefined || value === null) return undefined;
+
+  if (typeof value === "string") {
+    const trimmedText = value.trim();
+    if (trimmedText.length === 0) {
+      throwConfigError(`${label} cannot be empty.`, currentPath);
+    }
+    return trimmedText;
+  }
+
+  checkType(value, "object", currentPath, label);
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throwConfigError(
+      `${label} must be a string or an object with text and optional color.`,
+      currentPath,
+    );
+  }
+
+  const tagConfig = value as Record<string, unknown>;
+  const allowedKeys = new Set(["text", "color"]);
+  for (const key of Object.keys(tagConfig)) {
+    if (!allowedKeys.has(key)) {
+      throwConfigError(`${label} object only supports 'text' and 'color'.`, [
+        ...currentPath,
+        key,
+      ]);
+    }
+  }
+
+  checkType(tagConfig.text, "string", [...currentPath, "text"], `${label} text`);
+  if (typeof tagConfig.text !== "string") {
+    throwConfigError(`${label} text must be a string.`, [
+      ...currentPath,
+      "text",
+    ]);
+  }
+
+  const trimmedText = tagConfig.text.trim();
+  if (trimmedText.length === 0) {
+    throwConfigError(`${label} text cannot be empty.`, [
+      ...currentPath,
+      "text",
+    ]);
+  }
+
+  const color =
+    tagConfig.color !== undefined
+      ? normalizeThemeColorConfig(
+          tagConfig.color,
+          [...currentPath, "color"],
+          `${label} color`,
+        )
+      : undefined;
+
+  return {
+    text: trimmedText,
+    ...(color !== undefined ? { color } : {}),
+  };
+}
+
 function normalizeHexColorArray(
   value: unknown,
   currentPath: Path,
@@ -909,6 +984,7 @@ async function validateNavigationNode(
     checkType(item.expanded, "boolean", [...path, "expanded"], "Expanded");
 
     validateIcon(item.icon, [...path, "icon"]);
+    item.tag = normalizeNavTagConfig(item.tag, [...path, "tag"], "Group tag");
 
     // Check if pages array exists and validate children
     if (!item.pages)
@@ -947,6 +1023,7 @@ async function validateNavigationNode(
 
     // Validate optional title
     checkType(item.title, "string", [...path, "title"], "Page title");
+    item.tag = normalizeNavTagConfig(item.tag, [...path, "tag"], "Page tag");
 
     // Check D.2/D.3: Page cannot have group properties
     if ("expanded" in item)
@@ -971,7 +1048,11 @@ async function validateNavigationNode(
 
     await validateNavOpenApiPage(item.openapi, [...path, "openapi"]);
     checkType(item.title, "string", [...path, "title"], "Open API page title");
-    checkType(item.tag, "string", [...path, "tag"], "Open API page tag");
+    item.tag = normalizeNavTagConfig(
+      item.tag,
+      [...path, "tag"],
+      "Open API page tag",
+    );
 
     if ("expanded" in item)
       throwConfigError("Open API page items cannot have 'expanded'.", [
@@ -1855,6 +1936,37 @@ function validateTheme(theme: DocsConfig["theme"]): void {
     }
   }
 
+  if (theme.tag !== undefined) {
+    checkType(theme.tag, "object", ["theme", "tag"], "Theme tag");
+    if (
+      typeof theme.tag !== "object" ||
+      theme.tag === null ||
+      Array.isArray(theme.tag)
+    ) {
+      throwConfigError("Theme tag must be an object.", ["theme", "tag"]);
+    }
+
+    const tagTheme = theme.tag as TagTheme & Record<string, unknown>;
+    const allowedTagKeys = new Set(["color"]);
+    for (const key of Object.keys(tagTheme)) {
+      if (!allowedTagKeys.has(key)) {
+        throwConfigError("Theme tag configuration only supports 'color'.", [
+          "theme",
+          "tag",
+          key,
+        ]);
+      }
+    }
+
+    if (tagTheme.color !== undefined) {
+      tagTheme.color = normalizeThemeColorConfig(
+        tagTheme.color,
+        ["theme", "tag", "color"],
+        "Theme tag color",
+      );
+    }
+  }
+
   if (theme.card !== undefined) {
     checkType(theme.card, "object", ["theme", "card"], "Theme card");
     if (

package/template/src/styles/global.css

@@ -55,12 +55,14 @@
   --border-light: var(--color-neutral-100);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  --rd-panel-transition-duration-ms: 400;
+  --rd-panel-transition-duration: 400ms;
+  --rd-panel-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
   --rd-code-surface: color-mix(
     in srgb,
     var(--color-neutral-100) 60%,
     var(--background) 40%
   );
-  --rd-code-header-surface: var(--color-white);
   --rd-code-tab-edge-bg: var(--rd-code-surface);
   --rd-code-tab-edge-border: color-mix(
     in oklab,
@@ -94,11 +96,6 @@
     var(--color-neutral-800) 55%,
     var(--color-neutral-900) 45%
   );
-  --rd-code-header-surface: color-mix(
-    in srgb,
-    var(--color-neutral-900) 100%,
-    var(--rd-code-surface) 0%
-  );
   --rd-code-tab-edge-bg: var(--rd-code-surface);
   --rd-code-tab-edge-border: color-mix(
     in oklab,