@moises.ai/design-system 3.4.5 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.4.5",
+  "version": "3.5.0",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",
@@ -22,7 +22,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "vite build",

package/src/Introduction.mdx

@@ -0,0 +1,56 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Introduction" />
+
+# Moises Design System
+
+The Moises Design System provides a comprehensive set of components for building consistent user interfaces across Moises applications. Built on top of [Radix UI](https://www.radix-ui.com/), it offers a robust foundation for creating beautiful, accessible, and performant web applications.
+
+## Installation
+
+```bash
+npm install @moises.ai/design-system
+```
+
+## Usage
+
+```jsx
+// Import components
+import { Box, Flex, Button, Hello, World } from '@moises.ai/design-system';
+// Import theme
+import { Theme } from '@moises.ai/design-system';
+// Import icons
+import { PlayIcon, PauseIcon } from '@moises.ai/design-system/icons';
+// Import styles
+import '@moises.ai/design-system/styles.css';
+
+function App() {
+  return (
+    <Theme>
+      <Box p="4">
+        <Hello name="Moises" />
+      </Box>
+    </Theme>
+  );
+}
+```
+
+## Key Features
+
+- **Accessible Components**: Built with accessibility in mind
+- **Customizable**: Easily customize with theming options
+- **Modern Design**: Clean, contemporary UI aesthetic
+- **Responsive**: Components work across device sizes
+- **Consistent**: Unified design language
+
+## Component Categories
+
+- **Layout**: Containers, grids, and spacing utilities
+- **Inputs**: Form elements and controls
+- **Display**: Text, cards, and content presentation
+- **Feedback**: Notifications, alerts, and status indicators
+- **Navigation**: Menus, tabs, and navigation elements
+
+## Theming
+
+Our design system supports theming with light and dark mode variants. Use the `Theme` component to set the visual style for your application. 

package/src/colors/custom-styles.css

@@ -0,0 +1,293 @@
+:root {
+  /* Aqua */
+  --aqua-1: #f8fefe;
+  --aqua-2: #f0fbfc;
+  --aqua-3: #dbf8fb;
+  --aqua-4: #c5f3f7;
+  --aqua-5: #adf0f5;
+  --aqua-6: #95edf3;
+  --aqua-7: #009AA5;
+  --aqua-8: #00BAC6;
+  --aqua-9: #00DAE8;
+  --aqua-10: #19E4F1;
+  --aqua-11: #00a9b6;
+  --aqua-12: #004348;
+  --aqua-alpha-1: rgba(0, 219, 219, 0.03);
+  --aqua-alpha-2: rgba(0, 187, 204, 0.06);
+  --aqua-alpha-3: rgba(0, 206, 227, 0.14);
+  --aqua-alpha-4: rgba(0, 212, 229, 0.26);
+  --aqua-alpha-5: rgba(0, 209, 230, 0.39);
+  --aqua-alpha-6: rgba(0, 210, 229, 0.52);
+  --aqua-alpha-7: rgba(0, 215, 232, 0.67);
+  --aqua-alpha-8: rgba(0, 218, 232, 0.9);
+  --aqua-alpha-9: #00d0de;
+  --aqua-alpha-10: #00c4d2;
+  --aqua-alpha-11: rgba(5, 165, 177, 0.96);
+  --aqua-alpha-12: #004348;
+  --aqua-dark-1: #061415;
+  --aqua-dark-2: #0c1c1d;
+  --aqua-dark-3: #002e32;
+  --aqua-dark-4: #003b42;
+  --aqua-dark-5: #005a63;
+  --aqua-dark-6: #007a84;
+  --aqua-dark-7: #009aa5;
+  --aqua-dark-8: #00bac6;
+  --aqua-dark-9: #00dae8;
+  --aqua-dark-10: #19e4f1;
+  --aqua-dark-11: #75ebf5;
+  --aqua-dark-12: #adf0f6;
+  --aqua-dark-alpha-1: rgba(0, 171, 222, 0.02);
+  --aqua-dark-alpha-2: rgba(0, 233, 253, 0.07);
+  --aqua-dark-alpha-3: rgba(0, 223, 251, 0.16);
+  --aqua-dark-alpha-4: rgba(0, 220, 253, 0.2);
+  --aqua-dark-alpha-5: rgba(0, 227, 254, 0.33);
+  --aqua-dark-alpha-6: rgba(0, 231, 255, 0.48);
+  --aqua-dark-alpha-7: rgba(0, 234, 253, 0.62);
+  --aqua-dark-alpha-8: rgba(0, 216, 230, 0.84);
+  --aqua-dark-alpha-9: rgba(0, 238, 254, 0.91);
+  --aqua-dark-alpha-10: rgba(49, 242, 255, 0.93);
+  --aqua-dark-alpha-11: rgba(120, 247, 255, 0.95);
+  --aqua-dark-alpha-12: rgba(178, 248, 254, 0.97);
+
+  /* Mint */
+
+  --mint-1: #f8fffb;
+  --mint-2: #f0fdf5;
+  --mint-3: #d8fce7;
+  --mint-4: #bff9d8;
+  --mint-5: #b0f9d4;
+  --mint-6: #a1f9d0;
+  --mint-7: #93facc;
+  --mint-8: #84fac8;
+  --mint-9: #0affa7;
+  --mint-10: #00ef99;
+  --mint-11: #04c781;
+  --mint-12: #004527;
+  --mint-alpha-1: rgba(0, 255, 110, 0.02);
+  --mint-alpha-2: rgba(0, 221, 85, 0.05);
+  --mint-alpha-3: rgba(0, 236, 99, 0.13);
+  --mint-alpha-4: rgba(0, 232, 100, 0.25);
+  --mint-alpha-5: rgba(155, 247, 201, 0.81);
+  --mint-alpha-6: rgba(115, 249, 186, 0.71);
+  --mint-alpha-7: rgba(113, 249, 189, 0.8);
+  --mint-alpha-8: rgba(106, 247, 188, 0.85);
+  --mint-alpha-9: #0affa7;
+  --mint-alpha-10: rgba(7, 235, 133, 0.84);
+  --mint-alpha-11: rgba(1, 188, 108, 0.85);
+  --mint-alpha-12: rgba(0, 69, 39, 0.99);
+  --mint-dark-1: #0b130e;
+  --mint-dark-2: #101c15;
+  --mint-dark-3: #101c15;
+  --mint-dark-4: #023d25;
+  --mint-dark-5: #03633f;
+  --mint-dark-6: #058a59;
+  --mint-dark-7: #06b173;
+  --mint-dark-8: #08d88d;
+  --mint-dark-9: #0affa7;
+  --mint-dark-10: #4dffb8;
+  --mint-dark-11: #78ffbe;
+  --mint-dark-12: #a6fecd;
+  --mint-dark-alpha-1: rgba(0, 187, 0, 0.02);
+  --mint-dark-alpha-2: rgba(0, 251, 103, 0.04);
+  --mint-dark-alpha-3: rgba(0, 249, 121, 0.11);
+  --mint-dark-alpha-4: rgba(0, 79, 47, 0.7);
+  --mint-dark-alpha-5: rgba(0, 132, 82, 0.71);
+  --mint-dark-alpha-6: rgba(0, 171, 111, 0.78);
+  --mint-dark-alpha-7: rgba(1, 197, 126, 0.89);
+  --mint-dark-alpha-8: rgba(0, 253, 162, 0.84);
+  --mint-dark-alpha-9: rgba(10, 255, 167, 1);
+  --mint-dark-alpha-10: rgba(99, 255, 193, 0.98);
+  --mint-dark-alpha-11: rgba(120, 255, 190, 1);
+  --mint-dark-alpha-12: rgba(166, 254, 205, 1);
+
+
+  --panel-solid: #18191B;
+
+  --white: rgba(255, 255, 255, 1);
+  --black: rgba(28, 32, 36, 1);
+
+  /* Neutral */
+
+  --neutral-1: rgba(17, 17, 19, 1);
+  --neutral-2: rgba(24, 25, 27, 1);
+  --neutral-3: rgba(33, 34, 37, 1);
+  --neutral-4: rgba(39, 42, 45, 1);
+  --neutral-5: rgba(46, 49, 53, 1);
+  --neutral-6: rgba(54, 58, 63, 1);
+  --neutral-7: rgba(67, 72, 78, 1);
+  --neutral-8: rgba(90, 97, 105, 1);
+  --neutral-9: rgba(105, 110, 119, 1);
+  --neutral-10: rgba(119, 123, 132, 1);
+  --neutral-11: rgba(176, 180, 186, 1);
+  --neutral-12: rgba(237, 238, 240, 1);
+
+  --neutral-alpha-1: rgba(0, 0, 0, 0);
+  --neutral-alpha-2: rgba(216, 244, 246, 0.04);
+  --neutral-alpha-3: rgba(221, 234, 248, 0.08);
+  --neutral-alpha-4: rgba(211, 237, 248, 0.11);
+  --neutral-alpha-5: rgba(217, 237, 254, 0.15);
+  --neutral-alpha-6: rgba(214, 235, 253, 0.19);
+  --neutral-alpha-7: rgba(217, 237, 255, 0.25);
+  --neutral-alpha-8: rgba(217, 237, 255, 0.36);
+  --neutral-alpha-9: rgba(223, 235, 253, 0.43);
+  --neutral-alpha-10: rgba(229, 237, 253, 0.48);
+  --neutral-alpha-11: rgba(241, 247, 254, 0.71);
+  --neutral-alpha-12: rgba(252, 253, 255, 0.94);
+
+  /* Neutral Extras */
+  --neutral-alpha-0-50: rgba(17, 17, 19, 0.50);
+  --neutral-alpha-0-70: rgba(17, 17, 19, 0.70);
+
+  /* Red */
+  --red-alpha-2: rgba(242, 47, 62, 0.07);
+  --red-alpha-3: rgba(255, 23, 63, 0.18);
+
+  /* Success */
+  --success-alpha-2: rgba(41, 249, 157, 0.04);
+  --success-alpha-4: rgba(17, 255, 153, 0.18);
+  --success-alpha-11: rgba(70, 254, 165, 0.83);
+  --success-alpha-12: rgba(187, 255, 215, 0.94);
+  --success-11: #3DD68C;
+
+  /* Warning */
+  --warning-alpha-2: rgba(253, 155, 0, 0.05);
+  --warning-alpha-12: #FFE7B3;
+
+  /* Error */
+  --error-alpha-5: rgba(255, 32, 71, 0.34);
+  --error-alpha-11: #FF9592;
+  --error-alpha-12: #FFD1D9;
+
+  /* Info */
+  --info-alpha-11: rgba(0, 249, 121, 0.11);
+  --info-alpha-3: rgba(0, 249, 121, 0.11);
+  --info-alpha-12: rgba(166, 255, 206, 1);
+
+
+  .radix-themes {
+    --cursor-button: pointer;
+    --cursor-checkbox: pointer;
+    --cursor-disabled: default;
+    --cursor-link: pointer;
+    --cursor-menu-item: pointer;
+    --cursor-radio: pointer;
+    --cursor-slider-thumb: grab;
+    --cursor-slider-thumb-active: grabbing;
+    --cursor-switch: pointer;
+
+    /* custom cyan  color*/
+
+    --cyan-track: var(--aqua-dark-9);
+
+    /* custom mint  color*/
+    --mint-1: var(--mint-1);
+    --mint-2: var(--mint-2);
+    --mint-3: var(--mint-3);
+    --mint-4: var(--mint-4);
+    --mint-5: var(--mint-5);
+    --mint-6: var(--mint-6);
+    --mint-7: var(--mint-7);
+    --mint-8: var(--mint-8);
+    --mint-9: var(--mint-9);
+    --mint-10: var(--mint-10);
+    --mint-11: var(--mint-11);
+    --mint-12: var(--mint-12);
+
+    --mint-a1: var(--mint-alpha-1);
+    --mint-a2: var(--mint-alpha-2);
+    --mint-a3: var(--mint-alpha-3);
+    --mint-a4: var(--mint-alpha-4);
+    --mint-a5: var(--mint-alpha-5);
+    --mint-a6: var(--mint-alpha-6);
+    --mint-a7: var(--mint-alpha-7);
+    --mint-a8: var(--mint-alpha-8);
+    --mint-a9: var(--mint-alpha-9);
+    --mint-a10: var(--mint-alpha-10);
+    --mint-a11: var(--mint-alpha-11);
+    --mint-a12: var(--mint-alpha-12);
+
+    --mint-d1: var(--mint-dark-1);
+    --mint-d2: var(--mint-dark-2);
+    --mint-d3: var(--mint-dark-3);
+    --mint-d4: var(--mint-dark-4);
+    --mint-d5: var(--mint-dark-5);
+    --mint-d6: var(--mint-dark-6);
+    --mint-d7: var(--mint-dark-7);
+    --mint-d8: var(--mint-dark-8);
+    --mint-d9: var(--mint-dark-9);
+    --mint-d10: var(--mint-dark-10);
+    --mint-d11: var(--mint-dark-11);
+    --mint-d12: var(--mint-dark-12);
+
+    --mint-d-a1: var(--mint-dark-alpha-1);
+    --mint-d-a2: var(--mint-dark-alpha-2);
+    --mint-d-a3: var(--mint-dark-alpha-3);
+    --mint-d-a4: var(--mint-dark-alpha-4);
+    --mint-d-a5: var(--mint-dark-alpha-5);
+    --mint-d-a6: var(--mint-dark-alpha-6);
+    --mint-d-a7: var(--mint-dark-alpha-7);
+    --mint-d-a8: var(--mint-dark-alpha-8);
+    --mint-d-a9: var(--mint-dark-alpha-9);
+    --mint-d-a10: var(--mint-dark-alpha-10);
+    --mint-d-a11: var(--mint-dark-alpha-11);
+    --mint-d-a12: var(--mint-dark-alpha-12);
+
+
+    /* Custom Aqua */
+
+    --accent-1: var(--aqua-1);
+    --accent-2: var(--aqua-2);
+    --accent-3: var(--aqua-3);
+    --accent-4: var(--aqua-4);
+    --accent-5: var(--aqua-5);
+    --accent-6: var(--aqua-6);
+    --accent-7: var(--aqua-7);
+    --accent-8: var(--aqua-8);
+    --accent-9: var(--aqua-9);
+    --accent-10: var(--aqua-10);
+    --accent-11: var(--aqua-11);
+    --accent-12: var(--aqua-12);
+
+    --accent-a1: var(--aqua-alpha-1);
+    --accent-a2: var(--aqua-alpha-2);
+    --accent-a3: var(--aqua-alpha-3);
+    --accent-a4: var(--aqua-alpha-4);
+    --accent-a5: var(--aqua-alpha-5);
+    --accent-a6: var(--aqua-alpha-6);
+    --accent-a7: var(--aqua-alpha-7);
+    --accent-a8: var(--aqua-alpha-8);
+    --accent-a9: var(--aqua-alpha-9);
+    --accent-a10: var(--aqua-alpha-10);
+    --accent-a11: var(--aqua-alpha-11);
+    --accent-a12: var(--aqua-alpha-12);
+
+    --accent-d1: var(--aqua-dark-1);
+    --accent-d2: var(--aqua-dark-2);
+    --accent-d3: var(--aqua-dark-3);
+    --accent-d4: var(--aqua-dark-4);
+    --accent-d5: var(--aqua-dark-5);
+    --accent-d6: var(--aqua-dark-6);
+    --accent-d7: var(--aqua-dark-7);
+    --accent-d8: var(--aqua-dark-8);
+    --accent-d9: var(--aqua-dark-9);
+    --accent-d10: var(--aqua-dark-10);
+    --accent-d11: var(--aqua-dark-11);
+    --accent-d12: var(--aqua-dark-12);
+
+    --accent-d-a1: var(--aqua-dark-alpha-1);
+    --accent-d-a2: var(--aqua-dark-alpha-2);
+    --accent-d-a3: var(--aqua-dark-alpha-3);
+    --accent-d-a4: var(--aqua-dark-alpha-4);
+    --accent-d-a5: var(--aqua-dark-alpha-5);
+    --accent-d-a6: var(--aqua-dark-alpha-6);
+    --accent-d-a7: var(--aqua-dark-alpha-7);
+    --accent-d-a8: var(--aqua-dark-alpha-8);
+    --accent-d-a9: var(--aqua-dark-alpha-9);
+    --accent-d-a10: var(--aqua-dark-alpha-10);
+    --accent-d-a11: var(--aqua-dark-alpha-11);
+    --accent-d-a12: var(--aqua-dark-alpha-12);
+
+
+  }
+
+}

package/src/components/AdditionalItems/AdditionalItems.jsx

@@ -0,0 +1,43 @@
+import { Flex, Text } from '@radix-ui/themes'
+import styles from './AdditionalItems.module.css'
+import classNames from 'classnames'
+
+export const AdditionalItems = ({
+  additionalItems,
+  collapsed = false,
+  selectedAdditionalItemId,
+}) => {
+  if (!additionalItems) return null
+  return (
+    <Flex direction="column">
+      {additionalItems.map((item, index) => {
+        const isSelected =
+          selectedAdditionalItemId !== undefined
+            ? selectedAdditionalItemId === item.id
+            : item.selected
+        return (
+          <Flex
+            key={item.id || index}
+            align="center"
+            className={classNames(styles.upgradeItem, {
+              [styles.upgradeItemCollapsed]: collapsed,
+              [styles.upgradeItemSelected]: isSelected,
+            })}
+            onClick={item.onClick}
+          >
+            {item.icon && <div className={styles.upgradeIcon}>{item.icon}</div>}
+            <div
+              className={classNames(styles.upgradeContent, {
+                [styles.upgradeContentCollapsed]: collapsed,
+              })}
+            >
+              <Text size="2" className={styles.upgradeText}>
+                {item.label}
+              </Text>
+            </div>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}

package/src/components/AdditionalItems/AdditionalItems.module.css

@@ -0,0 +1,76 @@
+.upgradeItem {
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  gap: 8px;
+  transition: 
+    background-color 0.2s,
+    gap 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0ms;
+}
+
+.upgradeItemCollapsed {
+  gap: 0;
+  transition-delay: 100ms;
+}
+
+.upgradeItem:hover {
+  background-color: var(--neutral-alpha-2);
+}
+
+.upgradeItem:hover .upgradeIcon {
+  color: var(--white);
+}
+
+.upgradeItem:hover .upgradeText {
+  color: var(--neutral-alpha-12);
+}
+
+.upgradeIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--neutral-alpha-10);
+}
+
+.upgradeContent {
+  display: flex;
+  align-items: center;
+  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;
+}
+
+.upgradeContentCollapsed {
+  opacity: 0;
+  transform: translateX(-8px);
+  width: 0;
+  flex: 0;
+  transition-delay: 50ms;
+}
+
+.upgradeText {
+  color: var(--neutral-alpha-11);
+  white-space: nowrap;
+}
+
+.upgradeItemSelected {
+  background-color: var(--neutral-alpha-3);
+}
+
+.upgradeItemSelected .upgradeIcon {
+  color: var(--white);
+}
+
+.upgradeItemSelected .upgradeText {
+  color: var(--neutral-alpha-12);
+}

package/src/components/AdditionalItems/AdditionalItems.stories.jsx

@@ -0,0 +1,32 @@
+import { AdditionalItems } from './AdditionalItems'
+import { Flex } from '../../index'
+import { ArrowRightIcon } from '../../icons'
+
+export default {
+  title: 'Components/AdditionalItems',
+  component: AdditionalItems,
+  argTypes: {
+    additionalItems: { control: 'object' },
+    collapsed: { control: 'boolean' },
+    selectedAdditionalItemId: { control: 'text' },
+  },
+}
+
+export const Default = {
+  args: {
+    additionalItems: [
+      {
+        id: 'upgrade',
+        label: 'Upgrade to Pro',
+        icon: <ArrowRightIcon width={16} height={16} />,
+      },
+    ],
+    selectedAdditionalItemId: 'upgrade',
+    collapsed: false,
+  },
+  render: (args) => (
+    <Flex width="300px">
+      <AdditionalItems {...args} />
+    </Flex>
+  ),
+}

package/src/components/BannerAnnouncement/BannerAnnouncement.jsx

@@ -0,0 +1,77 @@
+import styles from './BannerAnnouncement.module.css'
+import { Flex, Badge } from '@radix-ui/themes'
+import { Button } from '../Button/Button'
+import { IconButton } from '../IconButton/IconButton'
+import { CloseIcon } from '../../icons'
+import classNames from 'classnames'
+import { useCallback } from 'react'
+
+export const BannerAnnouncement = ({
+  image,
+  badge,
+  children,
+  link,
+  alt,
+  buttonColor,
+  buttonText,
+  onClose,
+}) => {
+  const navigateToLink = () => {
+    window.open(link, '_blank')
+  }
+
+  const handleClose = useCallback(
+    (e) => {
+      e.stopPropagation()
+      onClose?.()
+    },
+    [onClose],
+  )
+
+  return (
+    <div className={styles.bannerAnnouncement} onClick={navigateToLink}>
+      <Flex position="relative">
+        <img src={image} alt={alt} className={styles.image} />
+        <IconButton onClick={handleClose} className={styles.closeButton}>
+          <CloseIcon width={16} height={16} />
+        </IconButton>
+        {badge && (
+          <Badge
+            size="1"
+            variant="solid"
+            color={badge.color}
+            className={classNames(styles.badge, {
+              [styles.badgeGreen]: badge.color === 'green',
+              [styles.badgeNeutral]: badge.color === 'neutral',
+            })}
+          >
+            {badge.label}
+          </Badge>
+        )}
+      </Flex>
+      <Flex direction="column" gap="4" className={styles.children}>
+        {children}
+        {buttonText && (
+          <Flex className={styles.button}>
+            <Button
+              size="2"
+              variant={buttonColor === 'gray' ? 'soft' : 'solid'}
+              color={buttonColor}
+              style={{
+                fontWeight: '500',
+                color:
+                  buttonColor === 'gray'
+                    ? 'var(--neutral-alpha-11)'
+                    : 'var(--neutral-1)',
+              }}
+            >
+              {buttonText}
+            </Button>
+          </Flex>
+        )}
+      </Flex>
+    </div>
+  )
+}
+
+BannerAnnouncement.displayName = 'BannerAnnouncement'

package/src/components/BannerAnnouncement/BannerAnnouncement.module.css

@@ -0,0 +1,58 @@
+.bannerAnnouncement {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  z-index: 99;
+  border-radius: 8px;
+  border: 1px solid var(--neutral-alpha-3);
+  background: var(--neutral-4);
+  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+
+  max-width: 214px;
+}
+
+.image {
+  width: 100%;
+  height: 105px;
+  object-fit: cover;
+  border-radius: 8px 8px 0 0;
+}
+
+.closeButton {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  
+}
+
+.children {
+  margin-top: 12px;
+  padding: 0 12px 8px 12px;
+}
+
+.button {
+  padding-bottom: 6px;
+
+  button {
+    width: 100%;
+  }
+}
+
+
+.badge {
+  position: absolute;
+  padding: 3px 10px !important; 
+  font-weight: 600 !important;
+  top: 93px;
+  left: 8px;
+  border-radius: 50px;
+}
+
+.badgeGreen {
+  color: #1C2024 !important;
+  background-color: #0AFFA7 !important;
+}
+.badgeNeutral {
+  color: var(--white) !important;
+}