@moises.ai/design-system 3.13.6 → 3.14.0

package/package.json

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

package/src/components/Callout/Callout.jsx

@@ -1,8 +1,17 @@
+import { useLayoutEffect, useRef, useState } from 'react'
 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'
+
+import styles from './Callout.module.css'
 import { Text } from '../Text/Text'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+
+const buttonSizeForCallout = (size) => (size === '3' ? '2' : '1')
+const iconButtonSizeForCallout = (size) => (size === '3' ? '2' : '1')
+const iconSizeForCallout = (size) => (size === '3' ? '20px' : '16px')
+const iconHeightForCallout = (size) => (size === '3' ? '24px' : '18px')
 
 export const Callout = ({
   children,
@@ -10,12 +19,60 @@ export const Callout = ({
   size = '2',
   color = 'accent',
   highContrast = false,
-  Icon,
+  Icon = InfoCircledIcon,
   text,
   title,
-  hideIcon,
+  hideIcon = false,
+  buttonProps,
+  iconButtonProps,
   ...props
 }) => {
+  const hasButton = Boolean(buttonProps)
+  const hasIconButton = Boolean(iconButtonProps)
+  const hasActions = hasButton || hasIconButton
+
+  const iconSize = iconSizeForCallout(size)
+  const iconHeight = iconHeightForCallout(size)
+  const textSize = size === '3' ? '3' : '2'
+
+  const contentRef = useRef(null)
+  const actionsRef = useRef(null)
+  const [contentAlign, setContentAlign] = useState('flex-start')
+
+  useLayoutEffect(() => {
+
+    if (!hasActions) {
+      setContentAlign('flex-start')
+      return
+    }
+
+    if (!contentRef.current || !actionsRef.current) return
+
+    const updateAlign = () => {
+      const contentHeight = contentRef.current.offsetHeight
+      const actionsHeight = actionsRef.current.offsetHeight
+      setContentAlign(contentHeight < actionsHeight ? 'center' : 'flex-start')
+    }
+
+    updateAlign()
+
+    const observer = new ResizeObserver(updateAlign)
+    observer.observe(contentRef.current)
+    observer.observe(actionsRef.current)
+
+    return () => observer.disconnect()
+  }, [hasActions])
+
+  const renderIcon = () => {
+    if (hideIcon) return null
+
+    return (
+      <CalloutPrimitive.Icon style={{ height: iconHeight }}>
+        <Icon width={iconSize} height={iconSize} />
+      </CalloutPrimitive.Icon>
+    )
+  }
+
   return (
     <CalloutPrimitive.Root
       size={size}
@@ -28,29 +85,53 @@ export const Callout = ({
         styles[color],
         highContrast && styles[`${color}-highContrast`],
         styles[`size${size}`],
+        hasButton && !hasIconButton && styles.onlyButton,
+        hasIconButton && !hasButton && styles.onlyIconButton,
       )}
       {...props}
     >
-      {!hideIcon && (
-        <CalloutPrimitive.Icon>
-          {Icon ? (
-            <Icon width={16} height={16} />
-          ) : (
-            <InfoCircledIcon width={16} height={16} />
-          )}
-        </CalloutPrimitive.Icon>
-      )}
+      <Flex justify="between" gap="3" width="100%">
+        <Flex
+          direction="row"
+          gap="2"
+          align={contentAlign}
+          width="100%"
+        >
+          {renderIcon()}
+
+          <Flex direction="column" gap="1" width="100%" ref={contentRef}>
+            {title && (
+              <Text size={textSize} weight="bold">
+                {title}
+              </Text>
+            )}
 
+            <Text size={textSize} weight="regular">
+              {text || children}
+            </Text>
+          </Flex>
+        </Flex>
 
+        {hasActions && (
+          <Flex ref={actionsRef} gap="2" align="center" shrink="0">
+            {hasButton && (
+              <Button
+                size={buttonSizeForCallout(size)}
+                {...buttonProps}
+              />
+            )}
 
-      <Flex direction="column" gap="0">
-        {title && (
-          <Text size={size} weight="bold">{title}</Text>
+            {hasIconButton && (
+              <IconButton
+                size={iconButtonSizeForCallout(size)}
+                {...iconButtonProps}
+              />
+            )}
+          </Flex>
         )}
-        <Text size={size} weight="regular">{text || children}</Text>
       </Flex>
     </CalloutPrimitive.Root>
   )
 }
 
-Callout.displayName = 'Callout'
+Callout.displayName = 'Callout'

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

@@ -1,56 +1,80 @@
-.size1 {
-  padding: 8px 12px;
+.Callout {
+  display: flex;
 }
 
+.size1:not(.onlyButton):not(.onlyIconButton) {
+  padding: 8px 12px !important;
+}
+.onlyButton.size1, .onlyIconButton.size1 {
+  padding: 6px 8px !important;
+}
+
+.size1Icon, .size2Icon {
+  height: 24px !important;
+}
+
+.size3Icon {
+  height: 32px !important;
+}
 .accent {
-  background-color: var(--aqua-alpha-3);
-  color: var(--aqua-alpha-11);
+  background-color: var(--aqua-alpha-3) !important;
+  color: var(--aqua-alpha-11) !important;
 }
 
 .accent-highContrast {
-  background-color: var(--aqua-alpha-3);
-  color: var(--aqua-alpha-12);
+  background-color: var(--aqua-alpha-3) !important;
+  color: var(--aqua-alpha-12) !important;
 }
 
 .neutral {
-  background-color: var(--neutral-alpha-3);
-  color: var(--neutral-alpha-11);
+  background-color: var(--neutral-alpha-3) !important;
+  color: var(--neutral-alpha-11) !important;
 }
 
 .neutral-highContrast {
-  background-color: var(--neutral-alpha-3);
-  color: var(--white);
+  background-color: var(--neutral-alpha-3) !important;
+  color: var(--white) !important;
 }
 
 .error {
-  background-color: var(--red-alpha-2);
-  color: var(--error-alpha-11);
+  background-color: var(--red-alpha-2) !important;
+  color: var(--error-alpha-11) !important;
 }
 
 .error-highContrast {
-  background-color: var(--red-alpha-2);
-  color: var(--error-alpha-12);
+  background-color: var(--red-alpha-2) !important;
+  color: var(--error-alpha-12) !important;
 }
 
 .success {
-  background-color: var(--success-alpha-4);
-  color: var(--success-alpha-12);
+  background-color: var(--success-alpha-4) !important;
+  color: var(--success-alpha-12) !important;
 }
 
 .success-highContrast {
-  background-color: var(--success-alpha-4);
-  color: var(--success-alpha-12);
+  background-color: var(--success-alpha-4) !important;
+  color: var(--success-alpha-12) !important;
 }
 
 .warning,
 .warning-highContrast {
-  background-color: var(--warning-alpha-2);
-  color: var(--warning-alpha-12);
+  background-color: var(--warning-alpha-2) !important;
+  color: var(--warning-alpha-12) !important;
 }
 
 .info,
 .info-highContrast  {
-  background-color: var(--info-alpha-3);
-  color:var(--info-alpha-12) ;
+  background-color: var(--info-alpha-3) !important;
+  color:var(--info-alpha-12) !important;
+}
+
+.text {
+  height: 100% !important;
+  display: flex;
+  align-items: center;
 }
 
+.textWithIcon{
+  display: flex;
+  gap: 8px;
+}

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

@@ -1,5 +1,5 @@
 import { Callout } from './Callout'
-import { AvatarIcon } from '@radix-ui/react-icons'
+import { AvatarIcon, Cross2Icon } from '@radix-ui/react-icons'
 import { Link } from '@radix-ui/themes'
 
 export default {
@@ -23,6 +23,8 @@ The Callout component is used to display informational, warning, error, or succe
 - **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)
+- **buttonProps** (object, optional): Spread onto \`Button\` — \`children\`, \`color\`, \`variant\`, \`onClick\`, etc.
+- **iconButtonProps** (object, optional): Spread onto \`IconButton\` — \`children\`, \`color\`, \`onClick\`, \`aria-label\`, etc.
 - **className** (string): Additional CSS classes
 
 ### Usage
@@ -74,6 +76,16 @@ import { Callout, Link } from '@moises.ai/design-system'
       control: { type: 'text' },
       description: 'Callout title (optional)',
     },
+    buttonProps: {
+      control: false,
+      description:
+        'Props forwarded to Button (set to render a button: children, color, variant, onClick, …)',
+    },
+    iconButtonProps: {
+      control: false,
+      description:
+        'Props forwarded to IconButton (set to render an icon button: children, color, onClick, aria-label, …)',
+    },
   },
 }
 
@@ -320,4 +332,128 @@ export const WithTitle = {
       },
     },
   },
+}
+
+// Button and IconButton via buttonProps / iconButtonProps
+export const WithActions = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        width: '100%',
+        maxWidth: 720,
+      }}
+    >
+      <Callout
+        text="Callout with Button and IconButton — check onClick handlers in the browser console or alerts."
+        buttonProps={{
+          children: 'Button',
+          variant: 'soft',
+          color: 'accent',
+          onClick: () => {
+            // eslint-disable-next-line no-console -- Storybook demo
+            console.log('Callout Button clicked')
+          },
+        }}
+        iconButtonProps={{
+          children: <Cross2Icon />,
+          variant: 'ghost',
+          color: 'accent',
+          'aria-label': 'Dismiss',
+          onClick: () => {
+            // eslint-disable-next-line no-console -- Storybook demo
+            console.log('Callout IconButton clicked')
+          },
+        }}
+      />
+      <Callout
+        title="Only button"
+        text="iconButtonProps omitted — only the primary action is shown."
+        color="neutral"
+        buttonProps={{
+          children: 'Action',
+          variant: 'solid',
+          color: 'neutral',
+          onClick: () => { },
+        }}
+      />
+      <Callout
+        text="Only IconButton (e.g. dismiss without primary CTA)."
+        color="info"
+        iconButtonProps={{
+          children: <Cross2Icon />,
+          color: 'accent',
+          'aria-label': 'Close',
+          onClick: () => { },
+        }}
+      />
+      <Callout
+        text="Small (size 1) with both actions."
+        size="1"
+        buttonProps={{
+          children: 'OK',
+          onClick: () => { },
+        }}
+        iconButtonProps={{
+          children: <Cross2Icon />,
+          'aria-label': 'Close',
+          onClick: () => { },
+        }}
+      />
+      <Callout
+        text="Small (size 1) with only iconButton."
+        size="1"
+        iconButtonProps={{
+          children: <Cross2Icon />,
+          'aria-label': 'Close',
+          onClick: () => { console.log('IconButton clicked') },
+        }}
+      />
+      <Callout
+        text="Small (size 1) with only Button."
+        size="1"
+        buttonProps={{
+          children: 'Action',
+          variant: 'solid',
+          color: 'neutral',
+          onClick: () => { console.log('Button clicked') },
+        }}
+      />
+      <Callout
+        text="Small (size 2) with only Button."
+        size="2"
+        buttonProps={{
+          children: 'Action',
+          variant: 'solid',
+          color: 'neutral',
+          onClick: () => { console.log('Button clicked') },
+        }}
+      />
+      <Callout
+        text="Large (size 3) with both actions."
+        size="3"
+        buttonProps={{
+          children: 'Continue',
+          variant: 'solid',
+          color: 'cyan',
+          onClick: () => { console.log('Button clicked') },
+        }}
+        iconButtonProps={{
+          children: <Cross2Icon />,
+          'aria-label': 'Dismiss',
+          onClick: () => { console.log('IconButton clicked') },
+        }}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Uses `buttonProps` and `iconButtonProps` to render `Button` and `IconButton` with full control over label, color, variant, and handlers.',
+      },
+    },
+  },
 }

package/src/components/VerticalSegmentControl/VerticalSegmentControl.jsx

@@ -0,0 +1,58 @@
+import { Flex } from '@radix-ui/themes'
+import classNames from 'classnames'
+import { Text } from '../Text/Text'
+import styles from './VerticalSegmentControl.module.css'
+
+export const VerticalSegmentControl = ({
+  items,
+  selectedType,
+  handleTypeChange,
+  className,
+  'aria-label': ariaLabel = 'Segmented options',
+  ...props
+}) => {
+  return (
+    <Flex
+      direction="column"
+      className={classNames(styles.root, className)}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      {...props}
+    >
+      {items.map((item) => {
+        const isSelected = selectedType === item.value
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            className={styles.item}
+            onClick={() => handleTypeChange(item.value)}
+          >
+            <div
+              className={classNames(styles.surface, isSelected && styles.surfaceSelected)}
+            >
+              <Text
+                size="1"
+                weight={isSelected ? 'medium' : 'regular'}
+                className={classNames(styles.label, isSelected && styles.labelSelected)}
+              >
+                {item.label}
+              </Text>
+            </div>
+            <span
+              className={classNames(
+                styles.indicator,
+                isSelected && styles.indicatorSelected,
+              )}
+              aria-hidden
+            />
+          </button>
+        )
+      })}
+    </Flex>
+  )
+}
+
+VerticalSegmentControl.displayName = 'VerticalSegmentControl'

package/src/components/VerticalSegmentControl/VerticalSegmentControl.module.css

@@ -0,0 +1,72 @@
+
+.root {
+  gap: 1px;
+  width: 98px;
+  border-radius: var(--radius-3);
+  isolation: isolate;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.item:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+  border-radius: var(--radius-2);
+}
+
+.surface {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-2);
+  background-color: rgba(221, 235, 236, 0.02);
+}
+
+.surfaceSelected {
+  background-color: var(--neutral-alpha-3);
+  box-shadow:
+    0 12px 32px 0 rgba(0, 0, 0, 0.15),
+    0 8px 40px 0 rgba(0, 0, 0, 0.05);
+}
+
+.label {
+  letter-spacing: 0.04px;
+  color: var(--neutral-alpha-10);
+}
+
+.labelSelected {
+  color: var(--aqua-alpha-11);
+}
+
+.indicator {
+  position: absolute;
+  top: 50%;
+  right: var(--space-2);
+  width: 1px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background-color: var(--neutral-alpha-2);
+  transform: translateY(-50%);
+}
+
+.indicatorSelected {
+  background-color: var(--aqua-11);
+  box-shadow:
+    0 0 3px 1px var(--aqua-alpha-5),
+    0 0 8px 0 var(--aqua-alpha-9);
+}

package/src/components/VerticalSegmentControl/VerticalSegmentControl.stories.jsx

@@ -0,0 +1,79 @@
+import { Flex } from '@radix-ui/themes'
+import { useState } from 'react'
+import { VerticalSegmentControl } from './VerticalSegmentControl'
+
+const sixItems = [
+  { value: '1', label: 'Item 1' },
+  { value: '2', label: 'Item 2' },
+  { value: '3', label: 'Item 3' },
+  { value: '4', label: 'Item 4' },
+  { value: '5', label: 'Item 5' },
+  { value: '6', label: 'Item 6' },
+]
+
+export default {
+  title: 'Components/VerticalSegmentControl',
+  component: VerticalSegmentControl,
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    handleTypeChange: { action: 'changed' },
+  },
+}
+
+export const Default = {
+  args: {
+    items: sixItems,
+    initialSelectedType: '1',
+    'aria-label': 'Mixer segment',
+  },
+  render: (args) => {
+    const [selectedType, setSelectedType] = useState(args.initialSelectedType)
+
+    return (
+      <Flex p="6" style={{ background: 'var(--neutral-1)' }}>
+        <VerticalSegmentControl
+          items={args.items}
+          selectedType={selectedType}
+          handleTypeChange={(value) => {
+            setSelectedType(value)
+            args.handleTypeChange(value)
+          }}
+          aria-label={args['aria-label']}
+        />
+      </Flex>
+    )
+  },
+}
+
+export const CompactList = {
+  args: {
+    items: [
+      { value: 'a', label: 'Preset' },
+      { value: 'b', label: 'Model' },
+      { value: 'c', label: 'Prompt' },
+    ],
+    initialSelectedType: 'b',
+  },
+  render: (args) => {
+    const [selectedType, setSelectedType] = useState(args.initialSelectedType)
+
+    return (
+      <Flex p="6" style={{ background: 'var(--neutral-1)' }}>
+        <VerticalSegmentControl
+          items={args.items}
+          selectedType={selectedType}
+          handleTypeChange={(value) => {
+            setSelectedType(value)
+            args.handleTypeChange?.(value)
+          }}
+        />
+      </Flex>
+    )
+  },
+}

package/src/index.jsx

@@ -149,3 +149,5 @@ export { useForm } from './components/useForm/useForm'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
 export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'
+
+export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'