@foris/avocado-suite 1.15.0 → 1.17.0

package/dist/components/Pill/Pill.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { IconTypes, Color } from '../../../../avocado-icons';
-export interface PillProps {
-    /** Optional Icon name */
-    icon?: IconTypes;
-    /** Overwrite icon original color */
+export type PillStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface PillProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+    /** Root element. Use `span` inside buttons or running text */
+    as?: 'div' | 'span';
+    /** Colors the pill from the theme tokens of the status. `color` and `textColor` take precedence */
+    status?: PillStatus;
+    /** Avocado icon name, or an element (e.g. a Lucide icon) rendered hidden from assistive technology */
+    icon?: IconTypes | React.ReactElement;
+    /** Overwrite icon original color. Applies to avocado icon names only */
     iconColor?: `${Color}`;
-    /** Icon filled state */
+    /** Icon filled state. Applies to avocado icon names only */
     iconFilled?: boolean;
     /** Overwrite pill original color */
     color?: `${Color}`;
@@ -13,8 +18,12 @@ export interface PillProps {
     textColor?: `${Color}`;
     /** Controls pill outlined state */
     outlined?: boolean;
+    /** Renders the pill as a count badge showing this number instead of `children` */
+    count?: number;
+    /** Highest count shown; a greater `count` renders as `{max}+` */
+    max?: number;
     /** content pill */
-    children: React.ReactNode | string;
+    children?: React.ReactNode | string;
     /** overwrite className */
     className?: string;
 }

package/dist/components/checkbox/Checkbox.d.ts

@@ -10,6 +10,10 @@ export interface CheckboxProps extends React.DetailedHTMLProps<React.InputHTMLAt
     labelRight?: ReactNode | string;
     /** disabled state */
     disabled?: boolean;
+    /** Help text shown below the checkbox and linked to it */
+    helpText?: string;
+    /** Error message shown below the checkbox; marks it invalid */
+    error?: string;
     ref?: any;
 }
 declare const Checkbox: FC<CheckboxProps>;

package/dist/components/link/Link.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
 import { IconTypes } from '../../../../avocado-icons';
 export interface LinkProps extends React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     /** Render content link */
@@ -17,8 +17,8 @@ export interface LinkProps extends React.DetailedHTMLProps<React.AnchorHTMLAttri
     inverse?: boolean;
     /** Use size 'sm' or 'md'. Default 'md' */
     size?: 'sm' | 'md';
-    /** Handle onClock event */
-    onClick?: () => void;
+    /** Receives the click event; call `preventDefault()` to route in-app. Not called when disabled */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 declare const Link: FC<LinkProps>;
 export default Link;

package/dist/components/modal/Modal.d.ts

@@ -1,5 +1,6 @@
-import { type ReactNode, type FC } from 'react';
+import { type FC, type ReactNode } from 'react';
 import { type Color } from '../../../../avocado-icons';
+import { type FocusTarget } from '../../utils/focus/useDialogFocus';
 type HeaderStatusColor = 'warning' | 'danger' | Extract<keyof typeof Color, 'palette_1_50' | 'palette_2_50' | 'palette_3_50' | 'palette_4_50' | 'palette_5_50' | 'palette_6_50' | 'palette_7_50' | 'palette_8_50' | 'palette_9_50' | 'palette_10_50' | 'palette_11_50' | 'palette_12_50' | 'palette_13_50' | 'palette_14_50' | 'palette_15_50' | 'palette_16_50' | 'palette_17_50' | 'palette_18_50'>;
 export interface ModalProps {
     /** Footer actions or buttons */
@@ -20,6 +21,22 @@ export interface ModalProps {
     open: boolean;
     /** Header bordered */
     headerBordered?: boolean;
+    /** `alertdialog` for destructive or urgent confirmations */
+    role?: 'dialog' | 'alertdialog';
+    /** Accessible name when `header` is not a string */
+    accessibleLabel?: string;
+    /** Id of the element that describes the dialog */
+    describedBy?: string;
+    /** Accessible name of the close button. Defaults to a localized "Close" */
+    closeLabel?: string;
+    /** Element focused on open, as a ref or a function. Defaults to the first focusable element */
+    initialFocus?: FocusTarget;
+    /** Element focused on close when the opener is no longer in the document */
+    finalFocus?: () => HTMLElement | null;
+    /** Ignores Escape */
+    disableEscape?: boolean;
+    /** Ignores every close request and disables the close button */
+    closeDisabled?: boolean;
 }
 declare const Modal: FC<ModalProps>;
 export default Modal;

package/dist/components/modal/modal.locale.d.ts

@@ -0,0 +1,8 @@
+export declare const MODAL_STRINGS: {
+    en: {
+        close: string;
+    };
+    es: {
+        close: string;
+    };
+};

package/dist/components/select/Select.d.ts

@@ -7,6 +7,8 @@ export interface SelectProps extends Props {
     disabled?: boolean;
     /** Error option */
     error?: string | boolean;
+    /** Help text shown below the select. Hidden while a string `error` is shown */
+    helpText?: string;
     /** Text to be displayed representing the option */
     label?: string;
     /** [react-select] Array of options that populate the select menu */

package/dist/components/select/components/SelectIndicators.d.ts

@@ -2,6 +2,7 @@ import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
 export declare const ClearIndicator: (props: ClearIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 interface ErrorIndicator {
+    id?: string;
     message: string;
 }
 export declare const ErrorIndicator: (props: ErrorIndicator) => import("react/jsx-runtime").JSX.Element;

package/dist/components/select/components/SelectInput.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { InputProps } from 'react-select';
+/** Space-separated ids of the help and error texts that describe the input */
+export declare const SelectDescriptionContext: import("react").Context<string | undefined>;
+export declare const SelectInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/switch/Switch.d.ts

@@ -1,12 +1,12 @@
-import type { FC } from 'react';
-export interface SwitchProps {
+import type { AriaAttributes, FC, InputHTMLAttributes } from 'react';
+export interface SwitchProps extends AriaAttributes, Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'> {
     /** Indicates if the switch is on */
     checked: boolean;
     /** overwrite className */
     className?: string;
     /** Disables the switch if true */
     disabled?: boolean;
-    /** Optional label displayed next to the switch */
+    /** Optional label displayed next to the switch; without it, name the switch with `aria-label` or `aria-labelledby` */
     label?: string;
     /** Callback fired when the switch state changes */
     onChange: (checked: boolean) => void;

package/dist/components/tabs/Tabs.d.ts

@@ -1,18 +1,36 @@
-import { FC, ReactNode } from 'react';
+import { FC, KeyboardEvent, MouseEvent, ReactNode } from 'react';
+import { IconTypes } from '../../../../avocado-icons';
 export interface TabItemProps {
-    children: ReactNode;
+    /** Panel content. Route tabs render no panel, so the page renders it */
+    children?: ReactNode;
+    /** Number shown after the label, as part of the tab's accessible name */
+    count?: number;
     disabled?: boolean;
+    /** Link target. When every item has one, the tabs render as a `nav` of links */
+    href?: string;
+    /** Decorative icon shown before the label */
+    icon?: IconTypes;
     label: ReactNode;
 }
+type TabClickEvent = MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>;
 export interface TabsProps {
-    /** Current index */
+    /** Accessible name of the tab list */
+    'aria-label'?: string;
+    /** Content at the end of the tab row, outside the tab list (e.g. a toolbar) */
+    actions?: ReactNode;
+    /** Current index. Route tabs always follow it when it is set */
     activeIndex?: number;
     /** Overwrite className */
     className?: string;
+    /** Base for the tab and panel ids. Defaults to a generated id */
+    id?: string;
     /** Configure tabs content */
     items: TabItemProps[];
-    /** Callback that will be triggered when one of the tabs is clicked. */
-    onClick?: (index: number) => void;
+    /**
+     * Called when a tab is activated, by click or by the arrow keys. Route tabs can call
+     * `event.preventDefault()` to navigate client-side.
+     */
+    onClick?: (index: number, event: TabClickEvent) => void;
     /**
      * Keeps the outgoing panel's height as the incoming panel's `min-height` on every switch,
      * so the page does not jump. The `min-height` only grows while `Tabs` stays mounted.

package/dist/components/tag/Tag.d.ts

@@ -5,8 +5,8 @@ declare const variants: {
     readonly Filled: "filled";
 };
 export type TagType = (typeof variants)[keyof typeof variants];
-export type TagSize = 'sm' | 'lg';
-export interface ITag {
+export type TagSize = 'md' | 'sm';
+export interface ITag extends Omit<React.AriaAttributes, 'aria-pressed'> {
     /** Content of the component tag */
     children?: ReactNode;
     /** Overwrite className */
@@ -17,8 +17,19 @@ export interface ITag {
     type?: TagType;
     /** Icon name */
     icon?: IconTypes;
-    /** Controls his active state */
+    /**
+     * Shows the active style only, with no toggle semantics.
+     * @deprecated Use `pressed`, which also sets `aria-pressed`.
+     */
     active?: boolean;
+    /** Toggle state: sets `aria-pressed` on the button and shows the active style when true */
+    pressed?: boolean;
+    /** Number shown after the label, read as part of the tag's name */
+    count?: number;
+    /** Tag size */
+    size?: TagSize;
+    /** Native title of the tag button */
+    title?: string;
     /** Action when clicking on the component */
     onClick?: () => void;
     /** Action when clicking on the icon of the component */

package/dist/components/text-field/TextField.d.ts

@@ -3,12 +3,20 @@ import type { IconTypes } from '../../../../avocado-icons';
 export interface TextFieldProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
     /** If allow to remove input content with clear icon	 */
     allowClear?: boolean;
+    /** Accessible name of the clear button. Defaults to a localized "Clear" */
+    clearLabel?: string;
     /** Overwrite className */
     className?: string;
+    /** Supporting text shown under the input; it stays visible next to a status text */
+    helpText?: string;
     /** Set the icon */
     icon?: IconTypes;
+    /** Side of the input where the icon is placed */
+    iconPosition?: 'left' | 'right';
     /** Set top label */
     label?: string;
+    /** Show a "current / max" counter; unlike the native `maxLength`, it does not cut the text */
+    maxCount?: number;
     /** Set validation status	 */
     status?: 'error' | 'warning' | 'blocked' | 'unsaved';
     /** Set display for validation status	 */

package/dist/components/text-field/textField.locale.d.ts

@@ -0,0 +1,8 @@
+export declare const TEXT_FIELD_STRINGS: {
+    en: {
+        clear: string;
+    };
+    es: {
+        clear: string;
+    };
+};

package/dist/components/tooltip/Tooltip.d.ts

@@ -20,6 +20,8 @@ export interface TooltipProps {
     notShowArrow?: boolean;
     /** The placement of the popper relative to its reference */
     placement?: keyof typeof PlacementEnum;
+    /** `rich` wraps longer content on the surface color, for a help popover */
+    variant?: 'default' | 'rich';
     visible?: boolean;
 }
 declare const Tooltip: FC<TooltipProps>;