@turtleclub/ui 0.7.0-beta.3 → 0.7.0-beta.30

package/src/components/ui/segment-control.tsx

@@ -69,6 +69,7 @@ export type SegmentControlProps<T extends string> = {
   items: {
     label: React.ReactNode;
     value: T;
+    disabled?: boolean;
   }[];
   cursorPointer?: boolean;
   className?: string;
@@ -129,8 +130,12 @@ export function SegmentControl<T extends string>({
             type="button"
             key={button.value}
             data-active={value === button.value}
-            className={tabVariants({ variant, size, cursorPointer })}
-            onClick={() => handleClick(button.value)}
+            disabled={button.disabled}
+            className={cn(
+              tabVariants({ variant, size, cursorPointer }),
+              button.disabled && "cursor-not-allowed opacity-50",
+            )}
+            onClick={() => !button.disabled && handleClick(button.value)}
           >
             {button.label}
           </button>

package/src/components/ui/slider.tsx

@@ -14,13 +14,8 @@ function Slider({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max],
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
+    [value, defaultValue, min, max]
   );
 
   return (
@@ -32,20 +27,20 @@ function Slider({
       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,
+        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",
+          "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",
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           )}
         />
       </SliderPrimitive.Track>
@@ -53,7 +48,7 @@ function Slider({
         <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"
+          className="bg-primary ring-primary/20 border-background block size-3 shrink-0 rounded-full border-2 ring-2 transition-[color,box-shadow] hover:ring-[6px] focus-visible:ring-[6px] focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>

package/src/index.ts

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

package/src/styles/globals.css

@@ -83,6 +83,10 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-chart-6: var(--chart-6);
+  --color-chart-7: var(--chart-7);
+  --color-chart-8: var(--chart-8);
+  --color-chart-9: var(--chart-9);
 
   --border-gradient-white: linear-gradient(
       175deg,

package/src/styles/themes/semantic.css

@@ -17,9 +17,7 @@
   /* Default theme: DARK (Turtle's primary brand experience) */
 
   /* Background colors */
-  --background: var(
-    --color-brand-black
-  ); /* #141514 - Dark background (default) */
+  --background: var(--color-brand-black); /* #141514 - Dark background (default) */
   --foreground: var(--color-brand-white); /* #F9F9F9 - Light text (default) */
 
   /* Card colors */
@@ -28,47 +26,31 @@
 
   /* Popover colors */
   --popover: var(--color-brand-black); /* #141514 - Dark popover */
-  --popover-foreground: var(
-    --color-brand-white
-  ); /* #F9F9F9 - Light popover text */
+  --popover-foreground: var(--color-brand-white); /* #F9F9F9 - Light popover text */
 
   /* Primary colors */
   --primary: var(--color-brand-green); /* #73F36C - Primary brand color */
-  --primary-foreground: var(
-    --color-brand-black
-  ); /* #141514 - Black text on green */
+  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
 
   /* Secondary colors */
-  --secondary: var(
-    --color-neutral-base-800
-  ); /* #262626 - 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-base-850); /* #191A19 - Subtle overlay */
-  --muted-foreground: var(
-    --color-neutral-alpha-50
-  ); /* #FFFFFF80 - Muted text */
+  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
 
   /* Accent colors */
   --accent: var(--color-brand-green); /* #73F36C - Accent color */
-  --accent-foreground: var(
-    --color-brand-black
-  ); /* #141514 - Black text on green */
+  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
 
   /* Destructive colors */
   --destructive: var(--color-error); /* #EF4444 - Error/destructive */
-  --destructive-foreground: var(
-    --color-brand-white
-  ); /* #F9F9F9 - Light text on red */
+  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
 
   /* Border and input colors */
-  --border: var(
-    --color-neutral-alpha-10
-  ); /* #F9F9F91A - Light borders on dark */
-  --input: var(
-    --color-neutral-alpha-2
-  ); /* #F9F9F905 - Subtle input background */
+  --border: var(--color-neutral-alpha-10); /* #F9F9F91A - Light borders on dark */
+  --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
   --ring: var(--color-brand-green); /* #73F36C - Focus ring */
 
   --sidebar: var(--color-neutral-base-850);
@@ -78,11 +60,15 @@
   --radius: var(--radius-turtle); /* 16px - Default border radius */
 
   /* ===== CHART COLORS (FOR DATA VISUALIZATION) ===== */
-  --chart-1: var(--color-brand-green); /* Primary chart color */
-  --chart-2: var(--color-info); /* Secondary chart color */
-  --chart-3: var(--color-warning); /* Tertiary chart color */
-  --chart-4: var(--color-error); /* Quaternary chart color */
-  --chart-5: var(--color-success); /* Quinary chart color */
+  --chart-1: oklch(0.75 0.17 164); /* Emerald */
+  --chart-2: oklch(0.72 0.14 200); /* Cyan */
+  --chart-3: oklch(0.56 0.18 272); /* Indigo */
+  --chart-4: oklch(0.68 0.13 192); /* Teal */
+  --chart-5: oklch(0.72 0.18 350); /* Pink */
+  --chart-6: oklch(0.75 0.15 75); /* Amber */
+  --chart-7: oklch(0.7 0.14 230); /* Sky */
+  --chart-8: oklch(0.62 0.02 60); /* Stone */
+  --chart-9: oklch(0.58 0.02 240); /* Slate */
 }
 
 /* ===== LIGHT THEME ===== */
@@ -99,17 +85,11 @@
 
   /* Popover colors */
   --popover: var(--color-brand-white); /* #F9F9F9 - Light popover */
-  --popover-foreground: var(
-    --color-brand-black
-  ); /* #141514 - Dark popover text */
+  --popover-foreground: var(--color-brand-black); /* #141514 - Dark popover text */
 
   /* Primary colors */
-  --primary: var(
-    --color-brand-green
-  ); /* #73F36C - Same green (brand consistency) */
-  --primary-foreground: var(
-    --color-brand-black
-  ); /* #141514 - Black text on green */
+  --primary: var(--color-brand-green); /* #73F36C - Same green (brand consistency) */
+  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
 
   /* Secondary colors */
   --secondary: var(--color-neutral-alpha-10); /* #F9F9F91A - Light overlay */
@@ -117,29 +97,19 @@
 
   /* Muted colors */
   --muted: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle overlay */
-  --muted-foreground: var(
-    --color-neutral-alpha-50
-  ); /* #FFFFFF80 - Muted text */
+  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
 
   /* Accent colors */
   --accent: var(--color-brand-green); /* #73F36C - Same accent */
-  --accent-foreground: var(
-    --color-brand-black
-  ); /* #141514 - Black text on green */
+  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
 
   /* Destructive colors */
   --destructive: var(--color-error); /* #EF4444 - Same error color */
-  --destructive-foreground: var(
-    --color-brand-white
-  ); /* #F9F9F9 - Light text on red */
+  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
 
   /* Border and input colors */
-  --border: var(
-    --color-neutral-alpha-dark-10
-  ); /* #1415141A - Dark borders on light */
-  --input: var(
-    --color-neutral-alpha-2
-  ); /* #F9F9F905 - Subtle input background */
+  --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);