@kushagradhawan/kookie-ui 0.1.28 → 0.1.30

package/src/components/checkbox-cards.css

@@ -8,12 +8,10 @@
 }
 
 .rt-CheckboxCardsItem {
-  --base-card-padding-top: var(--checkbox-cards-item-padding-top);
-  --base-card-padding-right: var(--checkbox-cards-item-padding-right);
-  --base-card-padding-bottom: var(--checkbox-cards-item-padding-bottom);
-  --base-card-padding-left: var(--checkbox-cards-item-padding-left);
-  --base-card-border-radius: var(--checkbox-cards-item-border-radius);
-  --base-card-border-width: var(--checkbox-cards-item-border-width);
+  --base-card-border-width: var(--border-width-standard);
+  --base-card-padding-right: calc(
+    var(--base-card-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
+  );
 
   display: flex;
   align-items: center;
@@ -37,14 +35,15 @@
   }
   /* stylelint-disable-next-line selector-max-type */
   & > :where(svg) {
-    /* Don’t squish icons */
+    /* Don't squish icons */
     flex-shrink: 0;
   }
 }
 
 .rt-CheckboxCardCheckbox {
   position: absolute;
-  right: var(--checkbox-cards-item-padding-left);
+  top: var(--base-card-padding-top);
+  right: var(--base-card-padding-left);
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -53,132 +52,56 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-CheckboxCardsItem {
-  --checkbox-cards-item-padding-right: calc(
-    var(--checkbox-cards-item-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
-  );
-}
+
 
 @breakpoints {
   .rt-CheckboxCardsRoot {
-    /* 40px height for the card with one line of text */
+    /* Size 1 */
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-3) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-bottom: calc(var(--space-3) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-left: var(--space-3);
-      --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
       --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-medium));
     }
-    /* 48px height for the card with one line of text */
+    
+
+    /* Size 2 */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
-      --checkbox-cards-item-padding-top: calc(var(--space-4) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-left: var(--space-4);
-      --checkbox-cards-item-border-radius: var(--radius-3);
       /* keep in sync with checkbox */
       --checkbox-cards-item-checkbox-size: var(--space-4);
     }
-    /* 64px height for the card with one line of text */
+    /* Size 3 */
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-3);
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
-      --checkbox-cards-item-padding-top: calc(var(--space-5) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-bottom: calc(var(--space-5) * var(--spacing-multiplier-medium));
-      --checkbox-cards-item-padding-left: var(--space-5);
-      --checkbox-cards-item-border-radius: var(--radius-4);
       /* keep in sync with checkbox */
       --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
-  }
-}
-
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Surface          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-:where(.rt-CheckboxCardsRoot.rt-variant-surface) {
-  .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: var(--border-width-standard);
-    --checkbox-cards-item-background-color: var(--color-surface);
-
-    transition: var(--transition-card);
-
-    &::before {
-      background-color: var(--checkbox-cards-item-background-color);
-    }
-    &::after {
-      box-shadow: var(--base-card-surface-box-shadow);
+    /* Size 4 */
+    &:where(.rt-r-size-4) {
+      font-size: var(--font-size-3);
+      --line-height: var(--line-height-3);
+      --letter-spacing: var(--letter-spacing-3);
+      /* keep in sync with checkbox */
+      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * var(--spacing-multiplier-large));
     }
-    @media (hover: hover) {
-      &:where(:not(:has(:disabled)):hover) {
-        transition-duration: var(--duration-1);
-        &::after {
-          box-shadow: var(--base-card-surface-hover-box-shadow);
-        }
-      }
+    /* Size 5 */
+    &:where(.rt-r-size-5) {
+      font-size: var(--font-size-4);
+      --line-height: var(--line-height-4);
+      --letter-spacing: var(--letter-spacing-4);
+      /* keep in sync with checkbox */
+      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
     }
   }
-
-  /* Component-level panel background overrides (higher specificity) */
-  &:where([data-panel-background='solid']) .rt-CheckboxCardsItem {
-    --color-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
-    --color-surface: var(--color-surface-translucent);
-  }
 }
 
-/* * * * * * * * * * * * * * * * * * * */
-/*                                     */
-/*         Variants / Classic          */
-/*                                     */
-/* * * * * * * * * * * * * * * * * * * */
-
-:where(.rt-CheckboxCardsRoot.rt-variant-classic) {
-  .rt-CheckboxCardsItem {
-    --checkbox-cards-item-border-width: var(--border-width-standard);
-    --checkbox-cards-item-background-color: var(--color-surface);
-
-    transition: var(--transition-card);
-    box-shadow: var(--base-card-classic-box-shadow-outer);
 
-    &::before {
-      background-color: var(--checkbox-cards-item-background-color);
-    }
-    &::after {
-      box-shadow: var(--base-card-classic-box-shadow-inner);
-    }
-    @media (hover: hover) {
-      &:where(:not(:has(:disabled)):hover) {
-        transition-duration: var(--duration-1);
-        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
-        &::after {
-          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
-        }
-      }
-    }
-  }
-
-  /* Component-level panel background overrides (higher specificity) */
-  &:where([data-panel-background='solid']) .rt-CheckboxCardsItem {
-    --color-surface: var(--color-surface-solid);
-  }
-
-  &:where([data-panel-background='translucent']) .rt-CheckboxCardsItem {
-    --color-surface: var(--color-surface-translucent);
-  }
-}
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */

package/src/components/checkbox-cards.props.tsx

@@ -5,8 +5,8 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-const variants = ['surface', 'classic'] as const;
+const sizes = ['1', '2', '3', '4', '5'] as const;
+const variants = ['outline', 'classic', 'ghost', 'soft', 'surface'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const checkboxCardsRootPropDefs = {

package/src/components/checkbox-cards.tsx

@@ -28,6 +28,7 @@ const useCheckboxGroupScope = createCheckboxGroupScope();
 
 type CheckboxCardsContextValue = {
   size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
+  variant?: (typeof checkboxCardsRootPropDefs.variant.values)[number];
   highContrast?: boolean;
 };
 
@@ -59,6 +60,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
       <CheckboxCardsProvider
         scope={__scopeCheckboxCards}
         size={props.size}
+        variant={props.variant}
         highContrast={props.highContrast}
       >
         <Grid asChild>
@@ -89,13 +91,29 @@ const CheckboxCardsItem = React.forwardRef<
   const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
 
   const { className: checkboxClassName } = extractProps(
-    // Pass size / highContrast values from the context and static variant to generate styles
-    { size: context?.size, variant: 'solid', highContrast: context?.highContrast },
+    // Pass size / highContrast values from the context and variant to generate styles
+    {
+      size: context?.size,
+      variant: context?.variant || 'solid',
+      highContrast: context?.highContrast,
+    },
     // Pass size & variant prop defs to allow it to be extracted
     baseCheckboxPropDefs,
   );
+  const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
+  const sizeClass = context?.size ? `rt-r-size-${context.size}` : undefined;
+
   return (
-    <label className={classNames('rt-BaseCard', 'rt-CheckboxCardsItem', className)} style={style}>
+    <label
+      className={classNames(
+        'rt-BaseCard',
+        'rt-CheckboxCardsItem',
+        variantClass,
+        sizeClass,
+        className,
+      )}
+      style={style}
+    >
       {children}
       <CheckboxGroupPrimitive.Item
         {...checkboxGroupScope}

package/src/components/checkbox.tsx

@@ -27,6 +27,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwar
   const {
     className,
     color,
+    material,
     checked: checkedProp,
     defaultChecked: defaultCheckedProp,
     onCheckedChange,
@@ -42,6 +43,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((props, forwar
   return (
     <CheckboxPrimitive.Root
       data-accent-color={color}
+      data-material={material}
       {...checkboxProps}
       defaultChecked={defaultCheckedProp}
       checked={checked}

package/src/components/code.css

@@ -144,7 +144,7 @@
 /* soft */
 
 .rt-Code:where(.rt-variant-soft) {
-  background-color: var(--accent-a3);
+  background-color: var(--accent-a2);
   color: var(--accent-a11);
 
   &:where(.rt-high-contrast) {

package/src/components/code.tsx

@@ -20,7 +20,7 @@ const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
   const { asChild, className, color, ...codeProps } = extractProps(
     props,
     codePropDefs,
-    marginPropDefs
+    marginPropDefs,
   );
   // Code ghost color prop should work as text color by default
   const resolvedColor = props.variant === 'ghost' ? color || undefined : color;

package/src/components/container.css

@@ -12,6 +12,7 @@
   align-items: center;
   flex-shrink: 0;
   flex-grow: 1;
+  min-width: 0;
 }
 
 .rt-ContainerInner {

package/src/components/context-menu.tsx

@@ -1,3 +1,7 @@
+/**
+ * Context Menu component that provides right-click menu functionality.
+ * Requires client-side rendering due to event handling and portal usage.
+ */
 'use client';
 
 import * as React from 'react';
@@ -51,11 +55,34 @@ interface ContextMenuContentProps
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
   (props, forwardedRef) => {
     const themeContext = useThemeContext();
+
+    // Show deprecation warning for panelBackground when used
+    React.useEffect(() => {
+      if (props.panelBackground !== undefined) {
+        console.warn(
+          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
+        );
+      }
+    }, [props.panelBackground]);
+
+    // Material takes precedence over panelBackground
+    const effectiveMaterial =
+      props.material ?? props.panelBackground ?? themeContext.panelBackground;
+
+    // Memoize theme context values to prevent unnecessary re-renders
+    const memoizedThemeContext = React.useMemo(
+      () => ({
+        material: effectiveMaterial,
+        accentColor: themeContext.accentColor,
+      }),
+      [effectiveMaterial, themeContext.accentColor],
+    );
+
     const {
       size = contextMenuContentPropDefs.size.default,
       variant = contextMenuContentPropDefs.variant.default,
       highContrast = contextMenuContentPropDefs.highContrast.default,
-      panelBackground = props.panelBackground ?? themeContext.panelBackground,
+      material = memoizedThemeContext.material,
     } = props;
     const {
       className,
@@ -63,16 +90,23 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       color,
       container,
       forceMount,
-      panelBackground: _,
+      material: _,
+      panelBackground: __,
       ...contentProps
     } = extractProps(props, contextMenuContentPropDefs);
-    const resolvedColor = color || themeContext.accentColor;
+
+    // Memoize color resolution to prevent unnecessary re-renders
+    const resolvedColor = React.useMemo(
+      () => color || memoizedThemeContext.accentColor,
+      [color, memoizedThemeContext.accentColor],
+    );
     return (
       <ContextMenuPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
-            data-panel-background={panelBackground}
+            data-material={material}
+            data-panel-background={material}
             alignOffset={-Number(size) * 4}
             collisionPadding={10}
             {...contentProps}
@@ -89,8 +123,8 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
               <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>
                 <ContextMenuContentContext.Provider
                   value={React.useMemo(
-                    () => ({ size, variant, color: resolvedColor, highContrast, panelBackground }),
-                    [size, variant, resolvedColor, highContrast, panelBackground],
+                    () => ({ size, variant, color: resolvedColor, highContrast, material }),
+                    [size, variant, resolvedColor, highContrast, material],
                   )}
                 >
                   {children}
@@ -305,24 +339,31 @@ ContextMenuSubTrigger.displayName = 'ContextMenu.SubTrigger';
 
 type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuPrimitive.SubContent>;
 interface ContextMenuSubContentProps
-  extends ComponentPropsWithout<typeof ContextMenuPrimitive.SubContent, RemovedProps> {
+  extends ComponentPropsWithout<typeof ContextMenuPrimitive.SubContent, RemovedProps>,
+    ContextMenuContentContextValue {
   container?: React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Portal>['container'];
 }
 const ContextMenuSubContent = React.forwardRef<
   ContextMenuSubContentElement,
   ContextMenuSubContentProps
 >((props, forwardedRef) => {
-  const { size, variant, color, highContrast, panelBackground } =
-    React.useContext(ContextMenuContentContext);
+  // Memoize context consumption to prevent unnecessary re-renders
+  const contextValue = React.useContext(ContextMenuContentContext);
+  const { size, variant, color, highContrast, material } = React.useMemo(
+    () => contextValue,
+    [contextValue],
+  );
+
   const {
     className,
     children,
     container,
     forceMount,
-    panelBackground: _,
+    material: _,
+    panelBackground: __,
     ...subContentProps
   } = extractProps(
-    { size, variant, color, highContrast, panelBackground, ...props },
+    { size, variant, color, highContrast, material, ...props },
     contextMenuContentPropDefs,
   );
   return (
@@ -330,7 +371,8 @@ const ContextMenuSubContent = React.forwardRef<
       <Theme asChild>
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
-          data-panel-background={panelBackground}
+          data-material={material}
+          data-panel-background={material}
           alignOffset={-Number(size) * 4}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}

package/src/components/dialog.props.tsx

@@ -8,6 +8,7 @@ import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 const alignValues = ['start', 'center'] as const;
 const contentSizes = ['1', '2', '3', '4'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
+const materials = ['solid', 'translucent'] as const;
 
 const dialogContentPropDefs = {
   ...asChildPropDef,
@@ -25,6 +26,7 @@ const dialogContentPropDefs = {
     responsive: true,
   },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
+  material: { type: 'enum', values: materials, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
@@ -33,6 +35,7 @@ const dialogContentPropDefs = {
   align: PropDef<(typeof alignValues)[number]>;
   size: PropDef<(typeof contentSizes)[number]>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
+  material: PropDef<(typeof materials)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/dialog.tsx

@@ -43,20 +43,99 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
     const {
       align: alignPropDef,
       panelBackground: panelBackgroundPropDef,
+      material: materialPropDef,
       ...propDefs
     } = dialogContentPropDefs;
+
     const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
-    const { panelBackground } = extractProps(
+
+    // Extract panelBackground and material from props
+    const { panelBackground: extractedPanelBackground } = extractProps(
       { panelBackground: props.panelBackground },
       { panelBackground: panelBackgroundPropDef },
     );
+
+    const { material: extractedMaterial } = extractProps(
+      { material: props.material },
+      { material: materialPropDef },
+    );
+
+    // Handle material prop with panelBackground fallback
+    const materialValue = React.useMemo(() => {
+      if (extractedMaterial !== undefined) {
+        console.warn(
+          'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use `material` prop instead.',
+        );
+      }
+      return extractedMaterial ?? extractedPanelBackground;
+    }, [extractedMaterial, extractedPanelBackground]);
+
     const {
       className,
       forceMount,
       container,
       panelBackground: _,
+      material: __,
       ...contentProps
     } = extractProps(props, propDefs);
+
+    // Focus management
+    const contentRef = React.useRef<HTMLDivElement>(null);
+    const combinedRef = React.useMemo(
+      () => (node: HTMLDivElement | null) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      [forwardedRef],
+    );
+
+    // Focus trap effect
+    React.useEffect(() => {
+      // SSR safety - only run on client
+      if (typeof window === 'undefined') return;
+
+      const content = contentRef.current;
+      if (!content) return;
+
+      const focusableElements = content.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      );
+
+      if (focusableElements.length === 0) return;
+
+      const firstElement = focusableElements[0] as HTMLElement;
+      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Tab') {
+          if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+              event.preventDefault();
+              lastElement.focus();
+            }
+          } else {
+            if (document.activeElement === lastElement) {
+              event.preventDefault();
+              firstElement.focus();
+            }
+          }
+        }
+      };
+
+      content.addEventListener('keydown', handleKeyDown);
+
+      // Focus first element when dialog opens
+      firstElement.focus();
+
+      return () => {
+        content.removeEventListener('keydown', handleKeyDown);
+      };
+    }, []);
+
     return (
       <DialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -67,9 +146,20 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
               >
                 <DialogPrimitive.Content
                   {...contentProps}
-                  ref={forwardedRef}
+                  ref={combinedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
-                  data-panel-background={panelBackground}
+                  data-material={materialValue}
+                  data-panel-background={materialValue}
+                  tabIndex={-1}
+                  role="dialog"
+                  aria-modal="true"
+                />
+                {/* ARIA live region for screen reader announcements */}
+                <div
+                  aria-live="polite"
+                  aria-atomic="true"
+                  className="rt-sr-only"
+                  id="dialog-announcement"
                 />
               </div>
             </div>