@ama-pt/agora-design-system 3.4.1 → 3.5.0

package/artifacts/dist/tailwind.css

@@ -109,7 +109,7 @@
 }
 
 /*
-! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -988,10 +988,6 @@ input[type]::placeholder{
   margin-bottom: 8px;
 }
 
-.-mb-8{
-  margin-bottom: -8px;
-}
-
 .-ml-32{
   margin-left: -32px;
 }
@@ -1088,10 +1084,18 @@ input[type]::placeholder{
   margin-top: 10px;
 }
 
+.mt-\[2px\]{
+  margin-top: 2px;
+}
+
 .mt-\[36px\]{
   margin-top: 36px;
 }
 
+.mt-\[4px\]{
+  margin-top: 4px;
+}
+
 .mt-auto{
   margin-top: auto;
 }
@@ -6121,10 +6125,6 @@ input[type]::placeholder{
   background-color: var(--color-danger-100);
 }
 
-.bg-\[var\(--color-danger-200\)\]{
-  background-color: var(--color-danger-200);
-}
-
 .bg-\[var\(--color-danger-600\)\]{
   background-color: var(--color-danger-600);
 }

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

@@ -31,7 +31,7 @@ export interface AccordionElement extends HTMLDivElement {
      */
     isExpanded: boolean;
 }
-export interface AccordionProps extends ComponentProps<'div'> {
+export interface AccordionProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * The flag to set Dark mode.
      */

package/artifacts/dist/types/components/cards/card-expandable/card-accordion/card-accordion.d.ts

@@ -24,7 +24,7 @@ export interface CardAccordionElement extends HTMLDivElement {
      */
     isExpanded: boolean;
 }
-export interface CardAccordionProps extends ComponentProps<'div'> {
+export interface CardAccordionProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * The variant of the accordion. Those variants will define the style of the accordion.
      */

package/artifacts/dist/types/components/cards/card-expandable/card-expandable.d.ts

@@ -9,7 +9,7 @@ import './card-expandable.css';
 export type CardExpandableVariant = 'white' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'neutral-100';
 export interface CardExpandableElement extends CardAccordionElement {
 }
-export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title'> {
+export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title' | 'onChange'> {
     /**
      * The variant of the card. Those variants will define the style of the card.
      */

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

@@ -34,6 +34,14 @@ export interface CheckboxProps extends ComponentProps<'input'> {
      * The flag to set if the checkbox is in dark mode or light mode.
      */
     darkMode?: BooleanProp;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
+    /**
+     * Helper text displayed below checkbox.
+     */
+    helperText?: ReactNode;
 }
 declare const Checkbox: FC<CheckboxProps>;
 export { Checkbox };

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

@@ -58,3 +58,11 @@ export { NavigationLink } from './navigation-bar/navigation-link';
 export type { NavigationLinkProps } from './navigation-bar/navigation-link';
 export { RelatedNavigationLink } from './navigation-bar/related-navigation-link';
 export type { RelatedNavigationLinkProps } from './navigation-bar/related-navigation-link';
+export { EcosystemBar } from './ecosystem-bar/ecosystem-bar';
+export type { EcosystemBarProps } from './ecosystem-bar/ecosystem-bar';
+export { EcosystemBarTitle } from './ecosystem-bar/ecosystem-bar-title';
+export type { EcosystemBarTitleProps } from './ecosystem-bar/ecosystem-bar-title';
+export { EcosystemBarContent } from './ecosystem-bar/ecosystem-bar-content';
+export type { EcosystemBarContentProps } from './ecosystem-bar/ecosystem-bar-content';
+export { NavigationFreestyle } from './navigation-bar/navigation-freestyle';
+export type { NavigationFreestyleProps } from './navigation-bar/navigation-freestyle';

package/artifacts/dist/types/components/header/internals/context/data-context/header-data-context.d.ts

@@ -10,6 +10,7 @@ import { SearchTitleProps } from '../../../../../components/header/general-bar/s
 import { UnauthenticatedProps } from '../../../../../components/header/general-bar/unauthenticated/unauthenticated';
 import { UnauthenticatedLinkProps } from '../../../../../components/header/general-bar/unauthenticated/unauthenticated-link';
 import { InternalAreaProps } from '../../../../../components/header/internals/general-bar/areas/internal-area';
+import { NavigationFreestyleProps } from '../../../../../components/header/navigation-bar/navigation-freestyle';
 import { NavigationLinkProps } from '../../../../../components/header/navigation-bar/navigation-link';
 import { NavigationRootProps } from '../../../../../components/header/navigation-bar/navigation-root';
 import { InputSearchBarProps } from '../../../../../components/input-search-bar';
@@ -48,7 +49,7 @@ export interface HeaderDataContextProps {
     maxNavigationItems: number;
     hasNavigationBar: () => boolean;
     getNavigationId: () => string;
-    getNavigationItems: () => ReactElement<NavigationRootProps | NavigationLinkProps>[];
+    getNavigationItems: () => ReactElement<NavigationRootProps | NavigationLinkProps | NavigationFreestyleProps>[];
     getResponsiveMenuLabel: () => string;
     getResponsiveMenuAriaLabel: () => string;
     getResponsiveMenuBackToRootLabel: () => string;

package/artifacts/dist/types/components/header/internals/context/data-context/utils/navigation-utils.d.ts

@@ -1,12 +1,13 @@
 import { HeaderChildrenComponents } from '../../../../../../components/header/header';
 import { NavigationBarProps } from '../../../../../../components/header/navigation-bar/navigation-bar';
+import { NavigationFreestyleProps } from '../../../../../../components/header/navigation-bar/navigation-freestyle';
 import { NavigationLinkProps } from '../../../../../../components/header/navigation-bar/navigation-link';
 import { NavigationRootProps } from '../../../../../../components/header/navigation-bar/navigation-root';
 import { ReactElement } from 'react';
 export declare const getParsedNavigationBarProps: (children?: HeaderChildrenComponents) => NavigationBarProps | null;
 export declare const getParsedNavigationBarId: (children?: HeaderChildrenComponents) => string;
 export declare const countParsedNavigationItems: (children?: HeaderChildrenComponents) => number;
-export declare const getParsedNavigationItems: (children?: HeaderChildrenComponents) => ReactElement<NavigationRootProps | NavigationLinkProps>[];
+export declare const getParsedNavigationItems: (children?: HeaderChildrenComponents) => ReactElement<NavigationRootProps | NavigationLinkProps | NavigationFreestyleProps>[];
 export declare const getParsedModalMenuLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedModalAriaLabel: (children?: HeaderChildrenComponents) => string;
 export declare const getParsedModalCloseLabel: (children?: HeaderChildrenComponents) => string;

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-list/internal-navigation-link-layout.d.ts

@@ -2,11 +2,12 @@ import { LayoutProps } from '../../../../../components/header/internals/shared/p
 import { NavigationLinkProps } from '../../../../../components/header/navigation-bar/navigation-link';
 import { RelatedNavigationLinkProps } from '../../../../../components/header/navigation-bar/related-navigation-link';
 import { FC, ReactElement, ReactNode } from 'react';
+import { NavigationFreestyleProps } from '../../../../../components/header/navigation-bar/navigation-freestyle';
 import './internal-navigation-link-layout.css';
 export interface InternalNavigationLinksLayoutProps extends Omit<LayoutProps, 'title'> {
     title: ReactNode;
     linksAriaLabel?: string;
     relatedLinksAriaLabel?: string;
-    children: ReactElement<NavigationLinkProps | RelatedNavigationLinkProps> | ReactElement<NavigationLinkProps | RelatedNavigationLinkProps>[];
+    children: ReactElement<NavigationLinkProps | RelatedNavigationLinkProps | NavigationFreestyleProps> | ReactElement<NavigationLinkProps | RelatedNavigationLinkProps | NavigationFreestyleProps>[];
 }
 export declare const InternalNavigationLinksLayout: FC<InternalNavigationLinksLayoutProps>;

package/artifacts/dist/types/components/header/internals/navigation-bar/navigation-modal/internal-modal-content.d.ts

@@ -2,7 +2,8 @@ import { NavigationLinkProps } from '../../../../../components/header/navigation
 import { NavigationRootProps } from '../../../../../components/header/navigation-bar/navigation-root';
 import { FC, ReactElement } from 'react';
 import './internal-modal-content.css';
+import { NavigationFreestyleProps } from '../../../../../components/header/navigation-bar/navigation-freestyle';
 export interface InternalModalContentProps {
-    item: ReactElement<NavigationRootProps | NavigationLinkProps>;
+    item: ReactElement<NavigationRootProps | NavigationLinkProps | NavigationFreestyleProps>;
 }
 export declare const InternalModalContent: FC<InternalModalContentProps>;

package/artifacts/dist/types/components/header/navigation-bar/navigation-freestyle.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactNode } from 'react';
+export interface NavigationFreestyleProps {
+    children: ReactNode;
+}
+export declare const NavigationFreestyle: FC<NavigationFreestyleProps>;

package/artifacts/dist/types/components/header/navigation-bar/navigation-root.d.ts

@@ -1,10 +1,11 @@
 import { ComponentProps, FC, ReactElement } from 'react';
 import { RelatedNavigationLinkProps } from './related-navigation-link';
 import { NavigationLinkProps } from './navigation-link';
+import { NavigationFreestyleProps } from './navigation-freestyle';
 export interface NavigationRootProps extends ComponentProps<'div'> {
     label: string;
     linksAriaLabel?: string;
     relatedLinksAriaLabel?: string;
-    children: ReactElement<NavigationLinkProps | RelatedNavigationLinkProps> | ReactElement<NavigationLinkProps | RelatedNavigationLinkProps>[];
+    children: ReactElement<NavigationLinkProps | RelatedNavigationLinkProps | NavigationFreestyleProps> | ReactElement<NavigationLinkProps | RelatedNavigationLinkProps>[];
 }
 export declare const NavigationRoot: FC<NavigationRootProps>;

package/artifacts/dist/types/components/icon/assets/line/line-lgp.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SVGIconProps } from '../../../../models';
+declare const _default: (props: SVGIconProps) => React.JSX.Element;
+export default _default;

package/artifacts/dist/types/components/icon/assets/solid/solid-lgp.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SVGIconProps } from '../../../../models';
+declare const _default: (props: SVGIconProps) => React.JSX.Element;
+export default _default;

package/artifacts/dist/types/components/input-date/input-date.d.ts

@@ -131,6 +131,14 @@ export interface InputDateProps extends ComponentProps<'input'> {
      * Accessible text for the date picker ok button.
      */
     okAriaLabel?: string;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 export declare const callbackWith: (setInputWrapperHovered: Dispatch<React.SetStateAction<IconSetState>>, value: IconSetState) => () => void;
 declare const InputDate: FC<InputDateProps>;

package/artifacts/dist/types/components/input-email-bar/input-email-bar.d.ts

@@ -39,6 +39,14 @@ export interface InputEmailBarProps extends ComponentProps<'input'> {
      * Error feedback text displayed below input.
      */
     errorFeedbackText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
 }
 declare const InputEmailBar: FC<InputEmailBarProps>;
 export { InputEmailBar };

package/artifacts/dist/types/components/input-number/input-number.d.ts

@@ -50,6 +50,14 @@ export interface InputNumberProps extends ComponentProps<'input'> {
      *  Label text for decrease button. Recommended for accessibility.
      */
     decreaseButtonAltText?: string;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputNumber: FC<InputNumberProps>;
 export { InputNumber };

package/artifacts/dist/types/components/input-password/input-password.d.ts

@@ -53,6 +53,14 @@ export interface InputPasswordProps extends ComponentProps<'input'> {
         show: string;
         hide: string;
     };
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputPassword: FC<InputPasswordProps>;
 export { InputPassword };

package/artifacts/dist/types/components/input-phone/input-phone.d.ts

@@ -91,6 +91,14 @@ export interface InputPhoneProps extends ComponentProps<'input'> {
      *  Use the given custom countries list instead of the default one (must be in the correct format).
      */
     customCountriesList?: CountryPhoneProps[];
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputPhone: FC<InputPhoneProps>;
 export { InputPhone };

package/artifacts/dist/types/components/input-range/input-range.d.ts

@@ -60,6 +60,14 @@ export interface InputRangeProps extends Omit<ComponentProps<'input'>, 'value' |
      *  Error feedback text displayed below input.
      */
     errorFeedbackText?: ReactNode;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 export interface InputRangeElement extends HTMLDivElement {
     sliders: HTMLInputElement[];

package/artifacts/dist/types/components/input-search/input-search.d.ts

@@ -42,6 +42,14 @@ export interface InputSearchProps extends ComponentProps<'input'> {
      * Highlight the input indicating some error
      */
     hasError?: BooleanProp;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputSearch: FC<InputSearchProps>;
 export { InputSearch };

package/artifacts/dist/types/components/input-text/input-text.d.ts

@@ -42,6 +42,14 @@ export interface InputTextProps extends ComponentProps<'input'> {
      * Highlight the input indicating some error
      */
     hasError?: BooleanProp;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputText: FC<InputTextProps>;
 export { InputText };

package/artifacts/dist/types/components/input-textarea/input-textarea.d.ts

@@ -38,6 +38,14 @@ export interface InputTextAreaProps extends ComponentProps<'textarea'> {
      * Defines if the char counter on right corner should or should not be visible.
      */
     showCharCounter?: BooleanProp;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputTextArea: FC<InputTextAreaProps>;
 export { InputTextArea };

package/artifacts/dist/types/components/input-time/contexts/time-input-state.context.d.ts

@@ -1,5 +1,5 @@
 import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
-import { TimePeriod } from '../../../models';
+import { TimeFormat, TimePeriod } from '../../../models';
 export interface Labels {
     cancelLabel: string;
     cancelAriaLabel?: string;
@@ -9,7 +9,12 @@ export interface Labels {
     timepickerMessageAriaLabel?: string;
 }
 interface TimePickerStateContextInitialValuesType {
+    selectedFormat: TimeFormat;
     selectedTime: string;
+    MIN_HOUR: number;
+    MAX_HOUR: number;
+    MIN_MINUTE: number;
+    MAX_MINUTE: number;
     cancel: (selectedTime: string) => void;
     labels: Labels;
 }

package/artifacts/dist/types/components/input-time/input-time.d.ts

@@ -1,7 +1,11 @@
 import { ComponentProps, FC, ReactNode } from 'react';
 import './input-time.css';
-import { BooleanProp, FeedbackState } from '../../models';
+import { BooleanProp, FeedbackState, TimeFormat } from '../../models';
 export interface InputTimeProps extends ComponentProps<'input'> {
+    /**
+    * Defines the time format that will be used.
+    */
+    format?: TimeFormat;
     /**
      * The flag to set if the label and feedback text is in dark mode or light mode.
      */
@@ -86,6 +90,14 @@ export interface InputTimeProps extends ComponentProps<'input'> {
      * Accessible text for the timepicker footer message.
      */
     timepickerMessageAriaLabel?: string;
+    /**
+     * Defines helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Show or hide the helper text.
+     */
+    hasHelperText?: BooleanProp;
 }
 declare const InputTime: FC<InputTimeProps>;
 export { InputTime };

package/artifacts/dist/types/components/input-time/utils/format-time.d.ts

@@ -1,9 +1,6 @@
 import { TimePeriod } from '../../../models';
-export declare const FULL_TIME_TEXT_REGEX: RegExp;
-export declare const MIN_HOUR = 1;
-export declare const MAX_HOUR = 12;
-export declare const MIN_MINUTE = 0;
-export declare const MAX_MINUTE = 59;
+export declare const FULL_TIME_TEXT_REGEX_WITH_PERIOD: RegExp;
+export declare const FULL_TIME_TEXT_REGEX_WITHOUT_PERIOD: RegExp;
 export declare const DEFAULT_PLACEHOLDER: {
     HOUR: string;
     MINUTE: string;
@@ -18,12 +15,12 @@ export declare const startTime: {
     minute: string;
     period: string;
 };
-export declare const formatHour: (hour: number | string) => string;
-export declare const formatMinute: (minute: number | string) => string;
-export declare const formatFullTime: (selectedHour: number | string, selectedMinute: number | string, selectedPeriod: TimePeriod) => string;
-export declare const parseFullTime: (fullTimeText: string) => {
+export declare const formatHour: (hour: number | string, minHour: number, maxHour: number) => string;
+export declare const formatMinute: (minute: number | string, minMinute: number, maxMinute: number) => string;
+export declare const formatFullTime: (hasPeriod: boolean, selectedHour: number | string, selectedMinute: number | string, selectedPeriod: TimePeriod) => string;
+export declare const parseFullTime: (hasPeriod: boolean, fullTimeText: string) => {
     selectedHour: string;
     selectedMinute: string;
     selectedPeriod: TimePeriod;
 };
-export declare const isTimeTextValid: (timeText: string | number | undefined) => boolean;
+export declare const isTimeTextValid: (hasPeriod: boolean, timeText: string | number | undefined, minHour: number, maxHour: number, minMinute: number, maxMinute: number) => boolean;

package/artifacts/dist/types/components/status-card/status-card.d.ts

@@ -1,25 +1,31 @@
-import { ComponentProps, FC, ReactNode } from 'react';
-import { BooleanProp } from '../../models';
+import React, { ComponentProps, FC } from 'react';
 import './status-card.css';
-export type StatusCardType = 'info' | 'success' | 'warning' | 'danger';
+import { BooleanProp } from '../../models';
+export type StatusCardType = 'informative' | 'success' | 'warning' | 'danger' | 'outline-informative' | 'outline-success' | 'outline-warning' | 'outline-danger';
 export interface StatusCardProps extends ComponentProps<'div'> {
     /**
-     * Status card description content
+     * Defines what style to apply.
+     */
+    variant?: StatusCardType;
+    /**
+     * The flag to set Dark mode.
+     */
+    darkMode?: BooleanProp;
+    /**
+     * Show or hide icon.
      */
-    description: ReactNode;
+    showIcon?: BooleanProp;
     /**
-     * The available Status card types. Defines the appearance of the cards.
+     * Status card pill Text content
      */
-    type: StatusCardType;
+    pillText?: string;
     /**
-     * The flag to make the status card interactive. When it is interactive,
-     * card can be focused by clicking on it.
+     * Status card title content
      */
-    interactive?: BooleanProp;
+    title?: string;
     /**
-     * Callback to run whenever the status card is interactive.
+     * Status card description content
      */
-    onActivate?: () => void;
+    description?: string | React.ReactNode;
 }
-declare const StatusCard: FC<StatusCardProps>;
-export { StatusCard };
+export declare const StatusCard: FC<StatusCardProps>;

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

@@ -15,5 +15,6 @@ export interface TabsDesktopProps extends ComponentPropsWithoutRef<'div'> {
     tabPanelClassName: string;
     tabsHeaderData: Array<ReactElement<TabHeaderProps>>;
     tabsBodyData: Array<ReactElement<TabBodyProps>>;
+    isDesktop: boolean;
 }
 export declare const TabsDesktop: FC<TabsDesktopProps>;

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

@@ -12,6 +12,7 @@ interface TabsMobileProps extends ComponentPropsWithoutRef<'div'> {
     currentType: TabCurrentType;
     tabsHeaderData: Array<ReactElement<TabHeaderProps>>;
     tabsBodyData: Array<ReactElement<TabBodyProps>>;
+    isTabletOrMobile: boolean;
 }
 export declare const TabsMobile: FC<TabsMobileProps>;
 export {};

package/artifacts/dist/types/models/index.d.ts

@@ -6,3 +6,4 @@ export * from './week-days.interface';
 export * from './heading-level-type';
 export * from './svg-icon.interface';
 export * from './time-period-type';
+export * from './time-format-type';

package/artifacts/dist/types/models/time-format-type.d.ts

@@ -0,0 +1 @@
+export type TimeFormat = '12' | '24';

package/artifacts/dist/types/models/time-period-type.d.ts

@@ -1 +1 @@
-export type TimePeriod = 'am' | 'pm';
+export type TimePeriod = 'am' | 'pm' | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ama-pt/agora-design-system",
   "description": "Ágora Design system",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "main": "artifacts/dist/index.mjs",
   "module": "artifacts/dist/index.umd.js",
   "files": [

package/artifacts/dist/types/components/status-card/interactive-status-card.d.ts

@@ -1,11 +0,0 @@
-import { ComponentProps, FC, ReactNode } from 'react';
-import { StatusCardType } from './status-card';
-export interface InteractiveStatusCardProps extends ComponentProps<'div'> {
-    className?: string;
-    interactive?: boolean;
-    children?: ReactNode;
-    type?: StatusCardType;
-    onActivate?: () => void;
-}
-declare const InteractiveStatusCard: FC<InteractiveStatusCardProps>;
-export { InteractiveStatusCard };

package/artifacts/dist/types/components/status-card/non-interactive-status-card.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps, FC, ReactNode } from 'react';
-import { StatusCardType } from './status-card';
-export interface NonInteractiveStatusCardProps extends ComponentProps<'div'> {
-    className?: string;
-    children?: ReactNode;
-    type?: StatusCardType;
-}
-declare const NonInteractiveStatusCard: FC<NonInteractiveStatusCardProps>;
-export { NonInteractiveStatusCard };