@moises.ai/design-system 4.17.6 → 4.17.8

package/package.json

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

package/src/components/InstrumentSelect/InstrumentSelect.module.css

@@ -94,6 +94,20 @@
   color: var(--neutral-alpha-5);
 }
 
+.card[data-state='disabled-checked'] {
+  border-color: rgba(0, 220, 253, 0.20);
+  background: var(--neutral-alpha-2, rgba(216, 244, 246, 0.04));
+  cursor: default;
+}
+
+.card[data-state='disabled-checked'] .cardIcon {
+  color: rgba(0, 220, 253, 0.20);
+}
+
+.card[data-state='disabled-checked'] .cardText {
+  color: var(--neutral-alpha-6);
+}
+
 /* ----- Card slots ----- */
 
 .cardIcon {
@@ -144,4 +158,4 @@
   transform: translateY(-50%);
   color: var(--neutral-alpha-5);
   pointer-events: none;
-}
+}

package/src/components/InstrumentSelect/InstrumentSelect.stories.jsx

@@ -187,6 +187,12 @@ export const CardStates = () => (
       state="disabled"
       locked
     />
+    <InstrumentSelectCard
+      value="vocals"
+      text="Disabled checked"
+      Icon={VocalIcon}
+      state="disabled-checked"
+    />
   </div>
 )
 
@@ -194,7 +200,7 @@ CardStates.parameters = {
   docs: {
     description: {
       story:
-        'The four visual states of `InstrumentSelectCard`: default, hover, checked, and disabled (locked).',
+        'The five visual states of `InstrumentSelectCard`: default, hover, checked, disabled (locked), and disabled-checked (selected but non-interactive).',
     },
   },
 }

package/src/components/InstrumentSelect/InstrumentSelectCard.jsx

@@ -1,10 +1,11 @@
 import { forwardRef } from 'react'
 import classNames from 'classnames'
+import { Spinner } from '@radix-ui/themes'
 import { LockIcon } from '../../icons'
 import styles from './InstrumentSelect.module.css'
 
 /**
- * @typedef {'default' | 'hover' | 'checked' | 'disabled'} InstrumentSelectCardState
+ * @typedef {'default' | 'hover' | 'checked' | 'disabled' | 'disabled-checked'} InstrumentSelectCardState
  */
 
 /**
@@ -21,7 +22,9 @@ import styles from './InstrumentSelect.module.css'
  */
 
 /**
- * Individual instrument card with four visual states (default, hover, checked, disabled).
+ * Individual instrument card with five visual states (default, hover, checked, disabled,
+ * 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
@@ -52,7 +55,17 @@ export const InstrumentSelectCard = forwardRef(function InstrumentSelectCard(
   ref,
 ) {
   const isBlocked = locked || disabled
-  const computedState = state ?? (isBlocked ? 'disabled' : selected ? 'checked' : 'default')
+  const computedState =
+    state ??
+    (isBlocked
+      ? selected
+        ? 'disabled-checked'
+        : 'disabled'
+      : selected
+        ? 'checked'
+        : 'default')
+
+  const showSpinner = computedState === 'disabled-checked'
 
   const renderIcon = () => {
     if (!Icon) return null
@@ -75,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>