@turtleclub/ui 0.7.0-beta.32 → 0.7.0-beta.34

package/src/components/ui/navigation-bar.tsx

@@ -1,153 +0,0 @@
-"use client";
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const navigationBarVariants = cva("flex w-full", {
-  variants: {
-    variant: {
-      default: "border-border bg-background justify-between border shadow-sm",
-      transparent:
-        "border-border justify-between border bg-transparent shadow-sm",
-      menuBar:
-        "border-border bg-background relative h-9 gap-2 rounded-full border font-medium shadow-sm",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-const navigationItemVariants = cva(
-  "flex cursor-pointer items-center justify-center font-medium whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "text-muted-foreground hover:text-foreground text-sm",
-        active: "text-primary bg-muted text-sm",
-        menuBarDefault:
-          "text-foreground hover:text-primary relative z-[1] w-full rounded-full px-3 py-1.5 text-sm",
-        menuBarActive:
-          "text-primary relative z-[1] w-full rounded-full px-3 py-1.5 text-sm",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface NavigationBarProps
-  extends React.ComponentProps<"nav">,
-    VariantProps<typeof navigationBarVariants> {
-  activeValue?: string;
-}
-
-export interface NavigationItemProps
-  extends React.ComponentProps<"button">,
-    VariantProps<typeof navigationItemVariants> {
-  active?: boolean;
-  value?: string;
-}
-
-const NavigationBar = React.forwardRef<HTMLElement, NavigationBarProps>(
-  ({ className, variant, activeValue, children, ...props }, ref) => {
-    const containerRef = React.useRef<HTMLElement>(null);
-    const indicatorRef = React.useRef<HTMLDivElement>(null);
-
-    // Function to update the indicator position and size based on the active button
-    const updateIndicatorPosition = React.useCallback(() => {
-      if (
-        variant !== "menuBar" ||
-        !containerRef.current ||
-        !indicatorRef.current
-      )
-        return;
-
-      const activeButton = containerRef.current.querySelector(
-        `[data-active="true"]`,
-      ) as HTMLElement;
-      if (activeButton) {
-        indicatorRef.current.style.width = `${activeButton.offsetWidth}px`;
-        indicatorRef.current.style.left = `${activeButton.offsetLeft}px`;
-      }
-    }, [variant]);
-
-    // Create ResizeObserver to handle indicator container size changes
-    React.useEffect(() => {
-      if (variant !== "menuBar") return;
-
-      updateIndicatorPosition();
-
-      const resizeObserver = new ResizeObserver(updateIndicatorPosition);
-
-      if (containerRef.current) {
-        resizeObserver.observe(containerRef.current);
-      }
-
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }, [activeValue, updateIndicatorPosition, variant]);
-
-    return (
-      <nav
-        ref={ref || containerRef}
-        className={cn(navigationBarVariants({ variant, className }))}
-        {...props}
-      >
-        {variant === "menuBar" && (
-          <div
-            ref={indicatorRef}
-            className="bg-secondary absolute bottom-0 h-full origin-left rounded-full transition-all duration-300"
-          />
-        )}
-        {children}
-      </nav>
-    );
-  },
-);
-
-NavigationBar.displayName = "NavigationBar";
-
-const NavigationItem = React.forwardRef<HTMLButtonElement, NavigationItemProps>(
-  ({ className, variant, active, value, ...props }, ref) => {
-    // Determine the correct variant based on parent and state
-    const getItemVariant = () => {
-      if (variant === "menuBarDefault" || variant === "menuBarActive") {
-        return active ? "menuBarActive" : "menuBarDefault";
-      }
-      return active ? "active" : variant || "default";
-    };
-
-    const appliedVariant = getItemVariant();
-    const isMenuBar =
-      appliedVariant === "menuBarDefault" || appliedVariant === "menuBarActive";
-
-    return (
-      <button
-        ref={ref}
-        data-active={active}
-        data-value={value}
-        className={cn(
-          navigationItemVariants({
-            variant: appliedVariant,
-            className,
-          }),
-          !isMenuBar && "rounded-md px-4 py-2",
-        )}
-        {...props}
-      />
-    );
-  },
-);
-
-NavigationItem.displayName = "NavigationItem";
-
-export {
-  NavigationBar,
-  NavigationItem,
-  navigationBarVariants,
-  navigationItemVariants,
-};

package/src/components/ui/navigation-menu.tsx

@@ -1,188 +0,0 @@
-import * as React from "react";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority";
-import { ChevronDownIcon } from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "./button";
-import { DotIcon } from "../icons";
-
-function NavigationMenu({
-  className,
-  children,
-  viewport = true,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
-}) {
-  return (
-    <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
-      data-viewport={viewport}
-      className={cn(
-        "group/navigation-menu relative flex w-full flex-1 items-center justify-between",
-        "border-border bg-background h-[70px] gap-2.5 rounded-full border px-5",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      {viewport && <NavigationMenuViewport />}
-    </NavigationMenuPrimitive.Root>
-  );
-}
-
-function NavigationMenuList({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  return (
-    <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
-      className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  );
-}
-
-const navigationMenuTriggerStyle = cva(
-  "group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
-);
-
-function NavigationMenuTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
-    <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
-      {...props}
-    >
-      {children}{" "}
-      <ChevronDownIcon
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-        aria-hidden="true"
-      />
-    </NavigationMenuPrimitive.Trigger>
-  );
-}
-
-function NavigationMenuContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  return (
-    <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
-      className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function NavigationMenuViewport({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
-  return (
-    <div
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center",
-      )}
-    >
-      <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
-        className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function NavigationMenuLink({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "group",
-        "data-[active=true]:from-primary data-[active=true]:via-primary/20 data-[active=true]:to-primary/30 data-[active=true]:bg-gradient-to-b",
-        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 rounded-full transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1",
-      )}
-    >
-      <div
-        className={cn(
-          buttonVariants({
-            variant: "menu",
-            size: "default",
-            className: cn("w-full", className),
-          }),
-        )}
-      >
-        {children}
-
-        <div className="relative hidden size-[18px] shrink-0 group-data-[active=true]:block">
-          <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-        </div>
-      </div>
-    </NavigationMenuPrimitive.Link>
-  );
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
-    <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
-      className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-    </NavigationMenuPrimitive.Indicator>
-  );
-}
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-  navigationMenuTriggerStyle,
-};

package/src/components/ui/opportunity-details-v1.tsx

@@ -1,104 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "./card";
-import { InfoCard } from "./info-card";
-import { LabelWithIcon } from "./label-with-icon";
-import { Button } from "./button";
-import { ChevronDownIcon, ExternalLinkIcon } from "lucide-react";
-
-interface InfoCardData {
-  title: string;
-  value: string;
-  color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
-  iconUrl?: string;
-}
-
-interface OpportunityDetailsV1Props {
-  value: {
-    title?: string;
-    titleIcon?: React.ReactNode;
-    url?: string;
-    topCards: readonly InfoCardData[]; // Flexible array for top row
-    bottomCards: readonly InfoCardData[]; // Flexible array for bottom
-    onTitleClick?: () => void;
-  };
-  className?: string;
-}
-
-function OpportunityDetailsV1({ value, className }: OpportunityDetailsV1Props) {
-  const { title, titleIcon, url, topCards, bottomCards, onTitleClick } = value;
-  const defaultTitleIcon = (
-    <div className="bg-primary/20 flex h-8 w-8 items-center justify-center rounded-full">
-      <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 2L13.09 8.26L20 7L18.74 13.09L22 14L16.74 19.26L17 21L10.91 19.74L10 22L8.09 15.74L2 17L3.26 10.91L0 10L5.26 4.74L5 3L11.09 4.26L12 2Z" />
-      </svg>
-    </div>
-  );
-  return (
-    <Card variant="border" className={cn("space-y-4", className)}>
-      {/* TODO: Add scroll area */}
-      <div className="h-full overflow-y-auto">
-        <div className="space-y-4">
-          {/* Header with LabelWithIcon */}
-          {(title || titleIcon) && (
-            <div className="flex items-center">
-              <div
-                className="border-border bg-card hover:bg-secondary flex cursor-pointer items-center justify-between gap-3 rounded-full border py-0 pr-3 pl-0"
-                onClick={onTitleClick}
-              >
-                <LabelWithIcon
-                  icon={titleIcon || defaultTitleIcon}
-                  textSize="sm"
-                  iconSize="sm"
-                >
-                  {title}
-                </LabelWithIcon>
-                <ChevronDownIcon className="h-4 w-4" />
-              </div>
-              {url && (
-                <Button size="icon" className="ml-auto">
-                  <a href={url} target="_blank" rel="noopener noreferrer">
-                    <ExternalLinkIcon />
-                  </a>
-                </Button>
-              )}
-            </div>
-          )}
-
-          {/* Top row: Dynamic InfoCards with responsive grid */}
-          {/* Improve: Create a better grid definition */}
-          <div className="grid grid-cols-3 gap-3">
-            {topCards.map((card, index) => (
-              <InfoCard
-                key={index}
-                title={card.title}
-                value={card.value}
-                color={card.color || "primary"}
-                iconUrl={card.iconUrl}
-                titleSize="sm"
-                align="left"
-              />
-            ))}
-          </div>
-
-          {/* Bottom section: InfoCards full width, one below another */}
-          <div className="space-y-2">
-            {bottomCards.map((card, index) => (
-              <InfoCard
-                key={index}
-                iconUrl={card.iconUrl}
-                title={card.title}
-                value={card.value}
-                titleSize="sm"
-                align="left"
-                className="w-full"
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    </Card>
-  );
-}
-
-export { OpportunityDetailsV1, type InfoCardData };

package/src/components/ui/pagination.tsx

@@ -1,127 +0,0 @@
-import * as React from "react";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react";
-
-import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
-
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
-  return (
-    <nav
-      role="navigation"
-      aria-label="pagination"
-      data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationContent({
-  className,
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  );
-}
-
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
-  return <li data-slot="pagination-item" {...props} />;
-}
-
-type PaginationLinkProps = {
-  isActive?: boolean;
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">;
-
-function PaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "default" : "ghost",
-          size,
-        }),
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function PaginationPrevious({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
-      {...props}
-    >
-      <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
-    </PaginationLink>
-  );
-}
-
-function PaginationNext({
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
-  return (
-    <PaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
-      {...props}
-    >
-      <span className="hidden sm:block">Next</span>
-      <ChevronRightIcon />
-    </PaginationLink>
-  );
-}
-
-function PaginationEllipsis({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      aria-hidden
-      data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
-      {...props}
-    >
-      <MoreHorizontalIcon className="size-4" />
-      <span className="sr-only">More pages</span>
-    </span>
-  );
-}
-
-export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
-};

package/src/components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-
-import { cn } from "@/lib/utils";
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover 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 border-border z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/components/ui/scroll-area.tsx

@@ -1,64 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-
-import { cn } from "@/lib/utils";
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollBar orientation="horizontal" />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      style={{
-        ...(orientation === "vertical" ? { width: "6px" } : { height: "6px" }),
-      }}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="relative flex-1"
-        style={{
-          backgroundColor: "rgba(255, 255, 255, 0.3)",
-          borderRadius: "20px",
-        }}
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-}
-
-export { ScrollArea, ScrollBar };