@moises.ai/design-system 3.4.5 → 3.4.6

package/src/components/Slider/Slider.module.css

@@ -0,0 +1,159 @@
+.tooltip {
+  width: 204px;
+}
+
+.range {
+  z-index: 4;
+  left: 0;
+  top: -10px;
+  width: 100%;
+  opacity: 0;
+  position: absolute;
+
+  & input {
+    top: 0;
+    left: 0;
+    width: 100%;
+    cursor: pointer;
+    position: relative;
+  }
+}
+.sliderRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  touch-action: none;
+}
+
+.sliderTrack {
+  position: relative;
+  flex-grow: 1;
+  border-radius: 9999px;
+  background-color: var(--neutral-alpha-3);
+  z-index: 2;
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.sliderTrackSize1 {
+  height: 4px;
+}
+
+.sliderTrackSize2 {
+  height: 6px;
+}
+
+.sliderTrackSize3 {
+  height: 10px;
+}
+
+.sliderTrack[data-disabled] {
+  cursor: default;
+}
+
+.sliderRange {
+  position: absolute;
+  height: 100%;
+  width: var(--radix-slider-range);
+  border-radius: 9999px;
+  /* background-color: var(--aqua-dark-alpha-8); */
+  &:hover {
+    cursor: pointer;
+  }
+}
+.sliderRangeAccent {
+  background-color: var(--aqua-dark-alpha-8);
+}
+.sliderRangeNeutral {
+  background-color: var(--neutral-11);
+}
+
+.sliderRangeHighContrastAccent {
+    background-color: var(--aqua-dark-12);
+}
+
+.sliderRangeHighContrastNeutral {
+  background-color: var(--neutral-12);
+}
+
+.sliderRange[data-disabled] {
+  background-color: var(--neutral-alpha-3);
+  cursor: default !important;
+}
+.SliderRoot:where([data-disabled]){
+  background-color: var(--neutral-alpha-1);
+  cursor: default;
+}
+
+.sliderThumb {
+  position: absolute;
+  transform: translate(-50%, -30%);
+   background-color: var(--white);
+  border: 1px solid var(--neutral-alpha-5);
+  border-radius: 9999px;
+  z-index: 5;
+ 
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.sliderThumbSize1 {
+  width: 13px;
+  height: 13px;
+  top: -1px;
+}
+
+.sliderThumbSize2 {
+  width: 16px;
+  height: 16px;
+}
+
+.sliderThumbSize3 {
+  width: 19px;
+  height: 19px;
+  top: 1px;
+}
+
+.sliderThumb[data-disabled] {
+  border: 1px solid var(--neutral-7);
+  background: var(--neutral-2);
+  cursor: default;
+}
+
+.sliderContainer {
+  width: 100%;
+  display: flex;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.markersContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  z-index: 1;
+}
+
+.marker {
+  position: absolute;
+  width: 1px;
+  height: 12px;
+  background: var(--neutral-8);
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.markerSize3 {
+  height: 18px;
+}

package/src/components/Slider/Slider.stories.jsx

@@ -0,0 +1,199 @@
+import { Flex } from '@radix-ui/themes'
+import { Slider } from './Slider'
+
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Usage
+
+\`\`\`jsx
+import { Slider } from '@moises.ai/design-system'
+
+<Slider
+  title="AI Creative Freedom"
+  tooltip="This is a tooltip"
+  info="Balance"
+  value={[20]}
+  handleValueChange={(value) => console.log(value)}
+  min={0}
+  max={100}
+  step={1}
+  disabled={false}
+  size="2"
+/>  
+\`\`\`
+
+## Component API
+
+\`\`\`jsx
+{
+  title: string, // Title of the slider
+  tooltip: string, // Tooltip of the slider
+  info: string, // Info of the slider
+  value: number[], // Default value of the slider
+  handleValueChange: (value: number[]) => void, // Function to handle value change
+  min: number, // Minimum value of the slider
+  max: number, // Maximum value of the slider
+  step: number, // Step value of the slider
+  disabled: boolean, // Whether the slider is disabled
+  color: 'accent' | 'neutral', // Color of the slider
+  highContrast: boolean, // Whether the slider is in high contrast mode
+  size: '1' | '2' | '3', // Size of the slider (1: small, 2: medium, 3: large)
+  markers: number[], // Array of values where visual markers should be displayed
+}
+\`\`\`  
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'The title of the slider',
+    },
+    tooltip: {
+      control: 'text',
+      description: 'The tooltip of the slider',
+    },
+    info: {
+      control: 'text',
+      description: 'The info of the slider',
+    },
+    value: {
+      control: 'number',
+      description: 'The value of the slider',
+    },
+    handleValueChange: {
+      control: 'function',
+      description: 'The function to handle value change',
+    },
+    min: {
+      control: 'number',
+      description: 'The minimum value of the slider',
+    },
+    max: {
+      control: 'number',
+      description: 'The maximum value of the slider',
+    },
+    step: {
+      control: 'number',
+      description: 'The step value of the slider',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the slider is disabled',
+    },
+    className: {
+      control: 'text',
+      description: 'The class name of the slider',
+    },
+    color: {
+      control: 'select',
+      options: ['accent', 'neutral'],
+      description: 'The color of the slider',
+    },
+    highContrast: {
+      control: 'boolean',
+      description: 'Whether the slider is in high contrast mode',
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2', '3'],
+      description: 'Size of the slider (1: small, 2: medium, 3: large)',
+    },
+    markers: {
+      control: 'object',
+      description: 'Array of values where visual markers should be displayed',
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    defaultValue: [20],
+    title: 'AI Creative Freedom',
+    tooltip: 'This is a tooltip',
+    info: 'Balance',
+    color: 'accent',
+    highContrast: false,
+    size: '2',
+  },
+  render: (args) => (
+    <Flex width="300px">
+      <Slider {...args} />
+    </Flex>
+  ),
+}
+
+export const SliderWithoutTitle = {
+  args: {
+    defaultValue: [20],
+    size: '2',
+  },
+  render: (args) => (
+    <Flex width="300px">
+      <Slider {...args} />
+    </Flex>
+  ),
+}
+
+export const AllSizes = {
+  render: () => (
+    <Flex direction="column" gap="4" width="300px">
+      <Slider title="Small Size" value={[20]} size="1" color="accent" />
+      <Slider title="Medium Size" value={[20]} size="2" color="accent" />
+      <Slider title="Large Size" value={[20]} size="3" color="accent" />
+    </Flex>
+  ),
+}
+
+export const WithMarkers = {
+  args: {
+    defaultValue: [30],
+    title: 'Slider with Markers',
+    tooltip: 'This slider has visual markers at 25%, 50%, and 75%',
+    info: '30%',
+    color: 'accent',
+    size: '2',
+    markers: [25, 50, 75],
+  },
+  render: (args) => (
+    <Flex width="300px">
+      <Slider {...args} />
+    </Flex>
+  ),
+}
+
+export const WithMarkersDifferentSizes = {
+  render: () => (
+    <Flex direction="column" gap="4" width="300px">
+      <Slider
+        title="Small with Markers"
+        value={[20]}
+        size="1"
+        color="accent"
+        markers={[25, 50, 75]}
+      />
+      <Slider
+        title="Medium with Markers"
+        value={[40]}
+        size="2"
+        color="neutral"
+        markers={[20, 40, 60, 80]}
+      />
+      <Slider
+        title="Large with Markers"
+        value={[60]}
+        size="3"
+        color="accent"
+        markers={[10, 30, 50, 70, 90]}
+      />
+    </Flex>
+  ),
+}

package/src/components/StemGenerationForm/BesideFooter/BesideFooter.jsx

@@ -0,0 +1,107 @@
+import { useCallback } from 'react'
+import { Popover, Box, Flex, Switch } from '@radix-ui/themes'
+import { IconButton } from '../../IconButton/IconButton'
+import { Text } from '../../Text/Text'
+import { TooltipWithInfoIcon } from '../../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import { CreativeFreedomSection } from '../CreativeFreedomSection/CreativeFreedomSection'
+import styles from './BesideFooter.module.css'
+import classNames from 'classnames'
+import { GUIDANCE_SCALE_DEFAULTS } from '../utils'
+import { PreferencesIcon } from '../../../icons'
+
+export function BesideFooter({
+  formState,
+  onFormStateChange,
+  i18n = { _: (text) => text },
+  disabledBesideFooter,
+  presetSelected,
+  showAdvancedControlsPaywall,
+}) {
+  const handleUseProjectChordsChange = (checked) => {
+    onFormStateChange({
+      ...formState,
+      useProjectChords: checked,
+    })
+  }
+
+  const handleOptimizeConditioningChange = useCallback(
+    async (checked) => {
+      if (await showAdvancedControlsPaywall()) {
+        return
+      }
+
+      onFormStateChange({
+        ...formState,
+        clapNn: checked,
+      })
+    },
+    [formState, onFormStateChange, showAdvancedControlsPaywall],
+  )
+
+  return (
+    <Popover.Root modal={true}>
+      <Popover.Trigger disabled={disabledBesideFooter}>
+        <IconButton
+          variant="soft"
+          size="2"
+          disabled={disabledBesideFooter}
+          className={classNames([styles.customIconButton], {
+            [styles.disabledIconButton]: disabledBesideFooter,
+          })}
+        >
+          <PreferencesIcon width={16} height={16} />
+        </IconButton>
+      </Popover.Trigger>
+      <Popover.Content minWidth="350px" maxWidth="100%" side="top">
+        <Box>
+          <Flex direction="column" gap="5">
+            <CreativeFreedomSection
+              formState={formState}
+              instrument={formState.instrument}
+              i18n={i18n}
+              onFormStateChange={onFormStateChange}
+              showAdvancedControlsPaywall={showAdvancedControlsPaywall}
+            />
+            {presetSelected === '1' && (
+              <Flex justify="between" align="center">
+                <Flex align="center" gap="2">
+                  <Text size="2">{i18n._('Optimize Conditioning')}</Text>
+                  <TooltipWithInfoIcon
+                    content={i18n._(
+                      'More stable results when enabled. Disable to boost conditioning influence at the cost of stability.',
+                    )}
+                  />
+                </Flex>
+
+                <Flex align="center" gap="2">
+                  <Switch
+                    checked={formState.clapNn}
+                    onCheckedChange={handleOptimizeConditioningChange}
+                  />
+                </Flex>
+              </Flex>
+            )}
+            <Flex justify="between" align="center">
+              <Flex align="center" gap="2">
+                <Text size="2">{i18n._('Use Project Chords')}</Text>
+                <TooltipWithInfoIcon
+                  content={i18n._(
+                    'Use project chords to guide the AI model to generate stems that follow your chord progression. Not available for drums generation.',
+                  )}
+                />
+              </Flex>
+
+              <Flex align="center" gap="2">
+                <Switch
+                  disabled={formState.instrument === 'drums'}
+                  checked={formState.useProjectChords}
+                  onCheckedChange={handleUseProjectChordsChange}
+                />
+              </Flex>
+            </Flex>
+          </Flex>
+        </Box>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

package/src/components/StemGenerationForm/BesideFooter/BesideFooter.module.css

@@ -0,0 +1,4 @@
+.disabledIconButton{ 
+color: var(--neutral-alpha-8) !important;
+
+}

package/src/components/StemGenerationForm/Concurrency/Concurrency.jsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react'
+import { Flex, Text } from '@radix-ui/themes'
+import { MessageWithAction } from '../../MessageWithAction/MessageWithAction'
+import { Info2Icon } from '../../../icons'
+import styles from './Concurrency.module.css'
+
+export const Concurrency = ({
+  showUpgrade,
+  onClickUpgrade,
+  i18n = { _: (text) => text },
+  onMount,
+}) => {
+  useEffect(() => {
+    if (onMount) {
+      onMount()
+    }
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  return (
+    <MessageWithAction
+      type="info"
+      showIcon={false}
+      className={styles.messageWithActionCustom}
+    >
+      <Flex direction="row" gap="2">
+        <Flex className={styles.infoIcon}>
+          <Info2Icon width={16} height={16} />
+        </Flex>
+
+        <Text size="2" className={styles.neutral11}>
+          {i18n._(
+            'You’ve reached the simultaneous stem generation limit. Wait to finish before continuing.',
+          )}
+
+          {showUpgrade && (
+            <Text size="2" className={styles.neutral11} weight="bold">
+              {' '}
+              {i18n._('Unlock up to 10 simultaneous generations,')}{' '}
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault()
+                  onClickUpgrade?.()
+                }}
+                className={styles.upgradeButton}
+              >
+                {i18n._('upgrade to PRO.')}
+              </button>
+            </Text>
+          )}
+        </Text>
+      </Flex>
+    </MessageWithAction>
+  )
+}

package/src/components/StemGenerationForm/Concurrency/Concurrency.module.css

@@ -0,0 +1,26 @@
+
+  .neutral11{ 
+    color: var(--neutral-alpha-11);
+  }
+
+  .infoIcon {
+    color: var(--neutral-alpha-11);
+    width: 16px;
+  }
+
+  .messageWithActionCustom {
+    border-radius: 8px !important;
+    padding: 8px 12px !important;
+  }
+
+  .upgradeButton {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--neutral-alpha-11);
+    font-weight: bold;
+    font-size: 14px;
+
+  }

package/src/components/StemGenerationForm/CreateFromPreset/CreateFromPreset.jsx

@@ -0,0 +1,44 @@
+import { useMemo } from 'react'
+import { Flex } from '@radix-ui/themes'
+import { ListCards } from '../../ListCards/ListCards'
+import { SparklesGradientIcon } from '../../../icons'
+
+export const CreateFromPreset = ({
+  formState,
+  handlePresetChange,
+  presets,
+}) => {
+  const filteredPresets = useMemo(() => {
+    return presets.filter(
+      (preset) => preset.instrument === formState.instrument,
+    )
+  }, [presets, formState.instrument])
+
+  return (
+    <Flex
+      direction="column"
+      gap="0"
+      style={{
+        overflowY: 'auto',
+        maxHeight: '100%',
+      }}
+    >
+      <ListCards>
+        {filteredPresets.map((preset) => (
+          <ListCards.Card
+            key={preset.id}
+            item={preset}
+            onClick={() => handlePresetChange(preset.id)}
+            icon={
+              preset.presetName === 'AI Match' ? (
+                <SparklesGradientIcon width={16} height={16} />
+              ) : null
+            }
+            checked={preset.id === formState.presetId}
+            customThumbnail={preset.presetName !== 'AI Match'}
+          />
+        ))}
+      </ListCards>
+    </Flex>
+  )
+}

package/src/components/StemGenerationForm/CreateNew/CreateNew.jsx

@@ -0,0 +1,107 @@
+import { useCallback } from 'react'
+import { Flex, Box, Tooltip, Separator } from '@radix-ui/themes'
+import { TextArea } from '../../TextArea/TextArea'
+import { Button } from '../../Button/Button'
+import { IconButton } from '../../IconButton/IconButton'
+import { Text } from '../../Text/Text'
+import { FileIcon, TrashIcon, UploadIcon } from '../../../icons'
+import { formatFileInfo, getInstrumentDescription } from '../utils'
+
+export const CreateNew = ({
+  formState,
+  onFormStateChange,
+  i18n = { _: (text) => text },
+  onAddConditioningAudio,
+  onTextConditioningFocus,
+}) => {
+  const handleTextConditioningChange = useCallback(
+    (e) => {
+      const newValue = e.target.value
+      onFormStateChange((prevState) => ({
+        ...prevState,
+        conditioningText: newValue,
+      }))
+    },
+    [onFormStateChange],
+  )
+
+  const handleClearConditioningAudio = useCallback(() => {
+    onFormStateChange((prevState) => ({
+      ...prevState,
+      conditioningAudio: null,
+      conditioningAudioName: null,
+      conditioningAudioSize: null,
+      conditioningAudioDuration: null,
+    }))
+  }, [onFormStateChange])
+
+  return (
+    <Flex
+      mt="2"
+      direction="column"
+      gap="5"
+      style={{
+        overflowY: 'auto',
+        maxHeight: '100%',
+      }}
+    >
+      <Flex
+        direction="column"
+        p="2"
+        gap="2"
+        style={{
+          backgroundColor: 'var(--neutral-alpha-2)',
+          borderRadius: 'var(--radius-4)',
+          flex: '0 0 auto',
+        }}
+      >
+        {formState.conditioningAudio ? (
+          <Flex direction="row" align="center" gap="2" justify="center">
+            <FileIcon width={16} height={16} />
+            <Text size="1">
+              {formState.conditioningAudioName} ({formatFileInfo(formState)})
+            </Text>
+            <IconButton variant="soft" onClick={handleClearConditioningAudio}>
+              <TrashIcon width={16} height={16} />
+            </IconButton>
+          </Flex>
+        ) : (
+          <Tooltip
+            content={i18n._(
+              'Best results: use isolated target instrument. Mixed instruments make conditioning less effective.',
+            )}
+          >
+            <Button
+              variant="ghost"
+              color="cyan"
+              onClick={onAddConditioningAudio}
+            >
+              <UploadIcon width={16} height={16} />
+              <Text size="1">{i18n._('Select Reference Audio')}</Text>
+            </Button>
+          </Tooltip>
+        )}
+
+        <Separator
+          size="4"
+          style={{ backgroundColor: 'var(--neutral-alpha-4)' }}
+        />
+
+        <Box py="2" px="3px">
+          <TextArea
+            value={formState.conditioningText}
+            onFocus={onTextConditioningFocus}
+            onChange={handleTextConditioningChange}
+            placeholder={i18n._(
+              `Describe your desired sound characteristics (ex: ${getInstrumentDescription(
+                formState.instrument,
+                i18n,
+              )}). Text prompts are more flexible, though reference audio tends to be more effective. You can use either approach or combine both.`,
+            )}
+            rows={6}
+          />
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}