@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/MultiSelect/MultiSelect.module.css

@@ -0,0 +1,105 @@
+.selectTrigger.soft:focus-visible,
+.selectTrigger.ghost:focus-visible {
+  outline: none;
+}
+
+/* Soft variant */
+.selectTrigger.soft {
+  background-color: var(--neutral-alpha-2);
+
+  &:hover:not([disabled]) {
+    background-color: var(--neutral-alpha-3);
+  }
+}
+.selectTrigger.soft[aria-expanded='true'] {
+  background-color: var(--neutral-alpha-4);
+}
+
+/* Ghost variant */
+.selectTrigger.ghost {
+  background-color: transparent;
+
+  &:hover:not([disabled]) {
+    background-color: var(--neutral-alpha-2);
+  }
+}
+.selectTrigger.ghost[aria-expanded='true'] {
+  background-color: var(--neutral-alpha-3);
+}
+
+.hideIndicator :global(.rt-SelectItemIndicator) {
+  display: none;
+}
+
+.size1.hideIndicator {
+  font-size: 12px;
+  padding: 5px 9px;
+}
+
+.size2.hideIndicator {
+  font-size: 14px;
+  padding: 9px 12px;
+}
+
+/* List items */
+.selectItem {
+  &:hover {
+    background-color: var(--neutral-alpha-2);
+  }
+}
+
+.selectItem[data-highlighted],
+.selectItem[data-state='checked'] {
+  background-color: var(--neutral-alpha-2);
+}
+
+.selectItem.size1 {
+  padding: 4px 8px;
+  height: 24px;
+}
+
+.selectItem.size2 {
+  padding: 8px 12px;
+  height: 32px;
+}
+
+/* Disabled styles */
+.selectTrigger.soft {
+  color: var(--white);
+  &:disabled {
+    color: var(--neutral-alpha-9);
+    background-color: var(--neutral-alpha-2);
+  }
+}
+
+.selectTrigger.ghost {
+  color: var(--white);
+  &:disabled {
+    color: var(--neutral-alpha-9);
+    background-color: transparent;
+  }
+}
+
+/* Popover content styles */
+.popoverContent {
+  background-color: var(--color-panel);
+  border: 1px solid var(--neutral-alpha-6);
+  border-radius: 6px;
+  box-shadow: var(--shadow-4);
+  min-width: 200px;
+}
+
+.dropdownContent {
+  padding: 4px;
+}
+
+
+.customCheckbox {
+  &[data-state='checked']::before {
+    background-color: var(--accent-10) !important;
+  }
+
+  & svg {
+    color: var(--neutral-1) !important;
+  }
+}

package/src/components/MultiSelect/MultiSelect.stories.jsx

@@ -0,0 +1,296 @@
+import { Flex } from '@radix-ui/themes'
+import { MultiSelect } from './MultiSelect'
+import { useState } from 'react'
+
+export default {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The MultiSelect component is used to select multiple options from a list of choices. It provides a clean and accessible interface for users to make multiple selections using checkboxes within a dropdown.
+
+## Usage
+
+\`\`\`jsx
+import { MultiSelect } from '@moises.ai/design-system'
+
+<MultiSelect
+  title="Select Multiple Instruments"
+  items={[
+    { value: 'bass', label: 'Bass' },
+    { value: 'guitar', label: 'Guitar', aiDetected: true, extra: '(AI detected)' },
+  ]}
+  size="2"
+  info="Select the instruments you want to use"
+  onChange={(value) => console.log('Selected:', value)}
+  placeholder="Choose instruments..."
+  variant="soft"
+  maxHeight="200px"
+/>
+\`\`\`
+
+## Component API
+
+\`\`\`jsx
+{
+  title?: string, // Optional title displayed above the multiselect
+  items: {
+    value: string, // Value of the option (required)
+    label: string, // Label of the option (required)
+    aiDetected?: boolean, // Shows ✦ icon before label if true (optional)
+    extra?: string | ReactNode, // Extra text or element after label (optional)
+    isActived?: boolean, // Pre-activates the checkbox if true (optional)
+  }[], // List of items to display in the multiselect
+  info?: string, // Optional info text displayed as a tooltip
+  onChange: (value: string) => void, // Function called when selection changes
+  size?: '1' | '2' , // Size variant of the multiselect (default: '2')
+  variant?: 'soft' | 'ghost', // Visual style variant (default: 'soft')
+  disabled?: boolean, // Whether the multiselect is disabled (default: false)
+  className?: string, // Additional CSS class name
+  readOnly?: boolean, // Whether the multiselect is read-only (default: false)
+  maxHeight?: string, // Max height of the dropdown (e.g. '200px')
+  showSelectIndicator?: boolean, // Show the default Radix select indicator (default: true)
+  placeholder?: string, // Placeholder text when no items are selected (default: 'Select options...')
+  maxWidth?: string, // Max width of the multiselect (e.g. '300px')
+}
+\`\`\`
+      `,
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['soft', 'ghost'],
+      description: 'Visual style variant of the multiselect',
+      defaultValue: 'soft',
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2'],
+      description: 'Size variant of the multiselect',
+      defaultValue: '2',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the multiselect is disabled',
+      defaultValue: false,
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Whether the multiselect is read-only',
+      defaultValue: false,
+    },
+    maxWidth: {
+      control: 'text',
+      description: 'Max width of the multiselect',
+      defaultValue: '100%',
+    },
+    maxHeight: {
+      control: 'text',
+      description: 'Max height of the multiselect',
+      defaultValue: '200px',
+    },
+    showSelectIndicator: {
+      control: 'boolean',
+      description: 'Whether to show the default Radix select indicator',
+      defaultValue: true,
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text when no items are selected',
+      defaultValue: 'Select options...',
+    },
+  },
+  tags: ['autodocs'],
+}
+
+const withFlexContainer = (Story) => (
+  <Flex width="300px">
+    <Story />
+  </Flex>
+)
+
+// Componente wrapper que gerencia o estado
+const MultiSelectWithState = ({ items: initialItems, ...props }) => {
+  const [items, setItems] = useState(initialItems)
+
+  const handleChange = (value) => {
+    setItems((prevItems) =>
+      prevItems.map((item) =>
+        item.value === value ? { ...item, isActived: !item.isActived } : item,
+      ),
+    )
+  }
+
+  return <MultiSelect {...props} items={items} onChange={handleChange} />
+}
+
+export const Default = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Select Multiple Instruments',
+    size: '2',
+    maxHeight: '200px',
+    placeholder: 'Choose instruments...',
+    items: [
+      { value: 'bass', label: 'Bass', isActived: true },
+      { value: 'guitar', label: 'Guitar' },
+      { value: 'piano', label: 'Piano', isActived: true },
+      { value: 'drums', label: 'Drums' },
+      { value: 'violin', label: 'Violin' },
+      { value: 'cello', label: 'Cello' },
+      { value: 'flute', label: 'Flute' },
+      { value: 'clarinet', label: 'Clarinet' },
+      { value: 'saxophone', label: 'Saxophone' },
+      { value: 'trumpet', label: 'Trumpet' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithoutTitle = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    onChange: (value) => console.log('Selected:', value),
+    size: '3',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'bass', label: 'Bass' },
+      { value: 'guitar', label: 'Guitar' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithInfo = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Select Multiple Options',
+    info: 'You can select multiple options from the list',
+    size: '1',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithGhostVariant = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Select Multiple Options',
+    info: 'Ghost variant multiselect',
+    size: '1',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ],
+    variant: 'ghost',
+  },
+  decorators: [withFlexContainer],
+}
+
+export const Disabled = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Select Multiple Options',
+    info: 'This multiselect is disabled',
+    size: '2',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ],
+    disabled: true,
+  },
+  decorators: [withFlexContainer],
+}
+
+export const ReadOnly = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Select Multiple Options',
+    info: 'This multiselect is read-only',
+    size: '2',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+    ],
+    readOnly: true,
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithAIDetected = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'AI Detected Options',
+    info: 'Select multiple AI-detected options',
+    size: '2',
+    maxHeight: '300px',
+    placeholder: 'Choose AI options...',
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      {
+        value: 'option2',
+        label: 'Option 2',
+        aiDetected: true,
+        extra: '(AI detected)',
+      },
+      { value: 'option3', label: 'Option 3' },
+      {
+        value: 'option4',
+        label: 'Option 4',
+        aiDetected: true,
+        extra: '(AI detected)',
+      },
+      { value: 'option5', label: 'Option 5' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithoutSelectIndicator = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Without Select Indicator',
+    info: 'This multiselect hides the default select indicator',
+    size: '2',
+    maxHeight: '300px',
+    placeholder: 'Choose options...',
+    showSelectIndicator: false,
+    items: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}
+
+export const WithPreActivatedItems = {
+  render: (args) => <MultiSelectWithState {...args} />,
+  args: {
+    title: 'Pre-Activated Items',
+    info: 'Some items are pre-activated using isActived property',
+    size: '2',
+    maxHeight: '300px',
+    placeholder: 'Choose options...',
+    items: [
+      { value: 'option1', label: 'Option 1', isActived: true },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3', isActived: true },
+      { value: 'option4', label: 'Option 4' },
+      { value: 'option5', label: 'Option 5' },
+    ],
+  },
+  decorators: [withFlexContainer],
+}

package/src/components/MultiSelectCards/MultiSelectCards.jsx

@@ -0,0 +1,96 @@
+import React, { useCallback } from 'react'
+import classNames from 'classnames'
+import {
+  Flex,
+  Box,
+  Card as CardRadix,
+  Text,
+  ScrollArea,
+} from '@radix-ui/themes'
+import styles from './MultiSelectCards.module.css'
+import { LockIcon } from '../../icons'
+
+const Card = ({ item, value, onSelect, disabled, isLocked }) => {
+  const handleSelect = useCallback(() => {
+    onSelect?.(item)
+  }, [onSelect, item])
+
+  const isSelected = value?.includes(item.value)
+  const isDisabled = disabled || item.disabled
+
+  return (
+    <Box width="100%">
+      <CardRadix
+        onClick={isDisabled ? undefined : handleSelect}
+        className={classNames(styles.customCard, {
+          [styles.selected]: isSelected,
+          [styles.disabled]: isDisabled,
+        })}
+        variant="surface"
+      >
+        <Flex align="start" direction="column" height="70px" justify="between">
+          <Flex align="center" justify="between" width="100%">
+            {item.icon && (
+              <Box
+                className={styles.icon}
+                style={{
+                  color:
+                    isSelected && !isDisabled
+                      ? 'var(--aqua-9)'
+                      : 'var(--neutral-alpha-11)',
+                }}
+              >
+                {item.icon}
+              </Box>
+            )}
+            {item.isLocked && (
+              <LockIcon width={12} height={12} className={styles.lockedIcon} />
+            )}
+          </Flex>
+
+          <Text
+            as="div"
+            size="2"
+            weight="regular"
+            style={{
+              color: 'var(--neutral-alpha-12)',
+              userSelect: 'none',
+            }}
+          >
+            {item.name}
+          </Text>
+        </Flex>
+      </CardRadix>
+    </Box>
+  )
+}
+
+export const MultiSelectCards = ({
+  items,
+  value = [],
+  onSelect,
+  className,
+  disabled = false,
+  ...props
+}) => (
+  <ScrollArea height="100%" width="100%" scrollbars="vertical">
+    <Box
+      className={classNames(styles.gridContainer, className)}
+      pr="3"
+      {...props}
+    >
+      {items.map((item) => (
+        <Card
+          key={item.value}
+          item={item}
+          value={value}
+          onSelect={onSelect}
+          disabled={disabled}
+          isLocked={item.isLocked}
+        />
+      ))}
+    </Box>
+  </ScrollArea>
+)
+
+MultiSelectCards.displayName = 'MultiSelectCards'

package/src/components/MultiSelectCards/MultiSelectCards.module.css

@@ -0,0 +1,60 @@
+
+.customCard {
+  box-sizing: border-box;
+  transition: background 0.2s, box-shadow 0.2s;
+  cursor: pointer;
+  padding: 12px 12px 8px 12px;
+
+
+  border: 1px solid var(--neutral-alpha-4);
+
+  --card-border-width: 0;
+  --card-background-color: transparent;
+  --card-shadow-panel: none;
+  --card-shadow: none;
+
+}
+
+.customCard:not(.selected):not(.disabled):hover {
+  background: var(--neutral-alpha-2) !important;
+
+ 
+  border: 1px solid var(--neutral-alpha-6);
+
+  .lockedIcon {
+    color: var(--neutral-alpha-9);
+  }
+}
+
+.customCard.selected {
+  background: var(--neutral-alpha-2) !important;
+  outline: 2px solid var(--aqua-9);
+  outline-offset: -2px; 
+}
+
+.customCard.disabled {
+  background: var(--neutral-alpha-1);
+  cursor: default !important;
+}
+
+.customCard.selected.disabled {
+  background: var(--neutral-3);
+  outline: 1px solid var(--neutral-alpha-4);
+  outline-offset: -1px; 
+}
+
+.gridContainer {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+
+}
+
+.lockedIcon {
+  color: var(--neutral-alpha-7);
+}