@ama-pt/agora-design-system 4.0.0 → 4.0.1

package/artifacts/dist/types/components/table/table-pagination.d.ts

@@ -0,0 +1,50 @@
+import { ComponentProps, FC } from 'react';
+import './table-pagination.css';
+export interface TablePaginationProps extends ComponentProps<'div'> {
+    /**
+     * Defines the label for the items per page
+     */
+    itemsPerPageLabel: string;
+    /**
+     * Defines the page size
+     */
+    itemsPerPage: number;
+    /**
+     * Total items of the table
+     */
+    totalItems: number;
+    /**
+     * Array of values to be displayed in the dropdown
+     */
+    availablePageSizes: number[];
+    /**
+     * Current page of the table
+     */
+    currentPage: number;
+    /**
+     * Aria label for the button
+     */
+    buttonDropdownAriaLabel: string;
+    /**
+     * Aria label for the dropdown list
+     */
+    dropdownListAriaLabel: string;
+    /**
+     * Aria label for the previous button
+     */
+    prevButtonAriaLabel?: string;
+    /**
+     * Aria label for the next button
+     */
+    nextButtonAriaLabel?: string;
+    /**
+     * Callback to be called when the page changes
+     */
+    onPageChange?: (newPage: number) => void;
+    /**
+     * Callback to be called when the dropdown changes
+     */
+    onPageSizeChange?: (newPageSize: number) => void;
+}
+declare const TablePagination: FC<TablePaginationProps>;
+export { TablePagination };

package/artifacts/dist/types/components/table/table-row.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes, ReactNode } from 'react';
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    children: ReactNode;
+}
+declare const TableRow: FC<TableRowProps>;
+export { TableRow };

package/artifacts/dist/types/components/table/table-selection-cell.d.ts

@@ -0,0 +1,23 @@
+import { FC, HTMLAttributes } from 'react';
+export interface TableSelectionCellProps extends Omit<HTMLAttributes<HTMLTableCellElement>, 'onChange'> {
+    /**
+     * Whether this row's checkbox is checked.
+     */
+    checked: boolean;
+    /**
+     * Callback fired when the row checkbox changes.
+     * Receives `true` when checked, `false` when unchecked.
+     */
+    onChange: (checked: boolean) => void;
+    /**
+     * Space-separated list of IDs of elements whose text content provides the
+     * accessible name for this row's checkbox.
+     * Should reference cells in the same row that contain meaningful content
+     * (e.g. name, identifier).
+     *
+     * Falls back to `aria-label="Selecionar linha"` when not provided.
+     */
+    checkboxAriaLabelledBy?: string;
+}
+declare const TableSelectionCell: FC<TableSelectionCellProps>;
+export { TableSelectionCell };

package/artifacts/dist/types/components/table/table-selection-header-cell.d.ts

@@ -0,0 +1,18 @@
+import { FC, HTMLAttributes } from 'react';
+import { RowSelectionState } from './models/row-selection-state.type';
+export interface TableSelectionHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * The current selection state of all rows.
+     * - 'none': no rows selected
+     * - 'indeterminate': some rows selected
+     * - 'all': all rows selected
+     */
+    selectionState: RowSelectionState;
+    /**
+     * Callback fired when the select-all checkbox changes.
+     * Receives `true` when the user intends to select all rows, `false` when deselecting all.
+     */
+    onSelectionChange: (checked: boolean) => void;
+}
+declare const TableSelectionHeaderCell: FC<TableSelectionHeaderCellProps>;
+export { TableSelectionHeaderCell };

package/artifacts/dist/types/components/table/table.d.ts

@@ -0,0 +1,36 @@
+import { ComponentProps, FC, ReactElement } from 'react';
+import { TableLayout } from './models/table-layout.type';
+import { TableBodyProps } from './table-body';
+import { TableCaptionProps } from './table-caption';
+import { TableFooterProps } from './table-footer';
+import { TableHeaderProps } from './table-header';
+import { TablePaginationProps } from './table-pagination';
+import './table.css';
+export interface TableProps extends ComponentProps<'table'> {
+    /**
+     * Table children content
+     */
+    children?: ReactElement<TableCaptionProps> | ReactElement<TableHeaderProps> | ReactElement<TableBodyProps> | ReactElement<TableFooterProps> | Array<ReactElement<TableCaptionProps> | ReactElement<TableHeaderProps> | ReactElement<TableBodyProps> | ReactElement<TableFooterProps>>;
+    /**
+     * Define layout for mobile breakpoint
+     */
+    mobileLayout?: TableLayout;
+    /**
+     * Define layout for tablet breakpoint
+     */
+    tabletLayout?: TableLayout;
+    /**
+     * Define layout for desktop breakpoint
+     */
+    desktopLayout?: TableLayout;
+    /**
+     * Configurations used for pagination
+     */
+    paginationProps?: TablePaginationProps;
+    /**
+     * Alternative text describing the current sort applied.
+     */
+    sortDescription?: string;
+}
+declare const Table: FC<TableProps>;
+export { Table };

package/artifacts/dist/types/components/tabs/desktop/tabs-desktop.d.ts

@@ -0,0 +1,20 @@
+import { BooleanProp } from '../../../models';
+import { ComponentPropsWithoutRef, FC, ReactElement, RefObject } from 'react';
+import { TabBodyProps } from '../tab-body';
+import { TabHeaderProps } from '../tab-header';
+import { TabCurrentType } from '../tabs';
+import './tabs-desktop.css';
+export interface TabsDesktopProps extends ComponentPropsWithoutRef<'div'> {
+    fullWidth: BooleanProp;
+    vertically?: BooleanProp;
+    tabListRef: RefObject<HTMLDivElement | null>;
+    tabPanelRef: RefObject<HTMLDivElement | null>;
+    activeTab: number;
+    activateTab: (index: number) => void;
+    currentType: TabCurrentType;
+    tabPanelClassName: string;
+    tabsHeaderData: Array<ReactElement<TabHeaderProps>>;
+    tabsBodyData: Array<ReactElement<TabBodyProps>>;
+    isDesktop: boolean;
+}
+export declare const TabsDesktop: FC<TabsDesktopProps>;

package/artifacts/dist/types/components/tabs/index.d.ts

@@ -0,0 +1,8 @@
+export { TabBody } from './tab-body';
+export { TabHeader } from './tab-header';
+export { Tab } from './tab';
+export { Tabs } from './tabs';
+export type { TabProps } from './tab';
+export type { TabsProps, TabCurrentType } from './tabs';
+export type { TabHeaderProps } from './tab-header';
+export type { TabBodyProps } from './tab-body';

package/artifacts/dist/types/components/tabs/mobile/tabs-mobile.d.ts

@@ -0,0 +1,18 @@
+import { BooleanProp } from '../../../models';
+import { ComponentPropsWithoutRef, FC, ReactElement, RefObject } from 'react';
+import { TabBodyProps } from '../tab-body';
+import { TabHeaderProps } from '../tab-header';
+import { TabCurrentType } from '../tabs';
+import './tabs-mobile.css';
+interface TabsMobileProps extends ComponentPropsWithoutRef<'div'> {
+    fullWidth: BooleanProp;
+    tabListRef: RefObject<HTMLDivElement | null>;
+    activeTab: number;
+    activateTab: (index: number) => void;
+    currentType: TabCurrentType;
+    tabsHeaderData: Array<ReactElement<TabHeaderProps>>;
+    tabsBodyData: Array<ReactElement<TabBodyProps>>;
+    isTabletOrMobile: boolean;
+}
+export declare const TabsMobile: FC<TabsMobileProps>;
+export {};

package/artifacts/dist/types/components/tabs/tab-body.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { BooleanProp } from '../../models';
+export interface TabBodyProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Tab body content.
+     */
+    children?: ReactNode;
+    /**
+     * Flag that sets the tab index of the tab body container accordingly to the following accessibility rule: When the tab panel does not contain any focusable elements or the first element with content is not focusable, the tabpanel should set tabindex="0" to include it in the tab sequence of the page.
+     */
+    focusableContent?: BooleanProp;
+}
+export declare const TabBody: FC<TabBodyProps>;

package/artifacts/dist/types/components/tabs/tab-header.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+export interface TabHeaderProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Tab header content.
+     */
+    children?: ReactNode;
+}
+export declare const TabHeader: FC<TabHeaderProps>;

package/artifacts/dist/types/components/tabs/tab.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { BooleanProp } from '../../models';
+import { TabBodyProps } from './tab-body';
+import { TabHeaderProps } from './tab-header';
+export interface TabProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Tab content structure that contains a header and a body.
+     */
+    children?: Array<ReactElement<TabHeaderProps> | ReactElement<TabBodyProps>>;
+    /**
+     * Set tab as the active tab.
+     */
+    active?: BooleanProp;
+}
+export declare const Tab: FC<TabProps>;

package/artifacts/dist/types/components/tabs/tabs.d.ts

@@ -0,0 +1,31 @@
+import { BooleanProp } from '../../models';
+import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { TabProps } from './tab';
+export type TabCurrentType = 'neutral' | 'primary' | 'secondary';
+export interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Collection of tabs.
+     */
+    children: ReactElement<TabProps> | Array<ReactElement<TabProps>>;
+    /**
+     * Defines if tab headers should be rendered as full width tabs.
+     */
+    fullWidth?: BooleanProp;
+    /**
+     * Automatic activation.
+     */
+    automaticActivation?: BooleanProp;
+    /**
+     * Tab vertical orientation
+     */
+    vertically?: BooleanProp;
+    /**
+     * Tab current style type
+     */
+    currentType?: TabCurrentType;
+    /**
+     * Tab activation event.
+     */
+    onTabActivation?: (index: number) => void;
+}
+export declare const Tabs: FC<TabsProps>;

package/artifacts/dist/types/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from './tag';
+export type { TagProps } from './tag';

package/artifacts/dist/types/components/tag/tag.d.ts

@@ -0,0 +1,27 @@
+import { BooleanProp } from '../../models';
+import { ComponentProps, FC, ReactNode } from 'react';
+import './tag.css';
+export interface TagProps extends ComponentProps<'button'> {
+    /**
+     * Defines if the button uses an icon.
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Defines the name of the icon to use.
+     */
+    icon?: string;
+    /**
+     * Defines the name of the icon to be displayed on mouse hover. If none specified, it will the appropriate variant of the icon.
+     */
+    iconHover?: string;
+    /**
+     * Children content.
+     */
+    children?: ReactNode;
+    /**
+     * Add a darkMode to the button tag.
+     */
+    darkMode?: BooleanProp;
+}
+declare const Tag: FC<TagProps>;
+export { Tag };

package/artifacts/dist/types/components/timelines/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shared/timeline-event';
+export * from './timeline-horizontal';
+export * from './timeline-vertical';

package/artifacts/dist/types/components/timelines/shared/timeline-event/index.d.ts

@@ -0,0 +1,2 @@
+export { TimelineEvent } from './timeline-event';
+export type { TimelineEventProps } from './timeline-event';

package/artifacts/dist/types/components/timelines/shared/timeline-event/timeline-event.d.ts

@@ -0,0 +1,42 @@
+import { BooleanProp } from '../../../../models';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import './timeline-event.css';
+export interface TimelineEventProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Hide the label
+     */
+    hideLabel?: BooleanProp;
+    /**
+     * Label for the event
+     */
+    label?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Is the event active
+     */
+    active?: boolean;
+    /**
+     * Has an icon
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Icon name
+     */
+    icon?: string;
+    /**
+     * Icon alt text
+     */
+    altIcon?: string;
+    /**
+     * Determines if the timeline event is interactive or not
+     */
+    interactive?: BooleanProp;
+    /**
+     * Children
+     */
+    children: ReactNode;
+}
+export declare const TimelineEvent: FC<TimelineEventProps>;

package/artifacts/dist/types/components/timelines/shared/timeline-event-vertical/index.d.ts

@@ -0,0 +1 @@
+export { TimelineEventVertical } from './timeline-event-vertical';

package/artifacts/dist/types/components/timelines/shared/timeline-event-vertical/timeline-event-vertical.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TimelineEventProps } from '../timeline-event/timeline-event';
+import './timeline-event-vertical.css';
+export declare const TimelineEventVertical: FC<TimelineEventProps>;

package/artifacts/dist/types/components/timelines/timeline-horizontal/index.d.ts

@@ -0,0 +1,2 @@
+export { TimelineHorizontal } from './timeline-horizontal';
+export type { TimelineHorizontalProps } from './timeline-horizontal';

package/artifacts/dist/types/components/timelines/timeline-horizontal/timeline-horizontal.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { BooleanProp } from '../../../models';
+import { TimelineEventProps } from '../shared/timeline-event/timeline-event';
+import './timeline-horizontal.css';
+export interface TimelineHorizontalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Label for the next button
+     **/
+    nextLabel: string;
+    /**
+     * Label for the previous button
+     **/
+    previousLabel: string;
+    /**
+     * Determines if the timeline is interactive or not
+     **/
+    interactive?: BooleanProp;
+    /**
+     * Timeline events
+     **/
+    children: ReactElement<TimelineEventProps> | Array<ReactElement<TimelineEventProps>>;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
+}
+export declare const TimelineHorizontal: FC<TimelineHorizontalProps>;

package/artifacts/dist/types/components/timelines/timeline-vertical/index.d.ts

@@ -0,0 +1,2 @@
+export { TimelineVertical } from './timeline-vertical';
+export type { TimelineVerticalProps } from './timeline-vertical';

package/artifacts/dist/types/components/timelines/timeline-vertical/timeline-vertical.d.ts

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, FC, ReactElement } from 'react';
+import { BooleanProp } from '../../../models';
+import { TimelineEventProps } from '../shared/timeline-event/timeline-event';
+import './timeline-vertical.css';
+export interface TimelineVerticalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Hide the labels
+     */
+    hideLabels: BooleanProp;
+    /**
+     * Timeline events
+     */
+    children: ReactElement<TimelineEventProps> | Array<ReactElement<TimelineEventProps>>;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
+}
+export declare const TimelineVertical: FC<TimelineVerticalProps>;

package/artifacts/dist/types/components/toasts/index.d.ts

@@ -0,0 +1,7 @@
+export { Toast } from './toast';
+export type { ToastProps, ToastType } from './toast';
+export { useToast } from './use-toast';
+export { ToastProvider } from './toast-provider';
+export type { ToastPositions, ToastProviderProps } from './toast-provider';
+export { ToastContext, useToastContext } from './toast-context';
+export type { ToastContextProps } from './toast-context';

package/artifacts/dist/types/components/toasts/toast-context.d.ts

@@ -0,0 +1,9 @@
+import { ToastProps } from './toast';
+import './toast.css';
+export interface ToastContextProps {
+    showToast: (data: ToastProps, duration?: number) => void;
+    removeToast: (data: ToastProps) => void;
+}
+declare const ToastContext: import("react").Context<ToastContextProps>;
+declare const useToastContext: () => ToastContextProps;
+export { ToastContext, useToastContext };

package/artifacts/dist/types/components/toasts/toast-provider.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import './toast.css';
+export type ToastPositions = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface ToastProviderProps {
+    children?: ReactNode;
+    position?: ToastPositions;
+}
+declare const ToastProvider: FC<ToastProviderProps>;
+export { ToastProvider };

package/artifacts/dist/types/components/toasts/toast.d.ts

@@ -0,0 +1,48 @@
+import { BooleanProp } from '../../models';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { AnchorProps } from '../anchor';
+import './toast.css';
+export type ToastType = 'success' | 'failure' | 'warning' | 'info';
+export interface ToastProps extends Omit<ComponentPropsWithoutRef<'div'>, 'id' | 'title'> {
+    /**
+     * The id of the toast
+     */
+    id: number | string;
+    /**
+     * Title of the toast
+     */
+    title?: ReactNode;
+    /**
+     * Description of the toast
+     */
+    description: ReactNode;
+    /**
+     * Pill text to apply to the pill component
+     */
+    pillText?: string;
+    /**
+     * Status text to apply to the status component
+     */
+    statusText?: string;
+    /**
+     * Anchor props to apply to the anchor component within the toast
+     */
+    anchor?: AnchorProps;
+    /**
+     * Type variant of the toast
+     */
+    type: ToastType;
+    /**
+     * Alternative text to apply to the toast close button
+     */
+    closeLabel: string;
+    /**
+     * Whether to show the close button on the toast or not
+     */
+    closeButton?: BooleanProp;
+    /**
+     * Callback that's invoked when the toast is dismissed
+     */
+    onDismiss?: () => void;
+}
+export declare const Toast: FC<ToastProps>;

package/artifacts/dist/types/components/toasts/use-toast.d.ts

@@ -0,0 +1,7 @@
+import { ToastProps } from './toast';
+declare const useToast: () => {
+    toasts: ToastProps[];
+    showToast: (toast: ToastProps, duration?: number) => void;
+    removeToast: (toast: ToastProps) => void;
+};
+export { useToast };

package/artifacts/dist/types/components/toggle/index.d.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './toggle';
+export type { ToggleProps, ToggleAppearance, ToggleVariant } from './toggle';

package/artifacts/dist/types/components/toggle/toggle.d.ts

@@ -0,0 +1,72 @@
+import { BooleanProp } from '../../models';
+import { ComponentProps, FC } from 'react';
+import './toggle.css';
+/**
+ * The available toggle button appearances. Defines the button layout shape,
+ */
+export type ToggleAppearance = 'button' | 'icon' | 'text';
+/**
+ * The available variants of the toggle button. This variants will define the background and border color of the button.
+ */
+export type ToggleVariant = 'primary' | 'neutral';
+export interface ToggleProps extends ComponentProps<'input'> {
+    /**
+     * Defines if the toggle takes the container full width.
+     */
+    fullWidth?: BooleanProp;
+    /**
+     * Defines if the toggle renders in dark mode.
+     */
+    darkMode?: BooleanProp;
+    /**
+     * The button appearance. Define the button Shape.
+     */
+    appearance?: ToggleAppearance;
+    /**
+     * The variant of the button. This variants will define the background and border color of the given Button.
+     */
+    variant?: ToggleVariant;
+    /**
+     * Data attributes.
+     * Allow when implemented interface add data-* attribute.
+     */
+    [dataAttribute: `data-${string}`]: string;
+    /**
+     * Defines if the button uses an icon.
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Defines if children content it is to be rendered.
+     */
+    iconOnly?: BooleanProp;
+    /**
+     * Defines the name of the leading icon to use.
+     */
+    leadingIcon?: string;
+    /**
+     * Defines the name of the leading icon to be displayed on mouse hover. If none specified, it will the appropriate variant of the icon.
+     */
+    leadingIconHover?: string;
+    /**
+     * Defines the name of the trailing icon to use.
+     */
+    trailingIcon?: string;
+    /**
+     * Defines the name of the trailing icon to be displayed on mouse hover. If none specified, it will the appropriate variant of the icon.
+     */
+    trailingIconHover?: string;
+    /**
+     * Show or hide the pill
+     */
+    hasPill?: boolean;
+    /**
+     * Sets the pill value
+     */
+    pillValue?: number;
+    /**
+     * Sets the pill aria-label
+     */
+    pillAriaLabel?: string;
+}
+declare const Toggle: FC<ToggleProps>;
+export { Toggle };

package/artifacts/dist/types/components/toggle-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup } from './toggle-group';
+export type { ToggleGroupProps, ToggleGroupElement, ToggleGroupOrientation } from './toggle-group';

package/artifacts/dist/types/components/toggle-group/toggle-group.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentProps, FC, ReactElement, Ref } from 'react';
+import { ToggleAppearance, ToggleProps, ToggleVariant } from '../../components/toggle';
+import { BooleanProp } from '../../models';
+import './toggle-group.css';
+export type ToggleGroupOrientation = 'horizontal' | 'vertical';
+export interface ToggleGroupElement extends HTMLDivElement {
+    /**
+     *  Current checked values of the toggle group.
+     */
+    value: string[];
+}
+export interface ToggleGroupProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * Defines the appearance of the children toggles.
+     */
+    appearance?: ToggleAppearance;
+    /**
+     * Defines if the children toggles are full width.
+     */
+    fullWidth?: BooleanProp;
+    /**
+     * Toggles the dark mode.
+     */
+    darkMode?: BooleanProp;
+    /**
+     * Defines the variant of the children toggles.
+     */
+    variant?: ToggleVariant;
+    /**
+     * List of toggle components to aggregate.
+     */
+    children?: ReactElement<ToggleProps> | ReactElement<ToggleProps>[];
+    /**
+     * Defines the orientation of the toggle group.
+     */
+    orientation?: ToggleGroupOrientation;
+    /**
+     * Defines if it is allowed to have more than one toggle checked.
+     */
+    multiple?: BooleanProp;
+    /**
+     * Defines the checked toggle or toggles.
+     */
+    value?: string | string[];
+    /**
+     * Defines the default checked toggle or toggles.
+     */
+    defaultValue?: string | string[];
+    /**
+     * Event handler called whenever one of the children toggles changes their checked value.
+     */
+    onChange?: (val: string[]) => void;
+    /**
+     * React ref object to the toggle group.
+     */
+    ref?: Ref<ToggleGroupElement>;
+}
+export declare const useHandlerOrientationChange: (ignoreHandlerOrientation: boolean, innerRef: React.RefObject<HTMLDivElement | null>, orientationState: ToggleGroupOrientation, setOrientationState: React.Dispatch<React.SetStateAction<ToggleGroupOrientation>>, componentWidth: number, setComponentWidth: React.Dispatch<React.SetStateAction<number>>) => void;
+declare const ToggleGroup: FC<ToggleGroupProps>;
+export { ToggleGroup };

package/artifacts/dist/types/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type { TooltipProps, TooltipVariant, TooltipPosition, TooltipAlignment } from './tooltip';