@dragunio/fe-libs 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +58 -2
  2. package/dist/index.d.mts +190 -3
  3. package/dist/index.d.ts +190 -3
  4. package/dist/index.js +547 -41
  5. package/dist/index.mjs +555 -43
  6. package/dist/styles.css +862 -5
  7. package/package.json +36 -9
package/README.md CHANGED
@@ -9,7 +9,12 @@ src/ # Public library entrypoints and styles
9
9
  packages/ # Internal component source folders
10
10
  ├── icons/
11
11
  ├── button/
12
- └── table/
12
+ ├── table/
13
+ ├── toggle/
14
+ ├── drawer/
15
+ ├── form-controls/
16
+ ├── tooltip/
17
+ └── expandable-section/
13
18
  apps/playground/ # Local component storybook
14
19
  ```
15
20
 
@@ -37,6 +42,13 @@ Available review routes:
37
42
  - `http://127.0.0.1:5173/#/icons` — SVG Icons
38
43
  - `http://127.0.0.1:5173/#/button` — Button
39
44
  - `http://127.0.0.1:5173/#/table` — Table
45
+ - `http://127.0.0.1:5173/#/drawer` — Drawer
46
+ - `http://127.0.0.1:5173/#/selection` — Selection
47
+ - `http://127.0.0.1:5173/#/datetime` — DateTimePicker
48
+ - `http://127.0.0.1:5173/#/currency` — CurrencyInput
49
+ - `http://127.0.0.1:5173/#/number` — NumberInput
50
+ - `http://127.0.0.1:5173/#/tooltip` — Tooltip
51
+ - `http://127.0.0.1:5173/#/expandable` — ExpandableSection
40
52
 
41
53
  To test the playground against generated package output instead of source aliases:
42
54
 
@@ -57,8 +69,52 @@ pnpm add @dragunio/fe-libs
57
69
  ```
58
70
 
59
71
  ```tsx
60
- import { Button, PlusIcon, Table } from '@dragunio/fe-libs';
72
+ import { Button, PlusIcon, Table, Toggle, Selection, DateTimePicker } from '@dragunio/fe-libs';
61
73
  import '@dragunio/fe-libs/styles.css';
62
74
  ```
63
75
 
76
+ ### Toggle
77
+
78
+ `Toggle` is a native checkbox styled as a switch. It supports controlled and uncontrolled usage, including the standard `onChange`, `onClick`, and `disabled` props. The active color is green by default and accepts any CSS color.
79
+
80
+ ```tsx
81
+ <Toggle
82
+ checked={enabled}
83
+ onChange={(event) => setEnabled(event.target.checked)}
84
+ color="#16a34a"
85
+ aria-label="Enable notifications"
86
+ />
87
+ ```
88
+
89
+ ### Resizable data table
90
+
91
+ Pass `headers` and `data` to have `Table` derive the maximum column count and an initial width for each column. The resize callback emits pixel widths, ready to persist in user preferences.
92
+
93
+ ```tsx
94
+ const [columnSizes, setColumnSizes] = useState<number[]>();
95
+
96
+ <Table
97
+ headers={['Name', 'Email']}
98
+ data={[
99
+ ['Ada Lovelace', 'ada@example.com'],
100
+ ['Grace Hopper', 'grace@example.com'],
101
+ ]}
102
+ striped
103
+ defaultColumnSizes={[180, 280]}
104
+ columnSizes={columnSizes}
105
+ onColumnResize={(nextSizes) => setColumnSizes(nextSizes)}
106
+ />
107
+ ```
108
+
109
+ Use `minColumnWidth` to change the minimum resize limit. The header resize handles support pointer dragging and left/right arrow keys.
110
+
64
111
  The library exposes ESM, CommonJS, TypeScript declarations, and keeps React as a peer dependency.
112
+
113
+ ### New form and overlay primitives
114
+
115
+ - `Drawer` is a portal-based modal panel with `left`, `right`, `top`, and `bottom` slide-in animations. Use `fullScreen` for a full-viewport panel and `footer` for fixed actions below the scrollable body.
116
+ - `Selection` is a rounded custom dropdown inspired by DropdownCustom, with single/multiple modes, optional search, clear action, tags, form-field values, and keyboard navigation.
117
+ - `DateTimePicker` supports `mode="single"` and `mode="range"`; its default format is `dd/MM/yyyy HH:mm`.
118
+ - `NumberInput` and `CurrencyInput` format values immediately while typing (`1000` → `1,000`) and keep up to two fractional digits by default. Use `allowDecimal`, `decimals`, `min`, and `max` to control decimal input and numeric limits. `CurrencyInput` adds a `VND` suffix by default, or a currency dropdown through `currencies`.
119
+ - `Tooltip` shows accessible content on hover and focus.
120
+ - `ExpandableSection` provides controlled and uncontrolled expand/collapse behavior.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
2
+ import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
3
3
 
4
4
  type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
5
5
  type ButtonSize = '24' | '32' | '40';
@@ -51,10 +51,29 @@ declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
51
51
  declare function CloseIcon(props: IconProps): react.JSX.Element;
52
52
  declare function SearchIcon(props: IconProps): react.JSX.Element;
53
53
 
54
+ type TableData = readonly (readonly ReactNode[])[];
55
+ type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
54
56
  type TableProps = TableHTMLAttributes<HTMLTableElement> & {
57
+ /** Enables alternating background colors for body rows. */
55
58
  striped?: boolean;
59
+ /** Column labels. Passing headers or data enables the data-driven table API. */
60
+ headers?: readonly ReactNode[];
61
+ /** Rows of cells. A row can contain fewer or more cells than headers. */
62
+ data?: TableData;
63
+ /** Initial widths, in pixels, for the matching column indexes. */
64
+ defaultColumnSizes?: readonly number[];
65
+ /** Controlled column widths, in pixels. */
66
+ columnSizes?: readonly number[];
67
+ /** Called while a user resizes a column, with the complete current widths. */
68
+ onColumnResize?: ColumnResizeHandler;
69
+ /** Smallest width, in pixels, that a user can resize a column to. */
70
+ minColumnWidth?: number;
56
71
  };
57
- declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
72
+ /**
73
+ * A semantic table. Use its child primitives for custom markup, or pass headers
74
+ * and data for an automatically sized, striped and resizable table.
75
+ */
76
+ declare function Table({ headers, data, striped, children, ...props }: TableProps): react.JSX.Element;
58
77
  declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
59
78
  declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
60
79
  declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
@@ -62,4 +81,172 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
62
81
  declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
63
82
  declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
64
83
 
65
- export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
84
+ type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'> & {
85
+ /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
86
+ color?: string;
87
+ /** Optional text displayed next to the switch. */
88
+ label?: ReactNode;
89
+ };
90
+ declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
91
+ /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
92
+ color?: string;
93
+ /** Optional text displayed next to the switch. */
94
+ label?: ReactNode;
95
+ } & react.RefAttributes<HTMLInputElement>>;
96
+
97
+ type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
98
+ open: boolean;
99
+ onClose: () => void;
100
+ title?: ReactNode;
101
+ /** Optional content pinned below the scrollable body. */
102
+ footer?: ReactNode;
103
+ side?: 'left' | 'right' | 'top' | 'bottom';
104
+ /** Width of a left/right drawer. Defaults to 400px. */
105
+ width?: number | string;
106
+ /** Makes the panel fill the entire viewport while retaining the chosen entrance direction. */
107
+ fullScreen?: boolean;
108
+ children?: ReactNode;
109
+ closeOnBackdropClick?: boolean;
110
+ };
111
+ /** A modal panel with fixed header/footer regions and a scrollable body. */
112
+ declare function Drawer({ open, onClose, title, footer, side, width, fullScreen, children, closeOnBackdropClick, className, style, ...props }: DrawerProps): react.ReactPortal | null;
113
+
114
+ type SelectionOption = {
115
+ label: ReactNode;
116
+ value: string | number;
117
+ disabled?: boolean;
118
+ searchText?: string;
119
+ };
120
+ type SelectionValue = string | number | Array<string | number>;
121
+ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value' | 'onKeyDown'> & {
122
+ label?: ReactNode;
123
+ helperText?: ReactNode;
124
+ error?: boolean;
125
+ options: SelectionOption[];
126
+ placeholder?: string;
127
+ size?: 'small' | 'medium';
128
+ value?: SelectionValue;
129
+ defaultValue?: SelectionValue;
130
+ onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
131
+ multiple?: boolean;
132
+ searchable?: boolean;
133
+ tag?: boolean;
134
+ clearable?: boolean;
135
+ disabled?: boolean;
136
+ name?: string;
137
+ onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
138
+ };
139
+ /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
140
+ declare const Selection: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
141
+ label?: ReactNode;
142
+ helperText?: ReactNode;
143
+ error?: boolean;
144
+ options: SelectionOption[];
145
+ placeholder?: string;
146
+ size?: "small" | "medium";
147
+ value?: SelectionValue;
148
+ defaultValue?: SelectionValue;
149
+ onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
150
+ multiple?: boolean;
151
+ searchable?: boolean;
152
+ tag?: boolean;
153
+ clearable?: boolean;
154
+ disabled?: boolean;
155
+ name?: string;
156
+ onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
157
+ } & react.RefAttributes<HTMLDivElement>>;
158
+ type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
159
+ value?: number | null;
160
+ defaultValue?: number | null;
161
+ onValueChange?: (value: number | null) => void;
162
+ /** Allows the decimal separator and fractional digits. Defaults to true. */
163
+ allowDecimal?: boolean;
164
+ /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
165
+ decimals?: number;
166
+ /** Numeric limits applied immediately as the value changes. */
167
+ min?: number;
168
+ max?: number;
169
+ decimalSeparator?: string;
170
+ thousandSeparator?: string;
171
+ label?: ReactNode;
172
+ helperText?: ReactNode;
173
+ error?: boolean;
174
+ };
175
+ declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
176
+ /** A text input that displays numbers as 1,000.05 by default. */
177
+ declare const NumberInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
178
+ value?: number | null;
179
+ defaultValue?: number | null;
180
+ onValueChange?: (value: number | null) => void;
181
+ /** Allows the decimal separator and fractional digits. Defaults to true. */
182
+ allowDecimal?: boolean;
183
+ /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
184
+ decimals?: number;
185
+ /** Numeric limits applied immediately as the value changes. */
186
+ min?: number;
187
+ max?: number;
188
+ decimalSeparator?: string;
189
+ thousandSeparator?: string;
190
+ label?: ReactNode;
191
+ helperText?: ReactNode;
192
+ error?: boolean;
193
+ } & react.RefAttributes<HTMLInputElement>>;
194
+ type Currency = {
195
+ code: string;
196
+ label?: string;
197
+ suffix?: string;
198
+ };
199
+ type CurrencyInputProps = Omit<NumberInputProps, 'suffix'> & {
200
+ suffix?: ReactNode;
201
+ currencies?: Currency[];
202
+ currency?: string;
203
+ defaultCurrency?: string;
204
+ onCurrencyChange?: (currency: Currency) => void;
205
+ };
206
+ /** NumberInput with an optional currency suffix or currency list dropdown. */
207
+ declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }: CurrencyInputProps): react.JSX.Element;
208
+ type DateRange = [Date | null, Date | null];
209
+ type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
210
+ label?: ReactNode;
211
+ format?: string;
212
+ disabled?: boolean;
213
+ placeholder?: string;
214
+ locale?: string;
215
+ };
216
+ type DateTimePickerSingleProps = DateTimeBaseProps & {
217
+ mode?: 'single';
218
+ value?: Date | null;
219
+ defaultValue?: Date | null;
220
+ onChange?: (value: Date | null) => void;
221
+ };
222
+ type DateTimePickerRangeProps = DateTimeBaseProps & {
223
+ mode: 'range';
224
+ value?: DateRange;
225
+ defaultValue?: DateRange;
226
+ onChange?: (value: DateRange) => void;
227
+ };
228
+ type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
229
+ /** Calendar and time picker. Supports a single Date or [start, end] range. */
230
+ declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
231
+
232
+ type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
233
+ content: ReactNode;
234
+ children: ReactElement;
235
+ placement?: 'top' | 'bottom' | 'left' | 'right';
236
+ disabled?: boolean;
237
+ };
238
+ /** Accessible hover/focus tooltip. The child must accept focus and mouse event props. */
239
+ declare function Tooltip({ content, children, placement, disabled, className, ...props }: TooltipProps): react.JSX.Element;
240
+
241
+ type ExpandableSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
242
+ title: ReactNode;
243
+ children: ReactNode;
244
+ expanded?: boolean;
245
+ defaultExpanded?: boolean;
246
+ onExpandedChange?: (expanded: boolean) => void;
247
+ disabled?: boolean;
248
+ };
249
+ /** An outlined section that can be expanded or collapsed. */
250
+ declare function ExpandableSection({ title, children, expanded, defaultExpanded, onExpandedChange, disabled, className, ...props }: ExpandableSectionProps): react.JSX.Element;
251
+
252
+ export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type IconProps, NumberInput, type NumberInputProps, PlusIcon, SearchIcon, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as react from 'react';
2
- import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes } from 'react';
2
+ import { ButtonHTMLAttributes, ReactNode, SVGProps, TableHTMLAttributes, HTMLAttributes, InputHTMLAttributes, KeyboardEventHandler, ReactElement } from 'react';
3
3
 
4
4
  type ButtonHierarchy = 'primary' | 'secondary-gray' | 'secondary-color' | 'tertiary-gray' | 'tertiary-color';
5
5
  type ButtonSize = '24' | '32' | '40';
@@ -51,10 +51,29 @@ declare function ChevronDownIcon(props: IconProps): react.JSX.Element;
51
51
  declare function CloseIcon(props: IconProps): react.JSX.Element;
52
52
  declare function SearchIcon(props: IconProps): react.JSX.Element;
53
53
 
54
+ type TableData = readonly (readonly ReactNode[])[];
55
+ type ColumnResizeHandler = (columnSizes: number[], columnIndex: number) => void;
54
56
  type TableProps = TableHTMLAttributes<HTMLTableElement> & {
57
+ /** Enables alternating background colors for body rows. */
55
58
  striped?: boolean;
59
+ /** Column labels. Passing headers or data enables the data-driven table API. */
60
+ headers?: readonly ReactNode[];
61
+ /** Rows of cells. A row can contain fewer or more cells than headers. */
62
+ data?: TableData;
63
+ /** Initial widths, in pixels, for the matching column indexes. */
64
+ defaultColumnSizes?: readonly number[];
65
+ /** Controlled column widths, in pixels. */
66
+ columnSizes?: readonly number[];
67
+ /** Called while a user resizes a column, with the complete current widths. */
68
+ onColumnResize?: ColumnResizeHandler;
69
+ /** Smallest width, in pixels, that a user can resize a column to. */
70
+ minColumnWidth?: number;
56
71
  };
57
- declare function Table({ striped, children, ...props }: TableProps): react.JSX.Element;
72
+ /**
73
+ * A semantic table. Use its child primitives for custom markup, or pass headers
74
+ * and data for an automatically sized, striped and resizable table.
75
+ */
76
+ declare function Table({ headers, data, striped, children, ...props }: TableProps): react.JSX.Element;
58
77
  declare function TableHead(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
59
78
  declare function TableBody(props: HTMLAttributes<HTMLTableSectionElement>): react.JSX.Element;
60
79
  declare function TableRow({ children, ...props }: HTMLAttributes<HTMLTableRowElement>): react.JSX.Element;
@@ -62,4 +81,172 @@ declare function TableCell({ children, ...props }: HTMLAttributes<HTMLTableCellE
62
81
  declare function TableHeader({ children, ...props }: HTMLAttributes<HTMLTableCellElement>): react.JSX.Element;
63
82
  declare function TableCaption(props: HTMLAttributes<HTMLTableCaptionElement>): react.JSX.Element;
64
83
 
65
- export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type IconProps, PlusIcon, SearchIcon, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, type TableProps, TableRow, getIconSize };
84
+ type ToggleProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'color' | 'type'> & {
85
+ /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
86
+ color?: string;
87
+ /** Optional text displayed next to the switch. */
88
+ label?: ReactNode;
89
+ };
90
+ declare const Toggle: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "color" | "type"> & {
91
+ /** Active track color. Accepts any valid CSS color, for example `#16a34a`. */
92
+ color?: string;
93
+ /** Optional text displayed next to the switch. */
94
+ label?: ReactNode;
95
+ } & react.RefAttributes<HTMLInputElement>>;
96
+
97
+ type DrawerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
98
+ open: boolean;
99
+ onClose: () => void;
100
+ title?: ReactNode;
101
+ /** Optional content pinned below the scrollable body. */
102
+ footer?: ReactNode;
103
+ side?: 'left' | 'right' | 'top' | 'bottom';
104
+ /** Width of a left/right drawer. Defaults to 400px. */
105
+ width?: number | string;
106
+ /** Makes the panel fill the entire viewport while retaining the chosen entrance direction. */
107
+ fullScreen?: boolean;
108
+ children?: ReactNode;
109
+ closeOnBackdropClick?: boolean;
110
+ };
111
+ /** A modal panel with fixed header/footer regions and a scrollable body. */
112
+ declare function Drawer({ open, onClose, title, footer, side, width, fullScreen, children, closeOnBackdropClick, className, style, ...props }: DrawerProps): react.ReactPortal | null;
113
+
114
+ type SelectionOption = {
115
+ label: ReactNode;
116
+ value: string | number;
117
+ disabled?: boolean;
118
+ searchText?: string;
119
+ };
120
+ type SelectionValue = string | number | Array<string | number>;
121
+ type SelectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'value' | 'onKeyDown'> & {
122
+ label?: ReactNode;
123
+ helperText?: ReactNode;
124
+ error?: boolean;
125
+ options: SelectionOption[];
126
+ placeholder?: string;
127
+ size?: 'small' | 'medium';
128
+ value?: SelectionValue;
129
+ defaultValue?: SelectionValue;
130
+ onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
131
+ multiple?: boolean;
132
+ searchable?: boolean;
133
+ tag?: boolean;
134
+ clearable?: boolean;
135
+ disabled?: boolean;
136
+ name?: string;
137
+ onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
138
+ };
139
+ /** A rounded, searchable custom dropdown with single, multiple, and tag modes. */
140
+ declare const Selection: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "value" | "defaultValue" | "onChange" | "onKeyDown"> & {
141
+ label?: ReactNode;
142
+ helperText?: ReactNode;
143
+ error?: boolean;
144
+ options: SelectionOption[];
145
+ placeholder?: string;
146
+ size?: "small" | "medium";
147
+ value?: SelectionValue;
148
+ defaultValue?: SelectionValue;
149
+ onChange?: (value: SelectionValue, selected: SelectionOption | SelectionOption[] | undefined) => void;
150
+ multiple?: boolean;
151
+ searchable?: boolean;
152
+ tag?: boolean;
153
+ clearable?: boolean;
154
+ disabled?: boolean;
155
+ name?: string;
156
+ onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
157
+ } & react.RefAttributes<HTMLDivElement>>;
158
+ type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'min' | 'max'> & {
159
+ value?: number | null;
160
+ defaultValue?: number | null;
161
+ onValueChange?: (value: number | null) => void;
162
+ /** Allows the decimal separator and fractional digits. Defaults to true. */
163
+ allowDecimal?: boolean;
164
+ /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
165
+ decimals?: number;
166
+ /** Numeric limits applied immediately as the value changes. */
167
+ min?: number;
168
+ max?: number;
169
+ decimalSeparator?: string;
170
+ thousandSeparator?: string;
171
+ label?: ReactNode;
172
+ helperText?: ReactNode;
173
+ error?: boolean;
174
+ };
175
+ declare function formatNumber(value: number, decimals?: number, thousandSeparator?: string, decimalSeparator?: string): string;
176
+ /** A text input that displays numbers as 1,000.05 by default. */
177
+ declare const NumberInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "onChange" | "max" | "min"> & {
178
+ value?: number | null;
179
+ defaultValue?: number | null;
180
+ onValueChange?: (value: number | null) => void;
181
+ /** Allows the decimal separator and fractional digits. Defaults to true. */
182
+ allowDecimal?: boolean;
183
+ /** Maximum number of fractional digits when allowDecimal is enabled. Defaults to 2. */
184
+ decimals?: number;
185
+ /** Numeric limits applied immediately as the value changes. */
186
+ min?: number;
187
+ max?: number;
188
+ decimalSeparator?: string;
189
+ thousandSeparator?: string;
190
+ label?: ReactNode;
191
+ helperText?: ReactNode;
192
+ error?: boolean;
193
+ } & react.RefAttributes<HTMLInputElement>>;
194
+ type Currency = {
195
+ code: string;
196
+ label?: string;
197
+ suffix?: string;
198
+ };
199
+ type CurrencyInputProps = Omit<NumberInputProps, 'suffix'> & {
200
+ suffix?: ReactNode;
201
+ currencies?: Currency[];
202
+ currency?: string;
203
+ defaultCurrency?: string;
204
+ onCurrencyChange?: (currency: Currency) => void;
205
+ };
206
+ /** NumberInput with an optional currency suffix or currency list dropdown. */
207
+ declare function CurrencyInput({ suffix, currencies, currency, defaultCurrency, onCurrencyChange, className, ...props }: CurrencyInputProps): react.JSX.Element;
208
+ type DateRange = [Date | null, Date | null];
209
+ type DateTimeBaseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
210
+ label?: ReactNode;
211
+ format?: string;
212
+ disabled?: boolean;
213
+ placeholder?: string;
214
+ locale?: string;
215
+ };
216
+ type DateTimePickerSingleProps = DateTimeBaseProps & {
217
+ mode?: 'single';
218
+ value?: Date | null;
219
+ defaultValue?: Date | null;
220
+ onChange?: (value: Date | null) => void;
221
+ };
222
+ type DateTimePickerRangeProps = DateTimeBaseProps & {
223
+ mode: 'range';
224
+ value?: DateRange;
225
+ defaultValue?: DateRange;
226
+ onChange?: (value: DateRange) => void;
227
+ };
228
+ type DateTimePickerProps = DateTimePickerSingleProps | DateTimePickerRangeProps;
229
+ /** Calendar and time picker. Supports a single Date or [start, end] range. */
230
+ declare function DateTimePicker(props: DateTimePickerProps): react.JSX.Element;
231
+
232
+ type TooltipProps = Omit<HTMLAttributes<HTMLSpanElement>, 'content'> & {
233
+ content: ReactNode;
234
+ children: ReactElement;
235
+ placement?: 'top' | 'bottom' | 'left' | 'right';
236
+ disabled?: boolean;
237
+ };
238
+ /** Accessible hover/focus tooltip. The child must accept focus and mouse event props. */
239
+ declare function Tooltip({ content, children, placement, disabled, className, ...props }: TooltipProps): react.JSX.Element;
240
+
241
+ type ExpandableSectionProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
242
+ title: ReactNode;
243
+ children: ReactNode;
244
+ expanded?: boolean;
245
+ defaultExpanded?: boolean;
246
+ onExpandedChange?: (expanded: boolean) => void;
247
+ disabled?: boolean;
248
+ };
249
+ /** An outlined section that can be expanded or collapsed. */
250
+ declare function ExpandableSection({ title, children, expanded, defaultExpanded, onExpandedChange, disabled, className, ...props }: ExpandableSectionProps): react.JSX.Element;
251
+
252
+ export { Button, type ButtonColor, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, ChevronDownIcon, CloseIcon, type ColumnResizeHandler, type Currency, CurrencyInput, type CurrencyInputProps, type DateRange, DateTimePicker, type DateTimePickerProps, type DateTimePickerRangeProps, type DateTimePickerSingleProps, Drawer, type DrawerProps, ExpandableSection, type ExpandableSectionProps, type IconProps, NumberInput, type NumberInputProps, PlusIcon, SearchIcon, Selection, type SelectionOption, type SelectionProps, type SelectionValue, Table, TableBody, TableCaption, TableCell, type TableData, TableHead, TableHeader, type TableProps, TableRow, Toggle, type ToggleProps, Tooltip, type TooltipProps, formatNumber, getIconSize };