@moises.ai/design-system 4.17.7 → 4.17.8

package/package.json

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

package/src/components/InstrumentSelect/InstrumentSelectCard.jsx

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react'
 import classNames from 'classnames'
+import { Spinner } from '@radix-ui/themes'
 import { LockIcon } from '../../icons'
 import styles from './InstrumentSelect.module.css'
 
@@ -22,7 +23,8 @@ import styles from './InstrumentSelect.module.css'
 
 /**
  * Individual instrument card with five visual states (default, hover, checked, disabled,
- * disabled-checked).
+ * disabled-checked). In the `disabled-checked` state (selected but non-interactive) a spinner
+ * replaces the icon to signal an in-progress action.
  *
  * Native `<button>` with `aria-pressed` for selection (works for both single and multi-select)
  * and `aria-disabled` for locked/disabled items. The HTML `disabled` attribute is intentionally
@@ -63,6 +65,8 @@ export const InstrumentSelectCard = forwardRef(function InstrumentSelectCard(
         ? 'checked'
         : 'default')
 
+  const showSpinner = computedState === 'disabled-checked'
+
   const renderIcon = () => {
     if (!Icon) return null
     if (typeof Icon === 'function') {
@@ -84,7 +88,11 @@ export const InstrumentSelectCard = forwardRef(function InstrumentSelectCard(
       className={classNames(styles.card, className)}
       {...props}
     >
-      {Icon && <span className={styles.cardIcon}>{renderIcon()}</span>}
+      {(Icon || showSpinner) && (
+       <>
+          {showSpinner ? <Spinner size="2" state='1'/> :  <span className={styles.cardIcon}> {renderIcon()} </span>}
+        </>
+      )}
       {text != null && <span className={styles.cardText}>{text}</span>}
       {locked && <LockIcon width={12} height={12} className={styles.lockIcon} />}
     </button>