@turtleclub/ui 0.3.0-beta.9 → 0.3.0

package/src/components/ui/card.tsx

@@ -6,98 +6,58 @@ import { cn } from "@/lib/utils";
 const cardVariants = cva("transition-all", {
   variants: {
     variant: {
-      // Turtle Design System variants
-      container: "relative bg-background drop-shadow-lg",
-      simple: "bg-muted",
-      item: "bg-muted drop-shadow-lg",
+      default: "bg-background",
+      border: "bg-background border-border border",
+      shadow: "bg-muted shadow-[0px_4px_4px_0px] shadow-black/20",
     },
-    gradientBorder: {
+    gradient: {
       none: "",
-      white:
-        "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude]",
-      green:
-        "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-[#73F36C]/60 before:via-transparent before:to-[#73F36C]/20 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude]",
-      auto: "relative before:content-[''] before:absolute before:inset-0 before:p-px before:rounded-[inherit] before:bg-gradient-to-br before:from-white/40 before:via-transparent before:to-white/10 before:pointer-events-none before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] before:[mask-composite:exclude] dark:before:from-white/40 dark:before:to-white/10 light:before:from-black/20 light:before:to-black/5",
-    },
-    padding: {
-      none: "p-0",
-      xs: "py-2 px-2",
-      sm: "py-3.5 px-3.5",
-      default: "py-4.5 px-4.5",
-      md: "py-6.5 px-6",
-      lg: "py-8.5 px-8",
+      primary: "border-gradient-primary",
+      white: "border-gradient-white",
     },
     rounded: {
-      default: "rounded-turtle",
+      default: "rounded-lg",
       infoCard: "rounded-info-card",
       none: "rounded-none",
       sm: "rounded-sm",
       md: "rounded-md",
       lg: "rounded-lg",
-      xl: "rounded-xl",
+      xl: "rounded-lg",
       full: "rounded-full",
     },
   },
   defaultVariants: {
-    variant: "container",
-    padding: "default",
+    variant: "default",
     rounded: "default",
-    gradientBorder: "none",
+    gradient: "none",
   },
 });
 
 function Card({
   className,
   variant,
-  padding,
   rounded,
-  gradientBorder,
+  gradient,
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof cardVariants>) {
-  // Auto-apply gradient border for container variant if not specified
-  const finalGradientBorder = gradientBorder ?? (variant === "container" ? "white" : "none");
-
-  const hasGradientBorder = finalGradientBorder !== "none";
-
-  // Get the gradient border classes
-  const gradientClasses = cardVariants({ gradientBorder: finalGradientBorder });
-
-  // Get the main card classes without gradient
-  const cardClasses = cn(
-    cardVariants({ variant, padding, 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, "p-[1px] h-full")} data-slot="card-wrapper">
-        <div data-slot="card" className={cn(cardClasses, "h-full")} {...props} />
-      </div>
-    );
-  }
-
-  // Otherwise, return the card normally
-  return <div data-slot="card" className={cardClasses} {...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)}
+      data-slot="card"
+      className={cardVariants({ variant, gradient, rounded, className })}
       {...props}
     />
   );
 }
 
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-header" className={cn("flex gap-2 p-5", 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)}
+      className={cn("text-base leading-none font-semibold tracking-tight", className)}
       {...props}
     >
       {children}
@@ -109,21 +69,21 @@ function CardDescription({ className, ...props }: React.ComponentProps<"p">) {
   return (
     <p
       data-slot="card-description"
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-[10px]", className)}
       {...props}
     />
   );
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />;
+  return <div data-slot="card-content" className={cn("p-5 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)}
+      className={cn("flex items-center p-5 pt-0", className)}
       {...props}
     />
   );

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-border dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };