@turtleclub/ui 0.7.0-beta.33 → 0.7.0-beta.35

package/src/components/ui/field.tsx

@@ -1,244 +0,0 @@
-"use client";
-
-import React, { useMemo } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-
-function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
-  return (
-    <fieldset
-      data-slot="field-set"
-      className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldLegend({
-  className,
-  variant = "legend",
-  ...props
-}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
-  return (
-    <legend
-      data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <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,
-      )}
-      {...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",
-        ],
-      },
-    },
-    defaultVariants: {
-      orientation: "vertical",
-    },
-  },
-);
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
-    />
-  );
-}
-
-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,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      data-slot="field-label"
-      className={cn(
-        "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",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <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,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
-  return (
-    <p
-      data-slot="field-description"
-      className={cn(
-        "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,
-      )}
-      {...props}
-    />
-  );
-}
-
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"div"> & {
-  children?: React.ReactNode;
-}) {
-  return (
-    <div
-      data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
-        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-        className,
-      )}
-      {...props}
-    >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
-        <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
-          data-slot="field-separator-content"
-        >
-          {children}
-        </span>
-      )}
-    </div>
-  );
-}
-
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<"div"> & {
-  errors?: Array<{ message?: string } | undefined>;
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children;
-    }
-
-    if (!errors) {
-      return null;
-    }
-
-    if (errors?.length === 1 && errors[0]?.message) {
-      return errors[0].message;
-    }
-
-    return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {errors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>,
-        )}
-      </ul>
-    );
-  }, [children, errors]);
-
-  if (!content) {
-    return null;
-  }
-
-  return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
-      {...props}
-    >
-      {content}
-    </div>
-  );
-}
-
-export {
-  Field,
-  FieldLabel,
-  FieldDescription,
-  FieldError,
-  FieldGroup,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldContent,
-  FieldTitle,
-};

package/src/components/ui/heading.tsx

@@ -1,74 +0,0 @@
-import { cn } from "@/lib/utils";
-import React from "react";
-
-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,
-      )}
-    >
-      {children}
-    </h1>
-  );
-}
-
-export function HeadingH2({ children, className }: TypographyProps) {
-  return (
-    <h2
-      className={cn(
-        "scroll-m-20 text-3xl font-normal tracking-tight first:mt-0",
-        className,
-      )}
-    >
-      {children}
-    </h2>
-  );
-}
-
-export function HeadingH3({ children, className }: TypographyProps) {
-  return (
-    <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>
-  );
-}
-
-export function HeadingH5({ children, className }: TypographyProps) {
-  return (
-    <h5 className={cn("scroll-m-20 font-light tracking-tight", className)}>
-      {children}
-    </h5>
-  );
-}
-
-export function HeadingH6({ children, className }: TypographyProps) {
-  return (
-    <h6
-      className={cn(
-        "text-muted-foreground scroll-m-20 text-sm font-light tracking-tight",
-        className,
-      )}
-    >
-      {children}
-    </h6>
-  );
-}

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

@@ -1,139 +0,0 @@
-import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const hoverCardContentVariants = cva(
-  "text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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-64 origin-(--radix-hover-card-content-transform-origin) shadow-md outline-hidden transition-all",
-  {
-    variants: {
-      variant: {
-        container: "bg-background relative drop-shadow-lg",
-        simple: "bg-muted",
-        item: "bg-muted drop-shadow-lg",
-      },
-      gradientBorder: {
-        none: "",
-        white:
-          "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)]",
-        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)]",
-      },
-      padding: {
-        none: "p-0",
-        sm: "px-3.5 py-3.5",
-        default: "px-4.5 py-4.5",
-        md: "px-6 py-6.5",
-        lg: "px-8 py-8.5",
-      },
-      rounded: {
-        default: "rounded-lg",
-        infoCard: "rounded-info-card",
-        none: "rounded-none",
-        sm: "rounded-sm",
-        md: "rounded-md",
-        lg: "rounded-lg",
-        xl: "rounded-lg",
-        full: "rounded-full",
-      },
-    },
-    defaultVariants: {
-      variant: "container",
-      padding: "default",
-      rounded: "default",
-      gradientBorder: "none",
-    },
-  },
-);
-
-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 HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  variant,
-  padding,
-  rounded,
-  gradientBorder,
-  ...props
-}: 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 hasGradientBorder = finalGradientBorder !== "none";
-
-  // Get the gradient border classes
-  const gradientClasses = hoverCardContentVariants({
-    gradientBorder: finalGradientBorder,
-  });
-
-  // Get the main hover card classes without gradient
-  const hoverCardClasses = cn(
-    hoverCardContentVariants({
-      variant,
-      padding,
-      rounded,
-      gradientBorder: "none",
-      className,
-    }),
-  );
-
-  // Get the rounded class for the wrapper
-  const roundedClass = hoverCardContentVariants({ rounded });
-
-  return (
-    <HoverCardPrimitive.Portal
-      container={
-        document.querySelectorAll(".turtle-widget-root")[0] ?? undefined
-      }
-      data-slot="hover-card-portal"
-    >
-      {hasGradientBorder ? (
-        <HoverCardPrimitive.Content
-          data-slot="hover-card-content-wrapper"
-          align={align}
-          sideOffset={sideOffset}
-          className={cn(gradientClasses, roundedClass, "p-[1px]")}
-          {...props}
-        >
-          <div
-            data-slot="hover-card-content-inner"
-            className={hoverCardClasses}
-          />
-        </HoverCardPrimitive.Content>
-      ) : (
-        <HoverCardPrimitive.Content
-          data-slot="hover-card-content"
-          align={align}
-          sideOffset={sideOffset}
-          className={hoverCardClasses}
-          {...props}
-        />
-      )}
-    </HoverCardPrimitive.Portal>
-  );
-}
-
-export {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-  hoverCardContentVariants,
-};

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

@@ -1,82 +0,0 @@
-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: "h-12 w-12",
-        sm: "h-8 w-8",
-        lg: "h-16 w-16",
-        xl: "h-20 w-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",
-            "via-primary bg-gradient-to-r from-transparent 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(
-              "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 };

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

@@ -1,168 +0,0 @@
-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 { useMemo } from "react";
-
-interface IconListItem {
-  icon: string;
-  name: string;
-  id?: string; // Optional unique identifier
-}
-
-interface IconListProps extends React.ComponentProps<"div"> {
-  items: IconListItem[] | string[];
-  label?: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  maxVisible?: number;
-  showTooltip?: boolean;
-}
-
-const sizeClasses = {
-  xs: "w-3 h-3 text-[8px]",
-  sm: "w-4 h-4 text-[10px]",
-  md: "w-5 h-5 text-xs",
-  lg: "w-6 h-6 text-sm",
-};
-
-const IconList = React.forwardRef<HTMLDivElement, IconListProps>(
-  (
-    {
-      className,
-      items,
-      label,
-      size = "sm",
-      maxVisible = 6,
-      showTooltip = false,
-      ...props
-    },
-    ref,
-  ) => {
-    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 unique = normalized.filter(
-        (item, index, self) =>
-          index === self.findIndex((t) => t.icon === item.icon),
-      );
-
-      return unique;
-    }, [items]);
-
-    const visibleItems = uniqueItems.slice(0, maxVisible);
-    const remainingCount = uniqueItems.length - maxVisible;
-    const hiddenItems = uniqueItems.slice(maxVisible);
-
-    const handleImageLoad = (icon: string) => {
-      setLoadedImages((prev) => new Set(prev).add(icon));
-    };
-
-    const renderAvatar = (item: IconListItem, index: number) => (
-      <Avatar
-        key={item.id || index}
-        className={cn(
-          sizeClasses[size],
-          "border-background border transition-all hover:z-10 hover:scale-110",
-          !loadedImages.has(item.icon) && "animate-pulse",
-        )}
-      >
-        <AvatarImage
-          src={item.icon}
-          alt={item.name || "Icon"}
-          onLoad={() => handleImageLoad(item.icon)}
-        />
-        <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,
-    ) => {
-      if (!showTooltip || !tooltipText) return content;
-
-      return (
-        <Tooltip>
-          <TooltipTrigger asChild>{content}</TooltipTrigger>
-          <TooltipContent side="top" className="text-xs">
-            {tooltipText}
-          </TooltipContent>
-        </Tooltip>
-      );
-    };
-
-    return (
-      <TooltipProvider>
-        <div
-          ref={ref}
-          className={cn("flex items-center gap-1", className)}
-          role="list"
-          aria-label={label || "Icon list"}
-          {...props}
-        >
-          {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">
-                {renderWithTooltip(renderAvatar(item, index), item.name)}
-              </div>
-            ))}
-            {remainingCount > 0 && (
-              <div role="listitem">
-                {renderWithTooltip(
-                  <Avatar
-                    className={cn(
-                      sizeClasses[size],
-                      "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(),
-                      )}
-                    >
-                      +{remainingCount}
-                    </AvatarFallback>
-                  </Avatar>,
-                  hiddenItems
-                    .map((item) => item.name)
-                    .filter(Boolean)
-                    .join(", ") || `${remainingCount} more items`,
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </TooltipProvider>
-    );
-  },
-);
-
-IconList.displayName = "IconList";
-
-export { IconList };
-export type { IconListProps, IconListItem };