@salt-ds/lab 1.0.0-alpha.0

package/dist-types/control-label/ControlLabel.d.ts

@@ -0,0 +1,9 @@
+import React, { LabelHTMLAttributes, ReactNode } from "react";
+import "./ControlLabel.css";
+export interface ControlLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    disabled?: boolean;
+    label?: ReactNode;
+    labelPlacement?: "left" | "right";
+}
+export declare const baseName = "saltControlLabel";
+export declare const ControlLabel: React.ForwardRefExoticComponent<ControlLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist-types/control-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./ControlLabel";

package/dist-types/deck-item/DeckItem.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+import { LayoutAnimation } from "../deck-layout";
+import "./DeckItem.css";
+export interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {
+    activeIndex?: number;
+    animation?: LayoutAnimation;
+    index: number;
+    role?: string;
+}
+export declare const DeckItem: import("react").ForwardRefExoticComponent<DeckItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/deck-item/index.d.ts

@@ -0,0 +1 @@
+export * from "./DeckItem";

package/dist-types/deck-layout/DeckLayout.d.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes } from "react";
+import { DeckItemProps } from "../deck-item";
+import "./DeckLayout.css";
+export declare type LayoutAnimation = "slide" | "fade";
+export declare type LayoutAnimationDirection = "horizontal" | "vertical";
+export declare type LayoutAnimationTransition = "increase" | "decrease";
+export interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The initial item to render.
+     **/
+    activeIndex?: number;
+    /**
+     * The animation when the slides are shown.
+     **/
+    animation?: LayoutAnimation;
+    /**
+     * The direction in which items will transition.
+     **/
+    direction?: LayoutAnimationDirection;
+    /**
+     * Props to be passed to the DeckItem component.
+     */
+    deckItemProps?: Partial<DeckItemProps>;
+}
+export declare const DeckLayout: import("react").ForwardRefExoticComponent<DeckLayoutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/deck-layout/index.d.ts

@@ -0,0 +1 @@
+export * from "./DeckLayout";

package/dist-types/dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+import { ValidationStatus } from "@salt-ds/core";
+import { HTMLAttributes } from "react";
+import { ScrimProps } from "../scrim";
+import "./Dialog.css";
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+    autoFocusRef?: ScrimProps["autoFocusRef"];
+    height?: string | number;
+    onClose?: () => void;
+    open?: boolean;
+    status?: ValidationStatus;
+    width?: string | number;
+    enableBackdropClick?: boolean;
+    disablePortal?: boolean;
+}
+/**
+ * The Dialog is a window that contains text and interactive components.
+ * By default, Dialog is non-modal, but supports modal behaviour as well.
+ */
+export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogActions.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+import "./DialogActions.css";
+export interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const DialogActions: import("react").ForwardRefExoticComponent<DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogContent.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from "react";
+import "./DialogContent.css";
+export interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/DialogTitle.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, SyntheticEvent } from "react";
+import "./DialogTitle.css";
+export interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Disable the built-in ARIA heading attributes.
+     */
+    disableAria?: boolean;
+    onClose?: (event: SyntheticEvent) => void;
+}
+export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./DialogActions";
+export * from "./DialogContent";
+export * from "./DialogTitle";
+export * from "./Dialog";

package/dist-types/dialog/internal/DialogContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DialogContext: import("react").Context<{
+    status?: "error" | "info" | "success" | "warning" | undefined;
+    dialogId?: string | undefined;
+    setContentElement?: ((node: HTMLDivElement) => void) | undefined;
+}>;

package/dist-types/dropdown/Dropdown.d.ts

@@ -0,0 +1,10 @@
+import { ForwardedRef, ReactElement } from "react";
+import { SelectionProps, SelectionStrategy } from "../common-hooks";
+import { ListProps } from "../list/listTypes";
+import { DropdownBaseProps } from "./dropdownTypes";
+export interface DropdownProps<Item = string, Selection extends SelectionStrategy = "default"> extends DropdownBaseProps, Pick<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source" | "width">, SelectionProps<Item, Selection> {
+    ListProps?: Omit<ListProps<Item, Selection>, "ListItem" | "itemToString" | "source">;
+}
+export declare const Dropdown: <Item, Selection_1 extends SelectionStrategy = "default">(props: DropdownProps<Item, Selection_1> & {
+    ref?: ForwardedRef<HTMLDivElement> | undefined;
+}) => ReactElement<DropdownProps<Item, Selection_1>, string | import("react").JSXElementConstructor<any>>;

package/dist-types/dropdown/DropdownBase.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DropdownBaseProps } from "./dropdownTypes";
+import "./Dropdown.css";
+export declare type MaybeChildProps = {
+    className?: string;
+    id?: string;
+    role?: string;
+    width: number | string;
+};
+export declare const DropdownBase: import("react").ForwardRefExoticComponent<DropdownBaseProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/dropdown/DropdownButton.d.ts

@@ -0,0 +1,47 @@
+import { ButtonProps } from "@salt-ds/core";
+import { IconProps } from "@salt-ds/icons";
+import { AriaAttributes, ComponentType } from "react";
+import "./DropdownButton.css";
+export interface DropdownButtonProps extends ButtonProps {
+    /**
+     * Replace the default Icon component
+     */
+    IconComponent?: ComponentType<any>;
+    /**
+     * Whether the dropdown button should hide role='option' via 'aria-hidden'
+     */
+    ariaHideOptionRole?: boolean;
+    /**
+     * If, `true`, the Dropdown button will occupy the full width of it's container
+     */
+    fullWidth?: boolean;
+    /**
+     * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.
+     */
+    iconSize?: IconProps["size"];
+    /**
+     * Is the dropdown list open
+     */
+    isOpen?: boolean;
+    /**
+     * Label for the dropdown button
+     */
+    label?: string;
+    /**
+     * Id for the label. This is needed for ARIA attributes.
+     */
+    labelId?: string;
+    /**
+     * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value
+     * **/
+    posInSet?: number;
+    /**
+     * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value
+     * **/
+    setSize?: number;
+    /**
+     *
+     * **/
+    labelAriaAttributes?: Pick<AriaAttributes, "aria-posinset" | "aria-setsize" | "aria-selected">;
+}
+export declare const DropdownButton: import("react").ForwardRefExoticComponent<DropdownButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/dropdown/dropdownTypes.d.ts

@@ -0,0 +1,44 @@
+import { PortalProps } from "../portal";
+import { HTMLAttributes, KeyboardEvent, ReactElement, RefObject } from "react";
+export declare type DropdownPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+export interface DropdownBaseProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect">, Pick<PortalProps, "disablePortal" | "container"> {
+    defaultIsOpen?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    isOpen?: boolean;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    onOpenChange?: (isOpen: boolean) => void;
+    openOnFocus?: boolean;
+    placement?: DropdownPlacement;
+    popupWidth?: number;
+    triggerComponent?: JSX.Element;
+    width?: number | string;
+}
+export interface DropdownHookProps extends Pick<DropdownBaseProps, "defaultIsOpen" | "disabled" | "fullWidth" | "isOpen" | "onOpenChange" | "onKeyDown" | "openOnFocus" | "popupWidth" | "width"> {
+    ariaLabelledBy?: string;
+    id: string;
+    popupComponent: ReactElement;
+    rootRef: RefObject<HTMLDivElement>;
+}
+export interface DropdownHookTriggerProps {
+    "aria-expanded"?: boolean;
+    "aria-labelledby"?: string;
+    "aria-owns"?: string;
+    id: string;
+    onClick?: (e: MouseEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    role: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
+    style?: any;
+}
+interface ComponentProps extends HTMLAttributes<HTMLElement> {
+    width?: number | string;
+}
+export interface DropdownHookResult {
+    componentProps: ComponentProps;
+    isOpen: boolean;
+    label: string;
+    popperRef: (node: HTMLElement | null) => void;
+    triggerProps: DropdownHookTriggerProps;
+}
+export {};

package/dist-types/dropdown/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./DropdownBase";
+export * from "./DropdownButton";
+export * from "./Dropdown";
+export * from "./dropdownTypes";
+export * from "./useDropdownBase";

package/dist-types/dropdown/useClickAway.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+export declare type ClickawayHook = (props: {
+    popperRef: RefObject<HTMLElement>;
+    rootRef: RefObject<HTMLElement>;
+    isOpen: boolean;
+    onClose: () => void;
+}) => void;
+export declare const useClickAway: ClickawayHook;

package/dist-types/dropdown/useDropdown.d.ts

@@ -0,0 +1,11 @@
+import { ListHookProps, ListHookResult } from "../list";
+import { DropdownHookResult, DropdownHookProps } from "./dropdownTypes";
+import { SelectionStrategy } from "../common-hooks";
+export interface DropdownListHookProps<Item, Strategy extends SelectionStrategy> extends Partial<Omit<DropdownHookProps, "onKeyDown">>, Omit<ListHookProps<Item, Strategy>, "containerRef"> {
+    itemToString?: (item: Item) => string;
+}
+export interface DropdownListHookResult<Item, Selection extends SelectionStrategy> extends Partial<ListHookResult<Item, Selection>>, Partial<DropdownHookResult> {
+    onOpenChange: any;
+    triggerLabel?: string;
+}
+export declare const useDropdown: <Item, Selection_1 extends SelectionStrategy = "default">({ collectionHook, defaultHighlightedIndex: defaultHighlightedIndexProp, defaultIsOpen, defaultSelected, highlightedIndex: highlightedIndexProp, isOpen: isOpenProp, itemToString, onHighlight, onOpenChange, onSelectionChange, selected, selectionStrategy, }: DropdownListHookProps<Item, Selection_1>) => DropdownListHookResult<Item, Selection_1>;

package/dist-types/dropdown/useDropdownBase.d.ts

@@ -0,0 +1,2 @@
+import { DropdownHookProps, DropdownHookResult } from "./dropdownTypes";
+export declare const useDropdownBase: ({ ariaLabelledBy: ariaLabelledByProp, defaultIsOpen, disabled, fullWidth: fullWidthProp, id, isOpen: isOpenProp, onOpenChange, onKeyDown: onKeyDownProp, openOnFocus, popupComponent: { props: componentProps }, popupWidth: popupWidthProp, rootRef, width, }: DropdownHookProps) => DropdownHookResult;

package/dist-types/editable-label/EditableLabel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./EditableLabel.css";
+export interface EditableLabelProps {
+    className?: string;
+    defaultEditing?: boolean;
+    defaultValue?: string;
+    editing?: boolean;
+    onEnterEditMode: () => void;
+    onChange?: (value: string) => void;
+    onExitEditMode: (originalLabel: string | undefined, editedLabel: string | undefined, allowDeactivation?: boolean) => void;
+    defaultIsEditing?: boolean;
+    value?: string;
+}
+export declare const EditableLabel: React.ForwardRefExoticComponent<EditableLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist-types/editable-label/index.d.ts

@@ -0,0 +1 @@
+export * from "./EditableLabel";

package/dist-types/file-drop-zone/FileDropZone.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes, ReactNode, SyntheticEvent } from "react";
+import { FilesValidator } from "./validators";
+import "./FileDropZone.css";
+export declare type FilesAcceptedEventHandler = (files: ReadonlyArray<File>, event: SyntheticEvent) => void;
+export declare type FilesRejectedEventHandler<ErrorType = string> = (errors: ReadonlyArray<ErrorType>, event: SyntheticEvent) => void;
+/**
+ * Removed deprecated props
+ *
+ * - onDrop
+ * - onFileTypeError
+ * - showUploadButton
+ */
+export interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `accept` attribute for HTML <input>.
+     *
+     * A comma separated list of file types the user can pick from the file input dialog box.
+     */
+    accept?: string;
+    /**
+     * The text content of the drop area component.
+     */
+    children?: ReactNode;
+    /**
+     * Additional usage information.
+     */
+    description?: string;
+    /**
+     * If `true`, the file drop zone will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * This prop is used to help implement the accessibility logic.
+     * If you don't provide this prop. It falls back to a randomly generated id.
+     */
+    id?: string;
+    /**
+     * Callback on successful file drop or selection.
+     */
+    onFilesAccepted?: FilesAcceptedEventHandler;
+    /**
+     * @see `validate` prop
+     * Callback on drop or input in case of an error. A list of errors will be provided as input.
+     */
+    onFilesRejected?: FilesRejectedEventHandler;
+    /**
+     * A list of custom validation functions. Every function is provided with the entire file list as input
+     * thus can perform validations on all files. Each function needs to return one or more errors in case of
+     * a failed validation, or `undefined` in case of a successful one.
+     *
+     * All errors are collected in the end and returned as an array to `onFilesRejected`.
+     */
+    validate?: ReadonlyArray<FilesValidator<any>>;
+}
+export declare const FileDropZone: import("react").ForwardRefExoticComponent<FileDropZoneProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/file-drop-zone/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FileDropZone";
+export * from "./validators";

package/dist-types/file-drop-zone/internal/utils.d.ts

@@ -0,0 +1,9 @@
+import { DragEvent } from "react";
+import { FilesValidator } from "../validators";
+export declare const toArray: (obj: any) => any[];
+export declare const containsFiles: (e: DragEvent) => boolean | FileList | null;
+export declare const extractFiles: (e: DragEvent) => File[];
+export declare const validateFiles: ({ files, validate, }: {
+    files: ReadonlyArray<File>;
+    validate: ReadonlyArray<FilesValidator>;
+}) => string[];

package/dist-types/file-drop-zone/validators.d.ts

@@ -0,0 +1,21 @@
+export declare type FilesValidator<ErrorType = string> = (files: ReadonlyArray<File>) => ReadonlyArray<ErrorType | string | undefined> | ErrorType | string | undefined;
+/**
+ * Factory method for creating a common file type validator.
+ *
+ * @param {string} accept - It is the same as 'accept' attribute for HTML <input>.
+ * @param {function} getError - A callback function for generating a customised user error.
+ */
+export declare function createFileTypeValidator<ErrorType = string>({ accept, getError, }: {
+    accept: string;
+    getError?: (file: File) => ErrorType;
+}): FilesValidator<ErrorType>;
+/**
+ * Factory method for creating a common total selection size validator.
+ *
+ * @param {number} maxSize - Max selection size in bytes.
+ * @param {function} getError - A callback function for generating a customised user error.
+ */
+export declare function createTotalSizeValidator<ErrorType = string>({ maxSize, getError, }: {
+    maxSize: number;
+    getError?: (totalSize: number) => ErrorType;
+}): FilesValidator<ErrorType>;

package/dist-types/focus-manager/FocusManager.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from "react";
+import { UseReturnFocusProps } from "./internal/useReturnFocus";
+export interface FocusManagerProps {
+    active?: boolean;
+    autoFocusRef?: RefObject<HTMLElement>;
+    children?: ReactNode;
+    className?: string;
+    disableAutoFocus?: boolean;
+    disableFocusTrap?: boolean;
+    disableReturnFocus?: boolean;
+    fallbackFocusRef?: RefObject<HTMLElement>;
+    tabEnabledSelectors?: string;
+    returnFocusOptions?: UseReturnFocusProps["focusOptions"];
+}
+export declare function FocusManager(props: FocusManagerProps): JSX.Element;

package/dist-types/focus-manager/index.d.ts

@@ -0,0 +1 @@
+export * from "./FocusManager";

package/dist-types/focus-manager/internal/findAllTabbableElements.d.ts

@@ -0,0 +1,10 @@
+declare type HTMLElementOrNull = HTMLElement | null;
+/**
+ * Finds all the elements in the given root node that can be focused by a 'tab' keypress.
+ * In addition, the trap-start and trap-end sentinel nodes are excluded, and all contained shadow roots are walked recursively
+ * @param {Node} rootNode The containing node from which traversal begins.
+ * @param {string} selector The CSS selector used to query for matching, tabbable elements.
+ * @param {Node[]} elementsToIgnore Elements to ignore
+ */
+export declare function findAllTabbableElements(rootNode: HTMLElementOrNull | ShadowRoot, selector: string, elementsToIgnore?: HTMLElementOrNull[]): HTMLElement[];
+export {};

package/dist-types/focus-manager/internal/useReturnFocus.d.ts

@@ -0,0 +1,7 @@
+export interface UseReturnFocusProps {
+    active?: boolean;
+    disabled?: boolean;
+    document: DocumentOrShadowRoot;
+    focusOptions?: FocusOptions;
+}
+export declare function useReturnFocus({ focusOptions: focusOptionsProp, disabled, active, document, }: UseReturnFocusProps): void;

package/dist-types/form-field/FormActivationIndicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FormFieldProps } from "./FormField";
+import "./FormActivationIndicator.css";
+export interface FormActivationIndicatorProps extends Pick<FormFieldProps, "validationStatus"> {
+    hasIcon?: boolean;
+}
+export declare const FormActivationIndicator: ({ hasIcon, validationStatus, }: FormActivationIndicatorProps) => JSX.Element;

package/dist-types/form-field/FormControlContext.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const FormControlContext: import("react").Context<{
+    focused: boolean;
+}>;
+export declare const useFormControl: () => {
+    focused: boolean;
+};

package/dist-types/form-field/FormField.d.ts

@@ -0,0 +1,111 @@
+import { Dispatch, ElementType, FocusEventHandler, HTMLAttributes, SetStateAction } from "react";
+import { FormActivationIndicatorProps } from "./FormActivationIndicator";
+import { FormHelperTextProps } from "./FormHelperText";
+import { FormLabelProps } from "./FormLabel";
+import { NecessityIndicatorOptions } from "./NecessityIndicator";
+import { StatusIndicatorProps } from "./StatusIndicator";
+import "./FormField.css";
+export declare type FormFieldLabelPlacement = "top" | "left";
+export declare type FormFieldHelperTextPlacement = "bottom" | "tooltip";
+export declare type FormFieldValidationStatus = "error" | "warning";
+export interface A11yValueProps extends Pick<NecessityIndicatorOptions, "required"> {
+    /**
+     * If `true`, the FormField will be disabled.
+     */
+    disabled?: boolean;
+    /** id of the helper text node */
+    helperTextId?: string;
+    /** id of the label node */
+    labelId?: string;
+    /**
+     * The FormField value is Readonly
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the form field needs to render helper text
+     */
+    renderHelperText?: boolean;
+}
+export interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, A11yValueProps {
+    /**
+     * The component used for activation indicator. Default to `FormActivationIndicator`.
+     */
+    ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;
+    /**
+     * Outer focus ring focus will not be applied. Defaults to false.
+     */
+    disableFocusRing?: boolean;
+    /**
+     * Whether the form field is occupying full width.
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether to show the StatusIndicator component for validation states.
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * The helper text content
+     */
+    helperText?: string;
+    /**
+     * The component used for the helper text. Default to `FormHelperText`.
+     */
+    HelperTextComponent?: ElementType<FormHelperTextProps>;
+    /**
+     * Location the helperText, values: 'bottom' (default) or 'tooltip'.
+     */
+    helperTextPlacement?: FormFieldHelperTextPlacement;
+    /**
+     * Props to be applied to the `HelperTextComponent`.
+     *
+     * Generic on `FormHelperTextProps` is omitted.
+     */
+    HelperTextProps?: Partial<FormHelperTextProps>;
+    /**
+     * The label value for the FormField
+     */
+    label?: string;
+    /**
+     * The component used for the label. Default to `FormLabel`.
+     */
+    LabelComponent?: ElementType;
+    /**
+     * Location the label, values: 'top' (default) or 'left'
+     */
+    labelPlacement?: FormFieldLabelPlacement;
+    /**
+     * Props to be applied to the `LabelComponent`
+     */
+    LabelProps?: Partial<FormLabelProps>;
+    /**
+     * Override props to be used with the StatusIndicator component
+     */
+    StatusIndicatorProps?: Partial<StatusIndicatorProps>;
+    /**
+     * The state for the FormField: Must be one of: 'error'|'warning'|undefined
+     */
+    validationStatus?: FormFieldValidationStatus;
+    /**
+     * FormField variants; defaults to primary.
+     */
+    variant?: "primary" | "secondary" | "tertiary";
+}
+export interface useA11yValueValue {
+    "aria-labelledby": A11yValueProps["labelId"];
+    "aria-required": A11yValueProps["required"];
+    "aria-describedby": A11yValueProps["helperTextId"] | undefined;
+    disabled: A11yValueProps["disabled"];
+    readOnly: A11yValueProps["readOnly"];
+}
+export declare const useFormField: ({ onBlur, onFocus, }: {
+    onBlur?: FocusEventHandler<HTMLDivElement> | undefined;
+    onFocus?: FocusEventHandler<HTMLDivElement> | undefined;
+}) => [{
+    focused: boolean;
+}, {
+    setFocused: Dispatch<SetStateAction<boolean>>;
+}, {
+    onBlur: FocusEventHandler<HTMLDivElement>;
+    onFocus: FocusEventHandler<HTMLDivElement>;
+}];
+export declare const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/form-field/FormHelperText.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef } from "react";
+import { FormFieldProps } from "./FormField";
+import "./FormHelperText.css";
+export declare type FormHelperTextProps<E extends React.ElementType = "p"> = ComponentPropsWithoutRef<E> & {
+    helperText: FormFieldProps["helperText"];
+    helperTextPlacement: FormFieldProps["helperTextPlacement"];
+};
+export declare const FormHelperText: <E extends import("react").ElementType<any> = "p">({ helperText, helperTextPlacement, ...restProps }: FormHelperTextProps<E>) => JSX.Element | null;

package/dist-types/form-field/FormLabel.d.ts

@@ -0,0 +1,40 @@
+import { ElementType, HTMLAttributes } from "react";
+import { FormFieldValidationStatus } from "./FormField";
+import { NecessityIndicatorOptions } from "./NecessityIndicator";
+import { StatusIndicatorProps } from "./StatusIndicator";
+import "./FormLabel.css";
+export interface FormLabelProps extends HTMLAttributes<HTMLLabelElement>, NecessityIndicatorOptions {
+    /**
+     * Whether the form field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Adjusts whether the StatusIndicator component is shown
+     */
+    hasStatusIndicator?: boolean;
+    /**
+     * The label value for the FormLabel
+     */
+    label?: string;
+    /**
+     * An optional renderer function used to customize the necessity adornment
+     */
+    NecessityIndicator?: ElementType<NecessityIndicatorOptions>;
+    /**
+     * Whether the form field is readOnly.
+     */
+    readOnly?: boolean;
+    /**
+     * Props used to configure the StatusIndicator component if hasStatusIndicator is true
+     */
+    StatusIndicatorProps?: Partial<StatusIndicatorProps>;
+    /**
+     * The status for the FormField: Must be one of: 'error'|'warning'|undefined
+     */
+    validationStatus?: FormFieldValidationStatus;
+    /**
+     * Text to be shown in the Tooltip.
+     */
+    tooltipText?: string;
+}
+export declare const FormLabel: ({ label, NecessityIndicator, required, displayedNecessity, hasStatusIndicator, StatusIndicatorProps, validationStatus, necessityText, className, disabled, readOnly, tooltipText, ...restProps }: FormLabelProps) => JSX.Element;

package/dist-types/form-field/NecessityIndicator.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from "react";
+export declare type FormLabelNecessity = "optional" | "required";
+export interface NecessityIndicatorOptions {
+    /**
+     * The FormField is required
+     */
+    required?: boolean;
+    /**
+     * Whether to show a label adornment for required or optional
+     */
+    displayedNecessity?: FormLabelNecessity;
+    /**
+     * Customize text displayed for necessity. Default to `(Required)` or `(Optional)`.
+     */
+    necessityText?: ReactNode;
+    className?: string;
+}
+export declare const NecessityIndicator: ({ required, children, necessityText: necessityTextProp, displayedNecessity, className, ...restProps }: NecessityIndicatorOptions & HTMLAttributes<HTMLSpanElement>) => JSX.Element | null;

package/dist-types/form-field/StatusIndicator.d.ts

@@ -0,0 +1,13 @@
+import { IconProps } from "@salt-ds/icons";
+import { ElementType } from "react";
+import { TooltipProps } from "../tooltip";
+export declare type StatusIndicatorStatus = "error" | "info" | "warning" | "success";
+export interface StatusIndicatorProps extends IconProps {
+    hasTooltip?: boolean;
+    IconProps?: Partial<IconProps>;
+    status?: StatusIndicatorStatus;
+    TooltipComponent?: ElementType<TooltipProps>;
+    TooltipProps?: Partial<TooltipProps>;
+    tooltipText?: string;
+}
+export declare const StatusIndicator: (props: StatusIndicatorProps) => JSX.Element;

package/dist-types/form-field/constant.d.ts

@@ -0,0 +1 @@
+export declare const classBase = "saltFormField";

package/dist-types/form-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormField";
+export * from "./FormLabel";