@swift-rust/ui 0.2.0

package/registry/components/dialog.tsx

@@ -0,0 +1,118 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const DialogContext = React.createContext<{
+  open: boolean;
+  setOpen: (v: boolean) => void;
+} | null>(null);
+
+export function Dialog({
+  open: controlled,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(false);
+  const open = controlled ?? internal;
+  const setOpen = (v: boolean) => {
+    if (controlled === undefined) setInternal(v);
+    onOpenChange?.(v);
+  };
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+      {open ? <DialogOverlay /> : null}
+    </DialogContext.Provider>
+  );
+}
+
+function DialogOverlay() {
+  const ctx = React.useContext(DialogContext)!;
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+      onClick={() => ctx.setOpen(false)}
+      aria-hidden
+    />
+  );
+}
+
+export function DialogContent({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  const ctx = React.useContext(DialogContext);
+  React.useEffect(() => {
+    if (!ctx?.open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") ctx.setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [ctx]);
+  if (!ctx?.open) return null;
+  return (
+    <div
+      role="dialog"
+      aria-modal
+      className={cn(
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-[var(--ui-border)] bg-[var(--ui-surface)] p-6 shadow-lg rounded-xl",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col space-y-1.5 text-left", className)} {...props} />;
+}
+
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex justify-end gap-2 pt-2", className)} {...props} />;
+}
+
+export function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn("text-lg font-semibold leading-none", className)} {...props} />;
+}
+
+export function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-[var(--ui-fg-muted)]", className)} {...props} />;
+}
+
+export function DialogTrigger({
+  asChild,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & { asChild?: boolean }) {
+  const ctx = React.useContext(DialogContext)!;
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: React.MouseEventHandler }>, {
+      onClick: (e: React.MouseEvent) => {
+        (children as React.ReactElement<{ onClick?: React.MouseEventHandler }>).props.onClick?.(e);
+        ctx.setOpen(true);
+      },
+    });
+  }
+  return (
+    <div {...props} onClick={() => ctx.setOpen(true)}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogClose({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  const ctx = React.useContext(DialogContext)!;
+  return (
+    <div {...props} onClick={() => ctx.setOpen(false)}>
+      {children}
+    </div>
+  );
+}

package/registry/components/dropdown-menu.tsx

@@ -0,0 +1,96 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const DropdownContext = React.createContext<{ open: boolean; setOpen: (v: boolean) => void } | null>(null);
+
+export function DropdownMenu({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+  return (
+    <DropdownContext.Provider value={{ open, setOpen }}>
+      <div ref={ref} className="relative inline-block">
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  );
+}
+
+export function DropdownMenuTrigger({
+  asChild,
+  children,
+}: {
+  asChild?: boolean;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(DropdownContext)!;
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: React.MouseEventHandler }>, {
+      onClick: () => ctx.setOpen(!ctx.open),
+    });
+  }
+  return <button type="button" onClick={() => ctx.setOpen(!ctx.open)}>{children}</button>;
+}
+
+export function DropdownMenuContent({
+  align = "start",
+  className,
+  children,
+}: {
+  align?: "start" | "end" | "center";
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(DropdownContext)!;
+  if (!ctx.open) return null;
+  return (
+    <div
+      role="menu"
+      className={cn(
+        "absolute z-50 mt-1 min-w-[10rem] overflow-hidden rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] p-1 text-[var(--ui-fg)] shadow-md",
+        align === "end" && "right-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuItem({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="menuitem"
+      className={cn(
+        "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors",
+        "hover:bg-[var(--ui-surface-2)] focus:bg-[var(--ui-surface-2)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuSeparator() {
+  return <div className="my-1 h-px bg-[var(--ui-border)]" />;
+}
+
+export function DropdownMenuLabel({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("px-2 py-1.5 text-xs font-semibold text-[var(--ui-fg-subtle)]", className)} {...props} />;
+}

package/registry/components/form.tsx

@@ -0,0 +1,28 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Form({ className, ...props }: React.FormHTMLAttributes<HTMLFormElement>) {
+  return <form className={cn("space-y-4", className)} {...props} />;
+}
+
+export function FormField({
+  label,
+  description,
+  error,
+  children,
+}: {
+  label?: string;
+  description?: string;
+  error?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-1.5">
+      {label ? <label className="text-sm font-medium text-[var(--ui-fg)]">{label}</label> : null}
+      {children}
+      {description && !error ? <p className="text-xs text-[var(--ui-fg-muted)]">{description}</p> : null}
+      {error ? <p className="text-xs text-[var(--ui-danger)]">{error}</p> : null}
+    </div>
+  );
+}

package/registry/components/input.tsx

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = "text", ...props }, ref) => (
+    <input
+      type={type}
+      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",
+        "placeholder:text-[var(--ui-fg-subtle)]",
+        "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}
+    />
+  ),
+);
+Input.displayName = "Input";

package/registry/components/kbd.tsx

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Kbd = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        "inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--ui-border-strong)] bg-[var(--ui-surface-2)] px-1.5 font-mono text-[0.6875rem] font-medium",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Kbd.displayName = "Kbd";

package/registry/components/label.tsx

@@ -0,0 +1,19 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement>;
+
+export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...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",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";

package/registry/components/navigation-menu.tsx

@@ -0,0 +1,74 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const NavigationMenuContext = React.createContext<{ openValue: string | null; setOpenValue: (v: string | null) => void } | null>(null);
+
+export function NavigationMenu({ children, className }: { children: React.ReactNode; className?: string }) {
+  const [openValue, setOpenValue] = React.useState<string | null>(null);
+  return (
+    <NavigationMenuContext.Provider value={{ openValue, setOpenValue }}>
+      <nav className={cn("relative", className)}>{children}</nav>
+    </NavigationMenuContext.Provider>
+  );
+}
+
+export function NavigationMenuList({ className, children }: { className?: string; children: React.ReactNode }) {
+  return <ul className={cn("flex items-center gap-1", className)}>{children}</ul>;
+}
+
+export function NavigationMenuItem({ value, children }: { value: string; children: React.ReactNode }) {
+  const ctx = React.useContext(NavigationMenuContext)!;
+  return (
+    <li
+      onMouseEnter={() => ctx.setOpenValue(value)}
+      onMouseLeave={() => ctx.setOpenValue(null)}
+      className="relative"
+    >
+      {children}
+    </li>
+  );
+}
+
+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)]"
+    >
+      {children}
+      <svg viewBox="0 0 24 24" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M6 9l6 6 6-6" strokeLinecap="round" />
+      </svg>
+    </button>
+  );
+}
+
+export function NavigationMenuContent({ value, className, children }: { value: string; className?: string; children: React.ReactNode }) {
+  const ctx = React.useContext(NavigationMenuContext)!;
+  if (ctx.openValue !== value) return null;
+  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",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function NavigationMenuLink({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
+  return (
+    <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)]",
+        className,
+      )}
+    >
+      {children}
+    </a>
+  );
+}

package/registry/components/pagination.tsx

@@ -0,0 +1,56 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface PaginationProps {
+  page: number;
+  total: number;
+  onChange: (page: number) => void;
+  className?: string;
+}
+
+export function Pagination({ page, total, onChange, className }: PaginationProps) {
+  const pages: Array<number | "ellipsis"> = [];
+  for (let i = 1; i <= total; i++) {
+    if (i === 1 || i === total || Math.abs(i - page) <= 1) pages.push(i);
+    else if (pages[pages.length - 1] !== "ellipsis") pages.push("ellipsis");
+  }
+
+  return (
+    <nav className={cn("flex items-center gap-1", className)}>
+      <button
+        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"
+      >
+        ←
+      </button>
+      {pages.map((p, i) =>
+        p === "ellipsis" ? (
+          <span key={`e${i}`} className="px-2 text-[var(--ui-fg-subtle)]">…</span>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            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}
+          </button>
+        ),
+      )}
+      <button
+        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"
+      >
+        →
+      </button>
+    </nav>
+  );
+}

package/registry/components/popover.tsx

@@ -0,0 +1,58 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const PopoverContext = React.createContext<{ open: boolean; setOpen: (v: boolean) => void } | null>(null);
+
+export function Popover({ children }: { children: React.ReactNode }) {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+  return (
+    <PopoverContext.Provider value={{ open, setOpen }}>
+      <div ref={ref} className="relative inline-block">{children}</div>
+    </PopoverContext.Provider>
+  );
+}
+
+export function PopoverTrigger({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  const ctx = React.useContext(PopoverContext)!;
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: React.MouseEventHandler }>, {
+      onClick: () => ctx.setOpen(!ctx.open),
+    });
+  }
+  return <button type="button" onClick={() => ctx.setOpen(!ctx.open)}>{children}</button>;
+}
+
+export function PopoverContent({
+  className,
+  children,
+  align = "start",
+}: {
+  className?: string;
+  children: React.ReactNode;
+  align?: "start" | "end" | "center";
+}) {
+  const ctx = React.useContext(PopoverContext)!;
+  if (!ctx.open) return null;
+  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",
+        align === "end" && "right-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/registry/components/progress.tsx

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

package/registry/components/radio-group.tsx

@@ -0,0 +1,78 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const RadioGroupContext = React.createContext<{
+  value: string;
+  setValue: (v: string) => void;
+  name: string;
+} | null>(null);
+
+export function RadioGroup({
+  value: controlled,
+  onValueChange,
+  defaultValue,
+  name = "radio",
+  className,
+  children,
+}: {
+  value?: string;
+  onValueChange?: (v: string) => void;
+  defaultValue?: string;
+  name?: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(defaultValue ?? "");
+  const value = controlled ?? internal;
+  const setValue = (v: string) => {
+    if (controlled === undefined) setInternal(v);
+    onValueChange?.(v);
+  };
+  return (
+    <RadioGroupContext.Provider value={{ value, setValue, name }}>
+      <div role="radiogroup" className={cn("space-y-1", className)}>
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export function RadioGroupItem({
+  value,
+  label,
+  className,
+}: {
+  value: string;
+  label?: React.ReactNode;
+  className?: string;
+}) {
+  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)]",
+        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)]",
+        )}
+      >
+        {active ? <span className="h-2 w-2 rounded-full bg-[var(--ui-accent)]" /> : null}
+      </span>
+      <input
+        type="radio"
+        name={ctx.name}
+        value={value}
+        checked={active}
+        onChange={() => ctx.setValue(value)}
+        className="sr-only"
+      />
+      {label}
+    </label>
+  );
+}

package/registry/components/select.tsx

@@ -0,0 +1,21 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Select = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <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",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+);
+Select.displayName = "Select";

package/registry/components/separator.tsx

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+  orientation?: "horizontal" | "vertical";
+};
+
+export const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ className, orientation = "horizontal", ...props }, ref) => (
+    <div
+      ref={ref}
+      role="separator"
+      className={cn(
+        "shrink-0 bg-[var(--ui-border)]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = "Separator";