@moises.ai/design-system 3.12.3 → 3.13.0

package/package.json

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

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'