@moises.ai/design-system 4.17.3 → 4.17.5

package/package.json

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

package/src/components/SetlistList/SetlistList.jsx

@@ -1,4 +1,4 @@
-import { Flex, Text, Avatar, ScrollArea } from '@radix-ui/themes'
+import { Flex, Text, Avatar, ScrollArea, Skeleton } from '@radix-ui/themes'
 import { useDroppable } from '@dnd-kit/core'
 import styles from './SetlistList.module.css'
 import classNames from 'classnames'
@@ -145,6 +145,7 @@ export const SetlistItem = ({
   onDragLeave,
   onDragOver,
   onDrop,
+  isLoading = false,  
 }) => {
   const [isHovering, setIsHovering] = useState(false)
 
@@ -210,9 +211,11 @@ export const SetlistItem = ({
           [styles.collapsedInner]: collapsed,
         })}
       >
-        {avatar && (
+        {(avatar || isLoading) && (
           <div className={styles.avatarSetlist}>
-            {typeof avatar === 'string' ? (
+            {isLoading ? (
+              <Skeleton className={styles.avatarSetlistSkeleton} />
+            ) : typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
@@ -226,28 +229,37 @@ export const SetlistItem = ({
         )}
         <Flex
           direction="column"
+          gap={isLoading ? '1' : '0'}
           className={classNames(styles.textWrapper, {
             [styles.textWrapperHidden]: collapsed,
           })}
         >
-          {text && (
-            <Text
-              size="2"
-              weight="regular"
-              className={styles.textNewSetlist}
-              truncate
-            >
-              {text}
-            </Text>
-          )}
-          <Text
-            size="1"
-            weight="regular"
-            className={styles.textSubtitle}
-            truncate
-          >
-            {subtitle}
-          </Text>
+          {(text || isLoading) &&
+            (isLoading ? (
+              <Skeleton className={styles.textNewSetlistSkeleton} />
+            ) : (
+              <Text
+                size="2"
+                weight="regular"
+                className={styles.textNewSetlist}
+                truncate
+              >
+                {text}
+              </Text>
+            ))}
+          {(subtitle || isLoading) &&
+            (isLoading ? (
+              <Skeleton className={styles.textSubtitleSkeleton} />
+            ) : (
+              <Text
+                size="1"
+                weight="regular"
+                className={styles.textSubtitle}
+                truncate
+              >
+                {subtitle}
+              </Text>
+            ))}
         </Flex>
       </Flex>
       {dropdownMenuOptions &&
@@ -621,10 +633,11 @@ export const SetlistList = ({
                 moises={setlist.moises}
                 text={setlist.label}
                 subtitle={setlist.subtitle}
+                isLoading={setlist.isLoading}
                 dropdownMenuOptions={setlist.dropdownMenuOptions}
                 collapsed={itemCollapsed}
                 isMobile={isMobile}
-                className={classNames({
+                className={classNames(className, {
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed && showCollapsedStack,
                   [styles.staggerItem]: isStaggerActive,

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

@@ -92,6 +92,12 @@
   z-index: 1;
 }
 
+.avatarSetlistSkeleton {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+}
+
 .avatarClickable {
   cursor: pointer;
 }
@@ -128,6 +134,12 @@
   color: var(--neutral-alpha-11);
 }
 
+.textNewSetlistSkeleton {
+  height: 14px;
+  width: 126px;
+  border-radius: 4px;
+}
+
 .collapsed .textNewSetlist {
   opacity: 0;
 }
@@ -140,6 +152,12 @@
   white-space: nowrap;
 }
 
+.textSubtitleSkeleton {
+  height: 12px;
+  width: 95px;
+  border-radius: 4px;
+}
+
 .collapsed .textSubtitle {
   opacity: 0;
 }

package/src/components/SetlistList/SetlistList.stories.jsx

@@ -236,6 +236,28 @@ export const Empty = {
   },
 }
 
+const loadingSetlists = [
+  { id: 'loading-1', isLoading: true },
+  { id: 'loading-2', isLoading: true },
+  { id: 'loading-3', isLoading: true },
+]
+
+export const Loading = {
+  render: (args) => (
+    <SetlistList
+      {...args}
+      setlists={loadingSetlists}
+      onNewSetlistClick={() => {
+        args.onNewSetlistClick?.()
+      }}
+    />
+  ),
+  args: {
+    collapsed: false,
+    isMobile: false,
+  },
+}
+
 const trackRows = [
   {
     id: 'track-1',

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -17,6 +17,8 @@ import styles from './SliderLibrary.module.css'
  * hover/focus/drag with the current value.
  * @property {(value: number) => React.ReactNode} [formatValue] - Formats the value for
  * display in the tooltip. Defaults to the raw number.
+ * @property {(value: number) => void} [onThumbDoubleClick] - Fires when the thumb is
+ * double-clicked. Receives the current value.
  * @property {string} [aria-label] - Accessible label, recommended when no visual label exists.
  * @property {string} [className] - Extra class on the root.
  */
@@ -57,6 +59,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     disabled = false,
     showTooltip = true,
     formatValue,
+    onThumbDoubleClick,
     className,
     ...props
   },
@@ -148,6 +151,9 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const handleThumbPointerDown = () => setKeyboardFocus(false)
   const handleThumbPointerEnter = () => setIsHovering(true)
   const handleThumbPointerLeave = () => setIsHovering(false)
+  const handleThumbDoubleClick = () => {
+    if (!disabled) onThumbDoubleClick?.(value)
+  }
 
   const displayValue = formatValue ? formatValue(value) : value
   const tooltipOpen =
@@ -163,6 +169,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
       onPointerDown={handleThumbPointerDown}
       onPointerEnter={handleThumbPointerEnter}
       onPointerLeave={handleThumbPointerLeave}
+      onDoubleClick={onThumbDoubleClick ? handleThumbDoubleClick : undefined}
     />
   )
 

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -98,3 +98,25 @@ export const WithLabel = {
     )
   },
 }
+
+export const ThumbDoubleClick = {
+  name: 'Thumb double-click',
+  render: () => {
+    const defaultValue = 0
+    const [value, setValue] = useState(35)
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <SliderLibrary
+          value={value}
+          onValueChange={setValue}
+          onThumbDoubleClick={() => setValue(defaultValue)}
+          formatValue={(v) => `${v}%`}
+          aria-label="Volume"
+        />
+        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+          Double-click the thumb to reset to {defaultValue}%
+        </span>
+      </div>
+    )
+  },
+}

package/src/components/ToolsPopover/ToolsPopover.jsx

@@ -0,0 +1,114 @@
+import classNames from 'classnames'
+import { Popover as PopoverRadix } from 'radix-ui'
+import { memo, useCallback, useState } from 'react'
+import { ScrollArea } from '../../index'
+import { Theme } from '../theme/Theme'
+import styles from './ToolsPopover.module.css'
+
+export const ToolsPopover = memo(
+  ({
+    trigger,
+    children,
+    className,
+    contentClassName,
+    triggerClassName,
+    disabled = false,
+    maxHeight,
+    sideOffset = 5,
+    matchTriggerWidth = false,
+    wrapCloseMenu,
+    modal = false,
+    ...props
+  }) => {
+    const isControlled = props.open !== undefined
+    const [internalOpen, setInternalOpen] = useState(false)
+
+    const open = isControlled ? props.open : internalOpen
+    const onOpenChange = useCallback(
+      (value) => {
+        if (!isControlled) setInternalOpen(value)
+        props?.onOpenChange?.(value)
+      },
+      [isControlled, props?.onOpenChange],
+    )
+
+    const baseClose = useCallback(() => onOpenChange(false), [onOpenChange])
+    const closePopover = wrapCloseMenu ? wrapCloseMenu(baseClose) : baseClose
+
+    const contentStyle = {
+      ...(matchTriggerWidth && {
+        width: 'var(--radix-popover-trigger-width)',
+        boxSizing: 'border-box',
+      }),
+      ...(maxHeight && { height: maxHeight }),
+    }
+
+    const handlePanelKeyDown = useCallback((event) => {
+      if (event.key === 'Tab') {
+        event.stopPropagation()
+      }
+    }, [])
+
+    const handleOpenAutoFocus = useCallback((event) => {
+      event.preventDefault()
+      const panel = event.currentTarget.querySelector('[data-tools-popover-panel]')
+      panel?.focus({ preventScroll: true })
+    }, [])
+
+    const renderPanel = () => (
+      <div
+        className={styles.contentPanel}
+        data-tools-popover-panel
+        tabIndex={-1}
+        onKeyDown={handlePanelKeyDown}
+      >
+        {typeof children === 'function' ? children(closePopover) : children}
+      </div>
+    )
+
+    const popoverContent = (
+      <Theme asChild>
+        <PopoverRadix.Content
+          className={classNames(styles.popoverContent, className, contentClassName)}
+          side={props.side}
+          align={props.align}
+          style={contentStyle}
+          sideOffset={sideOffset}
+          alignOffset={0}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          onCloseAutoFocus={(event) => {
+            event.preventDefault()
+          }}
+          onClick={(event) => event.stopPropagation()}
+        >
+          {maxHeight ? (
+            <ScrollArea scrollbars="vertical" style={{ height: maxHeight }}>
+              {renderPanel()}
+            </ScrollArea>
+          ) : (
+            renderPanel()
+          )}
+        </PopoverRadix.Content>
+      </Theme>
+    )
+
+    return (
+      <PopoverRadix.Root
+        {...props}
+        modal={modal}
+        open={disabled ? false : open}
+        onOpenChange={disabled ? undefined : onOpenChange}
+      >
+        <PopoverRadix.Trigger asChild className={triggerClassName} disabled={disabled}>
+          {trigger}
+        </PopoverRadix.Trigger>
+
+        <PopoverRadix.Portal className={styles.popoverPortal}>
+          {popoverContent}
+        </PopoverRadix.Portal>
+      </PopoverRadix.Root>
+    )
+  },
+)
+
+ToolsPopover.displayName = 'ToolsPopover'

package/src/components/ToolsPopover/ToolsPopover.module.css

@@ -0,0 +1,88 @@
+.popoverPortal {
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: #18191b;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.popoverContent {
+  border-radius: 8px;
+  width: fit-content;
+  background-color: var(--panel-solid);
+  padding: 12px 16px 16px 16px;
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--neutral-alpha-3);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.popoverContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.popoverContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.popoverContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.popoverContent[data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.contentPanel {
+  outline: none;
+}

package/src/components/ToolsPopover/ToolsPopover.stories.jsx

@@ -0,0 +1,139 @@
+import { Flex, Switch, Text } from '@radix-ui/themes'
+import { useState } from 'react'
+import { MetronomeIcon } from '../../icons/MetronomeIcon'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+import { ToolsPopover } from './ToolsPopover'
+
+export default {
+  title: 'Components/ToolsPopover',
+  component: ToolsPopover,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+ToolsPopover is a Popover wrapper with controlled open state, styled panel content, and focus management.
+
+Pass any single React element as \`trigger\` — it is forwarded to \`Popover.Trigger\` via \`asChild\`.
+
+Use this instead of \`ToolsDropdown\` when the panel contains interactive content (forms, switches, sliders) that should stay open while the user interacts with it.
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    trigger: {
+      description: 'Any single React element used as the popover trigger',
+      table: { type: { summary: 'React.ReactElement' } },
+    },
+    modal: {
+      control: 'boolean',
+      table: { type: { summary: 'boolean' }, defaultValue: { summary: false } },
+    },
+    children: {
+      description: 'Popover content or render prop receiving closePopover',
+      table: { type: { summary: 'React.ReactNode | (closePopover) => React.ReactNode' } },
+    },
+  },
+}
+
+export const Default = {
+  render: () => (
+    <ToolsPopover trigger={<Button variant="soft">Settings</Button>}>
+      <Text size="2">Tool settings panel</Text>
+    </ToolsPopover>
+  ),
+}
+
+export const WithIconButton = {
+  render: () => (
+    <ToolsPopover trigger={<IconButton><MetronomeIcon width={16} height={16} /></IconButton>}>
+      <Flex direction="column" gap="2">
+        <Text size="2">BPM: 120</Text>
+        <Text size="2">Time signature: 4/4</Text>
+      </Flex>
+    </ToolsPopover>
+  ),
+}
+
+export const WithInteractiveContent = {
+  render: () => {
+    const [enabled, setEnabled] = useState(false)
+
+    return (
+      <ToolsPopover trigger={<Button variant="ghost">Chords</Button>}>
+        {(closePopover) => (
+          <Flex direction="column" gap="3" width="220px">
+            <Text size="2">Show chord diagrams</Text>
+            <Switch size="2" checked={enabled} onCheckedChange={setEnabled} />
+            <Button
+              variant="soft"
+              onClick={() => {
+                closePopover()
+                alert('Saved')
+              }}
+            >
+              Save
+            </Button>
+          </Flex>
+        )}
+      </ToolsPopover>
+    )
+  },
+}
+
+export const ControlledOpen = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+
+    return (
+      <Flex direction="column" gap="4" align="center">
+        <Flex gap="2">
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Open
+          </button>
+          <button type="button" onClick={() => setIsOpen(false)}>
+            Close
+          </button>
+        </Flex>
+
+        <ToolsPopover
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          trigger={<Button variant="outline">Controlled</Button>}
+        >
+          <Text size="2">Controlled popover content</Text>
+        </ToolsPopover>
+
+        <Text size="1">
+          Status: <strong>{isOpen ? 'Open' : 'Closed'}</strong>
+        </Text>
+      </Flex>
+    )
+  },
+}
+
+export const CustomElement = {
+  render: () => (
+    <ToolsPopover
+      trigger={
+        <button
+          type="button"
+          style={{
+            padding: '8px 12px',
+            borderRadius: 4,
+            border: '1px solid var(--neutral-alpha-6)',
+            background: 'transparent',
+            cursor: 'pointer',
+          }}
+        >
+          Custom trigger
+        </button>
+      }
+    >
+      <Text size="2">Any element can be the trigger</Text>
+    </ToolsPopover>
+  ),
+}

package/src/index.jsx

@@ -55,6 +55,7 @@ export { DataTable } from './components/DataTable/DataTable'
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
 export { ToolsDropdown } from './components/ToolsDropdown/ToolsDropdown'
+export { ToolsPopover } from './components/ToolsPopover/ToolsPopover'
 export { EmptyState } from './components/EmptyState/EmptyState'
 export {
   Extension,