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

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

@@ -1,139 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "@/components/ui/card";
-
-interface WidgetItemProps extends React.ComponentProps<"div"> {
-  onSelect?: () => void;
-  selected?: boolean;
-  children: React.ReactNode;
-}
-
-const WidgetItem = React.forwardRef<HTMLDivElement, WidgetItemProps>(
-  ({ className, onSelect, selected = false, children, ...props }, ref) => {
-    return (
-      <Card
-        ref={ref}
-        variant="border"
-        // gradient="white"
-        className={cn(
-          "bg-background w-full cursor-pointer p-4 transition-all duration-200 hover:shadow-md",
-          selected &&
-            "ring-primary border-text-foreground/60 ring-2 ring-offset-2",
-          className,
-        )}
-        onClick={onSelect}
-        {...props}
-      >
-        <div className="flex flex-col gap-2">{children}</div>
-      </Card>
-    );
-  },
-);
-
-WidgetItem.displayName = "WidgetItem";
-
-// Top section component
-interface WidgetItemTopProps extends React.ComponentProps<"div"> {
-  children: React.ReactNode;
-}
-
-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}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-WidgetItemTop.displayName = "WidgetItemTop";
-
-// Bottom section component
-interface WidgetItemBottomProps extends React.ComponentProps<"div"> {
-  children: React.ReactNode;
-}
-
-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}
-    >
-      {children}
-    </div>
-  );
-});
-
-WidgetItemBottom.displayName = "WidgetItemBottom";
-
-// Left section component
-interface WidgetItemLeftProps extends React.ComponentProps<"div"> {
-  children: React.ReactNode;
-}
-
-const WidgetItemLeft = React.forwardRef<HTMLDivElement, WidgetItemLeftProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex min-w-0 flex-1 flex-col items-start justify-start gap-1",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-WidgetItemLeft.displayName = "WidgetItemLeft";
-
-// Right section component
-interface WidgetItemRightProps extends React.ComponentProps<"div"> {
-  children: React.ReactNode;
-}
-
-const WidgetItemRight = React.forwardRef<HTMLDivElement, WidgetItemRightProps>(
-  ({ className, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex flex-col items-end justify-between gap-1",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-WidgetItemRight.displayName = "WidgetItemRight";
-
-export {
-  WidgetItem,
-  WidgetItemTop,
-  WidgetItemBottom,
-  WidgetItemLeft,
-  WidgetItemRight,
-};
-export type {
-  WidgetItemProps,
-  WidgetItemTopProps,
-  WidgetItemBottomProps,
-  WidgetItemLeftProps,
-  WidgetItemRightProps,
-};

package/src/components/molecules/widget/widget-list-items.tsx

@@ -1,86 +0,0 @@
-import { ReactNode, useMemo } from "react";
-import { cn } from "@/lib/utils";
-import { LabelWithIcon } from "@/components/ui/label-with-icon";
-
-export interface WidgetListGroup<T> {
-  id: string;
-  icon?: string;
-  title?: string;
-  items: T[];
-}
-
-export interface WidgetListItemsProps<T> {
-  // Groups of items to display (can be a single group for ungrouped content)
-  groups: WidgetListGroup<T>[];
-  // Function to render each item
-  renderItem: (item: T) => ReactNode;
-  // Optional filter function to filter items
-  filterFn?: (item: T) => boolean;
-  // Optional function to get unique key for each item
-  getItemKey?: (item: T) => string;
-  // Optional className for the container
-  className?: string;
-  // Optional className for each group
-  groupClassName?: string;
-  // Optional className for each item
-  itemClassName?: string;
-  // Whether to show group headers
-  showGroupHeaders?: boolean;
-  // Optional empty state
-  emptyState?: ReactNode;
-}
-
-export const WidgetListItems = <T,>({
-  groups,
-  renderItem,
-  filterFn,
-  getItemKey,
-  className,
-  groupClassName,
-  itemClassName,
-  showGroupHeaders = true,
-  emptyState = (
-    <div className="text-muted-foreground py-8 text-center">No items found</div>
-  ),
-}: WidgetListItemsProps<T>) => {
-  // Filter items in each group
-  const filteredGroups = useMemo(() => {
-    return groups
-      .map((group) => ({
-        ...group,
-        items: filterFn ? group.items.filter(filterFn) : group.items,
-      }))
-      .filter((group) => group.items.length > 0);
-  }, [groups, filterFn]);
-
-  // Check if we have any items to display
-  const hasItems = filteredGroups.some((group) => group.items.length > 0);
-
-  if (!hasItems) {
-    return <div className={className}>{emptyState}</div>;
-  }
-
-  return (
-    <div className={cn("mb-5 space-y-5 px-2.5", className)}>
-      {filteredGroups.map((group) => (
-        <div key={group.id} className={cn("space-y-2", groupClassName)}>
-          {showGroupHeaders && group.title && (
-            <LabelWithIcon icon={group.icon} textSize="sm" iconSize="base">
-              {group.title}
-            </LabelWithIcon>
-          )}
-          <div className="space-y-1">
-            {group.items.map((item, index) => (
-              <div
-                key={getItemKey ? getItemKey(item) : `${group.id}-${index}`}
-                className={cn("rounded-lg transition-colors", itemClassName)}
-              >
-                {renderItem(item)}
-              </div>
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/ui/alert-dialog.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
-
-function AlertDialog({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
-}
-
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
-}
-
-function AlertDialogPortal({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal
-      data-slot="alert-dialog-portal"
-      {...props}
-      container={
-        document.querySelectorAll(".turtle-widget-root")[0] ?? undefined
-      }
-    />
-  );
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  return (
-    <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
-        className={cn(
-          "bg-background 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 border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-10 shadow-lg duration-200 sm:max-w-lg",
-          className,
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  );
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-evenly",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants({ variant: "green" }), className)}
-      {...props}
-    />
-  );
-}
-
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "default" }), className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-};

package/src/components/ui/animated-background/animated-background.tsx

@@ -1,182 +0,0 @@
-"use client";
-import { ReactNode, useEffect, useState } from "react";
-import * as React from "react";
-import { motion } from "framer-motion";
-import { cn } from "@/lib/utils";
-
-export function AnimatedBackground({
-  children,
-  className,
-  containerClassName,
-  accentColor = "#73F36C",
-  backgroundColor = "#141514",
-}: {
-  children: ReactNode;
-  className?: string;
-  containerClassName?: string;
-  accentColor?: string;
-  backgroundColor?: string;
-}) {
-  return (
-    <div className={cn("block h-screen w-full", className)}>
-      <div className="relative h-full w-full" style={{ backgroundColor }}>
-        <div
-          className={cn(
-            "relative z-10 flex h-full items-center justify-center",
-            containerClassName,
-          )}
-        >
-          {children}
-        </div>
-
-        {/* Animated background elements */}
-        <div className="absolute inset-0 size-full overflow-hidden">
-          {/* Animated rectangles */}
-          {[
-            "left-full sm:left-1/2 top-[-50px] md:top-[-100px] h-[200px] w-[450px] md:w-[1000px] rotate-180 md:rotate-0 translate-x-[-75%] sm:translate-x-[-90%]",
-            "right-[-150px] top-[-300px] md:top-[-250px] size-[400px]",
-            "bottom-[-280px] md:bottom-[-450px] lg:bottom-[-350px] right-[-220px] md:right-[-400px] size-[400px] md:size-[600px]",
-            "bottom-[-300px] left-[-240px] md:left-1/2 h-[400px] w-[400px] rotate-180 md:rotate-0 md:-translate-x-full md:w-[800px]",
-            "right-[70px] md:left-[-190px] lg:left-[-150px] bottom-[-200px] md:top-1/2 h-[400px] w-[600px] sm:w-[750px] md:w-[300px] md:-translate-y-full z-[-1] md:z-0",
-          ].map((classes, index) => (
-            <div
-              key={index}
-              className={`absolute ${classes}`}
-              style={{
-                background: `radial-gradient(circle, ${accentColor}80 0%, transparent 70%)`,
-                borderRadius: "50%",
-                filter: "blur(40px)",
-              }}
-            />
-          ))}
-
-          {/* Grid lines */}
-          <GridLines accentColor={accentColor} />
-
-          {/* Floating particles */}
-          <div className="absolute inset-0">
-            {Array.from({ length: 15 }).map((_, i) => (
-              <Particle key={i} accentColor={accentColor} />
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Grid lines component
-function GridLines({ accentColor }: { accentColor: string }) {
-  return (
-    <div className="grid-lines absolute inset-0 opacity-20">
-      {/* Horizontal lines */}
-      {Array.from({ length: 10 }).map((_, i) => (
-        <motion.div
-          key={`h-${i}`}
-          className="absolute h-px w-full"
-          style={{
-            top: `${(i + 1) * 10}%`,
-            backgroundColor: `${accentColor}60`, // 60 = opacity ~37%
-          }}
-          initial={{ scaleX: 0 }}
-          animate={{
-            scaleX: 1,
-            opacity: [0.1, 0.3, 0.1],
-          }}
-          transition={{
-            duration: 3,
-            repeat: Infinity,
-            repeatType: "reverse",
-            delay: i * 0.2,
-          }}
-        />
-      ))}
-
-      {/* Vertical lines */}
-      {Array.from({ length: 10 }).map((_, i) => (
-        <motion.div
-          key={`v-${i}`}
-          className="absolute h-full w-px"
-          style={{
-            left: `${(i + 1) * 10}%`,
-            backgroundColor: `${accentColor}60`, // 60 = opacity ~37%
-          }}
-          initial={{ scaleY: 0 }}
-          animate={{
-            scaleY: 1,
-            opacity: [0.1, 0.3, 0.1],
-          }}
-          transition={{
-            duration: 3,
-            repeat: Infinity,
-            repeatType: "reverse",
-            delay: i * 0.2,
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-// Floating particle
-function Particle({ accentColor }: { accentColor: string }) {
-  const [isClient, setIsClient] = useState(false);
-  const [state, setState] = useState({
-    size: 4, // default size
-    startX: 50,
-    startY: 50,
-    duration: 15,
-    xMovements: [0, 0, 0],
-    yMovements: [0, 0, 0],
-  });
-
-  useEffect(() => {
-    // Mark as client-side and apply randomness
-    setIsClient(true);
-    setState({
-      size: Math.random() * 6 + 2,
-      startX: Math.random() * 100,
-      startY: Math.random() * 100,
-      duration: Math.random() * 15 + 10,
-      xMovements: [
-        Math.random() * 100 - 50,
-        Math.random() * 100 - 50,
-        Math.random() * 100 - 50,
-      ],
-      yMovements: [
-        Math.random() * 100 - 50,
-        Math.random() * 100 - 50,
-        Math.random() * 100 - 50,
-      ],
-    });
-  }, []);
-
-  // Don't render until client-side
-  if (!isClient) {
-    return null;
-  }
-
-  return (
-    <motion.div
-      className="absolute rounded-full"
-      style={{
-        width: state.size,
-        height: state.size,
-        left: `${state.startX}%`,
-        top: `${state.startY}%`,
-        backgroundColor: `${accentColor}B3`, // B3 = opacity ~70%
-        boxShadow: `0 0 10px 2px ${accentColor}99`, // 99 = opacity ~60%
-      }}
-      animate={{
-        x: state.xMovements,
-        y: state.yMovements,
-        opacity: [0.2, 0.8, 0.2],
-        scale: [1, 1.2, 1],
-      }}
-      transition={{
-        duration: state.duration,
-        repeat: Infinity,
-        repeatType: "reverse",
-      }}
-    />
-  );
-}

package/src/components/ui/animated-background/index.ts

@@ -1 +0,0 @@
-export { AnimatedBackground } from "./animated-background";

package/src/components/ui/avatar.tsx

@@ -1,73 +0,0 @@
-import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
-import { cn } from "@/lib/utils";
-
-const AvatarSize = {
-  xs: "size-4",
-  sm: "size-6",
-  md: "size-8",
-  lg: "size-10",
-  xl: "size-12",
-} as const;
-
-function Avatar({
-  className,
-  size = "md",
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: keyof typeof AvatarSize;
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
-      {...props}
-    />
-  );
-}
-
-function TurtleAvatar({
-  src,
-  alt,
-  fallback,
-  ...rest
-}: AvatarPrimitive.AvatarProps & {
-  src?: string;
-  alt?: string;
-  fallback?: React.ReactNode;
-}) {
-  return (
-    <Avatar {...rest}>
-      <AvatarImage src={src} alt={alt} />
-      <AvatarFallback className="border-gradient-primary bg-primary/10 opacity-50">
-        {fallback}
-      </AvatarFallback>
-    </Avatar>
-  );
-}
-
-export { TurtleAvatar, Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -1,59 +0,0 @@
-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 badgeVariants = cva(
-  "bg-neutral-alpha-5 aria-invalid:ring-destructive/20 inline-flex w-fit shrink-0 items-center justify-center gap-2 rounded-full whitespace-nowrap transition-all [&>svg]:pointer-events-none [&>svg]:size-3",
-  {
-    variants: {
-      variant: {
-        default:
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-        warning: "[a&]:hover:bg-secondary/90 text-amber-600",
-        destructive:
-          "text-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        success: "text-primary [a&]:hover:bg-primary/90",
-        muted: "text-muted-foreground",
-      },
-      size: {
-        sm: "px-2.5 py-0.5 text-[10px]",
-        default: "px-3.5 py-1 text-xs",
-        lg: "px-5 py-2 text-sm",
-      },
-      border: {
-        default: "",
-        subtle: "border-border border",
-        color: "border border-inherit",
-        gradient: "border-gradient-white border",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant,
-  size,
-  border,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant, size, border }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Badge, badgeVariants };