@vector-business-services/cristal-ds-web 0.5.0 → 0.7.0

package/dist/index.d.cts

@@ -161,6 +161,11 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /**
+     * Com overlay (padrão): a gaveta é modal, a página atrás fica bloqueada e o clique no overlay
+     * fecha. Sem overlay (`false`): a página continua rolando e clicável, e só o X e o Esc fecham.
+     */
+    modal?: boolean;
     /** Mostra o botão de voltar antes do título. */
     onBack?: () => void;
     backLabel?: string;
@@ -171,7 +176,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
@@ -289,6 +294,54 @@ interface MenubarProps {
 }
 declare const Menubar: react.ForwardRefExoticComponent<MenubarProps & react.RefAttributes<HTMLDivElement>>;
 
+/** Um produto do menu (.Menu Principal / Item no Figma). */
+interface MenuPrincipalItem {
+    /** Nome do produto (Item Label no Figma). */
+    label: string;
+    /** Texto de apoio abaixo do nome, até 2 linhas. */
+    description?: string;
+    /** Ícone no círculo à esquerda. Use um ícone de `@vector-business-services/cristal-ds-web/icons`. */
+    icon: ReactNode;
+    /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
+    tag?: string;
+    /** Ação do item; o menu popup fecha depois dela. */
+    command?: (event: MenuItemCommandEvent) => void;
+    /** Link do item; sem ele o clique não navega. */
+    url?: string;
+    target?: string;
+    id?: string;
+    className?: string;
+}
+/** Um grupo de produtos com título (Product Group no Figma). */
+interface MenuPrincipalGroup {
+    /** Título do grupo, acima dos itens. */
+    label: string;
+    items: MenuPrincipalItem[];
+    id?: string;
+}
+type MenuPrincipalEntry = MenuPrincipalItem | MenuPrincipalGroup;
+interface MenuPrincipalProps {
+    /** Itens soltos e grupos, na ordem; o divisor tracejado entra antes e depois de cada grupo. */
+    model: MenuPrincipalEntry[];
+    /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
+    popup?: boolean;
+    /** Nome acessível do menu. */
+    'aria-label'?: string;
+    onShow?: (event: SyntheticEvent) => void;
+    onHide?: (event: SyntheticEvent) => void;
+    id?: string;
+    className?: string;
+}
+/** Controle do menu popup, pela ref. */
+interface MenuPrincipalHandle {
+    toggle: (event: SyntheticEvent) => void;
+    show: (event: SyntheticEvent) => void;
+    hide: (event: SyntheticEvent) => void;
+    /** O <div> raiz do menu (só existe com o popup aberto). */
+    getElement: () => HTMLDivElement | null;
+}
+declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps & react.RefAttributes<MenuPrincipalHandle>>;
+
 /**
  * Size no Figma: Small (520px), Medium (768px) e Large (1200 x 720px; abaixo de 768px de tela
  * vira tela cheia, como o Responsive=360 do Figma).
@@ -553,5 +606,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
-export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -161,6 +161,11 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /**
+     * Com overlay (padrão): a gaveta é modal, a página atrás fica bloqueada e o clique no overlay
+     * fecha. Sem overlay (`false`): a página continua rolando e clicável, e só o X e o Esc fecham.
+     */
+    modal?: boolean;
     /** Mostra o botão de voltar antes do título. */
     onBack?: () => void;
     backLabel?: string;
@@ -171,7 +176,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
@@ -289,6 +294,54 @@ interface MenubarProps {
 }
 declare const Menubar: react.ForwardRefExoticComponent<MenubarProps & react.RefAttributes<HTMLDivElement>>;
 
+/** Um produto do menu (.Menu Principal / Item no Figma). */
+interface MenuPrincipalItem {
+    /** Nome do produto (Item Label no Figma). */
+    label: string;
+    /** Texto de apoio abaixo do nome, até 2 linhas. */
+    description?: string;
+    /** Ícone no círculo à esquerda. Use um ícone de `@vector-business-services/cristal-ds-web/icons`. */
+    icon: ReactNode;
+    /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
+    tag?: string;
+    /** Ação do item; o menu popup fecha depois dela. */
+    command?: (event: MenuItemCommandEvent) => void;
+    /** Link do item; sem ele o clique não navega. */
+    url?: string;
+    target?: string;
+    id?: string;
+    className?: string;
+}
+/** Um grupo de produtos com título (Product Group no Figma). */
+interface MenuPrincipalGroup {
+    /** Título do grupo, acima dos itens. */
+    label: string;
+    items: MenuPrincipalItem[];
+    id?: string;
+}
+type MenuPrincipalEntry = MenuPrincipalItem | MenuPrincipalGroup;
+interface MenuPrincipalProps {
+    /** Itens soltos e grupos, na ordem; o divisor tracejado entra antes e depois de cada grupo. */
+    model: MenuPrincipalEntry[];
+    /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
+    popup?: boolean;
+    /** Nome acessível do menu. */
+    'aria-label'?: string;
+    onShow?: (event: SyntheticEvent) => void;
+    onHide?: (event: SyntheticEvent) => void;
+    id?: string;
+    className?: string;
+}
+/** Controle do menu popup, pela ref. */
+interface MenuPrincipalHandle {
+    toggle: (event: SyntheticEvent) => void;
+    show: (event: SyntheticEvent) => void;
+    hide: (event: SyntheticEvent) => void;
+    /** O <div> raiz do menu (só existe com o popup aberto). */
+    getElement: () => HTMLDivElement | null;
+}
+declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps & react.RefAttributes<MenuPrincipalHandle>>;
+
 /**
  * Size no Figma: Small (520px), Medium (768px) e Large (1200 x 720px; abaixo de 768px de tela
  * vira tela cheia, como o Responsive=360 do Figma).
@@ -553,5 +606,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
-export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { forwardRef, useId, useRef, useImperativeHandle, useCallback, useEffect, useContext, useState, Children, isValidElement, cloneElement } from 'react';
 import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
-import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, CaretUp, X, List, ArrowLeft, Question } from '@phosphor-icons/react';
+import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, CaretUp, X, List, DribbbleLogo, ArrowLeft, Question } from '@phosphor-icons/react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Badge as Badge$1 } from 'primereact/badge';
 import { Button as Button$1 } from 'primereact/button';
@@ -15,6 +15,7 @@ import { Menu as Menu$1 } from 'primereact/menu';
 import { Menubar as Menubar$1 } from 'primereact/menubar';
 import { Avatar } from 'primereact/avatar';
 import { Tooltip as Tooltip$1 } from 'primereact/tooltip';
+import { Tag as Tag$1 } from 'primereact/tag';
 import { Dialog } from 'primereact/dialog';
 import { MultiSelect as MultiSelect$1 } from 'primereact/multiselect';
 import { Panel as Panel$1 } from 'primereact/panel';
@@ -24,7 +25,6 @@ import { SelectButton } from 'primereact/selectbutton';
 import { Dropdown } from 'primereact/dropdown';
 import { InputSwitch } from 'primereact/inputswitch';
 import { TabView, TabPanel as TabPanel$1 } from 'primereact/tabview';
-import { Tag as Tag$1 } from 'primereact/tag';
 
 // src/components/AutoComplete/AutoComplete.tsx
 var AutoComplete = forwardRef(function AutoComplete2({
@@ -319,6 +319,7 @@ function Drawer({
   subtitle,
   side = "right",
   behavior = "full",
+  modal = true,
   onBack,
   backLabel = "Voltar",
   closeLabel = "Fechar",
@@ -352,7 +353,7 @@ function Drawer({
     return () => observer.disconnect();
   }, [rolagem, children]);
   const prenderFoco = (event) => {
-    if (event.key !== "Tab" || !panelRef.current) return;
+    if (!modal || event.key !== "Tab" || !panelRef.current) return;
     const focaveis = [...panelRef.current.querySelectorAll(FOCAVEIS)];
     const primeiro = focaveis[0];
     const ultimo = focaveis[focaveis.length - 1];
@@ -374,16 +375,29 @@ function Drawer({
       visible,
       onHide,
       position: side,
-      blockScroll: true,
+      modal,
+      blockScroll: modal,
+      dismissable: modal,
       pt: {
-        mask: { className: `cr-drawer__mask cr-drawer__mask--${side}` },
+        mask: {
+          className: `cr-drawer__mask cr-drawer__mask--${side}${modal ? "" : " cr-drawer__mask--sem-overlay"}`
+        },
         root: {
           className: classes,
           role: "dialog",
-          "aria-modal": true,
+          "aria-modal": modal || void 0,
           "aria-labelledby": titleId,
           "aria-describedby": subtitle ? subtitleId : void 0,
           onKeyDown: prenderFoco
+        },
+        // No unstyled o Prime não põe classes na transição: o Cristal dá as dele (Drawer.css).
+        // O tipo do Prime exige o addEndListener do react-transition-group, que aqui não se usa.
+        transition: {
+          classNames: {
+            enter: "cr-drawer--enter",
+            enterActive: "cr-drawer--enter-active",
+            exitActive: "cr-drawer--exit-active"
+          }
         }
       },
       content: ({ closeIconRef, hide }) => /* @__PURE__ */ jsxs(
@@ -828,6 +842,105 @@ var Menubar = forwardRef(function Menubar2({
     }
   ) });
 });
+var Tag = forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    Tag$1,
+    {
+      unstyled: true,
+      ref: primeRef,
+      className: classes,
+      icon: icon ? () => /* @__PURE__ */ jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
+      value: children,
+      ...props
+    }
+  );
+});
+var isGroup = (entry) => "items" in entry;
+var MenuPrincipal = forwardRef(
+  function MenuPrincipal2({
+    model,
+    popup = false,
+    "aria-label": ariaLabel = "Menu principal",
+    onShow,
+    onHide,
+    id,
+    className
+  }, ref) {
+    const primeRef = useRef(null);
+    const context = useContext(PrimeReactContext);
+    useImperativeHandle(ref, () => ({
+      toggle: (event) => primeRef.current?.toggle(event),
+      show: (event) => primeRef.current?.show(event),
+      hide: (event) => primeRef.current?.hide(event),
+      getElement: () => primeRef.current?.getElement() ?? null
+    }));
+    const toPrime = (item) => ({
+      id: item.id,
+      // Sem label no Prime: ele viraria o aria-label do item, só com parte do texto visível. O
+      // nome vem do conteúdo: o nome, a descrição e a tag. Os espaços entre eles não aparecem
+      // (estão em flex), mas separam as palavras no nome ("Início Tela inicial", não colado).
+      command: item.command,
+      url: item.url,
+      target: item.target,
+      className: item.className,
+      // O <a> leva o data-pc-section do Prime: o Enter do teclado clica nele (e segue o link).
+      template: () => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          className: "cr-menu-principal__action",
+          "data-pc-section": "action",
+          href: item.url ?? "#",
+          target: item.target,
+          tabIndex: -1,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "cr-menu-principal__icon", "aria-hidden": "true", children: item.icon }),
+            /* @__PURE__ */ jsxs("span", { className: "cr-menu-principal__text", children: [
+              /* @__PURE__ */ jsx("span", { className: "cr-menu-principal__label", children: item.label }),
+              " ",
+              item.description && /* @__PURE__ */ jsx("span", { className: "cr-menu-principal__description", children: item.description })
+            ] }),
+            " ",
+            item.tag && /* @__PURE__ */ jsx(Tag, { className: "cr-menu-principal__tag", variant: "warning", icon: /* @__PURE__ */ jsx(DribbbleLogo, {}), children: item.tag })
+          ]
+        }
+      )
+    });
+    const items = [];
+    let anterior;
+    model.forEach((entry) => {
+      if (anterior && (isGroup(entry) || isGroup(anterior))) items.push({ separator: true });
+      items.push(
+        isGroup(entry) ? { id: entry.id, label: entry.label, items: entry.items.map(toPrime) } : toPrime(entry)
+      );
+      anterior = entry;
+    });
+    const classes = ["cr-menu-principal", popup && "cr-menu-principal--popup", className].filter(Boolean).join(" ");
+    const pt = {
+      menu: { className: "cr-menu-principal__list", "aria-label": ariaLabel },
+      submenuHeader: { className: "cr-menu-principal__group" },
+      separator: { className: "cr-menu-principal__separator" },
+      menuitem: { className: "cr-menu-principal__item" }
+    };
+    const menu = /* @__PURE__ */ jsx(
+      Menu$1,
+      {
+        unstyled: true,
+        ref: primeRef,
+        id,
+        className: classes,
+        model: items,
+        popup,
+        onShow,
+        onHide,
+        pt
+      }
+    );
+    return context ? menu : /* @__PURE__ */ jsx(PrimeReactProvider, { children: menu });
+  }
+);
 function Modal({
   visible,
   onHide,
@@ -1493,23 +1606,7 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
     }
   );
 });
-var Tag = forwardRef(function Tag2({ variant = "default", size = "small", icon, className, children, ...props }, ref) {
-  const primeRef = useRef(null);
-  useImperativeHandle(ref, () => primeRef.current?.getElement());
-  const classes = ["cr-tag", `cr-tag--${variant}`, `cr-tag--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    Tag$1,
-    {
-      unstyled: true,
-      ref: primeRef,
-      className: classes,
-      icon: icon ? () => /* @__PURE__ */ jsx("span", { className: "cr-tag__icon", "aria-hidden": "true", children: icon }) : void 0,
-      value: children,
-      ...props
-    }
-  );
-});
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map