@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,136 @@
+.Checkbox {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  border: 1px solid var(--neutral-alpha-7);
+  background: rgba(0, 0, 0, 0.25);
+  position: relative;
+}
+
+.Checkbox[size="1"] {
+  width: 14px;
+  height: 14px;
+  border-radius: 3px;
+}
+.Checkbox[size="2"] {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+}
+.Checkbox[size="3"] {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+}
+
+.Checkbox[aria-checked="false"]:hover {
+  border-color: var(--neutral-alpha-8);
+  cursor: pointer;
+}
+
+.Checkbox[aria-checked="false"]:active {
+  border-color: var(--neutral-alpha-9);
+}
+
+.Checkbox[aria-checked="false"][disabled],
+.Checkbox[aria-checked="false"][disabled]:hover,
+.Checkbox[aria-checked="false"][disabled]:active,
+.Checkbox[aria-checked="true"][disabled],
+.Checkbox[aria-checked="true"][disabled]:hover,
+.Checkbox[aria-checked="true"][disabled]:active,
+.Checkbox[aria-checked="mixed"][disabled],
+.Checkbox[aria-checked="mixed"][disabled]:hover,
+.Checkbox[aria-checked="mixed"][disabled]:active {
+  border-color: var(--neutral-alpha-6);
+  background: var(--neutral-alpha-3);
+  cursor: default;
+}
+
+.Checkbox[aria-checked="true"] {
+  background: var(--aqua-9);
+  border-color: var(--aqua-9);
+}
+
+.Checkbox[aria-checked="true"]:hover,
+.Checkbox[aria-checked="true"]:active {
+  background: var(--aqua-10);
+  border-color: var(--aqua-10);
+  cursor: pointer;
+}
+
+.Checkbox[size="1"] .CheckboxIndicator {
+  width: 14px;
+  height: 14px;
+}
+
+.Checkbox[size="2"] .CheckboxIndicator {
+  width: 16px;
+  height: 16px;
+}
+
+.Checkbox[size="3"] .CheckboxIndicator {
+  width: 20px;
+  height: 20px;
+}
+
+.CheckboxIcon {
+  color: var(--neutral-1);
+  display: none;
+}
+
+.Checkbox[aria-checked="true"] .CheckboxIcon {
+  display: block;
+}
+
+.Checkbox[aria-checked="false"] .CheckboxIcon,
+.Checkbox[aria-checked="mixed"] .CheckboxIcon {
+  display: none;
+}
+
+.Checkbox[disabled] .CheckboxIcon {
+  color: var(--neutral-alpha-8);
+}
+
+.CheckboxIndicator {
+  display: grid;
+  place-items: center;
+
+  position: absolute;
+  left: -1px;
+  top: -1px;
+}
+
+.DividerHorizontalIcon {
+  color: var(--aqua-dark-alpha-11);
+  display: none;
+}
+
+.Checkbox[aria-checked="mixed"] .DividerHorizontalIcon {
+  display: block;
+}
+
+.Checkbox[disabled] .DividerHorizontalIcon {
+  color: var(--neutral-alpha-8);
+}
+
+.Checkbox[aria-checked="mixed"] {
+  border-radius: 3px;
+  border: 1px solid var(--aqua-dark-alpha-7);
+  background: var(--aqua-dark-alpha-2);
+}
+
+.Checkbox[aria-checked="mixed"]:hover {
+  border-radius: 3px;
+  border: 1px solid var(--aqua-dark-alpha-8);
+  opacity: 0.88;
+  background: var(--aqua-dark-alpha-3);
+  cursor: pointer;
+}
+
+.Checkbox[aria-checked="mixed"]:active {
+  border-radius: 3px;
+  border: 1px solid var(--aqua-dark-alpha-8);
+  opacity: 0.82;
+  background: var(--aqua-dark-alpha-3);
+  cursor: pointer;
+}

package/src/components/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import { Checkbox } from './Checkbox'
+import { Flex, Text } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: { type: 'select' },
+      options: [true, false, 'indeterminate'],
+      description: 'Whether the checkbox is checked',
+      table: {
+        type: { summary: 'boolean' | 'indeterminate' },
+        defaultValue: { summary: '—' },
+      },
+    },
+    onCheckedChange: {
+      action: 'checked changed',
+      description: 'Event handler called when the checked state changes',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: '—' },
+      },
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the checkbox is disabled',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: '—' },
+      },
+    },
+    size: {
+      control: 'select',
+      options: ['1', '2', '3'],
+      description: 'Size of the checkbox',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    disabled: false,
+    size: '2',
+  },
+  render: (args) => {
+    const [state, setState] = useState(args.defaultChecked ?? false)
+
+    useEffect(() => {
+      setState(args.defaultChecked ?? false)
+    }, [args.defaultChecked])
+
+    return <Checkbox {...args} />
+  },
+}

package/src/components/CigarBar/CigarBar.jsx

@@ -0,0 +1,73 @@
+import { useState, useEffect } from 'react'
+import classNames from 'classnames'
+import { Countdown } from '../Countdown/Countdown'
+import styles from './CigarBar.module.css'
+
+const calculateTimeLeft = (endDate) => {
+  const difference = new Date(endDate) - new Date()
+
+  if (difference <= 0) {
+    return { days: 0, hours: 0, minutes: 0, seconds: 0, ended: true }
+  }
+
+  return {
+    days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+    hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+    minutes: Math.floor((difference / 1000 / 60) % 60),
+    seconds: Math.floor((difference / 1000) % 60),
+    ended: false,
+  }
+}
+
+export const CigarBar = ({
+  className,
+  title,
+  description,
+  endDate,
+  showDays = false,
+}) => {
+  const [timeLeft, setTimeLeft] = useState(() =>
+    endDate ? calculateTimeLeft(endDate) : null,
+  )
+
+  useEffect(() => {
+    if (!endDate) return
+
+    const interval = setInterval(() => {
+      const newTimeLeft = calculateTimeLeft(endDate)
+      setTimeLeft(newTimeLeft)
+
+      if (newTimeLeft.ended) {
+        clearInterval(interval)
+      }
+    }, 1000)
+
+    return () => clearInterval(interval)
+  }, [endDate])
+
+  const showCountdown = endDate && timeLeft && !timeLeft.ended
+
+  return (
+    <div className={classNames(styles.container, className)}>
+      <div className={styles.content}>
+        <p className={styles.title}>{title}</p>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {showCountdown && (
+        <Countdown
+          show={true}
+          days={timeLeft.days}
+          hours={timeLeft.hours}
+          minutes={timeLeft.minutes}
+          seconds={timeLeft.seconds}
+          theme="white"
+          variant="sm"
+          className={styles.countdownContainer}
+          showDays={showDays}
+        />
+      )}
+    </div>
+  )
+}
+
+CigarBar.displayName = 'CigarBar'

package/src/components/CigarBar/CigarBar.module.css

@@ -0,0 +1,57 @@
+.container {
+  width: 100%;
+  padding: 8px 16px;
+  align-items: center;
+  justify-content: center;
+  background: #0affa7;
+  gap: 45px;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+
+@media (max-width: 530px) {
+  .container {
+    gap: 18px;
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  align-items: center;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1C2024;
+  margin: 0;
+  line-height: 1.2;
+}
+
+@media (max-width: 768px) {
+  .title {
+    font-size: 12px;
+  }
+}
+
+.description {
+  font-size: 12px;
+  font-weight: 500;
+  color: #1C2024;
+  margin: 0;
+  line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+  .description {
+    display: none;
+  }
+}
+
+.countdownContainer {
+  max-width: 162px;
+  width: 100%;
+}

package/src/components/CigarBar/CigarBar.stories.jsx

@@ -0,0 +1,66 @@
+import { CigarBar } from './CigarBar'
+
+export default {
+  title: 'Components/CigarBar',
+  component: CigarBar,
+  tags: ['autodocs'],
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    endDate: { control: 'text' },
+    showDays: { control: 'boolean' },
+  },
+}
+
+// Helper to get a date 2 hours from now
+const getTwoHoursFromNow = () => {
+  const date = new Date()
+  date.setHours(date.getHours() + 2)
+  return date.toISOString()
+}
+
+// Helper to get a date 2 days from now
+const getTwoDaysFromNow = () => {
+  const date = new Date()
+  date.setDate(date.getDate() + 2)
+  return date.toISOString()
+}
+
+export const Default = {
+  args: {
+    title: 'Limited Time Offer',
+    description: 'Get 30% off on all premium plans',
+  },
+}
+
+export const WithCountdown = {
+  args: {
+    title: 'Flash Sale',
+    description: 'Up to 30% off any individual plan for the next:',
+    endDate: getTwoHoursFromNow(),
+  },
+}
+
+export const WithCountdownAndDays = {
+  args: {
+    title: 'Special Promotion',
+    description: 'Exclusive discount ends in:',
+    endDate: getTwoDaysFromNow(),
+    showDays: true,
+  },
+}
+
+export const TitleOnly = {
+  args: {
+    title: 'New Feature Available!',
+  },
+}
+
+export const LongContent = {
+  args: {
+    title: 'Black Friday Sale - Best Deals of the Year!',
+    description:
+      'Save up to 50% on annual subscriptions. Limited time offer, grab it while you can!',
+    endDate: getTwoHoursFromNow(),
+  },
+}

package/src/components/ContextMenu/ContextMenu.jsx

@@ -0,0 +1,56 @@
+import React, { memo } from 'react'
+import { ContextMenu as ContextMenuRadix } from 'radix-ui'
+import classNames from 'classnames'
+
+import { createRenderItem, styles } from '../../lib/menu'
+
+const renderOption = createRenderItem(ContextMenuRadix)
+
+export const ContextMenu = memo(
+  ({
+    children,
+    options,
+    className,
+    size = '2',
+    onSelectionChange,
+    disable = false,
+    closeOnSelect = true,
+    ...props
+  }) => {
+    if (disable) {
+      return children
+    }
+
+    return (
+      <ContextMenuRadix.Root>
+        <ContextMenuRadix.Trigger className={styles.menuTrigger} asChild>
+          {children}
+        </ContextMenuRadix.Trigger>
+        {options?.length > 0 && (
+          <ContextMenuRadix.Content
+            className={classNames(styles.menuContent, className)}
+            side={props.side}
+            align={props.align}
+            sideOffset={5}
+            alignOffset={0}
+            onCloseAutoFocus={(event) => {
+              event.preventDefault()
+            }}
+            onClick={(event) => event.stopPropagation()}
+          >
+            {options?.map((option) =>
+              renderOption(
+                option,
+                size,
+                onSelectionChange,
+                closeOnSelect,
+              ),
+            )}
+          </ContextMenuRadix.Content>
+        )}
+      </ContextMenuRadix.Root>
+    )
+  },
+)
+
+ContextMenu.displayName = 'ContextMenu'