@moises.ai/design-system 3.11.13 → 3.11.16

package/dist/primitives.js

@@ -1,7 +1,7 @@
 import * as a from "react";
 import j from "react";
-import { R as Vo, u as Te, C as _r, P as F, a as te, b as wr, T as Ir, c as se, d as Go, e as Pe, f as ne, g as B, h as Ee, i as N, A as Tr, j as Ar, k as Sr, G as xr, I as Nr, l as Pr, L as Fr, m as Or, n as ct, o as Dr, p as kr, q as Lr, S as Vr, r as Gr, s as Kr, t as $r, v as Fe, w as Br, x as pe, y as zr, z as Oe, B as Ao, D as jr, E as ie, F as Hr, H as Ur, J as Wr, K as Ko, M as $o, N as qr, O as Yr, Q as Zr, U as Bo } from "./index-DFiQTptM.js";
-import { V as Ni, W as Pi, X as Fi, Y as Oi, Z as Di, _ as ki, $ as Li, a0 as Vi, a1 as Gi, a2 as Ki, a3 as $i, a4 as Bi, a5 as zi, a6 as ji, a7 as Hi, a8 as Ui, a9 as Wi, aa as qi, ab as Yi, ac as Zi, ad as Xi, ae as Ji, af as Qi } from "./index-DFiQTptM.js";
+import { R as Vo, u as Te, C as _r, P as F, a as te, b as wr, T as Ir, c as se, d as Go, e as Pe, f as ne, g as B, h as Ee, i as N, A as Tr, j as Ar, k as Sr, G as xr, I as Nr, l as Pr, L as Fr, m as Or, n as ct, o as Dr, p as kr, q as Lr, S as Vr, r as Gr, s as Kr, t as $r, v as Fe, w as Br, x as pe, y as zr, z as Oe, B as Ao, D as jr, E as ie, F as Hr, H as Ur, J as Wr, K as Ko, M as $o, N as qr, O as Yr, Q as Zr, U as Bo } from "./index-Dwaw5zqT.js";
+import { V as Ni, W as Pi, X as Fi, Y as Oi, Z as Di, _ as ki, $ as Li, a0 as Vi, a1 as Gi, a2 as Ki, a3 as $i, a4 as Bi, a5 as zi, a6 as ji, a7 as Hi, a8 as Ui, a9 as Wi, aa as qi, ab as Yi, ac as Zi, ad as Xi, ae as Ji, af as Qi } from "./index-Dwaw5zqT.js";
 import { jsxs as je, Fragment as Ae, jsx as s } from "react/jsx-runtime";
 import Xr, { flushSync as de } from "react-dom";
 var Jr = "AccessibleIcon", lt = ({ children: e, label: t }) => {

package/package.json

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

package/src/colors/Colors.stories.jsx

@@ -0,0 +1,204 @@
+import { useMemo } from 'react'
+import { Box, Flex, Heading, Text, Grid, Card } from '@radix-ui/themes'
+import cssSource from './custom-styles.css?raw'
+
+function isColorValue(value) {
+  const v = value.trim()
+  return v.startsWith('#') || /^rgba?\(/i.test(v)
+}
+
+function clampByte(n) {
+  return Math.round(Math.min(255, Math.max(0, n)))
+}
+
+function rgbaToHex(r, g, b, a = 1) {
+  const toHex = (n) => clampByte(n).toString(16).padStart(2, '0').toUpperCase()
+  let hex = `#${toHex(r)}${toHex(g)}${toHex(b)}`
+  if (a < 1) {
+    hex += toHex(a * 255)
+  }
+  return hex
+}
+
+function parseColorFormats(cssValue) {
+  const v = cssValue.trim()
+  if (v.startsWith('#')) {
+    let h = v.slice(1)
+    if (h.length === 3) {
+      h = h
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    }
+    if (h.length === 6) {
+      const r = parseInt(h.slice(0, 2), 16)
+      const g = parseInt(h.slice(2, 4), 16)
+      const b = parseInt(h.slice(4, 6), 16)
+      return {
+        rgba: `rgba(${r}, ${g}, ${b}, 1)`,
+        hex: `#${h.toUpperCase()}`,
+      }
+    }
+    if (h.length === 8) {
+      const r = parseInt(h.slice(0, 2), 16)
+      const g = parseInt(h.slice(2, 4), 16)
+      const b = parseInt(h.slice(4, 6), 16)
+      const alpha = parseInt(h.slice(6, 8), 16) / 255
+      const aRounded = Math.round(alpha * 1000) / 1000
+      return {
+        rgba: `rgba(${r}, ${g}, ${b}, ${aRounded})`,
+        hex: `#${h.toUpperCase()}`,
+      }
+    }
+    return { rgba: v, hex: v }
+  }
+
+  const m = v.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i,
+  )
+  if (m) {
+    const r = Number(m[1])
+    const g = Number(m[2])
+    const b = Number(m[3])
+    const a = m[4] !== undefined ? Number(m[4]) : 1
+    const aRounded = Math.round(a * 1000) / 1000
+    return {
+      rgba: `rgba(${r}, ${g}, ${b}, ${aRounded})`,
+      hex: rgbaToHex(r, g, b, a),
+    }
+  }
+
+  return { rgba: v, hex: '—' }
+}
+
+function parseColorTokens(css) {
+  const lines = css.split('\n')
+  /** @type {{ section: string; name: string; value: string }[]} */
+  const tokens = []
+  let section = 'Cores'
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    const sectionMatch = trimmed.match(/^\/\*\s*([^*]+?)\s*\*\/$/)
+    if (sectionMatch && !trimmed.includes('--')) {
+      section = sectionMatch[1].trim()
+      continue
+    }
+
+    const varMatch = trimmed.match(/^--([\w-]+)\s*:\s*([^;]+);/)
+    if (!varMatch) continue
+
+    const name = `--${varMatch[1]}`
+    const value = varMatch[2].trim()
+    if (value.startsWith('var(')) continue
+    if (!isColorValue(value)) continue
+
+    tokens.push({ section, name, value })
+  }
+
+  return tokens
+}
+
+function groupBySection(tokens) {
+  /** @type {Record<string, typeof tokens>} */
+  const map = {}
+  for (const t of tokens) {
+    if (!map[t.section]) map[t.section] = []
+    map[t.section].push(t)
+  }
+  return map
+}
+
+export default {
+  title: 'Colors',
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+export const Colors = () => {
+  const sections = useMemo(() => {
+    const tokens = parseColorTokens(cssSource)
+    return groupBySection(tokens)
+  }, [])
+
+  return (
+    <Box p="6" style={{ maxWidth: 1200, margin: '0 auto' }}>
+      <Flex direction="column" gap="6">
+        <Flex direction="column" gap="2">
+          <Heading size="8">Cores</Heading>
+          <Text size="3" color="gray">
+            Variáveis CSS do design system com rgba e hex.
+          </Text>
+        </Flex>
+
+        {Object.entries(sections).map(([section, tokens]) => (
+          <Flex key={section} direction="column" gap="3">
+            <Heading size="5">{section}</Heading>
+            <Grid columns="1" gap="2">
+              {tokens.map(({ name, value }) => {
+                const { rgba, hex } = parseColorFormats(value)
+                return (
+                  <Card key={name} size="1">
+                    <Grid
+                      columns={{ initial: '1', sm: 'auto 1fr' }}
+                      gap="3"
+                      align="center"
+                    >
+                      <Box
+                        style={{
+                          width: '100%',
+                          minWidth: 56,
+                          maxWidth: 120,
+                          height: 48,
+                          borderRadius: 8,
+                          backgroundColor: `var(${name})`,
+                          boxShadow:
+                            'inset 0 0 0 1px rgba(255, 255, 255, 0.12)',
+                        }}
+                        aria-hidden
+                      />
+                      <Grid
+                        columns={{ initial: '1', xs: '1fr 1fr' }}
+                        gap="2"
+                        width="100%"
+                      >
+                        <Flex direction="column" gap="1" minWidth="0">
+                          <Text
+                            size="2"
+                            weight="medium"
+                            style={{
+                              fontFamily: 'ui-monospace, monospace',
+                              wordBreak: 'break-all',
+                            }}
+                          >
+                            {name}
+                          </Text>
+                          <Text
+                            size="1"
+                            color="gray"
+                            style={{ fontFamily: 'ui-monospace, monospace' }}
+                          >
+                            {rgba}
+                          </Text>
+                        </Flex>
+                        <Flex align="center">
+                          <Text
+                            size="2"
+                            style={{ fontFamily: 'ui-monospace, monospace' }}
+                          >
+                            {hex}
+                          </Text>
+                        </Flex>
+                      </Grid>
+                    </Grid>
+                  </Card>
+                )
+              })}
+            </Grid>
+          </Flex>
+        ))}
+      </Flex>
+    </Box>
+  )
+}

package/src/components/CanvasContextMenu/CanvasContextMenu.jsx

@@ -0,0 +1,72 @@
+import classNames from 'classnames'
+import { ContextMenu as ContextMenuRadix } from 'radix-ui'
+import React, { forwardRef, memo } from 'react'
+import { createRenderItem, styles } from '../../lib/menu'
+import { CanvasContextMenuTrigger } from './CanvasContextMenuTrigger'
+
+const renderOption = createRenderItem(ContextMenuRadix)
+
+/**
+ * Variant of ContextMenu for programmatic opening from non-DOM event sources
+ * (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
+ * a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
+ *
+ * Usage:
+ *   const triggerRef = useRef(null)
+ *   triggerRef.current?.dispatchEvent(
+ *     new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
+ *   )
+ *   ...
+ *   <CanvasContextMenu ref={triggerRef} options={[...]}>
+ *     {children}
+ *   </CanvasContextMenu>
+ */
+export const CanvasContextMenu = memo(
+  forwardRef(function CanvasContextMenu(
+    {
+      options,
+      className,
+      size = '2',
+      side,
+      align,
+      onSelectionChange,
+      closeOnSelect = true,
+    },
+    ref,
+  ) {
+    return (
+      <ContextMenuRadix.Root>
+        <ContextMenuRadix.Trigger asChild>
+          <div
+            ref={ref}
+            style={{
+              position: 'fixed',
+              width: 0,
+              height: 0,
+              pointerEvents: 'none',
+            }}
+          />
+        </ContextMenuRadix.Trigger>
+
+        {options?.length > 0 && (
+          <ContextMenuRadix.Content
+            className={classNames(styles.menuContent, className)}
+            side={side}
+            align={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>
+    )
+  }),
+)
+
+CanvasContextMenu.displayName = 'CanvasContextMenu'
+CanvasContextMenu.Trigger = CanvasContextMenuTrigger

package/src/components/CanvasContextMenu/CanvasContextMenu.stories.jsx

@@ -0,0 +1,271 @@
+import { Flex } from '@radix-ui/themes'
+import React, { useCallback, useRef, useState } from 'react'
+import { Button } from '../Button/Button'
+import { CanvasContextMenu } from './CanvasContextMenu'
+
+export default {
+  title: 'Components/CanvasContextMenu',
+  component: CanvasContextMenu,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+CanvasContextMenu provides a list of actions or options that appear when right-clicking on a canvas element. It's built on top of Radix UI's ContextMenu component and supports various configurations including submenus, separators, labels, and keybindings.
+
+## Usage
+
+\`\`\`jsx
+import { ContextMenu } from '@moises.ai/design-system'
+
+const MyComponent = () => (
+  <ContextMenu
+    options={[
+      {
+        type: 'item',
+        key: 'edit',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'duplicate',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'item',
+        key: 'delete',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ]}
+    onSelectionChange={(selectedItem) => {
+      console.log('Selected item:', selectedItem)
+      // Handle the selected item
+    }}
+    disable={false} // Optional: prevents context menu from opening when true
+  >
+    <canvas />
+  </ContextMenu>
+)
+\`\`\`
+
+## Options API
+
+The \`options\` prop accepts an array of objects with the following types:
+
+### Menu Item
+\`\`\`js
+{
+  type: 'item',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Item Label', // Text to display
+  secondaryText: 'Secondary text', // Optional, secondary text
+  secondaryTextPosition: 'bottom' | 'right', // Optional, position of secondary text (default: 'bottom')
+  icon: <Icon />, // Optional, icon displayed before the label
+  onClick: () => {}, // Function called when clicked
+  disabled: false, // Optional, disables the item when true
+  keybinding: '⌘C', // Optional, displays a keyboard shortcut
+  rightIcon: <Icon />, // Optional, icon displayed on the right side
+  color: 'red' | 'cyan', // Optional: custom color for this item
+}
+\`\`\`
+
+### Submenu
+\`\`\`js
+{
+  type: 'sub',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Submenu Label', // Text to display
+  children: [], // Array of menu items for the submenu
+  color: 'red' | 'cyan', // Optional: custom color for this submenu trigger
+}
+\`\`\`
+
+### Separator
+\`\`\`js
+{
+  type: 'separator',
+  key: 'uniqueKey', // Required unique identifier
+}
+\`\`\`
+
+### Label
+\`\`\`js
+{
+  type: 'label',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Section Label', // Text to display as a non-interactive label
+  color: 'red' | 'cyan', // Optional: custom color for this label
+}
+\`\`\`
+
+### Checkbox
+\`\`\`js
+{
+  type: 'checkbox',
+  key: 'uniqueKey', // Required unique identifier
+  label: 'Checkbox Label', // Text to display
+  secondaryText: 'Secondary text', // Optional, secondary text
+  secondaryTextPosition: 'bottom' | 'right', // Optional, position of secondary text (default: 'bottom')
+  icon: <Icon />, // Optional, icon displayed after the checkmark placeholder
+  checked: true, // Whether the checkbox is checked (always reserves space for checkmark)
+  onChange: (checked) => {}, // Function called when toggled, receives new checked state
+  disabled: false, // Optional, disables the checkbox when true
+  keybinding: '⌘C', // Optional, displays a keyboard shortcut
+  rightIcon: <Icon />, // Optional, icon displayed on the right side
+  color: 'red' | 'cyan', // Optional: custom color for this checkbox item
+}
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      control: false,
+      description: 'The element to attach the context menu to **(REQUIRED)**',
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    options: {
+      control: false,
+      description: 'Array of menu items configuration **(REQUIRED)**',
+      table: {
+        type: { summary: 'Array<MenuItem>' },
+      },
+    },
+    side: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: { type: 'select' },
+      description: 'The preferred side of the trigger to render the menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'bottom' },
+      },
+    },
+    align: {
+      options: ['start', 'center', 'end'],
+      control: { type: 'select' },
+      description: 'The preferred alignment against the trigger',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'end' },
+      },
+    },
+    size: {
+      options: ['1', '2'],
+      control: { type: 'select' },
+      description: 'The size of the context menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    className: {
+      control: false,
+      description: 'Additional CSS class names to apply to the context menu',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onSelectionChange: {
+      control: false,
+      description:
+        'Callback function called when any menu item is selected, receives the selected item as parameter',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    closeOnSelect: {
+      control: { type: 'boolean' },
+      description:
+        'When false, keeps the menu open after selecting an option (handy for performing multiple actions)',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    disable: {
+      control: { type: 'boolean' },
+      description:
+        'When true, prevents the context menu from opening and renders only the children',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    side: 'bottom',
+    align: 'end',
+    options: [
+      {
+        type: 'item',
+        key: 'item1',
+        label: 'Edit',
+        onClick: () => console.log('Edit clicked'),
+      },
+      {
+        type: 'item',
+        key: 'item2',
+        label: 'Duplicate',
+        onClick: () => console.log('Duplicate clicked'),
+      },
+      { type: 'separator', key: 'sep1' },
+      {
+        type: 'item',
+        key: 'item3',
+        label: 'Delete',
+        onClick: () => console.log('Delete clicked'),
+      },
+    ],
+  },
+  render: (args) => {
+    const [count, setCount] = useState(0)
+    const triggerRef = useRef(null)
+
+    const dispatch = useCallback(({ x, y }) => {
+      triggerRef.current?.dispatchEvent(
+        new MouseEvent('contextmenu', {
+          bubbles: true,
+          cancelable: true,
+          clientX: x,
+          clientY: y,
+        }),
+      )
+    }, [])
+
+    return (
+      <Flex justify="center" align="start" height="300px">
+        <CanvasContextMenu ref={triggerRef} {...args} />
+
+        <CanvasContextMenu.Trigger>
+          <div
+            style={{
+              width: 100,
+              height: 100,
+              border: '1px dashed gray',
+            }}
+            onContextMenu={(e) => dispatch({ x: e.clientX, y: e.clientY })}
+          >
+            {count}
+          </div>
+        </CanvasContextMenu.Trigger>
+
+        <Button onClick={() => setCount((count) => count + 1)}>
+          Trigger Change
+        </Button>
+      </Flex>
+    )
+  },
+}

package/src/components/CanvasContextMenu/CanvasContextMenuTrigger.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+export function CanvasContextMenuTrigger({ children }) {
+  return (
+    // The outer div catches the bubbling contextmenu event AFTER Radix has already
+    // processed it on the trigger, suppressing the browser's native context menu
+    // without interfering with Radix's own handler.
+    <div
+      onContextMenu={(e) => e.preventDefault()}
+      style={{ display: 'contents' }}
+    >
+      {children}
+    </div>
+  )
+}
+
+CanvasContextMenuTrigger.displayName = 'CanvasContextMenuTrigger'

package/src/icons/MinusIcon.jsx

@@ -0,0 +1,15 @@
+export const MinusIcon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={width}
+    height={height}
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className} {...props}>
+    <g >
+      <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+    </g>
+  </svg>
+)
+
+MinusIcon.displayName = 'MinusIcon'

package/src/icons.jsx

@@ -351,3 +351,4 @@ export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
 export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'
 export { Share2Icon } from './icons/Share2Icon'
 export { TrackPreviousIcon } from './icons/TrackPreviousIcon'
+export { MinusIcon } from './icons/MinusIcon'

package/src/index.jsx

@@ -78,10 +78,10 @@ export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'
 export { BannerAnnouncement } from './components/BannerAnnouncement/BannerAnnouncement'
 export { Button } from './components/Button/Button'
 export { Callout } from './components/Callout/Callout'
+export { CanvasContextMenu } from './components/CanvasContextMenu/CanvasContextMenu'
 export { Card as CardWidget } from './components/Card/Card'
 export { Checkbox } from './components/Checkbox/Checkbox'
 export { CigarBar } from './components/CigarBar/CigarBar'
-export { CanvasContextMenu } from './components/ContextMenu/CanvasContextMenu'
 export { ContextMenu } from './components/ContextMenu/ContextMenu'
 export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'

package/src/components/ContextMenu/CanvasContextMenu.jsx

@@ -1,73 +0,0 @@
-import classNames from 'classnames'
-import { ContextMenu as ContextMenuRadix } from 'radix-ui'
-import React, { forwardRef, memo } from 'react'
-
-import { createRenderItem, styles } from '../../lib/menu'
-
-const renderOption = createRenderItem(ContextMenuRadix)
-
-/**
- * Variant of ContextMenu for programmatic opening from non-DOM event sources
- * (e.g. Pixi canvas). Instead of wrapping a visible trigger element, it exposes
- * a ref to an internal hidden div that can receive a synthetic `contextmenu` event.
- *
- * Usage:
- *   const triggerRef = useRef(null)
- *   triggerRef.current?.dispatchEvent(
- *     new MouseEvent('contextmenu', { bubbles: true, clientX: x, clientY: y })
- *   )
- *   ...
- *   <CanvasContextMenu ref={triggerRef} options={[...]}>
- *     {children}  // rendered between trigger and content, inside the same Root
- *   </CanvasContextMenu>
- */
-export const CanvasContextMenu = memo(
-  forwardRef(function CanvasContextMenu(
-    {
-      children,
-      options,
-      className,
-      size = '2',
-      onSelectionChange,
-      closeOnSelect = true,
-      ...props
-    },
-    ref,
-  ) {
-    return (
-      // The outer div catches the bubbling contextmenu event AFTER Radix has already
-      // processed it on the trigger, suppressing the browser's native context menu
-      // without interfering with Radix's own handler.
-      <div onContextMenu={(e) => e.preventDefault()} style={{ display: 'contents' }}>
-        <ContextMenuRadix.Root>
-          <ContextMenuRadix.Trigger asChild>
-            <div
-              ref={ref}
-              style={{ position: 'fixed', width: 0, height: 0, pointerEvents: 'none' }}
-            />
-          </ContextMenuRadix.Trigger>
-          {children}
-          {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>
-      </div>
-    )
-  }),
-)
-
-CanvasContextMenu.displayName = 'CanvasContextMenu'