@bunnyapp/components 1.8.6 → 2.0.0-beta.1

package/dist/cjs/types/src/ui/components/Segmented/Segmented.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Segmented from './Segmented';
+declare const meta: Meta<typeof Segmented>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Select/MultiSelect.d.ts

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { type SelectOption } from './useSelectMenu';
+/**
+ * `Select` for several values, with the same menu. The field is an `.Input` holding the chosen
+ * values as removable chips and, after them, a text input that filters the options. The chips stay on
+ * one line within the field's own width: those that don't fit are counted in a `+N` chip. Choosing an
+ * option toggles it and keeps the menu open; Backspace in the empty text input removes the last value.
+ * Works as the child of a `Form.Item`: the label points at the text input, and `aria-invalid` marks
+ * the field. Disabled with the antd `Form` around it unless `disabled` is given, which marks the
+ * field `aria-disabled` for the `.Input:disabled` rules (see `rulesToCss`).
+ */
+declare const MultiSelect: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+    options: SelectOption[];
+    value?: string[] | null;
+    onChange?: (value: string[]) => void;
+    /** A 32px control, next to compact inputs (`TextInput`'s `compact`). */
+    compact?: boolean;
+    /** The menu's last item, under the options: an action such as "+ Add new contact". A click in it closes the menu. */
+    footer?: ReactNode;
+    /** Typing also matches the options' values. Turn it off when the values are ids. */
+    matchValues?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default MultiSelect;

package/dist/cjs/types/src/ui/components/Select/Select.d.ts

@@ -0,0 +1,22 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { type SelectOption } from './useSelectMenu';
+/**
+ * A select with a menu of our own, so the open list is styled by the appearance too (a native
+ * select's list is drawn by the browser). The closed control is a text input under the same
+ * `.Input` rules as the others, with a chevron; typing in it filters the options by label and, unless
+ * `matchValues` is off, by value. Works as the child of a `Form.Item`, like `TextInput`, and is
+ * disabled with the antd `Form` around it unless `disabled` is given. `MultiSelect` is the same
+ * control for several values.
+ */
+declare const Select: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    /** A 32px control, next to compact inputs (`TextInput`'s `compact`). */
+    compact?: boolean;
+    /** The menu's last item, under the options: an action such as "+ Add new contact". A click in it closes the menu. */
+    footer?: ReactNode;
+    /** Typing also matches the options' values (a country's code). Turn it off when the values are ids. */
+    matchValues?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default Select;

package/dist/cjs/types/src/ui/components/Select/Select.rules.d.ts

@@ -0,0 +1,115 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function selectRules(v: ResolvedVariables): {
+    internal: {
+        '.Input.Select': {
+            backgroundImage: string;
+            backgroundRepeat: string;
+            backgroundPosition: string;
+            cursor: string;
+        };
+        '.Input.Select:disabled': {
+            cursor: string;
+        };
+        '.Menu': {
+            position: string;
+            zIndex: string;
+            top: string;
+            left: string;
+            right: string;
+            maxHeight: string;
+            overflowY: string;
+            margin: string;
+            padding: string;
+            listStyle: string;
+            border: string;
+            borderRadius: string;
+            backgroundColor: string;
+            boxShadow: string;
+        };
+        '.Menu[data-placement="top"]': {
+            top: string;
+            bottom: string;
+        };
+        '.Option': {
+            padding: string;
+            borderRadius: string;
+            lineHeight: string;
+            color: string;
+            overflow: string;
+            textOverflow: string;
+            whiteSpace: string;
+            cursor: string;
+        };
+        '.Option[data-active="true"]': {
+            backgroundColor: string;
+        };
+        '.Option[aria-selected="true"]': {
+            fontWeight: string;
+        };
+        '.Menu[aria-multiselectable="true"] .Option[aria-selected="true"]': {
+            paddingRight: string;
+            backgroundImage: string;
+            backgroundRepeat: string;
+            backgroundPosition: string;
+        };
+        '.MenuEmpty': {
+            padding: string;
+            lineHeight: string;
+            color: string;
+        };
+        '.MenuFooter': {
+            margin: string;
+            padding: string;
+            borderTop: string;
+        };
+        '.Input.MultiSelect': {
+            position: string;
+            display: string;
+            alignItems: string;
+            gap: string;
+            overflow: string;
+            contain: string;
+            cursor: string;
+        };
+        '.Input.MultiSelect[aria-disabled="true"]': {
+            cursor: string;
+        };
+        '.SelectChips': {
+            margin: string;
+        };
+        '.SelectChip': {
+            padding: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+            backgroundColor: string;
+        };
+        '.SelectChipRemove': {
+            display: string;
+            padding: string;
+            border: string;
+            background: string;
+            fontSize: string;
+            color: string;
+            cursor: string;
+        };
+        '.SelectChipRemove:hover': {
+            color: string;
+        };
+        '.SelectSearch': {
+            padding: string;
+            border: string;
+            outline: string;
+            background: string;
+            font: string;
+            lineHeight: string;
+            color: string;
+            cursor: string;
+        };
+        '.SelectSearch::placeholder': {
+            color: string;
+        };
+    };
+    public: {};
+};

package/dist/cjs/types/src/ui/components/Select/Select.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Select from './Select';
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Compact: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;
+/** A footer action under the options, and a multi-select with a few values. */
+export declare const WithFooterAndMultiple: Story;
+/** More values than fit on the line: the rest are counted in a `+N` tag. */
+export declare const MultipleCollapsed: Story;
+export declare const MultipleEmpty: Story;
+/** Disabled, as inside a form that is saving: neither opens, and the chips can't be removed. */
+export declare const Disabled: Story;
+export declare const MultipleLedger: Story;
+export declare const MultipleMidnight: Story;

package/dist/cjs/types/src/ui/components/Select/SelectMenu.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import type { SelectMenuState, SelectOption } from './useSelectMenu';
+/**
+ * The open list of a `Select` or `MultiSelect`: the options that match the query, "No results"
+ * when none do, and an optional footer (an action such as "+ Add new contact") as its last item.
+ */
+export default function SelectMenu({ menu, isChosen, multiple, footer, }: {
+    menu: SelectMenuState;
+    isChosen: (option: SelectOption) => boolean;
+    /** Several options can be chosen; a chosen one shows a check. */
+    multiple?: boolean;
+    footer?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Select/useSelectMenu.d.ts

@@ -0,0 +1,45 @@
+import { KeyboardEvent } from 'react';
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+/**
+ * The open/close, filtering and keyboard state of a select's menu, shared by `Select` and
+ * `MultiSelect`. The menu is open while there is a query (`''` before anything is typed); typing
+ * filters the options by label, and by value unless `matchValues` is off. `onChoose` is called for a
+ * click or Enter on an option, and the caller decides whether that closes the menu.
+ */
+export declare function useSelectMenu({ id, options, startAt, matchValues, onChoose, }: {
+    id?: string;
+    options: SelectOption[];
+    /** The option the arrow keys start from when the menu opens (the current choice); else the first. */
+    startAt?: SelectOption;
+    /** Typing also matches the options' values (a country's code). Off where a value means nothing to the user (an id). */
+    matchValues?: boolean;
+    onChoose: (option: SelectOption) => void;
+}): {
+    rootRef: import("react").RefObject<HTMLDivElement>;
+    menuId: string;
+    optionId: (option: SelectOption) => string;
+    query: string | null;
+    isOpen: boolean;
+    matches: SelectOption[];
+    activeIndex: number;
+    setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    opensUpward: boolean;
+    open: () => void;
+    close: () => void;
+    search: (text: string) => void;
+    choose: (option: SelectOption) => void;
+    onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** The ARIA wiring for the text input that owns the menu. */
+    comboboxProps: {
+        readonly role: "combobox";
+        readonly 'aria-expanded': boolean;
+        readonly 'aria-controls': string;
+        readonly 'aria-autocomplete': "list";
+        readonly 'aria-activedescendant': string | undefined;
+        readonly autoComplete: "off";
+    };
+};
+export type SelectMenuState = ReturnType<typeof useSelectMenu>;

package/dist/cjs/types/src/ui/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+/** A block standing in for content that is loading. Defaults to a full-width line. */
+export default function Skeleton({ width, height, className, style, }: {
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+    style?: CSSProperties;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Skeleton/Skeleton.rules.d.ts

@@ -0,0 +1,15 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function skeletonRules(v: ResolvedVariables): {
+    internal: {
+        '.SkeletonBase': {
+            height: string;
+            width: string;
+        };
+    };
+    public: {
+        '.Skeleton': {
+            borderRadius: string;
+            backgroundColor: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Skeleton from './Skeleton';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Spinner/Spinner.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A spinning arc in the current text color. Decorative: say what is loading next to it.
+ *
+ * It turns with the Web Animations API, not SVG `<animateTransform>`: a compositor-driven transform keeps
+ * turning inside a layer that is itself moving (a Switch's knob mid-slide), where Chrome can stop repainting SMIL.
+ */
+export default function Spinner({ size }: {
+    size?: number;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Spinner/Spinner.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Spinner from './Spinner';
+declare const meta: Meta<typeof Spinner>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Switch/Switch.d.ts

@@ -0,0 +1,12 @@
+/** A native toggle button with `role="switch"`. Controlled: it shows `checked` and reports the change. */
+export default function Switch({ checked, onChange, disabled, loading, compact, id, 'aria-label': ariaLabel, }: {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Shows a spinner in the knob and ignores clicks, without looking disabled. */
+    loading?: boolean;
+    /** A 28px by 16px switch. */
+    compact?: boolean;
+    id?: string;
+    'aria-label'?: string;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Switch/Switch.rules.d.ts

@@ -0,0 +1,66 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function switchRules(v: ResolvedVariables): {
+    internal: {
+        '.SwitchBase': {
+            position: string;
+            width: string;
+            height: string;
+            padding: string;
+            cursor: string;
+            display: string;
+            alignItems: string;
+            flexShrink: string;
+        };
+        '.SwitchBase:disabled': {
+            cursor: string;
+            opacity: string;
+        };
+        '.SwitchBase--loading': {
+            pointerEvents: string;
+            opacity: string;
+        };
+        '.SwitchBase:focus-visible': {
+            outline: string;
+            outlineOffset: string;
+        };
+        '.SwitchKnob': {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            position: string;
+            left: string;
+            width: string;
+            height: string;
+            borderRadius: string;
+            backgroundColor: string;
+            color: string;
+            boxShadow: string;
+            transition: string;
+        };
+        '.Switch--checked .SwitchKnob': {
+            transform: string;
+        };
+        '.SwitchBase.Compact': {
+            width: string;
+            height: string;
+        };
+        '.SwitchBase.Compact .SwitchKnob': {
+            width: string;
+            height: string;
+        };
+        '.SwitchBase.Compact.Switch--checked .SwitchKnob': {
+            transform: string;
+        };
+    };
+    public: {
+        '.Switch': {
+            backgroundColor: string;
+            borderRadius: string;
+            border: string;
+            transition: string;
+        };
+        '.Switch--checked': {
+            backgroundColor: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Switch/Switch.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Switch from './Switch';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Table/Table.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactNode } from 'react';
+/** The table's surface: a `Card` that is also `.Table`. Layout (the grid) is the caller's. */
+export declare function Table({ className, style, children }: {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * A row. Rows are `display: contents` in a grid, so they draw nothing themselves: their cells
+ * inherit the row's background, which is how `.TableRow--alternate` (`alternate`) stripes them.
+ */
+export declare function TableRow({ alternate, onClick, className, children, }: {
+    alternate?: boolean;
+    onClick?: () => void;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** A cell of a row, or with `head` a column header (`.TableHeaderCell`). */
+export declare function TableCell({ head, className, style, children, }: {
+    head?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Table/Table.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './Table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TagColor } from './Tag.rules';
+/** A small pill labelling a state. Without a `color` it takes the appearance's neutral fill. */
+export default function Tag({ color, size, icon, className, style, children, }: {
+    color?: TagColor;
+    /** `lg`: at the body text size, for a notice rather than a state. */
+    size?: 'lg';
+    icon?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/cjs/types/src/ui/components/Tag/Tag.rules.d.ts

@@ -0,0 +1,49 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+declare const PAIRS: {
+    readonly blue: readonly ["rgb(59 130 246)", "rgb(191 219 254)"];
+    readonly green: readonly ["rgb(5 150 105)", "rgb(167 243 208)"];
+    readonly red: readonly ["rgb(239 68 68)", "rgb(254 202 202)"];
+    readonly orange: readonly ["rgb(249 115 22)", "rgb(254 215 170)"];
+    readonly yellow: readonly ["rgb(245 158 11)", "rgb(253 230 138)"];
+    readonly purple: readonly ["rgb(139 92 246)", "rgb(221 214 254)"];
+    readonly gray: readonly ["rgb(75 85 99)", "rgb(229 231 235)"];
+    readonly black: readonly ["white", "rgb(0 0 0)"];
+    readonly warning: readonly ["rgb(250 173 20)", "rgb(255 251 230)"];
+    readonly info: readonly ["rgb(9 88 217)", "rgb(230 244 255)"];
+};
+/** A palette pair, or `primary`: `colorPrimary` on its light tint, following the brand. */
+export type TagColor = keyof typeof PAIRS | 'primary';
+export declare const TAG_COLOR_NAMES: TagColor[];
+export declare function tagRules(v: ResolvedVariables): {
+    internal: {
+        '.Tag[data-color="primary"]': {
+            color: string;
+            backgroundColor: string;
+        };
+        '.Tag.Large': {
+            gap: string;
+            padding: string;
+            borderRadius: string;
+            fontSize: string;
+            whiteSpace: string;
+        };
+        '.TagBase': {
+            display: string;
+            alignItems: string;
+            gap: string;
+            lineHeight: string;
+            whiteSpace: string;
+        };
+    };
+    public: {
+        '.Tag': {
+            padding: string;
+            borderRadius: string;
+            fontSize: string;
+            fontWeight: string;
+            backgroundColor: string;
+            color: string;
+        };
+    };
+};
+export {};

package/dist/cjs/types/src/ui/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Tag from './Tag';
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/Text/Text.d.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ReactNode } from 'react';
+type Element = 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'dt' | 'dd' | 'th' | 'label' | 'strong';
+type Common = {
+    /** The element to render; each role has a default that suits it. */
+    as?: Element;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+    /** For `as="label"`. */
+    htmlFor?: string;
+    children?: ReactNode;
+};
+type BodyProps = Common & {
+    /** Body text (the default), or `secondary` for muted text: captions, hints, line item details. */
+    role?: 'body' | 'secondary';
+    /** One step down (`fontSizeSm`) or up (`fontSizeLg`) the text scale. */
+    size?: 'sm' | 'lg';
+    /** Emphasised, at `fontWeightBold`. */
+    strong?: boolean;
+    /** A step less emphasised than `strong`, at `fontWeightMedium` (a name in a list). */
+    medium?: boolean;
+};
+type HeadingProps = Common & {
+    role: 'heading';
+    /** 1 is the page's title; 2 a section's; 3 a card's or a table's. Renders `h1`–`h3` unless `as` says otherwise. */
+    level: 1 | 2 | 3;
+    tone?: 'primary';
+};
+type AmountProps = Common & {
+    /** A price or a total: tabular figures. */
+    role: 'amount';
+    /** The one large amount of a screen (what is due, a plan's price). */
+    display?: boolean;
+    /** One step down or up the text scale, like body text's. */
+    size?: 'sm' | 'lg';
+    /** At `fontWeightBold`, such as a total. */
+    strong?: boolean;
+    /** `secondary` is muted, at the normal weight: an amount that is nothing to pay. */
+    tone?: 'success' | 'danger' | 'primary' | 'secondary';
+};
+type OverlineProps = Common & {
+    /** A small upper-case label over a group or a column. Write the text in its normal case. */
+    role: 'overline';
+};
+export type TextProps = BodyProps | HeadingProps | AmountProps | OverlineProps;
+/**
+ * Text in one of the library's roles: body (`.Text`), secondary (`.TextSecondary`), heading
+ * (`.Heading`), amount (`.Amount`, `.Amount--display`) or overline (`.Overline`). Every one of them is a
+ * `.Text` too, the others drawn on top of it. Sizes, levels and tones are internal modifiers, emitted
+ * weak, so a customer's rule for the role reaches every variant.
+ */
+export default function Text(props: TextProps): import("react").JSX.Element;
+export {};

package/dist/cjs/types/src/ui/components/Text/Text.rules.d.ts

@@ -0,0 +1,76 @@
+import type { ResolvedVariables } from '../../appearance/variables';
+export declare function textRules(v: ResolvedVariables): {
+    internal: {
+        '.Text.Small': {
+            fontSize: string;
+        };
+        '.Text.Large': {
+            fontSize: string;
+        };
+        '.Text.Strong': {
+            fontWeight: string;
+        };
+        '.Text.Medium': {
+            fontWeight: string;
+        };
+        '.Heading.Level2': {
+            fontSize: string;
+        };
+        '.Heading.Level3': {
+            fontSize: string;
+        };
+        '.Heading.TonePrimary': {
+            color: string;
+        };
+        '.Amount.TonePrimary': {
+            color: string;
+        };
+        '.Amount.ToneSuccess': {
+            color: string;
+        };
+        '.Amount.ToneDanger': {
+            color: string;
+        };
+        '.Amount.ToneSecondary': {
+            color: string;
+            fontWeight: string;
+        };
+        '.Amount.Strong': {
+            fontWeight: string;
+        };
+    };
+    public: {
+        '.Text': {
+            color: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.TextSecondary': {
+            color: string;
+        };
+        '.Heading': {
+            margin: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.Amount': {
+            fontVariantNumeric: string;
+            fontWeight: string;
+        };
+        '.Amount--display': {
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        '.Overline': {
+            fontSize: string;
+            fontWeight: string;
+            color: string;
+            textTransform: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+    };
+};

package/dist/cjs/types/src/ui/components/Text/Text.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Text from './Text';
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Ledger: Story;
+export declare const Midnight: Story;

package/dist/cjs/types/src/ui/components/TextInput/TextInput.d.ts

@@ -0,0 +1,13 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * A native text input styled by the appearance's `.Input` rules. Takes what `Form.Item` gives its
+ * child (`id`, `value`, `onChange`, `aria-invalid`, a ref to focus), so it works as one unchanged.
+ * Controlled when a `value` prop is present (an `undefined` value from `Form.Item` still counts, and
+ * renders as empty rather than flipping to uncontrolled); otherwise uncontrolled. Disabled with the
+ * antd `Form` around it (as antd's own inputs were) unless `disabled` is given.
+ */
+declare const TextInput: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
+    /** A 32px input, where the full 44px would be too heavy (the coupon row, a table's search box): `.Input--compact`. */
+    compact?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export default TextInput;