@moises.ai/design-system 3.5.6 → 3.6.0

package/src/components/SetlistList/SetlistList.module.css

@@ -9,6 +9,11 @@
     align-items: center;
     width: calc(100% - 24px);
   
+    &:focus-visible {
+      outline: 2px solid var(--neutral-alpha-8);
+      outline-offset: -1px;
+    }
+
     &:hover,
     &.menuOpen {
       background: var(--neutral-alpha-2);
@@ -117,6 +122,23 @@
     border-radius: var(--Radius-3-max, 6px);
     background: var(--neutral-alpha-3);
 
+    &.collapsed {
+      background: transparent;
+
+      .avatarSetlist {
+        background: var(--neutral-2);
+      }
+
+      &:hover,
+      &.menuOpen {
+        background: transparent !important;
+
+        .avatarSetlist {
+          background: var(--neutral-2) !important;
+        }
+      }
+    }
+
     &:hover,
     &.menuOpen {
       border-radius: var(--Radius-3-max, 6px);
@@ -168,20 +190,32 @@
 
   .setlistsContent {
     /* gap: 4px; */
+    margin: 1px 0;
   }
 .collapsedStack {
   gap: 0;
 }
+
+.collapsedStackCentered {
+  align-items: center;
+}
 .collapsedStackItem {
   position: relative;
+  /* justify-content: flex-start; */
 }
 
 .collapsedMask {
   position: relative;
   overflow: hidden;
   padding-top: 2px;
+  display: flex;
+  
 }
 
+/* .collapsedStack.collapsedMask {
+  padding-top: 12px;
+} */
+
 .collapsedTransition {
   transition: margin-top 360ms ease-in-out;
 }

package/src/components/Sidebar/Sidebar.module.css

@@ -246,7 +246,7 @@
 }
 
 .headerCollapsed {
-  padding-left: 17px;
+  padding-left: 16px;
 }
 
 .separator {

package/src/components/Sidebar/SidebarSection/SidebarSection.module.css

@@ -16,5 +16,5 @@
 
 .separator {
     background: var(--neutral-alpha-4) !important;
-    margin: 0 4px 23px 4px;
+    margin: 0 3px 23px 3px;
 }

package/src/components/useForm/useForm.jsx

@@ -0,0 +1,204 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { Text, Flex } from '../../index'
+
+/**
+ * @typedef {import('zod').ZodObject} ZodSchema
+ */
+
+/**
+ * @typedef {'checkbox' | 'switch'} ToggleFieldType
+ */
+
+/**
+ * @typedef {Object} TextFieldProps
+ * @property {string} value - Current field value.
+ * @property {(e: Event | string) => void} onChange - Change handler that accepts
+ *   an input event or a raw value (for Select-like components).
+ */
+
+/**
+ * @typedef {Object} ToggleFieldProps
+ * @property {boolean} checked - Current checked state.
+ * @property {(checked: boolean) => void} onCheckedChange - Callback fired when the checked state changes.
+ */
+
+/**
+ * @typedef {Object} FormResult
+ * @property {boolean} isValid - Whether the current values pass schema validation.
+ * @property {Object} data - Parsed data when valid, raw values when invalid.
+ */
+
+/**
+ * @typedef {Object} FieldProps
+ * @property {string} name - Field name matching a key in the schema.
+ * @property {React.ReactNode} children - The form control to render.
+ */
+
+/**
+ * @typedef {Object} UseFormReturn
+ * @property {((name: string, type?: undefined) => TextFieldProps) & ((name: string, type: ToggleFieldType) => ToggleFieldProps)} connectField
+ *   Returns spread-ready props for a form control. Pass `'checkbox'` or `'switch'`
+ *   as the second argument for toggle controls.
+ * @property {React.FC<FieldProps>} Field - Wrapper that renders its children with
+ *   an inline validation error message below.
+ * @property {(name: string) => React.ReactNode | null} error - Returns the error
+ *   message element for a field, or `null` if the field is valid.
+ * @property {Object} values - Current form values object (reactive).
+ * @property {(name: string, value: *) => void} set - Imperatively set a single field value.
+ * @property {(vals?: Object) => void} reset - Reset all values and errors.
+ *   Pass an object to reset to specific values, or omit for schema defaults.
+ * @property {() => FormResult} getValues - Validate the form and return
+ *   `{ isValid, data }`. Sets field errors on failure.
+ * @property {(cb: (values: Object) => void) => () => void} watchValues
+ *   Subscribe to value changes. Returns an unsubscribe function.
+ */
+
+/** @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>
+    )
+}
+
+/**
+ * Lightweight form hook driven by a Zod schema.
+ *
+ * @param {Object} options
+ * @param {ZodSchema} options.schema - Zod object schema used for default values and validation.
+ * @returns {UseFormReturn}
+ *
+ * @example
+ * const schema = z.object({
+ *   name: z.string().min(2, 'Too short').default(''),
+ *   agree: z.boolean().refine(v => v, 'Required').default(false),
+ * })
+ *
+ * function MyForm() {
+ *   const { connectField, Field, getValues } = useForm({ schema })
+ *
+ *   return (
+ *     <>
+ *       <Field name="name">
+ *         <TextField placeholder="Name" {...connectField('name')} />
+ *       </Field>
+ *       <Field name="agree">
+ *         <Checkbox {...connectField('agree', 'checkbox')} />
+ *       </Field>
+ *       <Button onClick={() => {
+ *         const { isValid, data } = getValues()
+ *         if (isValid) console.log(data)
+ *       }}>Save</Button>
+ *     </>
+ *   )
+ * }
+ */
+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) }
+    }
+
+    /**
+     * 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 }
+    }
+
+    /**
+     * 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>
+    }
+
+    /**
+     * 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 }
+}