@codapet/design-system 0.8.1 → 0.8.3

package/AGENTS.md

@@ -100,7 +100,7 @@ These don't exist in shadcn — reach for them instead of building your own:
 The brand palette lives in CSS variables exposed as Tailwind colors. Use these, not `bg-blue-600`, `text-gray-500`, `border-red-300`, etc. — raw colors won't dark-mode correctly.
 
 - **Brand**: `brand-{subtle,light,normal,vibrant,dark}`, `brand-text-vibrant`. `primary` aliases `brand-normal`.
-- **Surfaces** (backgrounds): `gray-surface-{light,default,dark}`, `primary-surface-{subtle,light,default}`, `secondary-surface-default`, `sand-{subtle,light,normal,dark}`, `sage-{light,normal,dark}`, `rose-{light,normal,dark}`, `error-surface-{subtle,light,default,dark}`, `success-surface-{subtle,default}`, `warning-surface-{subtle,light}`.
+- **Surfaces** (backgrounds): `gray-surface-{light,default,dark}`, `primary-surface-{subtle,light,default}`, `secondary-surface-default`, `sand-{subtle,light,normal,dark}`, `sage-{light,normal,dark}`, `rose-{light,normal,dark}`, `error-surface-{subtle,light,default,dark}`, `error-destructive` (filled destructive buttons only), `success-surface-{subtle,default}`, `warning-surface-{subtle,light}`.
 - **Strokes** (borders): `gray-stroke-{light,default}`, `primary-stroke-default`, `secondary-stroke-{light,default}`, `error-stroke-{light,default}`, `success-stroke-light`, `warning-stroke-{default,dark}`, `sand-stroke-disabled`.
 - **Text**: `vibrant-text-{display,heading,body,details,white-darker}`, `secondary-text-dark`, `gray-subtle`, `foreground-secondary`, `destructive-text`.
 - **Icons**: `gray-icon-{subtle,light,default,dark}`, `icon-disabled`.

package/dist/index.mjs

@@ -255,7 +255,7 @@ var buttonVariants = cva3(
         "ghost-secondary": "text-foreground-secondary hover:bg-gray-surface-light hover:text-accent-foreground dark:hover:bg-accent/50 active:bg-gray-surface-default",
         "ghost-destructive": "bg-transparent text-destructive-text hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active",
         link: "text-foreground-secondary underline-offset-4 underline hover:bg-none active:bg-none hover:text-brand-vibrant",
-        destructive: "bg-error-surface-default text-primary-foreground hover:bg-red-800 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-error-surface-dark",
+        destructive: "bg-error-destructive text-primary-foreground hover:bg-red-800 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-error-surface-dark",
         "destructive-secondary": "bg-error-surface-light border border-error-stroke-light text-destructive-text hover:border-error-surface-default focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active",
         "destructive-tertiary": "bg-transparent border border-error-stroke-light text-destructive-text hover:bg-destructive-hover focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 active:bg-destructive-active"
       },
@@ -448,7 +448,8 @@ var textareaBaseStyles = [
   "border-gray-stroke-default bg-background",
   // Hover/Focus/Active states
   "hover:border-focus-ring",
-  "focus:border-focus-ring focus:ring-[1px] focus:ring-focus-ring",
+  "focus:border-focus-ring",
+  "focus-visible:border",
   "active:border-focus-ring",
   // Textarea specific
   "field-sizing-content min-h-16 resize-y px-3 py-2"
@@ -456,7 +457,8 @@ var textareaBaseStyles = [
 var errorStyles = [
   "border-error-stroke-default bg-background",
   "hover:border-error-stroke-default",
-  "focus:border-error-stroke-default focus:ring-[1px] focus:ring-error-stroke-default",
+  "focus:border-error-stroke-default",
+  "focus-visible:border",
   "active:border-error-stroke-default"
 ].join(" ");
 var Textarea = React6.forwardRef(
@@ -1076,15 +1078,15 @@ function Calendar({
         ),
         table: cn("w-full border-collapse", classNames?.table),
         weekdays: cn(
-          "flex items-center justify-start w-full gap-2",
+          "flex items-center justify-start w-full gap-2 ",
           classNames?.weekdays
         ),
         weekday: cn(
-          "text-muted-foreground font-medium rounded-full md:flex-1 size-6 mx-1 font-normal text-[0.8rem] select-none",
+          "text-muted-foreground  font-medium rounded-full md:flex-1 size-7 md:mx-1 font-normal text-[0.8rem] select-none",
           classNames?.weekday
         ),
         week: cn(
-          "flex w-full md:mt-2 mt-[2px]  items-center justify-start gap-1",
+          "flex w-full md:mt-2 mt-[2px]  items-center justify-start gap-2 ",
           classNames?.week
         ),
         week_number_header: cn(
@@ -1097,7 +1099,7 @@ function Calendar({
           classNames?.week_number
         ),
         day: cn(
-          "relative flex items-center justify-center md:w-full md:h-full p-0 text-center  group/day aspect-square select-none size-7 md:mx-0 mx-1  rounded-full",
+          "relative flex items-center justify-center   p-0 text-center  group/day aspect-square select-none size-7  md:mx-1 rounded-full",
           classNames?.day
         ),
         range_start: cn(" bg-accent", classNames?.range_start),
@@ -2272,7 +2274,7 @@ var inputVariants = cva8(
     // File input styles
     "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
     // Disabled styles
-    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60"
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 disabled:text-gray-icon-subtle"
   ],
   {
     variants: {
@@ -2304,12 +2306,14 @@ var Input = React22.forwardRef(
     const stateStyles = error ? [
       "border-error-stroke-default bg-background",
       "hover:border-error-stroke-default",
-      "focus:border-error-stroke-default focus:ring-[1px] focus:ring-error-stroke-default",
+      "focus:border-error-stroke-default",
+      "focus-visible:border",
       "active:border-error-stroke-default"
     ] : [
       "border-gray-stroke-default bg-background",
       "hover:border-focus-ring",
-      "focus:border-focus-ring focus:ring-[1px] focus:ring-focus-ring",
+      "focus:border-focus-ring",
+      "focus-visible:border",
       "active:border-focus-ring"
     ];
     if (leftIcon || rightIcon) {