@moises.ai/design-system 4.19.8 → 4.19.9

package/package.json

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

package/src/components/Button/Button.jsx

@@ -13,6 +13,7 @@ export const Button = ({
   highContrast = false,
   onClick,
   style,
+  rightSlot,
   ...props
 }) => {
   const resolvedColor = color === 'neutral' ? 'gray' : color
@@ -29,6 +30,7 @@ export const Button = ({
         [styles.disabled]: disabled,
         [styles.loading]: loading,
         [styles.highContrast]: highContrast,
+        [styles.hasRightSlot]: rightSlot,
       })}
       disabled={disabled}
       loading={loading}
@@ -37,7 +39,14 @@ export const Button = ({
       style={style}
       {...props}
     >
-      {children}
+      {rightSlot ? (
+        <>
+          <span className={styles.label}>{children}</span>
+          <span className={styles.rightSlot}>{rightSlot}</span>
+        </>
+      ) : (
+        children
+      )}
     </ButtonPrimitive>
   )
 }

package/src/components/Button/Button.module.css

@@ -308,3 +308,32 @@
   border-radius: 12px;
 }
 
+.hasRightSlot {
+  position: relative;
+}
+
+.label {
+  min-width: 0;
+}
+
+.rightSlot {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.hasRightSlot.size1 .rightSlot {
+  right: 8px;
+}
+
+.hasRightSlot.size3 .rightSlot,
+.hasRightSlot.size4 .rightSlot {
+  right: 16px;
+}
+

package/src/components/Button/Button.stories.jsx

@@ -1,6 +1,7 @@
 import { Button } from './Button'
 import { PlusIcon } from '@radix-ui/react-icons'
 import { Flex } from '@radix-ui/themes'
+import { HiFi1Icon, LockIcon } from '../../icons'
 
 export default {
   title: 'Components/Button',
@@ -110,6 +111,15 @@ const MyComponent = () => (
         defaultValue: { summary: 'undefined' },
       },
     },
+    rightSlot: {
+      control: false,
+      description:
+        'Optional content rendered on the right side while keeping the label centered',
+      table: {
+        type: { summary: 'ReactNode' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 }
 
@@ -267,3 +277,20 @@ export const WithIcons = {
     </Flex>
   ),
 }
+
+export const WithRightSlot = {
+  render: () => (
+    <Flex gap="4" direction="column" width="500px">
+      <Button variant="solid" color="cyan" rightSlot={<HiFi1Icon height={14} />}>
+        Change Stems
+      </Button>
+      <Button
+        variant="solid"
+        color="cyan"
+        rightSlot={<LockIcon width={16} height={16} />}
+      >
+        Export mixdown + click track
+      </Button>
+    </Flex>
+  ),
+}