cooterlabs 2.1.0 → 2.2.0

package/bin/index.js

@@ -212,7 +212,7 @@ const THEMES = {
   --color-secondary-foreground: #1c222a;
   --color-muted: #e7e9ec;
   --color-muted-foreground: #475569;
-  --color-accent: #f1f3f3;
+  --color-accent: #0F3D3E;
   --color-accent-foreground: #0a2b2b;
   --color-destructive: #821717;
   --color-destructive-foreground: #ffffff;
@@ -289,6 +289,7 @@ const THEMES = {
   --color-info-700: #053e5d;
   --color-info-800: #04314a;
   --color-info-900: #032435;
+  --color-disabled: #7e8896
 
   /* Typography — Aeon text ramp (text-h1 … text-c3, text-label, text-btn-*) */
   --text-h1: 3rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cooterlabs",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Component library CLI for CooterLabs apps",
   "files": [
     "bin",

package/templates/alert/alert.tsx

@@ -69,7 +69,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
                 ref={ref}
                 role="alert"
                 className={cn(
-                    "group relative overflow-hidden rounded-xs p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&>svg~*]:pl-8",
+                    "group relative overflow-hidden rounded-md p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-5 [&>svg~*]:pl-8",
                     alertVariants[variant][severity],
                     position && alertPositions[position],
                     dismissible && "pr-12",

package/templates/button-group/button-group.tsx

@@ -72,7 +72,7 @@ const ButtonGroupItem = React.forwardRef<
                 onClick?.(event)
             }}
             className={cn(
-                "-ml-px inline-flex items-center justify-center whitespace-nowrap border border-primary font-semibold transition-colors first:-ml-0 first:rounded-l-xs last:rounded-r-xs focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:text-grey-400 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
+                "-ml-px inline-flex items-center justify-center whitespace-nowrap border border-primary font-semibold transition-colors first:-ml-0 first:rounded-l-md last:rounded-r-md focus-visible:z-10 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:border-grey-200 disabled:text-grey-400 [&_svg]:size-[1.25em] [&_svg]:shrink-0",
                 iconOnly ? iconOnlySizes[ctx.size] : buttonGroupItemSizes[ctx.size],
                 selected
                     ? "z-10 bg-primary text-primary-foreground"

package/templates/tabs/tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
     <TabsPrimitive.List
         ref={ref}
         className={cn(
-            "inline-flex items-center justify-center gap-1 rounded-xs bg-secondary p-1",
+            "inline-flex items-center justify-center gap-1 rounded-full bg-secondary p-2",
             className
         )}
         {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
     <TabsPrimitive.Trigger
         ref={ref}
         className={cn(
-            "inline-flex h-10 items-center justify-center whitespace-nowrap rounded-xxs px-4 text-b4 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-grey-400 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-100",
+            "inline-flex h-10 items-center justify-center whitespace-nowrap rounded-full px-4 text-b4 text-accent transition-colors hover:text-foreground hover:bg-primary-50 focus-visible:outline-none focus-visible:shadow-focus disabled:pointer-events-none disabled:text-disabled data-[state=active]:bg-primary-500 data-[state=active]:text-white data-[state=active]:shadow-100",
             className
         )}
         {...props}