@turtleclub/ui 0.3.0-beta.9 → 0.3.0

package/src/components/ui/slider.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max]
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-secondary relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-border bg-foreground ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

package/src/components/ui/switch.tsx

@@ -1,17 +1,14 @@
-import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Switch({
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer group data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 border-border inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -19,11 +16,11 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "bg-muted-foreground dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
         )}
       />
     </SwitchPrimitive.Root>
-  )
+  );
 }
 
-export { Switch }
+export { Switch };

package/src/components/ui/{table-shad.tsx → table-shadcn.tsx}

@@ -1,53 +1,40 @@
-import * as React from "react"
+"use client";
 
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 function Table({ className, ...props }: React.ComponentProps<"table">) {
   return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn(
+          "w-full caption-bottom text-sm",
+          "border-separate border-spacing-y-2",
+          className
+        )}
         {...props}
       />
     </div>
-  )
+  );
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
+  return <thead data-slot="table-header" className={cn(className)} {...props} />;
 }
 
 function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
+  return <tbody data-slot="table-body" className={cn("", className)} {...props} />;
 }
 
 function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
+      className={cn("border-t font-medium [&>tr]:last:border-b-0", className)}
       {...props}
     />
-  )
+  );
 }
 
 function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
@@ -55,12 +42,12 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        'hover:[&>[data-slot="table-cell"]]:bg-neutral-alpha-5 data-[state=selected]:bg-neutral-alpha-10 transition-colors',
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
 function TableHead({ className, ...props }: React.ComponentProps<"th">) {
@@ -69,37 +56,36 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
       data-slot="table-head"
       className={cn(
         "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "text-xs",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+function ShadTableCell({ className, ...props }: React.ComponentProps<"td">) {
   return (
     <td
       data-slot="table-cell"
       className={cn(
         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "first:rounded-l-full first:pl-4 last:rounded-r-full last:pr-4 bg-neutral-alpha-2",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
   return (
     <caption
       data-slot="table-caption"
       className={cn("text-muted-foreground mt-4 text-sm", className)}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -109,6 +95,6 @@ export {
   TableFooter,
   TableHead,
   TableRow,
-  TableCell,
+  ShadTableCell,
   TableCaption,
-}
+};

package/src/components/ui/table.tsx

@@ -1,4 +1,5 @@
 "use client";
+
 import React, { useState } from "react";
 import { cn } from "@/lib/utils";
 
@@ -69,7 +70,7 @@ export function ManagedTable<T>({
               <th
                 key={column.name}
                 className={cn(
-                  "px-3 py-1 text-left text-xs font-normal text-muted-foreground h-6",
+                  "text-muted-foreground h-6 px-3 py-1 text-left text-xs font-normal",
                   column.comparator && "cursor-pointer select-none"
                 )}
                 onClick={() => column.comparator && handleSort(column.name)}
@@ -102,7 +103,7 @@ interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
 
 export function TableCell({ children, className, ...props }: TableCellProps) {
   return (
-    <td className={cn("p-2 align-middle text-foreground", className)} {...props}>
+    <td className={cn("text-foreground p-2 align-middle", className)} {...props}>
       {children}
     </td>
   );

package/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="control"
+      className={cn(
+        "bg-neutral-alpha-2 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border border-none px-4 py-2.5 text-base md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 transition-[color,box-shadow] outline-none focus-visible:ring-2",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "caret-primary shadow",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/components/ui/tooltip.tsx

@@ -30,25 +30,29 @@ function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimiti
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  sideOffset = 2,
+  gradient,
   children,
+  container = document.querySelector(".turtle-widget-root") ?? document.body,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+  gradient?: "primary" | "white";
+  container?: HTMLElement;
+}) {
   return (
-    <TooltipPrimitive.Portal
-      container={document.querySelectorAll(".turtle-widget-root")[0] ?? undefined}
-    >
+    <TooltipPrimitive.Portal container={container}>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 bg-neutral-alpha-10 border-border z-50 origin-(--radix-tooltip-content-transform-origin) rounded-lg border p-2 backdrop-blur-lg transition-all",
+          gradient === "primary" && "border-gradient-primary",
+          gradient === "white" && "border-gradient-white",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface UseIsMobileReturn {
+  isMobile: boolean;
+  isLoading: boolean;
+}
+
+export const useIsMobile = (): UseIsMobileReturn => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const checkIsMobile = () => {
+      // Check using media query
+      const mediaQuery = window.matchMedia("(max-width: 768px)");
+
+      // Check using user agent (additional detection)
+      const userAgent = navigator.userAgent.toLowerCase();
+      const mobileKeywords = [
+        "android",
+        "webos",
+        "iphone",
+        "ipad",
+        "ipod",
+        "blackberry",
+        "windows phone",
+        "mobile",
+      ];
+
+      const isMobileUA = mobileKeywords.some((keyword) => userAgent.includes(keyword));
+
+      // Combine both checks - prioritize media query but consider user agent
+      const isMobileDevice = mediaQuery.matches || (isMobileUA && window.innerWidth <= 768);
+
+      setIsMobile(isMobileDevice);
+      setIsLoading(false);
+    };
+
+    // Initial check
+    checkIsMobile();
+
+    // Listen for media query changes
+    const mediaQuery = window.matchMedia("(max-width: 768px)");
+    const handleChange = () => checkIsMobile();
+
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+    } else {
+      // Fallback for older browsers
+      mediaQuery.addListener(handleChange);
+    }
+
+    // Listen for window resize
+    window.addEventListener("resize", checkIsMobile);
+
+    return () => {
+      if (mediaQuery.removeEventListener) {
+        mediaQuery.removeEventListener("change", handleChange);
+      } else {
+        mediaQuery.removeListener(handleChange);
+      }
+      window.removeEventListener("resize", checkIsMobile);
+    };
+  }, []);
+
+  return {
+    isMobile,
+    isLoading,
+  };
+};
+
+export default useIsMobile;

package/src/index.ts

@@ -2,6 +2,8 @@
 // Re-export components
 export * from "./components/ui";
 export * from "./components/molecules";
+export * from "./components/icons";
+export * from "./components/features";
 
 // Re-export utilities
 export * from "./lib/utils";

package/src/styles/globals.css

@@ -1,6 +1,6 @@
 /**
  * Turtle Design System - Global Styles
- * 
+ *
  * This is the main entry point for the Turtle Design System.
  * It imports our complete token-based theming architecture and
  * provides base styles for all components.
@@ -17,16 +17,21 @@
 @custom-variant dark (&:is(.dark *));
 
 /* ===== TAILWIND THEME INTEGRATION ===== */
-/* 
+/*
  * This section maps our semantic variables to Tailwind's color system
  * so we can use classes like bg-background, text-foreground, etc.
  */
-@theme inline {
+@theme static {
+  --default-font-family: "DM Sans", sans-serif;
+
   /* Border radius mapping */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-xs: calc(var(--radius) - 16px);
+  --radius-sm: calc(var(--radius) - 8px);
+  --radius-md: calc(var(--radius) - 4px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-full: calc(infinity * 1px);
   --radius-turtle: var(--radius-turtle);
   --radius-info-card: var(--radius-info-card);
 
@@ -47,32 +52,94 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--primary);
+  --color-sidebar-primary-foreground: var(--primary-foreground);
+  --color-sidebar-accent: var(--accent);
+  --color-sidebar-accent-foreground: var(--accent-foreground);
+  --color-sidebar-border: var(--border);
+  --color-sidebar-ring: var(--ring);
+
+  --color-neutral-alpha-2: var(--color-neutral-alpha-2);
+  --color-neutral-alpha-5: var(--color-neutral-alpha-5);
+  --color-neutral-alpha-10: var(--color-neutral-alpha-10);
+  --color-neutral-alpha-20: var(--color-neutral-alpha-20);
+  --color-neutral-alpha-30: var(--color-neutral-alpha-30);
+  --color-neutral-alpha-50: var(--color-neutral-alpha-50);
+
+  --color-primary-alpha-10: var(--color-brand-green-alpha-10);
+  --color-primary-alpha-20: var(--color-brand-green-alpha-20);
+  --color-primary-alpha-30: var(--color-brand-green-alpha-30);
+  --color-primary-alpha-50: var(--color-brand-green-alpha-50);
+
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+
+  --border-gradient-white: linear-gradient(
+      175deg,
+      var(--color-neutral-alpha-50) 0%,
+      var(--color-neutral-alpha-5) 40%,
+      var(--color-neutral-alpha-2) 62%,
+      var(--color-neutral-alpha-20) 100%
+    )
+    border-box;
+  --border-gradient-soft: linear-gradient(
+      165deg,
+      var(--color-neutral-alpha-20) 0%,
+      var(--color-neutral-alpha-2) 40%,
+      var(--color-neutral-alpha-2) 62%,
+      var(--color-neutral-alpha-5) 100%
+    )
+    border-box;
+  --border-gradient-primary: linear-gradient(
+      175deg,
+      var(--color-primary-alpha-50) 0%,
+      var(--color-primary-alpha-20) 40%,
+      var(--color-primary-alpha-10) 62%,
+      var(--color-primary-alpha-30) 100%
+    )
+    border-box;
+  --border-gradient-accent: linear-gradient(
+      to bottom,
+      var(--color-primary) 0%,
+      var(--color-primary-alpha-50) 30%,
+      var(--color-primary-alpha-20) 70%,
+      var(--color-primary-alpha-10) 100%
+    )
+    border-box;
 }
 
-/* ===== BASE STYLES ===== */
-@layer base {
-  /* Universal border and outline styles */
-  * {
-    @apply border-border outline-ring/50;
-  }
+@utility border-gradient-* {
+  @apply relative border border-transparent;
 
-  /* HTML and body setup */
-  html,
-  body {
-    @apply size-full font-sans antialiased;
+  &::before {
+    content: "";
+    @apply pointer-events-none absolute -inset-px border border-transparent;
+    border-radius: inherit; /* match rounded-* from parent */
+    background: --value(--border-gradient-*); /* gradient from utility */
+    -webkit-mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+      linear-gradient(#fff 0 0) padding-box,
+      linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
   }
+}
 
-  /* Body styling with semantic variables */
-  body {
-    @apply bg-background text-foreground;
+@layer base {
+  * {
+    @apply selection:text-primary-foreground selection:bg-primary;
   }
 }
 
@@ -89,11 +156,11 @@
   }
 
   .managed-table thead tr th {
-    @apply text-xs py-1 px-3 text-muted-foreground h-6 font-normal;
+    @apply text-muted-foreground h-6 px-3 py-1 text-xs font-normal;
   }
 
   .managed-table tbody tr > td {
-    @apply font-normal h-[38px] lg:py-1 bg-muted/5;
+    @apply bg-muted/5 h-[38px] font-normal lg:py-1;
   }
 
   .managed-table tbody tr > td:first-child {

package/src/styles/themes/semantic.css

@@ -1,10 +1,10 @@
 /**
  * Turtle Design System - Semantic Theme Variables
- * 
+ *
  * This file maps our core design tokens to the semantic variables
  * expected by shadcn/ui components. This is the bridge between our
  * brand identity and the component API.
- * 
+ *
  * All shadcn/ui components use these semantic variables, making them
  * fully themeable while maintaining our brand consistency.
  */
@@ -33,11 +33,11 @@
   --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
 
   /* Secondary colors */
-  --secondary: var(--color-neutral-alpha-10); /* #F9F9F91A - Light overlay on dark */
+  --secondary: var(--color-neutral-base-800); /* #262626 - Light overlay on dark */
   --secondary-foreground: var(--color-brand-white); /* #F9F9F9 - Light text */
 
   /* Muted colors */
-  --muted: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle overlay */
+  --muted: var(--color-neutral-base-850); /* #191A19 - Subtle overlay */
   --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
 
   /* Accent colors */
@@ -53,8 +53,11 @@
   --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
   --ring: var(--color-brand-green); /* #73F36C - Focus ring */
 
+  --sidebar: var(--color-neutral-base-850);
+  --sidebar-foreground: var(--color-brand-white);
+
   /* ===== SEMANTIC SPACING MAPPING ===== */
-  --radius: var(--radius-default); /* 10px - Default border radius */
+  --radius: var(--radius-turtle); /* 16px - Default border radius */
 
   /* ===== CHART COLORS (FOR DATA VISUALIZATION) ===== */
   --chart-1: var(--color-brand-green); /* Primary chart color */
@@ -104,4 +107,7 @@
   --border: var(--color-neutral-alpha-dark-10); /* #1415141A - Dark borders on light */
   --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
   --ring: var(--color-brand-green); /* #73F36C - Same focus ring */
+
+  --sidebar: var(--color-neutral-base-850);
+  --sidebar-foreground: var(--color-brand-white);
 }