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

package/src/components/ui/index.ts

@@ -1,48 +0,0 @@
-export * from "./sonner";
-export * from "./switch";
-export * from "./toggle-group";
-export * from "./toggle";
-export * from "./chip";
-export * from "./icon-animation";
-export * from "./label-with-icon";
-export * from "./navigation-bar";
-export * from "./info-card";
-export * from "./opportunity-details-v1";
-export * from "./table";
-export * from "./hover-card";
-export * from "./icon-list";
-export * from "./animated-background";
-export * from "./chart";
-// What Mati created / touched / reviewed goes below this line.
-export * from "./separator";
-export * from "./select";
-export * from "./button";
-export * from "./card";
-export * from "./dialog";
-export * from "./avatar";
-export * from "./badge";
-export * from "./table-shadcn";
-export * from "./checkbox";
-export * from "./dropdown";
-export * from "./segment-control";
-export * from "./input";
-export * from "./input-group";
-export * from "./tooltip";
-export * from "./navigation-menu";
-export * from "./slider";
-export * from "./alert-dialog";
-export * from "./heading";
-export * from "./textarea";
-export * from "./field";
-export * from "./label";
-export * from "./popover";
-export * from "./command";
-export * from "./multi-select";
-export * from "./combobox";
-export * from "./scroll-area";
-export * from "./sidebar";
-export * from "./collapsible";
-export * from "./banner";
-export * from "./skeleton";
-export * from "./pagination";
-export * from "./sheet";

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

@@ -1,110 +0,0 @@
-import * as React from "react";
-import { cn } from "@/lib/utils";
-import { Card } from "./card";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-const infoCardVariants = cva("space-y-1", {
-  variants: {
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right",
-    },
-  },
-  defaultVariants: {
-    align: "center",
-  },
-});
-
-const valueVariants = cva("font-bold", {
-  variants: {
-    color: {
-      primary: "text-foreground",
-      secondary: "text-muted-foreground",
-      accent: "text-primary",
-      success: "text-green-600",
-      warning: "text-yellow-600",
-      error: "text-red-600",
-    },
-  },
-  defaultVariants: {
-    color: "primary",
-  },
-});
-
-const titleVariants = cva("text-muted-foreground font-medium", {
-  variants: {
-    size: {
-      sm: "text-xs",
-      default: "text-xs",
-      lg: "text-sm",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-});
-
-interface InfoCardProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
-    VariantProps<typeof infoCardVariants> {
-  title: string;
-  value: string;
-  color?: VariantProps<typeof valueVariants>["color"];
-  titleSize?: VariantProps<typeof titleVariants>["size"];
-  align?: VariantProps<typeof infoCardVariants>["align"];
-  iconUrl?: string;
-  subtitle?: string;
-}
-
-const InfoCard = React.forwardRef<HTMLDivElement, InfoCardProps>(
-  (
-    {
-      title,
-      value,
-      color = "primary",
-      titleSize = "default",
-      align = "center",
-      iconUrl,
-      subtitle,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Card
-        ref={ref}
-        variant="shadow"
-        rounded="infoCard"
-        className={cn(infoCardVariants({ align }), className)}
-        {...props}
-      >
-        {/* Icon & Title */}
-        <div className="flex gap-2">
-          {iconUrl && (
-            <img
-              src={iconUrl}
-              alt={`${title}-icon`}
-              className="h-5 w-5 rounded-full"
-            />
-          )}
-          <p className={titleVariants({ size: titleSize })}>{title}</p>
-        </div>
-
-        {/* Value */}
-        <p className={cn("text-foreground")}>{value}</p>
-
-        {/* Subtitle */}
-        {subtitle && (
-          <p className="text-muted-foreground/70 text-xs">{subtitle}</p>
-        )}
-      </Card>
-    );
-  },
-);
-
-InfoCard.displayName = "InfoCard";
-
-export { InfoCard };

package/src/components/ui/input-group.tsx

@@ -1,170 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-
-function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="input-group"
-      role="group"
-      className={cn(
-        "group/input-group border-input relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
-        "h-9 min-w-0 has-[>textarea]:h-auto",
-
-        // Variants based on alignment.
-        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
-        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
-        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
-        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
-
-        // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
-
-        // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive",
-
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      align: {
-        "inline-start":
-          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
-        "inline-end":
-          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
-        "block-start":
-          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
-        "block-end":
-          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
-      },
-    },
-    defaultVariants: {
-      align: "inline-start",
-    },
-  },
-);
-
-function InputGroupAddon({
-  className,
-  align = "inline-start",
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
-  return (
-    <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest("button")) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector("input")?.focus();
-      }}
-      {...props}
-    />
-  );
-}
-
-const inputGroupButtonVariants = cva(
-  "flex items-center gap-2 text-sm shadow-none",
-  {
-    variants: {
-      size: {
-        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
-        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
-        "icon-xs":
-          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
-        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
-      },
-    },
-    defaultVariants: {
-      size: "xs",
-    },
-  },
-);
-
-function InputGroupButton({
-  className,
-  type = "button",
-  variant = "default",
-  size = "xs",
-  ...props
-}: Omit<React.ComponentProps<typeof Button>, "size"> &
-  VariantProps<typeof inputGroupButtonVariants>) {
-  return (
-    <Button
-      type={type}
-      data-size={size}
-      variant={variant}
-      className={cn(inputGroupButtonVariants({ size }), className)}
-      {...props}
-    />
-  );
-}
-
-function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupInput({
-  className,
-  ...props
-}: React.ComponentProps<"input">) {
-  return (
-    <Input
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function InputGroupTextarea({
-  className,
-  ...props
-}: React.ComponentProps<"textarea">) {
-  return (
-    <Textarea
-      data-slot="input-group-control"
-      className={cn(
-        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupText,
-  InputGroupInput,
-  InputGroupTextarea,
-};

package/src/components/ui/input.tsx

@@ -1,72 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const inputVariants = cva(
-  [
-    "placeholder:text-muted-foreground flex w-full px-4 py-2.5 text-base md:text-sm",
-    "data-invalid:ring-destructive/80 data-invalid:border-destructive",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "caret-primary shadow transition-[color,box-shadow]",
-  ],
-  {
-    variants: {
-      variant: {
-        // Turtle Design System - transparent input with no borders
-        default:
-          "bg-neutral-alpha-2 focus-visible:border-ring focus-visible:ring-ring/50 rounded-lg border border-none outline-none focus-visible:ring-2",
-        // Optional bordered version for other use cases
-        bordered:
-          "bg-neutral-alpha-2 border-border focus:border-primary focus:ring-primary/20 caret-primary rounded-lg border focus:ring-2",
-        // No focus variant - cursor color only, no focus styles
-        nofocus:
-          "rounded-none border-none bg-transparent focus:border-none focus:ring-0 focus:outline-none",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-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, type, prompt, ...props }, ref) => {
-    if (prompt) {
-      return (
-        <div className="flex items-center gap-2">
-          <span className="text-primary shrink-0 text-sm font-medium">
-            {prompt}
-          </span>
-          <input
-            type={type}
-            data-slot="input"
-            className={cn(inputVariants({ variant, className }))}
-            ref={ref}
-            {...props}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <input
-        type={type}
-        data-slot="control"
-        className={cn(inputVariants({ variant, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-
-Input.displayName = "Input";
-
-export { Input, inputVariants };

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

@@ -1,122 +0,0 @@
-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],
-              "rounded-full 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

@@ -1,24 +0,0 @@
-"use client";
-
-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 };