@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/PanControl/PanControl.module.css

@@ -0,0 +1,71 @@
+.content {
+    position: relative;
+    width: 25px;
+    height: 25px;
+    margin: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  
+  .pan {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .pan svg circle:first-of-type {
+    fill: #DDEAF8;
+    fill-opacity: 0.0784314;
+  }
+  
+  .pan:hover:not(.disabled) svg circle:first-of-type {
+    fill: #D9EDFE;
+    fill-opacity: 0.145098;
+  }
+  
+  .active svg circle:first-of-type {
+    fill: #D3EDF8;
+    fill-opacity: 0.113725;
+  }
+
+  .disabled svg circle:first-of-type {
+    fill: #DDEAF8;
+    fill-opacity: 0.0784314;
+  }
+  
+  .tooltipContent {
+    background-color: var(--neutral-12);
+    color: var(--neutral-2);
+    font-size: 12px;
+    padding: 6px 10px;
+    border-radius: 8px;
+    z-index: 999;
+    white-space: nowrap;
+    animation: fadeIn 0.2s ease;
+    display: flex;
+    align-items: center;
+    width: 70px;
+    justify-content: center;
+    gap: 4px;
+  }
+  
+  .tooltipArrow {
+    fill: var(--neutral-12);
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  

package/src/components/PanControl/PanControl.stories.jsx

@@ -0,0 +1,100 @@
+import { PanControl } from './PanControl'
+import { useState } from 'react'
+import { Flex } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/PanControl',
+  component: PanControl,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A circular pan control component that allows setting a value between -1 and 1 with visual feedback. Can be controlled with mouse drag or mouse wheel.\n\n' +
+          '## Usage\n\n' +
+          '```jsx\n' +
+          "import { PanControl } from '@moises.ai/design-system'\n\n" +
+          'const MyComponent = () => {\n' +
+          '  const [panValue, setPanValue] = useState(0)\n\n' +
+          '  return (\n' +
+          '    <PanControl\n' +
+          '      value={panValue}\n' +
+          '      onChange={setPanValue}\n' +
+          '    />\n' +
+          '  )\n' +
+          '}\n' +
+          '```',
+      },
+    },
+  },
+  argTypes: {
+    value: {
+      description:
+        'Current pan value between -1 (left) and 1 (right), with 0 being center',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 0 },
+      },
+    },
+    onChange: {
+      description: 'Callback function triggered when the pan value changes',
+      table: {
+        type: { summary: 'function' },
+      },
+      action: 'onChange',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables user interaction with the control',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    className: {
+      description: 'Additional CSS class to apply to the component',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    minValue: {
+      control: { type: 'number', step: 0.01 },
+      description:
+        'Minimum mapped value (normalized -1 corresponds to this value)',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: -0.65 },
+      },
+    },
+    maxValue: {
+      control: { type: 'number', step: 0.01 },
+      description:
+        'Maximum mapped value (normalized 1 corresponds to this value)',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 0.65 },
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export const Default = {
+  args: {
+    minValue: -0.65,
+    maxValue: 0.65,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0)
+    return <PanControl {...args} value={value} onChange={setValue} />
+  },
+}
+
+export const Disabled = {
+  render: (args) => {
+    const [value, setValue] = useState(0.5)
+    return (
+      <PanControl {...args} value={value} onChange={setValue} disabled={true} />
+    )
+  },
+}

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -0,0 +1,36 @@
+import { Flex } from '@radix-ui/themes'
+import classNames from 'classnames'
+import aiStudio from './Patterns/aiStudio.png'
+import mastering from './Patterns/mastering.png'
+import product from './Patterns/product.png'
+import stemSeparation from './Patterns/stemSeparation.png'
+import voiceStudio from './Patterns/voiceStudio.png'
+
+export const ProductsBrandPattern = ({
+  className,
+  type = 'stem-separation',
+  size = '40px',
+  ...props
+}) => {
+  const patterns = {
+    'stem-separation': stemSeparation,
+    'voice-studio': voiceStudio,
+    'ai-studio': aiStudio,
+    mastering,
+    product,
+  }
+
+  const pattern = patterns[type]
+  return (
+    <img
+      src={pattern}
+      alt={`${type} pattern`}
+      width={size}
+      height={size}
+      className={classNames(className)}
+      {...props}
+    />
+  )
+}
+
+ProductsBrandPattern.displayName = 'ProductsBrandPattern'

package/src/components/ProductsBrandPattern/ProductsBrandPattern.stories.jsx

@@ -0,0 +1,47 @@
+import { ProductsBrandPattern } from './ProductsBrandPattern'
+
+const patternTypes = [
+  'stem-separation',
+  'voice-studio',
+  'ai-studio',
+  'mastering',
+  'product',
+]
+
+export default {
+  title: 'Components/ProductsBrandPattern',
+  component: ProductsBrandPattern,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Lightweight wrapper that renders the Moises product pattern glyphs by product type.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: patternTypes,
+      description: 'Which product pattern to render.',
+    },
+    size: {
+      control: 'text',
+      description:
+        'Width/height of the pattern image. Accepts px, rem, or number.',
+    },
+    className: {
+      control: false,
+      description: 'Custom class applied to the wrapper Flex.',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    type: 'stem-separation',
+    size: '40px',
+  },
+}

package/src/components/ProductsList/ProductsList.jsx

@@ -0,0 +1,54 @@
+import { Flex, Text, Badge } from '@radix-ui/themes'
+import styles from './ProductsList.module.css'
+import classNames from 'classnames'
+
+export const ProductsList = ({
+  products = [],
+  selectedProductId,
+  onProductClick,
+  collapsed,
+}) => {
+  return (
+    <Flex direction="column">
+      {products.map((product) => {
+        const isSelected = selectedProductId === product.id
+        return (
+          <Flex
+            key={product.id}
+            align="center"
+            px="3"
+            py="2"
+            className={classNames(styles.navItem, {
+              [styles.navItemSelected]: isSelected,
+              [styles.collapsed]: collapsed,
+            })}
+            onClick={() => onProductClick?.(product.id, product)}
+          >
+            {product.icon && (
+              <div className={styles.navItemIcon}>{product.icon}</div>
+            )}
+            <div
+              className={classNames(styles.navItemContent, {
+                [styles.navItemContentCollapsed]: collapsed,
+              })}
+            >
+              <Text size="2" weight="regular" className={styles.navItemText}>
+                {product.label}
+              </Text>
+              {product.badge && (
+                <Badge
+                  size="1"
+                  variant="soft"
+                  color={product.badge.color}
+                  className={styles.badge}
+                >
+                  {product.badge.label}
+                </Badge>
+              )}
+            </div>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}

package/src/components/ProductsList/ProductsList.module.css

@@ -0,0 +1,81 @@
+.navItem {
+    align-items: center;
+    border-radius: 6px;
+    cursor: pointer;
+    gap: 12px;
+    transition: 
+        background-color 0.2s,
+        gap 280ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0ms;
+}
+
+.navItemIcon {
+    width: 16px;
+    height: 16px;
+    color: var(--neutral-alpha-10);
+    display: flex;
+    flex-shrink: 0;
+}
+
+.navItemContent {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+    overflow: hidden;
+    opacity: 1;
+    transform: translateX(0);
+    transition: 
+        opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+        transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0ms;
+    will-change: opacity, transform;
+}
+
+.navItemContentCollapsed {
+    opacity: 0;
+    transform: translateX(-8px);
+    width: 0;
+    flex: 0;
+    transition-delay: 50ms;
+}
+
+.navItemText {
+    flex: 1;
+    color: var(--neutral-alpha-11);
+    white-space: nowrap;
+}
+
+.collapsed {
+    gap: 0;
+    transition-delay: 100ms;
+}
+
+.navItem:hover {
+    background-color: var(--neutral-alpha-2);
+}
+
+.navItem:hover .navItemIcon {
+    color: var(--white);
+}
+
+.navItem:hover .navItemText {
+    color: var(--neutral-alpha-12);
+}
+
+.navItemSelected {
+    background-color: var(--neutral-alpha-3);
+}
+
+.navItemSelected .navItemIcon {
+    color: var(--white);
+}
+
+.navItemSelected .navItemText {
+    color: var(--neutral-alpha-12);
+}
+
+.badge {
+    margin-left: auto;
+    flex-shrink: 0;
+}

package/src/components/ProductsList/ProductsList.stories.jsx

@@ -0,0 +1,69 @@
+import { useState } from 'react'
+import { ProductsList } from './ProductsList'
+import {
+  SparkBarsIcon,
+  LibraryIcon,
+  MasteringIcon,
+  LyricsIcon,
+  WidgetIcon,
+} from '../../icons'
+
+export default {
+  title: 'Components/ProductsList',
+  component: ProductsList,
+  tags: ['autodocs'],
+  argTypes: {
+    onProductClick: { action: 'product-clicked' },
+  },
+}
+
+export const Default = {
+  render: (args) => {
+    const [selectedProductId, setSelectedProductId] = useState('library')
+
+    return (
+      <ProductsList
+        {...args}
+        selectedProductId={selectedProductId}
+        onProductClick={(id, product) => {
+          setSelectedProductId(id)
+          args.onProductClick?.(id, product)
+        }}
+      />
+    )
+  },
+  args: {
+    products: [
+      {
+        id: 'library',
+        label: 'Library',
+        icon: <LibraryIcon width={16} height={16} />,
+      },
+      {
+        id: 'ai-studio',
+        label: 'AI Studio',
+        icon: <SparkBarsIcon width={16} height={16} />,
+        badge: {
+          label: 'Beta',
+          color: 'gray',
+        },
+      },
+      {
+        id: 'mastering',
+        label: 'Mastering',
+        icon: <MasteringIcon width={16} height={16} />,
+      },
+      {
+        id: 'lyric-writer',
+        label: 'Lyric Writer',
+        icon: <LyricsIcon width={16} height={16} />,
+      },
+      {
+        id: 'plugins',
+        label: 'Plugins',
+        icon: <WidgetIcon width={16} height={16} />,
+      },
+    ],
+    collapsed: false,
+  },
+}

package/src/components/ProfileMenu/MenuTrigger.jsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames'
+import React from 'react'
+import { DotsVerticalIcon } from '../../icons'
+import { Avatar, Flex, Text } from '../../index'
+import styles from './ProfileMenu.module.css'
+
+export function MenuTrigger({ className, user, collapsed, ...props }) {
+  return (
+    <Flex
+      className={classNames(styles.userProfile, { [styles.collapsed]: collapsed }, className)}
+      align="center"
+      justify="between"
+      {...props}
+    >
+      <div className={styles.userProfileInner}>
+        <Avatar
+          src={user.avatar}
+          fallback={user.name?.[0]}
+          size="3"
+          radius="full"
+          className={styles.userAvatar}
+        />
+
+        <div className={styles.userContent}>
+          <Text size="2" weight="regular" className={styles.userName}>
+            {user.name}
+          </Text>
+          <Text size="1" weight="regular" className={styles.userStatus}>
+            {user.plan}
+          </Text>
+        </div>
+      </div>
+
+      <div className={styles.userMenuWrapper}>
+        <Flex padding="4px 5px" className={styles.dropdownTriggerWrapper}>
+          <DotsVerticalIcon
+            className={styles.dropdownMenuTrigger}
+            width={16}
+            height={16}
+          />
+        </Flex>
+      </div>
+    </Flex>
+  )
+}

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -0,0 +1,66 @@
+import classNames from 'classnames'
+import React, { useMemo } from 'react'
+import { Button } from '../Button/Button'
+import { useIsMobileViewport } from '../../utils/useIsMobileViewport'
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
+import { MenuTrigger } from './MenuTrigger'
+import styles from './ProfileMenu.module.css'
+
+const renderUserMenuOption = (opt) => (
+  <div key={opt.key} className={styles.creditsHeader}>
+    <div className={styles.creditsInfo}>
+      <span className={styles.creditsLabel}>Credits: </span>
+      <span className={styles.creditsValue}>{opt.current}</span>/{opt.total}
+    </div>
+    {opt.onUpgrade && (
+      <Button
+        variant="solid"
+        color="cyan"
+        size="2"
+        onClick={(e) => {
+          e.stopPropagation()
+          opt.onUpgrade()
+        }}
+        className={styles.upgradeButton}
+      >
+        Upgrade
+      </Button>
+    )}
+  </div>
+)
+
+export const ProfileMenu = ({
+  className,
+  user,
+  menuOptions = [],
+  collapsed,
+  ...props
+}) => {
+  const isMobile = useIsMobileViewport()
+
+  const processedItems = useMemo(() => {
+    const creditsItem = menuOptions.find((item) => item.type === 'credits')
+    const otherItems = menuOptions.filter((item) => item.type !== 'credits')
+
+    return creditsItem
+      ? [
+        {
+          type: 'custom',
+          key: 'credits-header',
+          customRender: () => renderUserMenuOption(creditsItem),
+        },
+        ...otherItems,
+      ]
+      : otherItems
+  }, [menuOptions])
+
+  return (
+    <DropdownMenu
+      className={classNames(styles.profileMenu, className)}
+      trigger={<MenuTrigger user={user} collapsed={collapsed} />}
+      options={processedItems}
+      side={isMobile ? 'left' : 'right'}
+      {...props}
+    />
+  )
+}

package/src/components/ProfileMenu/ProfileMenu.module.css

@@ -0,0 +1,101 @@
+.userProfile {
+  cursor: pointer;
+  width: 100%;
+}
+
+.userProfileInner {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: 13px;
+  transition: gap 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.collapsed .userProfileInner {
+  gap: 0;
+}
+
+.userAvatar {
+  flex-shrink: 0;
+}
+
+.userContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  opacity: 1;
+  transform: translateX(0);
+  transition: 
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0ms;
+  will-change: opacity, transform;
+}
+
+.collapsed .userContent {
+  opacity: 0;
+  transform: translateX(-8px);
+  flex: 0;
+  transition-delay: 50ms;
+}
+
+.userInfo {
+  flex: 1;
+  min-width: 0;
+}
+
+.userName {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 140px;
+}
+
+.userStatus {
+  color: var(--neutral-alpha-10);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.userMenuWrapper {
+  margin-left: auto;
+  flex-shrink: 0;
+  opacity: 1;
+  transition: 
+    opacity 250ms cubic-bezier(0.4, 0, 0.2, 1),
+    transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(0);
+}
+
+.collapsed .userMenuWrapper {
+  opacity: 0;
+  transform: translateX(-8px);
+  pointer-events: none;
+  transition-delay: 50ms;
+}
+
+/* Footer Item (Custom) */
+.footerItem {
+  width: 100%;
+}
+
+
+.dropdownTriggerWrapper {
+  display: flex;
+  border-radius: 4px;
+}
+
+.dropdownMenuTrigger {
+  color: var(--neutral-alpha-7);
+  width: 16px;
+  height: 24px;
+  border-radius: 99px;
+  transition: color 0.2s, background-color 0.2s;
+}
+
+.dropdownTriggerWrapper:hover .dropdownMenuTrigger {
+  color: var(--neutral-alpha-11);
+  background-color: rgba(255, 255, 255, 0.07);
+}