@kushagradhawan/kookie-ui 0.1.17 → 0.1.18

package/src/components/context-menu.tsx

@@ -15,6 +15,7 @@ import { Theme, useThemeContext } from './theme.js';
 import { ThickCheckIcon, ThickChevronRightIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
+import { Kbd } from './kbd.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -34,7 +35,7 @@ const ContextMenuTrigger = React.forwardRef<ContextMenuTriggerElement, ContextMe
     <ContextMenuPrimitive.Trigger {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </ContextMenuPrimitive.Trigger>
-  )
+  ),
 );
 ContextMenuTrigger.displayName = 'ContextMenu.Trigger';
 
@@ -54,17 +55,24 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
       size = contextMenuContentPropDefs.size.default,
       variant = contextMenuContentPropDefs.variant.default,
       highContrast = contextMenuContentPropDefs.highContrast.default,
+      panelBackground = props.panelBackground ?? themeContext.panelBackground,
     } = props;
-    const { className, children, color, container, forceMount, ...contentProps } = extractProps(
-      props,
-      contextMenuContentPropDefs
-    );
+    const {
+      className,
+      children,
+      color,
+      container,
+      forceMount,
+      panelBackground: _,
+      ...contentProps
+    } = extractProps(props, contextMenuContentPropDefs);
     const resolvedColor = color || themeContext.accentColor;
     return (
       <ContextMenuPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
           <ContextMenuPrimitive.Content
             data-accent-color={resolvedColor}
+            data-panel-background={panelBackground}
             alignOffset={-Number(size) * 4}
             collisionPadding={10}
             {...contentProps}
@@ -74,15 +82,15 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
               'rt-PopperContent',
               'rt-BaseMenuContent',
               'rt-ContextMenuContent',
-              className
+              className,
             )}
           >
             <ScrollArea type="auto">
               <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>
                 <ContextMenuContentContext.Provider
                   value={React.useMemo(
-                    () => ({ size, variant, color: resolvedColor, highContrast }),
-                    [size, variant, resolvedColor, highContrast]
+                    () => ({ size, variant, color: resolvedColor, highContrast, panelBackground }),
+                    [size, variant, resolvedColor, highContrast, panelBackground],
                   )}
                 >
                   {children}
@@ -93,7 +101,7 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
         </Theme>
       </ContextMenuPrimitive.Portal>
     );
-  }
+  },
 );
 ContextMenuContent.displayName = 'ContextMenu.Content';
 
@@ -108,7 +116,7 @@ const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLa
       ref={forwardedRef}
       className={classNames('rt-BaseMenuLabel', 'rt-ContextMenuLabel', className)}
     />
-  )
+  ),
 );
 ContextMenuLabel.displayName = 'ContextMenu.Label';
 
@@ -134,10 +142,14 @@ const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItem
         className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ContextMenuItem', className)}
       >
         <Slot.Slottable>{children}</Slot.Slottable>
-        {shortcut && <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">{shortcut}</div>}
+        {shortcut && (
+          <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">
+            <Kbd size="1">{shortcut}</Kbd>
+          </div>
+        )}
       </ContextMenuPrimitive.Item>
     );
-  }
+  },
 );
 ContextMenuItem.displayName = 'ContextMenu.Item';
 
@@ -152,7 +164,7 @@ const ContextMenuGroup = React.forwardRef<ContextMenuGroupElement, ContextMenuGr
       ref={forwardedRef}
       className={classNames('rt-BaseMenuGroup', 'rt-ContextMenuGroup', className)}
     />
-  )
+  ),
 );
 ContextMenuGroup.displayName = 'ContextMenu.Group';
 
@@ -198,7 +210,7 @@ const ContextMenuRadioItem = React.forwardRef<
         'rt-BaseMenuRadioItem',
         'rt-ContextMenuItem',
         'rt-ContextMenuRadioItem',
-        className
+        className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
@@ -237,14 +249,18 @@ const ContextMenuCheckboxItem = React.forwardRef<
         'rt-BaseMenuCheckboxItem',
         'rt-ContextMenuItem',
         'rt-ContextMenuCheckboxItem',
-        className
+        className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
       <ContextMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator">
         <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
       </ContextMenuPrimitive.ItemIndicator>
-      {shortcut && <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">{shortcut}</div>}
+      {shortcut && (
+        <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">
+          <Kbd size="1">{shortcut}</Kbd>
+        </div>
+      )}
     </ContextMenuPrimitive.CheckboxItem>
   );
 });
@@ -275,7 +291,7 @@ const ContextMenuSubTrigger = React.forwardRef<
         'rt-BaseMenuSubTrigger',
         'rt-ContextMenuItem',
         'rt-ContextMenuSubTrigger',
-        className
+        className,
       )}
     >
       {children}
@@ -296,16 +312,25 @@ const ContextMenuSubContent = React.forwardRef<
   ContextMenuSubContentElement,
   ContextMenuSubContentProps
 >((props, forwardedRef) => {
-  const { size, variant, color, highContrast } = React.useContext(ContextMenuContentContext);
-  const { className, children, container, forceMount, ...subContentProps } = extractProps(
-    { size, variant, color, highContrast, ...props },
-    contextMenuContentPropDefs
+  const { size, variant, color, highContrast, panelBackground } =
+    React.useContext(ContextMenuContentContext);
+  const {
+    className,
+    children,
+    container,
+    forceMount,
+    panelBackground: _,
+    ...subContentProps
+  } = extractProps(
+    { size, variant, color, highContrast, panelBackground, ...props },
+    contextMenuContentPropDefs,
   );
   return (
     <ContextMenuPrimitive.Portal container={container} forceMount={forceMount}>
       <Theme asChild>
         <ContextMenuPrimitive.SubContent
           data-accent-color={color}
+          data-panel-background={panelBackground}
           alignOffset={-Number(size) * 4}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}
@@ -319,7 +344,7 @@ const ContextMenuSubContent = React.forwardRef<
             'rt-BaseMenuSubContent',
             'rt-ContextMenuContent',
             'rt-ContextMenuSubContent',
-            className
+            className,
           )}
         >
           <ScrollArea type="auto">

package/src/components/dialog.props.tsx

@@ -7,6 +7,7 @@ import type { PropDef, GetPropDefTypes } from '../props/prop-def.js';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const alignValues = ['start', 'center'] as const;
 const contentSizes = ['1', '2', '3', '4'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const dialogContentPropDefs = {
   ...asChildPropDef,
@@ -23,6 +24,7 @@ const dialogContentPropDefs = {
     default: '3',
     responsive: true,
   },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   width: widthPropDefs.width,
   minWidth: widthPropDefs.minWidth,
   maxWidth: { ...widthPropDefs.maxWidth, default: '600px' },
@@ -30,6 +32,7 @@ const dialogContentPropDefs = {
 } satisfies {
   align: PropDef<(typeof alignValues)[number]>;
   size: PropDef<(typeof contentSizes)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   width: PropDef<string>;
   minWidth: PropDef<string>;
   maxWidth: PropDef<string>;

package/src/components/dialog.tsx

@@ -28,7 +28,7 @@ const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>
     <DialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </DialogPrimitive.Trigger>
-  )
+  ),
 );
 DialogTrigger.displayName = 'Dialog.Trigger';
 
@@ -40,9 +40,23 @@ interface DialogContentProps
 }
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const { align: alignPropDef, ...propDefs } = dialogContentPropDefs;
+    const {
+      align: alignPropDef,
+      panelBackground: panelBackgroundPropDef,
+      ...propDefs
+    } = dialogContentPropDefs;
     const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
-    const { className, forceMount, container, ...contentProps } = extractProps(props, propDefs);
+    const { panelBackground } = extractProps(
+      { panelBackground: props.panelBackground },
+      { panelBackground: panelBackgroundPropDef },
+    );
+    const {
+      className,
+      forceMount,
+      container,
+      panelBackground: _,
+      ...contentProps
+    } = extractProps(props, propDefs);
     return (
       <DialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -55,6 +69,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                   {...contentProps}
                   ref={forwardedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
+                  data-panel-background={panelBackground}
                 />
               </div>
             </div>
@@ -62,7 +77,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
         </Theme>
       </DialogPrimitive.Portal>
     );
-  }
+  },
 );
 DialogContent.displayName = 'Dialog.Content';
 
@@ -73,7 +88,7 @@ const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
     <DialogPrimitive.Title asChild>
       <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Title>
-  )
+  ),
 );
 DialogTitle.displayName = 'Dialog.Title';
 
@@ -84,7 +99,7 @@ const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescr
     <DialogPrimitive.Description asChild>
       <Text as="p" size="3" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Description>
-  )
+  ),
 );
 DialogDescription.displayName = 'Dialog.Description';
 
@@ -96,7 +111,7 @@ const DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(
     <DialogPrimitive.Close {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </DialogPrimitive.Close>
-  )
+  ),
 );
 DialogClose.displayName = 'Dialog.Close';
 

package/src/components/dropdown-menu.css

@@ -9,8 +9,8 @@
   flex-shrink: 0;
 
   /* Default size for when not in a sized button */
-  width: 9px;
-  height: 9px;
+  width: var(--trigger-icon-size-default);
+  height: var(--trigger-icon-size-default);
 }
 
 /***************************************************************************************************
@@ -22,25 +22,25 @@
 @breakpoints {
   /* Size 1 Button */
   .rt-Button:where(.rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
-    width: 10px;
-    height: 10px;
+    width: var(--trigger-icon-size-1);
+    height: var(--trigger-icon-size-1);
   }
 
   /* Size 2 Button */
   .rt-Button:where(.rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
-    width: 11px;
-    height: 11px;
+    width: var(--trigger-icon-size-2);
+    height: var(--trigger-icon-size-2);
   }
 
   /* Size 3 Button */
   .rt-Button:where(.rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
-    width: 11px;
-    height: 11px;
+    width: var(--trigger-icon-size-3);
+    height: var(--trigger-icon-size-3);
   }
 
   /* Size 4 Button */
   .rt-Button:where(.rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
-    width: 12px;
-    height: 12px;
+    width: var(--trigger-icon-size-4);
+    height: var(--trigger-icon-size-4);
   }
 }

package/src/components/dropdown-menu.tsx

@@ -15,6 +15,7 @@ import { Theme, useThemeContext } from './theme.js';
 import { ChevronDownIcon, ThickCheckIcon, ThickChevronRightIcon, ThickDotIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
+import { Kbd } from './kbd.js';
 
 import type { IconProps } from './icons.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -55,17 +56,24 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
       size = dropdownMenuContentPropDefs.size.default,
       variant = dropdownMenuContentPropDefs.variant.default,
       highContrast = dropdownMenuContentPropDefs.highContrast.default,
+      panelBackground = props.panelBackground ?? themeContext.panelBackground,
     } = props;
-    const { className, children, color, container, forceMount, ...contentProps } = extractProps(
-      props,
-      dropdownMenuContentPropDefs,
-    );
+    const {
+      className,
+      children,
+      color,
+      container,
+      forceMount,
+      panelBackground: _,
+      ...contentProps
+    } = extractProps(props, dropdownMenuContentPropDefs);
     const resolvedColor = color || themeContext.accentColor;
     return (
       <DropdownMenuPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
           <DropdownMenuPrimitive.Content
             data-accent-color={resolvedColor}
+            data-panel-background={panelBackground}
             align="start"
             sideOffset={4}
             collisionPadding={10}
@@ -83,8 +91,8 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
               <div className={classNames('rt-BaseMenuViewport', 'rt-DropdownMenuViewport')}>
                 <DropdownMenuContentContext.Provider
                   value={React.useMemo(
-                    () => ({ size, variant, color: resolvedColor, highContrast }),
-                    [size, variant, resolvedColor, highContrast],
+                    () => ({ size, variant, color: resolvedColor, highContrast, panelBackground }),
+                    [size, variant, resolvedColor, highContrast, panelBackground],
                   )}
                 >
                   {children}
@@ -136,7 +144,11 @@ const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuI
         className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-DropdownMenuItem', className)}
       >
         <Slot.Slottable>{children}</Slot.Slottable>
-        {shortcut && <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">{shortcut}</div>}
+        {shortcut && (
+          <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">
+            <Kbd size="1">{shortcut}</Kbd>
+          </div>
+        )}
       </DropdownMenuPrimitive.Item>
     );
   },
@@ -246,7 +258,11 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       <DropdownMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-DropdownMenuItemIndicator">
         <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
       </DropdownMenuPrimitive.ItemIndicator>
-      {shortcut && <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">{shortcut}</div>}
+      {shortcut && (
+        <div className="rt-BaseMenuShortcut rt-DropdownMenuShortcut">
+          <Kbd size="1">{shortcut}</Kbd>
+        </div>
+      )}
     </DropdownMenuPrimitive.CheckboxItem>
   );
 });
@@ -298,9 +314,18 @@ const DropdownMenuSubContent = React.forwardRef<
   DropdownMenuSubContentElement,
   DropdownMenuSubContentProps
 >((props, forwardedRef) => {
-  const { size, variant, color, highContrast } = React.useContext(DropdownMenuContentContext);
-  const { className, children, container, forceMount, ...subContentProps } = extractProps(
-    { size, variant, color, highContrast, ...props },
+  const { size, variant, color, highContrast, panelBackground } = React.useContext(
+    DropdownMenuContentContext,
+  );
+  const {
+    className,
+    children,
+    container,
+    forceMount,
+    panelBackground: _,
+    ...subContentProps
+  } = extractProps(
+    { size, variant, color, highContrast, panelBackground, ...props },
     dropdownMenuContentPropDefs,
   );
   return (
@@ -308,6 +333,7 @@ const DropdownMenuSubContent = React.forwardRef<
       <Theme asChild>
         <DropdownMenuPrimitive.SubContent
           data-accent-color={color}
+          data-panel-background={panelBackground}
           alignOffset={-Number(size) * 4}
           // Side offset accounts for the outer solid box-shadow
           sideOffset={1}

package/src/components/icon-button.css

@@ -16,34 +16,62 @@
     &:where(.rt-r-size-1) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: calc(var(--space-3) * 1.175);
-        height: calc(var(--space-3) * 1.175);
+        width: var(--content-icon-size-1);
+        height: var(--content-icon-size-1);
       }
     }
     &:where(.rt-r-size-2) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-4);
-        height: var(--space-4);
+        width: var(--content-icon-size-2);
+        height: var(--content-icon-size-2);
       }
     }
     &:where(.rt-r-size-3) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-5);
-        height: var(--space-5);
+        width: var(--content-icon-size-3);
+        height: var(--content-icon-size-3);
       }
     }
     &:where(.rt-r-size-4) {
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
-        width: var(--space-5);
-        height: var(--space-5);
+        width: var(--content-icon-size-4);
+        height: var(--content-icon-size-4);
       }
     }
   }
 
   .rt-IconButton:where(.rt-variant-ghost) {
+    &:where([data-flush='true']) {
+      /* We reset the defined margin variables to avoid inheriting them from a higher component */
+      /* If a margin IS defined on the component itself, the utility class will win and reset it */
+      --margin-top: 0px;
+      --margin-right: 0px;
+      --margin-bottom: 0px;
+      --margin-left: 0px;
+
+      /* Define the overrides to incorporate the negative margins using ghost padding */
+      --margin-top-override: calc(var(--margin-top) - var(--icon-button-ghost-padding));
+      --margin-right-override: calc(var(--margin-right) - var(--icon-button-ghost-padding));
+      --margin-bottom-override: calc(var(--margin-bottom) - var(--icon-button-ghost-padding));
+      --margin-left-override: calc(var(--margin-left) - var(--icon-button-ghost-padding));
+
+      margin-top: var(--margin-top-override);
+      margin-right: var(--margin-right-override);
+      margin-bottom: var(--margin-bottom-override);
+      margin-left: var(--margin-left-override);
+
+      /* Reset the overrides on direct children */
+      :where(&) > * {
+        --margin-top-override: initial;
+        --margin-right-override: initial;
+        --margin-bottom-override: initial;
+        --margin-left-override: initial;
+      }
+    }
+
     &:where(.rt-r-size-1) {
       --icon-button-ghost-padding: var(--space-1);
     }