@moises.ai/design-system 3.6.9 → 3.6.11

package/dist/primitives.js

@@ -1,7 +1,7 @@
 import * as a from "react";
 import Y from "react";
-import { R as tr, u as ye, C as Yr, P as O, a as ae, b as Xr, T as Zr, c as le, d as or, e as _e, f as ce, g as G, h as Ie, i as P, A as Jr, j as Qr, k as en, G as tn, I as on, l as rn, L as nn, m as an, n as bt, o as sn, p as cn, q as ln, S as un, r as dn, s as fn, t as pn, v as Ve, w as vn, x as be, y as mn, z as Me, B as Xe, D as gn, E as Q, F as bn, H as hn, J as Cn, K as rr, M as nr, N as wn, O as Tn, Q as En, V as ar, U as yn, W as Rn, X as _n, Y as sr } from "./index-ZNp169Lu.js";
-import { Z as Ni, _ as Fi, $ as Oi, a0 as Di, a1 as Li, a2 as ki, a3 as Vi, a4 as Ki, a5 as $i, a6 as Gi, a7 as Bi, a8 as Hi, a9 as zi, aa as Ui, ab as ji, ac as Wi, ad as qi, ae as Yi, af as Xi, ag as Zi, ah as Ji, ai as Qi } from "./index-ZNp169Lu.js";
+import { R as tr, u as ye, C as Yr, P as O, a as ae, b as Xr, T as Zr, c as le, d as or, e as _e, f as ce, g as G, h as Ie, i as P, A as Jr, j as Qr, k as en, G as tn, I as on, l as rn, L as nn, m as an, n as bt, o as sn, p as cn, q as ln, S as un, r as dn, s as fn, t as pn, v as Ve, w as vn, x as be, y as mn, z as Me, B as Xe, D as gn, E as Q, F as bn, H as hn, J as Cn, K as rr, M as nr, N as wn, O as Tn, Q as En, V as ar, U as yn, W as Rn, X as _n, Y as sr } from "./index-D51dkmoF.js";
+import { Z as Ni, _ as Fi, $ as Oi, a0 as Di, a1 as Li, a2 as ki, a3 as Vi, a4 as Ki, a5 as $i, a6 as Gi, a7 as Bi, a8 as Hi, a9 as zi, aa as Ui, ab as ji, ac as Wi, ad as qi, ae as Yi, af as Xi, ag as Zi, ah as Ji, ai as Qi } from "./index-D51dkmoF.js";
 import { jsxs as ve, Fragment as me, jsx as i } from "react/jsx-runtime";
 import * as In from "react-dom";
 import Mn, { flushSync as pe } from "react-dom";

package/package.json

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

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -18,8 +18,16 @@ export const DropdownMenu = memo(
     maxHeight,
     closeOnSelect = true,
     sideOffset = 5,
+    matchTriggerWidth = false,
     ...props
   }) => {
+    const contentStyle = {
+      ...(matchTriggerWidth && {
+        width: 'var(--radix-dropdown-menu-trigger-width)',
+        boxSizing: 'border-box',
+      }),
+      ...(maxHeight && { height: maxHeight }),
+    }
     return (
       <>
         {options?.length > 0 && (
@@ -44,7 +52,7 @@ export const DropdownMenu = memo(
                   size={size}
                   side={props.side}
                   align={props.align}
-                  style={{ height: maxHeight }}
+                  style={contentStyle}
                   sideOffset={sideOffset}
                   alignOffset={0}
                   onCloseAutoFocus={(event) => {
@@ -74,6 +82,7 @@ export const DropdownMenu = memo(
                   size={size}
                   side={props.side}
                   align={props.align}
+                  style={contentStyle}
                   sideOffset={sideOffset}
                   alignOffset={0}
                   onCloseAutoFocus={(event) => {

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

@@ -1,11 +1,13 @@
 import React, { useState } from 'react'
 import { DropdownMenu } from './DropdownMenu'
 import { IconButton } from '../IconButton/IconButton'
+import { Button } from '../Button/Button'
 import { Flex } from '@radix-ui/themes'
 import {
   DotsVerticalIcon,
   GearIcon,
   MixerHorizontalIcon,
+  ChevronDownIcon,
 } from '@radix-ui/react-icons'
 
 export default {
@@ -220,6 +222,15 @@ The \`options\` prop accepts an array of objects with the following types:
         defaultValue: { summary: 'false' },
       },
     },
+    matchTriggerWidth: {
+      control: { type: 'boolean' },
+      description:
+        'When true, the dropdown content width matches the trigger element width',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
 }
 
@@ -342,6 +353,69 @@ export const StayOpenAfterSelect = {
   },
 }
 
+export const MatchTriggerWidth = {
+  args: {
+    matchTriggerWidth: true,
+    side: 'bottom',
+    align: 'start',
+    trigger: (
+      <Button variant="soft" style={{ width: '100%', justifyContent: 'space-between' }}>
+        Private
+        <ChevronDownIcon />
+      </Button>
+    ),
+    options: [
+      { type: 'label', key: 'actions', label: 'Actions' },
+      {
+        type: 'item',
+        key: 'copy',
+        label: 'Copy',
+        secondaryText: 'Copies the selection to clipboard',
+        keybinding: '⌘C',
+        onClick: () => console.log('Copy clicked'),
+      },
+      {
+        type: 'item',
+        key: 'paste',
+        label: 'Paste',
+        keybinding: 'Ctrl+V ⌘V',
+        onClick: () => console.log('Paste clicked'),
+      },
+      {
+        type: 'item',
+        key: 'settings',
+        label: 'Settings',
+        secondaryText: 'Open app preferences',
+        keybinding: '⌘,',
+        onClick: () => console.log('Settings clicked'),
+      },
+      {
+        type: 'item',
+        key: 'delete',
+        label: 'Delete',
+        secondaryText: 'Cannot be undone',
+        keybinding: '⌘⌫',
+        color: 'red',
+        onClick: () => console.log('Delete clicked'),
+      },
+      {
+        type: 'checkbox',
+        key: 'dark',
+        label: 'Dark mode',
+        secondaryText: 'Switch to dark theme',
+        keybinding: '⌘D',
+        checked: true,
+        onChange: (checked) => console.log('Dark mode:', checked),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex direction="column" width="280px" gap="4">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
 const ItemPlaygroundComponent = ({
   size,
   // Item 1

package/src/components/Extension/Extension.jsx

@@ -1,6 +1,14 @@
-import { Children, createContext, useCallback, useContext, useMemo, useRef, useState } from 'react'
-import { Flex, Heading, IconButton } from '../../index'
+import {
+    Children,
+    createContext,
+    useCallback,
+    useContext,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
 import { ArrowLeftIcon, Cross1Icon } from '../../icons'
+import { Flex, Heading, IconButton } from '../../index'
 
 const ExtensionContext = createContext(null)
 const NavigationContext = createContext(null)
@@ -103,15 +111,32 @@ function Header({ title, onBack, headerLeft, headerRight, allowClose = true, onC
 }
 
 /**
- * Scrollable content area that fills all remaining vertical space.
+ * Content area that fills all remaining vertical space.
  *
  * @param {object} props
- * @param {React.ReactNode} props.children - Content to render inside the scrollable area.
+ * @param {React.ReactNode} props.children - Content to render inside the area.
+ * @param {boolean} [props.scrollable=true] - When false the outer div does not scroll,
+ *   allowing individual children to manage their own overflow.
  */
-function Content({ children }) {
+function Content({ scrollable = true, style, children }) {
     return (
-        <div style={{ flex: 1, minHeight: 0, overflowY: 'auto' }}>
-            <Flex direction="column" p="4" gap="3">
+        <div
+            style={{
+                flex: 1,
+                minHeight: 0,
+                overflowY: scrollable ? 'auto' : 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+                ...style,
+            }}
+        >
+            <Flex
+                direction="column"
+                px="4"
+                py={scrollable ? '4' : undefined}
+                gap="3"
+                style={scrollable ? undefined : { flex: 1, minHeight: 0 }}
+            >
                 {children}
             </Flex>
         </div>
@@ -133,7 +158,7 @@ function Footer({ children }) {
             align="center"
             justify="center"
             mx="4"
-            py="3"
+            // py="3"
         >
             {children}
         </Flex>

package/src/components/FooterPanel/FooterPanel.jsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Spinner } from '@radix-ui/themes'
+import { Flex, Spinner, Text } from '@radix-ui/themes'
 import { Button } from '../Button/Button'
 
 export const FooterPanel = ({
@@ -13,6 +13,7 @@ export const FooterPanel = ({
   onClick,
   loading,
   besideFooter,
+  style,
   ...props
 }) => {
   return (
@@ -24,6 +25,7 @@ export const FooterPanel = ({
       style={{
         padding: '16px 0',
         borderTop: '1px solid var(--neutral-3)',
+        ...style,
       }}
       className={className}
       {...props}

package/src/icons/LockIcon.jsx

@@ -1,25 +1,19 @@
 export const LockIcon = ({ width = 16, height = 16, className, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
+  <svg xmlns="http://www.w3.org/2000/svg"
     width={width}
     height={height}
-    viewBox="0 0 14 14"
+    viewBox="0 0 16 16"
     fill="none"
-    {...props}
     className={className}
+    {...props}
   >
-    <g clipPath="url(#clip0_29457_74941)">
-      <path
-        d="M4.08333 6.41663V4.08329C4.08333 3.30974 4.39062 2.56788 4.93761 2.0209C5.48459 1.47392 6.22645 1.16663 7 1.16663C7.77355 1.16663 8.51541 1.47392 9.06239 2.0209C9.60938 2.56788 9.91667 3.30974 9.91667 4.08329V6.41663M2.91667 6.41663H11.0833C11.7277 6.41663 12.25 6.93896 12.25 7.58329V11.6666C12.25 12.311 11.7277 12.8333 11.0833 12.8333H2.91667C2.27233 12.8333 1.75 12.311 1.75 11.6666V7.58329C1.75 6.93896 2.27233 6.41663 2.91667 6.41663Z"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
+    <g clipPath="url(#clip0_35277_68311)">
+      <path d="M4.66667 7.33398V4.66732C4.66667 3.78326 5.01786 2.93542 5.64298 2.3103C6.2681 1.68517 7.11595 1.33398 8 1.33398C8.88406 1.33398 9.7319 1.68517 10.357 2.3103C10.9821 2.93542 11.3333 3.78326 11.3333 4.66732V7.33398M3.33333 7.33398H12.6667C13.403 7.33398 14 7.93094 14 8.66732V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V8.66732C2 7.93094 2.59695 7.33398 3.33333 7.33398Z"
+        stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
     </g>
     <defs>
-      <clipPath id="clip0_29457_74941">
-        <rect width="14" height="14" fill="currentColor" />
+      <clipPath id="clip0_35277_68311">
+        <rect width="16" height="16" fill="white" />
       </clipPath>
     </defs>
   </svg>

package/src/icons/UnlockIcon.jsx

@@ -0,0 +1,22 @@
+export const UnlockIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+    {...props}
+  >
+    <g clipPath="url(#clip0_35277_49197)">
+      <path d="M4.66667 7.33398V4.66732C4.66667 3.78326 5.01786 2.93542 5.64298 2.3103C6.2681 1.68517 7.11595 1.33398 8 1.33398C8.88406 1.33398 9.7319 1.68517 10.357 2.3103C10.8226 2.77588 11.1362 3.36502 11.266 4.00065M3.33333 7.33398H12.6667C13.403 7.33398 14 7.93094 14 8.66732V13.334C14 14.0704 13.403 14.6673 12.6667 14.6673H3.33333C2.59695 14.6673 2 14.0704 2 13.334V8.66732C2 7.93094 2.59695 7.33398 3.33333 7.33398Z"
+        stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+    <defs>
+      <clipPath id="clip0_35277_49197">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+UnlockIcon.displayName = 'UnlockIcon'

package/src/icons.jsx

@@ -341,3 +341,4 @@ export { WidgetIcon } from './icons/WidgetIcon'
 export { GlobeIcon } from './icons/GlobeIcon'
 export { DotsVertical2Icon } from './icons/DotsVertical2Icon'
 export { EditIcon } from './icons/EditIcon'
+export { UnlockIcon } from './icons/UnlockIcon'

package/src/index.jsx

@@ -9,6 +9,7 @@ import {
   Card,
   Code,
   Container,
+  DataList,
   Dialog,
   Em,
   Flex,
@@ -33,7 +34,6 @@ import {
   Table,
   Tabs,
   VisuallyHidden,
-  DataList,
 } from '@radix-ui/themes'
 
 export {
@@ -46,6 +46,7 @@ export {
   Card,
   Code,
   Container,
+  DataList,
   Dialog,
   Em,
   Flex,
@@ -70,87 +71,71 @@ export {
   Table,
   Tabs,
   VisuallyHidden,
-  DataList,
 }
 
 // Export our custom components
-export { HorizontalVolume } from './components/HorizontalVolume/HorizontalVolume'
-export { IconButton } from './components/IconButton/IconButton'
-export { Theme } from './components/theme/Theme'
-
-export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
-export { HeaderPanel } from './components/HeaderPanel/HeaderPanel'
-
-export { ListCards } from './components/ListCards/ListCards'
-export { MultiSelectCards } from './components/MultiSelectCards/MultiSelectCards'
-export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'
-
-export { FooterPanel } from './components/FooterPanel/FooterPanel'
-export { MessageWithAction } from './components/MessageWithAction/MessageWithAction'
-export { MultiSelect } from './components/MultiSelect/MultiSelect'
-export { PanControl } from './components/PanControl/PanControl'
-export { Select } from './components/Select/Select'
-export { GenerationStatus } from './components/StemSeparationForm/GenerationStatus/GenerationStatus'
-
-export { Slider } from './components/Slider/Slider'
-
-export { useForm } from './components/useForm/useForm'
-export { Extension, useExtension, useNavigation, useScreen } from './components/Extension/Extension'
-
-export { TextArea } from './components/TextArea/TextArea'
-
+export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'
+export { BannerAnnouncement } from './components/BannerAnnouncement/BannerAnnouncement'
 export { Button } from './components/Button/Button'
-export { SectionExpander } from './components/SectionExpander/SectionExpander'
-
-export { ContextMenu } from './components/ContextMenu/ContextMenu'
-
-export { TextField } from './components/TextField/TextField'
-
 export { Callout } from './components/Callout/Callout'
+export { Card as CardWidget } from './components/Card/Card'
+export { Checkbox } from './components/Checkbox/Checkbox'
+export { CigarBar } from './components/CigarBar/CigarBar'
+export { ContextMenu } from './components/ContextMenu/ContextMenu'
+export { Countdown } from './components/Countdown/Countdown'
+export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
+export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
+export {
+  Extension,
+  useExtension,
+  useNavigation,
+  useScreen,
+} from './components/Extension/Extension'
+export { FloatingBanner } from './components/FloatingBanner/FloatingBanner'
+export { FooterPanel } from './components/FooterPanel/FooterPanel'
+export { GenerationSourceCallout } from './components/GenerationSourceCallout/GenerationSourceCallout'
 export { GroupButtons } from './components/GroupButtons/GroupButtons'
+export { HeaderPanel } from './components/HeaderPanel/HeaderPanel'
+export { HorizontalVolume } from './components/HorizontalVolume/HorizontalVolume'
+export { IconButton } from './components/IconButton/IconButton'
+export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
 export { Knob } from './components/Knob/Knob'
-export { Text } from './components/Text/Text'
-
-export { Rating } from './components/Rating/Rating'
-export { ThumbnailPicker } from './components/ThumbnailPicker/ThumbnailPicker'
-
-export { StemGenerationForm } from './components/StemGenerationForm/StemGenerationForm'
-export { StemSeparationForm } from './components/StemSeparationForm/StemSeparationForm'
-export { TooltipWithInfoIcon } from './components/TooltipWithInfoIcon/TooltipWithInfoIcon'
-
-export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
-
+export { ListCards } from './components/ListCards/ListCards'
+export { MessageWithAction } from './components/MessageWithAction/MessageWithAction'
 export { MetronomeForm } from './components/MetronomeForm/MetronomeForm'
-export { TempoControlsForm } from './components/TempoControlsForm/TempoControlsForm'
-
-export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'
-export { BannerAnnouncement } from './components/BannerAnnouncement/BannerAnnouncement'
-export { Countdown } from './components/Countdown/Countdown'
+export { MoreButton } from './components/MoreButton/MoreButton'
+export { MultiSelect } from './components/MultiSelect/MultiSelect'
+export { MultiSelectCards } from './components/MultiSelectCards/MultiSelectCards'
+export { PanControl } from './components/PanControl/PanControl'
+export { ProductsBrandPattern } from './components/ProductsBrandPattern/ProductsBrandPattern'
 export { ProductsList } from './components/ProductsList/ProductsList'
 export { ProfileMenu } from './components/ProfileMenu/ProfileMenu'
+export { ProjectsList } from './components/ProjectsList/ProjectsList'
+export { RadioCardsGroup } from './components/RadioCardsGroup/RadioCardsGroup'
+export { Rating } from './components/Rating/Rating'
 export { RecordingForm } from './components/RecordingForm/RecordingForm'
+export { SectionExpander } from './components/SectionExpander/SectionExpander'
+export { SegmentedControl } from './components/SegmentedControl/SegmentedControl'
+export { Select } from './components/Select/Select'
 export { SetlistList } from './components/SetlistList/SetlistList'
 export { Shell } from './components/Shell/Shell'
 export { Sidebar } from './components/Sidebar/Sidebar'
 export { SidebarSection } from './components/Sidebar/SidebarSection/SidebarSection'
+export { Slider } from './components/Slider/Slider'
+export { StemGenerationForm } from './components/StemGenerationForm/StemGenerationForm'
+export { GenerationStatus } from './components/StemSeparationForm/GenerationStatus/GenerationStatus'
+export { StemSeparationForm } from './components/StemSeparationForm/StemSeparationForm'
+export { TempoControlsForm } from './components/TempoControlsForm/TempoControlsForm'
+export { Text } from './components/Text/Text'
+export { TextArea } from './components/TextArea/TextArea'
+export { TextField } from './components/TextField/TextField'
+export { Theme } from './components/theme/Theme'
+export { ThumbnailPicker } from './components/ThumbnailPicker/ThumbnailPicker'
+export { Tooltip } from './components/Tooltip/Tooltip'
+export { TooltipWithInfoIcon } from './components/TooltipWithInfoIcon/TooltipWithInfoIcon'
 export { TrackControlButton } from './components/TrackControlButton'
 export { TrackHeader } from './components/TrackHeader/TrackHeader'
-
-export { Checkbox } from './components/Checkbox/Checkbox'
-export { CigarBar } from './components/CigarBar/CigarBar'
-export { DataTable } from './components/DataTable/DataTable'
-export { FloatingBanner } from './components/FloatingBanner/FloatingBanner'
-export { ProductsBrandPattern } from './components/ProductsBrandPattern/ProductsBrandPattern'
-export { RadioCardsGroup } from './components/RadioCardsGroup/RadioCardsGroup'
-
-export { GenerationSourceCallout } from './components/GenerationSourceCallout/GenerationSourceCallout'
+export { useForm } from './components/useForm/useForm'
+export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
-
-
-export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
-export { Card as CardWidget } from './components/Card/Card'
-export { ProjectsList } from './components/ProjectsList/ProjectsList'
-
-export { MoreButton } from './components/MoreButton/MoreButton'
-export { Tooltip } from './components/Tooltip/Tooltip'