@swift-rust/ui 0.2.0 → 0.6.0

package/registry/components/label.tsx

@@ -1,15 +1,45 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+/**
+ * swift-rust ui · Label
+ *
+ * variant — default, secondary (muted), destructive (error)
+ * size    — xs, sm, default, md, lg
+ */
+
+export type LabelVariant = "default" | "secondary" | "destructive";
+export type LabelSize = "default" | "xs" | "sm" | "md" | "lg";
+
+const VARIANTS: Record<LabelVariant, string> = {
+  default: "text-foreground",
+  secondary: "text-muted-foreground",
+  destructive: "text-destructive",
+};
+
+const SIZES: Record<LabelSize, string> = {
+  default: "text-sm",
+  xs: "text-xs",
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+};
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  variant?: LabelVariant;
+  size?: LabelSize;
+}
 
 export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, variant = "default", size = "default", ...props }, ref) => (
     <label
       ref={ref}
       className={cn(
-        "text-sm font-medium leading-none text-[var(--ui-fg)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        "flex select-none items-center gap-2 font-medium leading-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        VARIANTS[variant],
+        SIZES[size],
         className,
       )}
       {...props}

package/registry/components/menubar.tsx

@@ -0,0 +1,60 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const MenubarContext = React.createContext<{ openId: string | null; setOpenId: (id: string | null) => void } | null>(null);
+
+export function Menubar({ className, children }: { className?: string; children: React.ReactNode }) {
+  const [openId, setOpenId] = React.useState<string | null>(null);
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpenId(null);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, []);
+  return (
+    <MenubarContext.Provider value={{ openId, setOpenId }}>
+      <div ref={ref} className={cn("flex items-center gap-0.5 rounded-lg border border-border bg-background p-1", className)}>
+        {children}
+      </div>
+    </MenubarContext.Provider>
+  );
+}
+
+export function MenubarMenu({ value, label, children }: { value: string; label: string; children: React.ReactNode }) {
+  const ctx = React.useContext(MenubarContext);
+  const open = ctx?.openId === value;
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => ctx?.setOpenId(open ? null : value)}
+        onMouseEnter={() => ctx?.openId && ctx.setOpenId(value)}
+        className={cn("rounded-md px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted", open && "bg-muted")}
+      >
+        {label}
+      </button>
+      {open && (
+        <div role="menu" className="absolute left-0 z-50 mt-1 min-w-[12rem] rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MenubarItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div role="menuitem" className={cn("flex cursor-pointer select-none items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-muted", className)} {...props} />
+  );
+}
+
+export function MenubarSeparator() {
+  return <div className="my-1 h-px bg-border" />;
+}
+
+export function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+}

package/registry/components/native-select.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+// A native <select> with a chevron and the design-system token styling.
+export type NativeSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
+
+export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, ...props }, ref) => (
+    <div className="relative inline-flex w-full">
+      <select
+        ref={ref}
+        className={cn(
+          "h-9 w-full appearance-none rounded-lg border border-input bg-background px-3 pr-8 text-sm shadow-xs",
+          "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <svg
+        viewBox="0 0 24 24"
+        className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        aria-hidden
+      >
+        <path d="m6 9 6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </div>
+  ),
+);
+NativeSelect.displayName = "NativeSelect";

package/registry/components/navigation-menu.tsx

@@ -34,7 +34,7 @@ export function NavigationMenuTrigger({ children }: { children: React.ReactNode
   return (
     <button
       type="button"
-      className="inline-flex h-9 items-center gap-1 rounded-md px-3 py-1 text-sm hover:bg-[var(--ui-surface-2)]"
+      className="inline-flex h-9 items-center gap-1 rounded-md px-3 py-1 text-sm hover:bg-muted"
     >
       {children}
       <svg viewBox="0 0 24 24" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2">
@@ -50,7 +50,7 @@ export function NavigationMenuContent({ value, className, children }: { value: s
   return (
     <div
       className={cn(
-        "absolute left-0 top-full mt-1 min-w-[200px] rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] p-2 shadow-md",
+        "absolute left-0 top-full mt-1 min-w-[200px] rounded-md border border-border bg-popover p-2 shadow-md",
         className,
       )}
     >
@@ -64,7 +64,7 @@ export function NavigationMenuLink({ href, children, className }: { href: string
     <a
       href={href}
       className={cn(
-        "block rounded-sm px-2 py-1.5 text-sm text-[var(--ui-fg-muted)] hover:bg-[var(--ui-surface-2)] hover:text-[var(--ui-fg)]",
+        "block rounded-sm px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground",
         className,
       )}
     >

package/registry/components/pagination.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -22,13 +21,13 @@ export function Pagination({ page, total, onChange, className }: PaginationProps
         type="button"
         onClick={() => onChange(Math.max(1, page - 1))}
         disabled={page === 1}
-        className="inline-flex h-8 items-center gap-1 rounded-md px-2 text-sm hover:bg-[var(--ui-surface-2)] disabled:opacity-50"
+        className="inline-flex h-8 items-center gap-1 rounded-md px-2 text-sm hover:bg-muted disabled:opacity-50"
       >
         ←
       </button>
       {pages.map((p, i) =>
         p === "ellipsis" ? (
-          <span key={`e${i}`} className="px-2 text-[var(--ui-fg-subtle)]">…</span>
+          <span key={`e${i}`} className="px-2 text-muted-foreground">…</span>
         ) : (
           <button
             key={p}
@@ -36,7 +35,7 @@ export function Pagination({ page, total, onChange, className }: PaginationProps
             onClick={() => onChange(p)}
             className={cn(
               "h-8 w-8 rounded-md text-sm transition-colors",
-              p === page ? "bg-[var(--ui-fg)] text-[var(--ui-bg)]" : "hover:bg-[var(--ui-surface-2)]",
+              p === page ? "bg-primary text-primary-foreground" : "hover:bg-muted",
             )}
           >
             {p}
@@ -47,7 +46,7 @@ export function Pagination({ page, total, onChange, className }: PaginationProps
         type="button"
         onClick={() => onChange(Math.min(total, page + 1))}
         disabled={page === total}
-        className="inline-flex h-8 items-center gap-1 rounded-md px-2 text-sm hover:bg-[var(--ui-surface-2)] disabled:opacity-50"
+        className="inline-flex h-8 items-center gap-1 rounded-md px-2 text-sm hover:bg-muted disabled:opacity-50"
       >
         →
       </button>

package/registry/components/popover.tsx

@@ -46,7 +46,7 @@ export function PopoverContent({
   return (
     <div
       className={cn(
-        "absolute z-50 mt-1 w-72 rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] p-4 text-sm shadow-md",
+        "absolute z-50 mt-1 w-72 rounded-md border border-border bg-popover p-4 text-sm shadow-md",
         align === "end" && "right-0",
         align === "center" && "left-1/2 -translate-x-1/2",
         className,

package/registry/components/progress.tsx

@@ -1,20 +1,25 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Progress = React.forwardRef<HTMLDivElement, { value: number; max?: number; className?: string }>(
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  value: number;
+  max?: number;
+}
+
+export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
   ({ className, value, max = 100, ...props }, ref) => (
     <div
       ref={ref}
       role="progressbar"
       aria-valuenow={value}
+      aria-valuemin={0}
       aria-valuemax={max}
-      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-[var(--ui-surface-2)]", className)}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
       {...props}
     >
       <div
-        className="h-full bg-[var(--ui-accent)] transition-all"
-        style={{ width: `${Math.min(100, (value / max) * 100)}%` }}
+        className="h-full rounded-full bg-primary transition-all"
+        style={{ width: `${Math.min(100, Math.max(0, (value / max) * 100))}%` }}
       />
     </div>
   ),

package/registry/components/radio-group.tsx

@@ -31,7 +31,7 @@ export function RadioGroup({
   };
   return (
     <RadioGroupContext.Provider value={{ value, setValue, name }}>
-      <div role="radiogroup" className={cn("space-y-1", className)}>
+      <div role="radiogroup" className={cn("grid gap-1", className)}>
         {children}
       </div>
     </RadioGroupContext.Provider>
@@ -47,29 +47,29 @@ export function RadioGroupItem({
   label?: React.ReactNode;
   className?: string;
 }) {
-  const ctx = React.useContext(RadioGroupContext)!;
-  const active = ctx.value === value;
+  const ctx = React.useContext(RadioGroupContext);
+  const active = ctx?.value === value;
   return (
     <label
       className={cn(
-        "flex cursor-pointer items-center gap-2 rounded-md p-2 text-sm transition-colors hover:bg-[var(--ui-surface-2)]",
+        "flex cursor-pointer items-center gap-2 rounded-md p-2 text-sm transition-colors hover:bg-muted",
         className,
       )}
     >
       <span
         className={cn(
-          "flex h-4 w-4 items-center justify-center rounded-full border",
-          active ? "border-[var(--ui-accent)]" : "border-[var(--ui-border-strong)]",
+          "flex size-4 items-center justify-center rounded-full border transition-colors",
+          active ? "border-primary" : "border-input",
         )}
       >
-        {active ? <span className="h-2 w-2 rounded-full bg-[var(--ui-accent)]" /> : null}
+        {active ? <span className="size-2 rounded-full bg-primary" /> : null}
       </span>
       <input
         type="radio"
-        name={ctx.name}
+        name={ctx?.name}
         value={value}
         checked={active}
-        onChange={() => ctx.setValue(value)}
+        onChange={() => ctx?.setValue(value)}
         className="sr-only"
       />
       {label}

package/registry/components/resizable.tsx

@@ -0,0 +1,77 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const ResizableContext = React.createContext<{ pct: number; setPct: (n: number) => void } | null>(null);
+
+export function ResizablePanelGroup({
+  defaultSize = 50,
+  className,
+  children,
+}: {
+  defaultSize?: number;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [pct, setPct] = React.useState(defaultSize);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    e.preventDefault();
+    const el = ref.current;
+    if (!el) return;
+    const move = (ev: PointerEvent) => {
+      const rect = el.getBoundingClientRect();
+      const next = ((ev.clientX - rect.left) / rect.width) * 100;
+      setPct(Math.min(85, Math.max(15, next)));
+    };
+    const up = () => {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+    };
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+  };
+
+  return (
+    <ResizableContext.Provider value={{ pct, setPct }}>
+      <div ref={ref} className={cn("flex w-full overflow-hidden rounded-lg border border-border", className)}>
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child) && (child.type as { __srHandle?: boolean }).__srHandle) {
+            return React.cloneElement(child as React.ReactElement<{ onPointerDown?: (e: React.PointerEvent) => void }>, { onPointerDown });
+          }
+          return child;
+        })}
+      </div>
+    </ResizableContext.Provider>
+  );
+}
+
+export function ResizablePanel({
+  index = 0,
+  className,
+  children,
+}: {
+  index?: number;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(ResizableContext);
+  const pct = ctx?.pct ?? 50;
+  return (
+    <div className={cn("min-w-0 overflow-auto p-4", className)} style={{ flexBasis: `${index === 0 ? pct : 100 - pct}%` }}>
+      {children}
+    </div>
+  );
+}
+
+export function ResizableHandle({ onPointerDown }: { onPointerDown?: (e: React.PointerEvent) => void }) {
+  return (
+    <div
+      role="separator"
+      onPointerDown={onPointerDown}
+      className="relative w-px shrink-0 cursor-col-resize bg-border after:absolute after:inset-y-0 after:-left-1 after:w-3 hover:bg-primary"
+    />
+  );
+}
+ResizableHandle.__srHandle = true;

package/registry/components/scroll-area.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const ScrollArea = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "relative overflow-auto",
+        "[scrollbar-width:thin] [scrollbar-color:var(--color-border-strong)_transparent]",
+        "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2",
+        "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border-strong",
+        "[&::-webkit-scrollbar-track]:bg-transparent",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ScrollArea.displayName = "ScrollArea";

package/registry/components/select.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -7,8 +6,8 @@ export const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttrib
     <select
       ref={ref}
       className={cn(
-        "flex h-9 w-full rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 py-1 text-sm shadow-sm",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-1",
+        "flex h-9 w-full rounded-md border border-border bg-popover px-3 py-1 text-sm shadow-sm",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}

package/registry/components/separator.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -12,7 +11,7 @@ export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
       ref={ref}
       role="separator"
       className={cn(
-        "shrink-0 bg-[var(--ui-border)]",
+        "shrink-0 bg-border",
         orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className,
       )}

package/registry/components/sheet.tsx

@@ -36,7 +36,7 @@ export function Sheet({
           <div
             role="dialog"
             className={cn(
-              "fixed z-50 bg-[var(--ui-surface)] p-6 shadow-lg transition-transform",
+              "fixed z-50 bg-background p-6 shadow-lg transition-transform",
               sideClass,
             )}
           >

package/registry/components/sidebar.tsx

@@ -0,0 +1,72 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const SidebarContext = React.createContext<{ open: boolean; toggle: () => void } | null>(null);
+
+export function SidebarProvider({ defaultOpen = true, children }: { defaultOpen?: boolean; children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(defaultOpen);
+  return (
+    <SidebarContext.Provider value={{ open, toggle: () => setOpen((o) => !o) }}>
+      <div className="flex w-full">{children}</div>
+    </SidebarContext.Provider>
+  );
+}
+
+export function Sidebar({ className, children }: { className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(SidebarContext);
+  return (
+    <aside
+      data-state={ctx?.open ? "open" : "collapsed"}
+      className={cn(
+        "flex shrink-0 flex-col gap-2 overflow-hidden border-r border-border bg-card p-2 text-card-foreground transition-[width] duration-200",
+        ctx?.open ? "w-60" : "w-0 border-r-0 p-0",
+        className,
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+export function SidebarHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center gap-2 px-2 py-1.5", className)} {...props} />;
+}
+export function SidebarContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-1 flex-col gap-1 overflow-y-auto", className)} {...props} />;
+}
+export function SidebarGroupLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("px-2 pt-3 text-[0.7rem] font-semibold uppercase tracking-widest text-muted-foreground", className)} {...props} />;
+}
+export function SidebarItem({
+  active,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
+  return (
+    <button
+      type="button"
+      data-active={active}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors [&_svg]:size-4",
+        active ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export function SidebarTrigger({ className, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const ctx = React.useContext(SidebarContext);
+  return (
+    <button
+      type="button"
+      aria-label="Toggle sidebar"
+      onClick={() => ctx?.toggle()}
+      className={cn("inline-flex size-9 items-center justify-center rounded-lg border border-border hover:bg-muted", className)}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /></svg>
+    </button>
+  );
+}

package/registry/components/skeleton.tsx

@@ -1,14 +1,9 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export const Skeleton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("animate-pulse rounded-md bg-[var(--ui-surface-2)]", className)}
-      {...props}
-    />
+    <div ref={ref} className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />
   ),
 );
 Skeleton.displayName = "Skeleton";

package/registry/components/slider.tsx

@@ -1,14 +1,17 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Slider = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+export type SliderProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type">;
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
   ({ className, ...props }, ref) => (
     <input
       type="range"
       ref={ref}
       className={cn(
-        "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-[var(--ui-surface-2)] accent-[var(--ui-accent)]",
+        "h-1.5 w-full cursor-pointer appearance-none rounded-full bg-secondary accent-primary",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/registry/components/sonner.tsx

@@ -0,0 +1,52 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface SonnerToast {
+  id: number;
+  title: string;
+  description?: string;
+  tone?: "default" | "success" | "error";
+}
+
+const listeners = new Set<(t: SonnerToast) => void>();
+let counter = 0;
+
+export function toast(title: string, opts?: { description?: string; tone?: SonnerToast["tone"] }) {
+  const t: SonnerToast = { id: ++counter, title, description: opts?.description, tone: opts?.tone ?? "default" };
+  for (const l of listeners) l(t);
+}
+
+const TONES: Record<NonNullable<SonnerToast["tone"]>, string> = {
+  default: "border-border bg-popover text-popover-foreground",
+  success: "border-emerald-600/40 bg-popover text-popover-foreground",
+  error: "border-destructive/40 bg-popover text-popover-foreground",
+};
+
+export function Toaster({ duration = 3500 }: { duration?: number }) {
+  const [toasts, setToasts] = React.useState<SonnerToast[]>([]);
+  React.useEffect(() => {
+    const add = (t: SonnerToast) => {
+      setToasts((prev) => [...prev, t]);
+      setTimeout(() => setToasts((prev) => prev.filter((x) => x.id !== t.id)), duration);
+    };
+    listeners.add(add);
+    return () => {
+      listeners.delete(add);
+    };
+  }, [duration]);
+
+  return (
+    <div className="pointer-events-none fixed bottom-4 right-4 z-[100] flex w-80 flex-col gap-2">
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={cn("pointer-events-auto rounded-lg border p-4 shadow-lg", TONES[t.tone ?? "default"])}
+        >
+          <p className="text-sm font-medium">{t.title}</p>
+          {t.description ? <p className="mt-1 text-sm text-muted-foreground">{t.description}</p> : null}
+        </div>
+      ))}
+    </div>
+  );
+}

package/registry/components/spinner.tsx

@@ -1,15 +1,28 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Spinner = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { size?: number }>(
-  ({ className, size = 16, ...props }, ref) => (
-    <div
+export type SpinnerSize = "sm" | "default" | "lg";
+const SIZES: Record<SpinnerSize, string> = {
+  sm: "size-4 border-2",
+  default: "size-5 border-2",
+  lg: "size-8 border-[3px]",
+};
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: SpinnerSize;
+}
+
+export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
+  ({ className, size = "default", ...props }, ref) => (
+    <span
       ref={ref}
       role="status"
       aria-label="Loading"
-      className={cn("inline-block animate-spin rounded-full border-2 border-current border-t-transparent", className)}
-      style={{ width: size, height: size }}
+      className={cn(
+        "inline-block animate-spin rounded-full border-current border-t-transparent text-muted-foreground",
+        SIZES[size],
+        className,
+      )}
       {...props}
     />
   ),