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/Autocomplete.stories.tsx

@@ -37,9 +37,17 @@ import { Avatar } from '../src/avatar';
 import {
   CalculatorIcon,
   CalendarIcon,
+  CircleUserIcon,
+  CogIcon,
   CreditCardIcon,
+  FingerprintIcon,
+  FlameIcon,
+  KanbanIcon,
+  MessageSquareDotIcon,
   SettingsIcon,
+  SlidersHorizontalIcon,
   SmileIcon,
+  TagIcon,
   UserIcon,
 } from 'lucide-react';
 import { Icon } from '../src/icon';
@@ -135,45 +143,52 @@ export function CommandPalette() {
 }
 
 const commands2: Array<{
-  label: string;
+  label?: string;
   items: Array<{
     label: string;
     icon: React.ReactNode;
     shortcut?: string;
   }>;
 }> = [
   {
-    label: 'Suggestions',
     items: [
       {
-        label: 'Calendar',
-        icon: <CalendarIcon />,
+        label: 'Preferences',
+        icon: <SlidersHorizontalIcon />,
       },
       {
-        label: 'Search Emoji',
-        icon: <SmileIcon />,
+        label: 'Profile',
+        icon: <CircleUserIcon />,
+      },
+      {
+        label: 'Notifications',
+        icon: <MessageSquareDotIcon />,
+      },
+      {
+        label: 'Security & access',
+        icon: <FingerprintIcon />,
       },
       {
-        label: 'Calculator',
-        icon: <CalculatorIcon />,
+        label: 'Connected accounts',
+        icon: <CogIcon />,
+        shortcut: '⌘,',
       },
     ],
   },
   {
-    label: 'Settings',
+    label: 'Issues',
     items: [
       {
-        label: 'Profile',
-        icon: <UserIcon />,
+        label: 'Label',
+        icon: <TagIcon />,
       },
       {
-        label: 'Billing',
-        icon: <CreditCardIcon />,
+        label: 'Template',
+        icon: <KanbanIcon />,
       },
       {
-        label: 'Settings',
-        icon: <SettingsIcon />,
-        shortcut: '⌘,',
+        label: 'SLAs',
+        icon: <FlameIcon />,
       },
     ],
   },
@@ -226,17 +241,19 @@ export function CommandJ() {
                 </EmptyState>
               )}
             >
-              {commands2.map((group) => (
-                <MenuSection key={group.label} title={group.label}>
-                  {group.items.map(({ label, icon, shortcut }) => (
-                    <MenuItem key={label} textValue={label}>
-                      <Icon>{icon}</Icon>
-                      <MenuItemLabel>{label}</MenuItemLabel>
-                      {shortcut && <Kbd outline>{shortcut}</Kbd>}
-                    </MenuItem>
-                  ))}
-                </MenuSection>
-              ))}
+              {commands2.map((group, index) => {
+                return (
+                  <MenuSection key={index} title={group.label}>
+                    {group.items.map(({ label, icon, shortcut }) => (
+                      <MenuItem key={label} textValue={label}>
+                        <Icon>{icon}</Icon>
+                        <MenuItemLabel>{label}</MenuItemLabel>
+                        {shortcut && <Kbd>{shortcut}</Kbd>}
+                      </MenuItem>
+                    ))}
+                  </MenuSection>
+                );
+              })}
             </Menu>
           </Autocomplete>
         </Dialog>

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>