@turtleclub/ui 0.0.1

package/src/components/ui/input.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const inputVariants = cva(
+  "flex w-full bg-transparent text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground transition-colors outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        // Turtle Design System - transparent input with no borders
+        default: "border-none focus:ring-0 focus:border-none caret-primary",
+        // Optional bordered version for other use cases
+        bordered: "border border-border rounded-md focus:border-primary focus:ring-2 focus:ring-primary/20 caret-primary",
+        // No focus variant - cursor color only, no focus styles
+        nofocus: "border-none focus:ring-0 focus:border-none focus:outline-none caret-primary",
+      },
+      size: {
+        default: "h-10 px-3 py-2 text-sm",
+        sm: "h-8 px-2 py-1 text-xs",
+        lg: "h-12 px-4 py-3 text-base",
+      },
+      cursor: {
+        primary: "caret-primary",
+        foreground: "caret-foreground", 
+        white: "caret-white",
+        green: "caret-green-500",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      cursor: "primary",
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.ComponentProps<"input">, "size">,
+    VariantProps<typeof inputVariants> {
+  // Optional prompt text that appears before the input
+  prompt?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, cursor, type, prompt, ...props }, ref) => {
+    if (prompt) {
+      return (
+        <div className="flex items-center gap-2">
+          <span className="text-primary text-sm font-medium shrink-0">
+            {prompt}
+          </span>
+          <input
+            type={type}
+            data-slot="input"
+            className={cn(inputVariants({ variant, size, cursor, className }))}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      );
+    }
+
+    return (
+      <input
+        type={type}
+        data-slot="input"
+        className={cn(inputVariants({ variant, size, cursor, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export { Input, inputVariants };

package/src/components/ui/label-with-icon.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelWithIconVariants = cva("inline-flex items-center gap-2 font-medium", {
+  variants: {
+    variant: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      primary: "text-primary",
+      secondary: "text-secondary-foreground",
+    },
+    textSize: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl",
+      "7xl": "text-7xl",
+      "8xl": "text-8xl",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    textSize: "sm",
+  },
+});
+
+const iconSizeClasses = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  base: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8",
+};
+
+export interface LabelWithIconProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof labelWithIconVariants> {
+  icon: React.ReactNode | string; // Can be a component or URL string
+  children: React.ReactNode;
+  iconPosition?: "left" | "right";
+  iconSize?: keyof typeof iconSizeClasses;
+  iconClassName?: string; // Additional classes for the icon
+}
+
+const LabelWithIcon = React.forwardRef<HTMLDivElement, LabelWithIconProps>(
+  (
+    {
+      className,
+      variant,
+      textSize,
+      icon,
+      children,
+      iconPosition = "left",
+      iconSize = "sm",
+      iconClassName,
+      ...props
+    },
+    ref
+  ) => {
+    const renderIcon = () => {
+      // If icon is a string (URL), render as img
+      if (typeof icon === "string") {
+        return (
+          <img
+            src={icon}
+            alt=""
+            className={cn(iconSizeClasses[iconSize], "object-contain", iconClassName)}
+          />
+        );
+      }
+
+      // If icon is a React component, render it directly
+      // If it's a Lucide icon or any other component, it will be rendered as-is
+      return (
+        <span className={cn("shrink-0", iconClassName)}>
+          {React.isValidElement(icon)
+            ? React.cloneElement(icon as React.ReactElement<any>, {
+                className: cn(iconSizeClasses[iconSize], (icon as any).props?.className),
+              })
+            : icon}
+        </span>
+      );
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          labelWithIconVariants({ variant, textSize }),
+          iconPosition === "right" && "flex-row-reverse",
+          className
+        )}
+        {...props}
+      >
+        {renderIcon()}
+        <span>{children}</span>
+      </div>
+    );
+  }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";
+
+export { LabelWithIcon, labelWithIconVariants };

package/src/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

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

@@ -0,0 +1,135 @@
+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: "justify-between border border-border shadow-sm bg-background",
+      transparent: "justify-between border border-border shadow-sm bg-transparent",
+      menuBar: "relative h-12 gap-3 rounded-full border border-border bg-background font-medium shadow-sm",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+const navigationItemVariants = cva(
+  "flex items-center justify-center whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "text-sm text-muted-foreground hover:text-foreground",
+        active: "text-sm text-primary bg-muted",
+        menuBarDefault: "relative z-[1] w-full text-base text-foreground rounded-full px-3 py-2 hover:text-primary",
+        menuBarActive: "relative z-[1] w-full text-base text-primary rounded-full px-3 py-2",
+      },
+    },
+    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="absolute bottom-0 h-full origin-left rounded-full bg-secondary 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 && "px-4 py-2 rounded-md"
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+NavigationItem.displayName = "NavigationItem";
+
+export { NavigationBar, NavigationItem, navigationBarVariants, navigationItemVariants };

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

@@ -0,0 +1,90 @@
+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";
+
+interface InfoCardData {
+  title: string;
+  value: string;
+  color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error";
+  icon?: React.ReactNode;
+}
+
+interface OpportunityDetailsV1Props {
+  title?: string;
+  titleIcon?: React.ReactNode;
+  topCards: readonly InfoCardData[]; // Flexible array for top row
+  bottomCards: readonly InfoCardData[]; // Flexible array for bottom
+  className?: string;
+}
+
+function OpportunityDetailsV1({
+  className,
+  title,
+  titleIcon,
+  topCards,
+  bottomCards,
+}: OpportunityDetailsV1Props) {
+  const defaultTitleIcon = (
+    <div className="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center">
+      <svg className="w-4 h-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 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">
+              <LabelWithIcon icon={titleIcon || defaultTitleIcon} textSize="lg" iconSize="lg">
+                {title}
+              </LabelWithIcon>
+            </div>
+          )}
+
+          {/* Top row: 3 InfoCards side by side */}
+          <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"}
+                icon={card.icon}
+                size="sm"
+                valueSize="sm"
+                titleSize="sm"
+                align="left"
+              />
+            ))}
+          </div>
+
+          {/* Bottom section: 4 InfoCards full width, one below another */}
+          <div className="space-y-2">
+            {bottomCards.map((card, index) => (
+              <InfoCard
+                key={index}
+                title={card.title}
+                value={card.value}
+                color={card.color || "primary"}
+                size="sm"
+                valueSize="sm"
+                titleSize="sm"
+                align="left"
+                className="w-full"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export { OpportunityDetailsV1, type InfoCardData };

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

@@ -0,0 +1,56 @@
+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 />
+      <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
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

package/src/components/ui/select.tsx

@@ -0,0 +1,180 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        // Turtle Design System - transparent trigger with wise white text
+        "flex w-fit items-center justify-between gap-2 bg-transparent px-3 py-2 text-sm text-foreground whitespace-nowrap transition-colors outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 border-none focus:ring-0",
+        "data-[placeholder]:text-muted-foreground",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground",
+        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          // Turtle Design System - ninja black background for content
+          "bg-background text-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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        // Turtle Design System - items with wise white alpha (2%) background and ninja black text
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm text-foreground outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "bg-muted hover:bg-muted/80 focus:bg-muted/80", // wise white alpha (2%) background
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        {/* Single dot that changes color based on selection */}
+        <div className="w-2 h-2 rounded-full bg-muted-foreground/30 transition-colors" />
+        {/* Use Radix's ItemIndicator to show selected state */}
+        <SelectPrimitive.ItemIndicator className="absolute">
+          <div className="w-2 h-2 rounded-full bg-primary" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};