@vector-business-services/cristal-ds-web 0.10.0 → 0.11.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -8,6 +8,36 @@ import { RadioButtonChangeEvent } from 'primereact/radiobutton';
 import { InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ToastProps as ToastProps$1 } from 'primereact/toast';
 
+/** Um item (.Accordion Item no Figma) e o conteúdo dele. */
+interface AccordionTabProps {
+    /** Título (Accordion Item Title no Figma). Com headerContent, não aparece. */
+    header: string;
+    /** Texto abaixo do título (Show Description no Figma). */
+    description?: string;
+    /** Cabeçalho livre no lugar do título e da descrição (Type=Custom no Figma). */
+    headerContent?: ReactNode;
+    disabled?: boolean;
+    /** Conteúdo do item aberto (Accordion Item Body no Figma). */
+    children?: ReactNode;
+}
+/** Só descreve o item: quem desenha é o Accordion. */
+declare function AccordionTab(_props: AccordionTabProps): null;
+interface AccordionProps {
+    /** Mais de um item aberto ao mesmo tempo. */
+    multiple?: boolean;
+    /**
+     * Item(ns) aberto(s) (controlado): o índice, ou a lista com `multiple`; null fecha todos. Sem
+     * ele, o Accordion controla sozinho e começa com o primeiro aberto, como nos exemplos do Figma.
+     */
+    activeIndex?: number | number[] | null;
+    onTabChange?: (activeIndex: number | number[] | null) => void;
+    /** Os itens, como `<AccordionTab>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -727,5 +757,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, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, 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, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
+export type { AccordionProps, AccordionTabProps, 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, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -8,6 +8,36 @@ import { RadioButtonChangeEvent } from 'primereact/radiobutton';
 import { InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ToastProps as ToastProps$1 } from 'primereact/toast';
 
+/** Um item (.Accordion Item no Figma) e o conteúdo dele. */
+interface AccordionTabProps {
+    /** Título (Accordion Item Title no Figma). Com headerContent, não aparece. */
+    header: string;
+    /** Texto abaixo do título (Show Description no Figma). */
+    description?: string;
+    /** Cabeçalho livre no lugar do título e da descrição (Type=Custom no Figma). */
+    headerContent?: ReactNode;
+    disabled?: boolean;
+    /** Conteúdo do item aberto (Accordion Item Body no Figma). */
+    children?: ReactNode;
+}
+/** Só descreve o item: quem desenha é o Accordion. */
+declare function AccordionTab(_props: AccordionTabProps): null;
+interface AccordionProps {
+    /** Mais de um item aberto ao mesmo tempo. */
+    multiple?: boolean;
+    /**
+     * Item(ns) aberto(s) (controlado): o índice, ou a lista com `multiple`; null fecha todos. Sem
+     * ele, o Accordion controla sozinho e começa com o primeiro aberto, como nos exemplos do Figma.
+     */
+    activeIndex?: number | number[] | null;
+    onTabChange?: (activeIndex: number | number[] | null) => void;
+    /** Os itens, como `<AccordionTab>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -727,5 +757,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, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, 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, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
+export type { AccordionProps, AccordionTabProps, 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, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.js

@@ -1,7 +1,8 @@
-import { forwardRef, useId, useRef, useImperativeHandle, useCallback, useEffect, useContext, useState, Children, isValidElement, cloneElement } from 'react';
-import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
+import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, useId, useCallback, useEffect, useContext, cloneElement } from 'react';
+import { Accordion as Accordion$1, AccordionTab as AccordionTab$1 } from 'primereact/accordion';
 import { WarningCircle, Info, Check, CircleNotch, CaretDown, MagnifyingGlass, ArrowLeft, ArrowsOutSimple, CaretUp, X, List, DribbbleLogo, SealWarning, XCircle, CheckCircle, Warning, CaretDoubleRight, CaretRight, CaretLeft, CaretDoubleLeft, Question } from '@phosphor-icons/react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AutoComplete as AutoComplete$1 } from 'primereact/autocomplete';
 import { Badge as Badge$1 } from 'primereact/badge';
 import { Button as Button$1 } from 'primereact/button';
 import { Card as Card$1 } from 'primereact/card';
@@ -30,7 +31,60 @@ import { InputSwitch } from 'primereact/inputswitch';
 import { TabView, TabPanel as TabPanel$1 } from 'primereact/tabview';
 import { Toast as Toast$1 } from 'primereact/toast';
 
-// src/components/AutoComplete/AutoComplete.tsx
+// src/components/Accordion/Accordion.tsx
+function AccordionTab(_props) {
+  return null;
+}
+var seta = (icon) => /* @__PURE__ */ jsx("span", { className: "cr-accordion__toggle", "aria-hidden": "true", children: icon });
+var Accordion = forwardRef(function Accordion2({ multiple = false, activeIndex, onTabChange, children, id, className }, ref) {
+  const primeRef = useRef(null);
+  useImperativeHandle(ref, () => primeRef.current?.getElement());
+  const [interno, setInterno] = useState(multiple ? [0] : 0);
+  const abertos = activeIndex === void 0 ? interno : activeIndex;
+  const tabs = Children.toArray(children).filter(
+    (child) => isValidElement(child)
+  );
+  return /* @__PURE__ */ jsx(
+    Accordion$1,
+    {
+      ...{ unstyled: true },
+      ref: primeRef,
+      id,
+      multiple,
+      activeIndex: abertos,
+      onTabChange: (event) => {
+        const index = event.index;
+        setInterno(index);
+        onTabChange?.(index);
+      },
+      expandIcon: seta(/* @__PURE__ */ jsx(CaretDown, {})),
+      collapseIcon: seta(/* @__PURE__ */ jsx(CaretUp, {})),
+      pt: { root: { className: ["cr-accordion", className].filter(Boolean).join(" ") } },
+      children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
+        AccordionTab$1,
+        {
+          header: tab.props.header,
+          disabled: tab.props.disabled,
+          headerTemplate: tab.props.headerContent ? /* @__PURE__ */ jsx("span", { className: "cr-accordion__custom", children: tab.props.headerContent }) : /* @__PURE__ */ jsxs("span", { className: "cr-accordion__texts", children: [
+            /* @__PURE__ */ jsx("span", { className: "cr-accordion__title", children: tab.props.header }),
+            tab.props.description && /* @__PURE__ */ jsx("span", { className: "cr-accordion__description", children: tab.props.description })
+          ] }),
+          pt: {
+            root: { className: "cr-accordion__item" },
+            header: { className: "cr-accordion__header" },
+            headerAction: { className: "cr-accordion__action" },
+            toggleableContent: { className: "cr-accordion__region" },
+            content: { className: "cr-accordion__content" },
+            // Sem animação: o Prime manteria o conteúdo na tela pelos 450ms da saída dele.
+            transition: { timeout: 0 }
+          },
+          children: tab.props.children
+        },
+        tab.key ?? index
+      ))
+    }
+  );
+});
 var AutoComplete = forwardRef(function AutoComplete2({
   variant = "outline",
   size = "large",
@@ -1471,7 +1525,7 @@ var Select = forwardRef(function Select2({
     ] })
   ] });
 });
-var seta = (label, icon) => (options) => /* @__PURE__ */ jsx(
+var seta2 = (label, icon) => (options) => /* @__PURE__ */ jsx(
   "button",
   {
     type: "button",
@@ -1517,10 +1571,10 @@ var Paginator = forwardRef(function Paginator2({
       },
       template: {
         layout: "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
-        FirstPageLink: seta("Primeira p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleLeft, { "aria-hidden": "true" })),
-        PrevPageLink: seta("P\xE1gina anterior", /* @__PURE__ */ jsx(CaretLeft, { "aria-hidden": "true" })),
-        NextPageLink: seta("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsx(CaretRight, { "aria-hidden": "true" })),
-        LastPageLink: seta("\xDAltima p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleRight, { "aria-hidden": "true" })),
+        FirstPageLink: seta2("Primeira p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleLeft, { "aria-hidden": "true" })),
+        PrevPageLink: seta2("P\xE1gina anterior", /* @__PURE__ */ jsx(CaretLeft, { "aria-hidden": "true" })),
+        NextPageLink: seta2("Pr\xF3xima p\xE1gina", /* @__PURE__ */ jsx(CaretRight, { "aria-hidden": "true" })),
+        LastPageLink: seta2("\xDAltima p\xE1gina", /* @__PURE__ */ jsx(CaretDoubleRight, { "aria-hidden": "true" })),
         PageLinks: (options) => {
           const ativa = options.page === options.currentPage;
           return /* @__PURE__ */ jsx(
@@ -1916,6 +1970,6 @@ var Toast = forwardRef(function Toast2({ position = "top-right", closeLabel = "F
   );
 });
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map