@swift-rust/ui 0.2.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@swift-rust/ui",
+  "version": "0.2.0",
+  "description": "shadcn-style component registry for swift-rust.",
+  "license": "MIT",
+  "homepage": "https://swift-rust.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/swift-rust/swift-rust.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "swift-rust": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
+    "lint": "biome check --no-errors-on-unmatched $(pwd)/src",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "picocolors": "^1.0.1"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.5.0",
+    "typescript": "^6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://github.com/swift-rust/swift-rust/issues"
+  }
+}

package/registry/components/accordion.tsx

@@ -0,0 +1,106 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const AccordionContext = React.createContext<{
+  openItems: Set<string>;
+  toggle: (value: string) => void;
+  type: "single" | "multiple";
+} | null>(null);
+
+export function Accordion({
+  type = "single",
+  defaultValue,
+  className,
+  children,
+}: {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [openItems, setOpenItems] = React.useState<Set<string>>(
+    () => new Set(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []),
+  );
+  const toggle = (value: string) => {
+    setOpenItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value);
+      else if (type === "single") {
+        next.clear();
+        next.add(value);
+      } else next.add(value);
+      return next;
+    });
+  };
+  return (
+    <AccordionContext.Provider value={{ openItems, toggle, type }}>
+      <div className={className}>{children}</div>
+    </AccordionContext.Provider>
+  );
+}
+
+export function AccordionItem({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div data-value={value} className={cn("border-b border-[var(--ui-border)]", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function AccordionTrigger({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(AccordionContext)!;
+  const open = ctx.openItems.has(value);
+  return (
+    <button
+      type="button"
+      onClick={() => ctx.toggle(value)}
+      className={cn(
+        "flex w-full items-center justify-between py-4 text-sm font-medium transition-all",
+        "hover:text-[var(--ui-accent)]",
+        className,
+      )}
+    >
+      {children}
+      <svg
+        viewBox="0 0 24 24"
+        className={cn("h-4 w-4 shrink-0 transition-transform", open && "rotate-180")}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </button>
+  );
+}
+
+export function AccordionContent({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(AccordionContext)!;
+  if (!ctx.openItems.has(value)) return null;
+  return <div className={cn("pb-4 text-sm text-[var(--ui-fg-muted)]", className)}>{children}</div>;
+}

package/registry/components/alert.tsx

@@ -0,0 +1,34 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Tone = "default" | "success" | "warning" | "destructive" | "info";
+const TONES: Record<Tone, string> = {
+  default: "bg-[var(--ui-surface-2)] text-[var(--ui-fg)]",
+  success: "bg-[#dcfce7] text-[#166534]",
+  warning: "bg-[#fef3c7] text-[#92400e]",
+  destructive: "bg-[#fee2e2] text-[#991b1b]",
+  info: "bg-[#dbeafe] text-[#1e40af]",
+};
+
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: Tone;
+}
+
+export function Alert({ className, tone = "default", ...props }: AlertProps) {
+  return (
+    <div
+      role="alert"
+      className={cn("relative w-full rounded-lg border border-[var(--ui-border)] p-4 text-sm", TONES[tone], className)}
+      {...props}
+    />
+  );
+}
+
+export function AlertTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h5 className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />;
+}
+
+export function AlertDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <div className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />;
+}

package/registry/components/avatar.tsx

@@ -0,0 +1,37 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  ),
+);
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+  ({ className, ...props }, ref) => (
+    <img ref={ref} className={cn("aspect-square h-full w-full object-cover", className)} {...props} />
+  ),
+);
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-[var(--ui-surface-2)] text-sm font-medium",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+AvatarFallback.displayName = "AvatarFallback";
+
+export { Avatar, AvatarImage, AvatarFallback };

package/registry/components/badge.tsx

@@ -0,0 +1,30 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Variant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
+const VARIANTS: Record<Variant, string> = {
+  default: "border-transparent bg-[var(--ui-fg)] text-[var(--ui-bg)]",
+  secondary: "border-transparent bg-[var(--ui-surface-2)] text-[var(--ui-fg)]",
+  destructive: "border-transparent bg-[var(--ui-danger)] text-white",
+  outline: "border-[var(--ui-border-strong)] text-[var(--ui-fg)]",
+  success: "border-transparent bg-[#dcfce7] text-[#166534]",
+  warning: "border-transparent bg-[#fef3c7] text-[#92400e]",
+};
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: Variant;
+}
+
+export function Badge({ className, variant = "default", ...props }: BadgeProps) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+        VARIANTS[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/registry/components/breadcrumb.tsx

@@ -0,0 +1,56 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const BreadcrumbContext = React.createContext<{ separator: React.ReactNode } | null>(null);
+
+export function Breadcrumb({
+  separator,
+  children,
+  className,
+}: {
+  separator?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const sep = separator ?? <span className="text-[var(--ui-fg-subtle)]">/</span>;
+  return (
+    <BreadcrumbContext.Provider value={{ separator: sep }}>
+      <nav aria-label="Breadcrumb" className={className}>
+        <ol className="flex flex-wrap items-center gap-1.5 text-sm text-[var(--ui-fg-muted)]">
+          {children}
+        </ol>
+      </nav>
+    </BreadcrumbContext.Provider>
+  );
+}
+
+export function BreadcrumbItem({ children, className }: { children: React.ReactNode; className?: string }) {
+  const ctx = React.useContext(BreadcrumbContext)!;
+  return (
+    <li className={cn("inline-flex items-center gap-1.5", className)}>
+      {children}
+    </li>
+  );
+}
+
+export function BreadcrumbLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <a href={href} className="hover:text-[var(--ui-fg)]">
+      {children}
+    </a>
+  );
+}
+
+export function BreadcrumbSeparator() {
+  const ctx = React.useContext(BreadcrumbContext)!;
+  return <li aria-hidden>{ctx.separator}</li>;
+}
+
+export function BreadcrumbPage({ children }: { children: React.ReactNode }) {
+  return (
+    <li aria-current="page" className="font-medium text-[var(--ui-fg)]">
+      {children}
+    </li>
+  );
+}

package/registry/components/button.tsx

@@ -0,0 +1,48 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  default: "bg-[var(--ui-fg)] text-[var(--ui-bg)] hover:opacity-90",
+  destructive: "bg-[var(--ui-danger)] text-white hover:opacity-90",
+  outline: "border border-[var(--ui-border-strong)] bg-transparent hover:bg-[var(--ui-surface-2)]",
+  secondary: "bg-[var(--ui-surface-2)] text-[var(--ui-fg)] hover:opacity-90",
+  ghost: "hover:bg-[var(--ui-surface-2)]",
+  link: "text-[var(--ui-accent)] underline-offset-4 hover:underline",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  default: "h-9 px-4 text-sm",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-10 px-6 text-sm",
+  icon: "h-9 w-9",
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", ...props }, ref) => (
+    <button
+      ref={ref}
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        VARIANTS[variant],
+        SIZES[size],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";
+
+export { VARIANTS as buttonVariants };

package/registry/components/callout.tsx

@@ -0,0 +1,20 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type Tone = "default" | "success" | "warning" | "destructive";
+const TONE: Record<Tone, string> = {
+  default: "border-[var(--ui-border)] bg-[var(--ui-surface)]",
+  success: "border-[#86efac] bg-[#f0fdf4]",
+  warning: "border-[#fde68a] bg-[#fffbeb]",
+  destructive: "border-[#fecaca] bg-[#fef2f2]",
+};
+
+export function Callout({ className, tone = "default", ...props }: React.HTMLAttributes<HTMLDivElement> & { tone?: Tone }) {
+  return (
+    <div
+      className={cn("my-4 rounded-lg border p-4 text-sm", TONE[tone], className)}
+      {...props}
+    />
+  );
+}

package/registry/components/card.tsx

@@ -0,0 +1,49 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-xl border border-[var(--ui-border)] bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-[var(--ui-fg-muted)]", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };

package/registry/components/checkbox.tsx

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Checkbox = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      type="checkbox"
+      ref={ref}
+      className={cn(
+        "h-4 w-4 shrink-0 rounded border border-[var(--ui-border-strong)] bg-[var(--ui-surface)]",
+        "accent-[var(--ui-accent)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)] focus-visible:ring-offset-1",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Checkbox.displayName = "Checkbox";

package/registry/components/code.tsx

@@ -0,0 +1,27 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Code({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+  return (
+    <code
+      className={cn(
+        "rounded border border-[var(--ui-border)] bg-[var(--ui-surface-2)] px-1.5 py-0.5 font-mono text-[0.85em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function Pre({ className, ...props }: React.HTMLAttributes<HTMLPreElement>) {
+  return (
+    <pre
+      className={cn(
+        "overflow-x-auto rounded-lg border border-[var(--ui-border)] bg-[var(--ui-fg)] p-4 font-mono text-[0.85em] text-[var(--ui-bg)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/registry/components/command.tsx

@@ -0,0 +1,93 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface CommandItem {
+  id: string;
+  label: string;
+  group?: string;
+  onSelect?: () => void;
+  shortcut?: string;
+}
+
+export function Command({
+  items,
+  onSelect,
+  placeholder = "Type a command…",
+  className,
+}: {
+  items: CommandItem[];
+  onSelect?: (item: CommandItem) => void;
+  placeholder?: string;
+  className?: string;
+}) {
+  const [query, setQuery] = React.useState("");
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
+  const filtered = React.useMemo(() => {
+    const q = query.toLowerCase();
+    if (!q) return items;
+    return items.filter((i) => i.label.toLowerCase().includes(q));
+  }, [items, query]);
+
+  React.useEffect(() => {
+    setActiveIndex(0);
+  }, [query]);
+
+  const onKey = (e: React.KeyboardEvent) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(0, i - 1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const item = filtered[activeIndex];
+      if (item) {
+        item.onSelect?.();
+        onSelect?.(item);
+      }
+    }
+  };
+
+  return (
+    <div className={cn("rounded-lg border border-[var(--ui-border)] bg-[var(--ui-surface)] shadow-md", className)}>
+      <input
+        autoFocus
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={onKey}
+        placeholder={placeholder}
+        className="w-full border-b border-[var(--ui-border)] bg-transparent px-4 py-3 text-sm outline-none placeholder:text-[var(--ui-fg-subtle)]"
+      />
+      <ul className="max-h-72 overflow-y-auto p-1">
+        {filtered.length === 0 ? (
+          <li className="px-3 py-6 text-center text-sm text-[var(--ui-fg-subtle)]">No results</li>
+        ) : (
+          filtered.map((item, i) => (
+            <li
+              key={item.id}
+              onMouseEnter={() => setActiveIndex(i)}
+              onClick={() => {
+                item.onSelect?.();
+                onSelect?.(item);
+              }}
+              className={cn(
+                "flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm",
+                i === activeIndex && "bg-[var(--ui-accent-soft)] text-[var(--ui-accent)]",
+              )}
+            >
+              <span>{item.label}</span>
+              {item.shortcut ? (
+                <kbd className="rounded border border-[var(--ui-border)] px-1 font-mono text-[0.6875rem]">
+                  {item.shortcut}
+                </kbd>
+              ) : null}
+            </li>
+          ))
+        )}
+      </ul>
+    </div>
+  );
+}