@ama-pt/agora-design-system 2.0.0 → 2.1.0

package/artifacts/dist/tailwind.css

@@ -861,6 +861,14 @@ input[type]::placeholder{
   z-index: 8000;
 }
 
+.col-auto{
+  grid-column: auto;
+}
+
+.col-span-1{
+  grid-column: span 1 / span 1;
+}
+
 .col-span-12{
   grid-column: span 12 / span 12;
 }
@@ -889,6 +897,14 @@ input[type]::placeholder{
   grid-column: span 8 / span 8;
 }
 
+.col-start-1{
+  grid-column-start: 1;
+}
+
+.col-start-3{
+  grid-column-start: 3;
+}
+
 .col-start-4{
   grid-column-start: 4;
 }
@@ -901,6 +917,14 @@ input[type]::placeholder{
   grid-column-end: 12;
 }
 
+.col-end-3{
+  grid-column-end: 3;
+}
+
+.col-end-5{
+  grid-column-end: 5;
+}
+
 .col-end-9{
   grid-column-end: 9;
 }
@@ -956,6 +980,10 @@ input[type]::placeholder{
   margin-left: -16px;
 }
 
+.-ml-32{
+  margin-left: -32px;
+}
+
 .mb-128{
   margin-bottom: 128px;
 }
@@ -984,6 +1012,10 @@ input[type]::placeholder{
   margin-left: 16px;
 }
 
+.ml-32{
+  margin-left: 32px;
+}
+
 .ml-8{
   margin-left: 8px;
 }
@@ -996,6 +1028,10 @@ input[type]::placeholder{
   margin-right: 0px;
 }
 
+.mr-16{
+  margin-right: 16px;
+}
+
 .mr-24{
   margin-right: 24px;
 }
@@ -1036,6 +1072,10 @@ input[type]::placeholder{
   margin-top: 10px;
 }
 
+.mt-\[36px\]{
+  margin-top: 36px;
+}
+
 .mt-auto{
   margin-top: auto;
 }
@@ -1185,6 +1225,10 @@ input[type]::placeholder{
   max-height: min-content;
 }
 
+.max-h-screen{
+  max-height: 100vh;
+}
+
 .min-h-\[100vh\]{
   min-height: 100vh;
 }
@@ -1245,6 +1289,10 @@ input[type]::placeholder{
   width: 56px;
 }
 
+.w-64{
+  width: 64px;
+}
+
 .w-\[44px\]{
   width: 44px;
 }
@@ -1257,6 +1305,14 @@ input[type]::placeholder{
   width: 496px;
 }
 
+.w-\[60px\]{
+  width: 60px;
+}
+
+.w-\[65px\]{
+  width: 65px;
+}
+
 .w-\[calc\(100\%\+32px\)\]{
   width: calc(100% + 32px);
 }
@@ -1719,6 +1775,10 @@ input[type]::placeholder{
   flex-direction: row;
 }
 
+.flex-row-reverse{
+  flex-direction: row-reverse;
+}
+
 .flex-col{
   flex-direction: column;
 }
@@ -1805,6 +1865,11 @@ input[type]::placeholder{
        column-gap: 32px;
 }
 
+.gap-x-8{
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
+
 .gap-y-16{
   row-gap: 16px;
 }
@@ -1817,6 +1882,10 @@ input[type]::placeholder{
   row-gap: 8px;
 }
 
+.place-self-end{
+  place-self: end;
+}
+
 .self-end{
   align-self: flex-end;
 }
@@ -1995,6 +2064,10 @@ input[type]::placeholder{
   border-bottom-width: 8px;
 }
 
+.\!border-b-0{
+  border-bottom-width: 0 !important;
+}
+
 .border-b{
   border-bottom-width: 1px;
 }
@@ -2187,6 +2260,10 @@ input[type]::placeholder{
   border-style: none;
 }
 
+.\!border-\[var\(--color-primary-600\)\]{
+  border-color: var(--color-primary-600) !important;
+}
+
 .\!border-transparent{
   border-color: transparent !important;
 }
@@ -7271,6 +7348,10 @@ input[type]::placeholder{
   padding-right: 42px !important;
 }
 
+.pb-128{
+  padding-bottom: 128px;
+}
+
 .pb-32{
   padding-bottom: 32px;
 }
@@ -7279,6 +7360,10 @@ input[type]::placeholder{
   padding-bottom: 64px;
 }
 
+.pl-32{
+  padding-left: 32px;
+}
+
 .pl-8{
   padding-left: 8px;
 }
@@ -8055,6 +8140,10 @@ input[type]::placeholder{
   text-decoration-line: line-through;
 }
 
+.decoration-\[var\(--color-primary-600\)\]{
+  text-decoration-color: var(--color-primary-600);
+}
+
 .decoration-2{
   text-decoration-thickness: 2px;
 }
@@ -12502,6 +12591,10 @@ input[type]::placeholder{
   --tw-border-opacity: 0.95;
 }
 
+.hover\:\!bg-transparent:hover{
+  background-color: transparent !important;
+}
+
 .hover\:bg-\[var\(--color-primary-100\)\]:hover{
   background-color: var(--color-primary-100);
 }
@@ -20857,10 +20950,19 @@ input[type]::placeholder{
   border-width: 0;
 }
 
+.active\:\!bg-transparent:active{
+  background-color: transparent !important;
+}
+
 .active\:bg-\[var\(--color-neutral-200\)\]:active{
   background-color: var(--color-neutral-200);
 }
 
+.active\:bg-primary-700:active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 56 162 / var(--tw-bg-opacity, 1));
+}
+
 .active\:text-\[var\(--color-neutral-900\)\]:active{
   color: var(--color-neutral-900);
 }
@@ -20936,15 +21038,16 @@ input[type]::placeholder{
     grid-column-start: 1;
   }
 
-  .xs\:col-start-3{
-    grid-column-start: 3;
-  }
-
   .xs\:my-16{
     margin-top: 16px;
     margin-bottom: 16px;
   }
 
+  .xs\:my-32{
+    margin-top: 32px;
+    margin-bottom: 32px;
+  }
+
   .xs\:mb-16{
     margin-bottom: 16px;
   }
@@ -20957,6 +21060,18 @@ input[type]::placeholder{
     margin-bottom: 64px;
   }
 
+  .xs\:ml-8{
+    margin-left: 8px;
+  }
+
+  .xs\:mt-16{
+    margin-top: 16px;
+  }
+
+  .xs\:mt-32{
+    margin-top: 32px;
+  }
+
   .xs\:mt-64{
     margin-top: 64px;
   }
@@ -20984,6 +21099,22 @@ input[type]::placeholder{
     height: 16px;
   }
 
+  .xs\:h-24{
+    height: 24px;
+  }
+
+  .xs\:\!w-\[191px\]{
+    width: 191px !important;
+  }
+
+  .xs\:\!w-\[89px\]{
+    width: 89px !important;
+  }
+
+  .xs\:w-\[118px\]{
+    width: 118px;
+  }
+
   .xs\:w-\[calc\(100\%\+32px\)\]{
     width: calc(100% + 32px);
   }
@@ -21336,6 +21467,10 @@ input[type]::placeholder{
     flex-direction: column;
   }
 
+  .xs\:items-start{
+    align-items: flex-start;
+  }
+
   .xs\:justify-start{
     justify-content: flex-start;
   }
@@ -26604,6 +26739,14 @@ input[type]::placeholder{
     padding-left: 0px;
   }
 
+  .xs\:pl-32{
+    padding-left: 32px;
+  }
+
+  .xs\:pl-\[9px\]{
+    padding-left: 9px;
+  }
+
   .xs\:pt-32{
     padding-top: 32px;
   }
@@ -27470,6 +27613,14 @@ input[type]::placeholder{
     grid-column-start: 7;
   }
 
+  .md\:col-end-5{
+    grid-column-end: 5;
+  }
+
+  .md\:col-end-8{
+    grid-column-end: 8;
+  }
+
   .md\:mx-auto{
     margin-left: auto;
     margin-right: auto;
@@ -27490,6 +27641,11 @@ input[type]::placeholder{
     margin-bottom: 16px;
   }
 
+  .md\:my-64{
+    margin-top: 64px;
+    margin-bottom: 64px;
+  }
+
   .md\:mb-0{
     margin-bottom: 0px;
   }
@@ -27498,6 +27654,10 @@ input[type]::placeholder{
     margin-bottom: 32px;
   }
 
+  .md\:mb-64{
+    margin-bottom: 64px;
+  }
+
   .md\:mb-8{
     margin-bottom: 8px;
   }
@@ -27506,6 +27666,18 @@ input[type]::placeholder{
     margin-bottom: 144px;
   }
 
+  .md\:ml-0{
+    margin-left: 0px;
+  }
+
+  .md\:mr-16{
+    margin-right: 16px;
+  }
+
+  .md\:mt-0{
+    margin-top: 0px;
+  }
+
   .md\:mt-128{
     margin-top: 128px;
   }
@@ -27514,10 +27686,18 @@ input[type]::placeholder{
     margin-top: 32px;
   }
 
+  .md\:mt-64{
+    margin-top: 64px;
+  }
+
   .md\:mt-\[18px\]{
     margin-top: 18px;
   }
 
+  .md\:mt-\[36px\]{
+    margin-top: 36px;
+  }
+
   .md\:line-clamp-1{
     overflow: hidden;
     display: -webkit-box;
@@ -27533,10 +27713,26 @@ input[type]::placeholder{
     display: none;
   }
 
+  .md\:h-40{
+    height: 40px;
+  }
+
   .md\:h-\[calc\(100\%-2px\)\]{
     height: calc(100% - 2px);
   }
 
+  .md\:\!w-\[148px\]{
+    width: 148px !important;
+  }
+
+  .md\:\!w-\[220px\]{
+    width: 220px !important;
+  }
+
+  .md\:w-\[137px\]{
+    width: 137px;
+  }
+
   .md\:w-\[calc\(\(\(var\(--footer-aux-vw\)-100\%\)\/2\)\+100\%\)\]{
     width: calc(((var(--footer-aux-vw) - 100%) / 2) + 100%);
   }
@@ -27905,6 +28101,10 @@ input[type]::placeholder{
     align-content: center;
   }
 
+  .md\:items-center{
+    align-items: center;
+  }
+
   .md\:justify-end{
     justify-content: flex-end;
   }
@@ -27947,6 +28147,10 @@ input[type]::placeholder{
     row-gap: 8px;
   }
 
+  .md\:self-center{
+    align-self: center;
+  }
+
   .md\:justify-self-start{
     justify-self: start;
   }
@@ -33997,6 +34201,10 @@ input[type]::placeholder{
     grid-column: span 1 / span 1;
   }
 
+  .xl\:col-span-10{
+    grid-column: span 10 / span 10;
+  }
+
   .xl\:col-span-12{
     grid-column: span 12 / span 12;
   }
@@ -34073,6 +34281,14 @@ input[type]::placeholder{
     grid-column-start: 7;
   }
 
+  .xl\:col-start-8{
+    grid-column-start: 8;
+  }
+
+  .xl\:col-start-9{
+    grid-column-start: 9;
+  }
+
   .xl\:col-end-9{
     grid-column-end: 9;
   }
@@ -34149,6 +34365,10 @@ input[type]::placeholder{
     width: 1120px;
   }
 
+  .xl\:w-\[175px\]{
+    width: 175px;
+  }
+
   .xl\:w-\[696px\]{
     width: 696px;
   }

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

@@ -32,6 +32,10 @@ export interface ButtonGroupProps extends Omit<HtmlHTMLAttributes<HTMLDivElement
      * Defines if the group allows multiple selection.
      */
     multiple?: BooleanProp;
+    /**
+     * Determines if buttons can be unselected.
+     */
+    allowUnselect?: BooleanProp;
     /**
      * Defines vertical or horizontal orientation.
      */

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

@@ -1,9 +1,9 @@
-import { BrandProps } from '../../../../../../components/header/brand/brand';
-import { AuthenticatedProps } from '../../../../../../components/header/general-bar/authenticated/authenticated';
-import { AuthenticatedBodyLinkProps } from '../../../../../../components/header/general-bar/authenticated/authenticated-body-link';
 import { AuthenticatedFooterActionProps } from '../../../../../../components/header/general-bar/authenticated/authenticated-footer-action';
 import { AuthenticatedHeaderProps } from '../../../../../../components/header/general-bar/authenticated/authenticated-header';
 import { GeneralBarProps } from '../../../../../../components/header/general-bar/general-bar';
+import { BrandProps } from '../../../../../../components/header/brand/brand';
+import { AuthenticatedProps } from '../../../../../../components/header/general-bar/authenticated/authenticated';
+import { AuthenticatedBodyLinkProps } from '../../../../../../components/header/general-bar/authenticated/authenticated-body-link';
 import { ReactElement } from 'react';
 export declare const getParsedAuthenticatedProps: (children?: ReactElement<BrandProps | GeneralBarProps> | ReactElement<BrandProps | GeneralBarProps>[]) => AuthenticatedProps | null;
 export declare const getParsedAuthenticatedHeaderProps: (children?: ReactElement<BrandProps | GeneralBarProps> | ReactElement<BrandProps | GeneralBarProps>[]) => AuthenticatedHeaderProps | null;

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

@@ -29,6 +29,7 @@ export * from './input-search-bar';
 export * from './input-select';
 export * from './input-text';
 export * from './input-textarea';
+export * from './input-time';
 export * from './link-wrapper';
 export * from './list';
 export * from './loader-dialog';

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

@@ -0,0 +1,32 @@
+import React, { Dispatch, FC, ReactNode, SetStateAction } from 'react';
+import { TimePeriod } from '../../../models';
+export interface Labels {
+    cancelLabel: string;
+    cancelAriaLabel?: string;
+    okLabel: string;
+    okAriaLabel?: string;
+    timepickerMessageLabel?: string;
+    timepickerMessageAriaLabel?: string;
+}
+interface TimePickerStateContextInitialValuesType {
+    selectedTime: string;
+    cancel: (selectedTime: string) => void;
+    labels: Labels;
+}
+interface TimePickerStateContextType extends TimePickerStateContextInitialValuesType {
+    selectedHour: string;
+    setSelectedHour: Dispatch<SetStateAction<string>>;
+    selectedMinute: string;
+    setSelectedMinute: Dispatch<SetStateAction<string>>;
+    selectedPeriod: TimePeriod;
+    setSelectedPeriod: Dispatch<SetStateAction<TimePeriod>>;
+    setSelectedTime: Dispatch<SetStateAction<string>>;
+}
+export declare const TimeInputContext: React.Context<TimePickerStateContextType | undefined>;
+export interface TimePickerStateProviderProps {
+    children: ReactNode;
+    initialValues: TimePickerStateContextInitialValuesType;
+}
+export declare const TimeInputContextProvider: FC<TimePickerStateProviderProps>;
+export declare const useTimeInputContext: () => TimePickerStateContextType;
+export {};

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

@@ -0,0 +1,2 @@
+export { InputTime } from './input-time';
+export type { InputTimeProps } from './input-time';

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

@@ -0,0 +1,78 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import './input-time.scss';
+import { BooleanProp, FeedbackState } from '../../models';
+export interface InputTimeProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * Input label text.
+     */
+    label?: string;
+    /**
+     * Show or hide input label.
+     */
+    hideLabel?: BooleanProp;
+    /**
+     * Sets the input 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 input.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Show or hide the leading icon.
+     */
+    hasIcon?: BooleanProp;
+    /**
+     * Name of the icon leading icon to be displayed.
+     */
+    icon?: string;
+    /**
+     * The placeholder to apply in the input minute part
+     */
+    minuteInputPlaceholder?: string;
+    /**
+     * The placeholder to apply in the input hour part
+     */
+    hourInputPlaceholder?: string;
+    /**
+     * Accessible text to apply to the trailing clock icon.
+     */
+    clockIconAriaLabel: string;
+    /**
+     * Label for the timepicker cancel button.
+     */
+    cancelLabel: string;
+    /**
+     * Accessible text for the timepicker cancel button.
+     */
+    cancelAriaLabel?: string;
+    /**
+     * Label for the timepicker ok button.
+     */
+    okLabel: string;
+    /**
+     * Accessible text for the timepicker ok button.
+     */
+    okAriaLabel?: string;
+    /**
+     * Show or hide the timepicker footer message.
+     */
+    hasTimepickerMessage?: BooleanProp;
+    /**
+     * Label for the timepicker footer message.
+     */
+    timepickerMessageLabel?: string;
+    /**
+     * Accessible text for the timepicker footer message.
+     */
+    timepickerMessageAriaLabel?: string;
+}
+export declare const InputTime: React.ForwardRefExoticComponent<Omit<InputTimeProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const DialogBody: FC;

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export interface TimePickerDropdownFooterProps {
+    setInputTextValue: (selectedTime: string) => void;
+}
+export declare const DialogFooter: FC<TimePickerDropdownFooterProps>;

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { Labels } from './contexts/time-input-state.context';
+import { BooleanProp } from '../../models';
+export interface TimePickerDropdownProps {
+    className?: string;
+    setInputTextValue: (selectedTime: string) => void;
+    onChange: (selectedTime: string) => void;
+    onCancel: (selectedTime: string) => void;
+    hasTimepickerMessage?: BooleanProp;
+    textCurrentValue: string;
+    labels: Labels;
+}
+export declare const TimePickerDropdown: FC<TimePickerDropdownProps>;

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

@@ -0,0 +1,8 @@
+import React, { ComponentPropsWithRef, ForwardRefRenderFunction } from 'react';
+import './time-text.scss';
+export interface TimeTextProps extends ComponentPropsWithRef<'input'> {
+    hourInputPlaceholder?: string;
+    minuteInputPlaceholder?: string;
+}
+export declare const InnerComponent: ForwardRefRenderFunction<HTMLInputElement, TimeTextProps>;
+export declare const TimeText: React.ForwardRefExoticComponent<Omit<TimeTextProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,24 @@
+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 timePeriod: {
+    am: string;
+    pm: string;
+};
+export declare const startTime: {
+    hour: string;
+    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) => {
+    selectedHour: string;
+    selectedMinute: string;
+    selectedPeriod: TimePeriod;
+};
+export declare const isTimeTextValid: (timeText: string | number | undefined) => boolean;

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

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

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

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