Allow dark menu on light mode

Author: zaichaopan

src/checkbox.tsx

@@ -160,7 +160,7 @@ function getCheckboxStyle({
   const style = {
     checkbox: [],
     card: [
-      'flex-1 rounded-lg px-4 py-3 items-start',
+      'text-wrap text-balance flex-1 rounded-lg px-4 py-3 items-start',
       '[&>[data-check-indicator]:not([class*=mt-])]:mt-1',
       '[&_[data-ui=icon]:not([class*=size-])]:w-4 [&_[data-ui=icon]:not([class*=size-])]:h-[1lh]',
       'ring ring-border',

src/menu.tsx

@@ -197,7 +197,7 @@ export function MenuItem({ destructive, ...props }: MenuItemProps) {
         props.className,
         (className, { isFocused, isDisabled }) => {
           return twMerge([
-            'group rounded-sm outline-hidden',
+            'group rounded-sm outline-hidden text-(--foreground)',
             'flex items-center gap-x-1.5',
             'px-2 py-2.5 sm:py-1.5',
             'text-base/6 sm:text-sm/6',

stories/Menu.mdx

@@ -16,6 +16,12 @@ Menu buttons are <a href="./?path=/docs/button--docs" target="_blank">**Buttons*
 
 <Canvas of={MenuStories.MenuButtons} />
 
+## Dark dropdown on light mode
+
+You can add `dark` class to the `MenuPopover` component to render a dark dropdown in light mode.
+
+<Canvas of={MenuStories.DarkDropdownOnLightMode} />
+
 ## Disabled state
 
 <Canvas of={MenuStories.DisabledState} />

stories/Menu.stories.tsx

@@ -67,7 +67,7 @@ export const BasicExample = () => {
   return (
     <MenuTrigger>
       <MenuButton>Actions</MenuButton>
-      <MenuPopover>
+      <MenuPopover className="">
         <Menu>
           <MenuItem>Copy</MenuItem>
           <MenuItem>Cut</MenuItem>
@@ -95,6 +95,22 @@ export const MenuButtons = () => {
   );
 };
 
+export const DarkDropdownOnLightMode = () => {
+  return (
+    <MenuTrigger>
+      <MenuButton>Actions</MenuButton>
+      <MenuPopover className="dark">
+        <Menu>
+          <MenuItem>Copy</MenuItem>
+          <MenuItem>Cut</MenuItem>
+          <MenuItem>Paste</MenuItem>
+          <MenuItem>Delete</MenuItem>
+        </Menu>
+      </MenuPopover>
+    </MenuTrigger>
+  );
+};
+
 export const DisabledState = () => {
   return (
     <MenuTrigger>
@@ -349,7 +365,7 @@ export const ItemWithIconShortcutHintsAndDescriptions = () => {
   return (
     <MenuTrigger>
       <MenuButton>Actions</MenuButton>
-      <MenuPopover>
+      <MenuPopover className="dark">
         <Menu>
           <MenuItem>
             <Icon>

stories/RadioGroup.stories.tsx

@@ -503,20 +503,29 @@ export function RadioCards() {
             {
               name: 'Pick up your order at your local store',
               description: '2-5 business days',
+              default: true,
             },
             {
               name: 'Delivery to GLS collection store',
               description: 'Arrives before Monday, Nov 6',
+              default: false,
             },
             {
               name: 'GLS delivery to selected address',
               description: 'Arrives before Monday, Nov 6',
+              default: false,
             },
           ].map((option) => {
             return (
               <Radio key={option.name} value={option.name}>
                 <div className="flex flex-1 flex-col">
-                  <div className="flex font-medium">{option.name}</div>
+                  <div className="flex font-medium">
+                    {option.name}
+
+                    {option.default && (
+                      <Badge className="ms-auto">Default</Badge>
+                    )}
+                  </div>
                   <div className="text-gray-500">{option.description}</div>
                 </div>
               </Radio>