@ama-pt/agora-design-system 0.3.1 → 0.5.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React$1 from 'react';
-import React__default, { ComponentPropsWithRef, ReactNode, FC, SVGProps, HTMLProps, ComponentPropsWithoutRef, ReactElement, HtmlHTMLAttributes, ChangeEvent, RefObject, AnchorHTMLAttributes, ImgHTMLAttributes } from 'react';
+import React__default, { ComponentPropsWithRef, ReactNode, FC, SVGProps, HTMLProps, ComponentPropsWithoutRef, ReactElement, ForwardRefRenderFunction, HtmlHTMLAttributes, ChangeEvent, RefObject, AnchorHTMLAttributes, ImgHTMLAttributes } from 'react';
 
 type BooleanProp = boolean | 'true' | 'false';
 
@@ -76,7 +76,7 @@ declare const Accordion: React__default.ForwardRefExoticComponent<Omit<Accordion
 /**
  * The available variants of the anchors. This variants will define the background and border color of the anchors.
  */
-type AnchorVariant = 'primary' | 'neutral' | 'white' | 'success' | 'warning' | 'danger';
+type AnchorVariant = 'primary' | 'informative' | 'neutral' | 'white' | 'success' | 'warning' | 'danger';
 /**
  * The available anchor appearances. Defines the anchor shape.
  */
@@ -190,7 +190,7 @@ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Avatar information. Information related to the avatar, such as user name or other.
      */
-    information?: string;
+    information: string;
     /**
      * Avatar alt personalized description of the avatar. The text appears if the avatar fails to load on the page.
      */
@@ -244,7 +244,7 @@ declare const Breadcrumb: FC<BreadcrumbProps>;
 /**
  * The available variants of the button. This variants will define the background and border color of the button.
  */
-type ButtonVariant = 'primary' | 'neutral' | 'white' | 'success' | 'warning' | 'danger';
+type ButtonVariant = 'primary' | 'informative' | 'neutral' | 'white' | 'success' | 'warning' | 'danger';
 /**
  * The available button appearances. Defines the button shape.
  */
@@ -595,12 +595,25 @@ interface RangeProps extends Omit<ComponentPropsWithRef<'input'>, 'value' | 'onC
 }
 declare const InputRange: React__default.ForwardRefExoticComponent<Omit<RangeProps, "ref"> & React__default.RefAttributes<HTMLDivElement | HTMLInputElement | (HTMLInputElement | null)[]>>;
 
-type ListType = 'default' | 'unordered' | 'ordered';
+type ListType = 'unordered' | 'ordered';
+type ListStyle = 'none' | 'bullet' | 'number' | 'icon';
 interface ListProps extends ComponentPropsWithoutRef<'ul'> {
     /**
      * Type list.
      */
     type?: ListType;
+    /**
+     * Style of the list depending on the chosen type.
+     */
+    listStyle?: ListStyle;
+    /**
+     * Choose the starting number of an ordered number list.
+     */
+    startNumber?: number;
+    /**
+     * Choose the icon for an unordered list.
+     */
+    icon?: string;
     /**
      * Children content.
      */
@@ -612,42 +625,39 @@ interface ListProps extends ComponentPropsWithoutRef<'ul'> {
 }
 declare const List: FC<ListProps>;
 
-interface ModalProps extends ComponentPropsWithoutRef<'dialog'> {
+/**
+ * Menu item type
+ */
+type MenuItemType = 'primary' | 'search' | 'menu' | 'secondary' | 'user' | 'avatar' | 'close';
+type BaseProps = {
     /**
-     * Title text for the close button.
+     * Remove default icons.
      */
-    closeText: string;
+    noIcons?: BooleanProp;
     /**
-     * Children content.
+     * Type of menu item
      */
-    children: ReactNode;
-}
-declare const Modal: FC<ModalProps>;
-
-declare const useModal: () => {
-    showModal: (params: ReactNode, props: ModalProps) => void;
-    closeModal: () => void;
-    isOpen: boolean;
-    modalContent: ReactNode;
-    modalProps: ModalProps;
-};
-
-interface ModalContextProps {
-    isOpen?: boolean;
-    showModal: (params: ReactNode, modalProps: ModalProps) => void;
-    closeModal: () => void;
-    modalContent?: ReactNode | null;
-}
-declare const ModalContext: React$1.Context<ModalContextProps>;
-declare const useModalContext: () => ModalContextProps;
-
-interface ModalProviderProps {
+    itemType: MenuItemType;
+    /**
+     * Menu on dark background
+     */
+    darkMode?: BooleanProp;
+    /**
+     *  Menu item is a action button
+     */
+    actionItem?: BooleanProp;
     /**
      * Children content.
      */
-    children: ReactNode;
+    children?: ReactNode;
+};
+type MenuItemProps = BaseProps & (HTMLProps<HTMLAnchorElement> | HTMLProps<HTMLButtonElement> | HTMLProps<HTMLDivElement> | AvatarProps);
+interface MenuItemRef {
+    current: HTMLButtonElement | HTMLAnchorElement | null;
+    toggleMenuItem: () => void;
 }
-declare const ModalProvider: FC<ModalProviderProps>;
+type ExtendedInterfaceMenu = HTMLButtonElement | HTMLAnchorElement | MenuItemRef | AvatarProps;
+declare const MenuItem: React__default.ForwardRefExoticComponent<((BaseProps & AvatarProps) | Omit<BaseProps & React__default.HTMLProps<HTMLDivElement>, "ref"> | Omit<BaseProps & React__default.HTMLProps<HTMLAnchorElement>, "ref"> | Omit<BaseProps & React__default.HTMLProps<HTMLButtonElement>, "ref">) & React__default.RefAttributes<ExtendedInterfaceMenu>>;
 
 /**
  * The available variants of the pill. This variants will define the background and border color of the pill.
@@ -766,7 +776,7 @@ interface StatusCardProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Status card description content
      */
-    description: string;
+    description: ReactNode;
     /**
      * The available Status card types. Defines the appearance of the cards.
      */
@@ -957,7 +967,7 @@ type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
  * The available alignments of the Tooltip. This alignments will define the alignment of the Tooltip.
  */
 type TooltipAlignment = 'start' | 'center' | 'end';
-interface TooltipProps extends ComponentPropsWithRef<'div'> {
+interface TooltipProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
     /**
      * The variant of the Tooltip.
      */
@@ -973,7 +983,7 @@ interface TooltipProps extends ComponentPropsWithRef<'div'> {
     /**
      * The title of the Tooltip.
      */
-    title?: string;
+    title?: ReactNode;
     /**
      * If the Tooltip has a title.
      */
@@ -981,7 +991,7 @@ interface TooltipProps extends ComponentPropsWithRef<'div'> {
     /**
      * The description of the Tooltip.
      */
-    description: string;
+    description: ReactNode;
     /**
      * The children of the Tooltip.
      */
@@ -989,6 +999,88 @@ interface TooltipProps extends ComponentPropsWithRef<'div'> {
 }
 declare const Tooltip: React__default.ForwardRefExoticComponent<Omit<TooltipProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
+interface DialogElementRef {
+    /** Reference to the dialog container HTMLDivElement */
+    current?: HTMLDivElement;
+    /** Flag that tells if the dialog is visible or not */
+    visible?: boolean;
+    /** Show the dialog  */
+    show: () => void;
+    /** Hide the dialog  */
+    hide: () => void;
+}
+interface DialogProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Initial visibility state of the dialog
+     * */
+    visible?: BooleanProp;
+    /**
+     * Renders the dialog content as full screen without a backdrop
+     */
+    fullScreen?: BooleanProp;
+    /**
+     * If not a fullscreen dialog, allows the user to dismiss the dialog by clicking in the backdrop
+     */
+    dismissOnBackdropClick?: BooleanProp;
+    /**
+     * Allows the dialog to be closed by pressing Escape key.
+     */
+    dismissOnEscape?: BooleanProp;
+}
+declare const Dialog: React__default.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React__default.RefAttributes<DialogElementRef>>;
+
+interface InputFileProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * The maxSize of the file in bytes
+     */
+    maxSize: number;
+    /**
+     * The extensionsBlackList of the uploader
+     */
+    extensionsBlackList: string[];
+    /**
+     * The addedLabel of the uploader
+     */
+    addedLabel: string;
+    /**
+     * The announceRemovedFileLabel of the uploader
+     */
+    announceRemovedFileLabel: string;
+    /**
+     * The removeFileLabel of the uploader
+     */
+    removeFileLabel: string;
+    /**
+     * The fileListLabel of the uploader
+     */
+    fileListLabel: string;
+    /**
+     * The fileDropZoneAriaLabel of the uploader
+     */
+    fileDropZoneAriaLabel: string;
+    /**
+     * The dropYourFilesHereLabel of the uploader
+     */
+    dropYourFilesHereLabel: string;
+    /**
+     * The allowedFilesAriaLabel of the uploader
+     */
+    allowedFilesAriaLabel: string;
+    /**
+     * The uploadFilesLabel of the uploader
+     */
+    uploadFilesLabel: string;
+    /**
+     * The id of the uploader
+     */
+    id?: string;
+    /**
+     * The fileLabel of the uploader
+     */
+    fileLabel: string;
+}
+declare const InputFile: ForwardRefRenderFunction<HTMLInputElement, InputFileProps>;
+
 type AccordionGroupType = 'single' | 'multiple';
 interface AccordionGroupProps extends ComponentPropsWithRef<'div'> {
     /**
@@ -1032,10 +1124,6 @@ interface ButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'onC
      * Group name
      */
     name?: string;
-    /**
-     *  List of button props to generate as buttons.
-     */
-    items?: ButtonProps[];
     /**
      *  List of button components to use as children of the group.
      */
@@ -1056,10 +1144,30 @@ interface CheckboxGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>, 'o
      *  Input label text.
      */
     label?: string;
+    /**
+     * Decides if display/hide label.
+     */
+    hideLabel?: BooleanProp;
     /**
      *  List of checkboxes props to generate as checkboxes.
      */
     items?: CheckboxProps[];
+    /**
+     * Sets the checkbox in a error state. This also affects the feedback state.
+     */
+    hasError?: BooleanProp;
+    /**
+     * Show or hide the feedback status text.
+     */
+    hasFeedback?: BooleanProp;
+    /**
+     * Defines the state of the feedback text. This param will change the feedback icon and dye it.
+     */
+    feedbackState?: FeedbackState;
+    /**
+     * Feedback text displayed below checkbox-group.
+     */
+    feedbackText?: string;
     /**
      *  List of checkbox components to use as children of the group.
      */
@@ -1189,10 +1297,30 @@ interface RadioButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>,
      *  Input label text.
      */
     label?: string;
+    /**
+     * Decides if display/hide label.
+     */
+    hideLabel?: BooleanProp;
     /**
      * Group name
      */
     name: string;
+    /**
+     * Sets the radio button in a error state. This also affects the feedback state.
+     */
+    hasError?: BooleanProp;
+    /**
+     * Show or hide the feedback status text.
+     */
+    hasFeedback?: BooleanProp;
+    /**
+     * Defines the state of the feedback text. This param will change the feedback icon and dye it.
+     */
+    feedbackState?: FeedbackState;
+    /**
+     * Feedback text displayed below radio-button.
+     */
+    feedbackText?: string;
     /**
      *  List of radiobutton props to generate as radio buttons.
      */
@@ -1208,6 +1336,85 @@ interface RadioButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement>,
 }
 declare const RadioButtonGroup: FC<RadioButtonGroupProps>;
 
+type PopupDimensions = 's' | 'm' | 'l';
+interface PopupDialogProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /**
+     * Available popup sizes. Can be small (S), medium (M), and large (L) dimensions.
+     */
+    dimensions?: PopupDimensions;
+    /**
+     * Title of the popup dialog.
+     */
+    title: ReactNode;
+    /**
+     * Close button alternative text.
+     */
+    closeAriaLabel: string;
+    /**
+     * Children content.
+     */
+    children: ReactNode;
+}
+declare const PopupDialog: FC<PopupDialogProps>;
+
+interface PopupContextProps {
+    current: DialogElementRef | null;
+    visibility?: boolean;
+    show: (children: ReactNode, popupProps: PopupDialogProps) => void;
+    hide: () => void;
+}
+declare const PopupContext: React$1.Context<PopupContextProps>;
+declare const usePopupContext: () => PopupContextProps;
+
+interface PopupProviderProps {
+    /**
+     * If not a fullscreen dialog, allows the user to dismiss the dialog by clicking in the backdrop
+     */
+    dismissOnBackdropClick?: BooleanProp;
+    /**
+     * Allows the dialog to be closed by pressing Escape key.
+     */
+    dismissOnEscape?: BooleanProp;
+    /**
+     * Children content.
+     */
+    children: ReactNode;
+}
+declare const PopupProvider: FC<PopupProviderProps>;
+
+interface ModalDialogProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
+    /**
+     * Close button text.
+     */
+    closeButtonLabel: string;
+    /**
+     * Children content.
+     */
+    children: ReactNode;
+}
+declare const ModalDialog: FC<ModalDialogProps>;
+
+interface ModalContextProps {
+    current: DialogElementRef | null;
+    visibility?: boolean;
+    show: (children: ReactNode, popupProps: ModalDialogProps) => void;
+    hide: () => void;
+}
+declare const ModalContext: React$1.Context<ModalContextProps>;
+declare const useModalContext: () => ModalContextProps;
+
+interface ModalProviderProps {
+    /**
+     * Allows the dialog to be closed by pressing Escape key.
+     */
+    dismissOnEscape?: BooleanProp;
+    /**
+     * Children content.
+     */
+    children: ReactNode;
+}
+declare const ModalProvider: FC<ModalProviderProps>;
+
 interface WeekDays {
     sun: string;
     mon: string;
@@ -1251,6 +1458,18 @@ interface InputDateProps extends ComponentPropsWithRef<'input'> {
      * Name of the icon leading icon to be displayed.
      */
     icon?: string;
+    /**
+     * The placeholder to apply in the input day part
+     */
+    dayInputPlaceholder?: string;
+    /**
+     * The placeholder to apply in the input month part
+     */
+    monthInputPlaceholder?: string;
+    /**
+     * The placeholder to apply in the input year part
+     */
+    yearInputPlaceholder?: string;
     /**
      * Accessible text to apply to the trailing calendar icon.
      */
@@ -1624,6 +1843,16 @@ declare const AgoraTailwindConfig: {
                 16: string;
                 32: string;
             };
+            zIndex: {
+                dropdown: string;
+                backdrop: string;
+                sticky: string;
+                fixed: string;
+                drawer: string;
+                dialog: string;
+                toast: string;
+                tooltip: string;
+            };
         };
         screens: {
             xs: string;
@@ -1947,4 +2176,4 @@ declare const AgoraTailwindConfig: {
     plugins: (({ addComponents }: any) => void)[];
 };
 
-export { Accordion, AccordionGroup, type AccordionGroupProps, type AccordionGroupType, type AccordionProps, type AccordionRef, AgoraTailwindConfig, Anchor, type AnchorAppearance, type AnchorProps, type AnchorVariant, Avatar, type AvatarBadgePosition, type AvatarBadgeVariant, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarType, type BooleanProp, Breadcrumb, type BreadcrumbLink, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariant, type CardFooterProps, type CardLinksFooterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ContactsFooterProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerRef, DropdownList, type DropdownListProps, DropdownSection, DropdownSectionOption, type DropdownSectionOptionProps, type DropdownSectionProps, type DropdownSectionType, FederatedFooter, type FederatedFooterProps, type FeedbackState, type GlossaryLetter, GlossaryLetters, type GlossaryLettersProps, Icon, type IconDimensions, type IconName, type IconPosition, type IconProps, InputDate, type InputDateProps, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, InputPhone, type InputPhoneProps, type InputPhoneRef, InputRange, InputSearch, type InputSearchProps, InputSelect, type InputSelectProps, InputText, InputTextArea, type InputTextAreaProps, type InputTextProps, type LetterStatus, type LinkableIconsProps, type LinkableImagesProps, List, type ListProps, type ListType, Modal, ModalContext, type ModalContextProps, type ModalProps, ModalProvider, type ModalProviderProps, type Months, type PhoneCountryCode, PhoneCountryCodes, type PhoneCountryISO, PhoneCountryISOs, Pill, type PillAppearance, type PillProps, type PillVariant, ProgressBar, ProgressBarGroup, type ProgressBarGroupProps, type ProgressBarProps, PublicFooter, type PublicFooterProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RangeOrientation, type RangeProps, type RangeType, Scribbles, type ScribblesName, type ScribblesProps, StatusCard, type StatusCardProps, type StatusCardType, StepList, type StepListProps, Switch, type SwitchPosition, type SwitchProps, Tab, TabBody, type TabBodyProps, TabHeader, type TabHeaderProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagVariant, Toast, ToastContext, type ToastContextProps, type ToastPositions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastType, Tooltip, type TooltipAlignment, type TooltipPosition, type TooltipProps, type TooltipVariant, TypedEventEmitter, allIcons, allScribbles, debounce, normalizeText, stringToBoolean, useModal, useModalContext, useToast, useToastContext, useWindowSize };
+export { Accordion, AccordionGroup, type AccordionGroupProps, type AccordionGroupType, type AccordionProps, type AccordionRef, AgoraTailwindConfig, Anchor, type AnchorAppearance, type AnchorProps, type AnchorVariant, Avatar, type AvatarBadgePosition, type AvatarBadgeVariant, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarType, type BooleanProp, Breadcrumb, type BreadcrumbLink, type BreadcrumbProps, Button, type ButtonAppearance, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonVariant, type CardFooterProps, type CardLinksFooterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ContactsFooterProps, Dialog, type DialogElementRef, type DialogProps, Drawer, type DrawerPosition, type DrawerProps, type DrawerRef, DropdownList, type DropdownListProps, DropdownSection, DropdownSectionOption, type DropdownSectionOptionProps, type DropdownSectionProps, type DropdownSectionType, FederatedFooter, type FederatedFooterProps, type FeedbackState, type GlossaryLetter, GlossaryLetters, type GlossaryLettersProps, Icon, type IconDimensions, type IconName, type IconPosition, type IconProps, InputDate, type InputDateProps, InputFile, type InputFileProps, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, InputPhone, type InputPhoneProps, type InputPhoneRef, InputRange, InputSearch, type InputSearchProps, InputSelect, type InputSelectProps, InputText, InputTextArea, type InputTextAreaProps, type InputTextProps, type LetterStatus, type LinkableIconsProps, type LinkableImagesProps, List, type ListProps, type ListStyle, type ListType, MenuItem, type MenuItemProps, type MenuItemRef, type MenuItemType, ModalContext, type ModalContextProps, ModalDialog, type ModalDialogProps, ModalProvider, type ModalProviderProps, type Months, type PhoneCountryCode, PhoneCountryCodes, type PhoneCountryISO, PhoneCountryISOs, Pill, type PillAppearance, type PillProps, type PillVariant, PopupContext, type PopupContextProps, PopupDialog, type PopupDialogProps, type PopupDimensions, PopupProvider, type PopupProviderProps, ProgressBar, ProgressBarGroup, type ProgressBarGroupProps, type ProgressBarProps, PublicFooter, type PublicFooterProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, type RangeOrientation, type RangeProps, type RangeType, Scribbles, type ScribblesName, type ScribblesProps, StatusCard, type StatusCardProps, type StatusCardType, StepList, type StepListProps, Switch, type SwitchPosition, type SwitchProps, Tab, TabBody, type TabBodyProps, TabHeader, type TabHeaderProps, type TabProps, Tabs, type TabsProps, Tag, type TagProps, type TagVariant, Toast, ToastContext, type ToastContextProps, type ToastPositions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastType, Tooltip, type TooltipAlignment, type TooltipPosition, type TooltipProps, type TooltipVariant, TypedEventEmitter, allIcons, allScribbles, debounce, normalizeText, stringToBoolean, useModalContext, usePopupContext, useToast, useToastContext, useWindowSize };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "engines": {
     "node": "18.17.1"
   },
@@ -12,6 +12,8 @@
   ],
   "types": "dist/index.d.ts",
   "scripts": {
+    "start": "yarn run storybook",
+    "dev": "yarn run storybook",
     "storybook": "gulp && storybook dev -p 6006",
     "build-storybook": "gulp && storybook build",
     "lint": "eslint src --ext .ts,.tsx",