@turtleclub/ui 0.3.0-beta.21 → 0.3.0-beta.23

package/src/components/molecules/widget/widget-item.tsx

@@ -14,10 +14,10 @@ const WidgetItem = React.forwardRef<HTMLDivElement, WidgetItemProps>(
       <Card
         ref={ref}
         variant="border"
-        gradientBorder="white"
+        gradient="white"
         className={cn(
-          "cursor-pointer transition-all duration-200 hover:shadow-md w-full p-4 bg-background",
-          selected && "ring-2 ring-primary ring-offset-2",
+          "bg-background w-full cursor-pointer p-4 transition-all duration-200 hover:shadow-md",
+          selected && "ring-primary ring-2 ring-offset-2",
           className
         )}
         onClick={onSelect}
@@ -39,11 +39,7 @@ interface WidgetItemTopProps extends React.ComponentProps<"div"> {
 const WidgetItemTop = React.forwardRef<HTMLDivElement, WidgetItemTopProps>(
   ({ className, children, ...props }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cn("flex items-start justify-between gap-4", className)}
-        {...props}
-      >
+      <div ref={ref} className={cn("flex items-start justify-between gap-4", className)} {...props}>
         {children}
       </div>
     );
@@ -60,11 +56,7 @@ interface WidgetItemBottomProps extends React.ComponentProps<"div"> {
 const WidgetItemBottom = React.forwardRef<HTMLDivElement, WidgetItemBottomProps>(
   ({ className, children, ...props }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cn("flex items-end justify-between gap-4", className)}
-        {...props}
-      >
+      <div ref={ref} className={cn("flex items-end justify-between gap-4", className)} {...props}>
         {children}
       </div>
     );
@@ -83,7 +75,7 @@ const WidgetItemLeft = React.forwardRef<HTMLDivElement, WidgetItemLeftProps>(
     return (
       <div
         ref={ref}
-        className={cn("flex flex-col min-w-0 flex-1 items-start justify-start gap-1", className)}
+        className={cn("flex min-w-0 flex-1 flex-col items-start justify-start gap-1", className)}
         {...props}
       >
         {children}
@@ -104,7 +96,7 @@ const WidgetItemRight = React.forwardRef<HTMLDivElement, WidgetItemRightProps>(
     return (
       <div
         ref={ref}
-        className={cn("flex flex-col gap-1 justify-between items-end", className)}
+        className={cn("flex flex-col items-end justify-between gap-1", className)}
         {...props}
       >
         {children}
@@ -116,4 +108,10 @@ const WidgetItemRight = React.forwardRef<HTMLDivElement, WidgetItemRightProps>(
 WidgetItemRight.displayName = "WidgetItemRight";
 
 export { WidgetItem, WidgetItemTop, WidgetItemBottom, WidgetItemLeft, WidgetItemRight };
-export type { WidgetItemProps, WidgetItemTopProps, WidgetItemBottomProps, WidgetItemLeftProps, WidgetItemRightProps };
+export type {
+  WidgetItemProps,
+  WidgetItemTopProps,
+  WidgetItemBottomProps,
+  WidgetItemLeftProps,
+  WidgetItemRightProps,
+};

package/src/components/ui/button.tsx

@@ -2,12 +2,12 @@ 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";
 import { DotIcon } from "../icons/dot";
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   [
-    "border border-transparent bg-clip-padding",
+    "border border-transparent",
     "inline-flex items-center justify-center gap-2 text-xs font-medium whitespace-nowrap transition-all",
     "group-disabled:opacity-80 disabled:pointer-events-none",
     "shrink-0 rounded-full outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -15,8 +15,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-secondary hover:bg-background text-foreground disabled:text-muted-foreground",
-        green: "bg-secondary hover:bg-background text-primary disabled:text-muted-foreground",
+        default:
+          "bg-secondary hover:bg-background text-foreground disabled:text-muted-foreground active:bg-background/90",
+        green:
+          "bg-secondary hover:bg-background text-primary disabled:text-muted-foreground active:bg-background/90",
         menu: "bg-background hover:text-primary justify-between disabled:grayscale-100",
       },
       size: {
@@ -25,10 +27,17 @@ const buttonVariants = cva(
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
       },
+      border: {
+        none: "",
+        interactive: "hover:border-gradient-white active:border-gradient-primary",
+        "gradient-white": "border-gradient-white",
+        "gradient-primary": "border-gradient-primary",
+      },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      border: "interactive",
     },
   }
 );
@@ -37,50 +46,35 @@ function Button({
   className,
   variant,
   size,
-  fullWidth = false,
-  asChild = false,
+  border,
   isActive = false,
+  asChild = false,
   children,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-    fullWidth?: boolean;
     isActive?: boolean;
   }) {
   const Comp = asChild ? Slot : "button";
 
-  const noGradient = variant === "menu" || fullWidth;
   return (
     <Comp
       data-slot="button"
       {...props}
-      className={cn(
-        "group active:from-primary active:via-primary/20 active:to-primary/30 relative rounded-full bg-gradient-to-b disabled:pointer-events-none disabled:opacity-50",
-        noGradient
-          ? "active:from-primary active:via-primary/20 active:to-primary/30"
-          : "group from-foreground/40 via-foreground/10 to-foreground/20 active:from-primary active:via-primary/20 active:to-primary/30 relative bg-gradient-to-b",
-        fullWidth && "w-full",
-        isActive &&
-          "shadow-primary from-primary via-primary/20 to-primary/30 bg-gradient-to-b shadow-xs"
-      )}
+      className={buttonVariants({
+        variant,
+        size,
+        border,
+        className: cn(isActive ? "border-gradient-primary" : "", className),
+      })}
     >
-      <div
-        className={cn(
-          buttonVariants({
-            variant,
-            size,
-            className: cn("w-full", className),
-          })
-        )}
-      >
-        {children}
-        {isActive && (
-          <div className="relative size-[18px] shrink-0">
-            <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-          </div>
-        )}
-      </div>
+      {children}
+      {isActive && (
+        <div className="relative size-[18px] shrink-0">
+          <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
+        </div>
+      )}
     </Comp>
   );
 }

package/src/components/ui/card.tsx

@@ -8,15 +8,12 @@ const cardVariants = cva("min-h-28 max-w-md p-2.5 transition-all", {
     variant: {
       default: "bg-background",
       border: "bg-background border-border border",
-      shadow: "bg-muted shadow-[0px_2px_2px_0px] shadow-black",
+      shadow: "bg-muted shadow-background shadow-[0px_4px_4px_0px]",
     },
-    gradientBorder: {
-      none: " ",
-      white:
-        "group from-foreground/40 via-foreground/10 to-foreground/20 relative bg-gradient-to-b",
-      green:
-        "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-br before:from-[#73F36C]/60 before:via-transparent before:to-[#73F36C]/20 before:[mask-composite:exclude] before:p-px before:content-[''] before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]",
-      auto: "light:before:from-black/20 light:before:to-black/5 relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:[mask-composite:exclude] before:p-px before:content-[''] before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] dark:before:from-white/40 dark:before:to-white/10",
+    gradient: {
+      none: "",
+      primary: "border-gradient-primary",
+      white: "border-gradient-white",
     },
     rounded: {
       default: "rounded-turtle",
@@ -32,7 +29,7 @@ const cardVariants = cva("min-h-28 max-w-md p-2.5 transition-all", {
   defaultVariants: {
     variant: "default",
     rounded: "default",
-    gradientBorder: "none",
+    gradient: "none",
   },
 });
 
@@ -40,35 +37,16 @@ function Card({
   className,
   variant,
   rounded,
-  gradientBorder = "none",
+  gradient,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
-  // Auto-apply gradient border for container variant if not specified
-
-  const hasGradientBorder = gradientBorder !== "none";
-
-  // Get the gradient border classes
-  const gradientClasses = cardVariants({ gradientBorder });
-
-  // Get the main card classes without gradient
-  const cardClasses = cn(cardVariants({ variant, rounded, gradientBorder: "none", className }));
-
-  // If we have a gradient border, wrap the card in a gradient container
-  if (hasGradientBorder) {
-    // Get the rounded class for the wrapper
-    const roundedClass = cardVariants({ rounded });
-    return (
-      <div className={cn(gradientClasses, roundedClass, "h-full p-0")} data-slot="card-wrapper">
-        <div
-          data-slot="card"
-          className={cn(cardClasses, hasGradientBorder ? "bg-muted" : "", "h-full")}
-          {...props}
-        />
-      </div>
-    );
-  }
-
-  return <div data-slot="card" className={cardClasses} {...props} />;
+  return (
+    <div
+      data-slot="card"
+      className={cardVariants({ variant, gradient, rounded, className })}
+      {...props}
+    />
+  );
 }
 
 function CardHeader({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/ui/sidebar.tsx

@@ -10,15 +10,13 @@ export function Sidebar({
   className?: string;
 }) {
   return (
-    <div className="from-foreground/40 via-foreground/10 to-foreground/20 rounded-turtle min-h-[calc(100svh-22px)] w-fit bg-gradient-to-br">
-      <div
-        className={cn(
-          "bg-background rounded-turtle flex h-full min-h-[calc(100svh-20px)] w-72 flex-col gap-4 border border-transparent bg-clip-padding px-8 py-10",
-          className
-        )}
-      >
-        {children}
-      </div>
+    <div
+      className={cn(
+        "border-gradient-white bg-background rounded-turtle flex h-full min-h-[calc(100svh-20px)] w-72 flex-col gap-4 px-8 py-10",
+        className
+      )}
+    >
+      {children}
     </div>
   );
 }
@@ -51,7 +49,7 @@ export function SidebarItem({
   isActive?: boolean;
 }) {
   return (
-    <Button fullWidth variant="menu" {...props}>
+    <Button variant="menu" className="w-full" {...props}>
       {children}
     </Button>
   );

package/src/components/ui/tooltip.tsx

@@ -31,12 +31,12 @@ function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimiti
 function TooltipContent({
   className,
   sideOffset = 2,
-  withGradient,
+  gradient,
   children,
   container = document.querySelector(".turtle-widget-root") ?? document.body,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
-  withGradient?: boolean;
+  gradient?: "primary" | "white";
   container?: HTMLElement;
 }) {
   return (
@@ -45,24 +45,14 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-tooltip-content-transform-origin) transition-all",
-          withGradient
-            ? "group from-foreground/40 via-foreground/10 to-foreground/20 relative rounded-lg bg-gradient-to-br"
-            : ""
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-neutral-alpha-10 border-border origin-(--radix-tooltip-content-transform-origin) rounded-xl border p-2 transition-all",
+          gradient === "primary" && "border-gradient-primary",
+          gradient === "white" && "border-gradient-white",
+          className
         )}
         {...props}
       >
-        <div
-          className={cn(
-            "text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-5 py-2.5 text-xs text-balance",
-            withGradient
-              ? "bg-secondary border border-transparent bg-clip-padding"
-              : "bg-neutral-alpha-2 border-border border backdrop-blur-lg",
-            className
-          )}
-        >
-          {children}
-        </div>
+        {children}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/styles/globals.css

@@ -44,34 +44,67 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
-  --color-neutral-alpha-2: var(--color-neutral-alpha-2);
-  --color-neutral-alpha-5: var(--color-neutral-alpha-5);
-  --color-neutral-alpha-10: var(--color-neutral-alpha-10);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+
+  --color-neutral-alpha-2: var(--color-neutral-alpha-2);
+  --color-neutral-alpha-5: var(--color-neutral-alpha-5);
+  --color-neutral-alpha-10: var(--color-neutral-alpha-10);
+  --color-neutral-alpha-20: var(--color-neutral-alpha-20);
+  --color-neutral-alpha-30: var(--color-neutral-alpha-30);
+  --color-neutral-alpha-50: var(--color-neutral-alpha-50);
+
+  --color-primary-alpha-10: var(--color-brand-green-alpha-10);
+  --color-primary-alpha-20: var(--color-brand-green-alpha-20);
+  --color-primary-alpha-30: var(--color-brand-green-alpha-30);
+  --color-primary-alpha-50: var(--color-brand-green-alpha-50);
+
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+
+  --border-gradient-white: linear-gradient(
+      165deg,
+      var(--color-neutral-alpha-50) 0%,
+      var(--color-neutral-alpha-5) 20%,
+      var(--color-neutral-alpha-2) 75%,
+      var(--color-neutral-alpha-20) 100%
+    )
+    border-box;
+  --border-gradient-primary: linear-gradient(
+      165deg,
+      var(--color-primary-alpha-50) 0%,
+      var(--color-primary-alpha-20) 20%,
+      var(--color-primary-alpha-10) 75%,
+      var(--color-primary-alpha-30) 100%
+    )
+    border-box;
 }
 
-/* ===== BASE STYLES ===== */
-@layer base {
-  /* HTML and body setup */
-  html,
-  body {
-    @apply size-full font-sans antialiased;
-  }
+@utility border-gradient-* {
+  @apply relative border border-transparent;
 
-  /* Body styling with semantic variables */
-  body {
-    @apply bg-background text-foreground;
+  &::before {
+    content: "";
+    @apply pointer-events-none absolute -inset-px border border-transparent;
+    border-radius: inherit; /* match rounded-* from parent */
+    background: --value(--border-gradient-*); /* gradient from utility */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
   }
 }
 

package/src/styles/tokens/colors.css

@@ -35,6 +35,16 @@
   --color-neutral-base-900: #141514; /* Darkest - same as brand black */
 
   /* ===== TRANSPARENT VARIANTS ===== */
+  --color-brand-green-alpha-10: #73f36c1a; /* 10% */
+  --color-brand-green-alpha-20: #73f36c33; /* 20% */
+  --color-brand-green-alpha-30: #73f36c4d; /* 30% */
+  --color-brand-green-alpha-40: #73f36c66; /* 40% */
+  --color-brand-green-alpha-50: #73f36c80; /* 50% */
+  --color-brand-green-alpha-60: #73f36c99; /* 60% */
+  --color-brand-green-alpha-70: #73f36cb3; /* 70% */
+  --color-brand-green-alpha-80: #73f36ccc; /* 80% */
+  --color-brand-green-alpha-90: #73f36ce6; /* 90% */
+
   /* Alpha variants for overlays and subtle backgrounds */
   --color-neutral-alpha-2: #f9f9f905; /* 2% opacity white */
   --color-neutral-alpha-5: #f9f9f90d; /* 5% opacity white */