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

package/dist/index.d.cts

@@ -149,6 +149,11 @@ type DrawerSide = 'right' | 'left';
  * corpo rola).
  */
 type DrawerBehavior = 'full' | 'fixed';
+/**
+ * Largura da gaveta. O Figma só tem a de 340px (small); medium (480px), large (720px) e full (a
+ * tela toda) são do Cristal, nas faixas usuais de drawer.
+ */
+type DrawerSize = 'small' | 'medium' | 'large' | 'full';
 interface DrawerProps {
     visible: boolean;
     /** Pedido para fechar (X, Esc ou clique no overlay). */
@@ -161,6 +166,8 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /** Padrão: small (340px, a do Figma). */
+    size?: DrawerSize;
     /**
      * 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.
@@ -176,7 +183,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
@@ -421,6 +428,45 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Type no Figma: o estilo das abas. Primary tem o ícone em círculo e o fundo azul na aba ativa;
+ * Secondary é só o texto, com o sublinhado na ativa.
+ */
+type PageHeaderVariant = 'primary' | 'secondary';
+/** Uma aba (.Page Header Tab Item ou .Page Header Tab Secondary Item no Figma). */
+interface PageHeaderTab {
+    label: string;
+    /** Ícone de 16px. No primary fica no círculo de 32px; no secondary é opcional. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Título da página (Page Title no Figma). */
+    title: string;
+    /** Padrão: primary. */
+    variant?: PageHeaderVariant;
+    /** Mostra o botão de voltar antes do título (Show Back Button no Figma). */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Texto da Tag depois do título (Show Tag no Figma). */
+    tag?: ReactNode;
+    /** Segment Control das ferramentas (Show Segment Control no Figma): um `<SegmentControl>`. */
+    segmentControl?: ReactNode;
+    /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
+    actions?: ReactNode;
+    /** Mostra o botão de expandir, o último das ferramentas. */
+    onExpand?: () => void;
+    expandLabel?: string;
+    /** Abas abaixo do título (Show Tabs no Figma). */
+    tabs?: PageHeaderTab[];
+    /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
+    activeTab?: number;
+    onTabChange?: (index: number) => void;
+    /** Nome das abas para o leitor de tela. Padrão: o título. */
+    tabsLabel?: string;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLDivElement>>;
+
 type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
 declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -606,5 +652,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, 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 };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, PageHeader, 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, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, 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

@@ -149,6 +149,11 @@ type DrawerSide = 'right' | 'left';
  * corpo rola).
  */
 type DrawerBehavior = 'full' | 'fixed';
+/**
+ * Largura da gaveta. O Figma só tem a de 340px (small); medium (480px), large (720px) e full (a
+ * tela toda) são do Cristal, nas faixas usuais de drawer.
+ */
+type DrawerSize = 'small' | 'medium' | 'large' | 'full';
 interface DrawerProps {
     visible: boolean;
     /** Pedido para fechar (X, Esc ou clique no overlay). */
@@ -161,6 +166,8 @@ interface DrawerProps {
     side?: DrawerSide;
     /** Padrão: full. */
     behavior?: DrawerBehavior;
+    /** Padrão: small (340px, a do Figma). */
+    size?: DrawerSize;
     /**
      * 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.
@@ -176,7 +183,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
 
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
@@ -421,6 +428,45 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Type no Figma: o estilo das abas. Primary tem o ícone em círculo e o fundo azul na aba ativa;
+ * Secondary é só o texto, com o sublinhado na ativa.
+ */
+type PageHeaderVariant = 'primary' | 'secondary';
+/** Uma aba (.Page Header Tab Item ou .Page Header Tab Secondary Item no Figma). */
+interface PageHeaderTab {
+    label: string;
+    /** Ícone de 16px. No primary fica no círculo de 32px; no secondary é opcional. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Título da página (Page Title no Figma). */
+    title: string;
+    /** Padrão: primary. */
+    variant?: PageHeaderVariant;
+    /** Mostra o botão de voltar antes do título (Show Back Button no Figma). */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Texto da Tag depois do título (Show Tag no Figma). */
+    tag?: ReactNode;
+    /** Segment Control das ferramentas (Show Segment Control no Figma): um `<SegmentControl>`. */
+    segmentControl?: ReactNode;
+    /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
+    actions?: ReactNode;
+    /** Mostra o botão de expandir, o último das ferramentas. */
+    onExpand?: () => void;
+    expandLabel?: string;
+    /** Abas abaixo do título (Show Tabs no Figma). */
+    tabs?: PageHeaderTab[];
+    /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
+    activeTab?: number;
+    onTabChange?: (index: number) => void;
+    /** Nome das abas para o leitor de tela. Padrão: o título. */
+    tabsLabel?: string;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLDivElement>>;
+
 type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
 declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -606,5 +652,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, 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 };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, PageHeader, 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, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, 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, DribbbleLogo, ArrowLeft, Question } from '@phosphor-icons/react';
+import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, 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';
@@ -18,6 +18,7 @@ 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 { TabMenu } from 'primereact/tabmenu';
 import { Panel as Panel$1 } from 'primereact/panel';
 import { RadioButton } from 'primereact/radiobutton';
 import { ScrollPanel as ScrollPanel$1 } from 'primereact/scrollpanel';
@@ -319,6 +320,7 @@ function Drawer({
   subtitle,
   side = "right",
   behavior = "full",
+  size = "small",
   modal = true,
   onBack,
   backLabel = "Voltar",
@@ -366,7 +368,13 @@ function Drawer({
       primeiro.focus();
     }
   };
-  const classes = ["cr-drawer", `cr-drawer--${side}`, `cr-drawer--${behavior}`, className].filter(Boolean).join(" ");
+  const classes = [
+    "cr-drawer",
+    `cr-drawer--${side}`,
+    `cr-drawer--${behavior}`,
+    `cr-drawer--size-${size}`,
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     Sidebar,
     {
@@ -1210,6 +1218,105 @@ var MultiSelect = forwardRef(function MultiSelect2({
     ] })
   ] });
 });
+var PageHeader = forwardRef(function PageHeader2({
+  title,
+  variant = "primary",
+  onBack,
+  backLabel = "Voltar",
+  tag,
+  segmentControl,
+  actions,
+  onExpand,
+  expandLabel = "Expandir",
+  tabs,
+  activeTab,
+  onTabChange,
+  tabsLabel,
+  className,
+  ...props
+}, ref) {
+  const [interna, setInterna] = useState(0);
+  const ativa = activeTab ?? interna;
+  const tools = segmentControl || actions;
+  const tabTemplate = (tab) => (
+    // O TabMenu também passa o index da aba nas opções, além do que o tipo do MenuItem declara.
+    function TabContent(item, options) {
+      const { element, index } = options;
+      const active = index === ativa;
+      return cloneElement(
+        element,
+        { "aria-current": active ? "page" : void 0 },
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          (variant === "primary" || tab.icon) && /* @__PURE__ */ jsx("span", { className: "cr-page-header__tab-icon", "aria-hidden": "true", children: tab.icon }),
+          /* @__PURE__ */ jsx("span", { className: "cr-page-header__tab-label", children: item.label })
+        ] })
+      );
+    }
+  );
+  const classes = ["cr-page-header", `cr-page-header--${variant}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref, className: classes, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `cr-page-header__title-group${tools ? " cr-page-header__title-group--tools" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "cr-page-header__title-text", children: [
+            onBack && /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "tertiary",
+                size: "small",
+                icon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+                "aria-label": backLabel,
+                onClick: onBack
+              }
+            ),
+            /* @__PURE__ */ jsx("h1", { className: "cr-page-header__title", children: title }),
+            tag && /* @__PURE__ */ jsx(Tag, { className: "cr-page-header__tag", children: tag })
+          ] }),
+          tools && /* @__PURE__ */ jsxs("div", { className: "cr-page-header__tools", children: [
+            segmentControl && /* @__PURE__ */ jsx("div", { className: "cr-page-header__segment", children: segmentControl }),
+            actions && /* @__PURE__ */ jsx("div", { className: "cr-page-header__actions", children: actions })
+          ] }),
+          onExpand && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "cr-page-header__expand",
+              variant: "tertiary",
+              size: "medium",
+              icon: /* @__PURE__ */ jsx(ArrowsOutSimple, {}),
+              "aria-label": expandLabel,
+              onClick: onExpand
+            }
+          )
+        ]
+      }
+    ),
+    tabs && tabs.length > 0 && /* @__PURE__ */ jsx(
+      TabMenu,
+      {
+        unstyled: true,
+        model: tabs.map((tab) => ({
+          label: tab.label,
+          disabled: tab.disabled,
+          template: tabTemplate(tab)
+        })),
+        activeIndex: ativa,
+        onTabChange: (event) => {
+          setInterna(event.index);
+          onTabChange?.(event.index);
+        },
+        pt: {
+          root: { className: "cr-page-header__tabs" },
+          menu: { className: "cr-page-header__tab-list", "aria-label": tabsLabel ?? title },
+          menuitem: { className: "cr-page-header__tab-item" },
+          action: { className: "cr-page-header__tab" },
+          inkbar: { className: "cr-page-header__inkbar" }
+        }
+      }
+    )
+  ] });
+});
 var Panel = forwardRef(function Panel2({ className, style, children, ...props }, ref) {
   const primeRef = useRef(null);
   useImperativeHandle(ref, () => primeRef.current?.getElement());
@@ -1607,6 +1714,6 @@ var Tabs = forwardRef(function Tabs2({ activeIndex, onTabChange, children, id, c
   );
 });
 
-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 { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Modal, MultiSelect, PageHeader, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map