@amsintegra/design-system 1.0.0
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.
- package/CHANGELOG.md +43 -0
- package/LICENSE +21 -0
- package/README.md +188 -0
- package/dist/index.cjs +1127 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +522 -0
- package/dist/index.d.ts +522 -0
- package/dist/index.js +730 -0
- package/dist/index.js.map +1 -0
- package/llms.txt +78 -0
- package/package.json +103 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,522 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { PropsWithChildren, ReactNode, ForwardRefExoticComponent } from 'react';
|
|
3
|
+
import { Locale } from 'antd/es/locale';
|
|
4
|
+
import { ThemeConfig, ButtonProps as ButtonProps$1, TagProps as TagProps$1, PaginationProps as PaginationProps$1, SwitchProps, TableProps, ModalProps, SelectProps, UploadProps } from 'antd';
|
|
5
|
+
export { Affix, AffixProps, Alert, AlertProps, Anchor, AnchorProps, AutoComplete, AutoCompleteProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, Breadcrumb, BreadcrumbProps, Calendar, Card, CardProps, Carousel, CarouselProps, Cascader, CascaderProps, Checkbox, CheckboxProps, Col, ColProps, Collapse, CollapseProps, ColorPicker, ColorPickerProps, DatePicker, DatePickerProps, Descriptions, DescriptionsProps, Divider, DividerProps, Drawer, DrawerProps, Dropdown, DropdownProps, Empty, EmptyProps, Flex, FlexProps, FloatButton, FloatButtonProps, Form, FormInstance, FormItemProps, FormListFieldData, FormListOperation, FormProps, FormRule, Image, ImageProps, Input, InputNumber, InputNumberProps, Layout, LayoutProps, List, ListProps, MentionProps, Mentions, Menu, MenuProps, MessageArgsProps, Modal, ModalFuncProps, ModalProps, NotificationArgsProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, QRCode, QRCodeProps, Radio, RadioProps, Rate, RateProps, Result, ResultProps, Row, RowProps, Segmented, SegmentedProps, Select, SelectProps, Skeleton, SkeletonProps, Slider, SliderSingleProps, Space, SpaceProps, Spin, SpinProps, Splitter, SplitterProps, Statistic, StatisticProps, Steps, StepsProps, Switch, SwitchProps, Table, TableColumnType, TableColumnsType, TableProps, Tabs, TabsProps, TimePicker, TimePickerProps, Timeline, TimelineProps, Tooltip, TooltipProps, Tour, TourProps, Transfer, Tree, TreeSelect, TreeSelectProps, Typography, Upload, Watermark, WatermarkProps } from 'antd';
|
|
6
|
+
export { TitleProps } from 'antd/es/typography/Title';
|
|
7
|
+
export { TextProps } from 'antd/es/typography/Text';
|
|
8
|
+
export { ParagraphProps } from 'antd/es/typography/Paragraph';
|
|
9
|
+
export { LinkProps } from 'antd/es/typography/Link';
|
|
10
|
+
import { AntdIconProps } from '@ant-design/icons/lib/components/AntdIcon';
|
|
11
|
+
export { GroupProps as InputGroupProps, InputProps, InputRef, PasswordProps, SearchProps, TextAreaProps } from 'antd/es/input';
|
|
12
|
+
export { DraggerProps, RcFile, UploadChangeParam, UploadFile, UploadListProps, UploadProps } from 'antd/es/upload';
|
|
13
|
+
import { MessageInstance } from 'antd/es/message/interface';
|
|
14
|
+
export { MessageInstance } from 'antd/es/message/interface';
|
|
15
|
+
import { NotificationInstance } from 'antd/es/notification/interface';
|
|
16
|
+
export { NotificationInstance } from 'antd/es/notification/interface';
|
|
17
|
+
export { CheckCircleOutlined, CheckOutlined, CloseCircleOutlined, CloseOutlined, DeleteOutlined, DownOutlined, DownloadOutlined, EditOutlined, ExclamationCircleOutlined, EyeInvisibleOutlined, EyeOutlined, FileExcelOutlined, FileOutlined, FilePdfOutlined, FilterOutlined, FolderOutlined, InfoCircleOutlined, LeftOutlined, LoadingOutlined, LogoutOutlined, MenuOutlined, PlusOutlined, ReloadOutlined, RightOutlined, SearchOutlined, SettingOutlined, UpOutlined, UploadOutlined, UserOutlined, WarningOutlined } from '@ant-design/icons';
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Design tokens — the single source of truth for the AMS Design System.
|
|
21
|
+
*
|
|
22
|
+
* Values are taken from the B2BMX Metronic theme:
|
|
23
|
+
* b2bmx-web-metronic/src/_metronic/assets/sass/components/_variables.custom.scss
|
|
24
|
+
* b2bmx-web-metronic/tailwind.config.js
|
|
25
|
+
*
|
|
26
|
+
* Two tiers:
|
|
27
|
+
* - `primitives`: raw values, no semantic meaning.
|
|
28
|
+
* - `semantic`: role aliases consumed by the antd theme (and Tailwind).
|
|
29
|
+
*/
|
|
30
|
+
/** Raw Metronic brand values. */
|
|
31
|
+
declare const primitives: {
|
|
32
|
+
readonly brandRed: "#A72432";
|
|
33
|
+
readonly brandRedActive: "#8B1D28";
|
|
34
|
+
readonly brandRedLight: "#f1faff";
|
|
35
|
+
readonly green: "#50cd89";
|
|
36
|
+
readonly greenActive: "#47be7d";
|
|
37
|
+
readonly greenLight: "#e8fff3";
|
|
38
|
+
readonly purple: "#7239ea";
|
|
39
|
+
readonly purpleActive: "#5014d0";
|
|
40
|
+
readonly purpleLight: "#f8f5ff";
|
|
41
|
+
readonly pink: "#f1416c";
|
|
42
|
+
readonly pinkActive: "#d9214e";
|
|
43
|
+
readonly pinkLight: "#fff5f8";
|
|
44
|
+
readonly yellow: "#ffc700";
|
|
45
|
+
readonly yellowActive: "#f1bc00";
|
|
46
|
+
readonly yellowLight: "#fff8dd";
|
|
47
|
+
readonly white: "#ffffff";
|
|
48
|
+
readonly gray: {
|
|
49
|
+
readonly 100: "#f9f9f9";
|
|
50
|
+
readonly 200: "#f4f4f4";
|
|
51
|
+
readonly 300: "#e1e3ea";
|
|
52
|
+
readonly 400: "#b5b5c3";
|
|
53
|
+
readonly 500: "#a1a5b7";
|
|
54
|
+
readonly 600: "#7e8299";
|
|
55
|
+
readonly 700: "#5e6278";
|
|
56
|
+
readonly 800: "#3f4254";
|
|
57
|
+
readonly 900: "#181c32";
|
|
58
|
+
};
|
|
59
|
+
readonly background: {
|
|
60
|
+
readonly app: "#f5f8fa";
|
|
61
|
+
readonly body: "#ffffff";
|
|
62
|
+
readonly appDark: "#151521";
|
|
63
|
+
readonly bodyDark: "#1e1e2d";
|
|
64
|
+
};
|
|
65
|
+
readonly dark: {
|
|
66
|
+
readonly base: "#181c32";
|
|
67
|
+
readonly bg: "#151521";
|
|
68
|
+
readonly header: "#1e1e2d";
|
|
69
|
+
readonly active: "#2a2a3c";
|
|
70
|
+
readonly separator: "#393945";
|
|
71
|
+
readonly inputBg: "#1b1b29";
|
|
72
|
+
readonly cardBg: "#1e1e2d";
|
|
73
|
+
readonly gray: {
|
|
74
|
+
readonly 100: "#2b2b40";
|
|
75
|
+
readonly 200: "#323248";
|
|
76
|
+
readonly 300: "#3b3b64";
|
|
77
|
+
readonly 400: "#474761";
|
|
78
|
+
readonly 500: "#565674";
|
|
79
|
+
readonly 600: "#6d6d80";
|
|
80
|
+
readonly 700: "#92929f";
|
|
81
|
+
readonly 800: "#cdcdde";
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
/** Radius scale (Metronic). Base radius is 4px. */
|
|
86
|
+
declare const radius: {
|
|
87
|
+
readonly sm: 2;
|
|
88
|
+
readonly base: 4;
|
|
89
|
+
readonly md: 6;
|
|
90
|
+
readonly lg: 8;
|
|
91
|
+
readonly xl: 12;
|
|
92
|
+
};
|
|
93
|
+
/** Typography (Metronic uses Inter with a compact 13px base). */
|
|
94
|
+
declare const typography: {
|
|
95
|
+
readonly fontFamily: "Inter, Helvetica, Arial, sans-serif";
|
|
96
|
+
readonly fontSizeBase: 13;
|
|
97
|
+
readonly weight: {
|
|
98
|
+
readonly light: 300;
|
|
99
|
+
readonly normal: 400;
|
|
100
|
+
readonly medium: 500;
|
|
101
|
+
readonly semibold: 600;
|
|
102
|
+
readonly bold: 700;
|
|
103
|
+
};
|
|
104
|
+
};
|
|
105
|
+
/** Control sizing (Metronic). */
|
|
106
|
+
declare const sizing: {
|
|
107
|
+
readonly controlHeight: 32;
|
|
108
|
+
readonly buttonMinWidth: 110;
|
|
109
|
+
};
|
|
110
|
+
/**
|
|
111
|
+
* Semantic tokens — role aliases. These feed the antd `ThemeConfig`.
|
|
112
|
+
* Components must consume semantic tokens, never primitives directly.
|
|
113
|
+
*/
|
|
114
|
+
declare const semantic: {
|
|
115
|
+
readonly colorPrimary: "#A72432";
|
|
116
|
+
readonly colorPrimaryActive: "#8B1D28";
|
|
117
|
+
readonly colorSuccess: "#50cd89";
|
|
118
|
+
readonly colorInfo: "#7239ea";
|
|
119
|
+
readonly colorError: "#f1416c";
|
|
120
|
+
readonly colorWarning: "#ffc700";
|
|
121
|
+
readonly colorLink: "#3f4254";
|
|
122
|
+
readonly colorLinkHover: "#A72432";
|
|
123
|
+
readonly colorLinkActive: "#8B1D28";
|
|
124
|
+
readonly colorBgLayout: "#f5f8fa";
|
|
125
|
+
readonly colorBgContainer: "#ffffff";
|
|
126
|
+
readonly borderRadius: 4;
|
|
127
|
+
readonly fontFamily: "Inter, Helvetica, Arial, sans-serif";
|
|
128
|
+
readonly fontSize: 13;
|
|
129
|
+
readonly controlHeight: 32;
|
|
130
|
+
};
|
|
131
|
+
type ThemeMode = 'light' | 'dark';
|
|
132
|
+
|
|
133
|
+
interface AmsConfigProviderProps {
|
|
134
|
+
/**
|
|
135
|
+
* Controlled color mode. When provided, the provider does not manage or
|
|
136
|
+
* persist the mode. Omit it to let the provider manage the mode itself
|
|
137
|
+
* (persisted to localStorage, respects OS preference) — read/toggle it with
|
|
138
|
+
* the `useThemeMode` hook.
|
|
139
|
+
*/
|
|
140
|
+
mode?: ThemeMode;
|
|
141
|
+
/** Initial mode when self-managed (uncontrolled). Defaults to `light`. */
|
|
142
|
+
defaultMode?: ThemeMode;
|
|
143
|
+
/** Persist the self-managed mode to localStorage. Defaults to `true`. */
|
|
144
|
+
persistMode?: boolean;
|
|
145
|
+
/**
|
|
146
|
+
* antd locale (e.g. `esES`, `enUS`). The consuming app passes it;
|
|
147
|
+
* the design system stays i18n-agnostic and ships no message catalog.
|
|
148
|
+
*/
|
|
149
|
+
locale?: Locale;
|
|
150
|
+
/**
|
|
151
|
+
* Theme overrides merged on top of the AMS theme. Use it to customize tokens
|
|
152
|
+
* per project without forking the DS, e.g. `{ token: { colorLink: '#1677ff' } }`.
|
|
153
|
+
*/
|
|
154
|
+
theme?: ThemeConfig;
|
|
155
|
+
children?: ReactNode;
|
|
156
|
+
}
|
|
157
|
+
/**
|
|
158
|
+
* Root provider for the AMS Design System.
|
|
159
|
+
*
|
|
160
|
+
* - Applies the AMS theme (light/dark) via antd's `ConfigProvider`.
|
|
161
|
+
* - Renders antd's `App` for context-safe `message`/`notification`/`Modal`.
|
|
162
|
+
* - Manages the color mode (controlled via `mode`, or self-managed with
|
|
163
|
+
* localStorage persistence and OS-preference detection) and exposes it
|
|
164
|
+
* through the `useThemeMode` hook.
|
|
165
|
+
* - Accepts a `theme` override merged on top of the AMS theme.
|
|
166
|
+
*
|
|
167
|
+
* Render it once at the app root.
|
|
168
|
+
*/
|
|
169
|
+
declare function AmsConfigProvider({ mode, defaultMode, persistMode, locale, theme, children, }: PropsWithChildren<AmsConfigProviderProps>): react.JSX.Element;
|
|
170
|
+
|
|
171
|
+
/**
|
|
172
|
+
* Builds the antd theme for a given mode. Dark mode uses antd's
|
|
173
|
+
* `darkAlgorithm`; brand tokens stay identical so the brand is consistent.
|
|
174
|
+
*/
|
|
175
|
+
declare function buildTheme(mode?: ThemeMode): ThemeConfig;
|
|
176
|
+
/** Default (light) AMS theme. */
|
|
177
|
+
declare const amsTheme: ThemeConfig;
|
|
178
|
+
/** Dark AMS theme. */
|
|
179
|
+
declare const amsThemeDark: ThemeConfig;
|
|
180
|
+
|
|
181
|
+
/** Reads the initial mode: saved preference → OS preference → light. */
|
|
182
|
+
declare function getInitialThemeMode(defaultMode?: ThemeMode): ThemeMode;
|
|
183
|
+
/** Reflects the mode on the DOM so CSS can react (mirrors mf-container). */
|
|
184
|
+
declare function applyThemeModeToDOM(mode: ThemeMode): void;
|
|
185
|
+
interface ThemeModeContextValue {
|
|
186
|
+
mode: ThemeMode;
|
|
187
|
+
setMode: (mode: ThemeMode) => void;
|
|
188
|
+
toggle: () => void;
|
|
189
|
+
isDark: boolean;
|
|
190
|
+
}
|
|
191
|
+
/**
|
|
192
|
+
* Access the current color mode and switch it. Requires an ancestor
|
|
193
|
+
* `AmsConfigProvider`. Use it to build a light/dark toggle:
|
|
194
|
+
*
|
|
195
|
+
* const { isDark, toggle } = useThemeMode();
|
|
196
|
+
* <Switch checked={isDark} onChange={toggle} />
|
|
197
|
+
*/
|
|
198
|
+
declare function useThemeMode(): ThemeModeContextValue;
|
|
199
|
+
|
|
200
|
+
interface ButtonProps extends ButtonProps$1 {
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* AMS Button — thin wrapper over antd `Button` that inherits the AMS theme.
|
|
204
|
+
* Exposes the full antd Button API (type, danger, loading, icon, size, etc.)
|
|
205
|
+
* and forwards the ref so it integrates with Form and tooltips.
|
|
206
|
+
*/
|
|
207
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
208
|
+
|
|
209
|
+
/** AMS semantic tag intents mapped to brand tokens. */
|
|
210
|
+
type TagIntent = 'success' | 'error' | 'warning' | 'info' | 'primary';
|
|
211
|
+
interface TagProps extends TagProps$1 {
|
|
212
|
+
/**
|
|
213
|
+
* Semantic intent that resolves to an AMS brand color. Takes precedence over
|
|
214
|
+
* antd's `color` when set. Formalizes the inline `#50cd89` / `#f1416c` colors
|
|
215
|
+
* previously hardcoded in mf-boveda's DataTable.
|
|
216
|
+
*/
|
|
217
|
+
intent?: TagIntent;
|
|
218
|
+
}
|
|
219
|
+
/**
|
|
220
|
+
* AMS Tag — thin wrapper over antd `Tag` with an optional semantic `intent`
|
|
221
|
+
* that maps to the brand palette. Falls back to the full antd Tag API.
|
|
222
|
+
*/
|
|
223
|
+
declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* Icons — curated re-export from `@ant-design/icons`.
|
|
227
|
+
*
|
|
228
|
+
* Usage:
|
|
229
|
+
* import { DownloadOutlined, SearchOutlined } from '@amsintegra/design-system';
|
|
230
|
+
* <Button icon={<DownloadOutlined />} />
|
|
231
|
+
*
|
|
232
|
+
* This module re-exports a curated set of the most-used icons across the b2bmx
|
|
233
|
+
* microfrontends so consumers get autocomplete from the design system barrel.
|
|
234
|
+
* For any icon not listed here, import it directly from `@ant-design/icons`
|
|
235
|
+
* (it stays a peer dependency and is not bundled).
|
|
236
|
+
*
|
|
237
|
+
* `IconComponent` is the shared type for an antd icon component, useful for
|
|
238
|
+
* typing icon props on other components.
|
|
239
|
+
*/
|
|
240
|
+
|
|
241
|
+
type IconComponent = ForwardRefExoticComponent<Omit<AntdIconProps, 'ref'>>;
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Context-safe access to antd's `message` API.
|
|
245
|
+
*
|
|
246
|
+
* In antd v5 the static `message.success(...)` calls do **not** read the
|
|
247
|
+
* `ConfigProvider` theme and log a warning. The supported approach is to
|
|
248
|
+
* consume the instance provided by antd's `App` context — which
|
|
249
|
+
* `AmsConfigProvider` already renders at the root.
|
|
250
|
+
*
|
|
251
|
+
* Usage:
|
|
252
|
+
* const message = useAmsMessage();
|
|
253
|
+
* message.success('Saved');
|
|
254
|
+
*
|
|
255
|
+
* Requires an ancestor `AmsConfigProvider` (or antd `App`).
|
|
256
|
+
*/
|
|
257
|
+
declare function useAmsMessage(): MessageInstance;
|
|
258
|
+
|
|
259
|
+
/**
|
|
260
|
+
* Context-safe access to antd's `notification` API.
|
|
261
|
+
*
|
|
262
|
+
* Like `useAmsMessage`, this returns the instance from antd's `App` context so
|
|
263
|
+
* notifications inherit the AMS theme and avoid the v5 static-method warning.
|
|
264
|
+
* Requires an ancestor `AmsConfigProvider` (or antd `App`).
|
|
265
|
+
*
|
|
266
|
+
* Usage:
|
|
267
|
+
* const notification = useAmsNotification();
|
|
268
|
+
* notification.success({ message: 'Done', description: 'Saved.' });
|
|
269
|
+
*/
|
|
270
|
+
declare function useAmsNotification(): NotificationInstance;
|
|
271
|
+
|
|
272
|
+
/**
|
|
273
|
+
* Translatable text labels for the pagination control. The design system is
|
|
274
|
+
* i18n-agnostic: the consuming app passes already-translated strings. Anything
|
|
275
|
+
* omitted falls back to antd's `locale` (or English defaults).
|
|
276
|
+
*/
|
|
277
|
+
interface PaginationLabels {
|
|
278
|
+
/** Suffix in the page-size selector, e.g. "/ página". */
|
|
279
|
+
itemsPerPage?: string;
|
|
280
|
+
/** "Ir a" label of the quick jumper. */
|
|
281
|
+
jumpTo?: string;
|
|
282
|
+
/** Confirm button text of the quick jumper. */
|
|
283
|
+
jumpToConfirm?: string;
|
|
284
|
+
/** Accessible label for a page, e.g. "Página". */
|
|
285
|
+
page?: string;
|
|
286
|
+
/** Accessible label for the previous-page button. */
|
|
287
|
+
prevPage?: string;
|
|
288
|
+
/** Accessible label for the next-page button. */
|
|
289
|
+
nextPage?: string;
|
|
290
|
+
/** Label for the page-size selector, e.g. "Tamaño de página". */
|
|
291
|
+
pageSize?: string;
|
|
292
|
+
/**
|
|
293
|
+
* Builds the total-records text (rendered before the pages).
|
|
294
|
+
* Receives the total and the current [from, to] range.
|
|
295
|
+
* e.g. (total) => `Total ${total} registros`. Takes precedence over `totalText`.
|
|
296
|
+
*/
|
|
297
|
+
total?: (total: number, range: [number, number]) => ReactNode;
|
|
298
|
+
/**
|
|
299
|
+
* Declarative total text as separate translated words, matching how the
|
|
300
|
+
* mf-boveda table builds it: `{prefix} {total} {suffix}` → "Total 250 registros".
|
|
301
|
+
* Set `showRange` to render "{prefix} {from}-{to} {suffix}" instead.
|
|
302
|
+
* Ignored when `total` (the function form) is provided.
|
|
303
|
+
*/
|
|
304
|
+
totalText?: {
|
|
305
|
+
/** Word(s) before the number, e.g. "Total". */
|
|
306
|
+
prefix?: string;
|
|
307
|
+
/** Word(s) after the number, e.g. "registros". */
|
|
308
|
+
suffix?: string;
|
|
309
|
+
/** Use the "from-to" range instead of just the total. Default false. */
|
|
310
|
+
showRange?: boolean;
|
|
311
|
+
};
|
|
312
|
+
/** Visible text for the "previous" button (overrides the arrow). */
|
|
313
|
+
previousText?: ReactNode;
|
|
314
|
+
/** Visible text for the "next" button (overrides the arrow). */
|
|
315
|
+
nextText?: ReactNode;
|
|
316
|
+
}
|
|
317
|
+
interface PaginationProps extends PaginationProps$1 {
|
|
318
|
+
/** Translatable text labels. */
|
|
319
|
+
labels?: PaginationLabels;
|
|
320
|
+
}
|
|
321
|
+
/**
|
|
322
|
+
* AMS Pagination — antd `Pagination` with translatable text via a single
|
|
323
|
+
* `labels` prop (page, records/total, previous/next, items-per-page, jumper).
|
|
324
|
+
* The rest of the antd Pagination API passes through. `showTotal` and
|
|
325
|
+
* `itemRender` still work if you prefer to set them directly; explicit
|
|
326
|
+
* `showTotal`/`itemRender`/`locale` props win over `labels`.
|
|
327
|
+
*/
|
|
328
|
+
declare function Pagination({ labels, showTotal, itemRender, locale, ...rest }: PaginationProps): react.JSX.Element;
|
|
329
|
+
|
|
330
|
+
interface ThemeToggleProps extends Omit<SwitchProps, 'checked' | 'onChange'> {
|
|
331
|
+
}
|
|
332
|
+
/**
|
|
333
|
+
* AMS ThemeToggle — a ready-made light/dark switch wired to `useThemeMode`.
|
|
334
|
+
* Requires an ancestor `AmsConfigProvider` that manages the mode
|
|
335
|
+
* (i.e. rendered without a controlled `mode` prop).
|
|
336
|
+
*/
|
|
337
|
+
declare function ThemeToggle(props: ThemeToggleProps): react.JSX.Element;
|
|
338
|
+
|
|
339
|
+
/**
|
|
340
|
+
* Labels for the DataTable. The design system is i18n-agnostic: the consuming
|
|
341
|
+
* microfrontend passes translated strings from its own catalog. Sensible
|
|
342
|
+
* English defaults are provided so the table renders without wiring.
|
|
343
|
+
*/
|
|
344
|
+
interface DataTableLabels {
|
|
345
|
+
emptyText?: string;
|
|
346
|
+
sortAsc?: string;
|
|
347
|
+
sortDesc?: string;
|
|
348
|
+
cancelSort?: string;
|
|
349
|
+
}
|
|
350
|
+
interface DataTableProps<T extends object = Record<string, unknown>> extends Omit<TableProps<T>, 'title' | 'loading'> {
|
|
351
|
+
/** Optional plain-text heading rendered above the table. */
|
|
352
|
+
heading?: string;
|
|
353
|
+
/** Extra content (buttons, filters) rendered above the table. */
|
|
354
|
+
extra?: React.ReactNode;
|
|
355
|
+
/** External loading state. Renders a skeleton placeholder while true. */
|
|
356
|
+
loading?: boolean;
|
|
357
|
+
/** Translated labels; falls back to English defaults. */
|
|
358
|
+
labels?: DataTableLabels;
|
|
359
|
+
/**
|
|
360
|
+
* Translatable pagination text (total/records, previous/next, page-size,
|
|
361
|
+
* jumper). Applied to the table's pagination — matches the mf-boveda pattern
|
|
362
|
+
* of a "{prefix} {total} {suffix}" total and translated prev/next buttons.
|
|
363
|
+
* Merged into `pagination`; anything set directly on `pagination`
|
|
364
|
+
* (`showTotal`/`itemRender`/`locale`) wins.
|
|
365
|
+
*/
|
|
366
|
+
paginationLabels?: PaginationLabels;
|
|
367
|
+
/**
|
|
368
|
+
* Opt-in: render numeric values in the first column as colored tags
|
|
369
|
+
* (green when >= 0, red when < 0). Off by default — this replaces the
|
|
370
|
+
* implicit column-0 behavior of the original mf-boveda DataTable, which
|
|
371
|
+
* was surprising. Explicitly enable it per table when desired.
|
|
372
|
+
*/
|
|
373
|
+
firstColumnNumericTag?: boolean;
|
|
374
|
+
}
|
|
375
|
+
declare function DataTable<T extends object = Record<string, unknown>>({ heading, extra, loading, labels, paginationLabels, firstColumnNumericTag, columns, dataSource, scroll, bordered, pagination, className, ...rest }: DataTableProps<T>): react.JSX.Element;
|
|
376
|
+
|
|
377
|
+
type TriggerRenderer = (open: () => void) => ReactNode;
|
|
378
|
+
interface ModalDialogProps extends Omit<ModalProps, 'open' | 'children'> {
|
|
379
|
+
/** Controlled open state. */
|
|
380
|
+
open?: boolean;
|
|
381
|
+
/** Initial open state in uncontrolled mode. */
|
|
382
|
+
defaultOpen?: boolean;
|
|
383
|
+
/** Node or render-prop that opens the modal when clicked. */
|
|
384
|
+
trigger?: ReactNode | TriggerRenderer;
|
|
385
|
+
/** Close automatically after `onOk` resolves. Default true. */
|
|
386
|
+
closeOnOk?: boolean;
|
|
387
|
+
/** Close automatically after `onCancel`. Default true. */
|
|
388
|
+
closeOnCancel?: boolean;
|
|
389
|
+
/** Notified whenever the open state changes (controlled or not). */
|
|
390
|
+
onOpenChange?: (next: boolean) => void;
|
|
391
|
+
children?: ReactNode;
|
|
392
|
+
}
|
|
393
|
+
/**
|
|
394
|
+
* AMS ModalDialog — a controllable modal composite.
|
|
395
|
+
*
|
|
396
|
+
* Ports mf-boveda's ReusableModal API:
|
|
397
|
+
* - controlled (`open`) or uncontrolled (`defaultOpen`) state,
|
|
398
|
+
* - a `trigger` node or render-prop that opens it,
|
|
399
|
+
* - `closeOnOk` / `closeOnCancel` with async `onOk` support (waits for the
|
|
400
|
+
* returned promise before closing).
|
|
401
|
+
*
|
|
402
|
+
* All other antd Modal props pass through.
|
|
403
|
+
*/
|
|
404
|
+
declare function ModalDialog({ trigger, children, open, defaultOpen, closeOnOk, closeOnCancel, onOk, onCancel, onOpenChange, ...modalProps }: ModalDialogProps): react.JSX.Element;
|
|
405
|
+
|
|
406
|
+
interface FilterOption {
|
|
407
|
+
value: string;
|
|
408
|
+
label: ReactNode;
|
|
409
|
+
disabled?: boolean;
|
|
410
|
+
}
|
|
411
|
+
interface FilterSelectProps extends Omit<SelectProps<string>, 'options' | 'filterOption'> {
|
|
412
|
+
options: FilterOption[];
|
|
413
|
+
/** Enable client-side search with accent-insensitive matching. */
|
|
414
|
+
showSearch?: boolean;
|
|
415
|
+
/** Override the default accent-insensitive filter. */
|
|
416
|
+
filterOption?: SelectProps<string>['filterOption'];
|
|
417
|
+
}
|
|
418
|
+
/**
|
|
419
|
+
* AMS FilterSelect — a Select preset for dashboard filters.
|
|
420
|
+
*
|
|
421
|
+
* Ports mf-boveda's FilterSelect: accent-insensitive search over both the
|
|
422
|
+
* option label and value, full-width by default. i18n is the consumer's
|
|
423
|
+
* responsibility (pass already-translated labels).
|
|
424
|
+
*/
|
|
425
|
+
declare function FilterSelect({ options, showSearch, filterOption, className, style, ...rest }: FilterSelectProps): react.JSX.Element;
|
|
426
|
+
|
|
427
|
+
type UploadMessage = string | ((fileName: string) => string);
|
|
428
|
+
type UploadChangeInfo = Parameters<NonNullable<UploadProps['onChange']>>[0];
|
|
429
|
+
interface FileUploadDraggerProps extends Omit<UploadProps, 'onChange'> {
|
|
430
|
+
/** Success toast text or a builder receiving the file name. */
|
|
431
|
+
successMessage?: UploadMessage;
|
|
432
|
+
/** Error toast text or a builder receiving the file name. */
|
|
433
|
+
errorMessage?: UploadMessage;
|
|
434
|
+
/** Show success/error toasts on upload status changes. Default true. */
|
|
435
|
+
showStatusMessages?: boolean;
|
|
436
|
+
/** Prompt text shown inside the drop area (when no children given). */
|
|
437
|
+
hintText?: ReactNode;
|
|
438
|
+
onUploadSuccess?: (info: UploadChangeInfo) => void;
|
|
439
|
+
onUploadError?: (info: UploadChangeInfo) => void;
|
|
440
|
+
onChange?: UploadProps['onChange'];
|
|
441
|
+
children?: ReactNode;
|
|
442
|
+
}
|
|
443
|
+
/**
|
|
444
|
+
* AMS FileUploadDragger — drag-and-drop uploader.
|
|
445
|
+
*
|
|
446
|
+
* Ports mf-boveda's FileUploadDragger with two DS improvements:
|
|
447
|
+
* - toasts use the context-safe `useAmsMessage()` (no antd v5 static warning),
|
|
448
|
+
* - all copy is passed via props (i18n stays in the consumer); no default
|
|
449
|
+
* upload endpoint is baked in.
|
|
450
|
+
*/
|
|
451
|
+
declare function FileUploadDragger({ successMessage, errorMessage, showStatusMessages, hintText, onUploadSuccess, onUploadError, onChange: externalOnChange, children, ...uploadProps }: FileUploadDraggerProps): react.JSX.Element;
|
|
452
|
+
|
|
453
|
+
interface BreadcrumbItem {
|
|
454
|
+
title: ReactNode;
|
|
455
|
+
href?: string;
|
|
456
|
+
}
|
|
457
|
+
interface PageHeaderProps {
|
|
458
|
+
/** Page title. Rendered as an h1. */
|
|
459
|
+
title: ReactNode;
|
|
460
|
+
/** Breadcrumb trail. When omitted, no breadcrumb is shown. */
|
|
461
|
+
breadcrumbs?: BreadcrumbItem[];
|
|
462
|
+
/** Breadcrumb separator. Defaults to ">". */
|
|
463
|
+
separator?: ReactNode;
|
|
464
|
+
/** Uppercase the title (matches the b2bmx convention). Default true. */
|
|
465
|
+
uppercaseTitle?: boolean;
|
|
466
|
+
/** Content aligned to the right of the title (actions). */
|
|
467
|
+
extra?: ReactNode;
|
|
468
|
+
className?: string;
|
|
469
|
+
}
|
|
470
|
+
/**
|
|
471
|
+
* AMS PageHeader — page title with an optional breadcrumb.
|
|
472
|
+
*
|
|
473
|
+
* Consolidates mf-boveda's Header + Breadcrums. Decoupled from react-router
|
|
474
|
+
* and the boveda domain: the consumer builds the breadcrumb items (already
|
|
475
|
+
* translated) and passes them in.
|
|
476
|
+
*/
|
|
477
|
+
declare function PageHeader({ title, breadcrumbs, separator, uppercaseTitle, extra, className, }: PageHeaderProps): react.JSX.Element;
|
|
478
|
+
|
|
479
|
+
interface DownloadButtonProps extends ButtonProps {
|
|
480
|
+
/** Button label. Defaults to "CSV". */
|
|
481
|
+
label?: React.ReactNode;
|
|
482
|
+
}
|
|
483
|
+
/**
|
|
484
|
+
* AMS DownloadButton — a Button preset for download actions.
|
|
485
|
+
*
|
|
486
|
+
* Ports mf-boveda's DownloadButton: primary type + download icon + label,
|
|
487
|
+
* with the full Button API available. i18n via the `label`/`children` props.
|
|
488
|
+
*/
|
|
489
|
+
declare const DownloadButton: react.ForwardRefExoticComponent<DownloadButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
|
|
490
|
+
|
|
491
|
+
interface ConfirmModalProps extends Omit<ModalDialogProps, 'children'> {
|
|
492
|
+
/** Body message shown to the user. */
|
|
493
|
+
message?: ReactNode;
|
|
494
|
+
/** Mark the confirm action as destructive (red primary button). */
|
|
495
|
+
danger?: boolean;
|
|
496
|
+
children?: ReactNode;
|
|
497
|
+
}
|
|
498
|
+
/**
|
|
499
|
+
* AMS ConfirmModal — a confirm/cancel dialog preset built on `ModalDialog`.
|
|
500
|
+
*
|
|
501
|
+
* Generalizes the mf-boveda cancel/confirm modals (CancelCfdiModal, etc.):
|
|
502
|
+
* inherits controlled/uncontrolled state, trigger, and async `onOk` from
|
|
503
|
+
* ModalDialog. Set `danger` for destructive actions. Copy via props (i18n).
|
|
504
|
+
*/
|
|
505
|
+
declare function ConfirmModal({ message, danger, okButtonProps, children, ...rest }: ConfirmModalProps): react.JSX.Element;
|
|
506
|
+
|
|
507
|
+
interface UseControllableStateOptions<T> {
|
|
508
|
+
/** Controlled value. When defined, the hook is in controlled mode. */
|
|
509
|
+
value?: T;
|
|
510
|
+
/** Initial value for uncontrolled mode. */
|
|
511
|
+
defaultValue: T;
|
|
512
|
+
/** Called on every change (both modes). */
|
|
513
|
+
onChange?: (next: T) => void;
|
|
514
|
+
}
|
|
515
|
+
/**
|
|
516
|
+
* Supports the controlled/uncontrolled pattern used across the design system
|
|
517
|
+
* (mirrors mf-boveda's ReusableModal state handling). When `value` is provided
|
|
518
|
+
* the component is controlled; otherwise internal state is used.
|
|
519
|
+
*/
|
|
520
|
+
declare function useControllableState<T>({ value, defaultValue, onChange, }: UseControllableStateOptions<T>): [T, (next: T) => void];
|
|
521
|
+
|
|
522
|
+
export { AmsConfigProvider, type AmsConfigProviderProps, type BreadcrumbItem, Button, type ButtonProps, ConfirmModal, type ConfirmModalProps, DataTable, type DataTableLabels, type DataTableProps, DownloadButton, type DownloadButtonProps, FileUploadDragger, type FileUploadDraggerProps, type FilterOption, FilterSelect, type FilterSelectProps, type IconComponent, ModalDialog, type ModalDialogProps, PageHeader, type PageHeaderProps, Pagination, type PaginationLabels, type PaginationProps, Tag, type TagIntent, type TagProps, type ThemeMode, type ThemeModeContextValue, ThemeToggle, type ThemeToggleProps, type UseControllableStateOptions, amsTheme, amsThemeDark, applyThemeModeToDOM, buildTheme, getInitialThemeMode, primitives, radius, semantic, sizing, typography, useAmsMessage, useAmsNotification, useControllableState, useThemeMode };
|