@aragon/gov-ui-kit 0.0.0-20250408144901

package/dist/types/src/core/components/forms/checkbox/checkbox.d.ts

@@ -0,0 +1,30 @@
+import { type ComponentProps } from 'react';
+export type CheckboxState = boolean | 'indeterminate';
+export interface ICheckboxProps extends ComponentProps<'button'> {
+    /**
+     * Label of the checkbox.
+     */
+    label: string;
+    /**
+     * Position of the label.
+     * @default right
+     */
+    labelPosition?: 'right' | 'left';
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: CheckboxState;
+    /**
+     * Callback when the checked state changes.
+     */
+    onCheckedChange?: (checked: CheckboxState) => void;
+    /**
+     * Indicates if the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Id of the checkbox.
+     */
+    id?: string;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<ICheckboxProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/core/components/forms/checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxState, type ICheckboxProps } from './checkbox';

package/dist/types/src/core/components/forms/checkboxCard/checkboxCard.d.ts

@@ -0,0 +1,42 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ITagProps } from '../../tag';
+import { type CheckboxState } from '../checkbox/checkbox';
+export interface ICheckboxCardProps extends ComponentProps<'button'> {
+    /**
+     * Avatar of the checkbox card.
+     */
+    avatar?: string;
+    /**
+     * Label of the checkbox.
+     */
+    label: string;
+    /**
+     * Description of the checkbox.
+     */
+    description?: string;
+    /**
+     * Optional tag for the checkbox.
+     */
+    tag?: ITagProps;
+    /**
+     * The checked state of the checkbox.
+     */
+    checked?: CheckboxState;
+    /**
+     * Callback when the checked state changes.
+     */
+    onCheckedChange?: (checked: CheckboxState) => void;
+    /**
+     * Indicates if the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Id of the checkbox.
+     */
+    id?: string;
+    /**
+     * Additional children to render when the checkbox is checked.
+     */
+    children?: ReactNode;
+}
+export declare const CheckboxCard: import("react").ForwardRefExoticComponent<Omit<ICheckboxCardProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/core/components/forms/checkboxCard/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxCard, type ICheckboxCardProps } from './checkboxCard';

package/dist/types/src/core/components/forms/checkboxGroup/checkboxGroup.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { type IInputContainerBaseProps } from '../inputContainer';
+export interface ICheckboxGroupProps extends Pick<IInputContainerBaseProps, 'alert' | 'label' | 'helpText' | 'isOptional'> {
+    /**
+     * Additional classes for the component.
+     */
+    className?: string;
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+}
+export declare const CheckboxGroup: React.FC<ICheckboxGroupProps>;

package/dist/types/src/core/components/forms/checkboxGroup/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxGroup, type ICheckboxGroupProps } from './checkboxGroup';

package/dist/types/src/core/components/forms/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useInputProps, type IUseInputPropsResult } from './useInputProps';
+export { useNumberMask, type IUseNumberMaskProps, type IUseNumberMaskResult } from './useNumberMask';

package/dist/types/src/core/components/forms/hooks/useInputProps.d.ts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes } from 'react';
+import type { IInputComponentProps, IInputContainerProps, InputComponentElement } from '../inputContainer';
+export interface IUseInputPropsResult<TElement extends InputComponentElement> {
+    /**
+     * Properties for the InputContainer component.
+     */
+    containerProps: IInputContainerProps;
+    /**
+     * Properties for the input element.
+     */
+    inputProps: InputHTMLAttributes<TElement>;
+}
+/**
+ * Processes the InputComponent properties object to split it into container-specific and input-element-specific properties.
+ * @param props The InputComponent properties
+ * @returns The InputContainer and input element properties.
+ */
+export declare const useInputProps: <TElement extends InputComponentElement>(props: IInputComponentProps<TElement>) => IUseInputPropsResult<TElement>;

package/dist/types/src/core/components/forms/hooks/useNumberMask.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps } from 'react';
+import { useIMask } from 'react-imask';
+export interface IUseNumberMaskProps extends Pick<ComponentProps<'input'>, 'min' | 'max' | 'value'> {
+    /**
+     * Prefix for the number mask.
+     */
+    prefix?: string;
+    /**
+     * Suffix for the number mask.
+     */
+    suffix?: string;
+    /**
+     * Callback called on value change. Override the default onChange callback to only emit the updated value because
+     * the library in use formats the user input and emit the valid number when valid.
+     */
+    onChange?: (value: string) => void;
+}
+export interface IUseNumberMaskResult extends ReturnType<typeof useIMask<HTMLInputElement>> {
+}
+export declare const useNumberMask: (props: IUseNumberMaskProps) => IUseNumberMaskResult;

package/dist/types/src/core/components/forms/index.d.ts

@@ -0,0 +1,18 @@
+export * from './checkbox';
+export * from './checkboxCard';
+export * from './checkboxGroup';
+export * from './hooks';
+export * from './inputContainer';
+export * from './inputDate';
+export * from './inputFileAvatar';
+export * from './inputNumber';
+export * from './inputNumberMax';
+export * from './inputSearch';
+export * from './inputText';
+export * from './inputTime';
+export * from './radio';
+export * from './radioCard';
+export * from './radioGroup';
+export * from './switch';
+export * from './textArea';
+export * from './textAreaRichText';

package/dist/types/src/core/components/forms/inputContainer/index.d.ts

@@ -0,0 +1,2 @@
+export { InputContainer } from './inputContainer';
+export type { IInputComponentProps, IInputContainerAlert, IInputContainerBaseProps, IInputContainerProps, InputComponentElement, InputVariant, } from './inputContainer.api';

package/dist/types/src/core/components/forms/inputContainer/inputContainer.api.d.ts

@@ -0,0 +1,78 @@
+import type { ComponentPropsWithRef, InputHTMLAttributes, ReactNode } from 'react';
+import type { AlertVariant } from '../../alerts';
+export type InputVariant = 'default' | 'warning' | 'critical';
+export interface IInputContainerAlert {
+    /**
+     * Message to be displayed.
+     */
+    message: string;
+    /**
+     * Variant of the alert.
+     */
+    variant: Exclude<AlertVariant, 'info' | 'success'>;
+}
+export interface IInputContainerBaseProps {
+    /**
+     * Label of the input.
+     */
+    label?: string;
+    /**
+     * Variant of the input.
+     * @default default
+     */
+    variant?: InputVariant;
+    /**
+     * Help text displayed above the input.
+     */
+    helpText?: string;
+    /**
+     * Displays the optional tag when set to true.
+     */
+    isOptional?: boolean;
+    /**
+     * Displays the input as disabled when set to true.
+     */
+    disabled?: boolean;
+    /**
+     * Alert displayed below the input.
+     */
+    alert?: IInputContainerAlert;
+    /**
+     * Id of the input field.
+     */
+    id: string;
+    /**
+     * Displays an input length counter when set.
+     */
+    maxLength?: number;
+    /**
+     * Current input length displayed when maxLength property is set.
+     */
+    inputLength?: number;
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Classes for the component.
+     */
+    className?: string;
+    /**
+     * Classes for the input wrapper.
+     */
+    wrapperClassName?: string;
+    /**
+     * Does not render the default input wrapper when set to true, to be used for using the base input container
+     * properties (label, helpText, ..) for components without a input wrapper (e.g. file inputs).
+     */
+    useCustomWrapper?: boolean;
+}
+export interface IInputContainerProps extends IInputContainerBaseProps, Omit<ComponentPropsWithRef<'div'>, 'id'> {
+}
+export type InputComponentElement = HTMLInputElement | HTMLTextAreaElement;
+export interface IInputComponentProps<TElement extends InputComponentElement = HTMLInputElement> extends Omit<IInputContainerBaseProps, 'children' | 'id' | 'inputLength' | 'useCustomWrapper'>, Omit<InputHTMLAttributes<TElement>, 'type'> {
+    /**
+     * Classes for the input element.
+     */
+    inputClassName?: string;
+}

package/dist/types/src/core/components/forms/inputContainer/inputContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { IInputContainerProps } from './inputContainer.api';
+/**
+ * The InputContainer component provides a consistent and shared styling foundation for various input components, such
+ * as `InputText`, `InputNumber` and others. It also manages properties that are shared across all input components,
+ * including `label`, `helpText` and more.
+ */
+export declare const InputContainer: React.ForwardRefExoticComponent<Omit<IInputContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/core/components/forms/inputDate/index.d.ts

@@ -0,0 +1 @@
+export { InputDate, type IInputDateProps } from './inputDate';

package/dist/types/src/core/components/forms/inputDate/inputDate.d.ts

@@ -0,0 +1,4 @@
+import { type IInputComponentProps } from '../inputContainer';
+export interface IInputDateProps extends Omit<IInputComponentProps, 'maxLength'> {
+}
+export declare const InputDate: React.FC<IInputDateProps>;

package/dist/types/src/core/components/forms/inputFileAvatar/index.d.ts

@@ -0,0 +1,2 @@
+export { InputFileAvatar } from './inputFileAvatar';
+export { InputFileAvatarError, type IInputFileAvatarProps, type IInputFileAvatarValue } from './inputFileAvatar.api';

package/dist/types/src/core/components/forms/inputFileAvatar/inputFileAvatar.api.d.ts

@@ -0,0 +1,62 @@
+import { type Accept } from 'react-dropzone';
+import { type IInputContainerBaseProps } from '../inputContainer';
+export declare enum InputFileAvatarError {
+    SQUARE_ONLY = "square-only",
+    WRONG_DIMENSION = "wrong-dimension",
+    UNKNOWN_ERROR = "unknown-file-error",
+    FILE_INVALID_TYPE = "file-invalid-type",
+    TOO_MANY_FILES = "too-many-files",
+    FILE_TOO_LARGE = "file-too-large"
+}
+export interface IInputFileAvatarValue {
+    /**
+     * URL of the image for the preview.
+     */
+    url?: string;
+    /**
+     * File object of the image.
+     */
+    file?: File;
+    /**
+     * Error message if image upload fails.
+     */
+    error?: InputFileAvatarError;
+}
+export interface IInputFileAvatarProps extends Pick<IInputContainerBaseProps, 'alert' | 'label' | 'helpText' | 'isOptional' | 'variant' | 'disabled'> {
+    /**
+     * Function that is called when a file is selected.
+     * If the file is rejected, the function is not called.
+     * If the file is accepted, the function is called with the file as an argument and a url string for generating the preview.
+     */
+    onChange: (value?: IInputFileAvatarValue) => void;
+    /**
+     *  The current value of the input.
+     */
+    value?: IInputFileAvatarValue;
+    /**
+     * Allowed file extensions, it must be an object with the keys set to the MIME type
+     * and the values an array of file extensions (see https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker#accept)
+     * @default { 'image/png': [], 'image/gif': [], 'image/jpeg': ['.jpg', '.jpeg'] }
+     */
+    acceptedFileTypes?: Accept;
+    /**
+     * Maximum file size in bytes (e.g. 2097152 bytes | 2 * 1024 ** 2 = 2MiB).
+     */
+    maxFileSize?: number;
+    /**
+     * Minimum dimension of the image in pixels.
+     */
+    minDimension?: number;
+    /**
+     * Maximum dimension of the image in pixels.
+     */
+    maxDimension?: number;
+    /**
+     * If true, only square images are accepted.
+     */
+    onlySquare?: boolean;
+    /**
+     * Optional ID for the file avatar input.
+     */
+    id?: string;
+}

package/dist/types/src/core/components/forms/inputFileAvatar/inputFileAvatar.d.ts

@@ -0,0 +1,2 @@
+import { type IInputFileAvatarProps } from './inputFileAvatar.api';
+export declare const InputFileAvatar: React.FC<IInputFileAvatarProps>;

package/dist/types/src/core/components/forms/inputNumber/index.d.ts

@@ -0,0 +1 @@
+export { InputNumber, type IInputNumberProps } from './inputNumber';

package/dist/types/src/core/components/forms/inputNumber/inputNumber.d.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+import { type IUseNumberMaskProps } from '../hooks';
+import { type IInputComponentProps } from '../inputContainer';
+export interface IInputNumberProps extends Omit<IInputComponentProps, 'onChange' | 'step' | 'min' | 'max' | 'maxLength'> {
+    /**
+     * The minimum value that the number input accepts.
+     * @default Number.MIN_SAFE_INTEGER
+     */
+    min?: number;
+    /**
+     * The maximum value that the number input accepts.
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+    /**
+     * Optional string prepended to the input value.
+     */
+    prefix?: string;
+    /**
+     * Specifies the granularity of the intervals for the input value.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Optional string appended to the input value.
+     */
+    suffix?: string;
+    /**
+     * @see IUseNumberMaskProps['onChange']
+     */
+    onChange?: IUseNumberMaskProps['onChange'];
+}
+export declare const InputNumber: React.ForwardRefExoticComponent<IInputNumberProps & React.RefAttributes<HTMLInputElement>>;

package/dist/types/src/core/components/forms/inputNumberMax/index.d.ts

@@ -0,0 +1 @@
+export { InputNumberMax, type IInputNumberMaxProps } from './inputNumberMax';

package/dist/types/src/core/components/forms/inputNumberMax/inputNumberMax.d.ts

@@ -0,0 +1,13 @@
+import { type IUseNumberMaskProps } from '../hooks';
+import { type IInputComponentProps } from '../inputContainer';
+export interface IInputNumberMaxProps extends Omit<IInputComponentProps, 'maxLength' | 'onChange'> {
+    /**
+     * Maximum number set on max button click.
+     */
+    max: number;
+    /**
+     * @see IUseNumberMaskProps['onChange']
+     */
+    onChange?: IUseNumberMaskProps['onChange'];
+}
+export declare const InputNumberMax: React.FC<IInputNumberMaxProps>;

package/dist/types/src/core/components/forms/inputSearch/index.d.ts

@@ -0,0 +1 @@
+export { InputSearch, type IInputSearchProps } from './inputSearch';

package/dist/types/src/core/components/forms/inputSearch/inputSearch.d.ts

@@ -0,0 +1,8 @@
+import { type IInputComponentProps } from '../inputContainer';
+export interface IInputSearchProps extends IInputComponentProps {
+    /**
+     * Displays a loading indicator when set to true.
+     */
+    isLoading?: boolean;
+}
+export declare const InputSearch: import("react").ForwardRefExoticComponent<IInputSearchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/src/core/components/forms/inputText/index.d.ts

@@ -0,0 +1,2 @@
+export { InputText } from './inputText';
+export type { IInputTextProps } from './inputText.api';

package/dist/types/src/core/components/forms/inputText/inputText.api.d.ts

@@ -0,0 +1,12 @@
+import type { IInputComponentProps } from '../inputContainer';
+export interface IInputTextProps extends IInputComponentProps {
+    /**
+     * Text to be rendered beside the input field.
+     */
+    addon?: string;
+    /**
+     * Position of the addon element in relation to the input field.
+     * @default 'left'
+     */
+    addonPosition?: 'left' | 'right';
+}

package/dist/types/src/core/components/forms/inputText/inputText.d.ts

@@ -0,0 +1,2 @@
+import type { IInputTextProps } from './inputText.api';
+export declare const InputText: import("react").ForwardRefExoticComponent<IInputTextProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/src/core/components/forms/inputTime/index.d.ts

@@ -0,0 +1 @@
+export { InputTime, type IInputTimeProps } from './inputTime';

package/dist/types/src/core/components/forms/inputTime/inputTime.d.ts

@@ -0,0 +1,4 @@
+import { type IInputComponentProps } from '../inputContainer';
+export interface IInputTimeProps extends Omit<IInputComponentProps, 'maxLength' | 'inputLength'> {
+}
+export declare const InputTime: import("react").ForwardRefExoticComponent<IInputTimeProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/types/src/core/components/forms/radio/index.d.ts

@@ -0,0 +1 @@
+export { Radio, type IRadioProps } from './radio';

package/dist/types/src/core/components/forms/radio/radio.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentProps } from 'react';
+export interface IRadioProps extends ComponentProps<'button'> {
+    /**
+     * Radio label
+     */
+    label: string;
+    /**
+     * Indicates the position of the label
+     * @default right
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * The value of the radio item.
+     */
+    value: string;
+    /**
+     * Indicates if the radio is disabled.
+     */
+    disabled?: boolean;
+}
+export declare const Radio: import("react").ForwardRefExoticComponent<Omit<IRadioProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/core/components/forms/radioCard/index.d.ts

@@ -0,0 +1 @@
+export { RadioCard, type IRadioCardProps } from './radioCard';

package/dist/types/src/core/components/forms/radioCard/radioCard.d.ts

@@ -0,0 +1,33 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { type ITagProps } from '../../tag';
+export interface IRadioCardProps extends ComponentProps<'button'> {
+    /**
+     * Radio card avatar image source
+     */
+    avatar?: string;
+    /**
+     * Description
+     */
+    description?: string;
+    /**
+     * Radio label
+     */
+    label: string;
+    /**
+     * Radio card tag
+     */
+    tag?: ITagProps;
+    /**
+     * The value of the radio item.
+     */
+    value: string;
+    /**
+     * Indicates if the radio is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional children to render when the radio is selected.
+     */
+    children?: ReactNode;
+}
+export declare const RadioCard: import("react").ForwardRefExoticComponent<Omit<IRadioCardProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/src/core/components/forms/radioGroup/index.d.ts

@@ -0,0 +1 @@
+export { RadioGroup, type IRadioGroupProps } from './radioGroup';

package/dist/types/src/core/components/forms/radioGroup/radioGroup.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from 'react';
+import { type IInputContainerBaseProps } from '../inputContainer';
+export interface IRadioGroupProps extends Pick<IInputContainerBaseProps, 'alert' | 'label' | 'helpText' | 'isOptional'> {
+    /**
+     * The value of the selected radio item.
+     */
+    value?: string;
+    /**
+     * The default value of the selected radio item.
+     */
+    defaultValue?: string;
+    /**
+     * Callback when the value changes.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * The name of the radio group.
+     */
+    name?: string;
+    /**
+     * Whether the radio group is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes for the component.
+     */
+    className?: string;
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+}
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<IRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/src/core/components/forms/switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch, type ISwitchProps } from './switch';

package/dist/types/src/core/components/forms/switch/switch.d.ts

@@ -0,0 +1,39 @@
+import { type IInputContainerBaseProps } from '../inputContainer';
+export interface ISwitchProps extends Pick<IInputContainerBaseProps, 'alert' | 'label' | 'helpText' | 'isOptional'> {
+    /**
+     * Indicates whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * CSS class name
+     */
+    className?: string;
+    /**
+     * The default checked state of the switch
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * Indicates whether the switch is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The ID of the switch
+     */
+    id?: string;
+    /**
+     * The inline label of the switch
+     */
+    inlineLabel?: string;
+    /**
+     * The name of the switch
+     */
+    name?: string;
+    /**
+     * Event handler for when the checked state changes
+     * @param checked - The new checked state
+     */
+    onCheckedChanged?: (checked: boolean) => void;
+}
+export declare const Switch: React.FC<ISwitchProps>;

package/dist/types/src/core/components/forms/textArea/index.d.ts

@@ -0,0 +1 @@
+export { TextArea, type ITextAreaProps } from './textArea';

package/dist/types/src/core/components/forms/textArea/textArea.d.ts

@@ -0,0 +1,4 @@
+import { type IInputComponentProps } from '../inputContainer';
+export interface ITextAreaProps extends IInputComponentProps<HTMLTextAreaElement> {
+}
+export declare const TextArea: import("react").ForwardRefExoticComponent<ITextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/types/src/core/components/forms/textAreaRichText/index.d.ts

@@ -0,0 +1 @@
+export { TextAreaRichText, type ITextAreaRichTextProps } from './textAreaRichText';

package/dist/types/src/core/components/forms/textAreaRichText/textAreaRichText.d.ts

@@ -0,0 +1,24 @@
+import { type IInputContainerProps } from '../inputContainer';
+export interface ITextAreaRichTextProps extends Omit<IInputContainerProps, 'maxLength' | 'inputLength' | 'value' | 'onChange' | 'id'> {
+    /**
+     * Current value of the input.
+     */
+    value?: string;
+    /**
+     * Id of the input.
+     */
+    id?: string;
+    /**
+     * Callback called on value change.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder of the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to render the editor on the first render or not.
+     */
+    immediatelyRender?: boolean;
+}
+export declare const TextAreaRichText: React.FC<ITextAreaRichTextProps>;

package/dist/types/src/core/components/forms/textAreaRichText/textAreaRichTextActions.d.ts

@@ -0,0 +1,31 @@
+import type { Editor } from '@tiptap/react';
+import { IconType } from '../../icon';
+export interface ITextAreaRichTextAction {
+    /**
+     * Icon of the action.
+     */
+    icon: IconType;
+    /**
+     * TipTap command or callback called on action click.
+     */
+    action?: () => unknown;
+    /**
+     * Hides the action when set to true.
+     */
+    hidden?: boolean;
+}
+export interface ITextAreaRichTextActionsProps {
+    /**
+     * Instance of the TipTap editor.
+     */
+    editor: Editor | null;
+    /**
+     * Renders the actions as disabled when set to true.
+     */
+    disabled?: boolean;
+    /**
+     * Callback called on expand action click.
+     */
+    onExpandClick?: () => void;
+}
+export declare const TextAreaRichTextActions: React.FC<ITextAreaRichTextActionsProps>;