@drawnagency/primitives 0.1.49 → 0.1.51

package/src/components/sections/Button/index.tsx

@@ -1,14 +1,14 @@
 import { defineSection } from "../../../lib/registry";
 import { z } from "zod";
 import { RectangleHorizontal } from "lucide-react";
+import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
 import CTAButton from "./CTAButton";
 
 const schema = z.object({
   type: z.literal("button"),
   content: z.object({
     text: z.string(),
-    href: z.string().optional(),
-    target: z.string().optional(),
+    link: LinkValueSchema.optional(),
     download: z.boolean().optional(),
   }),
 });
@@ -21,8 +21,7 @@ export default defineSection({
   component: ({ content, onChange }) => (
     <CTAButton
       text={content.content.text}
-      href={content.content.href}
-      target={content.content.target}
+      link={content.content.link}
       download={content.content.download}
       onChange={onChange ? (c) => onChange(c as typeof content) : undefined}
     />
@@ -30,11 +29,7 @@ export default defineSection({
   defaults: () => ({ type: "button" as const, content: { text: "Button" } }),
   getLabel: (content) => content.content.text,
   settings: {
-    href: { type: "text", label: "URL", default: "", target: "content", placeholder: "https://..." },
-    target: {
-      type: "select", label: "Target", default: "_self", target: "content",
-      options: [{ label: "Same tab (_self)", value: "_self" }, { label: "New tab (_blank)", value: "_blank" }],
-    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
     download: { type: "checkbox", label: "Download link", default: false, target: "content" },
   },
 });

package/src/components/shared/Input.tsx

@@ -5,13 +5,15 @@ import { FormLabel } from "./FormLabel";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
   label: string;
   onChange: (value: string) => void;
+  error?: string;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, value, onChange, type = "text", className, disabled, ...rest },
+  { label, value, onChange, type = "text", className, disabled, error, ...rest },
   ref,
 ) {
   const id = useId();
+  const errorId = `${id}-error`;
   return (
     <div className={className}>
       <FormLabel htmlFor={id}>{label}</FormLabel>
@@ -22,13 +24,22 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         value={value}
         onChange={(e) => onChange(e.target.value)}
         disabled={disabled}
+        aria-invalid={error ? true : undefined}
+        aria-describedby={error ? errorId : undefined}
         className={cn(
-          "w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast",
-          "focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast",
+          "w-full rounded border bg-base px-3 py-2 text-sm text-base-contrast focus:outline-none focus:ring-1",
+          error
+            ? "border-red-600 focus:border-red-600 focus:ring-red-600"
+            : "border-base-200 focus:border-base-contrast focus:ring-base-contrast",
           disabled && "cursor-not-allowed opacity-50",
         )}
         {...rest}
       />
+      {error && (
+        <p id={errorId} className="mt-1 text-xs text-red-600">
+          {error}
+        </p>
+      )}
     </div>
   );
 });

package/src/components/shared/LinkField.tsx

@@ -0,0 +1,90 @@
+import { FormLabel } from "./FormLabel";
+import { Input } from "./Input";
+import { Select } from "./Select";
+import { usePages } from "./PagesContext";
+import type { LinkValue } from "../../schemas/link";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  label: string;
+  value: LinkValue;
+  onChange: (value: LinkValue) => void;
+}
+
+const TARGET_OPTIONS = [
+  { label: "Same tab (_self)", value: "_self" },
+  { label: "New tab (_blank)", value: "_blank" },
+];
+
+export function LinkField({ label, value, onChange }: Props) {
+  const { pages, getPageHeadings } = usePages();
+  const isInternal = value.kind === "internal";
+
+  function setMode(kind: "external" | "internal") {
+    if (kind === value.kind) return;
+    // Internal links always open in the same tab — no target choice offered.
+    onChange(kind === "external"
+      ? { kind: "external", href: "", target: value.target }
+      : { kind: "internal", pageId: "", anchorSectionId: null, target: "_self" });
+  }
+
+  const pageId = isInternal ? value.pageId : "";
+  const headings = pageId ? getPageHeadings(pageId) : [];
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FormLabel>{label}</FormLabel>
+      <div className="flex gap-2" role="tablist">
+        {(["external", "internal"] as const).map((kind) => (
+          <button
+            key={kind}
+            type="button"
+            role="tab"
+            aria-selected={value.kind === kind}
+            onClick={() => setMode(kind)}
+            className={cn(
+              "cursor-pointer rounded border px-3 py-1 text-sm capitalize",
+              value.kind === kind ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+            )}
+          >
+            {kind === "external" ? "External URL" : "Internal page"}
+          </button>
+        ))}
+      </div>
+
+      {value.kind === "external" ? (
+        <Input
+          label="URL"
+          value={value.href}
+          placeholder="https://..."
+          onChange={(href) => onChange({ kind: "external", href, target: value.target })}
+        />
+      ) : (
+        <>
+          <Select
+            label="Page"
+            value={value.pageId}
+            options={[{ label: "Select a page…", value: "" }, ...pages.map((p) => ({ label: p.title, value: p.id }))]}
+            onChange={(pid) => onChange({ kind: "internal", pageId: pid, anchorSectionId: null, target: value.target })}
+          />
+          <Select
+            label="Section"
+            value={value.anchorSectionId ?? ""}
+            disabled={!pageId}
+            options={[{ label: "None (top of page)", value: "" }, ...headings.map((h) => ({ label: h.label, value: h.id }))]}
+            onChange={(anchor) => onChange({ kind: "internal", pageId, anchorSectionId: anchor || null, target: value.target })}
+          />
+        </>
+      )}
+
+      {value.kind === "external" && (
+        <Select
+          label="Opens in"
+          value={value.target}
+          options={TARGET_OPTIONS}
+          onChange={(t) => onChange({ ...value, target: t as "_self" | "_blank" })}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/shared/Navigation.tsx

@@ -1,38 +1,38 @@
 import { useState, useCallback, useEffect, useRef } from "react";
+import { ChevronRight } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Toggle } from "./Toggle";
-import type { NavItem } from "../../lib/nav";
-import { editModeEvent, navChangeEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
+import type { SiteNav, NavItem } from "../../lib/nav";
+import { editModeEvent, siteNavChangeEvent, pageSelectEvent, darkModeEvent, historySelectEvent } from "../../lib/events";
 import { useActiveHeadings } from "../../hooks/useActiveHeadings";
 import { formatDate } from "../../lib/timestamp";
 import { Popover } from "./Popover";
 import { HistoryPopover } from "./HistoryPopover";
 
 interface Props {
-  navLinks: NavItem[];
+  siteNav: SiteNav;
   siteName: string;
   darkMode: "light" | "dark" | "optional";
   lastUpdated: string | null;
+  // Optional same-island handler (tests). In production the editor nav is a
+  // separate island from EditorShell, so a click dispatches pageSelectEvent.
+  onPageSelect?: (pageId: string) => void;
 }
 
-export default function Navigation({ navLinks: initialNavLinks, siteName, darkMode, lastUpdated }: Props) {
+export default function Navigation({ siteNav: initialNav, siteName, darkMode, lastUpdated, onPageSelect }: Props) {
   const [isOpen, setIsOpen] = useState(false);
-  // Must start false to match SSR (where `window` is undefined). Reading window
-  // in the initializer makes the first client render disagree with the server
-  // (edit branch vs view branch) → React hydration mismatch (#418). Set it from
-  // the pathname in the mount effect below instead.
   const [isEditMode, setIsEditMode] = useState(false);
   const [currentDarkMode, setCurrentDarkMode] = useState(darkMode);
   const [isDark, setIsDark] = useState(false);
-  const [navLinks, setNavLinks] = useState<NavItem[]>(initialNavLinks);
+  const [siteNav, setSiteNav] = useState<SiteNav>(initialNav);
   const [showHistory, setShowHistory] = useState(false);
+  const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({});
   const historyButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    // Resolve edit mode after mount (post-hydration) to avoid an SSR/client mismatch.
     setIsEditMode(window.location.pathname.startsWith("/edit"));
     const unlistenEdit = editModeEvent.listen(({ isEditMode }) => setIsEditMode(isEditMode));
-    const unlistenNav = navChangeEvent.listen((links) => setNavLinks(links));
+    const unlistenNav = siteNavChangeEvent.listen((n) => setSiteNav(n));
     const unlistenDark = darkModeEvent.listen((mode) => setCurrentDarkMode(mode as typeof darkMode));
     return () => { unlistenEdit(); unlistenNav(); unlistenDark(); };
   }, []);
@@ -40,9 +40,7 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
   useEffect(() => {
     const root = document.documentElement;
     setIsDark(root.classList.contains("dark"));
-    const observer = new MutationObserver(() => {
-      setIsDark(root.classList.contains("dark"));
-    });
+    const observer = new MutationObserver(() => setIsDark(root.classList.contains("dark")));
     observer.observe(root, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
@@ -55,183 +53,195 @@ export default function Navigation({ navLinks: initialNavLinks, siteName, darkMo
     setTimeout(() => root.classList.remove("theme-changing"), 200);
   }, []);
 
-  // Build ID maps for scroll tracking
-  const parentIds = navLinks.map((item) => item.href.replace("#", ""));
+  // The active page can live in any tier (editors navigate to hidden and
+  // archived pages via the Pages modal).
+  const activePage =
+    [...siteNav.pages, ...siteNav.hidden, ...siteNav.archive].find((p) => p.isActive) ?? null;
+  const headings: NavItem[] = activePage?.headings ?? [];
+
+  const parentIds = headings.map((h) => h.href.replace("#", ""));
   const childIdsByParent: Record<string, string[]> = {};
   const grandchildIdsByChild: Record<string, string[]> = {};
-
-  for (const parent of navLinks) {
+  for (const parent of headings) {
     const pid = parent.href.replace("#", "");
     childIdsByParent[pid] = parent.children.map((c) => c.href.replace("#", ""));
     for (const child of parent.children) {
-      const cid = child.href.replace("#", "");
-      grandchildIdsByChild[cid] = child.children.map((gc) => gc.href.replace("#", ""));
+      grandchildIdsByChild[child.href.replace("#", "")] = child.children.map((gc) => gc.href.replace("#", ""));
     }
   }
-
   const { activeParentId, activeChildId, activeGrandchildId, setActiveSection } =
     useActiveHeadings(parentIds, childIdsByParent, grandchildIdsByChild);
 
-  const handleNav = useCallback((href: string) => {
+  const handleHeadingNav = useCallback((href: string) => {
     const id = href.replace("#", "");
     const el = document.getElementById(id);
-    if (el) {
-      el.scrollIntoView({ behavior: "smooth" });
-      setActiveSection(id);
-    }
+    if (el) { el.scrollIntoView({ behavior: "smooth" }); setActiveSection(id); }
     setIsOpen(false);
   }, [setActiveSection]);
 
+  const renderHeadings = () => (
+    <ul className="ml-3 mt-1 space-y-1 border-l border-base-200 pl-3">
+      {headings.map((parent) => {
+        const pid = parent.href.replace("#", "");
+        return (
+          <li key={pid}>
+            <button
+              onClick={() => handleHeadingNav(parent.href)}
+              className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                activeParentId === pid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                !isEditMode && parent.status && parent.status !== "live" && "opacity-50")}
+            >
+              {parent.label}
+            </button>
+            {activeParentId === pid && parent.children.length > 0 && (
+              <ul className="ml-3 mt-1 space-y-1">
+                {parent.children.map((child) => {
+                  const cid = child.href.replace("#", "");
+                  return (
+                    <li key={cid}>
+                      <button onClick={() => handleHeadingNav(child.href)}
+                        className={cn("cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
+                          activeChildId === cid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                          !isEditMode && child.status && child.status !== "live" && "opacity-50")}>
+                        {child.label}
+                      </button>
+                      {activeChildId === cid && child.children.length > 0 && (
+                        <ul className="ml-3 mt-1 space-y-1">
+                          {child.children.map((gc) => {
+                            const gid = gc.href.replace("#", "");
+                            return (
+                              <li key={gid}>
+                                <button onClick={() => handleHeadingNav(gc.href)}
+                                  className={cn("cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
+                                    activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
+                                    !isEditMode && gc.status && gc.status !== "live" && "opacity-50")}>
+                                  {gc.label}
+                                </button>
+                              </li>
+                            );
+                          })}
+                        </ul>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+
+  const handlePageClick = useCallback((id: string) => {
+    if (onPageSelect) onPageSelect(id);
+    else pageSelectEvent.dispatch(id);
+    setIsOpen(false);
+  }, [onPageSelect]);
+
+  // Render an interactive button (no full navigation) when in the editor or when
+  // a same-island handler is supplied; otherwise a real <a> for the viewer.
+  const asButton = isEditMode || !!onPageSelect;
+
+  const renderPage = (page: SiteNav["pages"][number]) => (
+    <li key={page.id}>
+      {asButton ? (
+        <button
+          onClick={() => handlePageClick(page.id)}
+          className={cn("cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+            page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
+        >
+          {page.title}
+        </button>
+      ) : (
+        <a
+          href={page.href}
+          className={cn("block w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
+            page.isActive ? "text-primary" : "text-base-contrast hover:text-primary")}
+        >
+          {page.title}
+        </a>
+      )}
+      {page.isActive && headings.length > 0 && renderHeadings()}
+    </li>
+  );
+
+  const renderPageGroup = (label: string, pages: SiteNav["pages"]) => {
+    if (pages.length === 0) return null;
+    // Closed by default; auto-open when it holds the active page so the
+    // editor's current location (and its heading tree) stays visible.
+    const isOpen = openGroups[label] ?? pages.some((p) => p.isActive);
+    return (
+      <div className="mx-4 mt-2 border-t border-base-200 pt-2">
+        <button
+          type="button"
+          aria-expanded={isOpen}
+          onClick={() => setOpenGroups((g) => ({ ...g, [label]: !isOpen }))}
+          className="flex w-full cursor-pointer items-center justify-between rounded px-3 py-1 text-xs font-semibold uppercase tracking-wide text-base-contrast/70 transition-colors hover:text-primary"
+        >
+          <span>{`${label} (${pages.length})`}</span>
+          <ChevronRight size={14} aria-hidden="true" className={cn("transition-transform", isOpen && "rotate-90")} />
+        </button>
+        {isOpen && <ul className="space-y-1">{pages.map(renderPage)}</ul>}
+      </div>
+    );
+  };
+
   return (
     <>
-      {/* Mobile header bar */}
       <header className="fixed top-0 left-0 right-0 z-50 bg-base lg:hidden">
         <div className="mx-auto max-w-screen-xl flex h-16 items-center justify-between px-4">
           <span className="text-lg font-bold text-primary">{siteName}</span>
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="cursor-pointer p-2 text-base-contrast"
-            aria-label="Toggle navigation"
-          >
+          <button onClick={() => setIsOpen(!isOpen)} className="cursor-pointer p-2 text-base-contrast" aria-label="Toggle navigation">
             <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
               {isOpen
                 ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
-              }
+                : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />}
             </svg>
           </button>
         </div>
       </header>
 
-      {/* Backdrop */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
-          onClick={() => setIsOpen(false)}
-        />
-      )}
+      {isOpen && <div className="fixed inset-0 z-40 bg-black/50 lg:hidden" onClick={() => setIsOpen(false)} />}
 
-      {/* Sidebar nav */}
-      <nav
-        className={cn(
-          "fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
-          isOpen ? "translate-x-0" : "-translate-x-full",
-        )}
-      >
-        {/* Desktop header */}
+      <nav className={cn("fixed top-0 left-0 lg:left-auto z-40 h-full w-64 flex flex-col overflow-y-auto border-r border-base-200 bg-base pt-16 transition-transform lg:translate-x-0 nav-sidebar",
+        isOpen ? "translate-x-0" : "-translate-x-full")}>
         <div className="hidden px-4 py-4 lg:block">
           <span className="text-lg font-bold text-primary">{siteName}</span>
         </div>
 
         <ul className="space-y-1 px-4 py-2">
-          {navLinks.map((parent) => {
-            const pid = parent.href.replace("#", "");
-            const isActiveParent = activeParentId === pid;
-
-            return (
-              <li key={pid}>
-                <button
-                  onClick={() => handleNav(parent.href)}
-                  className={cn(
-                    "cursor-pointer w-full rounded px-3 py-2 text-left text-sm font-bold transition-colors",
-                    isActiveParent ? "text-primary" : "text-base-contrast hover:text-primary",
-                    !isEditMode && parent.status && parent.status !== "live" && "opacity-50",
-                  )}
-                >
-                  {parent.label}
-                </button>
-
-                {isActiveParent && parent.children.length > 0 && (
-                  <ul className="ml-3 mt-1 space-y-1 border-l border-base-200 pl-3">
-                    {parent.children.map((child) => {
-                      const cid = child.href.replace("#", "");
-                      const isActiveChild = activeChildId === cid;
-
-                      return (
-                        <li key={cid}>
-                          <button
-                            onClick={() => handleNav(child.href)}
-                            className={cn(
-                              "cursor-pointer w-full rounded px-2 py-1 text-left text-sm transition-colors",
-                              isActiveChild ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                              !isEditMode && child.status && child.status !== "live" && "opacity-50",
-                            )}
-                          >
-                            {child.label}
-                          </button>
-
-                          {isActiveChild && child.children.length > 0 && (
-                            <ul className="ml-3 mt-1 space-y-1">
-                              {child.children.map((gc) => {
-                                const gid = gc.href.replace("#", "");
-                                return (
-                                  <li key={gid}>
-                                    <button
-                                      onClick={() => handleNav(gc.href)}
-                                      className={cn(
-                                        "cursor-pointer block w-full px-2 py-1 text-left text-xs transition-colors",
-                                        activeGrandchildId === gid ? "font-bold text-primary" : "text-base-contrast-light hover:text-primary",
-                                        !isEditMode && gc.status && gc.status !== "live" && "opacity-50",
-                                      )}
-                                    >
-                                      {gc.label}
-                                    </button>
-                                  </li>
-                                );
-                              })}
-                            </ul>
-                          )}
-                        </li>
-                      );
-                    })}
-                  </ul>
-                )}
-              </li>
-            );
-          })}
+          {siteNav.pages.map(renderPage)}
         </ul>
 
+        {isEditMode && renderPageGroup("Hidden from Menu", siteNav.hidden)}
+        {isEditMode && renderPageGroup("Archive", siteNav.archive)}
+
         <div className="mt-auto">
           {currentDarkMode === "optional" && (
             <div className="mx-4 border-t border-base-200 py-4">
-              <div className="flex items-center gap-2 text-sm text-base-contrast-light">
+              <div className="flex items-center justify-center gap-2 text-sm text-base-contrast-light">
                 <span className={cn(!isDark && "text-base-contrast")}>Light</span>
                 <Toggle checked={isDark} onChange={handleThemeToggle} label="Toggle dark mode" />
                 <span className={cn(isDark && "text-base-contrast")}>Dark</span>
               </div>
             </div>
           )}
-
           {lastUpdated && (
             <div className={cn(currentDarkMode !== "optional" && "border-t border-base-200", "mx-4 py-4 text-center")}>
               {isEditMode ? (
                 <div className="relative">
-                  <button
-                    ref={historyButtonRef}
-                    onClick={() => setShowHistory((prev) => !prev)}
-                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors"
-                    aria-label="View history"
-                  >
+                  <button ref={historyButtonRef} onClick={() => setShowHistory((p) => !p)}
+                    className="cursor-pointer text-xs text-base-contrast-light hover:text-primary transition-colors" aria-label="View history">
                     Last updated {formatDate(lastUpdated)}
                   </button>
-                  <Popover
-                    isOpen={showHistory}
-                    onClose={() => setShowHistory(false)}
-                    anchorRef={historyButtonRef}
-                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0"
-                  >
-                    <HistoryPopover
-                      onSelectCommit={(sha, date) => {
-                        setShowHistory(false);
-                        historySelectEvent.dispatch({ sha, date });
-                      }}
-                    />
+                  <Popover isOpen={showHistory} onClose={() => setShowHistory(false)} anchorRef={historyButtonRef}
+                    className="w-56 !bottom-full !top-auto !mb-1 !mt-0">
+                    <HistoryPopover onSelectCommit={(sha, date) => { setShowHistory(false); historySelectEvent.dispatch({ sha, date }); }} />
                   </Popover>
                 </div>
               ) : (
-                <p className="text-xs text-base-contrast-light">
-                  Last updated {formatDate(lastUpdated)}
-                </p>
+                <p className="text-xs text-base-contrast-light">Last updated {formatDate(lastUpdated)}</p>
               )}
             </div>
           )}

package/src/components/shared/PagesContext.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from "react";
+
+export interface PagesContextValue {
+  pages: { id: string; title: string }[];
+  getPageHeadings: (pageId: string) => { id: string; label: string }[];
+}
+
+export const PagesContext = createContext<PagesContextValue>({ pages: [], getPageHeadings: () => [] });
+
+export function usePages(): PagesContextValue {
+  return useContext(PagesContext);
+}

package/src/components/shared/RadioGroup.tsx

@@ -0,0 +1,71 @@
+import { useId } from "react";
+import { cn } from "../../lib/cn";
+import { FormLabel } from "./FormLabel";
+
+export interface RadioGroupOption<T extends string = string> {
+  label: string;
+  value: T;
+}
+
+interface RadioGroupProps<T extends string = string> {
+  label: string;
+  options: RadioGroupOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function RadioGroup<T extends string = string>({
+  label,
+  options,
+  value,
+  onChange,
+  disabled,
+  className,
+}: RadioGroupProps<T>) {
+  const name = useId();
+  return (
+    <div className={className} role="radiogroup" aria-label={label}>
+      <FormLabel>{label}</FormLabel>
+      <div className="flex gap-4">
+        {options.map((option) => {
+          const checked = value === option.value;
+          return (
+            <label
+              key={option.value}
+              className={cn(
+                "flex cursor-pointer items-center gap-2 select-none hover:opacity-80",
+                disabled && "cursor-not-allowed opacity-50",
+              )}
+            >
+              <span className="relative flex h-5 w-5 shrink-0 items-center justify-center">
+                <input
+                  type="radio"
+                  name={name}
+                  checked={checked}
+                  disabled={disabled}
+                  onChange={() => {
+                    if (!disabled) onChange(option.value);
+                  }}
+                  className="sr-only"
+                />
+                <span
+                  aria-hidden="true"
+                  className={cn(
+                    "flex h-5 w-5 items-center justify-center rounded-full border transition-colors",
+                    checked ? "border-primary" : "border-base-300 bg-base hover:border-primary",
+                    disabled && "pointer-events-none",
+                  )}
+                >
+                  {checked && <span className="h-2.5 w-2.5 rounded-full bg-primary" />}
+                </span>
+              </span>
+              <span className="text-sm font-medium text-base-contrast">{option.label}</span>
+            </label>
+          );
+        })}
+      </div>
+    </div>
+  );
+}