@moises.ai/design-system 3.9.14 → 3.9.16

package/package.json

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

package/src/components/BannerAnnouncement/BannerAnnouncement.module.css

@@ -23,7 +23,12 @@
   position: absolute;
   top: 4px;
   right: 4px;
-  
+
+
+  width: 24px;
+  height: 24px;
+  border-radius: 50% !important;
+  background: #11111366 !important;  
 }
 
 .children {

package/src/components/BannerAnnouncement/BannerAnnouncement.stories.jsx

@@ -27,23 +27,25 @@ const withFlexContainer = (Story) => (
 
 export const FeatureAnnouncement = {
   render: (args) => (
-    <BannerAnnouncement {...args}>
-      <Flex direction="column" gap="2">
-        <Heading size="3" weight="bold">
-          Moises AI Studio
-        </Heading>
-        <Text size="2">
-          Step into the future of music creation. Record, separate, generate,
-          convert voice, mix, and master with our all-in-one essential AI tool
-          for musicians.
-        </Text>
-      </Flex>
-    </BannerAnnouncement>
+    <Flex justify="center" align="center" style={{ padding: '40px', marginTop: '100px' }}>
+      <BannerAnnouncement {...args}>
+        <Flex direction="column" gap="2">
+          <Heading size="3" weight="bold">
+            Moises AI Studio
+          </Heading>
+          <Text size="2">
+            Step into the future of music creation. Record, separate, generate,
+            convert voice, mix, and master with our all-in-one essential AI tool
+            for musicians.
+          </Text>
+        </Flex>
+      </BannerAnnouncement>
+    </Flex>
   ),
   args: {
     badge: { label: 'New', color: 'green' },
     image:
-      'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
+      'https://storage.googleapis.com/moises-cms/image_3x_f0971a1e8e/image_3x_f0971a1e8e.png',
     link: 'https://www.google.com',
     buttonText: 'Learn More',
     buttonColor: 'gray',
@@ -92,21 +94,23 @@ export const DayOne = {
     }, [])
 
     return (
-      <BannerAnnouncement {...args}>
-        <Flex direction="column" gap="3">
-          <Text size="2">Up to 30% off any individual plan for the next:</Text>
-          <Countdown
-            show={true}
-            days={timeLeft.days}
-            hours={timeLeft.hours}
-            minutes={timeLeft.minutes}
-            seconds={timeLeft.seconds}
-            theme="default"
-            variant="lg"
-            showDays={false}
-          />
-        </Flex>
-      </BannerAnnouncement>
+      <Flex justify="center" align="center" style={{ padding: '40px', marginTop: '100px' }}>
+        <BannerAnnouncement {...args}>
+          <Flex direction="column" gap="3">
+            <Text size="2">Up to 30% off any individual plan for the next:</Text>
+            <Countdown
+              show={true}
+              days={timeLeft.days}
+              hours={timeLeft.hours}
+              minutes={timeLeft.minutes}
+              seconds={timeLeft.seconds}
+              theme="default"
+              variant="lg"
+              showDays={false}
+            />
+          </Flex>
+        </BannerAnnouncement>
+      </Flex>
     )
   },
   args: {

package/src/components/ListCards/ListCards.jsx

@@ -1,16 +1,16 @@
-import React from 'react'
+import { StarFilledIcon, StarIcon } from '@radix-ui/react-icons'
 import {
-  RadioCards,
-  Flex,
   Avatar,
   Box,
-  Text,
+  Flex,
+  RadioCards,
   ScrollArea,
+  Text,
 } from '@radix-ui/themes'
-import styles from './ListCards.module.css'
 import classNames from 'classnames'
-import { StarIcon, StarFilledIcon } from '@radix-ui/react-icons'
+import React from 'react'
 import { ThumbnailPicker } from '../ThumbnailPicker/ThumbnailPicker'
+import styles from './ListCards.module.css'
 
 const Card = ({
   className,
@@ -25,6 +25,7 @@ const Card = ({
   checked,
   onClick,
   size = '1',
+  style,
   ...props
 }) => {
   // Use item properties if the item object is provided
@@ -63,7 +64,7 @@ const Card = ({
         styles.listCardsItem,
         styles[`listCardsItemSize${size}`],
       )}
-      style={{ '--color-surface': 'transparent' }}
+      style={{ '--color-surface': 'transparent', ...style }}
       data-state={checked ? 'checked' : 'unchecked'}
       onClick={handleClick}
       {...props}
@@ -138,6 +139,7 @@ const CardDetails = ({
   avatarContent,
   seeDetailsText = 'Details',
   children,
+  style,
   ...props
 }) => {
   // Use item properties if the item object is provided
@@ -160,6 +162,7 @@ const CardDetails = ({
           '--color-surface': 'transparent',
           width: '100%',
           height: '68px',
+          ...style,
         }}
         {...props}
       >
@@ -269,6 +272,7 @@ export const ListCards = ({
   className,
   children,
   alwaysShowScrollbar = true,
+  style,
   ...props
 }) => {
   return (
@@ -278,7 +282,7 @@ export const ListCards = ({
       scrollbars="vertical"
       type={alwaysShowScrollbar ? 'auto' : 'hover'}
     >
-      <Box className={styles.gridContainer} pr="3">
+      <Box className={styles.gridContainer} pr="3" style={style}>
         <RadioCards.Root
           defaultValue={undefined}
           className={className}

package/src/components/useForm/useForm.jsx

@@ -1,5 +1,5 @@
-import { useState, useCallback, useRef, useEffect } from 'react'
-import { Text, Flex } from '../../index'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Flex, Text } from '../../index'
 
 /**
  * @typedef {import('zod').ZodObject} ZodSchema
@@ -55,13 +55,17 @@ import { Text, Flex } from '../../index'
 
 /** @param {{ name: string, errorsRef: React.MutableRefObject<Object>, children: React.ReactNode }} props */
 function FieldView({ name, errorsRef, children }) {
-    const msg = errorsRef.current[name]
-    return (
-        <Flex direction="column" gap="1">
-            {children}
-            {msg && <Text size="1" color="red">{msg}</Text>}
-        </Flex>
-    )
+  const msg = errorsRef.current[name]
+  return (
+    <Flex direction="column" gap="1">
+      {children}
+      {msg && (
+        <Text size="1" color="red">
+          {msg}
+        </Text>
+      )}
+    </Flex>
+  )
 }
 
 /**
@@ -97,108 +101,130 @@ function FieldView({ name, errorsRef, children }) {
  * }
  */
 export function useForm({ schema }) {
-    const [values, setValues] = useState(() => schema.parse({}))
-    const [errors, setErrors] = useState({})
-    const errorsRef = useRef(errors)
-    errorsRef.current = errors
-    const listenersRef = useRef([])
-
-    const mountedRef = useRef(false)
-    useEffect(() => {
-        if (!mountedRef.current) {
-            mountedRef.current = true
-            return
-        }
-        for (const cb of listenersRef.current) cb(values)
-    }, [values])
-
-    /** @type {(name: string, value: *) => void} */
-    const set = useCallback((name, value) => {
-        setValues((prev) => ({ ...prev, [name]: value }))
-        setErrors((prev) => ({ ...prev, [name]: null }))
-    }, [])
-
-    /**
-     * Returns spread-ready props for a form control.
-     *
-     * - Default (no type): returns `{ value, onChange }` for text inputs and selects.
-     * - `'checkbox'` / `'switch'`: returns `{ checked, onCheckedChange }`.
-     *
-     * @param {string} name - Field name matching a key in the schema.
-     * @param {ToggleFieldType} [type] - Control type hint.
-     * @returns {TextFieldProps | ToggleFieldProps}
-     */
-    const connectField = (name, type) => {
-        const val = values[name]
-        const update = (v) => set(name, v)
-        if (type === 'checkbox' || type === 'switch') {
-            return { checked: !!val, onCheckedChange: update }
-        }
-        return { value: val ?? '', onChange: (e) => update(e?.target?.value ?? e) }
+  const [values, setValues] = useState(() => schema.parse({}))
+  const [errors, setErrors] = useState({})
+  const errorsRef = useRef(errors)
+  errorsRef.current = errors
+  const listenersRef = useRef([])
+
+  const mountedRef = useRef(false)
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true
+      return
     }
-
-    /**
-     * Validate the current values against the schema.
-     *
-     * @returns {FormResult} `{ isValid: true, data }` on success, or
-     *   `{ isValid: false, data }` on failure (with field errors set).
-     */
-    const getValues = () => {
-        const result = schema.safeParse(values)
-        if (result.success) {
-            setErrors({})
-            return { isValid: true, data: result.data }
-        }
-        const fieldErrors = {}
-        for (const issue of result.error.issues) {
-            const name = issue.path.join('.')
-            if (!fieldErrors[name]) fieldErrors[name] = issue.message
-        }
-        setErrors(fieldErrors)
-        return { isValid: false, data: values }
+    for (const cb of listenersRef.current) cb(values)
+  }, [values])
+
+  /** @type {((name: string, value: *) => void) | ((values: Object) => void)} */
+  const set = useCallback((name, value) => {
+    if (typeof name === 'string') {
+      setValues((prev) => ({ ...prev, [name]: value }))
+      setErrors((prev) => ({ ...prev, [name]: null }))
     }
 
-    /**
-     * Subscribe to value changes. The callback fires after every state
-     * update (skipping the initial mount).
-     *
-     * @param {(values: Object) => void} cb - Listener called with the latest values.
-     * @returns {() => void} Unsubscribe function (safe to return from `useEffect`).
-     */
-    const watchValues = useCallback((cb) => {
-        listenersRef.current.push(cb)
-        return () => {
-            listenersRef.current = listenersRef.current.filter((l) => l !== cb)
-        }
-    }, [])
-
-    /**
-     * Returns the error message element for a field, or `null` if valid.
-     *
-     * @param {string} name - Field name.
-     * @returns {React.ReactNode | null}
-     */
-    const error = (name) => {
-        const msg = errors[name]
-        if (!msg) return null
-        return <Text size="1" color="red">{msg}</Text>
+    const values = name
+    const errors = Object.fromEntries(
+      Object.entries(values).map(([key]) => ({ [key]: null })),
+    )
+    setValues((prev) => ({ ...prev, ...values }))
+    setErrors((prev) => ({ ...prev, ...errors }))
+  }, [])
+
+  /**
+   * Returns spread-ready props for a form control.
+   *
+   * - Default (no type): returns `{ value, onChange }` for text inputs and selects.
+   * - `'checkbox'` / `'switch'`: returns `{ checked, onCheckedChange }`.
+   *
+   * @param {string} name - Field name matching a key in the schema.
+   * @param {ToggleFieldType} [type] - Control type hint.
+   * @returns {TextFieldProps | ToggleFieldProps}
+   */
+  const connectField = (name, type) => {
+    const val = values[name]
+    const update = (v) => set(name, v)
+    if (type === 'checkbox' || type === 'switch') {
+      return { checked: !!val, onCheckedChange: update }
     }
-
-    /**
-     * Reset all values and clear errors.
-     *
-     * @param {Object} [vals] - Optional values to reset to. Defaults to schema defaults.
-     */
-    const reset = (vals) => {
-        setValues(vals ?? schema.parse({}))
-        setErrors({})
+    return { value: val ?? '', onChange: (e) => update(e?.target?.value ?? e) }
+  }
+
+  /**
+   * Validate the current values against the schema.
+   *
+   * @returns {FormResult} `{ isValid: true, data }` on success, or
+   *   `{ isValid: false, data }` on failure (with field errors set).
+   */
+  const getValues = () => {
+    const result = schema.safeParse(values)
+    if (result.success) {
+      setErrors({})
+      return { isValid: true, data: result.data }
     }
-
-    /** @type {React.FC<FieldProps>} */
-    const Field = useCallback(
-        (props) => <FieldView {...props} errorsRef={errorsRef} />,
-        []
+    const fieldErrors = {}
+    for (const issue of result.error.issues) {
+      const name = issue.path.join('.')
+      if (!fieldErrors[name]) fieldErrors[name] = issue.message
+    }
+    setErrors(fieldErrors)
+    return { isValid: false, data: values }
+  }
+
+  /**
+   * Subscribe to value changes. The callback fires after every state
+   * update (skipping the initial mount).
+   *
+   * @param {(values: Object) => void} cb - Listener called with the latest values.
+   * @returns {() => void} Unsubscribe function (safe to return from `useEffect`).
+   */
+  const watchValues = useCallback((cb) => {
+    listenersRef.current.push(cb)
+    return () => {
+      listenersRef.current = listenersRef.current.filter((l) => l !== cb)
+    }
+  }, [])
+
+  /**
+   * Returns the error message element for a field, or `null` if valid.
+   *
+   * @param {string} name - Field name.
+   * @returns {React.ReactNode | null}
+   */
+  const error = (name) => {
+    const msg = errors[name]
+    if (!msg) return null
+    return (
+      <Text size="1" color="red">
+        {msg}
+      </Text>
     )
-
-    return { connectField, Field, error, values, set, reset, getValues, watchValues }
+  }
+
+  /**
+   * Reset all values and clear errors.
+   *
+   * @param {Object} [vals] - Optional values to reset to. Defaults to schema defaults.
+   */
+  const reset = (vals) => {
+    setValues(vals ?? schema.parse({}))
+    setErrors({})
+  }
+
+  /** @type {React.FC<FieldProps>} */
+  const Field = useCallback(
+    (props) => <FieldView {...props} errorsRef={errorsRef} />,
+    [],
+  )
+
+  return {
+    connectField,
+    Field,
+    error,
+    values,
+    set,
+    reset,
+    getValues,
+    watchValues,
+  }
 }