@ama-pt/agora-design-system 3.2.0 → 3.3.1

package/artifacts/dist/tailwind.css

@@ -897,6 +897,10 @@ input[type]::placeholder{
   grid-column: span 8 / span 8;
 }
 
+.col-span-full{
+  grid-column: 1 / -1;
+}
+
 .col-start-1{
   grid-column-start: 1;
 }
@@ -1321,6 +1325,11 @@ input[type]::placeholder{
   width: calc(100% + 64px);
 }
 
+.w-fit{
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .w-full{
   width: 100%;
 }
@@ -1358,10 +1367,6 @@ input[type]::placeholder{
   max-width: 280px;
 }
 
-.max-w-\[384px\]{
-  max-width: 384px;
-}
-
 .max-w-full{
   max-width: 100%;
 }
@@ -1783,10 +1788,6 @@ input[type]::placeholder{
   grid-template-rows: repeat(7, minmax(0, 1fr));
 }
 
-.grid-rows-8{
-  grid-template-rows: repeat(8, minmax(0, 1fr));
-}
-
 .flex-row{
   flex-direction: row;
 }
@@ -1851,6 +1852,10 @@ input[type]::placeholder{
   gap: 32px;
 }
 
+.gap-48{
+  gap: 48px;
+}
+
 .gap-64{
   gap: 64px;
 }
@@ -5955,6 +5960,10 @@ input[type]::placeholder{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
 }
 
+.bg-\[--color-primary-900\]{
+  background-color: var(--color-primary-900);
+}
+
 .bg-\[var\(--color-backdrop\)\]{
   background-color: var(--color-backdrop);
 }
@@ -27724,9 +27733,9 @@ input[type]::placeholder{
     grid-column-end: 8;
   }
 
-  .md\:mx-auto{
-    margin-left: auto;
-    margin-right: auto;
+  .md\:mx-64{
+    margin-left: 64px;
+    margin-right: 64px;
   }
 
   .md\:my-0{
@@ -27812,6 +27821,10 @@ input[type]::placeholder{
     display: block;
   }
 
+  .md\:flex{
+    display: flex;
+  }
+
   .md\:hidden{
     display: none;
   }
@@ -34281,6 +34294,20 @@ input[type]::placeholder{
   .md\:bg-blend-luminosity{
     background-blend-mode: luminosity;
   }
+
+  @media not all and (min-width: 1280px){
+    .md\:max-xl\:col-span-8{
+      grid-column: span 8 / span 8;
+    }
+
+    .md\:max-xl\:col-span-full{
+      grid-column: 1 / -1;
+    }
+
+    .md\:max-xl\:p-64{
+      padding: 64px;
+    }
+  }
 }
 
 @media (min-width: 1280px){
@@ -34468,6 +34495,10 @@ input[type]::placeholder{
     height: calc(100% - 2px);
   }
 
+  .xl\:h-screen{
+    height: 100vh;
+  }
+
   .xl\:w-\[1120px\]{
     width: 1120px;
   }
@@ -34857,6 +34888,10 @@ input[type]::placeholder{
     flex-direction: row;
   }
 
+  .xl\:items-center{
+    align-items: center;
+  }
+
   .xl\:justify-start{
     justify-content: flex-start;
   }
@@ -40076,11 +40111,26 @@ input[type]::placeholder{
     padding-right: 0px;
   }
 
+  .xl\:px-\[112px\]{
+    padding-left: 112px;
+    padding-right: 112px;
+  }
+
+  .xl\:py-0{
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+
   .xl\:py-128{
     padding-top: 128px;
     padding-bottom: 128px;
   }
 
+  .xl\:py-16{
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+
   .xl\:py-64{
     padding-top: 64px;
     padding-bottom: 64px;

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

@@ -42,6 +42,10 @@ export interface AnchorProps extends ComponentProps<'a'> {
      * 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 leading icon to be displayed when the anchor is active. If none specified, it will the appropriate variant of the icon.
+     */
+    leadingIconActive?: string;
     /**
      * Defines the name of the trailing icon to use.
      */
@@ -50,6 +54,10 @@ export interface AnchorProps extends ComponentProps<'a'> {
      * 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;
+    /**
+     * Defines the name of the trailing icon to be displayed when the anchor is active. If none specified, it will the appropriate variant of the icon.
+     */
+    trailingIconActive?: string;
     /**
      * Children content.
      */

package/artifacts/dist/types/components/cards/card-action/{card-action-styles.d.ts → card-action-variants.d.ts}

@@ -1,6 +1,6 @@
-import { CardActionStyles } from './card-action';
+import { CardActionVariants } from './card-action';
 import { ButtonVariant } from '../../button/button';
-type CardActionStylesBody = {
+type CardActionVariantsBody = {
     backgroundColor: string;
     textColor?: string;
     titleColor?: string;
@@ -10,6 +10,6 @@ type CardActionStylesBody = {
     buttonDarkMode?: boolean;
     iconColor?: string;
 };
-export type CardActionStylesMap = Record<CardActionStyles, CardActionStylesBody>;
-export declare const cardActionStylesMap: CardActionStylesMap;
+export type CardActionVariantsMap = Record<CardActionVariants, CardActionVariantsBody>;
+export declare const cardActionVariantsMap: CardActionVariantsMap;
 export {};

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

@@ -3,21 +3,21 @@ import { ButtonProps } from '../../../components/button';
 import { IconProps } from '../../../components/icon';
 import './card-action.css';
 import { BooleanProp } from '../../../models';
-export type CardActionStyles = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'white-line' | 'primary-900-line';
+export type CardActionVariants = 'white' | 'neutral-100' | 'primary-100' | 'secondary-100' | 'primary-300' | 'secondary-300' | 'primary-500' | 'primary-700' | 'primary-900' | 'white-line' | 'primary-900-line';
 export type CardActionAlignment = 'left' | 'center' | 'right';
 export interface CardActionProps {
     /**
      * title of card
      */
-    title: string;
+    titleText: string;
     /**
      * text to show within the card
      */
-    text: string;
+    descriptionText: string;
     /**
-     * style of card action
+     * variant of card action
      */
-    variant?: CardActionStyles;
+    variant?: CardActionVariants;
     /**
      * it allow you align title, text and button
      */
@@ -38,5 +38,9 @@ export interface CardActionProps {
      * props for the button component
      */
     button: ButtonProps;
+    /**
+     * turn button full width
+     */
+    buttonFullWidth?: BooleanProp;
 }
 export declare const CardAction: FC<CardActionProps>;

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

@@ -6,7 +6,7 @@ export interface CardCollectionProps extends Omit<ComponentPropsWithoutRef<'div'
     /**
      * Card Collection heading level title.
      */
-    headingLevel: HeadingLevel;
+    headingLevel?: HeadingLevel;
     /**
      * Defines the subtitle
      */

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

@@ -16,7 +16,7 @@ export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title'
     /**
      * Heading level to apply in the card.
      */
-    cardHeadingLevel: HeadingLevel;
+    cardHeadingLevel?: HeadingLevel;
     /**
      * Card title.
      */
@@ -48,7 +48,7 @@ export interface CardExpandableProps extends Omit<ComponentProps<'div'>, 'title'
     /**
      * CardAccordion heading level title.
      */
-    accordionHeadingLevel: HeadingLevel;
+    accordionHeadingLevel?: HeadingLevel;
     /**
      * CardAccordion header title.
      */

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

@@ -1,7 +1,8 @@
-import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { BooleanProp, HeadingLevel } from '../../../models';
 import { AnchorProps } from '../../../components/anchor';
+import { BooleanProp, HeadingLevel } from '../../../models';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import './card-frame.css';
+export type CardFrameLinkPosition = 'bottom' | 'right';
 export interface CardFrameProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Children content.
@@ -10,18 +11,26 @@ export interface CardFrameProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Heading level to apply in the card.
      */
-    headingLevel: HeadingLevel;
+    headingLevel?: HeadingLevel;
     /**
      * Label header.
      */
     label: ReactNode;
     /**
-     * Definition of the anchor to be draw if specified.
+     * Definition of the AgoraDS anchor to be draw if specified.
      */
     mainAnchor?: AnchorProps;
     /**
-     * Makes the whole card clickable and activates the link.
+     * Definition of the main link of the card. It can be any framework specific link. Like NextJS Link component. It will override the mainAnchor prop.
+     */
+    mainLink?: ReactNode;
+    /**
+     * Makes the whole card clickable. When card is clicked the mainAnchor or mainLink will activate.
      */
     blockedLink?: BooleanProp;
+    /**
+     * Positions the link bellow or on the right side of the card.
+     */
+    linkPosition?: CardFrameLinkPosition;
 }
 export declare const CardFrame: FC<CardFrameProps>;

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

@@ -1,2 +1,2 @@
 export { CardFrame } from './card-frame';
-export type { CardFrameProps } from './card-frame';
+export type { CardFrameProps, CardFrameLinkPosition } from './card-frame';

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

@@ -27,7 +27,7 @@ export interface CardLinksProps extends Omit<ComponentProps<'div'>, 'title'> {
     /**
      * The title of the card.
      */
-    title: ReactNode;
+    title?: ReactNode;
     /**
      * The description of the card.
      */
@@ -40,6 +40,10 @@ export interface CardLinksProps extends Omit<ComponentProps<'div'>, 'title'> {
      * Anchor props to render in heading.
      */
     mainAnchor?: AnchorProps;
+    /**
+     * Definition of the main link of the card. It can be any framework specific link. Like NextJS Link component. It will override the mainAnchor prop.
+     */
+    mainLink?: ReactNode;
     /**
      * The list of links of the card.
      */

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

@@ -15,3 +15,4 @@ export * from './card-links';
 export * from './card-no-results';
 export * from './card-single';
 export * from './card-topic';
+export * from './card-action';

package/artifacts/dist/types/components/cards/shared/use-blocked-link-v2.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+export interface IUseBlockedLink {
+    parentCardRef: RefObject<HTMLDivElement | null>;
+    anchorRef: RefObject<HTMLAnchorElement | null>;
+    mainLinkRef?: RefObject<HTMLSpanElement | null>;
+    blockedLink?: boolean;
+}
+declare const useBlockedLinkV2: ({ parentCardRef, anchorRef, mainLinkRef, blockedLink }: IUseBlockedLink) => void;
+export { useBlockedLinkV2 };

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

@@ -3,12 +3,16 @@ import { ComponentProps, FC, ReactElement, ReactNode } from 'react';
 import { DropdownOptionProps } from './dropdown-option';
 import { DropdownSectionProps } from './dropdown-section';
 import { DropdownType } from './dropdown-type';
+import { InternalDropdownContextProps } from './internals/internal-dropdown-context';
 export interface DropdownElement extends HTMLDivElement {
     visibility: boolean;
     show: () => void;
     hide: () => void;
     first: () => void;
     last: () => void;
+    selectedOptions: DropdownOptionProps[];
+    applyFilter: (filter: string) => void;
+    resetFilter: () => void;
 }
 export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
@@ -67,6 +71,11 @@ export interface DropdownProps extends Omit<ComponentProps<'div'>, 'onChange'> {
      *  Text to display in the "select all options across all sections" option.
      */
     selectAllLabel?: string;
+    /**
+     *  Controls the visibility of the dropdown. If not provided, the component will manage its own state.
+     */
+    showDropdown?: boolean;
 }
+export declare const showDropdownHandler: (showDropdown: boolean | undefined, dropdownState: InternalDropdownContextProps) => void;
 declare const Dropdown: FC<DropdownProps>;
 export { Dropdown };

package/artifacts/dist/types/components/dropdown/internals/internal-dropdown-context.d.ts

@@ -5,6 +5,7 @@ export interface InternalDropdownContextProps {
     type: DropdownType;
     sections: InternalDropdownSectionProps[];
     options: InternalDropdownOptionProps[];
+    selectedOptions: InternalDropdownOptionProps[];
     visibility?: boolean;
     show: () => void;
     hide: () => void;

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

@@ -22,7 +22,7 @@ export interface HeaderElement extends ComponentProps<'div'> {
     closeAll: () => void;
 }
 export interface HeaderProps {
-    ref: Ref<HeaderElement>;
+    ref?: Ref<HeaderElement>;
     darkMode?: BooleanProp;
     maxNavigationItems?: number;
     children?: ReactElement<BrandProps | GeneralBarProps> | ReactElement<BrandProps | GeneralBarProps>[];

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

@@ -1,6 +1,7 @@
-import { ComponentProps, FC, ReactNode } from 'react';
+import React, { ComponentProps, Dispatch, FC, ReactNode } from 'react';
 import { BooleanProp, FeedbackState, Months, WeekDays } from '../../models';
 import './input-date.css';
+import { IconSetState } from '../../components/shared/icon-set/icon-set';
 export interface InputDateProps extends ComponentProps<'input'> {
     /**
      * Input label text.
@@ -131,5 +132,6 @@ export interface InputDateProps extends ComponentProps<'input'> {
      */
     okAriaLabel?: string;
 }
+export declare const callbackWith: (setInputWrapperHovered: Dispatch<React.SetStateAction<IconSetState>>, value: IconSetState) => () => void;
 declare const InputDate: FC<InputDateProps>;
 export { InputDate };

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

@@ -4,7 +4,7 @@ import './pill.css';
 /**
  * The available variants of the pill. This variants will define the background and border color of the pill.
  */
-export type PillVariant = 'primary' | 'secondary' | 'secondary-light' | 'neutral' | 'informative' | 'success' | 'warning' | 'danger';
+export type PillVariant = 'primary' | 'secondary' | 'neutral' | 'informative' | 'success' | 'warning' | 'danger';
 /**
  * The available pill appearances. Defines the pill shape.
  */

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

@@ -55,6 +55,6 @@ export interface ToggleGroupProps extends Omit<ComponentProps<'div'>, 'onChange'
      */
     ref?: Ref<ToggleGroupElement>;
 }
-export declare const useHandlerOrientationChange: (orientation: ToggleGroupOrientation, innerRef: React.RefObject<HTMLDivElement | null>, orientationState: ToggleGroupOrientation, setOrientationState: React.Dispatch<React.SetStateAction<ToggleGroupOrientation>>, componentWidth: number, setComponentWidth: React.Dispatch<React.SetStateAction<number>>) => void;
+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/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useWindowSize } from './use-window-size';
 export { useBreakpointScreenValues } from './use-breakpoints-to-number';
+export { useClientOrServerEffect } from './use-client-or-server-effect';

package/artifacts/dist/types/hooks/use-client-or-server-effect.d.ts

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+declare const useClientOrServerEffect: typeof useEffect;
+export { useClientOrServerEffect };

package/package.json

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