@swift-rust/ui 0.2.0

package/registry/components/sheet.tsx

@@ -0,0 +1,68 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const SheetContext = React.createContext<{ open: boolean; setOpen: (v: boolean) => void } | null>(null);
+
+export function Sheet({
+  open: controlled,
+  onOpenChange,
+  side = "right",
+  children,
+}: {
+  open?: boolean;
+  onOpenChange?: (v: boolean) => void;
+  side?: "left" | "right" | "top" | "bottom";
+  children: React.ReactNode;
+}) {
+  const [internal, setInternal] = React.useState(false);
+  const open = controlled ?? internal;
+  const setOpen = (v: boolean) => {
+    if (controlled === undefined) setInternal(v);
+    onOpenChange?.(v);
+  };
+  const sideClass = {
+    right: "right-0 top-0 h-full w-3/4 max-w-sm border-l",
+    left: "left-0 top-0 h-full w-3/4 max-w-sm border-r",
+    top: "top-0 left-0 w-full h-1/3 max-h-sm border-b",
+    bottom: "bottom-0 left-0 w-full h-1/3 max-h-sm border-t",
+  }[side];
+  return (
+    <SheetContext.Provider value={{ open, setOpen }}>
+      {children}
+      {open ? (
+        <>
+          <div className="fixed inset-0 z-40 bg-black/60" onClick={() => setOpen(false)} aria-hidden />
+          <div
+            role="dialog"
+            className={cn(
+              "fixed z-50 bg-[var(--ui-surface)] p-6 shadow-lg transition-transform",
+              sideClass,
+            )}
+          >
+            {typeof children === "object" && children !== null && "type" in children ? null : children}
+          </div>
+        </>
+      ) : null}
+    </SheetContext.Provider>
+  );
+}
+
+export function SheetContent({ children, className }: { children: React.ReactNode; className?: string }) {
+  return <div className={className}>{children}</div>;
+}
+
+export function SheetTrigger({ asChild, children }: { asChild?: boolean; children: React.ReactNode }) {
+  const ctx = React.useContext(SheetContext)!;
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: React.MouseEventHandler }>, {
+      onClick: () => ctx.setOpen(true),
+    });
+  }
+  return <button type="button" onClick={() => ctx.setOpen(true)}>{children}</button>;
+}
+
+export function SheetClose({ children }: { children: React.ReactNode }) {
+  const ctx = React.useContext(SheetContext)!;
+  return <div onClick={() => ctx.setOpen(false)}>{children}</div>;
+}

package/registry/components/skeleton.tsx

@@ -0,0 +1,14 @@
+"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}
+    />
+  ),
+);
+Skeleton.displayName = "Skeleton";

package/registry/components/slider.tsx

@@ -0,0 +1,18 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Slider = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ 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)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Slider.displayName = "Slider";

package/registry/components/spinner.tsx

@@ -0,0 +1,17 @@
+"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
+      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 }}
+      {...props}
+    />
+  ),
+);
+Spinner.displayName = "Spinner";

package/registry/components/switch.tsx

@@ -0,0 +1,23 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Switch = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <label className="inline-flex cursor-pointer items-center">
+      <input type="checkbox" ref={ref} className="peer sr-only" {...props} />
+      <span
+        className={cn(
+          "relative h-5 w-9 rounded-full bg-[var(--ui-surface-2)] transition-colors",
+          "peer-checked:bg-[var(--ui-accent)]",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--ui-accent)] peer-focus-visible:ring-offset-2",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+          "after:absolute after:left-0.5 after:top-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-transform",
+          "peer-checked:after:translate-x-4",
+          className,
+        )}
+      />
+    </label>
+  ),
+);
+Switch.displayName = "Switch";

package/registry/components/table.tsx

@@ -0,0 +1,65 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+export const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  ),
+);
+TableHeader.displayName = "TableHeader";
+
+export const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+);
+TableBody.displayName = "TableBody";
+
+export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b border-[var(--ui-border)] transition-colors hover:bg-[var(--ui-surface-2)] data-[state=selected]:bg-[var(--ui-surface-2)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+export const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-[var(--ui-fg-muted)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = "TableHead";
+
+export const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-3 align-middle", className)} {...props} />
+  ),
+);
+TableCell.displayName = "TableCell";

package/registry/components/tabs.tsx

@@ -0,0 +1,86 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const TabsContext = React.createContext<{ value: string; setValue: (v: string) => void } | null>(null);
+
+export function Tabs({
+  defaultValue,
+  value: controlled,
+  onValueChange,
+  className,
+  children,
+}: {
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (v: string) => void;
+  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 (
+    <TabsContext.Provider value={{ value, setValue }}>
+      <div className={className}>{children}</div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="tablist"
+      className={cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-[var(--ui-surface-2)] p-1 text-[var(--ui-fg-muted)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function TabsTrigger({
+  value,
+  className,
+  children,
+  ...props
+}: { value: string } & React.HTMLAttributes<HTMLButtonElement>) {
+  const ctx = React.useContext(TabsContext)!;
+  const active = ctx.value === value;
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={active}
+      onClick={() => ctx.setValue(value)}
+      className={cn(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)]",
+        active ? "bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-sm" : "hover:text-[var(--ui-fg)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({
+  value,
+  className,
+  children,
+  ...props
+}: { value: string } & React.HTMLAttributes<HTMLDivElement>) {
+  const ctx = React.useContext(TabsContext)!;
+  if (ctx.value !== value) return null;
+  return (
+    <div role="tabpanel" className={cn("mt-2", className)} {...props}>
+      {children}
+    </div>
+  );
+}

package/registry/components/textarea.tsx

@@ -0,0 +1,22 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-[var(--ui-border)] bg-[var(--ui-surface)] px-3 py-2 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}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";

package/registry/components/toast.tsx

@@ -0,0 +1,58 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type ToastTone = "default" | "success" | "error" | "warning";
+
+const ToastContext = React.createContext<{
+  push: (msg: string, tone?: ToastTone) => void;
+} | null>(null);
+
+interface Toast {
+  id: number;
+  message: string;
+  tone: ToastTone;
+}
+
+let counter = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = React.useState<Toast[]>([]);
+  const push = React.useCallback((message: string, tone: ToastTone = "default") => {
+    const id = ++counter;
+    setToasts((t) => [...t, { id, message, tone }]);
+    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 4000);
+  }, []);
+
+  const TONE: Record<ToastTone, string> = {
+    default: "bg-[var(--ui-fg)] text-[var(--ui-bg)]",
+    success: "bg-[#16a34a] text-white",
+    error: "bg-[var(--ui-danger)] text-white",
+    warning: "bg-[#f59e0b] text-white",
+  };
+
+  return (
+    <ToastContext.Provider value={{ push }}>
+      {children}
+      <div className="pointer-events-none fixed bottom-4 right-4 z-50 flex flex-col gap-2">
+        {toasts.map((t) => (
+          <div
+            key={t.id}
+            className={cn(
+              "pointer-events-auto min-w-[200px] max-w-sm rounded-md px-4 py-2.5 text-sm shadow-lg fade-in",
+              TONE[t.tone],
+            )}
+          >
+            {t.message}
+          </div>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = React.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
+  return ctx;
+}

package/registry/components/toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Toggle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { pressed?: boolean }>(
+  ({ className, pressed, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={pressed}
+      data-state={pressed ? "on" : "off"}
+      className={cn(
+        "inline-flex h-9 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent)]",
+        pressed ? "bg-[var(--ui-surface-2)] text-[var(--ui-fg)]" : "hover:bg-[var(--ui-surface-2)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Toggle.displayName = "Toggle";
+
+export const ToggleGroup = ({
+  value,
+  onValueChange,
+  children,
+  className,
+}: {
+  value: string;
+  onValueChange: (v: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}) => (
+  <div role="group" className={cn("inline-flex rounded-md border border-[var(--ui-border)] p-0.5", className)}>
+    {React.Children.map(children, (child) => {
+      if (!React.isValidElement(child)) return child;
+      const c = child as React.ReactElement<{ value: string; pressed?: boolean; onClick?: () => void }>;
+      const active = c.props.value === value;
+      return React.cloneElement(c, {
+        pressed: active,
+        onClick: () => onValueChange(c.props.value),
+      });
+    })}
+  </div>
+);

package/registry/components/tooltip.tsx

@@ -0,0 +1,70 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const TooltipContext = React.createContext<{ label: string | null; setLabel: (v: string | null) => void } | null>(
+  null,
+);
+
+export function TooltipProvider({ children }: { children: React.ReactNode }) {
+  const [label, setLabel] = React.useState<string | null>(null);
+  const [pos, setPos] = React.useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  return (
+    <TooltipContext.Provider value={{ label, setLabel }}>
+      {children}
+      {label ? (
+        <div
+          className="pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md bg-[var(--ui-fg)] px-2 py-1 text-xs text-[var(--ui-bg)] shadow-md"
+          style={{ left: pos.x, top: pos.y - 6 }}
+        >
+          {label}
+        </div>
+      ) : null}
+      <TooltipListener pos={pos} setPos={setPos} setLabel={setLabel} />
+    </TooltipContext.Provider>
+  );
+}
+
+function TooltipListener({
+  pos,
+  setPos,
+  setLabel,
+}: {
+  pos: { x: number; y: number };
+  setPos: (p: { x: number; y: number }) => void;
+  setLabel: (v: string | null) => void;
+}) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  React.useEffect(() => {
+    const onOver = (e: MouseEvent) => {
+      const t = (e.target as HTMLElement)?.closest<HTMLElement>("[data-tooltip]");
+      if (t) {
+        const r = t.getBoundingClientRect();
+        setPos({ x: r.left + r.width / 2, y: r.top });
+        setLabel(t.dataset.tooltip ?? null);
+      }
+    };
+    const onOut = (e: MouseEvent) => {
+      const t = (e.target as HTMLElement)?.closest<HTMLElement>("[data-tooltip]");
+      if (t) setLabel(null);
+    };
+    document.addEventListener("mouseover", onOver);
+    document.addEventListener("mouseout", onOut);
+    return () => {
+      document.removeEventListener("mouseover", onOver);
+      document.removeEventListener("mouseout", onOut);
+    };
+  }, [setLabel, setPos, pos]);
+  void ref;
+  return null;
+}
+
+export function Tooltip({
+  children,
+  label,
+}: {
+  children: React.ReactElement;
+  label: string;
+}) {
+  return React.cloneElement(children, { "data-tooltip": label });
+}

package/registry/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}