@navinc/base-react-components/cjs/form-elements/shared.d.ts

Nav's Pattern Library

import { MouseEventHandler } from 'react';
import NumberFormat from 'react-number-format';
import { IconName } from '../icons/index.js';
export declare const HelperIcon: import("styled-components").StyledComponent<({ name, size, ...props }: {
    name: "data/report" | "data/todo" | "actions/download" | "actions/close" | "actions/done" | "actions/logout" | "actions/minus" | "actions/plus" | "actions/print" | "actions/warning" | "buildings/business" | "buildings/bank" | "buildings/city" | "buildings/home" | "business/map" | "business/email" | "business/document" | "business/archive" | "business/calendar" | "business/history" | "business/imac" | "business/iphone" | "business/matchfactor" | "feedback/alert" | "feedback/visible" | "feedback/balloon" | "feedback/diamond" | "feedback/flag" | "feedback/hot" | "feedback/invisible" | "feedback/party" | "feedback/star" | "financing/calculation" | "financing/calculator" | "financing/cart" | "financing/cash" | "financing/coins" | "financing/decrease" | "financing/gift" | "financing/increase" | "financing/lending" | "financing/wallet" | "food/apple" | "food/burger" | "food/cake" | "food/donut" | "food/pizza" | "food/popsicle" | "food/soup" | "food/strawberry" | "food/turkey" | "food/watermelon" | "medical/stethoscope" | "others/placeholder" | "others/airplane" | "others/lightbulb" | "people/man" | "people/profile" | "people/users" | "people/woman" | "seasons/leaf" | "seasons/raindrop" | "seasons/snowflake" | "seasons/sun" | "seasons/umbrella" | "system/link" | "system/search" | "system/attachment" | "system/bookmark" | "system/edit" | "system/mic" | "system/pen" | "system/pencil" | "system/share" | "system/trash" | "system/unlink" | "tech/filter" | "tech/car" | "tech/dashboard" | "tech/gear" | "tech/locked" | "tech/pin" | "tech/settings" | "tech/tool" | "tech/unlocked" | "data/bar-graph" | "data/chart-down" | "data/chart-up" | "data/line-graph" | "data/report-fail" | "data/report-success" | "data/reports-multiple" | "data/round-chart" | "actions/arrow-back" | "actions/arrow-down" | "actions/arrow-forward" | "actions/arrow-up" | "actions/carrot-down" | "actions/carrot-left" | "actions/carrot-right" | "actions/carrot-up" | "actions/check-circle" | "actions/circle-block" | "actions/circle-delete" | "actions/circle-faq" | "actions/circle-info" | "actions/circle-minus" | "actions/circle-play" | "actions/circle-plus" | "actions/circle-warning" | "actions/cloud-download" | "actions/cloud-upload" | "actions/export-icon" | "actions/link-out" | "actions/more-dots-horizontal" | "actions/sort-horizontal" | "actions/sort-vertical" | "business/calendar-date" | "business/delivery-box" | "feedback/alert-notification" | "feedback/alert-off" | "feedback/star-fill" | "feedback/star-fill-half" | "feedback/thumbs-down" | "feedback/thumbs-up" | "financing/card-add" | "financing/card-coins" | "financing/card-lock" | "financing/card-multiple" | "financing/card-ok" | "financing/cart-add" | "financing/cash-register" | "financing/coin-bag" | "financing/coin-stack" | "financing/credit-card" | "financing/money-bag" | "financing/money-circle" | "financing/piggy-bank" | "food/coffee-cup" | "food/coffee-mug" | "others/shopping-bag" | "seasons/cloud-sun" | "seasons/tree-palm" | "seasons/tree-point" | "seasons/tree-round" | "system/certified-ribbon" | "system/mic-off";
    size?: string | undefined;
} & import("react").SVGProps<SVGSVGElement>) => JSX.Element | null, import("styled-components").DefaultTheme, {}, never>;
export declare const HelperDescription: import("styled-components").StyledComponent<({ bold: _bold, shouldScaleFont: _shouldScaleFont, boldType: _boldType, light: _light, ...props }: import("../copy.js").CopyProps) => JSX.Element, import("styled-components").DefaultTheme, {
    size: "sm";
    bold: true;
}, "size" | "bold">;
export declare const HelperItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
    isLink?: boolean | undefined;
    hasSpaceForErrors?: boolean | undefined;
    hasSpaceForHelper?: boolean | undefined;
}, never>;
type HelperProps = {
    className?: string;
    hasSpaceForHelper?: boolean;
    helperLinkAction?: MouseEventHandler<HTMLDivElement>;
    helperText?: string;
    iconName?: IconName;
};
export declare const Helper: import("styled-components").StyledComponent<({ className, hasSpaceForHelper, helperLinkAction, helperText, iconName }: HelperProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export declare const Label: import("styled-components").StyledComponent<({ bold, light: _light, size: _size, boldType: _boldType, ...props }: import("../text.js").TextProps) => JSX.Element, import("styled-components").DefaultTheme, {
    bold?: boolean | undefined;
    size?: "small" | "medium" | "large" | "regular" | undefined;
    boldType?: "bold" | "regular" | "semiBold" | undefined;
    $bold?: boolean | undefined;
    light?: boolean | undefined;
} & import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement> & {
    required?: boolean | undefined;
}, never>;
export declare const FieldWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
    isInvalid?: boolean | undefined;
}, never>;
export declare const CurrencyInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
    isInvalid?: boolean | undefined;
} & {
    as: typeof NumberFormat;
}, "as">;
export declare const PercentInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
    isInvalid?: boolean | undefined;
} & {
    as: typeof NumberFormat;
}, "as">;
export declare const NumberInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
    isInvalid?: boolean | undefined;
} & {
    as: typeof NumberFormat;
}, "as">;
export declare const Chevron: import("styled-components").StyledComponent<({ className, disabled, isInvalid }: {
    className?: string | undefined;
    disabled?: boolean | undefined;
    isInvalid?: boolean | undefined;
}) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export declare const Field: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
    isVisited?: boolean | undefined;
}, never>;
export declare const Err: import("styled-components").StyledComponent<({ bold: _bold, shouldScaleFont: _shouldScaleFont, boldType: _boldType, light: _light, ...props }: import("../copy.js").CopyProps) => JSX.Element, import("styled-components").DefaultTheme, {
    size: "sm";
    bold: true;
}, "size" | "bold">;
export declare const Errors: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
    hasSpaceForErrors?: boolean | undefined;
}, never>;
export declare const visuallyHiddenStyles: import("styled-components").FlattenSimpleInterpolation;
export declare const HiddenLegend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
export declare const Legend: import("styled-components").StyledComponent<"legend", import("styled-components").DefaultTheme, {}, never>;
export declare const Fieldset: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
export {};