@kushagradhawan/kookie-ui 0.1.37 → 0.1.39

package/src/styles/tokens/constants.css

@@ -14,22 +14,22 @@
   --surface-opacity-light: var(--opacity-5);
   --surface-opacity-heavy: var(--opacity-6);
   --surface-opacity-dark: var(--opacity-7);
-    
+
   /* Dialog background opacity constants (stronger than panel) */
   --dialog-opacity: var(--opacity-9);
   --dialog-opacity-percentage: calc(var(--dialog-opacity) * 100%);
-    
+
   /* Panel background opacity constants */
   --panel-opacity: var(--opacity-8);
   --panel-opacity-percentage: calc(var(--panel-opacity) * 100%);
-  
+
   /* Surface background opacity constants */
   --surface-opacity: var(--opacity-7);
   --surface-opacity-percentage: calc(var(--surface-opacity) * 100%);
-  
+
   /* Standard border width constants */
   --border-width-standard: 1px;
-  
+
   /* Classic variant 3D effect constants - simplified for button-like components */
   --classic-elevation-offset: -0.02em;
   --classic-active-padding-offset-1: 0.5px;
@@ -39,53 +39,56 @@
   --classic-border-width-thick: 0.05em;
   --classic-shadow-offset-y: 0.04em;
   --classic-word-spacing: -0.1em;
-  
+
   /* Classic variant division factors for form components and inset effects */
   --classic-elevation-factor-subtle: 3;
   --classic-shadow-factor-light: 1.5;
   --classic-border-multiplier-double: 2;
-  
+
   /* Complex shadow tokens for form components and inset effects */
   --classic-shadow-blur-medium: 0.2em;
   --classic-shadow-blur-large: 0.4em;
   --classic-shadow-medium-factor-third: 3;
-  
+
   /* Classic inset shadow tokens - based on text field pattern for consistent 3D effects */
   --classic-inset-shadow-dark:
-    inset 0 var(--classic-border-width) calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4),
+    inset 0 var(--classic-border-width)
+      calc(var(--classic-shadow-blur-small) / var(--classic-shadow-factor-light)) var(--gray-a4),
     inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a2),
-    inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double)) calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third)) var(--gray-a3),
+    inset 0 calc(var(--classic-border-width) * var(--classic-border-multiplier-double))
+      calc(var(--classic-shadow-blur-medium) / var(--classic-shadow-medium-factor-third))
+      var(--gray-a3),
     0 0 0 var(--classic-border-width) var(--gray-a5);
-  
+
   /* Trigger icon size constants (for dropdowns, selects) */
   --trigger-icon-size-default: 9px;
   --trigger-icon-size-1: 10px;
   --trigger-icon-size-2: 11px;
   --trigger-icon-size-3: 11px;
   --trigger-icon-size-4: 12px;
-  
+
   /* Content icon size constants (for buttons, menu items) */
   --content-icon-size-1: calc(var(--space-5) * 0.55);
   --content-icon-size-2: calc(var(--space-6) * 0.525);
   --content-icon-size-3: calc(var(--space-7) * 0.5125);
   --content-icon-size-4: calc(var(--space-8) * 0.5);
-  
+
   /* Indicator icon size constants (for checkboxes, radio, sub-triggers) */
   --indicator-icon-size-1: calc(9px * var(--scaling));
   --indicator-icon-size-2: calc(10px * var(--scaling));
   --indicator-icon-size-3: calc(12px * var(--scaling));
-  
+
   /* Select-specific indicator icon sizes */
   --select-indicator-icon-size-1: calc(8px * var(--scaling));
   --select-indicator-icon-size-2: calc(10px * var(--scaling));
   --select-indicator-icon-size-3: calc(10px * var(--scaling));
-  
+
   /* Select component specific constants */
   --select-item-indicator-width-factor: 1.2;
-  
+
   /* Separator constants */
   --separator-height-thin: 1px;
-  
+
   /* Progress and Slider component constants */
   --progress-default-duration: 5s;
   --progress-animation-delay-start: 5s;
@@ -95,27 +98,27 @@
   --progress-shine-width-multiplier: 4;
   --progress-gradient-stop-start: 25%;
   --progress-gradient-stop-end: 75%;
-  
+
   /* Progress animation scale values */
   --progress-scale-initial: 0.01;
   --progress-scale-step-1: 0.1;
   --progress-scale-step-2: 0.6;
   --progress-scale-step-3: 0.9;
   --progress-scale-final: 1;
-  
+
   /* Progress animation timing percentages */
   --progress-timing-step-1: 20%;
   --progress-timing-step-2: 30%;
   --progress-timing-step-3: 40%;
   --progress-timing-step-4: 50%;
-  
+
   /* Slider component constants */
   --slider-thumb-hit-area-multiplier: 2;
   --slider-thumb-inset-factor: 0.25;
   --slider-focus-ring-inner: 3px;
   --slider-focus-ring-outer: 5px;
   --slider-classic-inset-offset: 1.5px;
-  
+
   /* Shared Progress and Slider sizing tokens */
   --progress-slider-height-1: var(--space-1);
   --progress-slider-height-2: calc(var(--space-1) * 1.5);
@@ -128,7 +131,7 @@
   /* --progress-slider-height-7: var(--space-7); */
   /* --progress-slider-height-8: var(--space-8); */
   /* --progress-slider-height-9: var(--space-9); */
-  
+
   /* Shared Progress and Slider radius tokens */
   --progress-slider-radius-1: var(--radius-1);
   --progress-slider-radius-2: var(--radius-2);
@@ -141,50 +144,50 @@
   /* --progress-slider-radius-7: max(var(--radius-3), var(--radius-full)); */
   /* --progress-slider-radius-8: max(var(--radius-4), var(--radius-full)); */
   /* --progress-slider-radius-9: max(var(--radius-5), var(--radius-full)); */
-  
+
   /* Size multipliers */
   --size-multiplier-small: 0.75;
   --size-multiplier-large: 1.25;
-  
+
   /* Opacity constants - using new opacity tokens */
   --opacity-disabled: var(--opacity-5);
   --opacity-soft-variant: var(--opacity-8);
   --opacity-high-contrast: var(--opacity-8);
-  
+
   /* Positioning constants */
   --position-center: 50%;
   --position-full: 100%;
   --position-negative-full: -100%;
   --position-zero: 0%;
-  
+
   /* Transition constants */
   --transition-background-blur: background-color var(--duration-2) var(--ease-1);
 
   /* Sheet animation constants */
   --sheet-slide-distance: 50%;
-  
+
   /* Spacing multipliers for component sizing */
   --spacing-multiplier-small: 0.5;
   --spacing-multiplier-medium: 0.75;
   --spacing-multiplier-large: 1.25;
-  
+
   /* Component gap spacing constants (shared between Button, Select, etc.) */
   --component-gap-1: var(--space-1);
-  --component-gap-2: var(--space-2);
-  --component-gap-3: var(--space-3);
-  --component-gap-4: var(--space-3);
-  
+  --component-gap-2: var(--space-1);
+  --component-gap-3: var(--space-2);
+  --component-gap-4: var(--space-2);
+
   /* Ghost variant gap constants */
   --component-gap-ghost-1: var(--space-1);
   --component-gap-ghost-2: calc(var(--space-1) * 1.5);
   --component-gap-ghost-3: var(--space-2);
   --component-gap-ghost-4: var(--space-2);
-  
+
   /* Focus outline constants */
   --focus-outline-width: 2px;
   --focus-outline-offset: 2px;
   --focus-outline-offset-inset: -1px;
-  
+
   /* Component padding relationships */
   --padding-ratio-horizontal: 1.5;
-} 
+}

package/src/styles/tokens/radius.css

@@ -13,6 +13,9 @@
   
   /*  */
   --radius-9: calc(32px * var(--scaling) * var(--radius-factor));
+  --radius-10: calc(40px * var(--scaling) * var(--radius-factor));
+  --radius-11: calc(48px * var(--scaling) * var(--radius-factor));
+  --radius-12: calc(56px * var(--scaling) * var(--radius-factor));
 }
 
 

package/src/styles/tokens/shadow.css

@@ -1,116 +1,98 @@
 /* prettier-ignore */
 :where(.radix-themes) {
   --shadow-1:
-    inset 0 0 0 1px var(--gray-a5),
-    inset 0 1px 1px 0 var(--gray-a2),
+    0 0 0 0.25px var(--gray-a6),
     inset 0 1px 1px 0 var(--black-a2);
 
   --shadow-2:
-    0 0 0 0.5px var(--gray-a2),
-    0 0 0 0.5px var(--black-a1),
-    0 1px 1px 0 var(--gray-a2),
-    0 2px 1px -1px var(--black-a1),
-    0 1px 4px 0 var(--black-a1);
+    0 0 0 0.25px var(--gray-a6),
+    0 1px 3px 0 var(--black-a2),
+    0 1px 2px -1px var(--black-a2);
 
   --shadow-3:
-    0 0 0 0.5px var(--gray-a2),
-    0 2px 3px -2px var(--gray-a3),
-    0 3px 12px -4px var(--black-a2),
-    0 4px 16px -8px var(--black-a2);
+    0 0 0 0.25px var(--gray-a6),
+    0 4px 6px -1px var(--black-a2),
+    0 2px 4px -2px var(--black-a2);
 
   --shadow-4:
-    0 0 0 0.5px var(--gray-a2),
-    0 8px 40px var(--black-a1),
-    0 12px 32px -16px var(--gray-a3);
+    0 0 0 0.5px var(--gray-a6),
+    0 10px 15px -3px var(--black-a3),
+    0 4px 6px -4px var(--black-a3);
 
   --shadow-5:
-    0 0 0 0.5px var(--gray-a2),
-    0 12px 60px var(--black-a3),
-    0 12px 32px -16px var(--gray-a5);
+    0 0 0 0.5px var(--gray-a6),
+    0 20px 25px -5px var(--black-a3),
+    0 8px 10px -6px var(--black-a3);
 
   --shadow-6:
-    0 0 0 0.5px var(--gray-a2),
-    0 12px 60px var(--black-a3),
-    0 16px 64px var(--gray-a2),
-    0 16px 36px -20px var(--gray-a7);
+    0 0 0 0.5px var(--gray-a6),
+    0 25px 50px -12px var(--black-a5);
 }
 
 /* prettier-ignore */
 @supports (color: color-mix(in oklab, white, black)) {
   :where(.radix-themes) {
     --shadow-1:
-      inset 0 0 0 1px var(--gray-a5),
-      inset 0 1px 1px 0 var(--gray-a2),
+      0 0 0 0.25px var(--gray-a6),
       inset 0 1px 1px 0 var(--black-a2);
 
     --shadow-2:
-      0 0 0 0.5px var(--gray-a2),
-      0 0 0 0.5px var(--black-a1),
-      0 1px 1px 0 var(--gray-a2),
-      0 2px 1px -1px var(--black-a1),
-      0 1px 4px 0 var(--black-a1);
+      0 0 0 0.25px var(--gray-a6),
+      0 1px 3px 0 var(--black-a2),
+      0 1px 2px -1px var(--black-a2);
 
     --shadow-3:
-      0 0 0 0.5px var(--gray-a2),
-      0 2px 3px -2px var(--gray-a3),
-      0 3px 12px -4px var(--black-a2),
-      0 4px 16px -8px var(--black-a2);
+      0 0 0 0.25px var(--gray-a6),
+      0 4px 6px -1px var(--black-a2),
+      0 2px 4px -2px var(--black-a2);
 
     --shadow-4:
-      0 0 0 0.5px var(--gray-a2),
-      0 8px 40px var(--black-a1),
-      0 12px 32px -16px var(--gray-a3);
+      0 0 0 0.5px var(--gray-a6),
+      0 10px 15px -3px var(--black-a3),
+      0 4px 6px -4px var(--black-a3);
 
     --shadow-5:
-      0 0 0 0.5px var(--gray-a2),
-      0 12px 60px var(--black-a3),
-      0 12px 32px -16px var(--gray-a5);
+      0 0 0 0.5px var(--gray-a6),
+      0 20px 25px -5px var(--black-a3),
+      0 8px 10px -6px var(--black-a3);
 
     --shadow-6:
-      0 0 0 0.5px var(--gray-a2),
-      0 12px 60px var(--black-a3),
-      0 16px 64px var(--gray-a2),
-      0 16px 36px -20px var(--gray-a7);
+      0 0 0 0.5px var(--gray-a6),
+      0 25px 50px -12px var(--black-a5);
   }
 }
 
 /* prettier-ignore */
 :is(.dark, .dark-theme),
 :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  
   --shadow-1:
-    inset 0 -1px 0.5px 0 var(--gray-a3),
-    inset 0 0 0 1px var(--gray-a3),
-    inset 0 2px 2px 0 var(--black-a5),
-    inset 0 0 0 1px var(--gray-a5);
+    inset 0 0 0 0.5px var(--gray-a6),
+    inset 0 1px 1px 0 var(--black-a3);
 
   --shadow-2:
-    0 0 0 0.5px var(--gray-a5),
-    0 0 0 0.5px var(--black-a3),
-    0 1px 1px 0 var(--black-a6),
-    0 2px 1px -1px var(--black-a6),
-    0 1px 4px 0 var(--black-a5);
+    0 0 0 0.5px var(--gray-a6),
+    0 1px 3px 0 var(--black-a3),
+    0 1px 2px -1px var(--black-a3);
 
   --shadow-3:
-    0 0 0 0.5px var(--gray-a5),
-    0 2px 3px -2px var(--black-a3),
-    0 3px 8px -2px var(--black-a6),
-    0 4px 12px -4px var(--black-a7);
+    0 0 0 0.5px var(--gray-a6),
+    0 4px 6px -1px var(--black-a3),
+    0 2px 4px -2px var(--black-a3);
 
   --shadow-4:
-    0 0 0 0.5px var(--gray-a5),
-    0 8px 40px var(--black-a3),
-    0 12px 32px -16px var(--black-a5);
+    0 0 0 0.5px var(--gray-a6),
+    0 10px 15px -3px var(--black-a3),
+    0 4px 6px -4px var(--black-a3);
 
   --shadow-5:
-    0 0 0 0.5px var(--gray-a5),
-    0 12px 60px var(--black-a5),
-    0 12px 32px -16px var(--black-a7);
+    0 0 0 0.5px var(--gray-a6),
+    0 20px 25px -5px var(--black-a3),
+    0 8px 10px -6px var(--black-a3);
 
   --shadow-6:
-    0 0 0 0.5px var(--gray-a5),
-    0 12px 60px var(--black-a5),
-    0 16px 64px var(--black-a6),
-    0 16px 36px -20px var(--black-a11);
+    0 0 0 0.5px var(--gray-a6),
+    0 25px 50px -12px var(--black-a5);
 }
 
 /* prettier-ignore */
@@ -118,38 +100,31 @@
   :is(.dark, .dark-theme),
   :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
     --shadow-1:
-      inset 0 -1px 0.5px 0 var(--gray-a3),
-      inset 0 0 0 1px var(--gray-a3),
-      inset 0 2px 2px 0 var(--black-a5),
-      inset 0 0 0 1px var(--gray-a5);
+      inset 0 0 0 0.5px var(--gray-a6),
+      inset 0 1px 1px 0 var(--black-a3);
 
     --shadow-2:
-      0 0 0 0.5px var(--gray-a5),
-      0 0 0 0.5px var(--black-a3),
-      0 1px 1px 0 var(--black-a6),
-      0 2px 1px -1px var(--black-a6),
-      0 1px 4px 0 var(--black-a5);
+      0 0 0 0.5px var(--gray-a6),
+      0 1px 3px 0 var(--black-a3),
+      0 1px 2px -1px var(--black-a3);
 
     --shadow-3:
-      0 0 0 0.5px var(--gray-a5),
-      0 2px 3px -2px var(--black-a3),
-      0 3px 8px -2px var(--black-a6),
-      0 4px 12px -4px var(--black-a7);
+      0 0 0 0.5px var(--gray-a6),
+      0 4px 6px -1px var(--black-a3),
+      0 2px 4px -2px var(--black-a3);
 
     --shadow-4:
-      0 0 0 0.5px var(--gray-a5),
-      0 8px 40px var(--black-a3),
-      0 12px 32px -16px var(--black-a5);
+      0 0 0 0.5px var(--gray-a6),
+      0 10px 15px -3px var(--black-a3),
+      0 4px 6px -4px var(--black-a3);
 
     --shadow-5:
-      0 0 0 0.5px var(--gray-a5),
-      0 12px 60px var(--black-a5),
-      0 12px 32px -16px var(--black-a7);
+      0 0 0 0.5px var(--gray-a6),
+      0 20px 25px -5px var(--black-a3),
+      0 8px 10px -6px var(--black-a3);
 
     --shadow-6:
-      0 0 0 0.5px var(--gray-a5),
-      0 12px 60px var(--black-a5),
-      0 16px 64px var(--black-a6),
-      0 16px 36px -20px var(--black-a11);
+      0 0 0 0.5px var(--gray-a6),
+      0 25px 50px -12px var(--black-a5);
   }
-}
+}

package/src/styles/tokens/space.css

@@ -14,4 +14,7 @@
 
   /*  */
   --space-9: calc(64px * var(--scaling));
+  --space-10: calc(80px * var(--scaling));
+  --space-11: calc(96px * var(--scaling));
+  --space-12: calc(112px * var(--scaling));
 }

package/src/styles/tokens/transition.css

@@ -36,12 +36,12 @@
   --transition-spring-elastic: var(--motion-duration-medium) var(--motion-spring-elastic);
 
   /* Semantic motion tokens */
-  --motion-duration-micro: 75ms;   /* Micro-interactions (150–250ms) */
-  --motion-duration-small: 150ms;   /* Small UI changes (200–400ms) */
-  --motion-duration-medium: 250ms;  /* Medium/large changes (400–800ms) */
-  --motion-duration-large: 350ms;   /* Large movements (400–800ms) */
+  --motion-duration-micro: 75ms; /* Micro-interactions (150–250ms) */
+  --motion-duration-small: 150ms; /* Small UI changes (200–400ms) */
+  --motion-duration-medium: 250ms; /* Medium/large changes (400–800ms) */
+  --motion-duration-large: 350ms; /* Large movements (400–800ms) */
 
-  --motion-ease-standard: ease-in-out;     /* Most UI changes */
+  --motion-ease-standard: ease-in-out; /* Most UI changes */
   --motion-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* Material-like */
   --motion-ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
   --motion-ease-follow: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -71,6 +71,7 @@
   --transition-button:
     background var(--motion-duration-small) var(--motion-ease-standard),
     box-shadow var(--motion-duration-small) var(--motion-ease-standard),
+    filter var(--motion-duration-small) var(--motion-ease-standard),
     backdrop-filter var(--motion-duration-small) var(--motion-ease-standard),
     transform var(--motion-duration-micro) var(--motion-spring-snappy),
     padding var(--motion-duration-micro) var(--motion-ease-standard);
@@ -120,19 +121,31 @@
     box-shadow var(--motion-duration-small) var(--motion-ease-standard),
     color var(--motion-duration-micro) var(--motion-ease-standard);
 
-  --transition-focus: outline var(--motion-duration-small) var(--motion-ease-standard), outline-offset var(--motion-duration-small) var(--motion-ease-standard);
+  --transition-focus:
+    outline var(--motion-duration-small) var(--motion-ease-standard),
+    outline-offset var(--motion-duration-small) var(--motion-ease-standard);
 
   /* Progress component transition */
   --transition-progress: transform var(--motion-duration-small) var(--motion-ease-standard);
 
   /* Accordion component transitions */
-  --transition-accordion-content: height var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-small) var(--motion-spring-snappy);
-  --transition-accordion-trigger: background-color var(--motion-duration-small) var(--motion-spring-snappy), transform var(--motion-duration-micro) var(--motion-spring-snappy);
-  --transition-accordion-trigger-active: transform var(--motion-duration-micro) var(--motion-spring-bounce);
-  
+  --transition-accordion-content:
+    height var(--motion-duration-small) var(--motion-spring-snappy),
+    opacity var(--motion-duration-small) var(--motion-spring-snappy),
+    transform var(--motion-duration-small) var(--motion-spring-snappy);
+  --transition-accordion-trigger:
+    background-color var(--motion-duration-small) var(--motion-spring-snappy),
+    transform var(--motion-duration-micro) var(--motion-spring-snappy);
+  --transition-accordion-trigger-active: transform var(--motion-duration-micro)
+    var(--motion-spring-bounce);
+
   /* GPU-optimized spring transitions */
-  --transition-spring-gpu: transform var(--motion-duration-small) var(--motion-spring-snappy), opacity var(--motion-duration-small) var(--motion-spring-snappy);
-  --transition-spring-gpu-fast: transform var(--motion-duration-micro) var(--motion-spring-snappy), opacity var(--motion-duration-micro) var(--motion-spring-snappy);
+  --transition-spring-gpu:
+    transform var(--motion-duration-small) var(--motion-spring-snappy),
+    opacity var(--motion-duration-small) var(--motion-spring-snappy);
+  --transition-spring-gpu-fast:
+    transform var(--motion-duration-micro) var(--motion-spring-snappy),
+    opacity var(--motion-duration-micro) var(--motion-spring-snappy);
 }
 
 /* Respect user preference for reduced motion */

package/src/styles/utilities/gap.css

@@ -32,6 +32,15 @@
   .rt-r-gap-9 {
     gap: var(--space-9);
   }
+  .rt-r-gap-10 {
+    gap: var(--space-10);
+  }
+  .rt-r-gap-11 {
+    gap: var(--space-11);
+  }
+  .rt-r-gap-12 {
+    gap: var(--space-12);
+  }
   .rt-r-cg {
     /* Keep this selector here to maintain the source order */
   }
@@ -65,6 +74,15 @@
   .rt-r-cg-9 {
     column-gap: var(--space-9);
   }
+  .rt-r-cg-10 {
+    column-gap: var(--space-10);
+  }
+  .rt-r-cg-11 {
+    column-gap: var(--space-11);
+  }
+  .rt-r-cg-12 {
+    column-gap: var(--space-12);
+  }
   .rt-r-rg {
     /* Keep this selector here to maintain the source order */
   }
@@ -98,6 +116,15 @@
   .rt-r-rg-9 {
     row-gap: var(--space-9);
   }
+  .rt-r-rg-10 {
+    row-gap: var(--space-10);
+  }
+  .rt-r-rg-11 {
+    row-gap: var(--space-11);
+  }
+  .rt-r-rg-12 {
+    row-gap: var(--space-12);
+  }
 }
 
 .rt-r-gap {