@turtleclub/ui 0.3.0 → 0.4.0-beta.0

package/src/components/ui/field.tsx

@@ -14,7 +14,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
       className={cn(
         "flex flex-col gap-6",
         "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className
+        className,
       )}
       {...props}
     />
@@ -34,7 +34,7 @@ function FieldLegend({
         "mb-3 font-medium",
         "data-[variant=legend]:text-base",
         "data-[variant=label]:text-sm",
-        className
+        className,
       )}
       {...props}
     />
@@ -47,33 +47,36 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-group"
       className={cn(
         "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
-        className
+        className,
       )}
       {...props}
     />
   );
 }
 
-const fieldVariants = cva("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
-  variants: {
-    orientation: {
-      vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-      horizontal: [
-        "flex-row items-center",
-        "[&>[data-slot=field-label]]:flex-auto",
-        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      ],
-      responsive: [
-        "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
-        "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      ],
+const fieldVariants = cva(
+  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+        responsive: [
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
     },
   },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
+);
 
 function Field({
   className,
@@ -95,13 +98,19 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="field-content"
-      className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
   return (
     <Label
       data-slot="field-label"
@@ -109,7 +118,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
         "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
-        className
+        className,
       )}
       {...props}
     />
@@ -122,7 +131,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="field-label"
       className={cn(
         "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -137,7 +146,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
         "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
-        className
+        className,
       )}
       {...props}
     />
@@ -157,7 +166,7 @@ function FieldSeparator({
       data-content={!!children}
       className={cn(
         "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -197,7 +206,10 @@ function FieldError({
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
-        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
       </ul>
     );
   }, [children, errors]);

package/src/components/ui/heading.tsx

@@ -5,7 +5,12 @@ export type TypographyProps = { children: React.ReactNode; className?: string };
 
 export function HeadingH1({ children, className }: TypographyProps) {
   return (
-    <h1 className={cn("scroll-m-20 text-4xl font-semibold tracking-tight text-balance", className)}>
+    <h1
+      className={cn(
+        "scroll-m-20 text-4xl font-semibold tracking-tight text-balance",
+        className,
+      )}
+    >
       {children}
     </h1>
   );
@@ -13,7 +18,12 @@ export function HeadingH1({ children, className }: TypographyProps) {
 
 export function HeadingH2({ children, className }: TypographyProps) {
   return (
-    <h2 className={cn("scroll-m-20 text-3xl font-normal tracking-tight first:mt-0", className)}>
+    <h2
+      className={cn(
+        "scroll-m-20 text-3xl font-normal tracking-tight first:mt-0",
+        className,
+      )}
+    >
       {children}
     </h2>
   );
@@ -21,18 +31,33 @@ export function HeadingH2({ children, className }: TypographyProps) {
 
 export function HeadingH3({ children, className }: TypographyProps) {
   return (
-    <h3 className={cn("scroll-m-20 text-xl font-normal tracking-tight", className)}>{children}</h3>
+    <h3
+      className={cn(
+        "scroll-m-20 text-xl font-normal tracking-tight",
+        className,
+      )}
+    >
+      {children}
+    </h3>
   );
 }
 
 export function HeadingH4({ children, className }: TypographyProps) {
   return (
-    <h4 className={cn("scroll-m-20 text-lg font-light tracking-tight", className)}>{children}</h4>
+    <h4
+      className={cn("scroll-m-20 text-lg font-light tracking-tight", className)}
+    >
+      {children}
+    </h4>
   );
 }
 
 export function HeadingH5({ children, className }: TypographyProps) {
-  return <h5 className={cn("scroll-m-20 font-light tracking-tight", className)}>{children}</h5>;
+  return (
+    <h5 className={cn("scroll-m-20 font-light tracking-tight", className)}>
+      {children}
+    </h5>
+  );
 }
 
 export function HeadingH6({ children, className }: TypographyProps) {
@@ -40,7 +65,7 @@ export function HeadingH6({ children, className }: TypographyProps) {
     <h6
       className={cn(
         "text-muted-foreground scroll-m-20 text-sm font-light tracking-tight",
-        className
+        className,
       )}
     >
       {children}

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

@@ -45,15 +45,21 @@ const hoverCardContentVariants = cva(
       rounded: "default",
       gradientBorder: "none",
     },
-  }
+  },
 );
 
-function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
   return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
-function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  );
 }
 
 function HoverCardContent({
@@ -68,16 +74,25 @@ function HoverCardContent({
 }: React.ComponentProps<typeof HoverCardPrimitive.Content> &
   VariantProps<typeof hoverCardContentVariants>) {
   // Auto-apply gradient border for container variant if not specified
-  const finalGradientBorder = gradientBorder ?? (variant === "container" ? "white" : "none");
+  const finalGradientBorder =
+    gradientBorder ?? (variant === "container" ? "white" : "none");
 
   const hasGradientBorder = finalGradientBorder !== "none";
 
   // Get the gradient border classes
-  const gradientClasses = hoverCardContentVariants({ gradientBorder: finalGradientBorder });
+  const gradientClasses = hoverCardContentVariants({
+    gradientBorder: finalGradientBorder,
+  });
 
   // Get the main hover card classes without gradient
   const hoverCardClasses = cn(
-    hoverCardContentVariants({ variant, padding, rounded, gradientBorder: "none", className })
+    hoverCardContentVariants({
+      variant,
+      padding,
+      rounded,
+      gradientBorder: "none",
+      className,
+    }),
   );
 
   // Get the rounded class for the wrapper
@@ -85,7 +100,9 @@ function HoverCardContent({
 
   return (
     <HoverCardPrimitive.Portal
-      container={document.querySelectorAll(".turtle-widget-root")[0] ?? undefined}
+      container={
+        document.querySelectorAll(".turtle-widget-root")[0] ?? undefined
+      }
       data-slot="hover-card-portal"
     >
       {hasGradientBorder ? (
@@ -96,7 +113,10 @@ function HoverCardContent({
           className={cn(gradientClasses, roundedClass, "p-[1px]")}
           {...props}
         >
-          <div data-slot="hover-card-content-inner" className={hoverCardClasses} />
+          <div
+            data-slot="hover-card-content-inner"
+            className={hoverCardClasses}
+          />
         </HoverCardPrimitive.Content>
       ) : (
         <HoverCardPrimitive.Content
@@ -111,4 +131,9 @@ function HoverCardContent({
   );
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent, hoverCardContentVariants };
+export {
+  HoverCard,
+  HoverCardTrigger,
+  HoverCardContent,
+  hoverCardContentVariants,
+};

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

@@ -8,10 +8,10 @@ const iconAnimationVariants = cva(
   {
     variants: {
       size: {
-        default: "w-12 h-12",
-        sm: "w-8 h-8",
-        lg: "w-16 h-16",
-        xl: "w-20 h-20",
+        default: "h-12 w-12",
+        sm: "h-8 w-8",
+        lg: "h-16 w-16",
+        xl: "h-20 w-20",
       },
       variant: {
         default: "bg-background",
@@ -22,7 +22,7 @@ const iconAnimationVariants = cva(
       size: "default",
       variant: "default",
     },
-  }
+  },
 );
 
 export interface IconAnimationProps
@@ -44,12 +44,12 @@ const IconAnimation = React.forwardRef<HTMLDivElement, IconAnimationProps>(
         <div
           className={cn(
             "absolute inset-0 rounded-full",
-            "bg-gradient-to-r from-transparent via-primary to-transparent",
+            "via-primary bg-gradient-to-r from-transparent to-transparent",
             "animate-spin",
             {
               "animate-spin": spinning,
               "animate-none": !spinning,
-            }
+            },
           )}
           style={{
             background: spinning
@@ -62,21 +62,21 @@ const IconAnimation = React.forwardRef<HTMLDivElement, IconAnimationProps>(
           {/* Inner circle to create the border effect */}
           <div
             className={cn(
-              "w-full h-full rounded-full",
-              variant === "transparent" ? "bg-transparent" : "bg-background"
+              "h-full w-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 };
+export { IconAnimation, iconAnimationVariants };

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

@@ -1,7 +1,12 @@
 import * as React from "react";
 import { cn } from "@/lib/utils";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useMemo } from "react";
 
 interface IconListItem {
@@ -27,22 +32,34 @@ const sizeClasses = {
 
 const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
   (
-    { className, items, label, size = "sm", maxVisible = 6, showTooltip = false, ...props },
-    ref
+    {
+      className,
+      items,
+      label,
+      size = "sm",
+      maxVisible = 6,
+      showTooltip = false,
+      ...props
+    },
+    ref,
   ) => {
-    const [loadedImages, setLoadedImages] = React.useState<Set<string>>(new Set());
+    const [loadedImages, setLoadedImages] = React.useState<Set<string>>(
+      new Set(),
+    );
 
     if (!items || items.length === 0) return null;
 
     const uniqueItems = useMemo(() => {
-      const normalized: IconListItem[] = items.map((item: IconListItem | string, index: number) =>
-        typeof item === "string"
-          ? { icon: item, name: "", id: `item-${index}` }
-          : { ...item, id: item.id || `item-${index}` }
+      const normalized: IconListItem[] = items.map(
+        (item: IconListItem | string, index: number) =>
+          typeof item === "string"
+            ? { icon: item, name: "", id: `item-${index}` }
+            : { ...item, id: item.id || `item-${index}` },
       );
 
       const unique = normalized.filter(
-        (item, index, self) => index === self.findIndex((t) => t.icon === item.icon)
+        (item, index, self) =>
+          index === self.findIndex((t) => t.icon === item.icon),
       );
 
       return unique;
@@ -61,8 +78,8 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
         key={item.id || index}
         className={cn(
           sizeClasses[size],
-          "border border-background transition-all hover:z-10 hover:scale-110",
-          !loadedImages.has(item.icon) && "animate-pulse"
+          "border-background border transition-all hover:z-10 hover:scale-110",
+          !loadedImages.has(item.icon) && "animate-pulse",
         )}
       >
         <AvatarImage
@@ -70,13 +87,18 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
           alt={item.name || "Icon"}
           onLoad={() => handleImageLoad(item.icon)}
         />
-        <AvatarFallback className={cn("font-medium", sizeClasses[size].split(" ").pop())}>
+        <AvatarFallback
+          className={cn("font-medium", sizeClasses[size].split(" ").pop())}
+        >
           {item.name ? item.name.slice(0, 2).toUpperCase() : "?"}
         </AvatarFallback>
       </Avatar>
     );
 
-    const renderWithTooltip = (content: React.ReactNode, tooltipText: string) => {
+    const renderWithTooltip = (
+      content: React.ReactNode,
+      tooltipText: string,
+    ) => {
       if (!showTooltip || !tooltipText) return content;
 
       return (
@@ -98,7 +120,9 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
           aria-label={label || "Icon list"}
           {...props}
         >
-          {label && <span className="text-xs text-muted-foreground mr-1">{label}:</span>}
+          {label && (
+            <span className="text-muted-foreground mr-1 text-xs">{label}:</span>
+          )}
           <div className="flex -space-x-1">
             {visibleItems.map((item, index) => (
               <div key={item.id || index} role="listitem">
@@ -111,12 +135,15 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
                   <Avatar
                     className={cn(
                       sizeClasses[size],
-                      "border border-background bg-muted hover:bg-muted/80 transition-all"
+                      "border-background bg-muted hover:bg-muted/80 border transition-all",
                     )}
                     aria-label={`${remainingCount} more items`}
                   >
                     <AvatarFallback
-                      className={cn("font-semibold", sizeClasses[size].split(" ").pop())}
+                      className={cn(
+                        "font-semibold",
+                        sizeClasses[size].split(" ").pop(),
+                      )}
                     >
                       +{remainingCount}
                     </AvatarFallback>
@@ -124,7 +151,7 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
                   hiddenItems
                     .map((item) => item.name)
                     .filter(Boolean)
-                    .join(", ") || `${remainingCount} more items`
+                    .join(", ") || `${remainingCount} more items`,
                 )}
               </div>
             )}
@@ -132,7 +159,7 @@ const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
         </div>
       </TooltipProvider>
     );
-  }
+  },
 );
 
 IconList.displayName = "IconList";

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

@@ -33,7 +33,7 @@ const valueVariants = cva("font-bold", {
   },
 });
 
-const titleVariants = cva("font-medium text-muted-foreground", {
+const titleVariants = cva("text-muted-foreground font-medium", {
   variants: {
     size: {
       sm: "text-xs",
@@ -71,7 +71,7 @@ const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
       className,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Card
@@ -83,7 +83,13 @@ const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
       >
         {/* Icon & Title */}
         <div className="flex gap-2">
-          {iconUrl && <img src={iconUrl} alt={`${title}-icon`} className="w-5 h-5 rounded-full" />}
+          {iconUrl && (
+            <img
+              src={iconUrl}
+              alt={`${title}-icon`}
+              className="h-5 w-5 rounded-full"
+            />
+          )}
           <p className={titleVariants({ size: titleSize })}>{title}</p>
         </div>
 
@@ -91,10 +97,12 @@ const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
         <p className={cn("text-foreground")}>{value}</p>
 
         {/* Subtitle */}
-        {subtitle && <p className="text-xs text-muted-foreground/70">{subtitle}</p>}
+        {subtitle && (
+          <p className="text-muted-foreground/70 text-xs">{subtitle}</p>
+        )}
       </Card>
     );
-  }
+  },
 );
 
 InfoCard.displayName = "InfoCard";

package/src/components/ui/input-group.tsx

@@ -29,7 +29,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
-        className
+        className,
       )}
       {...props}
     />
@@ -41,8 +41,10 @@ const inputGroupAddonVariants = cva(
   {
     variants: {
       align: {
-        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
         "block-start":
           "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
         "block-end":
@@ -52,7 +54,7 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
+  },
 );
 
 function InputGroupAddon({
@@ -77,19 +79,23 @@ function InputGroupAddon({
   );
 }
 
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
-  variants: {
-    size: {
-      xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-      sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-      "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
     },
   },
-  defaultVariants: {
-    size: "xs",
-  },
-});
+);
 
 function InputGroupButton({
   className,
@@ -115,33 +121,39 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     />
   );
 }
 
-function InputGroupInput({ className, ...props }: React.ComponentProps<"input">) {
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
   return (
     <Input
       data-slot="input-group-control"
       className={cn(
         "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
   );
 }
 
-function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
   return (
     <Textarea
       data-slot="input-group-control"
       className={cn(
         "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />