@moises.ai/design-system 3.5.4 → 3.5.6

package/src/components/TextArea/TextArea.jsx

@@ -31,7 +31,6 @@ export const TextArea = ({
         <TextAreaRadix
           size={size}
           variant={variant}
-          radius="3"
           value={value}
           onChange={onChange}
           placeholder={placeholder}
@@ -41,6 +40,7 @@ export const TextArea = ({
             [styles.variantSoft]: variant === 'soft',
             [styles.disabled]: disabled,
             [styles.focusRing]: focusRing,
+            [styles[`size${size}`]]: size,
           })}
           resize={resize}
           {...props}

package/src/components/TextArea/TextArea.module.css

@@ -32,4 +32,20 @@
 .focusRing:where(:focus-within) {
   outline: 1px solid var(--accent-a8);
   outline-offset: -1px;
+}
+
+.size1 textarea {
+  border-radius: 4px;
+}
+
+.size2 textarea {
+  border-radius: 6px;
+}
+
+.size3 textarea {
+  border-radius: 8px;
+}
+
+.size4 textarea {
+  border-radius: 12px;
 }

package/src/components/TextField/TextField.jsx

@@ -2,7 +2,6 @@ import { Flex, TextField as TextFieldRadix, Text } from '@radix-ui/themes'
 import styles from './TextField.module.css'
 import classNames from 'classnames'
 import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
-import { IconButton as IconButtonComponent } from '../IconButton/IconButton'
 
 export const TextField = ({
   value,
@@ -18,6 +17,8 @@ export const TextField = ({
   focusRing = false,
   startSlot,
   endSlot,
+  error,
+  secondaryText,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -43,7 +44,9 @@ export const TextField = ({
         className={classNames(styles.TextField, className, {
           [styles.Disabled]: disabled,
           [styles.ReadOnly]: readOnly,
-          [styles.focusRing]: focusRing,
+          [styles.focusRing]: focusRing || error,
+          [styles.errorText]: error,
+          [styles[`size${size}`]]: size,
         })}
         readOnly={readOnly}
         disabled={disabled}
@@ -52,9 +55,18 @@ export const TextField = ({
         {resolvedStartSlot && (
           <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
         )}
-        {endSlot && <TextFieldRadix.Slot>{endSlot}</TextFieldRadix.Slot>}
+        {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
       </TextFieldRadix.Root>
-    </Flex>
+      {secondaryText && (
+        <Text size='1' weight="regular"
+          className={classNames(styles.secondaryText, {
+            [styles.errorText]: error
+          })}>
+          {secondaryText}
+        </Text>
+      )
+      }
+    </Flex >
   )
 }
 

package/src/components/TextField/TextField.module.css

@@ -9,6 +9,30 @@
   &:where(:focus-within) {
     outline: none !important;
   }
+
+  &.size1 {
+    & input {
+     border-radius: 4px;
+    }
+  }
+
+  &.size2 {
+    & input {
+      border-radius: 6px;
+    }
+  }
+
+  &.size3 {
+    & input {
+      border-radius: 8px;
+    }
+  }
+
+  &.size4 {
+    & input {
+      border-radius: 12px;
+    }
+  }
 }
 
 .icon {
@@ -35,7 +59,27 @@
 }
 
 
-.focusRing:where(:focus-within):not(.ReadOnly):not(.Disabled) {
+.focusRing:where(:focus-within):not(.ReadOnly):not(.Disabled):not(.errorText) {
   outline: 1px solid var(--accent-a8) !important;
   outline-offset: -1px;
+}
+
+.focusRing.errorText {
+  outline: 1px solid var(--error-alpha-11) !important;
+  outline-offset: -1px;
+}
+
+.secondaryText {
+  color: var(--neutral-alpha-9);
+}
+
+.errorText {
+  color: var(--error-alpha-11);
+}
+
+.endSlot {
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/src/components/TextField/TextField.stories.jsx

@@ -123,6 +123,22 @@ const MyComponent = () => (
         defaultValue: { summary: 'false' },
       },
     },
+    error: {
+      control: 'boolean',
+      description: 'Whether the input has an error',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    secondaryText: {
+      control: 'text',
+      description: 'Secondary text to be displayed below the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     startSlot: {
       control: false,
       description: 'Custom content rendered in the leading slot',
@@ -174,6 +190,22 @@ export const Active = {
   },
 }
 
+export const WithError = {
+  args: {
+    ...Default.args,
+    error: true,
+    secondaryText: 'This is an error message',
+  },
+}
+
+export const WithSecondaryText = {
+  args: {
+    ...Default.args,
+    error: false,
+    secondaryText: 'This is a secondary text',
+  },
+}
+
 export const Filled = {
   args: {
     ...Default.args,

package/src/icons/DotsVertical2Icon.jsx

@@ -11,32 +11,31 @@ export const DotsVertical2Icon = ({
     viewBox="0 0 3 11"
     fill="none"
     className={className}
-    {...props}
-  >
+    {...props}>
     <path
       d="M2.18285 1.34142C2.18285 1.80613 1.80613 2.18285 1.34142 2.18285C0.876718 2.18285 0.5 1.80613 0.5 1.34142C0.5 0.876718 0.876718 0.5 1.34142 0.5C1.80613 0.5 2.18285 0.876718 2.18285 1.34142Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 1.34142C1.84133 1.61757 1.61747 1.84142 1.34133 1.84142C1.06519 1.84142 0.841328 1.61757 0.841328 1.34142C0.841328 1.06528 1.06519 0.841423 1.34133 0.841423C1.61747 0.841423 1.84133 1.06528 1.84133 1.34142Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M2.18285 5.30221C2.18285 5.76691 1.80613 6.14363 1.34142 6.14363C0.876718 6.14363 0.5 5.76691 0.5 5.30221C0.5 4.8375 0.876718 4.46079 1.34142 4.46079C1.80613 4.46079 2.18285 4.8375 2.18285 5.30221Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 5.30221C1.84133 5.57835 1.61747 5.80221 1.34133 5.80221C1.06519 5.80221 0.841328 5.57835 0.841328 5.30221C0.841328 5.02607 1.06519 4.80221 1.34133 4.80221C1.61747 4.80221 1.84133 5.02607 1.84133 5.30221Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M2.18285 9.26299C2.18285 9.7277 1.80613 10.1044 1.34142 10.1044C0.876718 10.1044 0.5 9.7277 0.5 9.26299C0.5 8.79829 0.876718 8.42157 1.34142 8.42157C1.80613 8.42157 2.18285 8.79829 2.18285 9.26299Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 9.26299C1.84133 9.53914 1.61747 9.76299 1.34133 9.76299C1.06519 9.76299 0.841328 9.53914 0.841328 9.26299C0.841328 8.98685 1.06519 8.76299 1.34133 8.76299C1.61747 8.76299 1.84133 8.98685 1.84133 9.26299Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
   </svg>
 )
 

package/src/index.jsx

@@ -150,3 +150,5 @@ 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'

package/src/lib/menu/Menu.module.css

@@ -204,20 +204,11 @@
 }
 
 .menuItem[data-state='open'],
-.menuTrigger[data-state='open'],
-.menuTrigger[data-highlighted] {
+.menuTrigger[data-state='open']:not(.showActiveTrigger),
+.menuTrigger[data-highlighted]:not(.showActiveTrigger) {
   background-color: transparent;
 }
 
-.showActiveTrigger {
-  background-color: var(--neutral-alpha-0-50) !important;
-  border-radius: 3px;
-
-  &:hover {
-    background-color: var(--neutral-alpha-2) !important;
-  }
-}
-
 .menuSubTrigger[data-highlighted],
 .menuItem[data-highlighted],
 .menuSubTrigger[data-state='open'] {
@@ -258,7 +249,7 @@
 .menuItemSelected {
   background-color: var(--neutral-alpha-3);
   border-radius: 6px;
-  cursor: default;
+  cursor: pointer;
   font-weight: 400;
 
   &[data-disabled] {
@@ -321,19 +312,19 @@
 }
 
 .red {
-  color: color(display-p3 1 .57 .55);
+  color: rgba(255, 149, 146, 1);
 
   & .label,
   & .leftIcon,
   & .rightIcon,
   & .checkboxIndicatorSlot {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 
   & .leftIcon > svg,
   & .rightIcon > svg,
   & .menuCheckboxIndicator > svg {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 }