@kushagradhawan/kookie-ui 0.1.29 → 0.1.30

package/src/components/spinner.css

@@ -69,6 +69,18 @@
   }
 }
 
+/* Enhanced reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .rt-Spinner {
+    animation: none;
+  }
+  
+  .rt-SpinnerLeaf {
+    animation: none;
+    opacity: 0.5;
+  }
+}
+
 /***************************************************************************************************
  *                                                                                                 *
  * SIZES                                                                                           *

package/src/components/switch.css

@@ -1,15 +1,4 @@
-:where(.radix-themes) {
-  --switch-disabled-blend-mode: multiply;
-  --switch-high-contrast-checked-color-overlay: var(--black-a8);
-  --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
-}
-
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --switch-disabled-blend-mode: screen;
-  --switch-high-contrast-checked-color-overlay: transparent;
-  --switch-high-contrast-checked-active-before-filter: brightness(1.08);
-}
+/* Disabled state uses simple opacity instead of complex blend modes */
 
 .rt-SwitchRoot {
   position: relative;
@@ -17,57 +6,55 @@
   align-items: center;
   vertical-align: top;
   flex-shrink: 0;
-
-  /* Unless in a skeleton, align with text line height when possible and fall back to own height */
-  height: var(--skeleton-height, var(--line-height, var(--switch-height)));
-  --skeleton-height-override: var(--switch-height);
-
-  /* Set root radius when in a skeleton */
-  border-radius: var(--skeleton-radius);
-  --skeleton-radius-override: var(--switch-border-radius);
+  height: var(--switch-height);
+  border-radius: 9999px;
 
   --switch-width: calc(var(--switch-height) * 1.75);
   --switch-thumb-inset: 1px;
   --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
   --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
 
+  /* 
+   * Theme-level translucent override
+   * Applies backdrop filter for elevated visual effects
+   */
+  :where([data-panel-background='translucent'], [data-material='translucent']) & {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
+  /* Prevent backdrop-filter stacking with parent elements */
+  isolation: isolate;
+
+  /* 
+   * Component-level material overrides
+   * These ensure proper rendering based on material setting
+   */
+  &:where([data-panel-background='solid'], [data-material='solid']) {
+    backdrop-filter: none;
+    --backdrop-filter-components: none;
+  }
+  
+  &:where([data-panel-background='translucent'], [data-material='translucent']) {
+    backdrop-filter: var(--backdrop-filter-components);
+    --backdrop-filter-components: blur(var(--backdrop-blur-components));
+  }
+
   &::before {
     content: '';
     display: block;
     width: var(--switch-width);
     height: var(--switch-height);
-    border-radius: var(--switch-border-radius);
-    transition: background-position, background-color, box-shadow, filter;
-    transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
-    background-repeat: no-repeat;
-
-    /*
-     * Length of the gradient is: switch width for the checked part, plus switch
-     * height for the thumb part, plus another switch width for the unchecked part
-     */
-    background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
+    border-radius: 9999px;
+    transition: background-color var(--transition-standard), box-shadow var(--transition-standard);
+    cursor: var(--cursor-switch);
   }
 
-  &:where([data-state='unchecked'])::before {
-    transition-duration: 120ms, 140ms, 140ms, 140ms;
-    background-position-x: 100%;
-  }
-  &:where([data-state='checked'])::before {
-    transition-duration: 160ms, 140ms, 140ms, 140ms;
-    background-position: 0%;
-  }
-  &:where(:active)::before {
-    transition-duration: 30ms;
-  }
   &:where(:focus-visible)::before {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
   }
 
-  /* Cursors */
-  &::before {
-    cursor: var(--cursor-switch);
-  }
   &:where([data-disabled])::before {
     cursor: var(--cursor-disabled);
   }
@@ -79,8 +66,9 @@
   left: var(--switch-thumb-inset);
   width: var(--switch-thumb-size);
   height: var(--switch-thumb-size);
-  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
-  transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
+  border-radius: 9999px;
+  box-shadow: var(--shadow-2);
+  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
 
   &:where([data-state='checked']) {
     transform: translateX(var(--switch-thumb-translate-x));
@@ -97,15 +85,15 @@
   .rt-SwitchRoot {
     &:where(.rt-r-size-1) {
       --switch-height: var(--space-4);
-      --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
     }
     &:where(.rt-r-size-2) {
-      --switch-height: calc(var(--space-5) * 5 / 6);
-      --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+      --switch-height: calc(var(--space-5));
     }
     &:where(.rt-r-size-3) {
-      --switch-height: var(--space-5);
-      --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+      --switch-height: var(--space-6);
+    }
+    &:where(.rt-r-size-4) {
+      --switch-height: var(--space-7);
     }
   }
 }
@@ -118,205 +106,136 @@
 
 /* surface */
 
-:where(.radix-themes) {
-  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
-}
-
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --switch-surface-checked-active-filter: brightness(1.08);
-}
-
 .rt-SwitchRoot:where(.rt-variant-surface) {
   &::before {
-    background-color: var(--gray-a3);
-    background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
-    box-shadow: inset 0 0 0 1px var(--gray-a5);
-  }
-  &:where(:active)::before {
-    background-color: var(--gray-a4);
-  }
-  &:where([data-state='checked']:active)::before {
-    filter: var(--switch-surface-checked-active-filter);
-  }
-  &:where(.rt-high-contrast) {
-    &::before {
-      /* prettier-ignore */
-      background-image:
-        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
-        linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    background-color: var(--gray-2);
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
-    &:where([data-state='checked']:active)::before {
-      filter: var(--switch-high-contrast-checked-active-before-filter);
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-2);
+      box-shadow: inset 0 0 0 1px var(--gray-6);
     }
-  }
-  &:where([data-disabled]) {
-    mix-blend-mode: var(--switch-disabled-blend-mode);
-
-    &::before {
-      filter: none;
-      background-image: none;
-      background-color: var(--gray-a3);
-      box-shadow: inset 0 0 0 1px var(--gray-a3);
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
   }
+  
+  &:where([data-state='checked'])::before {
+    background-color: var(--accent-9);
+    box-shadow: none;
+  }
 
-  & :where(.rt-SwitchThumb) {
-    &:where([data-state='unchecked']) {
-      box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
-    }
-    &:where([data-state='checked']) {
-      box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
-        0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
-
-      &:where(.rt-high-contrast) {
-        box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
-          -1px 0 1px var(--black-a2);
-      }
-    }
-    &:where([data-disabled]) {
-      background-color: var(--gray-2);
-      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
-      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
-      transition: none;
+  &:where(.rt-high-contrast) {
+    &:where([data-state='checked'])::before {
+      background-color: var(--accent-12);
+      box-shadow: none;
     }
   }
-}
+  
+
 
-/* classic */
 
-:where(.radix-themes) {
-  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --switch-surface-checked-active-filter: brightness(1.08);
 }
 
-.rt-SwitchRoot:where(.rt-variant-classic) {
+/* soft */
+
+.rt-SwitchRoot:where(.rt-variant-soft) {
   &::before {
-    background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
-    background-color: var(--gray-a4);
-    box-shadow: var(--classic-inset-shadow-dark);
-  }
-  &:where([data-state='unchecked']:active)::before {
-    background-color: var(--gray-a5);
-  }
-  &:where([data-state='checked'])::before {
-    box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--accent-a4), inset 0 0 0 var(--border-width-standard) var(--black-a1),
-      inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
-  }
-  &:where([data-state='checked']:active)::before {
-    filter: var(--switch-surface-checked-active-filter);
-  }
-  &:where(.rt-high-contrast) {
-    &::before {
-      box-shadow: inset 0 0 0 var(--border-width-standard) var(--gray-a3), inset 0 0 0 var(--border-width-standard) var(--black-a2), inset 0 var(--slider-classic-inset-offset) 2px 0 var(--black-a2);
+    background-color: var(--gray-3);
 
-      /* prettier-ignore */
-      background-image:
-        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
-        linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
-    &:where([data-state='checked']:active)::before {
-      filter: var(--switch-high-contrast-checked-active-before-filter);
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      background-color: var(--gray-3);
     }
-  }
-  &:where([data-disabled]) {
-    mix-blend-mode: var(--switch-disabled-blend-mode);
-
-    &::before {
-      filter: none;
-      background-image: none;
-      background-color: var(--gray-a5);
-      box-shadow: var(--classic-inset-shadow-dark);
-      opacity: var(--opacity-disabled);
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
     }
   }
+  
+  &:where([data-state='checked'])::before {
+    background-color: var(--accent-9);
+  }
 
-  & :where(.rt-SwitchThumb) {
-    &:where([data-state='unchecked']) {
-      box-shadow: 0 1px 3px var(--black-a3), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2);
-    }
-    &:where([data-state='checked']) {
-      box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
-        0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
-
-      &:where(.rt-high-contrast) {
-        box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
-          -1px 0 1px var(--black-a2);
-      }
-    }
-    &:where([data-disabled]) {
-      background-color: var(--gray-2);
-      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
-      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
-      transition: none;
+  &:where(.rt-high-contrast) {
+    &:where([data-state='checked'])::before {
+      background-color: var(--accent-12);
     }
   }
 }
 
-/* soft */
+/* outline */
 
-.rt-SwitchRoot:where(.rt-variant-soft) {
-  /* prettier-ignore */
+.rt-SwitchRoot:where(.rt-variant-outline) {
   &::before {
-    background-image:
-      linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
-      linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
-      /* Blend with white to increase contrast in dark mode */
-      linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
-      linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
-  }
-  &:where([data-state='unchecked'])::before {
-    background-color: var(--gray-a3);
-  }
-  &:where(:active)::before {
-    background-color: var(--gray-a4);
-  }
-  &:where(.rt-high-contrast) {
-    &::before {
-      /* prettier-ignore */
-      background-image:
-        linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
-        linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
-        linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
-        linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
-        linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
+    /* Base state: no background, just border */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent'], [data-material='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
-    &:where([data-state='checked']:active)::before {
-      filter: var(--switch-high-contrast-checked-active-before-filter);
+
+    /* Component-level overrides */
+    &:where([data-panel-background='solid'], [data-material='solid']) {
+      box-shadow: inset 0 0 0 1px var(--gray-6);
+    }
+
+    &:where([data-panel-background='translucent'], [data-material='translucent']) {
+      box-shadow: inset 0 0 0 1px var(--gray-a6);
     }
   }
-  &:where([data-disabled]) {
-    mix-blend-mode: var(--switch-disabled-blend-mode);
+  
+  &:where([data-state='checked'])::before {
+    background-color: var(--accent-9);
+    box-shadow: none;
+  }
 
-    &::before {
-      filter: none;
-      background-image: none;
-      background-color: var(--gray-a4);
+  &:where(.rt-high-contrast) {
+    &:where([data-state='checked'])::before {
+      background-color: var(--accent-12);
+      box-shadow: none;
     }
   }
+  
 
-  & :where(.rt-SwitchThumb) {
-    filter: saturate(0.45);
 
-    &:where([data-state='unchecked']) {
-      box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
-        0 2px 4px -1px var(--black-a1);
-    }
 
-    &:where([data-state='checked']) {
-      box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
-        0 2px 4px -1px var(--accent-a3);
-    }
+}
 
-    &:where([data-disabled]) {
-      filter: none;
-      background-color: var(--gray-2);
-      box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
-      /* Avoid the Chrome P3 bug with transition through red when changing light/dark mode */
-      transition: none;
-    }
+/* all disabled Switches */
+
+[data-disabled] {
+  .rt-SwitchRoot:where(&) {
+    cursor: var(--cursor-disabled);
   }
+  .rt-SwitchRoot:where(&)::before {
+    background-color: var(--gray-a3) !important;
+    box-shadow: none !important;
+    outline: none !important;
+  }
+  .rt-SwitchThumb:where(&) {
+    cursor: var(--cursor-disabled);
+    box-shadow: none !important;
+    outline: none !important;
+  }
+}
+
+/* Disabled checked state - lighter accent color */
+.rt-SwitchRoot:where([data-disabled][data-state='checked'])::before {
+  background-color: var(--accent-a3) !important;
 }

package/src/components/switch.props.tsx

@@ -1,21 +1,33 @@
 import { colorPropDef } from '../props/color.prop.js';
 import { highContrastPropDef } from '../props/high-contrast.prop.js';
-import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['classic', 'surface', 'soft'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
+const variants = ['surface', 'soft', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const switchPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...highContrastPropDef,
-  ...radiusPropDef,
+  /**
+   * Material type for visual rendering and depth effects
+   * Controls how the switch renders its visual elements
+   */
+  material: { type: 'enum', values: materials, default: undefined },
+  /**
+   * Panel background type (deprecated)
+   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
+   */
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
+  material: PropDef<(typeof materials)[number] | undefined>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { switchPropDefs };

package/src/components/switch.tsx

@@ -20,15 +20,17 @@ interface SwitchProps
     MarginProps,
     SwitchOwnProps {}
 const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {
-  const { className, color, radius, ...switchProps } = extractProps(
+  const { className, color, panelBackground, material, ...switchProps } = extractProps(
     props,
     switchPropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
+  const effectiveMaterial = material || panelBackground;
   return (
     <SwitchPrimitive.Root
       data-accent-color={color}
-      data-radius={radius}
+      data-panel-background={effectiveMaterial}
+      data-material={effectiveMaterial}
       {...switchProps}
       asChild={false}
       ref={forwardedRef}

package/src/components/tab-nav.tsx

@@ -20,10 +20,10 @@ interface TabNavRootProps
     MarginProps,
     TabNavOwnProps {}
 const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
-  const { children, className, color, ...rootProps } = extractProps(
+  const { children, className, color, panelBackground, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
   return (
     <NavigationMenu.Root
@@ -35,6 +35,7 @@ const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props,
     >
       <NavigationMenu.List
         className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
+        data-panel-background={panelBackground}
       >
         {children}
       </NavigationMenu.List>
@@ -49,7 +50,7 @@ interface TabNavLinkProps
   extends ComponentPropsWithout<typeof NavigationMenu.Link, RemovedProps | 'onSelect'>,
     TabNavLinkOwnProps {}
 const TabNavLink = React.forwardRef<TabNavLinkElement, TabNavLinkProps>((props, forwardedRef) => {
-  const { asChild, children, className, ...linkProps } = props;
+  const { asChild, children, className, active, ...linkProps } = props;
 
   return (
     <NavigationMenu.Item className="rt-TabNavItem">
@@ -59,6 +60,8 @@ const TabNavLink = React.forwardRef<TabNavLinkElement, TabNavLinkProps>((props,
         className={classNames('rt-reset', 'rt-BaseTabListTrigger', 'rt-TabNavLink', className)}
         onSelect={undefined}
         asChild={asChild}
+        aria-current={active ? 'page' : undefined}
+        data-active={active || undefined}
       >
         {getSubtree({ asChild, children }, (children) => (
           <>

package/src/components/tabs.tsx

@@ -91,6 +91,8 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
         {...contentProps}
         ref={forwardedRef}
         className={classNames('rt-TabsContent', className)}
+        aria-live="polite"
+        aria-atomic="true"
       />
     );
   },