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

package/src/components/features/data-table/sort-dropdown.tsx

@@ -1,118 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { ArrowDown, ArrowUp, ArrowUpDown, X } from "lucide-react";
-import { flexRender, Header } from "@tanstack/react-table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "../../ui/dropdown";
-
-interface SortDropdownProps<TData> {
-  headers: Header<TData, unknown>[];
-  currentSort?: { id: string; desc: boolean } | null;
-  onSortChange: (columnId: string, desc: boolean) => void;
-  onClearSort?: () => void;
-}
-
-export function SortDropdown<TData>({
-  headers,
-  currentSort,
-  onSortChange,
-  onClearSort,
-}: SortDropdownProps<TData>) {
-  // Filter only sortable columns
-  const sortableHeaders = headers.filter(
-    (header) => header.column.getCanSort() && !header.isPlaceholder
-  );
-
-  const getCurrentSortLabel = () => {
-    if (!currentSort) return "Sort";
-
-    const header = sortableHeaders.find((h) => h.column.id === currentSort.id);
-    if (!header) return "Sort";
-
-    return (
-      <span className="flex items-center gap-2">
-        {currentSort.desc ? (
-          <ArrowDown className="text-primary size-3" />
-        ) : (
-          <ArrowUp className="text-primary size-3" />
-        )}
-        <span className="truncate">
-          {flexRender(header.column.columnDef.header, header.getContext())}
-        </span>
-      </span>
-    );
-  };
-
-  const handleColumnClick = (columnId: string) => {
-    // If this column is already sorted, toggle the direction
-    if (currentSort?.id === columnId) {
-      // If descending, switch to ascending; if ascending, switch to descending
-      onSortChange(columnId, !currentSort.desc);
-    } else {
-      // New column, start with ascending
-      onSortChange(columnId, false);
-    }
-  };
-
-  if (sortableHeaders.length === 0) return null;
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger size="sm" className="bg-neutral-alpha-2">
-        {currentSort ? (
-          getCurrentSortLabel()
-        ) : (
-          <div className="text-muted-foreground flex items-center gap-2">
-            <ArrowUpDown className="size-3" />
-            <span>Sort by</span>
-          </div>
-        )}
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-[200px] space-y-1">
-        <DropdownMenuLabel>Sort by</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        {sortableHeaders.map((header) => {
-          const isCurrentAsc = currentSort?.id === header.column.id && !currentSort.desc;
-          const isCurrentDesc = currentSort?.id === header.column.id && currentSort.desc;
-          const isActive = currentSort?.id === header.column.id;
-
-          return (
-            <DropdownMenuItem
-              key={header.column.id}
-              onClick={() => handleColumnClick(header.column.id)}
-              className={
-                isActive ? "bg-secondary flex items-center gap-2" : "flex items-center gap-2"
-              }
-            >
-              <span className="w-fit truncate">
-                {flexRender(header.column.columnDef.header, header.getContext())}
-              </span>
-              {isActive &&
-                (isCurrentDesc ? (
-                  <ArrowDown className="text-primary size-4" />
-                ) : (
-                  <ArrowUp className="text-primary size-4" />
-                ))}
-            </DropdownMenuItem>
-          );
-        })}
-        {currentSort && onClearSort && (
-          <>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onClearSort}>
-              <X className="size-4" />
-              Clear sorting
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/features/data-table/sortable-header.tsx

@@ -1,37 +0,0 @@
-"use client";
-
-import { flexRender, type Header } from "@tanstack/react-table";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import { useMemo } from "react";
-
-export default function SortableHeader({
-  header,
-}: {
-  header: Header<any, unknown>;
-}) {
-  const getSortIcon = useMemo(() => {
-    if (header.column.getIsSorted() === "asc")
-      return <ArrowUp className="text-primary size-3.5" />;
-    if (header.column.getIsSorted() === "desc")
-      return <ArrowDown className="text-primary size-3.5" />;
-    return (
-      header.column.getCanSort() && (
-        <ArrowUpDown className="text-secondary group-hover:text-muted-foreground size-3" />
-      )
-    );
-  }, [header.column.getIsSorted(), header.column.getCanSort()]);
-
-  return header.isPlaceholder ? null : (
-    <div
-      className={
-        header.column.getCanSort()
-          ? "group flex cursor-pointer items-center gap-1 select-none"
-          : ""
-      }
-      onClick={header.column.getToggleSortingHandler()}
-    >
-      {flexRender(header.column.columnDef.header, header.getContext())}
-      {getSortIcon}
-    </div>
-  );
-}

package/src/components/features/index.ts

@@ -1,6 +0,0 @@
-export * from "./data-table";
-export * from "./search-bar";
-export * from "./sidebar-layout";
-export * from "./page-heading";
-export * from "./turtle-tooltip";
-export * from "./api-status";

package/src/components/features/page-heading.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { HeadingH3, HeadingH6 } from "../ui";
-
-type PageHeadingProps = {
-  icon?: React.ReactNode;
-  title: string;
-  description: string;
-  action?: React.ReactNode;
-};
-
-export function PageHeading({
-  icon,
-  title,
-  description,
-  action,
-}: PageHeadingProps) {
-  return (
-    <div className="flex items-center gap-3">
-      <div>{icon}</div>
-      <div className="grow">
-        <HeadingH3>{title}</HeadingH3>
-        <HeadingH6>{description}</HeadingH6>
-      </div>
-      {action}
-    </div>
-  );
-}

package/src/components/features/search-bar.tsx

@@ -1,55 +0,0 @@
-import * as React from "react";
-import { Input, InputProps } from "../ui";
-import { Search } from "lucide-react";
-import { cn } from "@/lib/utils";
-
-type Props = {
-  value: string;
-  onChange: (value: string) => void;
-  debounce?: number;
-  size?: "default" | "sm";
-} & Omit<InputProps, "onChange">;
-
-export const SearchBar: React.FC<Props> = ({
-  value: initialValue,
-  onChange,
-  debounce = 300,
-  size = "default",
-  ...props
-}) => {
-  const [value, setValue] = React.useState<string>(initialValue);
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setValue(event.target.value);
-
-  React.useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-
-  React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      onChange(value);
-    }, debounce);
-
-    return () => clearTimeout(timeout);
-  }, [value]);
-
-  const inputClasses = size === "sm" ? "text-sm" : "";
-
-  return (
-    <div className="border-border relative w-full max-w-md rounded-full border">
-      <Input
-        value={value}
-        onChange={handleInputChange}
-        className={cn("-my-px h-9", inputClasses)}
-        {...props}
-      />
-      <button
-        type="button"
-        className="bg-border border-border absolute inset-y-0 right-0 flex aspect-square h-full items-center justify-center rounded rounded-full"
-      >
-        <Search className="text-primary size-3" />
-      </button>
-    </div>
-  );
-};

package/src/components/features/segmented-navigation.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { SegmentControl, SegmentControlProps } from "../ui";
-
-type SegmentedNavigationProps<T extends string> = SegmentControlProps<T> & {
-  shouldMobileSelect: boolean;
-};
-
-export function SegmentedNavigation<T extends string>({
-  value,
-  onChange,
-  items,
-}: SegmentedNavigationProps<T>) {
-  return (
-    <div className="">
-      <SegmentControl value={value} onChange={onChange} items={items} />
-    </div>
-  );
-}

package/src/components/features/sidebar-layout.tsx

@@ -1,193 +0,0 @@
-import React from "react";
-import { ChevronRight } from "lucide-react";
-import {
-  Sidebar,
-  SidebarProvider,
-  SidebarHeader,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarMenuSub,
-  SidebarMenuSubItem,
-  SidebarMenuSubButton,
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-  SidebarFooter,
-  useSidebar,
-  SidebarTrigger,
-} from "../ui";
-import { cn } from "@/lib/utils";
-import { DotIcon, TurtleIcon } from "../icons";
-
-type SidebarItemBase = {
-  title: string;
-  icon?: any;
-};
-
-// Item with a URL (no children)
-type SidebarLink = SidebarItemBase & {
-  url: string;
-  isActive: boolean;
-  children?: never;
-};
-
-// Item with children (no URL)
-type SidebarGroupBase = SidebarItemBase & {
-  children: SidebarItem[];
-  url?: never;
-  isActive?: never;
-};
-
-export type SidebarItem = SidebarLink | SidebarGroupBase;
-
-export function TurtleSidebarLayout({
-  children,
-  sidebarSlot,
-  sidebarFooter,
-  topSlot,
-  items,
-  linkComponent,
-}: {
-  children: React.ReactNode;
-  sidebarSlot?: React.ReactNode;
-  sidebarFooter?: React.ReactNode;
-  topSlot?: React.ReactNode;
-  items: SidebarItem[];
-  linkComponent: any;
-}) {
-  return (
-    <SidebarProvider>
-      <TurtleSidebar
-        items={items}
-        sidebarFooter={sidebarFooter}
-        sidebarSlot={sidebarSlot}
-        linkComponent={linkComponent}
-      />
-      <TurtleContainer topSlot={topSlot} children={children} />
-    </SidebarProvider>
-  );
-}
-
-export function TurtleSidebar({
-  items,
-  sidebarSlot,
-  sidebarFooter,
-  linkComponent: Comp = "a",
-}: {
-  items: SidebarItem[];
-  sidebarSlot?: React.ReactNode;
-  sidebarFooter?: React.ReactNode;
-  linkComponent: any;
-}) {
-  return (
-    <Sidebar>
-      <SidebarHeader>
-        <div className="border-gradient-white border-opacity-20 relative h-[72px] w-full rounded-full shadow">
-          <TurtleIcon className="absolute -top-2 -left-2 aspect-square h-[86px]" />
-
-          <div className="text-primary mt-2 -space-y-1.5 pl-20">
-            <div className="text-3xl leading-tight font-bold">Turtle</div>
-            <div className="pl-1 text-sm font-medium">Partner Portal</div>
-          </div>
-        </div>
-      </SidebarHeader>
-      <SidebarContent>
-        <SidebarGroup>
-          <SidebarGroupContent>
-            <SidebarMenu>
-              {items.map((item) => {
-                if (item?.children?.length) {
-                  return (
-                    <Collapsible className="group/collapsible">
-                      <SidebarMenuItem>
-                        <CollapsibleTrigger asChild>
-                          <SidebarMenuButton>
-                            {item.icon && <item.icon />}
-                            <span className="grow">{item.title}</span>
-                            <ChevronRight className="transition-all group-data-[state=open]/collapsible:rotate-90" />
-                          </SidebarMenuButton>
-                        </CollapsibleTrigger>
-                        <CollapsibleContent>
-                          <SidebarMenuSub>
-                            {item.children.map((child) => (
-                              <SidebarMenuSubItem key={child.title}>
-                                <SidebarMenuSubButton
-                                  asChild
-                                  isActive={child.isActive}
-                                >
-                                  <Comp href={child.url}>
-                                    {child.icon && <child.icon />}
-                                    <span className="grow">{child.title}</span>
-
-                                    <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-sub-button:hidden">
-                                      <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-                                    </div>
-                                  </Comp>
-                                </SidebarMenuSubButton>
-                              </SidebarMenuSubItem>
-                            ))}
-                          </SidebarMenuSub>
-                        </CollapsibleContent>
-                      </SidebarMenuItem>
-                    </Collapsible>
-                  );
-                }
-                return (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton asChild isActive={item.isActive}>
-                      <Comp href={item.url}>
-                        {item.icon && <item.icon />}
-                        <span className="grow">{item.title}</span>
-                        <div className="relative size-[18px] shrink-0 group-data-[active=false]/menu-button:hidden">
-                          <DotIcon className="text-primary absolute top-[-15px] left-[-15px] size-12" />
-                        </div>
-                      </Comp>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
-            </SidebarMenu>
-          </SidebarGroupContent>
-        </SidebarGroup>
-        <span className="grow" />
-        <SidebarGroup>{sidebarSlot}</SidebarGroup>
-      </SidebarContent>
-      <SidebarFooter>{sidebarFooter}</SidebarFooter>
-    </Sidebar>
-  );
-}
-
-export function TurtleContainer({
-  children,
-  topSlot,
-}: {
-  children: React.ReactNode;
-  topSlot?: React.ReactNode;
-}) {
-  const { state, isMobile } = useSidebar();
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 flex h-svh flex-col items-stretch gap-1 py-2 pr-2",
-        state === "collapsed" || isMobile ? "pl-2" : "left-64",
-      )}
-    >
-      <div className="flex gap-1">
-        <SidebarTrigger />
-        {topSlot}
-      </div>
-
-      <main
-        className={cn(
-          "bg-background border-border max-h-[94svh] grow overflow-y-auto rounded-lg border p-6",
-        )}
-      >
-        {children}
-      </main>
-    </div>
-  );
-}

package/src/components/features/turtle-tooltip.tsx

@@ -1,67 +0,0 @@
-import type { MouseEvent, ReactNode } from "react";
-import { useIsMobile } from "@/hooks/useIsMobile";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { TooltipPortal } from "@radix-ui/react-tooltip";
-
-interface TooltipProps {
-  trigger: ReactNode;
-  content: ReactNode;
-  className?: string;
-  contentClassName?: string;
-  maxWidth?: string;
-  href?: string;
-  side?: "top" | "bottom" | "left" | "right";
-  asChild?: boolean;
-}
-
-export function TurtleTooltip({
-  trigger,
-  content,
-  className,
-  side,
-  asChild,
-}: TooltipProps) {
-  const { isMobile } = useIsMobile();
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  return (
-    <div className={className} onClick={handleClick}>
-      {isMobile ? (
-        <Popover>
-          <PopoverTrigger
-            className="flex items-center justify-center"
-            asChild={asChild}
-          >
-            {trigger}
-          </PopoverTrigger>
-          <PopoverContent side={side}>{content}</PopoverContent>
-        </Popover>
-      ) : (
-        <Tooltip>
-          <TooltipTrigger
-            className="flex items-center justify-center"
-            asChild={asChild}
-          >
-            {trigger}
-          </TooltipTrigger>
-          <TooltipPortal>
-            <TooltipContent side={side}>{content}</TooltipContent>
-          </TooltipPortal>
-        </Tooltip>
-      )}
-    </div>
-  );
-}

package/src/components/icons/arrow.tsx

@@ -1,23 +0,0 @@
-export const ArrowIcon = ({ className }: { className?: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="13"
-    height="14"
-    viewBox="0 0 13 14"
-    fill="none"
-    className={className}
-  >
-    <path
-      d="M3.65174 10.4506L3.05176 9.85059L9.05161 3.85073L9.6516 4.45072L3.65174 10.4506Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.68168 4.66626L3.31787 4.66626V3.81775L9.68168 3.81775V4.66626Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.68249 10.1821H8.83398L8.83398 3.81832H9.68249L9.68249 10.1821Z"
-      fill="currentColor"
-    />
-  </svg>
-);

package/src/components/icons/beta.tsx

@@ -1,95 +0,0 @@
-export const BetaIcon = ({ className }: { className?: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="25"
-    height="24"
-    viewBox="0 0 25 24"
-    fill="none"
-    className={className}
-  >
-    <g filter="url(#filter0_i_11400_35580)">
-      <rect
-        x="0.135742"
-        width="24"
-        height="24"
-        rx="12"
-        fill="url(#paint0_linear_11400_35580)"
-        fill-opacity="0.6"
-      />
-      <rect
-        x="0.424196"
-        y="0.288454"
-        width="23.4231"
-        height="23.4231"
-        rx="11.7115"
-        stroke="url(#paint1_linear_11400_35580)"
-        stroke-width="0.576907"
-      />
-      <path
-        d="M19.0287 14.9918C18.8952 14.9752 17.1068 14.709 16.5278 12.4321C16.4566 12.15 16.1725 11.9799 15.8933 12.0518C15.701 12.1016 15.5607 12.2537 15.5155 12.4355C14.9132 14.7941 13.0125 14.9918 13.007 14.9925C12.7203 15.0264 12.5149 15.2898 12.5485 15.5795C12.5779 15.8305 12.7764 16.0193 13.0146 16.0435C13.148 16.0601 14.9371 16.3263 15.5162 18.6032C15.5873 18.8853 15.8714 19.0554 16.1506 18.9835C16.343 18.9337 16.4833 18.7816 16.5284 18.5998C17.13 16.2406 19.0314 16.0435 19.0369 16.0428C19.3236 16.0089 19.529 15.7455 19.4954 15.4558C19.466 15.2048 19.2675 15.016 19.0287 14.9918ZM16.022 13.9775C16.4456 14.7297 16.9945 15.211 17.5003 15.518C16.9945 15.8243 16.4456 16.3056 16.022 17.0585C15.5983 16.3056 15.0494 15.8243 14.5436 15.518C15.0494 15.2117 15.5983 14.7304 16.022 13.9775ZM14.2904 8.61183C14.1247 8.59178 11.0989 8.18106 10.1359 4.39678C10.0647 4.11467 9.78065 3.94457 9.5014 4.01648C9.3084 4.06626 9.16877 4.21838 9.1236 4.40023C8.1346 8.2827 4.97185 8.61183 4.96295 8.61252C4.67618 8.64571 4.47016 8.90777 4.50233 9.19749C4.53108 9.44986 4.73025 9.63932 4.97048 9.66352C5.13612 9.68357 8.16197 10.0943 9.12497 13.8786C9.19615 14.1607 9.48019 14.3308 9.75943 14.2589C9.95176 14.2091 10.0921 14.057 10.1372 13.8744C11.1262 9.99196 14.289 9.66283 14.2979 9.66214C14.5847 9.62895 14.7907 9.36689 14.7585 9.07717C14.7298 8.82549 14.5306 8.63603 14.2904 8.61183ZM9.63076 6.0922C10.4076 7.7655 11.5862 8.66162 12.5485 9.13802C11.5855 9.61374 10.4076 10.5105 9.63076 12.1838C8.85393 10.5105 7.67603 9.61374 6.71304 9.13802C7.67603 8.66162 8.85393 7.7655 9.63076 6.0922Z"
-        fill="#AAF1D5"
-      />
-    </g>
-    <defs>
-      <filter
-        id="filter0_i_11400_35580"
-        x="0.135742"
-        y="0"
-        width="24"
-        height="24"
-        filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
-      >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feBlend
-          mode="normal"
-          in="SourceGraphic"
-          in2="BackgroundImageFix"
-          result="shape"
-        />
-        <feColorMatrix
-          in="SourceAlpha"
-          type="matrix"
-          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-          result="hardAlpha"
-        />
-        <feOffset />
-        <feGaussianBlur stdDeviation="1.24267" />
-        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
-        <feColorMatrix
-          type="matrix"
-          values="0 0 0 0 0.666667 0 0 0 0 0.945098 0 0 0 0 0.835294 0 0 0 1 0"
-        />
-        <feBlend
-          mode="normal"
-          in2="shape"
-          result="effect1_innerShadow_11400_35580"
-        />
-      </filter>
-      <linearGradient
-        id="paint0_linear_11400_35580"
-        x1="0.135742"
-        y1="12"
-        x2="24.1357"
-        y2="12"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="#121312" />
-        <stop offset="1" stop-color="#AAF1D5" stop-opacity="0" />
-      </linearGradient>
-      <linearGradient
-        id="paint1_linear_11400_35580"
-        x1="1.81706"
-        y1="-5.32127e-06"
-        x2="13.2516"
-        y2="26.324"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stop-color="white" stop-opacity="0.4" />
-        <stop offset="0.405687" stop-color="white" stop-opacity="0.01" />
-        <stop offset="0.574372" stop-color="white" stop-opacity="0.01" />
-        <stop offset="1" stop-color="white" stop-opacity="0.1" />
-      </linearGradient>
-    </defs>
-  </svg>
-);