@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/Callout/Callout.jsx

@@ -0,0 +1,47 @@
+import { Flex, Callout as CalloutPrimitive } from '@radix-ui/themes'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+import styles from './Callout.module.css'
+import classNames from 'classnames'
+
+export const Callout = ({
+  children,
+  className,
+  size = '2',
+  color = 'accent',
+  highContrast = false,
+  Icon,
+  text,
+  hideIcon,
+  ...props
+}) => {
+  return (
+    <CalloutPrimitive.Root
+      size={size}
+      color={color}
+      variant="soft"
+      highContrast={highContrast}
+      className={classNames(
+        styles.Callout,
+        className,
+        styles[color],
+        highContrast && styles[`${color}-highContrast`],
+        styles[`size${size}`],
+      )}
+      {...props}
+    >
+      {!hideIcon && (
+        <CalloutPrimitive.Icon>
+          {Icon ? (
+            <Icon width={16} height={16} />
+          ) : (
+            <InfoCircledIcon width={16} height={16} />
+          )}
+        </CalloutPrimitive.Icon>
+      )}
+
+      <CalloutPrimitive.Text>{text || children}</CalloutPrimitive.Text>
+    </CalloutPrimitive.Root>
+  )
+}
+
+Callout.displayName = 'Callout'

package/src/components/Callout/Callout.module.css

@@ -0,0 +1,56 @@
+.size1 {
+  padding: 8px 12px;
+}
+
+.accent {
+  background-color: var(--aqua-dark-alpha-3);
+  color: var(--aqua-dark-alpha-11);
+}
+
+.accent-highContrast {
+  background-color: var(--aqua-dark-alpha-3);
+  color: var(--aqua-dark-alpha-12);
+}
+
+.neutral {
+  background-color: var(--neutral-alpha-3);
+  color: var(--neutral-alpha-11);
+}
+
+.neutral-highContrast {
+  background-color: var(--neutral-alpha-3);
+  color: var(--white);
+}
+
+.error {
+  background-color: var(--red-alpha-2);
+  color: var(--error-alpha-11);
+}
+
+.error-highContrast {
+  background-color: var(--red-alpha-2);
+  color: var(--error-alpha-12);
+}
+
+.success {
+  background-color: var(--success-alpha-4);
+  color: var(--success-alpha-12);
+}
+
+.success-highContrast {
+  background-color: var(--success-alpha-4);
+  color: var(--success-alpha-12);
+}
+
+.warning,
+.warning-highContrast {
+  background-color: var(--warning-alpha-2);
+  color: var(--warning-alpha-12);
+}
+
+.info,
+.info-highContrast  {
+  background-color: var(--info-alpha-3);
+  color:var(--info-alpha-12) ;
+}
+

package/src/components/Callout/Callout.stories.jsx

@@ -0,0 +1,296 @@
+import { Callout } from './Callout'
+import { AvatarIcon } from '@radix-ui/react-icons'
+import { Link } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Callout',
+  component: Callout,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Callout Component
+
+The Callout component is used to display informational, warning, error, or success messages with an optional icon.
+
+### Props
+
+- **text** (string, optional): The text to be displayed in the callout
+- **children** (React.ReactNode, optional): React elements to be displayed in the callout (can include links, formatting, etc.)
+- **size** ('1' | '2' | '3'): Size of the callout (default: '2')
+- **color** ('accent' | 'neutral' | 'error' | 'success' | 'warning' | 'info'): Color of the callout (default: 'accent')
+- **highContrast** (boolean): Whether to use high contrast (default: false)
+- **Icon** (React.Component): Custom icon (default: InfoCircledIcon)
+- **hideIcon** (boolean): Whether to hide the icon (default: false)
+- **className** (string): Additional CSS classes
+
+### Usage
+
+You can use either the \`text\` prop for simple text or \`children\` for more complex content including links and formatting:
+
+\`\`\`jsx
+import { Callout } from '@moises.ai/design-system'
+
+// Simple text
+<Callout text="This is a simple message" />
+
+import { Callout, Link } from '@moises.ai/design-system'
+
+// With children (can include links, formatting, etc.)
+<Callout>
+  This is a message with a <Link href="#">link</Link> and <strong>bold text</strong>.
+</Callout>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['1', '2', '3'],
+      description: 'Size of the callout',
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['accent', 'neutral', 'error', 'success', 'warning', 'info'],
+      description: 'Color of the callout',
+    },
+    highContrast: {
+      control: { type: 'boolean' },
+      description: 'Use high contrast',
+    },
+    hideIcon: {
+      control: { type: 'boolean' },
+      description: 'Hide icon',
+    },
+    text: {
+      control: { type: 'text' },
+      description: 'Callout text (use either text or children)',
+    },
+  },
+}
+
+// Default story
+export const Default = {
+  args: {
+    text: 'This is a default informational callout message.',
+    size: '2',
+    color: 'accent',
+    highContrast: false,
+    hideIcon: false,
+  },
+}
+
+// With children (links and formatting)
+export const WithChildren = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout>
+        This is a message with a <Link href="#">link</Link> and{' '}
+        <strong>bold text</strong>.
+      </Callout>
+
+      <Callout color="success">
+        Your account has been created successfully!{' '}
+        <Link href="#">View your profile</Link> or{' '}
+        <Link href="#">start exploring</Link>.
+      </Callout>
+
+      <Callout color="warning">
+        <strong>Warning:</strong> Your subscription will expire in 3 days.{' '}
+        <Link href="#">Renew now</Link> to avoid service interruption.
+      </Callout>
+
+      <Callout color="error">
+        <strong>Error:</strong> Failed to save your changes.{' '}
+        <Link href="#">Try again</Link> or <Link href="#">contact support</Link>
+        .
+      </Callout>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates how to use the Callout component with React children instead of the text prop. This allows for rich content including links, bold text, and other formatting.',
+      },
+    },
+  },
+}
+
+// Size variations
+export const Sizes = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout text="Small callout (size 1)" size="1" />
+      <Callout text="Medium callout (size 2) - default" size="2" />
+      <Callout text="Large callout (size 3)" size="3" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the three available sizes for the callout: small (1), medium (2), and large (3).',
+      },
+    },
+  },
+}
+
+// Color variations
+export const Colors = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout text="Highlight message (accent)" color="accent" />
+      <Callout text="Neutral message (neutral)" color="neutral" />
+      <Callout text="Error message (error)" color="error" />
+      <Callout text="Success message (success)" color="success" />
+      <Callout text="Warning message (warning)" color="warning" />
+      <Callout text="Informational message (info)" color="info" />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demonstrates all available color variations for the callout.',
+      },
+    },
+  },
+}
+
+// High contrast
+export const HighContrast = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout text="Normal callout" color="accent" highContrast={false} />
+      <Callout
+        text="High contrast callout"
+        color="accent"
+        highContrast={true}
+      />
+      <Callout
+        text="Error with high contrast"
+        color="error"
+        highContrast={true}
+      />
+      <Callout
+        text="Success with high contrast"
+        color="success"
+        highContrast={true}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates the difference between normal callouts and high contrast callouts for better accessibility.',
+      },
+    },
+  },
+}
+
+// Custom icons
+export const CustomIcons = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout text="Message with custom information icon" Icon={AvatarIcon} />
+      <Callout
+        text="Message with warning icon"
+        Icon={AvatarIcon}
+        color="warning"
+      />
+      <Callout
+        text="Message with success icon"
+        Icon={AvatarIcon}
+        color="success"
+      />
+      <Callout text="Message with error icon" Icon={AvatarIcon} color="error" />
+      <Callout
+        text="Message with attention icon"
+        Icon={AvatarIcon}
+        color="warning"
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates how to use custom icons in the callout. If no icon is provided, InfoCircledIcon will be used by default.',
+      },
+    },
+  },
+}
+
+// Without icon
+export const WithoutIcon = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Callout text="Callout without icon" hideIcon={true} />
+      <Callout
+        text="Callout without icon in red"
+        hideIcon={true}
+        color="error"
+      />
+      <Callout
+        text="Callout without icon with high contrast"
+        hideIcon={true}
+        highContrast={true}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates callouts without icons using the hideIcon={true} prop.',
+      },
+    },
+  },
+}

package/src/components/Card/Card.jsx

@@ -0,0 +1,46 @@
+import { Flex, Box, Text, Card as CardRadix } from '@radix-ui/themes'
+import { InfoCircledIcon } from '@radix-ui/react-icons'
+import { PlusIcon } from '../../icons'
+import styles from './Card.module.css'
+import classNames from 'classnames'
+
+export const Card = ({
+  children,
+  className,
+  color = 'accent',
+  drop = false,
+  dropHover = false,
+  Icon,
+  onClick,
+  ...props
+}) => {
+  const iconColorClass = styles[`color-${color}`];
+  const bgClass = styles[`bg-${color}`];
+
+  return (
+    <CardRadix
+      size="3"
+      color={color}
+      onClick={onClick}
+      className={classNames(bgClass, className, styles.card, drop && styles.drop, dropHover && styles.dropHover)}
+      {...props}
+    >
+      <Flex gap="5" align="center">
+        <Flex className={styles.iconContainer}>
+          {Icon ?
+            <Icon width={16} height={16} className={classNames(styles.iconDefault, iconColorClass)} /> :
+            <InfoCircledIcon width={16} height={16} className={classNames(styles.iconDefault, iconColorClass)} />
+          }
+          <PlusIcon width={16} height={16} className={classNames(styles.iconHover, iconColorClass)} />
+        </Flex>
+        <Box>
+          <Text as="div" size="2" weight="bold">
+            {children}
+          </Text>
+        </Box>
+      </Flex>
+    </CardRadix>
+  );
+};
+
+Card.displayName = 'Card';

package/src/components/Card/Card.module.css

@@ -0,0 +1,89 @@
+.card {
+  cursor: pointer;
+  border-radius: var(--radius-4);
+  padding: var(--space-6) var(--space-5);
+
+  &:before {
+    border-radius: var(--radius-4);
+  }
+
+  &:after {
+    border-radius: var(--radius-4);
+  }
+}
+
+.iconContainer {
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+
+.icon {
+  width: 16px;
+  height: 16px;
+}
+
+.iconDefault {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+
+.iconHover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.card:hover .iconDefault {
+  opacity: 0;
+}
+
+.card:hover .iconHover {
+  opacity: 1;
+}
+
+.color-accent {
+  color: var(--accent-8);
+}
+
+.color-success {
+  color: var(--success-11);
+}
+
+.color-error {
+  color: var(--tomato-9);
+}
+
+.card.drop {
+  &:after {
+    box-shadow: none !important;
+    border-style: dashed;
+    border-color: var(--neutral-alpha-7);
+    border-width: 1px;
+  }
+}
+
+.card.dropHover {
+  &:after {
+    box-shadow: none !important;
+    border-style: dashed;
+    border-color: var(--accent-9);
+    border-width: 1px;
+  }
+}
+
+.card:hover {
+  &.bg-accent:before {
+    background: linear-gradient(to right, #0B2F31, #0C1C1D);
+  }
+
+  &.bg-success:before {
+    background: linear-gradient(to right, #162D23, #121B17);
+  }
+
+  &.bg-error:before {
+    background: linear-gradient(to right, #331B16, #1F1513);
+  }
+}

package/src/components/Card/Card.stories.jsx

@@ -0,0 +1,116 @@
+import { Card } from './Card'
+import { AvatarIcon, SpliterIcon, SparkBarsIcon, UserIcon } from '../../icons'
+import { Link } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+## Card Component
+
+The Card component is used to display a card with a title and an icon.
+
+### Props
+
+- **children** (React.ReactNode, optional): React elements to be displayed in the card (can include links, formatting, etc.)
+- **color** ('accent' | 'error' | 'success'): Color of the card (default: 'accent')
+- **Icon** (React.Component): Custom icon (default: InfoCircledIcon)
+- **drop** (boolean): Whether to show the drop effect (default: false)
+- **dropHover** (boolean): Whether to show the drop hover effect (default: false)
+- **className** (string): Additional CSS classes
+
+### Usage
+
+You can use either the \`children\` prop for more complex content including links and formatting:
+
+\`\`\`jsx
+import { Card } from '@moises.ai/design-system'
+
+// Simple text
+<Card>This is a simple message</Card>
+
+import { Card, Link } from '@moises.ai/design-system'
+
+// With children (can include links, formatting, etc.)
+<Card Icon={AvatarIcon} color="success">
+  This is a message with a <Link href="#">link</Link> and <strong>bold text</strong>.
+</Card>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['accent', 'neutral', 'error', 'success', 'warning', 'info'],
+      description: 'Color of the card',
+    },
+    children: {
+      control: { type: 'text' },
+      description: 'Card children (use either text or children)',
+    },
+  },
+}
+
+// Default story
+export const Default = {
+  args: {
+    Icon: AvatarIcon,
+    children: 'This is a default informational card message.',
+    color: 'accent',
+  },
+}
+
+export const Examples = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      <Card Icon={SpliterIcon} color="accent">
+        Separate Stems
+      </Card>
+
+      <Card Icon={SparkBarsIcon} color="success">
+        Generate Stem
+      </Card>
+
+      <Card Icon={UserIcon} color="error">
+        Convert Voice
+      </Card>
+
+      <Card color="success" Icon={AvatarIcon}>
+        Your account has been created successfully!{' '}
+      </Card>
+
+      <Card color="accent" Icon={AvatarIcon} drop>
+        <strong>Warning:</strong> Your subscription will expire in 3 days.{' '}
+        <Link href="#">Renew now</Link> to avoid service interruption.
+      </Card>
+
+      <Card color="error" Icon={AvatarIcon} dropHover onClick={() => alert('clicked')}>
+        <strong>Error:</strong> Failed to save your changes.{' '}
+        <Link href="#">Try again</Link> or <Link href="#">contact support</Link>
+        .
+      </Card>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates how to use the Card component with React children instead of the text prop. This allows for rich content including links, bold text, and other formatting.',
+      },
+    },
+  },
+}

package/src/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,36 @@
+import { Flex } from '@radix-ui/themes'
+import styles from './Checkbox.module.css'
+import classNames from 'classnames'
+import { Checkbox as CheckboxRadix } from 'radix-ui'
+import { CheckIcon, DividerHorizontalIcon } from '@radix-ui/react-icons'
+
+export const Checkbox = ({ className, ...props }) => {
+  const size = props.size || '2'
+  const checkIconSize = size === '1' ? 14 : size === '2' ? 16 : 20
+  const indeterminateIconSize = size === '1' ? 7 : size === '2' ? 8 : 10
+
+  return (
+    <CheckboxRadix.Root
+      {...props}
+      className={classNames(styles.Checkbox, className)}
+      size={size}
+    >
+      <CheckboxRadix.Indicator className={styles.CheckboxIndicator}>
+        <CheckIcon
+          className={styles.CheckboxIcon}
+          width={checkIconSize}
+          height={checkIconSize}
+        />
+        {props.checked === 'indeterminate' && (
+          <DividerHorizontalIcon
+            className={styles.DividerHorizontalIcon}
+            width={indeterminateIconSize}
+            height={indeterminateIconSize}
+          />
+        )}
+      </CheckboxRadix.Indicator>
+    </CheckboxRadix.Root>
+  )
+}
+
+Checkbox.displayName = 'Checkbox'