@moises.ai/design-system 3.12.2 → 3.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -20,6 +20,7 @@ export const DropdownMenu = memo(
     closeOnSelect = true,
     sideOffset = 5,
     matchTriggerWidth = false,
+    showSelectedItemBackground = true,
     wrapCloseMenu,
     ...props
   }) => {
@@ -87,6 +88,7 @@ export const DropdownMenu = memo(
                           onSelectionChange,
                           closeOnSelect,
                           closeMenu,
+                          showSelectedItemBackground,
                         ),
                       )}
                     </ScrollArea>
@@ -116,6 +118,7 @@ export const DropdownMenu = memo(
                         onSelectionChange,
                         closeOnSelect,
                         closeMenu,
+                        showSelectedItemBackground,
                       ),
                     )}
                   </DropdownMenuRadix.Content>

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -231,6 +231,58 @@ The \`options\` prop accepts an array of objects with the following types:
         defaultValue: { summary: 'false' },
       },
     },
+    maxHeight: {
+      control: { type: 'number' },
+      description:
+        'Maximum content height. When provided, wraps menu content in a vertical ScrollArea',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    sideOffset: {
+      control: { type: 'number' },
+      description: 'Distance in pixels between trigger and menu content',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '5' },
+      },
+    },
+    showSelectedItemBackground: {
+      control: { type: 'boolean' },
+      description:
+        'When true, checked checkbox items get the selected background style',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    open: {
+      control: { type: 'boolean' },
+      description:
+        'Controlled open state. When defined, menu visibility is controlled externally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onOpenChange: {
+      control: false,
+      description: 'Callback fired whenever open state changes',
+      table: {
+        type: { summary: '(open: boolean) => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    wrapCloseMenu: {
+      control: false,
+      description:
+        'Allows wrapping internal close behavior and receiving a close callback',
+      table: {
+        type: { summary: '(close: () => void) => () => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 }
 
@@ -416,6 +468,40 @@ export const MatchTriggerWidth = {
   ),
 }
 
+export const CheckboxWithoutSelectedBackground = {
+  args: {
+    showSelectedItemBackground: false,
+    side: 'bottom',
+    align: 'end',
+    trigger: (
+      <IconButton>
+        <DotsVerticalIcon />
+      </IconButton>
+    ),
+    options: [
+      {
+        type: 'checkbox',
+        key: 'option-1',
+        label: 'Voice',
+        checked: true,
+        onChange: (checked) => console.log('Voice:', checked),
+      },
+      {
+        type: 'checkbox',
+        key: 'option-2',
+        label: 'Instrumental',
+        checked: false,
+        onChange: (checked) => console.log('Instrumental:', checked),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex justify="center" align="start" height="300px">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
 export const CustomWithSwitch = {
   render: () => {
     const [access, setAccess] = useState('private')

package/src/components/SpecialDialog/SpecialDialog.jsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames'
+import { Dialog, Flex } from '@radix-ui/themes'
+import { CloseIcon } from '../../icons/CloseIcon'
+import styles from './SpecialDialog.module.css'
+
+export const SpecialDialog = ({
+  title,
+  description,
+  open,
+  onOpenChange,
+  children,
+  icon,
+  image,
+  imageAlt = '',
+  className,
+  ...props
+}) => {
+  const showImage = Boolean(image)
+  const showIcon = Boolean(icon) && !showImage
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Content
+        className={classNames(styles.content, className)}
+        {...props}
+      >
+        <div className={styles.hero}>
+          {showImage ? (
+            <img
+              className={styles.heroImage}
+              src={image}
+              alt={imageAlt}
+            />
+          ) : null}
+          {showIcon ? <div className={styles.heroIcon}>{icon}</div> : null}
+        </div>
+
+        <Dialog.Close asChild>
+          <button
+            type="button"
+            className={styles.close}
+            aria-label="Close"
+          >
+            <CloseIcon width={18} height={18} color="white" />
+          </button>
+        </Dialog.Close>
+
+        <Flex p="5" align="center" direction="column" gap="5">
+          <Flex align="center" direction="column" gap="2">
+            <Dialog.Title size="5" align="center" weight="bold" mb="0">
+              {title}
+            </Dialog.Title>
+            <Dialog.Description align="center" size="2" mb="0">
+              {description}
+            </Dialog.Description>
+          </Flex>
+
+          {children}
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}
+
+SpecialDialog.displayName = 'SpecialDialog'

package/src/components/SpecialDialog/SpecialDialog.module.css

@@ -0,0 +1,69 @@
+/* Overrides Radix .rt-BaseDialogContent (shadow reads as an outline) */
+.content {
+  position: relative;
+  width: 360px;
+  max-width: 360px;
+  padding: 0;
+  overflow: hidden;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.content:focus,
+.content:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.hero {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 180px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #013641 0%, #011a1f 100%);
+}
+
+.heroImage {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.heroIcon {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--gray-1, #fcfcfd);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.close:focus-visible {
+  outline: 2px solid var(--cyan-8, #00a2c7);
+  outline-offset: 2px;
+}
+
+.close:hover {
+  opacity: 0.88;
+}

package/src/components/SpecialDialog/SpecialDialog.stories.jsx

@@ -0,0 +1,146 @@
+import { useState } from 'react'
+import { StarFilledIcon } from '@radix-ui/react-icons'
+import { fn } from '@storybook/test'
+import { SpecialDialog } from './SpecialDialog'
+import { Button } from '../Button/Button'
+
+export default {
+  title: 'Components/SpecialDialog',
+  component: SpecialDialog,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Usage
+
+\`\`\`jsx
+import { SpecialDialog, Button } from '@moises.ai/design-system'
+
+const MyComponent = () => {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button type="button" onClick={() => setOpen(true)}>
+        Open dialog
+      </Button>
+      <SpecialDialog
+        open={open}
+        onOpenChange={setOpen}
+        icon={<StarFilledIcon width={48} height={48} color="white" />}
+        title="Special Dialog"
+        description="This is a special dialog"
+      >
+        <Button variant="solid" color="cyan">Action</Button>
+      </SpecialDialog>
+    </>
+  )
+}
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      description:
+        'The dialog content - can be button, text or icon',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    open: {
+      description: 'When true, the dialog is visible (controlled)',
+      control: { type: 'boolean' },
+      table: {
+        type: { summary: 'boolean' },
+      },
+    },
+    onOpenChange: {
+      action: 'openChange',
+      description: 'Called with the next open state (use to sync controlled `open`)',
+      table: {
+        type: { summary: '(open: boolean) => void' },
+      },
+    },
+    icon: {
+      description:
+        'Optional icon centered in the header area (ignored if `image` is set)',
+      control: { disable: true },
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    image: {
+      description: 'Optional image URL for the header; `object-fit: cover`, fills the 180px header',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    imageAlt: {
+      description: 'Alt text for the header image',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  render: (args) => {
+    const [open, setOpen] = useState(false)
+    const onOpenChange = (next) => {
+      setOpen(next)
+      args.onOpenChange?.(next)
+    }
+    return (
+      <>
+        <Button type="button" variant="solid" color="cyan" onClick={() => setOpen(true)}>
+          Open dialog
+        </Button>
+
+        <SpecialDialog {...args} open={open} onOpenChange={onOpenChange}>
+          <Button size="4" variant="solid" color="cyan" style={{ width: '100%' }}>Action</Button>
+        </SpecialDialog>
+      </>
+    )
+  },
+  args: {
+    onOpenChange: fn(),
+    icon: <StarFilledIcon width={48} height={48} color="white" />,
+    title: 'Special Dialog',
+    description: 'This is a special dialog',
+  },
+}
+
+export const WithHeaderImage = {
+  render: (args) => {
+    const [open, setOpen] = useState(false)
+    const onOpenChange = (next) => {
+      setOpen(next)
+      args.onOpenChange?.(next)
+    }
+    return (
+      <>
+        <Button type="button" variant="solid" color="cyan" onClick={() => setOpen(true)}>
+          Open dialog
+        </Button>
+        <SpecialDialog {...args} open={open} onOpenChange={onOpenChange}>
+          <Button size="4" variant="solid" color="cyan" style={{ width: '100%' }}>Action</Button>
+        </SpecialDialog>
+      </>
+    )
+  },
+  args: {
+    onOpenChange: fn(),
+    image:
+      'https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=720&h=360&fit=crop',
+    imageAlt: 'Studio headphones',
+    title: 'Special Dialog',
+    description: 'Header uses an image with cover fit. Example action button is full width.',
+  },
+}

package/src/index.jsx

@@ -148,3 +148,4 @@ export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
+export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'

package/src/lib/menu/renderItem.jsx

@@ -15,6 +15,7 @@ export const createRenderItem = (MenuPrimitives) => {
     onSelectionChange,
     closeOnSelect = true,
     closeMenu,
+    showSelectedItemBackground = true,
   ) => {
     switch (opt.type) {
       case 'custom':
@@ -81,7 +82,14 @@ export const createRenderItem = (MenuPrimitives) => {
 
             <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
-                renderItem(child, size, onSelectionChange, closeOnSelect, closeMenu),
+                renderItem(
+                  child,
+                  size,
+                  onSelectionChange,
+                  closeOnSelect,
+                  closeMenu,
+                  showSelectedItemBackground,
+                ),
               )}
             </MenuPrimitives.SubContent>
           </MenuPrimitives.Sub>
@@ -151,7 +159,8 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles.menuCheckboxItem,
               {
-                [styles.menuItemSelected]: opt.checked,
+                [styles.menuItemSelected]:
+                  opt.checked && showSelectedItemBackground,
                 [styles[`menuItem-size-${size}`]]: size,
                 [styles.red]: opt.color === 'red' && !opt.disabled,
                 [styles.cyan]: opt.color === 'cyan' && !opt.disabled,