@swift-rust/ui 0.2.0 → 0.6.0

package/registry/components/stepper.tsx

@@ -0,0 +1,63 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface StepItem {
+  title: string;
+  description?: string;
+}
+
+export function Stepper({
+  steps,
+  current = 0,
+  orientation = "horizontal",
+  className,
+}: {
+  steps: StepItem[];
+  current?: number;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+}) {
+  const vertical = orientation === "vertical";
+  return (
+    <ol className={cn("flex w-full", vertical ? "flex-col gap-0" : "items-start", className)}>
+      {steps.map((step, i) => {
+        const state = i < current ? "complete" : i === current ? "current" : "upcoming";
+        const last = i === steps.length - 1;
+        return (
+          <li key={step.title} className={cn("flex", vertical ? "gap-3" : "flex-1 flex-col items-center text-center")}>
+            <div className={cn("flex items-center", vertical ? "flex-col" : "w-full")}>
+              {!vertical && i > 0 && (
+                <span className={cn("h-0.5 flex-1", i <= current ? "bg-primary" : "bg-border")} />
+              )}
+              <span
+                className={cn(
+                  "flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-colors",
+                  state === "complete" && "border-primary bg-primary text-primary-foreground",
+                  state === "current" && "border-primary text-primary",
+                  state === "upcoming" && "border-border text-muted-foreground",
+                )}
+              >
+                {state === "complete" ? (
+                  <svg viewBox="0 0 24 24" className="size-4" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden><path d="M20 6 9 17l-5-5" strokeLinecap="round" strokeLinejoin="round" /></svg>
+                ) : (
+                  i + 1
+                )}
+              </span>
+              {!vertical && !last && (
+                <span className={cn("h-0.5 flex-1", i < current ? "bg-primary" : "bg-border")} />
+              )}
+              {vertical && !last && <span className={cn("my-1 w-0.5 flex-1", i < current ? "bg-primary" : "bg-border")} />}
+            </div>
+            <div className={cn(vertical ? "pb-6 pt-1" : "mt-2")}>
+              <p className={cn("text-sm font-medium", state === "upcoming" ? "text-muted-foreground" : "text-foreground")}>
+                {step.title}
+              </p>
+              {step.description && <p className="mt-0.5 text-xs text-muted-foreground">{step.description}</p>}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/registry/components/switch.tsx

@@ -1,18 +1,19 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export const Switch = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+export type SwitchProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ 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",
+          "relative h-5 w-9 rounded-full bg-input transition-colors",
+          "peer-checked:bg-primary",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
           "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",
+          "after:absolute after:left-0.5 after:top-0.5 after:size-4 after:rounded-full after:bg-background after:shadow-sm after:transition-transform",
           "peer-checked:after:translate-x-4",
           className,
         )}

package/registry/components/table.tsx

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
@@ -34,7 +33,7 @@ export const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttribut
     <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)]",
+        "border-b border-border transition-colors hover:bg-muted data-[state=selected]:bg-muted",
         className,
       )}
       {...props}
@@ -48,7 +47,7 @@ export const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttr
     <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)]",
+        "h-10 px-3 text-left align-middle text-xs font-semibold uppercase tracking-wider text-muted-foreground",
         className,
       )}
       {...props}

package/registry/components/tabs.tsx

@@ -35,7 +35,7 @@ export function TabsList({ className, ...props }: React.HTMLAttributes<HTMLDivEl
     <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)]",
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
         className,
       )}
       {...props}
@@ -59,8 +59,8 @@ export function TabsTrigger({
       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)]",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        active ? "bg-popover text-foreground shadow-sm" : "hover:text-foreground",
         className,
       )}
       {...props}

package/registry/components/textarea.tsx

@@ -1,18 +1,54 @@
-"use client";
 import * as React from "react";
 import { cn } from "@/lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaVariant = "default" | "outline" | "secondary" | "ghost" | "destructive";
+export type TextareaDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<TextareaVariant, string> = {
+  default: "border border-input bg-background",
+  outline: "border-2 border-input bg-transparent",
+  secondary: "border border-transparent bg-secondary",
+  ghost: "border border-transparent bg-transparent hover:bg-secondary/50",
+  destructive:
+    "border border-destructive text-destructive placeholder:text-destructive/60 focus-visible:ring-destructive/40",
+};
+
+const DESIGNS: Record<TextareaDesign, string> = {
+  flat: "shadow-xs",
+  soft: "rounded-xl border-transparent bg-secondary shadow-none",
+  "3d": "border-t-2 border-t-black/15 bg-linear-to-b from-black/[0.06] to-transparent dark:border-t-black/40",
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 placeholder:text-foreground/50 " +
+    "bg-linear-to-br from-white/30 to-white/5 dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:to-transparent",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[inset_3px_3px_6px_rgba(0,0,0,0.12),inset_-3px_-3px_6px_rgba(255,255,255,0.7)] " +
+    "dark:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.6),inset_-3px_-3px_6px_rgba(255,255,255,0.05)]",
+  brutal:
+    "rounded-none border-2 border-foreground shadow-[3px_3px_0_0_var(--color-foreground)] " +
+    "focus-visible:shadow-[1px_1px_0_0_var(--color-foreground)] focus-visible:ring-0",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-background),var(--color-background))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box]",
+};
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  variant?: TextareaVariant;
+  design?: TextareaDesign;
+}
 
 export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, variant = "default", design = "flat", ...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",
+        "flex min-h-20 w-full rounded-lg px-3 py-2 text-sm text-foreground transition-[color,box-shadow,background-color]",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
         "disabled:cursor-not-allowed disabled:opacity-50",
+        VARIANTS[variant],
+        DESIGNS[design],
         className,
       )}
       {...props}

package/registry/components/toast.tsx

@@ -25,9 +25,9 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
   }, []);
 
   const TONE: Record<ToastTone, string> = {
-    default: "bg-[var(--ui-fg)] text-[var(--ui-bg)]",
+    default: "bg-primary text-primary-foreground",
     success: "bg-[#16a34a] text-white",
-    error: "bg-[var(--ui-danger)] text-white",
+    error: "bg-destructive text-white",
     warning: "bg-[#f59e0b] text-white",
   };
 

package/registry/components/toggle-group.tsx

@@ -0,0 +1,72 @@
+"use client";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const ToggleGroupContext = React.createContext<{
+  value: string[];
+  toggle: (v: string) => void;
+} | null>(null);
+
+export function ToggleGroup({
+  type = "single",
+  value: controlled,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+}: {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (v: string | string[]) => void;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const norm = (v: string | string[] | undefined) =>
+    v === undefined ? [] : Array.isArray(v) ? v : [v];
+  const [internal, setInternal] = React.useState<string[]>(norm(defaultValue));
+  const value = controlled !== undefined ? norm(controlled) : internal;
+  const toggle = (v: string) => {
+    let next: string[];
+    if (type === "single") next = value.includes(v) ? [] : [v];
+    else next = value.includes(v) ? value.filter((x) => x !== v) : [...value, v];
+    if (controlled === undefined) setInternal(next);
+    onValueChange?.(type === "single" ? (next[0] ?? "") : next);
+  };
+  return (
+    <ToggleGroupContext.Provider value={{ value, toggle }}>
+      <div role="group" className={cn("inline-flex gap-0.5 rounded-md border border-border p-0.5", className)}>
+        {children}
+      </div>
+    </ToggleGroupContext.Provider>
+  );
+}
+
+export function ToggleGroupItem({
+  value,
+  className,
+  children,
+}: {
+  value: string;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const ctx = React.useContext(ToggleGroupContext);
+  const active = ctx?.value.includes(value);
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      data-state={active ? "on" : "off"}
+      onClick={() => ctx?.toggle(value)}
+      className={cn(
+        "inline-flex h-8 min-w-8 items-center justify-center gap-2 rounded px-2.5 text-sm font-medium transition-colors",
+        "hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground [&_svg]:size-4",
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/registry/components/toggle.tsx

@@ -1,18 +1,42 @@
-"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) => (
+export type ToggleVariant = "default" | "outline";
+export type ToggleSize = "sm" | "default" | "lg";
+
+const VARIANTS: Record<ToggleVariant, string> = {
+  default: "bg-transparent",
+  outline: "border border-input bg-transparent shadow-xs",
+};
+
+const SIZES: Record<ToggleSize, string> = {
+  sm: "h-8 min-w-8 px-2 text-xs",
+  default: "h-9 min-w-9 px-2.5 text-sm",
+  lg: "h-10 min-w-10 px-3 text-sm",
+};
+
+export interface ToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  pressed?: boolean;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+}
+
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, pressed, variant = "default", size = "default", ...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)]",
+        "inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors",
+        "hover:bg-muted hover:text-foreground",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground",
+        "[&_svg]:size-4 [&_svg]:shrink-0",
+        VARIANTS[variant],
+        SIZES[size],
         className,
       )}
       {...props}
@@ -21,7 +45,7 @@ export const Toggle = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttrib
 );
 Toggle.displayName = "Toggle";
 
-export const ToggleGroup = ({
+export function ToggleGroup({
   value,
   onValueChange,
   children,
@@ -31,16 +55,17 @@ export const ToggleGroup = ({
   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>
-);
+}) {
+  return (
+    <div role="group" className={cn("inline-flex gap-0.5 rounded-md border border-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 }>;
+        return React.cloneElement(c, {
+          pressed: c.props.value === value,
+          onClick: () => onValueChange(c.props.value),
+        });
+      })}
+    </div>
+  );
+}

package/registry/components/tooltip.tsx

@@ -14,7 +14,7 @@ export function TooltipProvider({ children }: { children: React.ReactNode }) {
       {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"
+          className="pointer-events-none fixed z-50 -translate-x-1/2 -translate-y-full rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground shadow-md"
           style={{ left: pos.x, top: pos.y - 6 }}
         >
           {label}
@@ -66,5 +66,7 @@ export function Tooltip({
   children: React.ReactElement;
   label: string;
 }) {
-  return React.cloneElement(children, { "data-tooltip": label });
+  return React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+    "data-tooltip": label,
+  });
 }