create-swift-rust 0.8.2 → 0.9.2

package/templates/ui/button.tsx

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Button
+ *
+ * Three independent dimensions (Tailwind v4):
+ *   variant — what the button means (default, outline, secondary, ghost, destructive, link)
+ *   size    — how big it is (default, xs, sm, md, lg, icon, icon-xs, icon-sm, icon-md, icon-lg)
+ *   design  — how it looks (flat, soft, 3d, glass, neo, brutal, gradient)
+ *
+ * `design` is the "style" dimension — the prop is named `design` because React
+ * reserves `style` for inline styles.
+ */
+
+export type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+export type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-md"
+  | "icon-lg";
+export type ButtonDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+  outline: "border border-input bg-background text-foreground hover:bg-secondary",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "text-foreground hover:bg-secondary",
+  link: "text-primary underline-offset-4 hover:underline",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  default: "h-9 px-4 text-sm",
+  xs: "h-7 gap-1 rounded-md px-2.5 text-xs",
+  sm: "h-8 gap-1.5 px-3 text-xs",
+  md: "h-9 px-4 text-sm",
+  lg: "h-10 px-6 text-sm",
+  icon: "size-9",
+  "icon-xs": "size-7 rounded-md",
+  "icon-sm": "size-8",
+  "icon-md": "size-9",
+  "icon-lg": "size-10",
+};
+
+const DESIGNS: Record<ButtonDesign, string> = {
+  flat: "",
+  soft: "rounded-xl border-transparent shadow-none",
+  // Real depth, not a drop shadow: a glossy top→bottom sheen layered over the
+  // variant color gives the face a curve, and a darker bottom "lip" (a thick
+  // bottom border, not a shadow) makes it sit proud of the page. Pressing
+  // sinks it — the lip shrinks and the whole face shifts down.
+  "3d":
+    "border-b-4 border-b-black/30 bg-linear-to-b from-white/25 to-black/10 " +
+    "hover:brightness-110 active:translate-y-[3px] active:border-b-[1px] active:brightness-100 " +
+    "dark:border-b-black/50",
+  // Liquid glass: heavy blur + saturation for vibrancy, a translucent refractive
+  // sheen (the diagonal white gradient), a bright rim, and a specular top
+  // highlight with a soft ambient lift.
+  glass:
+    "border border-white/40 bg-white/15 text-foreground backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/35 via-white/10 to-white/5 hover:bg-white/25 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_4px_16px_rgba(31,38,135,0.18)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/20 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_4px_16px_rgba(0,0,0,0.4)]",
+  neo:
+    "border-transparent bg-background text-foreground " +
+    "shadow-[5px_5px_10px_rgba(0,0,0,0.15),-5px_-5px_10px_rgba(255,255,255,0.8)] " +
+    "hover:shadow-[3px_3px_6px_rgba(0,0,0,0.15),-3px_-3px_6px_rgba(255,255,255,0.8)] " +
+    "active:shadow-[inset_3px_3px_6px_rgba(0,0,0,0.15),inset_-3px_-3px_6px_rgba(255,255,255,0.7)] " +
+    "dark:shadow-[5px_5px_10px_rgba(0,0,0,0.6),-5px_-5px_10px_rgba(255,255,255,0.06)] " +
+    "dark:hover:shadow-[3px_3px_6px_rgba(0,0,0,0.6),-3px_-3px_6px_rgba(255,255,255,0.06)] " +
+    "dark:active: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 font-semibold " +
+    "shadow-[4px_4px_0_0_var(--color-foreground)] " +
+    "active:translate-x-[2px] active:translate-y-[2px] active:shadow-[1px_1px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-transparent bg-linear-to-br from-violet-500 via-fuchsia-500 to-orange-400 " +
+    "text-white shadow-md hover:brightness-110 active:brightness-95",
+};
+
+// Designs that paint their own surface keep the variant's text/intent where
+// possible; link buttons have no surface, so designs are skipped for them.
+export interface ButtonStyleProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  design?: ButtonDesign;
+}
+
+export function buttonVariants({
+  variant = "default",
+  size = "default",
+  design = "flat",
+  className,
+}: ButtonStyleProps & { className?: string } = {}): string {
+  return cn(
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-all",
+    "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    VARIANTS[variant],
+    SIZES[size],
+    variant === "link" ? "" : DESIGNS[design],
+    className,
+  );
+}
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonStyleProps {
+  asChild?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", design = "flat", asChild, ...props }, ref) => {
+    const classes = buttonVariants({ variant, size, design, className });
+    if (asChild && React.isValidElement(props.children)) {
+      const child = props.children as React.ReactElement<{ className?: string }>;
+      return React.cloneElement(child, {
+        className: cn(classes, child.props.className),
+      });
+    }
+    return <button ref={ref} className={classes} {...props} />;
+  },
+);
+Button.displayName = "Button";

package/templates/ui/card.tsx

@@ -0,0 +1,124 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Card
+ *
+ * variant — default, outline, secondary, ghost
+ * size    — sm, default, lg (padding scale; subcomponents read it via --card-p)
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ */
+
+export type CardVariant = "default" | "outline" | "secondary" | "ghost";
+export type CardSize = "default" | "sm" | "lg";
+export type CardDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<CardVariant, string> = {
+  default: "border border-border bg-card text-card-foreground",
+  outline: "border-2 border-border bg-transparent text-foreground",
+  secondary: "border border-transparent bg-secondary text-secondary-foreground",
+  ghost: "border border-transparent bg-transparent text-foreground",
+};
+
+const SIZES: Record<CardSize, string> = {
+  sm: "[--card-p:1rem]",
+  default: "[--card-p:1.5rem]",
+  lg: "[--card-p:2rem]",
+};
+
+const DESIGNS: Record<CardDesign, string> = {
+  flat: "shadow-sm",
+  soft: "rounded-2xl border-transparent bg-muted shadow-none",
+  // Depth via a darker bottom lip (border, not shadow) + a top sheen, so the
+  // card sits proud of the page like a physical tile.
+  "3d": "border-b-[6px] border-b-black/20 bg-linear-to-b from-white/30 to-transparent dark:border-b-black/50",
+  // Liquid glass: heavy blur + saturation, a translucent refractive sheen, a
+  // bright rim, and a specular top highlight over a soft ambient lift.
+  glass:
+    "border-white/40 bg-white/15 backdrop-blur-xl backdrop-saturate-200 " +
+    "bg-linear-to-br from-white/35 via-white/10 to-white/5 " +
+    "shadow-[inset_0_1px_1px_rgba(255,255,255,0.6),0_8px_32px_rgba(31,38,135,0.18)] " +
+    "dark:border-white/20 dark:bg-white/10 dark:from-white/15 dark:via-white/5 dark:to-transparent " +
+    "dark:shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_8px_32px_rgba(0,0,0,0.45)]",
+  neo:
+    "border-transparent bg-background " +
+    "shadow-[8px_8px_16px_rgba(0,0,0,0.15),-8px_-8px_16px_rgba(255,255,255,0.8)] " +
+    "dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(255,255,255,0.05)]",
+  brutal: "rounded-none border-2 border-foreground shadow-[6px_6px_0_0_var(--color-foreground)]",
+  gradient:
+    "border-2 border-transparent " +
+    "[background:linear-gradient(var(--color-card),var(--color-card))_padding-box," +
+    "linear-gradient(135deg,#8b5cf6,#d946ef,#fb923c)_border-box] shadow-md",
+};
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+  size?: CardSize;
+  design?: CardDesign;
+}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", size = "default", design = "flat", ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col rounded-xl",
+        VARIANTS[variant],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col gap-1.5 p-(--card-p)", 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-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("ml-auto self-start", className)} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-(--card-p) 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-(--card-p) pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/templates/ui/input.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * swift-rust ui · Input
+ *
+ * variant — default, outline, secondary, ghost, destructive
+ * size    — xs, sm, default, md, lg   (the native `size` attribute is dropped)
+ * design  — flat, soft, 3d, glass, neo, brutal, gradient
+ */
+
+export type InputVariant = "default" | "outline" | "secondary" | "ghost" | "destructive";
+export type InputSize = "default" | "xs" | "sm" | "md" | "lg";
+export type InputDesign = "flat" | "soft" | "3d" | "glass" | "neo" | "brutal" | "gradient";
+
+const VARIANTS: Record<InputVariant, 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 SIZES: Record<InputSize, string> = {
+  default: "h-9 px-3 py-1 text-sm",
+  xs: "h-7 rounded-md px-2 text-xs",
+  sm: "h-8 px-2.5 text-xs",
+  md: "h-9 px-3 py-1 text-sm",
+  lg: "h-10 px-4 text-base",
+};
+
+const DESIGNS: Record<InputDesign, string> = {
+  flat: "shadow-xs",
+  soft: "rounded-xl border-transparent bg-secondary shadow-none",
+  // A field reads "deep" when it looks recessed: a darker top edge + a top→down
+  // shading gradient sink the surface in (no inset shadow).
+  "3d": "border-t-2 border-t-black/15 bg-linear-to-b from-black/[0.06] to-transparent dark:border-t-black/40",
+  // Liquid glass field: blur + saturation, translucent sheen, bright rim.
+  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 InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  variant?: InputVariant;
+  size?: InputSize;
+  design?: InputDesign;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, type = "text", variant = "default", size = "default", design = "flat", ...props },
+    ref,
+  ) => (
+    <input
+      type={type}
+      ref={ref}
+      className={cn(
+        "flex w-full min-w-0 rounded-lg text-foreground transition-[color,box-shadow,background-color]",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/50",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+        VARIANTS[variant],
+        SIZES[size],
+        DESIGNS[design],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";

package/templates/ui/label.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * 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, variant = "default", size = "default", ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "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}
+    />
+  ),
+);
+Label.displayName = "Label";

package/templates/ui/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));
+}