@moises.ai/design-system 3.6.10 → 3.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.10",
+  "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/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'