@moises.ai/design-system 4.19.4 → 4.19.6

package/package.json

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

package/src/components/Select/Select.jsx

@@ -93,32 +93,28 @@ export const Select = ({
                     })}
                     disabled={disabled || readOnly}
                   >
-                    <Text size={size} style={{ color: 'var(--neutral-12)' }}>
-                      {item.label}
-                    </Text>
-                    {item.aiDetected && (
-                      <Text
-                        size="1"
-                        style={{
-                          color: 'var(--aqua-alpha-9)',
-                          verticalAlign: 'top',
-                        }}
-                      >
-                        ✦
+                    <span className={styles.itemLabel}>
+                      <Text size={size} style={{ color: 'var(--neutral-12)' }}>
+                        {item.label}
                       </Text>
-                    )}
-                    {item.extra && (
-                      <Text
-                        size={size}
-                        className={styles.extra}
-                        style={{
-                          color: 'var(--neutral-alpha-9)',
-                        }}
-                      >
-                        {' '}
-                        {item.extra}
-                      </Text>
-                    )}
+                      {item.aiDetected && (
+                        <span className={styles.aiDetected} aria-hidden>
+                          ✦
+                        </span>
+                      )}
+                      {item.extra && (
+                        <Text
+                          size={size}
+                          className={styles.extra}
+                          style={{
+                            color: 'var(--neutral-alpha-9)',
+                          }}
+                        >
+                          {' '}
+                          {item.extra}
+                        </Text>
+                      )}
+                    </span>
                   </SelectRadix.Item>
                 ),
               )}

package/src/components/Select/Select.module.css

@@ -147,3 +147,16 @@
   padding: 12px 15px;
 }
 
+.itemLabel {
+  line-height: 1;
+}
+
+.aiDetected {
+  color: var(--aqua-alpha-9);
+  font-size: var(--font-size-1);
+  line-height: 1;
+  display: inline-block;
+  vertical-align: super;
+  margin-left: 2px;
+}
+

package/src/components/TextField/TextField.jsx

@@ -20,6 +20,9 @@ export const TextField = ({
   error,
   secondaryText,
   autoFocus,
+  aiDetected = false,
+  textAlign = 'left',
+  style,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -27,6 +30,8 @@ export const TextField = ({
     startSlot ||
     (Icon ? <Icon width={16} height={16} className={styles.icon} /> : null)
 
+  const chars = String(value ?? '').length
+
   return (
     <Flex direction="column" width="100%" height="100%" gap="1">
       {title && (
@@ -48,7 +53,13 @@ export const TextField = ({
           [styles.focusRing]: focusRing || error,
           [styles.errorText]: error,
           [styles[`size${size}`]]: size,
+          [styles.alignCenter]: textAlign === 'center',
+          [styles.alignLeft]: textAlign === 'left',
         })}
+        style={{
+          ...(aiDetected && { '--ai-chars': chars }),
+          ...style,
+        }}
         readOnly={readOnly}
         disabled={disabled}
         autoFocus={autoFocus}
@@ -57,18 +68,25 @@ export const TextField = ({
         {resolvedStartSlot && (
           <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
         )}
+        {aiDetected && (
+          <span className={styles.aiDetected} aria-hidden>
+            <span className={styles.aiDetectedMark}>✦</span>
+          </span>
+        )}
         {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
       </TextFieldRadix.Root>
       {secondaryText && (
-        <Text size='1' weight="regular"
+        <Text
+          size="1"
+          weight="regular"
           className={classNames(styles.secondaryText, {
-            [styles.errorText]: error
-          })}>
+            [styles.errorText]: error,
+          })}
+        >
           {secondaryText}
         </Text>
-      )
-      }
-    </Flex >
+      )}
+    </Flex>
   )
 }
 

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

@@ -1,4 +1,5 @@
 .TextField {
+  position: relative;
   background-color: var(--neutral-alpha-3);
   color: var(--neutral-12);
   box-shadow: none;
@@ -27,6 +28,42 @@
   }
 }
 
+.alignLeft input {
+  text-align: left;
+}
+
+.alignCenter input {
+  text-align: center;
+  /* Radix uses text-indent as left inset; reset it so center is true center. */
+  text-indent: 0;
+  padding-left: var(--text-field-padding);
+  padding-right: var(--text-field-padding);
+}
+
+.aiDetected {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  line-height: 1;
+}
+
+.alignLeft .aiDetected {
+  left: calc(var(--text-field-padding) + (var(--ai-chars, 0) * 1ch) + 2px);
+}
+
+.alignCenter .aiDetected {
+  left: calc(50% + (var(--ai-chars, 0) * 0.5ch) + 2px);
+}
+
+.aiDetectedMark {
+  display: inline-block;
+  color: var(--aqua-alpha-9);
+  font-size: var(--font-size-1);
+  line-height: 1;
+  transform: translateY(-0.35em);
+}
+
 .icon {
   color: var(--neutral-alpha-10);
 }

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

@@ -155,6 +155,23 @@ const MyComponent = () => (
         defaultValue: { summary: 'undefined' },
       },
     },
+    aiDetected: {
+      control: 'boolean',
+      description: 'Shows ✦ icon next to the input value when true',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    textAlign: {
+      control: 'select',
+      options: ['left', 'center'],
+      description: 'Horizontal alignment of the input text',
+      table: {
+        type: { summary: "'left' | 'center'" },
+        defaultValue: { summary: 'left' },
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -273,3 +290,25 @@ export const WithCustomSlots = {
   },
   name: 'With custom slots',
 }
+
+export const WithAiDetected = {
+  args: {
+    ...Default.args,
+    title: 'Tempo',
+    value: '120',
+    textAlign: 'center',
+    aiDetected: true,
+  },
+  name: 'With AI detected',
+}
+
+export const WithAiDetectedLeft = {
+  args: {
+    ...Default.args,
+    title: 'Song tuning (Hz)',
+    value: '440',
+    textAlign: 'left',
+    aiDetected: true,
+  },
+  name: 'With AI detected (left)',
+}

package/src/icons/ArrowRightIcon.jsx

@@ -4,23 +4,9 @@ export const ArrowRightIcon = ({
   className,
   ...props
 }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    className={className}
-    {...props}
-  >
-    <path
-      d="M13 18L19 12L13 6M18 12L5 12"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" {...props} aria-label="Arrow Right Icon">
+  <path d="M13.1429 19L20 12L13.1429 5M18.8571 12L4 12" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 )
 
 ArrowRightIcon.displayName = 'ArrowRightIcon'