radiant-docs 0.1.7 → 0.1.8

package/template/src/components/ui/Field.astro

@@ -8,6 +8,12 @@ interface Props {
   required?: boolean;
   optional?: boolean;
   enum?: (string | number)[];
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  exclusiveMinimum?: number;
+  exclusiveMaximum?: number;
 }
 
 const {
@@ -17,53 +23,130 @@ const {
   required,
   optional,
   enum: enumValues,
+  minLength,
+  maxLength,
+  minimum,
+  maximum,
+  exclusiveMinimum,
+  exclusiveMaximum,
 } = Astro.props;
 
 const formattedDescription = description
   ? await renderMarkdown(description)
   : null;
+const hasExclusiveMinimum = typeof exclusiveMinimum === "number";
+const hasInclusiveMinimum = typeof minimum === "number";
+const hasExclusiveMaximum = typeof exclusiveMaximum === "number";
+const hasInclusiveMaximum = typeof maximum === "number";
+
+const lowerBound = hasExclusiveMinimum
+  ? exclusiveMinimum
+  : hasInclusiveMinimum
+    ? minimum
+    : undefined;
+const upperBound = hasExclusiveMaximum
+  ? exclusiveMaximum
+  : hasInclusiveMaximum
+    ? maximum
+    : undefined;
+
+let numericRangeLabel: string | undefined;
+if (lowerBound !== undefined && upperBound !== undefined) {
+  const lowerOperator = hasExclusiveMinimum ? "<" : "<=";
+  const upperOperator = hasExclusiveMaximum ? "<" : "<=";
+  numericRangeLabel = `${lowerBound} ${lowerOperator} value ${upperOperator} ${upperBound}`;
+} else if (lowerBound !== undefined) {
+  const lowerOperator = hasExclusiveMinimum ? ">" : ">=";
+  numericRangeLabel = `value ${lowerOperator} ${lowerBound}`;
+} else if (upperBound !== undefined) {
+  const upperOperator = hasExclusiveMaximum ? "<" : "<=";
+  numericRangeLabel = `value ${upperOperator} ${upperBound}`;
+}
+
+const hasMinLength = typeof minLength === "number";
+const hasMaxLength = typeof maxLength === "number";
+let stringLengthLabel: string | undefined;
+if (hasMinLength && hasMaxLength) {
+  stringLengthLabel = `${minLength} <= length <= ${maxLength}`;
+} else if (hasMinLength) {
+  stringLengthLabel = `length >= ${minLength}`;
+} else if (hasMaxLength) {
+  stringLengthLabel = `length <= ${maxLength}`;
+}
 ---
 
-<div>
-  <div class="flex items-center gap-2">
-    <h5 class="font-normal font-mono text-[15px] text-neutral-400">
-        {name.split(".").map((part, i, a) => (
-        <>{i > 0 && <span class="inline">.</span>}<span class:list={["inline", a.length - 1 === i && "text-neutral-900 font-semibold"]}>{part}</span></>
-      ))}
-      <!-- {name.split(".").map((part, i, a) => (
-       <>{i > 0 && <span class="inline">.</span>}<span class:list={["inline", a.length - 1 === i && "text-neutral-900 font-semibold"]}>{part}</span></>
-     ))} -->
+<div class="space-y-3">
+  <div class="flex flex-wrap items-center gap-x-2 gap-y-px">
+    <h5 class="font-medium leading-4">
+      {name}
     </h5>
     <code
-      class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 rounded-md"
+      class="text-[10px] font-medium text-neutral-500 border border-neutral-200/80 bg-neutral-50 px-1 rounded-sm"
       >{type}</code
     >
     {
       required && (
-        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-2 text-[11px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit">
+        <div class="text-red-700/70 bg-red-50 border border-red-700/10 rounded-full px-1.5 text-[10px] font-mono leading-none py-0.5 pb-0.5 font-[450] h-fit">
           required
         </div>
       )
     }
     {
       optional && (
-        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-2 text-[13px] leading-none py-px pb-0.5 font-[450] h-fit">
+        <div class="text-blue-700/70 bg-blue-50 border border-blue-700/10 rounded-full px-1.5 font-mono text-[10px] leading-none py-0.5 pb-0.5 font-[450] h-fit">
           optional
         </div>
       )
     }
   </div>
+
+  {
+    formattedDescription && (
+      <div
+        class="prose-rules prose-sm! leading-5! text-neutral-500 **:text-neutral-500"
+        set:html={formattedDescription}
+      />
+    )
+  }
   {
     enumValues && (
-      <div class="text-sm mt-1.5">
-        <span class="font-medium.">Options:</span>
-        {enumValues.map((v, i, a) => (
-          <>
-            <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">{v}</code>{a.length - 2 === i ? " or " : a.length - 1 !== i && ", "}
-          </>
-        ))}
+      <div class="text-sm flex flex-wrap items-center gap-x-1 gap-y-0.5">
+        <span class="font-medium text-xs">Options:</span>
+        {enumValues.map((v, i, a) => {
+          return (
+            <div class="flex">
+              <span class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+                <code>{v}</code>
+              </span>
+              {a.length - 2 === i ? (
+                <span class="ml-1"> or </span>
+              ) : (
+                a.length - 1 !== i && <span>, </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    )
+  }
+  {
+    numericRangeLabel && (
+      <div class="text-sm">
+        <span class="font-medium text-xs">Range:</span>
+        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+          {numericRangeLabel}
+        </code>
+      </div>
+    )
+  }
+  {
+    stringLengthLabel && (
+      <div class="text-sm">
+        <span class="font-medium text-xs">Length:</span>
+        <code class="text-[11px] font-medium text-neutral-600 border border-neutral-200 bg-neutral-50 px-1 py-px rounded-md">
+          {stringLengthLabel}
+        </code>
       </div>
     )
   }
-  <div class="mt-1.5 prose-rules prose-sm!" set:html={formattedDescription} />
 </div>

package/template/src/components/ui/Icon.astro

@@ -0,0 +1,32 @@
+---
+import { Icon as AstroIcon } from "astro-icon/components";
+
+interface Props {
+  name: string | undefined | null;
+  class?: string;
+  [key: string]: any;
+}
+
+const { name, class: className, ...rest } = Astro.props;
+
+if (!name) return null;
+
+const isUrl = name.startsWith("http://") || name.startsWith("https://");
+const isIconify = name.includes(":");
+const isLocal = !isUrl && !isIconify;
+
+// Normalize local path: if it doesn't start with /, add it
+// Files from src/content/docs are copied to public root by copyContentAssets plugin
+let src = name;
+if (isLocal) {
+  src = name.startsWith("/") ? name : `/${name}`;
+}
+---
+
+{
+  isUrl || isLocal ? (
+    <img src={src} class={className} {...rest} alt="" loading="lazy" />
+  ) : (
+    <AstroIcon name={name} class={className} {...rest} />
+  )
+}

package/template/src/components/ui/ListChevronsToggle.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  class?: string;
+  [key: string]: any;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<svg
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class={className}
+  {...rest}
+>
+  <path d="M3 5h8M3 12h8M3 19h8"></path>
+  <polyline
+    points="15 8 18 5 21 8"
+    class="transition duration-200"
+    x-bind:style="expanded ? 'transform: rotate(180deg); transform-origin: 18px 6.5px;' : 'transform: rotate(0deg); transform-origin: 18px 6.5px;'"
+  ></polyline>
+  <polyline
+    points="15 16 18 19 21 16"
+    class="transition duration-200"
+    x-bind:style="expanded ? 'transform: rotate(-180deg); transform-origin: 18px 17.5px;' : 'transform: rotate(0deg); transform-origin: 18px 17.5px;'"
+  ></polyline>
+</svg>

package/template/src/components/ui/Tag.astro

@@ -1,5 +1,5 @@
 <span
-  class="text-[9px] bg-blue-100 text-blue-800 border border-blue-800/20 px-1.5 py-px rounded-full tracking-wide font-bold"
+  class="text-[9px] bg-blue-100/70 text-blue-800/90 border border-blue-800/10 px-1.5 py-px rounded-full tracking-wide font-semibold shrink-0 normal-case"
 >
   <slot />
 </span>

package/template/src/components/user/{Accordian.astro → Accordion.astro}

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import Icon from "../ui/Icon.astro";
 import { validateProps } from "../../lib/component-error";
 
 interface Props {
@@ -20,7 +20,7 @@ validateProps(
     defaultOpen: { type: "boolean" },
     titleSize: { enum: ["xs", "sm", "md", "lg", "xl", "2xl"] },
   },
-  Astro.url.pathname
+  Astro.url.pathname,
 );
 ---
 
@@ -41,16 +41,16 @@ validateProps(
 }`
   x-init="id = (typeof register === 'function') ? register() : Math.random()"
   role="region"
-  class="block border-b border-neutral-800/10 pb-4 pt-4 first:pt-0 last:border-b-0 last:pb-0"
+  class="block border-b border-neutral-800/10 last:border-b-0 [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
 >
   <h4 class="not-prose">
     <button
       type="button"
       x-on:click="expanded = !expanded"
       :aria-expanded="expanded"
-      class="group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800"
+      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={`lucide:${icon}`} />}
+      {icon && <Icon name={icon} />}
       <span class:list={["flex-1", titleSize && `text-${titleSize}`]}
         >{title}</span
       >
@@ -62,7 +62,7 @@ validateProps(
     </button>
   </h4>
   <div x-show="expanded" x-collapse>
-    <div class="pt-2 *:first:mt-0 *:last:mb-0">
+    <div class="pb-4 *:first:mt-0 *:last:mb-0">
       <slot />
     </div>
   </div>

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

@@ -1,5 +1,5 @@
 ---
-import { Icon } from "astro-icon/components";
+import Icon from "../ui/Icon.astro";
 import warningIcon from "../../assets/icons/warning.svg?url";
 import infoIcon from "../../assets/icons/info.svg?url";
 import lightbulbIcon from "../../assets/icons/lightbulb.svg?url";
@@ -58,7 +58,7 @@ validateProps(
     icon: { type: "string" },
     color: { type: "string" },
   },
-  Astro.url.pathname
+  Astro.url.pathname,
 );
 
 const defaults = typeDefaults[type];
@@ -79,14 +79,10 @@ const resolvedTitle = title ?? defaults.title;
     style={color && { backgroundColor: color }}
   >
   </div>
-  <div class="flex items-center gap-2 not-prose">
+  <div class="flex items-center gap-2 not-prose mb-3">
     {
       icon ? (
-        <Icon
-          name={`lucide:${icon}`}
-          class=""
-          style={color && { color: color }}
-        />
+        <Icon name={icon} class="size-4" style={color && { color: color }} />
       ) : (
         <img src={defaults.icon} alt="" width="16" height="16" class="" />
       )
@@ -95,7 +91,7 @@ const resolvedTitle = title ?? defaults.title;
       {resolvedTitle}
     </h6>
   </div>
-  <div class="[&>p]:m-0 [&>p:not(:last-child)]:mb-2">
+  <div class="**:first:mt-0! **:last:mb-0! text-sm">
     <slot />
   </div>
 </aside>