@kushagradhawan/kookie-ui 0.1.16 → 0.1.18

package/src/components/image.tsx

@@ -8,12 +8,15 @@ import { extractProps } from '../helpers/extract-props.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { widthPropDefs } from '../props/width.props.js';
 import { heightPropDefs } from '../props/height.props.js';
+import { layoutPropDefs } from '../props/layout.props.js';
 import { Skeleton } from './skeleton.js';
+import { Box } from './box.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { MarginProps } from '../props/margin.props.js';
 import type { WidthProps } from '../props/width.props.js';
 import type { HeightProps } from '../props/height.props.js';
+import type { LayoutProps } from '../props/layout.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type ImageElement = React.ElementRef<'img'>;
@@ -40,6 +43,10 @@ type ImageOwnProps = GetPropDefTypes<typeof imagePropDefs> & {
    * Callback fired when the image fails to load.
    */
   onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+  /**
+   * Style object to apply to the wrapper container. Useful for overriding display, width, height, etc.
+   */
+  wrapperStyle?: React.CSSProperties;
 };
 
 interface ImageProps
@@ -47,6 +54,7 @@ interface ImageProps
     MarginProps,
     WidthProps,
     HeightProps,
+    LayoutProps,
     ImageOwnProps {
   /**
    * The alt attribute provides alternative information for an image if a user for some reason cannot view it.
@@ -56,7 +64,7 @@ interface ImageProps
 }
 
 const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) => {
-  const { variant = 'surface', children } = props;
+  const { variant = 'surface', wrapperStyle, ...restProps } = props;
   const {
     asChild,
     className,
@@ -70,33 +78,46 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
     fadeIn = true,
     onLoad: userOnLoad,
     onError: userOnError,
-    children: _children, // Extract children to exclude from imgProps
+    children,
     ...imgProps
-  } = extractProps(props, imagePropDefs, marginPropDefs, widthPropDefs, heightPropDefs);
+  } = extractProps(
+    restProps,
+    imagePropDefs,
+    marginPropDefs,
+    widthPropDefs,
+    heightPropDefs,
+    layoutPropDefs,
+  );
 
   // Loading state management
   const [imageLoaded, setImageLoaded] = React.useState(false);
   const [imageError, setImageError] = React.useState(false);
   const [showPlaceholder, setShowPlaceholder] = React.useState(!!placeholder);
-  
+
   // Ref to check if image is already loaded (for cached images)
   const imgRef = React.useRef<HTMLImageElement>(null);
 
   // Handle image load - moved to top to avoid conditional hook call
-  const handleLoad = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
-    setImageLoaded(true);
-    setImageError(false);
-    setShowPlaceholder(false);
-    userOnLoad?.(event);
-  }, [userOnLoad]);
+  const handleLoad = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      setImageLoaded(true);
+      setImageError(false);
+      setShowPlaceholder(false);
+      userOnLoad?.(event);
+    },
+    [userOnLoad],
+  );
 
   // Handle image error - moved to top to avoid conditional hook call
-  const handleError = React.useCallback((event: React.SyntheticEvent<HTMLImageElement>) => {
-    setImageLoaded(false);
-    setImageError(true);
-    setShowPlaceholder(false);
-    userOnError?.(event);
-  }, [userOnError]);
+  const handleError = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      setImageLoaded(false);
+      setImageError(true);
+      setShowPlaceholder(false);
+      userOnError?.(event);
+    },
+    [userOnError],
+  );
 
   // Check if image is already loaded (for cached images)
   React.useEffect(() => {
@@ -119,43 +140,35 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   }
 
   // Create skeleton placeholder
-  const skeletonElement = showSkeleton && !imageLoaded && !imageError ? (
-    <Skeleton
-      style={{
-        ...style,
-        width: '100%',
-        height: '100px', // Default height, can be overridden by style
-        borderRadius: radius ? `var(--radius-${radius})` : undefined,
-      }}
-      className={className}
-    />
-  ) : null;
+  const skeletonElement =
+    showSkeleton && !imageLoaded && !imageError ? (
+      <Skeleton
+        width="100%"
+        height="100px" // Default height, can be overridden by style
+        style={{
+          ...style,
+          borderRadius: radius ? `var(--radius-${radius})` : undefined,
+        }}
+        className={className}
+      />
+    ) : null;
 
   // Create placeholder image element
-  const placeholderElement = placeholder && showPlaceholder ? (
-    <img
-      data-radius={radius}
-      style={{
-        ...style,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        filter: 'blur(4px)',
-        opacity: 0.7,
-        transition: 'opacity 0.3s ease-out',
-      }}
-      className={classNames(
-        'rt-reset',
-        'rt-Image',
-        'rt-Image--placeholder',
-        className,
-      )}
-      alt=""
-      src={placeholder}
-    />
-  ) : null;
+  const placeholderElement =
+    placeholder && showPlaceholder ? (
+      <img
+        data-radius={radius}
+        style={{
+          ...style,
+          filter: 'blur(4px)',
+          opacity: 0.7,
+          transition: 'opacity 0.3s ease-out',
+        }}
+        className={classNames('rt-reset', 'rt-Image', 'rt-Image--placeholder', className)}
+        alt=""
+        src={placeholder}
+      />
+    ) : null;
 
   // Create the standard img element
   const imgElement = (
@@ -164,7 +177,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       loading={loading}
       style={{
         ...style,
-        opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+        opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
         transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
       }}
       className={classNames(
@@ -190,13 +203,16 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   );
 
   // Wrapper for images with placeholders
-  const imageWithPlaceholder = (placeholder || showSkeleton) ? (
-    <div style={{ position: 'relative', display: 'inline-block' }}>
-      {skeletonElement}
-      {placeholderElement}
-      {imgElement}
-    </div>
-  ) : imgElement;
+  const imageWithPlaceholder =
+    placeholder || showSkeleton ? (
+      <Box position="relative" display="inline-block" style={wrapperStyle}>
+        {skeletonElement}
+        {placeholderElement}
+        {imgElement}
+      </Box>
+    ) : (
+      imgElement
+    );
 
   // Handle asChild - inject img into the child element
   if (asChild && children) {
@@ -207,8 +223,6 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
       return React.cloneElement(child, {
         className: classNames(child.props?.className, 'rt-variant-blur'),
         style: {
-          position: 'relative',
-          display: 'inline-block',
           textDecoration: 'none', // Reset link underlines
           color: 'inherit', // Reset link colors
           border: 'none', // Reset button borders
@@ -219,7 +233,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
           ...child.props?.style,
         },
         children: (
-          <>
+          <Box position="relative" display="inline-block" style={wrapperStyle}>
             {/* Background blurred image */}
             <img
               data-radius={radius}
@@ -245,11 +259,11 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
             <img
               data-radius={radius}
               loading={loading}
-              style={{ 
-                ...style, 
-                position: 'relative', 
+              style={{
+                ...style,
+                position: 'relative',
                 zIndex: 1,
-                opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+                opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
                 transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
               }}
               className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
@@ -267,7 +281,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
                 }
               }}
             />
-          </>
+          </Box>
         ),
       });
     } else {
@@ -292,7 +306,12 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
   // Regular rendering without asChild
   if (variant === 'blur') {
     return (
-      <div className="rt-variant-blur" style={{ position: 'relative', display: 'inline-block' }}>
+      <Box
+        className="rt-variant-blur"
+        position="relative"
+        display="inline-block"
+        style={wrapperStyle}
+      >
         {/* Background blurred image */}
         <img
           data-radius={radius}
@@ -318,11 +337,11 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
         <img
           data-radius={radius}
           loading={loading}
-          style={{ 
-            ...style, 
-            position: 'relative', 
+          style={{
+            ...style,
+            position: 'relative',
             zIndex: 1,
-            opacity: fadeIn ? (imageLoaded ? 1 : 0) : 1,
+            opacity: fadeIn ? (imageLoaded ? (style?.opacity ?? 1) : 0) : (style?.opacity ?? 1),
             transition: fadeIn ? 'opacity 0.3s ease-out' : 'none',
           }}
           className={classNames('rt-reset', 'rt-Image', 'rt-Image--blur', className)}
@@ -340,7 +359,7 @@ const Image = React.forwardRef<ImageElement, ImageProps>((props, forwardedRef) =
             }
           }}
         />
-      </div>
+      </Box>
     );
   }
 

package/src/components/kbd.css

@@ -1,27 +1,7 @@
 /* stylelint-disable selector-max-type */
 /* Disable selector-max-type rule to target individual element types. */
 
-:where(.radix-themes) {
-  /* prettier-ignore */
-  --kbd-box-shadow:
-    inset 0 -0.05em 0.5em var(--gray-a2),
-    inset 0 0.05em var(--white-a12),
-    inset 0 0.25em 0.5em var(--gray-a2),
-    inset 0 -0.05em var(--gray-a6),
-    0 0 0 0.05em var(--gray-a5),
-    0 0.08em 0.17em var(--gray-a7);
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  /* prettier-ignore */
-  --kbd-box-shadow:
-    inset 0 -0.05em 0.5em var(--gray-a3),
-    inset 0 0.05em var(--gray-a11),
-    inset 0 0.25em 0.5em var(--gray-a2),
-    inset 0 -0.1em var(--black-a11),
-    0 0 0 0.075em var(--gray-a7),
-    0 0.08em 0.17em var(--black-a12);
-}
+
 
 .rt-Kbd {
   display: inline-flex;
@@ -30,30 +10,49 @@
   flex-shrink: 0;
   font-family: var(--default-font-family);
   font-weight: normal;
-  vertical-align: text-top;
+  vertical-align: middle;
   white-space: nowrap;
   user-select: none;
 
   position: relative;
-  top: -0.03em;
+  top: var(--classic-elevation-offset);
 
-  font-size: 0.75em;
   min-width: 1.75em;
-  line-height: 1.7em;
   box-sizing: border-box;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  padding-bottom: 0.05em;
-  word-spacing: -0.1em;
-  border-radius: calc(var(--radius-factor) * 0.35em);
-  letter-spacing: var(--letter-spacing, var(--default-letter-spacing));
+  word-spacing: var(--classic-word-spacing);
+  border-radius: max(var(--radius-2), var(--radius-full));
+  
+  /* Default sizing (size 2) */
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  padding: var(--space-1) var(--space-2);
 
   /* Make sure that the height is not stretched in a Flex/Grid layout */
   height: fit-content;
 
   color: var(--gray-12);
   background-color: var(--gray-1);
-  box-shadow: var(--kbd-box-shadow);
+  /* prettier-ignore */
+  box-shadow:
+    inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
+    inset 0 var(--classic-border-width) var(--white-a12),
+    inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+    inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
+    0 0 0 var(--classic-border-width) var(--gray-a5),
+    0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7);
+
+  :where(.dark, .dark-theme) &,
+  :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+      inset 0 var(--classic-border-width) var(--gray-a11),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+      inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+      0 0 0 var(--classic-border-width-thick) var(--gray-a7),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+  }
   transition: box-shadow 120ms, background-color 120ms;
 
   &:where(:any-link, button) {
@@ -61,20 +60,62 @@
       &:where(:hover) {
         transition-duration: 40ms, 40ms;
         background-color: var(--color-background);
-        box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2), 
+          inset 0 var(--classic-border-width) var(--white-a12),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
+          0 0 0 var(--classic-border-width) var(--gray-a5),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+
+        :where(.dark, .dark-theme) &,
+        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+                  /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+          inset 0 var(--classic-border-width) var(--gray-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--gray-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+        }
       }
     }
     &:where([data-state='open']) {
       transition-duration: 40ms, 40ms;
       background-color: var(--color-background);
-      box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
+              /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 var(--classic-border-width) var(--white-a12),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 calc(-1 * var(--classic-border-width)) var(--gray-a6),
+          0 0 0 var(--classic-border-width) var(--gray-a5),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--gray-a7),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+
+      :where(.dark, .dark-theme) &,
+      :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--gray-a3),
+          inset 0 var(--classic-border-width) var(--gray-a11),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--gray-a2),
+          inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+          0 0 0 var(--classic-border-width-thick) var(--gray-a7),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
+          0 0 0 var(--classic-border-width) var(--gray-a5);
+      }
     }
     &:where(:active:not([data-state='open'])) {
-      padding-top: 0.05em;
+      padding-top: var(--classic-border-width);
       padding-bottom: 0;
       transition-duration: 40ms, 40ms;
       background-color: var(--gray-2);
-      box-shadow: inset 0 0.05em var(--black-a3), 0 0 0 0.05em var(--gray-a7);
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--gray-a7);
     }
     &:where(:focus-visible) {
       outline: 2px solid var(--focus-8);
@@ -91,40 +132,67 @@
 @breakpoints {
   .rt-Kbd {
     &:where(.rt-r-size-1) {
-      font-size: calc(var(--font-size-1) * 0.8);
-      --letter-spacing: var(--letter-spacing-1);
+      font-size: var(--font-size-0);
+      line-height: var(--line-height-0);
+      letter-spacing: var(--letter-spacing-0);
+      padding: calc(var(--space-1) * 0.5) calc(var(--space-1) * 1.5);
+      border-radius: max(var(--radius-1), var(--radius-full));
     }
     &:where(.rt-r-size-2) {
-      font-size: calc(var(--font-size-2) * 0.8);
-      --letter-spacing: var(--letter-spacing-2);
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
+      padding: var(--space-1) var(--space-2);
+      border-radius: max(var(--radius-2), var(--radius-full));
     }
     &:where(.rt-r-size-3) {
-      font-size: calc(var(--font-size-3) * 0.8);
-      --letter-spacing: var(--letter-spacing-3);
+      font-size: var(--font-size-2);
+      line-height: var(--line-height-2);
+      letter-spacing: var(--letter-spacing-2);
+      padding: var(--space-1) calc(var(--space-2) * 1.25);
+      border-radius: max(var(--radius-2), var(--radius-full));
     }
     &:where(.rt-r-size-4) {
-      font-size: calc(var(--font-size-4) * 0.8);
-      --letter-spacing: var(--letter-spacing-4);
+      font-size: var(--font-size-3);
+      line-height: var(--line-height-3);
+      letter-spacing: var(--letter-spacing-3);
+      padding: calc(var(--space-1) * 1.25) calc(var(--space-2) * 1.5);
+      border-radius: max(var(--radius-3), var(--radius-full));
     }
     &:where(.rt-r-size-5) {
-      font-size: calc(var(--font-size-5) * 0.8);
-      --letter-spacing: var(--letter-spacing-5);
+      font-size: var(--font-size-4);
+      line-height: var(--line-height-4);
+      letter-spacing: var(--letter-spacing-4);
+      padding: calc(var(--space-1) * 1.5) var(--space-3);
+      border-radius: max(var(--radius-3), var(--radius-full));
     }
     &:where(.rt-r-size-6) {
-      font-size: calc(var(--font-size-6) * 0.8);
-      --letter-spacing: var(--letter-spacing-6);
+      font-size: var(--font-size-5);
+      line-height: var(--line-height-5);
+      letter-spacing: var(--letter-spacing-5);
+      padding: calc(var(--space-1) * 1.75) calc(var(--space-3) * 1.25);
+      border-radius: max(var(--radius-4), var(--radius-full));
     }
     &:where(.rt-r-size-7) {
-      font-size: calc(var(--font-size-7) * 0.8);
-      --letter-spacing: var(--letter-spacing-7);
+      font-size: var(--font-size-6);
+      line-height: var(--line-height-6);
+      letter-spacing: var(--letter-spacing-6);
+      padding: var(--space-2) calc(var(--space-3) * 1.5);
+      border-radius: max(var(--radius-4), var(--radius-full));
     }
     &:where(.rt-r-size-8) {
-      font-size: calc(var(--font-size-8) * 0.8);
-      --letter-spacing: var(--letter-spacing-8);
+      font-size: var(--font-size-7);
+      line-height: var(--line-height-7);
+      letter-spacing: var(--letter-spacing-7);
+      padding: calc(var(--space-2) * 1.25) var(--space-4);
+      border-radius: max(var(--radius-5), var(--radius-full));
     }
     &:where(.rt-r-size-9) {
-      font-size: calc(var(--font-size-9) * 0.8);
-      --letter-spacing: var(--letter-spacing-9);
+      font-size: var(--font-size-8);
+      line-height: var(--line-height-8);
+      letter-spacing: var(--letter-spacing-8);
+      padding: calc(var(--space-2) * 1.5) calc(var(--space-4) * 1.25);
+      border-radius: max(var(--radius-5), var(--radius-full));
     }
   }
 }

package/src/components/popover.css

@@ -1,10 +1,13 @@
 .rt-PopoverContent {
-  background-color: var(--color-panel-solid);
+  /* Base state: use --color-panel which adapts to theme context */
+  background-color: var(--color-panel);
+  backdrop-filter: var(--backdrop-filter-panel);
   box-shadow: var(--shadow-5);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
   overflow: auto;
   position: relative;
+  transition: var(--transition-background-blur);
 
   --inset-padding-top: var(--popover-content-padding);
   --inset-padding-right: var(--popover-content-padding);
@@ -14,6 +17,22 @@
   box-sizing: border-box;
 
   transform-origin: var(--radix-popover-content-transform-origin);
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  /* Component-level overrides (higher specificity) */
+  &:where([data-panel-background='solid']) {
+    background-color: var(--color-panel-solid);
+    backdrop-filter: none;
+  }
+
+  &:where([data-panel-background='translucent']) {
+    background-color: var(--color-panel-translucent);
+    backdrop-filter: var(--backdrop-filter-panel);
+  }
 }
 
 /***************************************************************************************************
@@ -26,7 +45,7 @@
   .rt-PopoverContent {
     &:where(.rt-r-size-1) {
       --popover-content-padding: var(--space-3);
-      border-radius: var(--radius-4);
+      border-radius: var(--radius-3);
     }
     &:where(.rt-r-size-2) {
       --popover-content-padding: var(--space-4);
@@ -38,7 +57,7 @@
     }
     &:where(.rt-r-size-4) {
       --popover-content-padding: var(--space-6);
-      border-radius: var(--radius-5);
+      border-radius: var(--radius-6);
     }
   }
 }

package/src/components/popover.props.tsx

@@ -5,6 +5,7 @@ import { widthPropDefs } from '../props/width.props.js';
 import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 
 const contentSizes = ['1', '2', '3', '4'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const popoverContentPropDefs = {
   ...asChildPropDef,
@@ -15,6 +16,7 @@ const popoverContentPropDefs = {
     default: '2',
     responsive: true,
   },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '480px' },
@@ -24,6 +26,7 @@ const popoverContentPropDefs = {
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;
   size: PropDef<(typeof contentSizes)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 type PopoverContentOwnProps = GetPropDefTypes<

package/src/components/popover.tsx

@@ -6,6 +6,7 @@ import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { popoverContentPropDefs } from './popover.props.js';
 import { Theme } from './theme.js';
+import { useThemeContext } from './theme.js';
 
 import type { PopoverContentOwnProps } from './popover.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -24,7 +25,7 @@ const PopoverTrigger = React.forwardRef<PopoverTriggerElement, PopoverTriggerPro
     <PopoverPrimitive.Trigger {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </PopoverPrimitive.Trigger>
-  )
+  ),
 );
 PopoverTrigger.displayName = 'Popover.Trigger';
 
@@ -36,10 +37,15 @@ interface PopoverContentProps
 }
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
   (props, forwardedRef) => {
-    const { className, forceMount, container, ...contentProps } = extractProps(
-      props,
-      popoverContentPropDefs
-    );
+    const themeContext = useThemeContext();
+    const panelBackground = props.panelBackground ?? themeContext.panelBackground;
+    const {
+      className,
+      forceMount,
+      container,
+      panelBackground: _,
+      ...contentProps
+    } = extractProps(props, popoverContentPropDefs);
     return (
       <PopoverPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -49,12 +55,13 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             collisionPadding={10}
             {...contentProps}
             ref={forwardedRef}
+            data-panel-background={panelBackground}
             className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
           />
         </Theme>
       </PopoverPrimitive.Portal>
     );
-  }
+  },
 );
 PopoverContent.displayName = 'Popover.Content';
 
@@ -66,7 +73,7 @@ const PopoverClose = React.forwardRef<PopoverCloseElement, PopoverCloseProps>(
     <PopoverPrimitive.Close {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </PopoverPrimitive.Close>
-  )
+  ),
 );
 PopoverClose.displayName = 'Popover.Close';
 
@@ -76,7 +83,7 @@ interface PopoverAnchorProps
 const PopoverAnchor = React.forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
   ({ children, ...props }, forwardedRef) => (
     <PopoverPrimitive.Anchor {...props} ref={forwardedRef} />
-  )
+  ),
 );
 
 PopoverAnchor.displayName = 'Popover.Anchor';