@turtleclub/ui 0.0.1

package/src/components/molecules/tx-status.tsx

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "@/components/ui/card";
+import { IconAnimation } from "@/components/ui/icon-animation";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, TurtleIcon, XIcon } from "lucide-react";
+
+interface TxStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  txHash?: string;
+  explorerUrl?: string;
+  estimatedTime?: string;
+  amount?: string;
+  token?: string;
+  protocol?: string;
+  steps?: Array<{
+    label: string;
+    completed: boolean;
+    current?: boolean;
+    txHash?: string;
+  }>;
+  variant?: "default" | "compact";
+  completed?: boolean;
+  cancelled?: boolean;
+  onViewDetails?: () => void;
+  onClose?: () => void;
+  showActions?: boolean;
+}
+
+const TxStatus = React.forwardRef<HTMLDivElement, TxStatusProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      txHash,
+      explorerUrl,
+      estimatedTime,
+      amount,
+      token,
+      protocol,
+      steps = [],
+      variant = "default",
+      completed = false,
+      cancelled = false,
+      onViewDetails,
+      onClose,
+      showActions = true,
+      ...props
+    },
+    ref
+  ) => {
+    const defaultTitle = cancelled 
+      ? "Transaction Cancelled" 
+      : completed 
+      ? "Transaction Completed" 
+      : "Processing Transaction";
+    const defaultDescription = cancelled
+      ? "Transaction was cancelled by user"
+      : completed
+      ? "Your transaction has been successfully processed!"
+      : "Please wait while your transaction is being processed...";
+
+    const ExternalLinkIcon = ({ size = "w-4 h-4" }) => (
+      <svg className={size} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+        />
+      </svg>
+    );
+
+    const StepCheckIcon = () => (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+      </svg>
+    );
+
+    const formatTxHash = (hash: string) => {
+      if (hash.length <= 12) return hash;
+      return `${hash.slice(0, 6)}...${hash.slice(-6)}`;
+    };
+
+    return (
+      <Card
+        ref={ref}
+        className={cn(
+          "p-6 text-center space-y-4",
+          variant === "compact" && "p-4 space-y-3",
+          className
+        )}
+        {...props}
+      >
+        {/* Animation */}
+        <div className="flex justify-center">
+          <IconAnimation spinning={!completed && !cancelled} size={variant === "compact" ? "default" : "lg"}>
+            {cancelled ? (
+              <XIcon className="w-8 h-8 text-destructive" />
+            ) : completed ? (
+              <CheckIcon className="w-8 h-8 text-primary" />
+            ) : (
+              <TurtleIcon className="w-8 h-8 text-primary" />
+            )}
+          </IconAnimation>
+        </div>
+
+        {/* Title and description */}
+        <div className="space-y-2">
+          <h3
+            className={cn(
+              "font-medium text-foreground",
+              variant === "compact" ? "text-sm" : "text-base"
+            )}
+          >
+            {title || defaultTitle}
+          </h3>
+          <p className={cn("text-muted-foreground", variant === "compact" ? "text-xs" : "text-sm")}>
+            {description || defaultDescription}
+          </p>
+        </div>
+
+        {/* Transaction summary (completed state) */}
+        {completed && !cancelled && (amount || token || protocol) && (
+          <div className="p-3 bg-muted/50 rounded-lg space-y-1">
+            {amount && token && (
+              <div className="text-sm font-medium">
+                {amount} {token}
+              </div>
+            )}
+            {protocol && <div className="text-xs text-muted-foreground">via {protocol}</div>}
+          </div>
+        )}
+
+        {/* Transaction hash link */}
+        {txHash && !cancelled && (
+          <div className="space-y-1">
+            <div className="text-xs text-muted-foreground">Transaction Hash</div>
+            {explorerUrl ? (
+              <a
+                href={`${explorerUrl}/tx/${txHash}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 text-sm text-primary hover:text-primary/80 transition-colors"
+              >
+                {formatTxHash(txHash)}
+                <ExternalLinkIcon />
+              </a>
+            ) : (
+              <div className="text-sm font-mono text-foreground">{formatTxHash(txHash)}</div>
+            )}
+          </div>
+        )}
+
+        {/* Estimated time (pending state) */}
+        {!completed && !cancelled && estimatedTime && (
+          <div className="text-xs text-muted-foreground">Estimated time: {estimatedTime}</div>
+        )}
+
+        {/* Progress steps (pending state) */}
+        {!completed && !cancelled && steps.length > 0 && (
+          <div className="space-y-2 pt-2 border-t border-border">
+            <div className="text-xs font-medium text-muted-foreground text-left">Progress</div>
+            <div className="space-y-2">
+              {steps.map((step, index) => (
+                <div key={index} className="flex items-center gap-3 text-left">
+                  <div
+                    className={cn(
+                      "flex items-center justify-center w-5 h-5 rounded-full border-2 flex-shrink-0",
+                      step.completed && "bg-primary border-primary text-primary-foreground",
+                      step.current &&
+                        !step.completed &&
+                        "border-primary text-primary animate-pulse",
+                      !step.completed &&
+                        !step.current &&
+                        "border-muted-foreground/30 text-muted-foreground"
+                    )}
+                  >
+                    {step.completed ? (
+                      <StepCheckIcon />
+                    ) : step.current ? (
+                      <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
+                    ) : (
+                      <div className="w-2 h-2 rounded-full bg-muted-foreground/30" />
+                    )}
+                  </div>
+                  <div className="flex-1 flex items-center justify-between">
+                    <span
+                      className={cn(
+                        "text-sm",
+                        step.completed && "text-foreground",
+                        step.current && !step.completed && "text-foreground font-medium",
+                        !step.completed && !step.current && "text-muted-foreground"
+                      )}
+                    >
+                      {step.label}
+                    </span>
+                    {step.txHash && explorerUrl && (
+                      <a
+                        href={`${explorerUrl}/tx/${step.txHash}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors ml-2"
+                        title={`View transaction: ${step.txHash}`}
+                      >
+                        <span className="font-mono">{step.txHash.slice(0, 6)}...{step.txHash.slice(-4)}</span>
+                        <ExternalLinkIcon size="w-3 h-3" />
+                      </a>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Action buttons (completed or cancelled state) */}
+        {(completed || cancelled) && showActions && (onViewDetails || onClose) && (
+          <div
+            className={cn(
+              "flex gap-2 pt-2",
+              variant === "compact" ? "flex-col" : "flex-row justify-center"
+            )}
+          >
+            {!cancelled && onViewDetails && (
+              <Button
+                variant="transparentWhite"
+                size={variant === "compact" ? "sm" : "default"}
+                onClick={onViewDetails}
+              >
+                View Details
+              </Button>
+            )}
+            {onClose && (
+              <Button
+                variant="default"
+                size={variant === "compact" ? "sm" : "default"}
+                onClick={onClose}
+              >
+                {cancelled ? "Try Again" : "Done"}
+              </Button>
+            )}
+          </div>
+        )}
+      </Card>
+    );
+  }
+);
+
+TxStatus.displayName = "TxStatus";
+
+export { TxStatus };

package/src/components/ui/button.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none border",
+  {
+    variants: {
+      variant: {
+        // Turtle Design System variants using semantic classes
+        default:
+          "bg-background text-primary border-primary shadow-[0_0_4px_0_hsl(var(--primary))] hover:bg-background/90 hover:shadow-[0_0_6px_0_hsl(var(--primary))]",
+        green:
+          "bg-primary text-primary-foreground border-primary shadow-[0_0_4px_0_hsl(var(--primary))] hover:bg-primary/90 hover:shadow-[0_0_6px_0_hsl(var(--primary))]",
+        transparentWhite: "bg-secondary text-secondary-foreground border-secondary hover:bg-secondary/80",
+        transparentGreen: "bg-secondary text-primary border-secondary hover:bg-secondary/80",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+      rounded: {
+        default: "rounded-full",
+        none: "rounded-none",
+        sm: "rounded-sm",
+        md: "rounded-md",
+        lg: "rounded-lg",
+        full: "rounded-full",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      rounded: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  rounded,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, rounded, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,101 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const cardVariants = cva("transition-all", {
+  variants: {
+    variant: {
+      // Turtle Design System variants
+      container:
+        "relative bg-card shadow-[0_0_20px_0_rgba(0,0,0,0.25)] before:absolute before:inset-0 before:rounded-[inherit] before:p-px before:bg-gradient-to-b before:from-[#F9F9F9] before:from-40% before:via-white before:via-40.01% before:to-white before:to-50% before:content-[''] before:pointer-events-none before:-z-10",
+      simple: "bg-muted",
+      item: "bg-muted shadow-[0_4px_4px_0_rgba(0,0,0,0.25)]",
+    },
+    padding: {
+      none: "p-0",
+      sm: "p-3",
+      default: "p-4",
+      md: "p-6",
+      lg: "p-8",
+    },
+    rounded: {
+      default: "rounded-lg",
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      xl: "rounded-xl",
+      full: "rounded-full",
+    },
+  },
+  defaultVariants: {
+    variant: "container",
+    padding: "default",
+    rounded: "default",
+  },
+});
+
+function Card({
+  className,
+  variant,
+  padding,
+  rounded,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(cardVariants({ variant, padding, rounded, className }))}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, children, ...props }: React.ComponentProps<"h3">) {
+  return (
+    <h3
+      data-slot="card-title"
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    >
+      {children}
+    </h3>
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants };

package/src/components/ui/chip.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const chipVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer border-none rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        xs: "h-6 px-2 py-1 text-xs",
+        default: "h-8 px-4 py-1",
+        sm: "h-7 px-3 py-1 text-xs",
+        lg: "h-9 px-6 py-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ChipProps extends React.ComponentProps<"div">, VariantProps<typeof chipVariants> {
+  asChild?: boolean;
+}
+
+const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    return (
+      <div
+        data-slot="chip"
+        className={cn(chipVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Chip.displayName = "Chip";
+
+export { Chip, chipVariants };

package/src/components/ui/icon-animation.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const iconAnimationVariants = cva(
+  "relative inline-flex items-center justify-center rounded-full",
+  {
+    variants: {
+      size: {
+        default: "w-12 h-12",
+        sm: "w-8 h-8",
+        lg: "w-16 h-16",
+        xl: "w-20 h-20",
+      },
+      variant: {
+        default: "bg-background",
+        transparent: "bg-transparent",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  }
+);
+
+export interface IconAnimationProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof iconAnimationVariants> {
+  children: React.ReactNode;
+  spinning?: boolean;
+}
+
+const IconAnimation = React.forwardRef<HTMLDivElement, IconAnimationProps>(
+  ({ className, size, variant, children, spinning = true, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(iconAnimationVariants({ size, variant }), className)}
+        {...props}
+      >
+        {/* Animated border */}
+        <div
+          className={cn(
+            "absolute inset-0 rounded-full",
+            "bg-gradient-to-r from-transparent via-primary to-transparent",
+            "animate-spin",
+            {
+              "animate-spin": spinning,
+              "animate-none": !spinning,
+            }
+          )}
+          style={{
+            background: spinning
+              ? "conic-gradient(from 0deg, transparent 0deg, var(--primary) 180deg, transparent 360deg)"
+              : "conic-gradient(from 0deg, var(--primary) 0deg, var(--primary) 360deg)",
+            padding: "1px",
+            borderRadius: "9999px",
+          }}
+        >
+          {/* Inner circle to create the border effect */}
+          <div
+            className={cn(
+              "w-full h-full rounded-full",
+              variant === "transparent" ? "bg-transparent" : "bg-background"
+            )}
+          />
+        </div>
+        
+        {/* Icon container - stays fixed */}
+        <div className="relative z-10 flex items-center justify-center">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+IconAnimation.displayName = "IconAnimation";
+
+export { IconAnimation, iconAnimationVariants };

package/src/components/ui/index.ts

@@ -0,0 +1,18 @@
+export * from "./input";
+export * from "./label";
+export * from "./scroll-area";
+export * from "./select";
+export * from "./separator";
+export * from "./sonner";
+export * from "./switch";
+export * from "./toggle-group";
+export * from "./toggle";
+export * from "./tooltip";
+export * from "./button";
+export * from "./card";
+export * from "./chip";
+export * from "./icon-animation";
+export * from "./label-with-icon";
+export * from "./navigation-bar";
+export * from "./info-card";
+export * from "./opportunity-details-v1";

package/src/components/ui/info-card.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Card } from "./card";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+
+const infoCardVariants = cva("space-y-1", {
+  variants: {
+    size: {
+      sm: "p-2",
+      default: "p-3",
+      lg: "p-4",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    align: "center",
+  },
+});
+
+const valueVariants = cva("font-bold", {
+  variants: {
+    color: {
+      primary: "text-foreground",
+      secondary: "text-muted-foreground",
+      accent: "text-primary",
+      success: "text-green-600",
+      warning: "text-yellow-600",
+      error: "text-red-600",
+    },
+    size: {
+      sm: "text-sm",
+      default: "text-lg",
+      lg: "text-xl",
+      xl: "text-2xl",
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "default",
+  },
+});
+
+const titleVariants = cva("font-medium text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-xs",
+      lg: "text-sm",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+interface InfoCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
+    VariantProps<typeof infoCardVariants> {
+  title: string;
+  value: string;
+  color?: VariantProps<typeof valueVariants>["color"];
+  valueSize?: VariantProps<typeof valueVariants>["size"];
+  titleSize?: VariantProps<typeof titleVariants>["size"];
+  align?: VariantProps<typeof infoCardVariants>["align"];
+  icon?: React.ReactNode;
+  subtitle?: string;
+}
+
+const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
+  (
+    {
+      title,
+      value,
+      color = "primary",
+      valueSize = "default",
+      titleSize = "default",
+      size = "default",
+      align = "center",
+      icon,
+      subtitle,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Card
+        ref={ref}
+        variant="item"
+        className={cn(infoCardVariants({ size, align }), className)}
+        {...props}
+      >
+        {/* Icon */}
+        {icon && (
+          <div
+            className={cn(
+              "flex mb-2",
+              align === "left" && "justify-start",
+              align === "center" && "justify-center",
+              align === "right" && "justify-end"
+            )}
+          >
+            {icon}
+          </div>
+        )}
+
+        {/* Title */}
+        <p className={titleVariants({ size: titleSize })}>{title}</p>
+
+        {/* Value */}
+        <p className={valueVariants({ color, size: valueSize })}>{value}</p>
+
+        {/* Subtitle */}
+        {subtitle && <p className="text-xs text-muted-foreground/70">{subtitle}</p>}
+      </Card>
+    );
+  }
+);
+
+InfoCard.displayName = "InfoCard";
+
+export { InfoCard };