radiant-docs 0.1.30 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "radiant-docs",
-  "version": "0.1.30",
+  "version": "0.1.33",
   "description": "CLI tool for previewing Radiant documentation locally",
   "type": "module",
   "bin": {

package/template/src/components/user/Accordion.astro

@@ -11,6 +11,15 @@ interface Props {
 
 const { title, icon, defaultOpen = false, titleSize } = Astro.props;
 
+const TITLE_SIZE_CLASS = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+} as const;
+
 validateProps(
   "Accordion",
   { title, icon, defaultOpen, titleSize },
@@ -51,7 +60,7 @@ validateProps(
       class="pb-4 pt-4 group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800"
     >
       {icon && <Icon name={icon} />}
-      <span class:list={["flex-1", titleSize && `text-${titleSize}`]}
+      <span class:list={["flex-1", titleSize && TITLE_SIZE_CLASS[titleSize]]}
         >{title}</span
       >
       <Icon

package/template/src/components/user/Callout.astro

@@ -4,10 +4,10 @@ import warningIcon from "../../assets/icons/warning.svg?url";
 import infoIcon from "../../assets/icons/info.svg?url";
 import lightbulbIcon from "../../assets/icons/lightbulb.svg?url";
 import dangerIcon from "../../assets/icons/danger.svg?url";
-import checkIcon from "../../assets/icons/check.svg?url";
+import successIcon from "../../assets/icons/check.svg?url";
 import { validateProps } from "../../lib/component-error";
 
-type CalloutType = "warning" | "info" | "tip" | "danger" | "check";
+type CalloutType = "warning" | "info" | "tip" | "danger" | "success";
 
 interface Props {
   type?: CalloutType;
@@ -18,31 +18,36 @@ interface Props {
 
 const typeDefaults: Record<
   CalloutType,
-  { icon: string; color: string; title: string }
+  { icon: string; color: string; iconColor: string; title: string }
 > = {
   warning: {
     icon: warningIcon,
     color: "bg-amber-500",
+    iconColor: "text-amber-500",
     title: "Warning",
   },
   info: {
     icon: infoIcon,
     color: "bg-sky-600/80",
+    iconColor: "text-sky-600/80",
     title: "Info",
   },
   tip: {
     icon: lightbulbIcon,
     color: "bg-yellow-500",
+    iconColor: "text-yellow-500",
     title: "Tip",
   },
   danger: {
     icon: dangerIcon,
     color: "bg-red-600",
+    iconColor: "text-red-600",
     title: "Danger",
   },
-  check: {
-    icon: checkIcon,
+  success: {
+    icon: successIcon,
     color: "bg-green-600",
+    iconColor: "text-green-600",
     title: "Success",
   },
 };
@@ -53,7 +58,7 @@ validateProps(
   "Callout",
   { type, title, icon, color },
   {
-    type: { enum: ["warning", "info", "tip", "danger", "check"] },
+    type: { enum: ["warning", "info", "tip", "danger", "success"] },
     title: { type: "string" },
     icon: { type: "string" },
     color: { type: "string" },
@@ -82,7 +87,11 @@ const resolvedTitle = title ?? defaults.title;
   <div class="flex items-center gap-2 not-prose mb-3">
     {
       icon ? (
-        <Icon name={icon} class="size-4" style={color && { color: color }} />
+        <Icon
+          name={icon}
+          class={`size-4 ${defaults.iconColor}`}
+          style={color && { color: color }}
+        />
       ) : (
         <img src={defaults.icon} alt="" width="16" height="16" class="" />
       )

package/template/src/lib/component-error.ts

@@ -117,7 +117,7 @@ export function validateType(
  *
  * @example
  * validateProps("Callout", Astro.props, {
- *   type: { enum: ["warning", "info", "tip", "danger", "check"] },
+ *   type: { enum: ["warning", "info", "tip", "danger", "success"] },
  *   title: { type: "string" },
  * }, Astro.url.pathname);
  */