@geomak/ui 5.6.0 → 5.7.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/dist/index.cjs +447 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +534 -188
- package/dist/index.d.ts +534 -188
- package/dist/index.js +436 -4
- package/dist/index.js.map +1 -1
- package/dist/styles.css +18 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
-
import React$1 from 'react';
|
|
3
|
+
import * as React$1 from 'react';
|
|
4
|
+
import React__default from 'react';
|
|
4
5
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
5
6
|
|
|
6
7
|
declare const Icon: {
|
|
@@ -252,7 +253,7 @@ declare const Icon: {
|
|
|
252
253
|
|
|
253
254
|
interface PortalProps {
|
|
254
255
|
/** Content to render at the target node. */
|
|
255
|
-
children:
|
|
256
|
+
children: React__default.ReactNode;
|
|
256
257
|
/**
|
|
257
258
|
* Where to mount the portal.
|
|
258
259
|
* - omitted / `undefined` → `document.body` (the safe default for viewport-anchored UI)
|
|
@@ -337,7 +338,7 @@ interface PortalProps {
|
|
|
337
338
|
* </Portal>
|
|
338
339
|
* ```
|
|
339
340
|
*/
|
|
340
|
-
declare function Portal({ children, target }: PortalProps):
|
|
341
|
+
declare function Portal({ children, target }: PortalProps): React__default.ReactPortal;
|
|
341
342
|
|
|
342
343
|
type Spacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
343
344
|
type BoxBackground = 'none' | 'background' | 'surface' | 'surface-raised' | 'accent';
|
|
@@ -345,7 +346,7 @@ type BoxBorder = 'none' | 'border' | 'border-strong' | 'accent' | 'status-error'
|
|
|
345
346
|
type BoxRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
346
347
|
type BoxShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
347
348
|
interface BoxProps {
|
|
348
|
-
as?: keyof
|
|
349
|
+
as?: keyof React__default.JSX.IntrinsicElements;
|
|
349
350
|
/** Padding shorthand — applies to all sides. */
|
|
350
351
|
p?: Spacing;
|
|
351
352
|
/** Horizontal padding (left + right). */
|
|
@@ -373,10 +374,10 @@ interface BoxProps {
|
|
|
373
374
|
/** Height via Tailwind class or CSS value. */
|
|
374
375
|
height?: string | number;
|
|
375
376
|
/** Click handler — accepts any element-typed handler. */
|
|
376
|
-
onClick?:
|
|
377
|
+
onClick?: React__default.MouseEventHandler<HTMLElement>;
|
|
377
378
|
className?: string;
|
|
378
|
-
style?:
|
|
379
|
-
children?:
|
|
379
|
+
style?: React__default.CSSProperties;
|
|
380
|
+
children?: React__default.ReactNode;
|
|
380
381
|
}
|
|
381
382
|
/**
|
|
382
383
|
* A polymorphic layout primitive — a `<div>` (by default) styled via prop
|
|
@@ -498,7 +499,7 @@ interface AvatarProps {
|
|
|
498
499
|
* - any ReactNode (icon, emoji)
|
|
499
500
|
* - omit entirely — a generic "person" silhouette is used
|
|
500
501
|
*/
|
|
501
|
-
fallback?:
|
|
502
|
+
fallback?: React__default.ReactNode;
|
|
502
503
|
/** Size preset. Default `'md'`. */
|
|
503
504
|
size?: AvatarSize;
|
|
504
505
|
/** Circle (default) or rounded square. */
|
|
@@ -554,7 +555,7 @@ interface TypographyProps {
|
|
|
554
555
|
* with `as` when the semantic element should differ from the visual
|
|
555
556
|
* style (e.g. a styled-as-h1 product card heading rendered as `<div>`).
|
|
556
557
|
*/
|
|
557
|
-
as?: keyof
|
|
558
|
+
as?: keyof React__default.JSX.IntrinsicElements;
|
|
558
559
|
color?: TypographyColor;
|
|
559
560
|
weight?: TypographyWeight;
|
|
560
561
|
align?: TypographyAlign;
|
|
@@ -563,8 +564,8 @@ interface TypographyProps {
|
|
|
563
564
|
/** Render the text with reduced opacity (useful for disabled states). */
|
|
564
565
|
muted?: boolean;
|
|
565
566
|
className?: string;
|
|
566
|
-
style?:
|
|
567
|
-
children?:
|
|
567
|
+
style?: React__default.CSSProperties;
|
|
568
|
+
children?: React__default.ReactNode;
|
|
568
569
|
}
|
|
569
570
|
/**
|
|
570
571
|
* Polymorphic typography primitive. `variant` picks a visual scale; `as`
|
|
@@ -643,8 +644,8 @@ interface ModalProps {
|
|
|
643
644
|
okText?: string;
|
|
644
645
|
cancelText?: string;
|
|
645
646
|
hasFooter?: boolean;
|
|
646
|
-
title?:
|
|
647
|
-
children?:
|
|
647
|
+
title?: React__default.ReactNode;
|
|
648
|
+
children?: React__default.ReactNode;
|
|
648
649
|
}
|
|
649
650
|
/**
|
|
650
651
|
* Centred modal dialog powered by Radix Dialog + Framer Motion.
|
|
@@ -671,8 +672,8 @@ interface DrawerProps {
|
|
|
671
672
|
cancelText?: string;
|
|
672
673
|
onOk?: () => void;
|
|
673
674
|
onCancel?: () => void;
|
|
674
|
-
title?:
|
|
675
|
-
children?:
|
|
675
|
+
title?: React__default.ReactNode;
|
|
676
|
+
children?: React__default.ReactNode;
|
|
676
677
|
}
|
|
677
678
|
/**
|
|
678
679
|
* Side-sliding drawer panel powered by Radix Dialog + Framer Motion.
|
|
@@ -689,9 +690,9 @@ interface DrawerProps {
|
|
|
689
690
|
declare function Drawer({ isOpen, onClose, hasFooter, placement, width, okText, cancelText, onOk, onCancel, title, children, }: DrawerProps): react_jsx_runtime.JSX.Element;
|
|
690
691
|
|
|
691
692
|
interface TooltipProps {
|
|
692
|
-
children:
|
|
693
|
+
children: React__default.ReactNode;
|
|
693
694
|
/** The text or node shown inside the tooltip */
|
|
694
|
-
title:
|
|
695
|
+
title: React__default.ReactNode;
|
|
695
696
|
/** Which side of the trigger the tooltip appears on */
|
|
696
697
|
placement?: 'top' | 'right' | 'bottom' | 'left';
|
|
697
698
|
/** Delay before showing, ms (default 300) */
|
|
@@ -716,12 +717,12 @@ interface TooltipProps {
|
|
|
716
717
|
*/
|
|
717
718
|
declare function Tooltip({ children, title, placement, delayDuration, sideOffset, }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
718
719
|
|
|
719
|
-
declare const TooltipProvider:
|
|
720
|
+
declare const TooltipProvider: React__default.FC<TooltipPrimitive.TooltipProviderProps>;
|
|
720
721
|
|
|
721
722
|
interface TabItem {
|
|
722
723
|
key: string;
|
|
723
|
-
title:
|
|
724
|
-
content:
|
|
724
|
+
title: React__default.ReactNode;
|
|
725
|
+
content: React__default.ReactNode;
|
|
725
726
|
}
|
|
726
727
|
interface TabsProps {
|
|
727
728
|
tabs?: TabItem[];
|
|
@@ -792,8 +793,8 @@ declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKey
|
|
|
792
793
|
type NotificationType = 'info' | 'success' | 'warning' | 'danger';
|
|
793
794
|
type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
794
795
|
interface NotificationPayload {
|
|
795
|
-
title:
|
|
796
|
-
description?:
|
|
796
|
+
title: React__default.ReactNode;
|
|
797
|
+
description?: React__default.ReactNode;
|
|
797
798
|
/** Auto-dismiss duration in ms (default 4000). Pass `Infinity` to disable auto-dismiss. */
|
|
798
799
|
duration?: number;
|
|
799
800
|
type?: NotificationType;
|
|
@@ -815,7 +816,7 @@ interface NotificationPayload {
|
|
|
815
816
|
* success({ title: 'Saved', description: 'Changes were stored.' })
|
|
816
817
|
*/
|
|
817
818
|
declare function NotificationProvider({ children, position, }: {
|
|
818
|
-
children:
|
|
819
|
+
children: React__default.ReactNode;
|
|
819
820
|
position?: NotificationPosition;
|
|
820
821
|
}): react_jsx_runtime.JSX.Element;
|
|
821
822
|
/** ─────────────────── hook ─────────────────── */
|
|
@@ -914,7 +915,7 @@ interface FadingBaseProps {
|
|
|
914
915
|
className?: string;
|
|
915
916
|
/** Controls mount/unmount with fade transition */
|
|
916
917
|
isMounted?: boolean;
|
|
917
|
-
children?:
|
|
918
|
+
children?: React__default.ReactNode;
|
|
918
919
|
}
|
|
919
920
|
/**
|
|
920
921
|
* Fade-in / fade-out page container.
|
|
@@ -936,16 +937,16 @@ interface ListItem {
|
|
|
936
937
|
/** Stable key for React reconciliation + active-key matching. */
|
|
937
938
|
key: string | number;
|
|
938
939
|
/** Main item text (title). Required. */
|
|
939
|
-
label:
|
|
940
|
+
label: React__default.ReactNode;
|
|
940
941
|
/** Optional description rendered below the label, in foreground-secondary. */
|
|
941
|
-
description?:
|
|
942
|
+
description?: React__default.ReactNode;
|
|
942
943
|
/**
|
|
943
944
|
* Optional leading slot, typically an Avatar. Anything React-renderable
|
|
944
945
|
* is accepted (icon, image, status badge…).
|
|
945
946
|
*/
|
|
946
|
-
avatar?:
|
|
947
|
+
avatar?: React__default.ReactNode;
|
|
947
948
|
/** Optional trailing slot, e.g. a badge, count, or action icon. */
|
|
948
|
-
trailing?:
|
|
949
|
+
trailing?: React__default.ReactNode;
|
|
949
950
|
/** Disable interaction for this item only. */
|
|
950
951
|
disabled?: boolean;
|
|
951
952
|
}
|
|
@@ -1001,26 +1002,26 @@ declare function List({ items, onItemClick, activeKey, density, }: ListProps): r
|
|
|
1001
1002
|
|
|
1002
1003
|
interface ScalableContainerProps {
|
|
1003
1004
|
/** Resting width. Any CSS length / percent. Default `'100%'`. */
|
|
1004
|
-
width?:
|
|
1005
|
+
width?: React__default.CSSProperties['width'];
|
|
1005
1006
|
/** Resting height. Any CSS length / percent. Default `'auto'`. */
|
|
1006
|
-
height?:
|
|
1007
|
+
height?: React__default.CSSProperties['height'];
|
|
1007
1008
|
/** Width when expanded. Default `'100%'` (fills parent). */
|
|
1008
|
-
expandedWidth?:
|
|
1009
|
+
expandedWidth?: React__default.CSSProperties['width'];
|
|
1009
1010
|
/** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
|
|
1010
1011
|
* when the container lives in normal flow and should push siblings down. */
|
|
1011
|
-
expandedHeight?:
|
|
1012
|
+
expandedHeight?: React__default.CSSProperties['height'];
|
|
1012
1013
|
/** Controlled expanded state. */
|
|
1013
1014
|
expanded?: boolean;
|
|
1014
1015
|
/** Fires when the user toggles. */
|
|
1015
1016
|
onExpandedChange?: (expanded: boolean) => void;
|
|
1016
1017
|
/** Content to render inside. */
|
|
1017
|
-
children?:
|
|
1018
|
+
children?: React__default.ReactNode;
|
|
1018
1019
|
/** CSS class appended to the expanded children wrapper. */
|
|
1019
1020
|
assignClassOnClick?: string;
|
|
1020
1021
|
/** Override the expand-button icon. */
|
|
1021
|
-
expandIcon?:
|
|
1022
|
+
expandIcon?: React__default.ReactNode;
|
|
1022
1023
|
/** Override the collapse-button icon. */
|
|
1023
|
-
collapseIcon?:
|
|
1024
|
+
collapseIcon?: React__default.ReactNode;
|
|
1024
1025
|
/**
|
|
1025
1026
|
* Position of the toggle button inside the container.
|
|
1026
1027
|
* Default `'top-right'` — matches the OS-window convention.
|
|
@@ -1056,10 +1057,10 @@ declare function ScalableContainer({ width, height, expandedWidth, expandedHeigh
|
|
|
1056
1057
|
|
|
1057
1058
|
interface GridCardItem {
|
|
1058
1059
|
key: string | number;
|
|
1059
|
-
title:
|
|
1060
|
-
description?:
|
|
1060
|
+
title: React__default.ReactNode;
|
|
1061
|
+
description?: React__default.ReactNode;
|
|
1061
1062
|
/** Image URL or JSX element */
|
|
1062
|
-
cover?: string |
|
|
1063
|
+
cover?: string | React__default.ReactNode;
|
|
1063
1064
|
enabled?: boolean;
|
|
1064
1065
|
/** Arbitrary route or payload — passed back to onOpen */
|
|
1065
1066
|
to?: string;
|
|
@@ -1147,10 +1148,10 @@ declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps):
|
|
|
1147
1148
|
* announce them as disabled.
|
|
1148
1149
|
*/
|
|
1149
1150
|
interface ContextMenuActionItem {
|
|
1150
|
-
key:
|
|
1151
|
+
key: React__default.Key;
|
|
1151
1152
|
/** Label shown for the item. May be plain text or a node. */
|
|
1152
|
-
value:
|
|
1153
|
-
icon?:
|
|
1153
|
+
value: React__default.ReactNode;
|
|
1154
|
+
icon?: React__default.ReactNode;
|
|
1154
1155
|
/** Fires when the item is activated. Ignored when `children` is set. */
|
|
1155
1156
|
onClick?: () => void;
|
|
1156
1157
|
/** Optional sub-menu items. */
|
|
@@ -1166,7 +1167,7 @@ interface ContextMenuProps {
|
|
|
1166
1167
|
* subtree underneath becomes the trigger area. Wrap an existing
|
|
1167
1168
|
* component / div / image — anything you can right-click on.
|
|
1168
1169
|
*/
|
|
1169
|
-
children:
|
|
1170
|
+
children: React__default.ReactNode;
|
|
1170
1171
|
}
|
|
1171
1172
|
/**
|
|
1172
1173
|
* Right-click context menu, built on `@radix-ui/react-context-menu`.
|
|
@@ -1214,9 +1215,9 @@ interface ContextMenuPosition {
|
|
|
1214
1215
|
|
|
1215
1216
|
interface WizardStep {
|
|
1216
1217
|
/** Ref to the DOM element to highlight for this step. */
|
|
1217
|
-
stepRef:
|
|
1218
|
+
stepRef: React__default.RefObject<HTMLElement | null>;
|
|
1218
1219
|
/** Tooltip body content. */
|
|
1219
|
-
description:
|
|
1220
|
+
description: React__default.ReactNode;
|
|
1220
1221
|
/**
|
|
1221
1222
|
* Tooltip placement relative to the highlighted element.
|
|
1222
1223
|
* - `'right'` (default) — to the right of the highlight
|
|
@@ -1226,11 +1227,11 @@ interface WizardStep {
|
|
|
1226
1227
|
*/
|
|
1227
1228
|
placement?: 'right' | 'left' | 'top' | 'bottom';
|
|
1228
1229
|
/** Optional heading for the step's tooltip. */
|
|
1229
|
-
title?:
|
|
1230
|
+
title?: React__default.ReactNode;
|
|
1230
1231
|
}
|
|
1231
1232
|
interface WizardProps {
|
|
1232
1233
|
/** The wrapped subtree — refs in `steps` point into this tree. */
|
|
1233
|
-
children:
|
|
1234
|
+
children: React__default.ReactNode;
|
|
1234
1235
|
/** Ordered list of steps to walk the user through. */
|
|
1235
1236
|
steps: WizardStep[];
|
|
1236
1237
|
/**
|
|
@@ -1314,12 +1315,12 @@ declare function Wizard({ children, steps, storageKey, dismissible, onComplete,
|
|
|
1314
1315
|
*/
|
|
1315
1316
|
interface TableColumn<T extends Record<string, any> = Record<string, any>> {
|
|
1316
1317
|
/** React reconciliation key for the column itself. */
|
|
1317
|
-
key:
|
|
1318
|
-
label:
|
|
1318
|
+
key: React__default.Key;
|
|
1319
|
+
label: React__default.ReactNode;
|
|
1319
1320
|
/** Property on the row to read for this column. */
|
|
1320
1321
|
keyBind: keyof T & string;
|
|
1321
1322
|
/** Custom cell renderer. Receives the cell value and the full row. */
|
|
1322
|
-
component?: (cellValue: T[keyof T], row: T) =>
|
|
1323
|
+
component?: (cellValue: T[keyof T], row: T) => React__default.ReactNode;
|
|
1323
1324
|
/** Explicit column width (CSS length or px number). Optional — defaults to auto. */
|
|
1324
1325
|
width?: string | number;
|
|
1325
1326
|
/** Text alignment for both header and cells. Defaults to `'center'`. */
|
|
@@ -1346,8 +1347,8 @@ interface PaginationOptions {
|
|
|
1346
1347
|
}
|
|
1347
1348
|
interface ExpandRowOptions<T extends Record<string, any> = Record<string, any>> {
|
|
1348
1349
|
enabled?: boolean;
|
|
1349
|
-
expandIcon?:
|
|
1350
|
-
expandComponent?: (row: T) =>
|
|
1350
|
+
expandIcon?: React__default.ReactNode;
|
|
1351
|
+
expandComponent?: (row: T) => React__default.ReactNode;
|
|
1351
1352
|
}
|
|
1352
1353
|
interface TableProps<T extends Record<string, any> = Record<string, any>> {
|
|
1353
1354
|
columns?: TableColumn<T>[];
|
|
@@ -1359,12 +1360,12 @@ interface TableProps<T extends Record<string, any> = Record<string, any>> {
|
|
|
1359
1360
|
* explicit getter (e.g. `(row) => row.id`) if rows can be reordered or
|
|
1360
1361
|
* filtered while expand state should persist.
|
|
1361
1362
|
*/
|
|
1362
|
-
getRowKey?: (row: T, index: number) =>
|
|
1363
|
+
getRowKey?: (row: T, index: number) => React__default.Key;
|
|
1363
1364
|
pagination?: PaginationOptions;
|
|
1364
1365
|
expandRow?: ExpandRowOptions<T>;
|
|
1365
1366
|
hasSearch?: boolean;
|
|
1366
|
-
footer?:
|
|
1367
|
-
header?:
|
|
1367
|
+
footer?: React__default.ReactNode;
|
|
1368
|
+
header?: React__default.ReactNode;
|
|
1368
1369
|
/**
|
|
1369
1370
|
* When `true`, the body renders skeleton rows (one per column with the
|
|
1370
1371
|
* shared shimmer animation) instead of data. Use during initial data
|
|
@@ -1443,17 +1444,17 @@ declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): re
|
|
|
1443
1444
|
|
|
1444
1445
|
interface TopBarProps {
|
|
1445
1446
|
/** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
|
|
1446
|
-
brand?:
|
|
1447
|
+
brand?: React__default.ReactNode;
|
|
1447
1448
|
/**
|
|
1448
1449
|
* Centre content — primary navigation links, breadcrumb, or page title.
|
|
1449
1450
|
* On mobile (< md breakpoint) this moves below the brand row.
|
|
1450
1451
|
*/
|
|
1451
|
-
center?:
|
|
1452
|
+
center?: React__default.ReactNode;
|
|
1452
1453
|
/**
|
|
1453
1454
|
* Trailing actions — theme toggle, user avatar, notification bell, etc.
|
|
1454
1455
|
* Rendered on the trailing edge.
|
|
1455
1456
|
*/
|
|
1456
|
-
actions?:
|
|
1457
|
+
actions?: React__default.ReactNode;
|
|
1457
1458
|
/**
|
|
1458
1459
|
* Height in pixels (default 56). Controls the `h-*` style directly so
|
|
1459
1460
|
* child scroll-offset calculations can consume it as a CSS var.
|
|
@@ -1491,7 +1492,7 @@ declare function TopBar({ brand, center, actions, height, className, }: TopBarPr
|
|
|
1491
1492
|
/** ─────────────────── types ─────────────────── */
|
|
1492
1493
|
interface SidebarItem {
|
|
1493
1494
|
key: string;
|
|
1494
|
-
icon:
|
|
1495
|
+
icon: React__default.ReactNode;
|
|
1495
1496
|
label: string;
|
|
1496
1497
|
isActive?: boolean;
|
|
1497
1498
|
onClick?: () => void;
|
|
@@ -1513,7 +1514,7 @@ interface SidebarProps {
|
|
|
1513
1514
|
/** Collapsed sidebar width in px (default 52) */
|
|
1514
1515
|
collapsedWidth?: number;
|
|
1515
1516
|
/** Slot rendered at the bottom of the sidebar (theme switch, user avatar…) */
|
|
1516
|
-
footer?:
|
|
1517
|
+
footer?: React__default.ReactNode;
|
|
1517
1518
|
}
|
|
1518
1519
|
/** ─────────────────── main component ─────────────────── */
|
|
1519
1520
|
/**
|
|
@@ -1541,7 +1542,7 @@ interface AppShellProps {
|
|
|
1541
1542
|
* `sidebarSections` is non-empty. The TopBar should leave some leading space
|
|
1542
1543
|
* (or use its `center` / `actions` props) to avoid overlap.
|
|
1543
1544
|
*/
|
|
1544
|
-
topBar?:
|
|
1545
|
+
topBar?: React__default.ReactNode;
|
|
1545
1546
|
/** Sidebar navigation sections */
|
|
1546
1547
|
sidebarSections?: SidebarSection[];
|
|
1547
1548
|
/** Expanded width of the sidebar in px (default 220) */
|
|
@@ -1553,7 +1554,7 @@ interface AppShellProps {
|
|
|
1553
1554
|
/** Slot rendered at the bottom of the sidebar */
|
|
1554
1555
|
sidebarFooter?: SidebarProps['footer'];
|
|
1555
1556
|
/** Main page content */
|
|
1556
|
-
children?:
|
|
1557
|
+
children?: React__default.ReactNode;
|
|
1557
1558
|
/** Root element className */
|
|
1558
1559
|
className?: string;
|
|
1559
1560
|
}
|
|
@@ -1678,9 +1679,9 @@ interface ThemeProviderProps {
|
|
|
1678
1679
|
* - `'auto'` — do nothing; inherit from an ancestor (default)
|
|
1679
1680
|
*/
|
|
1680
1681
|
colorScheme?: 'light' | 'dark' | 'system' | 'auto';
|
|
1681
|
-
children:
|
|
1682
|
+
children: React__default.ReactNode;
|
|
1682
1683
|
className?: string;
|
|
1683
|
-
style?:
|
|
1684
|
+
style?: React__default.CSSProperties;
|
|
1684
1685
|
}
|
|
1685
1686
|
/**
|
|
1686
1687
|
* Scoped theme provider.
|
|
@@ -1718,7 +1719,7 @@ declare function ThemeProvider({ theme, darkTheme, colorScheme, children, classN
|
|
|
1718
1719
|
interface SkeletonBaseProps {
|
|
1719
1720
|
className?: string;
|
|
1720
1721
|
/** Override inline styles */
|
|
1721
|
-
style?:
|
|
1722
|
+
style?: React__default.CSSProperties;
|
|
1722
1723
|
}
|
|
1723
1724
|
/** ─────────────────── SkeletonBox ─────────────────── */
|
|
1724
1725
|
interface SkeletonBoxProps extends SkeletonBaseProps {
|
|
@@ -1786,7 +1787,7 @@ interface SkeletonCardProps extends SkeletonBaseProps {
|
|
|
1786
1787
|
declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
|
|
1787
1788
|
|
|
1788
1789
|
interface ButtonProps {
|
|
1789
|
-
content?:
|
|
1790
|
+
content?: React__default.ReactNode;
|
|
1790
1791
|
/** Visual style variant */
|
|
1791
1792
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
1792
1793
|
/** Size — controls height, padding, and font size */
|
|
@@ -1796,10 +1797,10 @@ interface ButtonProps {
|
|
|
1796
1797
|
loading?: boolean;
|
|
1797
1798
|
disabled?: boolean;
|
|
1798
1799
|
/** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
|
|
1799
|
-
style?:
|
|
1800
|
+
style?: React__default.CSSProperties;
|
|
1800
1801
|
/** Leading icon — rendered before content */
|
|
1801
|
-
icon?:
|
|
1802
|
-
onClick?:
|
|
1802
|
+
icon?: React__default.ReactNode;
|
|
1803
|
+
onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
|
|
1803
1804
|
/**
|
|
1804
1805
|
* @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
|
|
1805
1806
|
* Will be removed in the next major version.
|
|
@@ -1854,25 +1855,56 @@ interface FieldShellOptions {
|
|
|
1854
1855
|
* `focusWithin: true` in that case).
|
|
1855
1856
|
*/
|
|
1856
1857
|
declare function fieldShell({ size, hasError, disabled, focusWithin, sized, }?: FieldShellOptions): string;
|
|
1858
|
+
/**
|
|
1859
|
+
* Small themed "info" affordance shown beside a field label. Hovering or
|
|
1860
|
+
* focusing it reveals `helperText` in a tooltip. Rendered as a `type="button"`
|
|
1861
|
+
* so it never submits an enclosing form, and coloured from semantic tokens so
|
|
1862
|
+
* it follows the active theme.
|
|
1863
|
+
*/
|
|
1864
|
+
declare function FieldHelpIcon({ text }: {
|
|
1865
|
+
text: React__default.ReactNode;
|
|
1866
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1867
|
+
interface FieldLabelProps {
|
|
1868
|
+
label?: React__default.ReactNode;
|
|
1869
|
+
htmlFor?: string;
|
|
1870
|
+
required?: boolean;
|
|
1871
|
+
/** Reveals an info icon + tooltip beside the label. */
|
|
1872
|
+
helperText?: React__default.ReactNode;
|
|
1873
|
+
/** Apply horizontal-layout spacing (top margin, no-wrap, shrink). */
|
|
1874
|
+
horizontal?: boolean;
|
|
1875
|
+
style?: React__default.CSSProperties;
|
|
1876
|
+
/** Label column width in horizontal layout. */
|
|
1877
|
+
width?: string | number;
|
|
1878
|
+
className?: string;
|
|
1879
|
+
}
|
|
1880
|
+
/**
|
|
1881
|
+
* The label row shared by every input — label text + required asterisk +
|
|
1882
|
+
* optional `helperText` info icon. Components that render their own label
|
|
1883
|
+
* outside `<Field>` (Dropdown, DatePicker, Switch, SegmentedControl) use this
|
|
1884
|
+
* so the affordance is pixel-identical everywhere.
|
|
1885
|
+
*
|
|
1886
|
+
* Returns `null` when there's nothing to show (no label and no helperText).
|
|
1887
|
+
*/
|
|
1888
|
+
declare function FieldLabel({ label, htmlFor, required, helperText, horizontal, style, width, className, }: FieldLabelProps): react_jsx_runtime.JSX.Element;
|
|
1857
1889
|
interface FieldProps {
|
|
1858
|
-
label?:
|
|
1890
|
+
label?: React__default.ReactNode;
|
|
1859
1891
|
/** `id` of the control — links the `<label htmlFor>`. */
|
|
1860
1892
|
htmlFor?: string;
|
|
1861
1893
|
/** `id` for the error region — pair with `aria-describedby` on the control. */
|
|
1862
1894
|
errorId?: string;
|
|
1863
|
-
errorMessage?:
|
|
1895
|
+
errorMessage?: React__default.ReactNode;
|
|
1864
1896
|
/** Orientation of label vs control. Default `'vertical'`. */
|
|
1865
1897
|
layout?: 'horizontal' | 'vertical';
|
|
1866
1898
|
/** Show a required asterisk after the label. */
|
|
1867
1899
|
required?: boolean;
|
|
1868
1900
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
1869
|
-
helperText?:
|
|
1870
|
-
labelStyle?:
|
|
1901
|
+
helperText?: React__default.ReactNode;
|
|
1902
|
+
labelStyle?: React__default.CSSProperties;
|
|
1871
1903
|
/** Width of the label column in horizontal layout (CSS length). */
|
|
1872
1904
|
labelWidth?: string | number;
|
|
1873
1905
|
className?: string;
|
|
1874
1906
|
/** The control itself (input / trigger / dropzone). */
|
|
1875
|
-
children:
|
|
1907
|
+
children: React__default.ReactNode;
|
|
1876
1908
|
}
|
|
1877
1909
|
/**
|
|
1878
1910
|
* Layout wrapper shared by every input. Renders:
|
|
@@ -1893,30 +1925,30 @@ declare function Field({ label, htmlFor, errorId, errorMessage, layout, required
|
|
|
1893
1925
|
|
|
1894
1926
|
interface TextInputProps {
|
|
1895
1927
|
value?: string;
|
|
1896
|
-
onChange?:
|
|
1928
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
1897
1929
|
disabled?: boolean;
|
|
1898
|
-
label?:
|
|
1930
|
+
label?: React__default.ReactNode;
|
|
1899
1931
|
htmlFor?: string;
|
|
1900
1932
|
placeholder?: string;
|
|
1901
1933
|
name?: string;
|
|
1902
1934
|
/** Native input type. Defaults to `'text'`. */
|
|
1903
1935
|
type?: 'text' | 'email' | 'url' | 'tel';
|
|
1904
|
-
inputStyle?:
|
|
1905
|
-
style?:
|
|
1936
|
+
inputStyle?: React__default.CSSProperties;
|
|
1937
|
+
style?: React__default.CSSProperties;
|
|
1906
1938
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
1907
1939
|
layout?: 'horizontal' | 'vertical';
|
|
1908
1940
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
1909
1941
|
size?: FieldSize;
|
|
1910
|
-
onBlur?:
|
|
1911
|
-
errorMessage?:
|
|
1942
|
+
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
1943
|
+
errorMessage?: React__default.ReactNode;
|
|
1912
1944
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
1913
|
-
helperText?:
|
|
1945
|
+
helperText?: React__default.ReactNode;
|
|
1914
1946
|
/** Mark the field required (renders an asterisk after the label). */
|
|
1915
1947
|
required?: boolean;
|
|
1916
1948
|
/** Optional leading adornment (icon / prefix). */
|
|
1917
|
-
prefix?:
|
|
1949
|
+
prefix?: React__default.ReactNode;
|
|
1918
1950
|
/** Optional trailing adornment (icon / suffix / unit). */
|
|
1919
|
-
suffix?:
|
|
1951
|
+
suffix?: React__default.ReactNode;
|
|
1920
1952
|
id?: string;
|
|
1921
1953
|
}
|
|
1922
1954
|
/**
|
|
@@ -1955,7 +1987,7 @@ interface NumberInputProps {
|
|
|
1955
1987
|
name?: string;
|
|
1956
1988
|
};
|
|
1957
1989
|
}) => void;
|
|
1958
|
-
label?:
|
|
1990
|
+
label?: React__default.ReactNode;
|
|
1959
1991
|
htmlFor?: string;
|
|
1960
1992
|
name?: string;
|
|
1961
1993
|
disabled?: boolean;
|
|
@@ -1963,14 +1995,14 @@ interface NumberInputProps {
|
|
|
1963
1995
|
layout?: 'horizontal' | 'vertical';
|
|
1964
1996
|
/** Size preset. Default `'md'`. */
|
|
1965
1997
|
size?: FieldSize;
|
|
1966
|
-
errorMessage?:
|
|
1998
|
+
errorMessage?: React__default.ReactNode;
|
|
1967
1999
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
1968
|
-
helperText?:
|
|
2000
|
+
helperText?: React__default.ReactNode;
|
|
1969
2001
|
required?: boolean;
|
|
1970
|
-
inputStyle?:
|
|
1971
|
-
labelStyle?:
|
|
2002
|
+
inputStyle?: React__default.CSSProperties;
|
|
2003
|
+
labelStyle?: React__default.CSSProperties;
|
|
1972
2004
|
placeholder?: string;
|
|
1973
|
-
style?:
|
|
2005
|
+
style?: React__default.CSSProperties;
|
|
1974
2006
|
min?: number;
|
|
1975
2007
|
max?: number;
|
|
1976
2008
|
readOnly?: boolean;
|
|
@@ -2013,27 +2045,27 @@ declare function NumberInput({ step, value, onChange, label, htmlFor, name, disa
|
|
|
2013
2045
|
|
|
2014
2046
|
interface PasswordProps {
|
|
2015
2047
|
value?: string;
|
|
2016
|
-
onChange?:
|
|
2048
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2017
2049
|
disabled?: boolean;
|
|
2018
|
-
label?:
|
|
2050
|
+
label?: React__default.ReactNode;
|
|
2019
2051
|
htmlFor?: string;
|
|
2020
2052
|
placeholder?: string;
|
|
2021
2053
|
name?: string;
|
|
2022
|
-
inputStyle?:
|
|
2023
|
-
style?:
|
|
2054
|
+
inputStyle?: React__default.CSSProperties;
|
|
2055
|
+
style?: React__default.CSSProperties;
|
|
2024
2056
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2025
2057
|
layout?: 'horizontal' | 'vertical';
|
|
2026
2058
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
2027
2059
|
size?: FieldSize;
|
|
2028
|
-
onBlur?:
|
|
2029
|
-
errorMessage?:
|
|
2060
|
+
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
2061
|
+
errorMessage?: React__default.ReactNode;
|
|
2030
2062
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2031
|
-
helperText?:
|
|
2063
|
+
helperText?: React__default.ReactNode;
|
|
2032
2064
|
required?: boolean;
|
|
2033
2065
|
/** Override the "reveal" (password hidden) icon. */
|
|
2034
|
-
showIcon?:
|
|
2066
|
+
showIcon?: React__default.ReactNode;
|
|
2035
2067
|
/** Override the "hide" (password visible) icon. */
|
|
2036
|
-
hideIcon?:
|
|
2068
|
+
hideIcon?: React__default.ReactNode;
|
|
2037
2069
|
}
|
|
2038
2070
|
/**
|
|
2039
2071
|
* Password input with a show/hide reveal toggle. Full-width by default.
|
|
@@ -2048,22 +2080,22 @@ declare function Password({ value, onChange, disabled, label, htmlFor, placehold
|
|
|
2048
2080
|
|
|
2049
2081
|
interface SearchInputProps {
|
|
2050
2082
|
value?: string;
|
|
2051
|
-
onChange?:
|
|
2083
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2052
2084
|
disabled?: boolean;
|
|
2053
|
-
label?:
|
|
2085
|
+
label?: React__default.ReactNode;
|
|
2054
2086
|
htmlFor?: string;
|
|
2055
2087
|
placeholder?: string;
|
|
2056
2088
|
name?: string;
|
|
2057
|
-
inputStyle?:
|
|
2058
|
-
style?:
|
|
2089
|
+
inputStyle?: React__default.CSSProperties;
|
|
2090
|
+
style?: React__default.CSSProperties;
|
|
2059
2091
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2060
2092
|
layout?: 'horizontal' | 'vertical';
|
|
2061
2093
|
/** Size preset. Default `'md'`. */
|
|
2062
2094
|
size?: FieldSize;
|
|
2063
2095
|
/** Override the leading search icon. */
|
|
2064
|
-
icon?:
|
|
2096
|
+
icon?: React__default.ReactNode;
|
|
2065
2097
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2066
|
-
helperText?:
|
|
2098
|
+
helperText?: React__default.ReactNode;
|
|
2067
2099
|
}
|
|
2068
2100
|
/**
|
|
2069
2101
|
* Search field with a leading magnifier icon. Uses `type="search"` for the
|
|
@@ -2075,7 +2107,7 @@ interface SearchInputProps {
|
|
|
2075
2107
|
* <SearchInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search vessels…" />
|
|
2076
2108
|
* ```
|
|
2077
2109
|
*/
|
|
2078
|
-
declare const SearchInput:
|
|
2110
|
+
declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
2079
2111
|
|
|
2080
2112
|
interface CheckboxProps {
|
|
2081
2113
|
/** Controlled checked state */
|
|
@@ -2087,11 +2119,11 @@ interface CheckboxProps {
|
|
|
2087
2119
|
name?: string;
|
|
2088
2120
|
};
|
|
2089
2121
|
}) => void;
|
|
2090
|
-
label?:
|
|
2122
|
+
label?: React__default.ReactNode;
|
|
2091
2123
|
name?: string;
|
|
2092
2124
|
/** `id` for the hidden input and the `<label htmlFor>` link */
|
|
2093
2125
|
htmlFor?: string;
|
|
2094
|
-
errorMessage?:
|
|
2126
|
+
errorMessage?: React__default.ReactNode;
|
|
2095
2127
|
disabled?: boolean;
|
|
2096
2128
|
/**
|
|
2097
2129
|
* Box + label arrangement.
|
|
@@ -2106,7 +2138,7 @@ interface CheckboxProps {
|
|
|
2106
2138
|
*/
|
|
2107
2139
|
labelPosition?: 'left' | 'right';
|
|
2108
2140
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2109
|
-
helperText?:
|
|
2141
|
+
helperText?: React__default.ReactNode;
|
|
2110
2142
|
/** Show a required asterisk after the label. */
|
|
2111
2143
|
required?: boolean;
|
|
2112
2144
|
/** @deprecated Use `checked` */
|
|
@@ -2133,9 +2165,9 @@ interface RadioOption {
|
|
|
2133
2165
|
/** Stable value submitted / reported on change. */
|
|
2134
2166
|
value: string;
|
|
2135
2167
|
/** Main label text. */
|
|
2136
|
-
label:
|
|
2168
|
+
label: React__default.ReactNode;
|
|
2137
2169
|
/** Optional secondary description rendered under the label. */
|
|
2138
|
-
description?:
|
|
2170
|
+
description?: React__default.ReactNode;
|
|
2139
2171
|
/** Disable this option only. */
|
|
2140
2172
|
disabled?: boolean;
|
|
2141
2173
|
}
|
|
@@ -2147,7 +2179,7 @@ interface RadioGroupProps {
|
|
|
2147
2179
|
defaultValue?: string;
|
|
2148
2180
|
onChange?: (value: string) => void;
|
|
2149
2181
|
name?: string;
|
|
2150
|
-
label?:
|
|
2182
|
+
label?: React__default.ReactNode;
|
|
2151
2183
|
/**
|
|
2152
2184
|
* Option arrangement. `'vertical'` (default) stacks options in a column;
|
|
2153
2185
|
* `'horizontal'` lays them in a row. Named `layout` for consistency with
|
|
@@ -2164,8 +2196,8 @@ interface RadioGroupProps {
|
|
|
2164
2196
|
disabled?: boolean;
|
|
2165
2197
|
required?: boolean;
|
|
2166
2198
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2167
|
-
helperText?:
|
|
2168
|
-
errorMessage?:
|
|
2199
|
+
helperText?: React__default.ReactNode;
|
|
2200
|
+
errorMessage?: React__default.ReactNode;
|
|
2169
2201
|
}
|
|
2170
2202
|
/**
|
|
2171
2203
|
* Radio group built on `@radix-ui/react-radio-group`. Each option can carry
|
|
@@ -2204,26 +2236,26 @@ interface SwitchInputProps {
|
|
|
2204
2236
|
};
|
|
2205
2237
|
}) => void;
|
|
2206
2238
|
/** Thumb icon shown when on. */
|
|
2207
|
-
checkedIcon?:
|
|
2239
|
+
checkedIcon?: React__default.ReactNode;
|
|
2208
2240
|
/** Thumb icon shown when off. */
|
|
2209
|
-
uncheckedIcon?:
|
|
2241
|
+
uncheckedIcon?: React__default.ReactNode;
|
|
2210
2242
|
/**
|
|
2211
2243
|
* Central field label, positioned per `layout` (above in vertical, beside
|
|
2212
2244
|
* in horizontal) — the same affordance every other input uses.
|
|
2213
2245
|
*/
|
|
2214
|
-
label?:
|
|
2246
|
+
label?: React__default.ReactNode;
|
|
2215
2247
|
/** Label/control orientation. Default `'horizontal'`. */
|
|
2216
2248
|
layout?: 'horizontal' | 'vertical';
|
|
2217
2249
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2218
|
-
helperText?:
|
|
2250
|
+
helperText?: React__default.ReactNode;
|
|
2219
2251
|
/** Label rendered to the left of the track, emphasised while off. */
|
|
2220
|
-
offLabel?:
|
|
2252
|
+
offLabel?: React__default.ReactNode;
|
|
2221
2253
|
/** Label rendered to the right of the track, emphasised while on. */
|
|
2222
|
-
onLabel?:
|
|
2254
|
+
onLabel?: React__default.ReactNode;
|
|
2223
2255
|
name?: string;
|
|
2224
2256
|
required?: boolean;
|
|
2225
2257
|
disabled?: boolean;
|
|
2226
|
-
errorMessage?:
|
|
2258
|
+
errorMessage?: React__default.ReactNode;
|
|
2227
2259
|
}
|
|
2228
2260
|
/**
|
|
2229
2261
|
* Form switch (on/off toggle) powered by Radix Switch.
|
|
@@ -2246,8 +2278,8 @@ declare function Switch({ checked, defaultChecked, onChange, checkedIcon, unchec
|
|
|
2246
2278
|
|
|
2247
2279
|
interface DropdownItem {
|
|
2248
2280
|
key: string | number;
|
|
2249
|
-
label:
|
|
2250
|
-
icon?:
|
|
2281
|
+
label: React__default.ReactNode;
|
|
2282
|
+
icon?: React__default.ReactNode;
|
|
2251
2283
|
}
|
|
2252
2284
|
/**
|
|
2253
2285
|
* Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
|
|
@@ -2262,7 +2294,7 @@ type DropdownValue = DropdownKey | DropdownKey[];
|
|
|
2262
2294
|
interface DropdownProps {
|
|
2263
2295
|
isMultiselect?: boolean;
|
|
2264
2296
|
hasSearch?: boolean;
|
|
2265
|
-
label?:
|
|
2297
|
+
label?: React__default.ReactNode;
|
|
2266
2298
|
name?: string;
|
|
2267
2299
|
value?: DropdownValue;
|
|
2268
2300
|
onChange?: (e: {
|
|
@@ -2272,18 +2304,18 @@ interface DropdownProps {
|
|
|
2272
2304
|
name?: string;
|
|
2273
2305
|
};
|
|
2274
2306
|
}) => void;
|
|
2275
|
-
onBlur?:
|
|
2307
|
+
onBlur?: React__default.FocusEventHandler;
|
|
2276
2308
|
disabled?: boolean;
|
|
2277
2309
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2278
2310
|
layout?: 'horizontal' | 'vertical';
|
|
2279
2311
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2280
|
-
helperText?:
|
|
2312
|
+
helperText?: React__default.ReactNode;
|
|
2281
2313
|
required?: boolean;
|
|
2282
|
-
errorMessage?:
|
|
2283
|
-
style?:
|
|
2314
|
+
errorMessage?: React__default.ReactNode;
|
|
2315
|
+
style?: React__default.CSSProperties;
|
|
2284
2316
|
htmlFor?: string;
|
|
2285
2317
|
items?: DropdownItem[];
|
|
2286
|
-
labelStyle?:
|
|
2318
|
+
labelStyle?: React__default.CSSProperties;
|
|
2287
2319
|
placeholder?: string;
|
|
2288
2320
|
/** Size preset. Default `'md'`. */
|
|
2289
2321
|
size?: FieldSize;
|
|
@@ -2309,15 +2341,15 @@ interface AutoCompleteItem {
|
|
|
2309
2341
|
key: string;
|
|
2310
2342
|
value: string;
|
|
2311
2343
|
label: string;
|
|
2312
|
-
icon?:
|
|
2344
|
+
icon?: React__default.ReactNode;
|
|
2313
2345
|
}
|
|
2314
2346
|
interface AutoCompleteProps {
|
|
2315
2347
|
disabled?: boolean;
|
|
2316
|
-
label?:
|
|
2348
|
+
label?: React__default.ReactNode;
|
|
2317
2349
|
placeholder?: string;
|
|
2318
2350
|
name?: string;
|
|
2319
|
-
inputStyle?:
|
|
2320
|
-
style?:
|
|
2351
|
+
inputStyle?: React__default.CSSProperties;
|
|
2352
|
+
style?: React__default.CSSProperties;
|
|
2321
2353
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2322
2354
|
layout?: 'horizontal' | 'vertical';
|
|
2323
2355
|
/**
|
|
@@ -2346,11 +2378,11 @@ interface AutoCompleteProps {
|
|
|
2346
2378
|
/** Size preset. Default `'md'`. */
|
|
2347
2379
|
size?: FieldSize;
|
|
2348
2380
|
/** Override the leading search icon (hidden while loading). */
|
|
2349
|
-
icon?:
|
|
2381
|
+
icon?: React__default.ReactNode;
|
|
2350
2382
|
/** Validation message — turns the field red and links via aria-describedby. */
|
|
2351
|
-
errorMessage?:
|
|
2383
|
+
errorMessage?: React__default.ReactNode;
|
|
2352
2384
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2353
|
-
helperText?:
|
|
2385
|
+
helperText?: React__default.ReactNode;
|
|
2354
2386
|
/** Mark required (asterisk after the label). */
|
|
2355
2387
|
required?: boolean;
|
|
2356
2388
|
htmlFor?: string;
|
|
@@ -2395,8 +2427,8 @@ declare function AutoComplete({ disabled, label, placeholder, name, inputStyle,
|
|
|
2395
2427
|
|
|
2396
2428
|
interface TreeSelectNode {
|
|
2397
2429
|
key: string | number;
|
|
2398
|
-
label:
|
|
2399
|
-
icon?:
|
|
2430
|
+
label: React__default.ReactNode;
|
|
2431
|
+
icon?: React__default.ReactNode;
|
|
2400
2432
|
/** Nested children. If present, this node is treated as a parent (branch). */
|
|
2401
2433
|
children?: TreeSelectNode[];
|
|
2402
2434
|
/** Render the node disabled — visible but not selectable. */
|
|
@@ -2415,7 +2447,7 @@ interface TreeSelectProps {
|
|
|
2415
2447
|
name?: string;
|
|
2416
2448
|
};
|
|
2417
2449
|
}) => void;
|
|
2418
|
-
label?:
|
|
2450
|
+
label?: React__default.ReactNode;
|
|
2419
2451
|
placeholder?: string;
|
|
2420
2452
|
/** Form control id linkage. */
|
|
2421
2453
|
htmlFor?: string;
|
|
@@ -2423,12 +2455,12 @@ interface TreeSelectProps {
|
|
|
2423
2455
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2424
2456
|
layout?: 'horizontal' | 'vertical';
|
|
2425
2457
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2426
|
-
helperText?:
|
|
2458
|
+
helperText?: React__default.ReactNode;
|
|
2427
2459
|
/** Show a required asterisk after the label. */
|
|
2428
2460
|
required?: boolean;
|
|
2429
2461
|
disabled?: boolean;
|
|
2430
|
-
errorMessage?:
|
|
2431
|
-
style?:
|
|
2462
|
+
errorMessage?: React__default.ReactNode;
|
|
2463
|
+
style?: React__default.CSSProperties;
|
|
2432
2464
|
/**
|
|
2433
2465
|
* Whether parent (branch) nodes can be selected. When `false`, parents
|
|
2434
2466
|
* only expand/collapse and only leaves are picked. Default `true`.
|
|
@@ -2490,22 +2522,22 @@ interface FileInputProps {
|
|
|
2490
2522
|
}) => void;
|
|
2491
2523
|
name?: string;
|
|
2492
2524
|
htmlFor?: string;
|
|
2493
|
-
label?:
|
|
2525
|
+
label?: React__default.ReactNode;
|
|
2494
2526
|
/** Accepted MIME types / extensions, e.g. `'.xlsx,application/pdf'`. */
|
|
2495
2527
|
accept?: string;
|
|
2496
2528
|
/** Primary call-to-action copy. Default `'Click to upload or drag and drop'`. */
|
|
2497
|
-
prompt?:
|
|
2529
|
+
prompt?: React__default.ReactNode;
|
|
2498
2530
|
/** Secondary hint under the prompt — typically the accepted types / max size. */
|
|
2499
|
-
hint?:
|
|
2531
|
+
hint?: React__default.ReactNode;
|
|
2500
2532
|
/** Maximum file size in bytes. Files above this are rejected with an error. */
|
|
2501
2533
|
maxSize?: number;
|
|
2502
|
-
errorMessage?:
|
|
2534
|
+
errorMessage?: React__default.ReactNode;
|
|
2503
2535
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2504
|
-
helperText?:
|
|
2536
|
+
helperText?: React__default.ReactNode;
|
|
2505
2537
|
disabled?: boolean;
|
|
2506
2538
|
required?: boolean;
|
|
2507
2539
|
/** Override the upload glyph in the empty state. */
|
|
2508
|
-
icon?:
|
|
2540
|
+
icon?: React__default.ReactNode;
|
|
2509
2541
|
}
|
|
2510
2542
|
/**
|
|
2511
2543
|
* Drag-and-drop file input with an enterprise dropzone aesthetic: a calm
|
|
@@ -2534,7 +2566,7 @@ interface DatePickerProps {
|
|
|
2534
2566
|
value?: Date | null;
|
|
2535
2567
|
/** Fires with the next date (or `null` if cleared via the clear button). */
|
|
2536
2568
|
onChange?: (date: Date | null) => void;
|
|
2537
|
-
label?:
|
|
2569
|
+
label?: React__default.ReactNode;
|
|
2538
2570
|
/** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
|
|
2539
2571
|
placeholder?: string;
|
|
2540
2572
|
htmlFor?: string;
|
|
@@ -2542,16 +2574,16 @@ interface DatePickerProps {
|
|
|
2542
2574
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2543
2575
|
layout?: 'horizontal' | 'vertical';
|
|
2544
2576
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2545
|
-
helperText?:
|
|
2577
|
+
helperText?: React__default.ReactNode;
|
|
2546
2578
|
/** Show a required asterisk after the label. */
|
|
2547
2579
|
required?: boolean;
|
|
2548
2580
|
disabled?: boolean;
|
|
2549
|
-
errorMessage?:
|
|
2581
|
+
errorMessage?: React__default.ReactNode;
|
|
2550
2582
|
/** Earliest selectable date. Dates before this render disabled. */
|
|
2551
2583
|
min?: Date;
|
|
2552
2584
|
/** Latest selectable date. Dates after this render disabled. */
|
|
2553
2585
|
max?: Date;
|
|
2554
|
-
style?:
|
|
2586
|
+
style?: React__default.CSSProperties;
|
|
2555
2587
|
/**
|
|
2556
2588
|
* Custom formatter for the trigger display. Defaults to
|
|
2557
2589
|
* `YYYY-MM-DD` via `toISOString().slice(0, 10)`.
|
|
@@ -2604,10 +2636,10 @@ declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name
|
|
|
2604
2636
|
|
|
2605
2637
|
interface TextAreaProps {
|
|
2606
2638
|
value?: string;
|
|
2607
|
-
onChange?:
|
|
2608
|
-
onBlur?:
|
|
2639
|
+
onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
|
|
2640
|
+
onBlur?: React__default.FocusEventHandler<HTMLTextAreaElement>;
|
|
2609
2641
|
disabled?: boolean;
|
|
2610
|
-
label?:
|
|
2642
|
+
label?: React__default.ReactNode;
|
|
2611
2643
|
htmlFor?: string;
|
|
2612
2644
|
placeholder?: string;
|
|
2613
2645
|
name?: string;
|
|
@@ -2630,12 +2662,12 @@ interface TextAreaProps {
|
|
|
2630
2662
|
showCount?: boolean;
|
|
2631
2663
|
/** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
|
|
2632
2664
|
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
2633
|
-
errorMessage?:
|
|
2665
|
+
errorMessage?: React__default.ReactNode;
|
|
2634
2666
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2635
|
-
helperText?:
|
|
2667
|
+
helperText?: React__default.ReactNode;
|
|
2636
2668
|
required?: boolean;
|
|
2637
|
-
style?:
|
|
2638
|
-
inputStyle?:
|
|
2669
|
+
style?: React__default.CSSProperties;
|
|
2670
|
+
inputStyle?: React__default.CSSProperties;
|
|
2639
2671
|
}
|
|
2640
2672
|
/**
|
|
2641
2673
|
* Multi-line text input on the shared field foundation. Optional auto-grow
|
|
@@ -2657,8 +2689,8 @@ declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, p
|
|
|
2657
2689
|
|
|
2658
2690
|
interface SegmentedOption {
|
|
2659
2691
|
value: string;
|
|
2660
|
-
label:
|
|
2661
|
-
icon?:
|
|
2692
|
+
label: React__default.ReactNode;
|
|
2693
|
+
icon?: React__default.ReactNode;
|
|
2662
2694
|
disabled?: boolean;
|
|
2663
2695
|
}
|
|
2664
2696
|
interface SegmentedControlProps {
|
|
@@ -2674,15 +2706,15 @@ interface SegmentedControlProps {
|
|
|
2674
2706
|
fullWidth?: boolean;
|
|
2675
2707
|
disabled?: boolean;
|
|
2676
2708
|
/** Optional label, positioned per `layout`. */
|
|
2677
|
-
label?:
|
|
2709
|
+
label?: React__default.ReactNode;
|
|
2678
2710
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2679
2711
|
layout?: 'horizontal' | 'vertical';
|
|
2680
2712
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2681
|
-
helperText?:
|
|
2713
|
+
helperText?: React__default.ReactNode;
|
|
2682
2714
|
/** Native form field name (emits a hidden input carrying the value). */
|
|
2683
2715
|
name?: string;
|
|
2684
2716
|
required?: boolean;
|
|
2685
|
-
errorMessage?:
|
|
2717
|
+
errorMessage?: React__default.ReactNode;
|
|
2686
2718
|
'aria-label'?: string;
|
|
2687
2719
|
}
|
|
2688
2720
|
/**
|
|
@@ -2721,7 +2753,7 @@ declare function SegmentedControl({ options, value, defaultValue, onChange, size
|
|
|
2721
2753
|
type SliderValue = number | [number, number];
|
|
2722
2754
|
interface SliderMark {
|
|
2723
2755
|
value: number;
|
|
2724
|
-
label?:
|
|
2756
|
+
label?: React__default.ReactNode;
|
|
2725
2757
|
}
|
|
2726
2758
|
interface SliderProps {
|
|
2727
2759
|
value?: SliderValue;
|
|
@@ -2732,7 +2764,7 @@ interface SliderProps {
|
|
|
2732
2764
|
min?: number;
|
|
2733
2765
|
max?: number;
|
|
2734
2766
|
step?: number;
|
|
2735
|
-
label?:
|
|
2767
|
+
label?: React__default.ReactNode;
|
|
2736
2768
|
/** Show the current value(s) next to the label. */
|
|
2737
2769
|
showValue?: boolean;
|
|
2738
2770
|
/** Format the displayed value (tooltip + value readout). */
|
|
@@ -2743,9 +2775,9 @@ interface SliderProps {
|
|
|
2743
2775
|
tooltip?: boolean;
|
|
2744
2776
|
size?: FieldSize;
|
|
2745
2777
|
disabled?: boolean;
|
|
2746
|
-
errorMessage?:
|
|
2778
|
+
errorMessage?: React__default.ReactNode;
|
|
2747
2779
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2748
|
-
helperText?:
|
|
2780
|
+
helperText?: React__default.ReactNode;
|
|
2749
2781
|
/** Show a required asterisk after the label. */
|
|
2750
2782
|
required?: boolean;
|
|
2751
2783
|
name?: string;
|
|
@@ -2780,16 +2812,16 @@ interface TagsInputProps {
|
|
|
2780
2812
|
/** Uncontrolled initial tags. */
|
|
2781
2813
|
defaultValue?: string[];
|
|
2782
2814
|
onChange?: (tags: string[]) => void;
|
|
2783
|
-
label?:
|
|
2815
|
+
label?: React__default.ReactNode;
|
|
2784
2816
|
htmlFor?: string;
|
|
2785
2817
|
name?: string;
|
|
2786
2818
|
placeholder?: string;
|
|
2787
2819
|
layout?: 'horizontal' | 'vertical';
|
|
2788
2820
|
size?: FieldSize;
|
|
2789
2821
|
disabled?: boolean;
|
|
2790
|
-
errorMessage?:
|
|
2822
|
+
errorMessage?: React__default.ReactNode;
|
|
2791
2823
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2792
|
-
helperText?:
|
|
2824
|
+
helperText?: React__default.ReactNode;
|
|
2793
2825
|
required?: boolean;
|
|
2794
2826
|
/** Maximum number of tags. Further input is ignored once reached. */
|
|
2795
2827
|
maxTags?: number;
|
|
@@ -2824,7 +2856,7 @@ interface OtpInputProps {
|
|
|
2824
2856
|
onChange?: (code: string) => void;
|
|
2825
2857
|
/** Fired when every box is filled. */
|
|
2826
2858
|
onComplete?: (code: string) => void;
|
|
2827
|
-
label?:
|
|
2859
|
+
label?: React__default.ReactNode;
|
|
2828
2860
|
htmlFor?: string;
|
|
2829
2861
|
name?: string;
|
|
2830
2862
|
/** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
|
|
@@ -2833,12 +2865,12 @@ interface OtpInputProps {
|
|
|
2833
2865
|
masked?: boolean;
|
|
2834
2866
|
size?: FieldSize;
|
|
2835
2867
|
disabled?: boolean;
|
|
2836
|
-
errorMessage?:
|
|
2868
|
+
errorMessage?: React__default.ReactNode;
|
|
2837
2869
|
required?: boolean;
|
|
2838
2870
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2839
2871
|
layout?: 'horizontal' | 'vertical';
|
|
2840
2872
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2841
|
-
helperText?:
|
|
2873
|
+
helperText?: React__default.ReactNode;
|
|
2842
2874
|
/** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
|
|
2843
2875
|
groupAfter?: number;
|
|
2844
2876
|
}
|
|
@@ -2866,17 +2898,17 @@ interface RatingProps {
|
|
|
2866
2898
|
readOnly?: boolean;
|
|
2867
2899
|
/** Clicking the current value again clears to 0. Default `true`. */
|
|
2868
2900
|
clearable?: boolean;
|
|
2869
|
-
label?:
|
|
2901
|
+
label?: React__default.ReactNode;
|
|
2870
2902
|
size?: FieldSize;
|
|
2871
2903
|
disabled?: boolean;
|
|
2872
2904
|
/** Override the icon. Receives a `filled` flag. Default is a star. */
|
|
2873
|
-
icon?: (filled: boolean) =>
|
|
2874
|
-
errorMessage?:
|
|
2905
|
+
icon?: (filled: boolean) => React__default.ReactNode;
|
|
2906
|
+
errorMessage?: React__default.ReactNode;
|
|
2875
2907
|
name?: string;
|
|
2876
2908
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2877
2909
|
layout?: 'horizontal' | 'vertical';
|
|
2878
2910
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2879
|
-
helperText?:
|
|
2911
|
+
helperText?: React__default.ReactNode;
|
|
2880
2912
|
/** Show a required asterisk after the label. */
|
|
2881
2913
|
required?: boolean;
|
|
2882
2914
|
}
|
|
@@ -2901,7 +2933,7 @@ interface TimePickerProps {
|
|
|
2901
2933
|
/** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
|
|
2902
2934
|
value?: string | null;
|
|
2903
2935
|
onChange?: (value: string | null) => void;
|
|
2904
|
-
label?:
|
|
2936
|
+
label?: React__default.ReactNode;
|
|
2905
2937
|
htmlFor?: string;
|
|
2906
2938
|
name?: string;
|
|
2907
2939
|
placeholder?: string;
|
|
@@ -2914,11 +2946,11 @@ interface TimePickerProps {
|
|
|
2914
2946
|
/** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
|
|
2915
2947
|
minuteStep?: number;
|
|
2916
2948
|
disabled?: boolean;
|
|
2917
|
-
errorMessage?:
|
|
2949
|
+
errorMessage?: React__default.ReactNode;
|
|
2918
2950
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2919
|
-
helperText?:
|
|
2951
|
+
helperText?: React__default.ReactNode;
|
|
2920
2952
|
required?: boolean;
|
|
2921
|
-
style?:
|
|
2953
|
+
style?: React__default.CSSProperties;
|
|
2922
2954
|
}
|
|
2923
2955
|
/**
|
|
2924
2956
|
* Time picker with scrollable hour / minute (/ second) columns in a popover.
|
|
@@ -2944,7 +2976,7 @@ interface DateRangePreset {
|
|
|
2944
2976
|
interface DateRangePickerProps {
|
|
2945
2977
|
value?: DateRange;
|
|
2946
2978
|
onChange?: (range: DateRange) => void;
|
|
2947
|
-
label?:
|
|
2979
|
+
label?: React__default.ReactNode;
|
|
2948
2980
|
htmlFor?: string;
|
|
2949
2981
|
placeholder?: string;
|
|
2950
2982
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2957,11 +2989,11 @@ interface DateRangePickerProps {
|
|
|
2957
2989
|
presets?: DateRangePreset[];
|
|
2958
2990
|
format?: (d: Date) => string;
|
|
2959
2991
|
disabled?: boolean;
|
|
2960
|
-
errorMessage?:
|
|
2992
|
+
errorMessage?: React__default.ReactNode;
|
|
2961
2993
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2962
|
-
helperText?:
|
|
2994
|
+
helperText?: React__default.ReactNode;
|
|
2963
2995
|
required?: boolean;
|
|
2964
|
-
style?:
|
|
2996
|
+
style?: React__default.CSSProperties;
|
|
2965
2997
|
}
|
|
2966
2998
|
/**
|
|
2967
2999
|
* Two-month range date picker. Click a start date, then an end date; the span
|
|
@@ -2986,7 +3018,7 @@ interface ColorPickerProps {
|
|
|
2986
3018
|
/** Hex string, e.g. `"#0466c8"`. */
|
|
2987
3019
|
value?: string;
|
|
2988
3020
|
onChange?: (hex: string) => void;
|
|
2989
|
-
label?:
|
|
3021
|
+
label?: React__default.ReactNode;
|
|
2990
3022
|
htmlFor?: string;
|
|
2991
3023
|
name?: string;
|
|
2992
3024
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2996,9 +3028,9 @@ interface ColorPickerProps {
|
|
|
2996
3028
|
/** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
|
|
2997
3029
|
allowCustom?: boolean;
|
|
2998
3030
|
disabled?: boolean;
|
|
2999
|
-
errorMessage?:
|
|
3031
|
+
errorMessage?: React__default.ReactNode;
|
|
3000
3032
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
3001
|
-
helperText?:
|
|
3033
|
+
helperText?: React__default.ReactNode;
|
|
3002
3034
|
required?: boolean;
|
|
3003
3035
|
placeholder?: string;
|
|
3004
3036
|
}
|
|
@@ -3014,4 +3046,318 @@ interface ColorPickerProps {
|
|
|
3014
3046
|
*/
|
|
3015
3047
|
declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, helperText, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
3016
3048
|
|
|
3017
|
-
|
|
3049
|
+
/**
|
|
3050
|
+
* Native, dependency-free validation. A field carries one rule or an array of
|
|
3051
|
+
* rules; rules run in order and the first failure wins. Rules are plain data
|
|
3052
|
+
* (required / pattern / min / max / length) plus an escape hatch `validate`
|
|
3053
|
+
* for anything custom — including async checks (uniqueness, server lookups) and
|
|
3054
|
+
* third-party schemas: `validate: (v) => zodSchema.safeParse(v).success ? undefined : 'msg'`.
|
|
3055
|
+
*/
|
|
3056
|
+
type FormValues = Record<string, unknown>;
|
|
3057
|
+
/** A numeric/length constraint, optionally with its own message. */
|
|
3058
|
+
type Bound = number | {
|
|
3059
|
+
value: number;
|
|
3060
|
+
message?: string;
|
|
3061
|
+
};
|
|
3062
|
+
/** A regex constraint, optionally with its own message. */
|
|
3063
|
+
type Pattern = RegExp | {
|
|
3064
|
+
value: RegExp;
|
|
3065
|
+
message?: string;
|
|
3066
|
+
};
|
|
3067
|
+
interface FieldRule<V = unknown> {
|
|
3068
|
+
/** Reject empty values. Pass a string to set the message. */
|
|
3069
|
+
required?: boolean | string;
|
|
3070
|
+
/** Reject strings that don't match. */
|
|
3071
|
+
pattern?: Pattern;
|
|
3072
|
+
/** Minimum numeric value. */
|
|
3073
|
+
min?: Bound;
|
|
3074
|
+
/** Maximum numeric value. */
|
|
3075
|
+
max?: Bound;
|
|
3076
|
+
/** Minimum length for strings / arrays. */
|
|
3077
|
+
minLength?: Bound;
|
|
3078
|
+
/** Maximum length for strings / arrays. */
|
|
3079
|
+
maxLength?: Bound;
|
|
3080
|
+
/**
|
|
3081
|
+
* Custom validator. Return an error string to fail, or a falsy value to
|
|
3082
|
+
* pass. May be async. Receives the field value and the whole form's values
|
|
3083
|
+
* (for cross-field checks like "confirm password").
|
|
3084
|
+
*/
|
|
3085
|
+
validate?: (value: V, values: FormValues) => string | undefined | null | false | Promise<string | undefined | null | false>;
|
|
3086
|
+
/** Fallback message used by required/pattern when they don't set their own. */
|
|
3087
|
+
message?: string;
|
|
3088
|
+
}
|
|
3089
|
+
type FieldRules<V = unknown> = FieldRule<V> | FieldRule<V>[];
|
|
3090
|
+
type RulesMap = Record<string, FieldRules>;
|
|
3091
|
+
/** Does this rule set make the field required? (drives the `*` asterisk.) */
|
|
3092
|
+
declare function isRequired(rules: FieldRules | undefined): boolean;
|
|
3093
|
+
/**
|
|
3094
|
+
* Run a field's rules and resolve the first error message, or `undefined` when
|
|
3095
|
+
* valid. Optional-and-empty fields short-circuit to valid (only `required`
|
|
3096
|
+
* fires on empty).
|
|
3097
|
+
*/
|
|
3098
|
+
declare function runFieldRules(value: unknown, rules: FieldRules | undefined, values: FormValues): Promise<string | undefined>;
|
|
3099
|
+
/** Common ready-made patterns so callers don't re-type regexes. */
|
|
3100
|
+
declare const patterns: {
|
|
3101
|
+
readonly email: RegExp;
|
|
3102
|
+
readonly url: RegExp;
|
|
3103
|
+
readonly phone: RegExp;
|
|
3104
|
+
readonly digits: RegExp;
|
|
3105
|
+
};
|
|
3106
|
+
|
|
3107
|
+
type ValidateTrigger = 'onChange' | 'onBlur' | 'onSubmit';
|
|
3108
|
+
interface FormStoreOptions {
|
|
3109
|
+
initialValues?: FormValues;
|
|
3110
|
+
/** Static rules keyed by field name. Dynamic fields register their own. */
|
|
3111
|
+
rules?: RulesMap;
|
|
3112
|
+
/**
|
|
3113
|
+
* When a field revalidates. `'onSubmit'` is always implied. Default
|
|
3114
|
+
* `['onChange', 'onBlur', 'onSubmit']` — error appears once a field is
|
|
3115
|
+
* touched and updates live as the user types.
|
|
3116
|
+
*/
|
|
3117
|
+
validateOn?: ValidateTrigger[];
|
|
3118
|
+
}
|
|
3119
|
+
type ErrorMap = Record<string, string | undefined>;
|
|
3120
|
+
/** Stable per-field view handed to subscribers; ref only changes on real change. */
|
|
3121
|
+
interface FieldSnapshot {
|
|
3122
|
+
value: unknown;
|
|
3123
|
+
error: string | undefined;
|
|
3124
|
+
/** touched OR the form was submitted — i.e. "should the error be shown". */
|
|
3125
|
+
showError: boolean;
|
|
3126
|
+
}
|
|
3127
|
+
/**
|
|
3128
|
+
* Framework-agnostic form store. Holds values/errors/touched, runs validation,
|
|
3129
|
+
* and notifies React via `useSyncExternalStore`. Field components subscribe to
|
|
3130
|
+
* a memoized per-field snapshot so a keystroke in one field doesn't re-render
|
|
3131
|
+
* the others.
|
|
3132
|
+
*/
|
|
3133
|
+
declare class FormStore {
|
|
3134
|
+
private listeners;
|
|
3135
|
+
private fieldCache;
|
|
3136
|
+
values: FormValues;
|
|
3137
|
+
errors: ErrorMap;
|
|
3138
|
+
touched: Record<string, boolean>;
|
|
3139
|
+
submitted: boolean;
|
|
3140
|
+
validating: boolean;
|
|
3141
|
+
readonly initialValues: FormValues;
|
|
3142
|
+
private rules;
|
|
3143
|
+
readonly validateOn: ValidateTrigger[];
|
|
3144
|
+
private keys;
|
|
3145
|
+
private keySeq;
|
|
3146
|
+
private rootSnap;
|
|
3147
|
+
constructor(opts?: FormStoreOptions);
|
|
3148
|
+
subscribe: (l: () => void) => (() => void);
|
|
3149
|
+
private emit;
|
|
3150
|
+
getRootSnapshot: () => {
|
|
3151
|
+
v: number;
|
|
3152
|
+
};
|
|
3153
|
+
getFieldSnapshot: (name: string) => FieldSnapshot;
|
|
3154
|
+
setRule(name: string, rules: FieldRules | undefined): void;
|
|
3155
|
+
removeRule(name: string): void;
|
|
3156
|
+
getRule(name: string): FieldRules | undefined;
|
|
3157
|
+
getValues: () => FormValues;
|
|
3158
|
+
getValue: (name: string) => unknown;
|
|
3159
|
+
get isValid(): boolean;
|
|
3160
|
+
setValue: (name: string, value: unknown, opts?: {
|
|
3161
|
+
validate?: boolean;
|
|
3162
|
+
touch?: boolean;
|
|
3163
|
+
}) => void;
|
|
3164
|
+
setValues: (patch: FormValues, opts?: {
|
|
3165
|
+
validate?: boolean;
|
|
3166
|
+
}) => void;
|
|
3167
|
+
setError: (name: string, error: string | undefined) => void;
|
|
3168
|
+
touch: (name: string, opts?: {
|
|
3169
|
+
validate?: boolean;
|
|
3170
|
+
}) => void;
|
|
3171
|
+
setSubmitted: (v: boolean) => void;
|
|
3172
|
+
validateField(name: string): Promise<string | undefined>;
|
|
3173
|
+
validateAll(): Promise<ErrorMap>;
|
|
3174
|
+
reset: (values?: FormValues) => void;
|
|
3175
|
+
getKeys(name: string): number[];
|
|
3176
|
+
arrayAppend: (name: string, item?: unknown) => void;
|
|
3177
|
+
arrayRemove: (name: string, index: number) => void;
|
|
3178
|
+
arrayMove: (name: string, from: number, to: number) => void;
|
|
3179
|
+
/** Drop any errors/touched flags under `name.` — used when an array shifts. */
|
|
3180
|
+
private clearBranch;
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
/**
|
|
3184
|
+
* How a control reports changes, so one binder can drive any of our inputs:
|
|
3185
|
+
* - `value` — `onChange(value)` directly (RadioGroup, Slider, Rating,
|
|
3186
|
+
* SegmentedControl, TagsInput, OtpInput, DatePicker, ColorPicker…)
|
|
3187
|
+
* - `native` — `onChange(e)` reading `e.target.value` (TextInput, Password,
|
|
3188
|
+
* TextArea, NumberInput, SearchInput)
|
|
3189
|
+
* - `checked` — `onChange({target:{checked}})` (Switch, Checkbox)
|
|
3190
|
+
* - `target` — `onChange({target:{value}})` (Dropdown, TreeSelect)
|
|
3191
|
+
*/
|
|
3192
|
+
type FieldKind = 'value' | 'native' | 'checked' | 'target';
|
|
3193
|
+
interface FieldBindings {
|
|
3194
|
+
name: string;
|
|
3195
|
+
id: string;
|
|
3196
|
+
htmlFor: string;
|
|
3197
|
+
required?: boolean;
|
|
3198
|
+
errorMessage?: React__default.ReactNode;
|
|
3199
|
+
onChange: (arg: unknown) => void;
|
|
3200
|
+
onBlur: () => void;
|
|
3201
|
+
/** `value` or `checked`, depending on the control kind. */
|
|
3202
|
+
[prop: string]: unknown;
|
|
3203
|
+
}
|
|
3204
|
+
|
|
3205
|
+
interface UseFormReturn {
|
|
3206
|
+
/** The underlying store — pass to `<Form form={...}>` and for imperative use. */
|
|
3207
|
+
store: FormStore;
|
|
3208
|
+
values: FormValues;
|
|
3209
|
+
errors: ErrorMap;
|
|
3210
|
+
touched: Record<string, boolean>;
|
|
3211
|
+
submitted: boolean;
|
|
3212
|
+
isSubmitting: boolean;
|
|
3213
|
+
isValid: boolean;
|
|
3214
|
+
getValue: (name: string) => unknown;
|
|
3215
|
+
getValues: () => FormValues;
|
|
3216
|
+
setValue: (name: string, value: unknown) => void;
|
|
3217
|
+
setValues: (patch: FormValues) => void;
|
|
3218
|
+
setError: (name: string, error: string | undefined) => void;
|
|
3219
|
+
validateField: (name: string) => Promise<string | undefined>;
|
|
3220
|
+
validateAll: () => Promise<ErrorMap>;
|
|
3221
|
+
reset: (values?: FormValues) => void;
|
|
3222
|
+
/**
|
|
3223
|
+
* Bind a control whose `onChange` receives the value directly (RadioGroup,
|
|
3224
|
+
* Slider, DatePicker, SegmentedControl, TagsInput, OtpInput, …).
|
|
3225
|
+
* Spread the result onto the control: `<Slider {...form.field('volume')} />`.
|
|
3226
|
+
*/
|
|
3227
|
+
field: (name: string, rules?: FieldRules) => FieldBindings;
|
|
3228
|
+
/** Bind a native input (`e.target.value`): TextInput, Password, TextArea, NumberInput. */
|
|
3229
|
+
fieldNative: (name: string, rules?: FieldRules) => FieldBindings;
|
|
3230
|
+
/** Bind a checkable (`{target:{checked}}`): Switch, Checkbox. */
|
|
3231
|
+
fieldChecked: (name: string, rules?: FieldRules) => FieldBindings;
|
|
3232
|
+
/** Bind a `{target:{value}}` control: Dropdown, TreeSelect. */
|
|
3233
|
+
fieldTarget: (name: string, rules?: FieldRules) => FieldBindings;
|
|
3234
|
+
}
|
|
3235
|
+
/**
|
|
3236
|
+
* Create a form instance. State lives in a stable {@link FormStore}; the hook
|
|
3237
|
+
* re-renders the calling component on any change so the spread `field()`
|
|
3238
|
+
* bindings stay current. For large forms, isolate re-renders with
|
|
3239
|
+
* `useFormField` / `<FormField>` instead of reading everything here.
|
|
3240
|
+
*
|
|
3241
|
+
* Validation lives at the form level (rules map or per-field `rules` arg), and
|
|
3242
|
+
* the inputs only *receive* their error — they never validate themselves.
|
|
3243
|
+
*
|
|
3244
|
+
* @example
|
|
3245
|
+
* ```tsx
|
|
3246
|
+
* const form = useForm({ initialValues: { email: '' } })
|
|
3247
|
+
* <Form form={form} onFinish={(v) => save(v)}>
|
|
3248
|
+
* <TextInput label="Email" {...form.fieldNative('email', { required: true, pattern: patterns.email })} />
|
|
3249
|
+
* <Button type="submit">Save</Button>
|
|
3250
|
+
* </Form>
|
|
3251
|
+
* ```
|
|
3252
|
+
*/
|
|
3253
|
+
declare function useForm(options?: FormStoreOptions): UseFormReturn;
|
|
3254
|
+
|
|
3255
|
+
interface FormProps extends Omit<React__default.FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'action'> {
|
|
3256
|
+
/** The instance from `useForm()`. */
|
|
3257
|
+
form: UseFormReturn;
|
|
3258
|
+
/**
|
|
3259
|
+
* SPA submit handler — called with the validated values once all rules
|
|
3260
|
+
* pass. Receiving this puts the form in client mode (`preventDefault`).
|
|
3261
|
+
*/
|
|
3262
|
+
onFinish?: (values: FormValues) => void | Promise<void>;
|
|
3263
|
+
/** Called when a submit attempt fails validation. */
|
|
3264
|
+
onFinishFailed?: (errors: ErrorMap, values: FormValues) => void;
|
|
3265
|
+
/**
|
|
3266
|
+
* SSR / progressive-enhancement submit. A function receives the native
|
|
3267
|
+
* `FormData` (React 19 server action style); a string is used as the
|
|
3268
|
+
* native `<form action>` URL. Either way the form validates first and only
|
|
3269
|
+
* proceeds when valid. Async rules are awaited before a native submit.
|
|
3270
|
+
*/
|
|
3271
|
+
action?: string | ((data: FormData) => void | Promise<void>);
|
|
3272
|
+
children: React__default.ReactNode;
|
|
3273
|
+
}
|
|
3274
|
+
/**
|
|
3275
|
+
* Form wrapper. Owns submission: on submit it marks the form submitted, runs
|
|
3276
|
+
* every field's rules, and only then dispatches — to `onFinish(values)` in SPA
|
|
3277
|
+
* mode or to `action` (function or native URL) for SSR. Renders a real
|
|
3278
|
+
* `<form noValidate>` so our inputs' `name`s serialise into `FormData` while we
|
|
3279
|
+
* still show our own validation messages.
|
|
3280
|
+
*
|
|
3281
|
+
* @example SPA
|
|
3282
|
+
* <Form form={form} onFinish={(v) => api.save(v)}>…</Form>
|
|
3283
|
+
* @example Server action (SSR)
|
|
3284
|
+
* <Form form={form} action={saveAction}>…</Form>
|
|
3285
|
+
*/
|
|
3286
|
+
declare function Form({ form, onFinish, onFinishFailed, action, children, ...rest }: FormProps): react_jsx_runtime.JSX.Element;
|
|
3287
|
+
|
|
3288
|
+
interface UseFormFieldOptions {
|
|
3289
|
+
/** How the control reports changes. Default `'value'`. */
|
|
3290
|
+
kind?: FieldKind;
|
|
3291
|
+
/** Rules for this field — registered on the form (and cleaned up on unmount). */
|
|
3292
|
+
rules?: FieldRules;
|
|
3293
|
+
}
|
|
3294
|
+
/**
|
|
3295
|
+
* Subscribe a single field to the enclosing `<Form>`. Unlike reading bindings
|
|
3296
|
+
* off `useForm()`, this isolates re-renders to just this field via a memoized
|
|
3297
|
+
* per-field snapshot — the right choice for large or dynamic forms. Registering
|
|
3298
|
+
* `rules` here also unregisters them on unmount, which is what makes field
|
|
3299
|
+
* arrays validate correctly as rows come and go.
|
|
3300
|
+
*
|
|
3301
|
+
* @example
|
|
3302
|
+
* const email = useFormField('email', { kind: 'native', rules: { required: true } })
|
|
3303
|
+
* <TextInput label="Email" {...email} />
|
|
3304
|
+
*/
|
|
3305
|
+
declare function useFormField(name: string, options?: UseFormFieldOptions): FieldBindings;
|
|
3306
|
+
|
|
3307
|
+
interface FormFieldProps extends UseFormFieldOptions {
|
|
3308
|
+
name: string;
|
|
3309
|
+
/** Render-prop receiving the bindings to spread onto a control. */
|
|
3310
|
+
children: (field: FieldBindings) => React__default.ReactNode;
|
|
3311
|
+
}
|
|
3312
|
+
/**
|
|
3313
|
+
* Render-prop wrapper around {@link useFormField}. Isolates a field's
|
|
3314
|
+
* re-renders from the rest of the form.
|
|
3315
|
+
*
|
|
3316
|
+
* @example
|
|
3317
|
+
* <FormField name="role" rules={{ required: 'Pick a role' }}>
|
|
3318
|
+
* {(field) => <RadioGroup label="Role" options={ROLES} {...field} />}
|
|
3319
|
+
* </FormField>
|
|
3320
|
+
*/
|
|
3321
|
+
declare function FormField({ name, kind, rules, children }: FormFieldProps): react_jsx_runtime.JSX.Element;
|
|
3322
|
+
|
|
3323
|
+
interface FieldArrayItem {
|
|
3324
|
+
/** Stable React key — survives reorders and removals. */
|
|
3325
|
+
key: number;
|
|
3326
|
+
/** Dotted base path for this row, e.g. `"contacts.2"`. */
|
|
3327
|
+
name: string;
|
|
3328
|
+
index: number;
|
|
3329
|
+
}
|
|
3330
|
+
interface UseFieldArrayReturn {
|
|
3331
|
+
fields: FieldArrayItem[];
|
|
3332
|
+
/** Append a row (optionally seeded with values). */
|
|
3333
|
+
append: (item?: unknown) => void;
|
|
3334
|
+
/** Remove the row at `index` (clears its errors/touched too). */
|
|
3335
|
+
remove: (index: number) => void;
|
|
3336
|
+
/** Reorder a row. */
|
|
3337
|
+
move: (from: number, to: number) => void;
|
|
3338
|
+
/** Replace the entire array. */
|
|
3339
|
+
replace: (items: unknown[]) => void;
|
|
3340
|
+
}
|
|
3341
|
+
/**
|
|
3342
|
+
* Dynamic, AntD-style repeating fields. Returns rows with stable keys plus
|
|
3343
|
+
* add/remove/move helpers. Build each row's field names from `field.name`,
|
|
3344
|
+
* e.g. `${field.name}.email`.
|
|
3345
|
+
*
|
|
3346
|
+
* @example
|
|
3347
|
+
* const { fields, append, remove } = useFieldArray('contacts')
|
|
3348
|
+
* {fields.map((f, i) => (
|
|
3349
|
+
* <div key={f.key}>
|
|
3350
|
+
* <TextInput {...useFormField(`${f.name}.email`, { kind: 'native', rules: { required: true } })} />
|
|
3351
|
+
* <Button onClick={() => remove(i)}>Remove</Button>
|
|
3352
|
+
* </div>
|
|
3353
|
+
* ))}
|
|
3354
|
+
* <Button onClick={() => append({ email: '' })}>Add contact</Button>
|
|
3355
|
+
*/
|
|
3356
|
+
declare function useFieldArray(name: string): UseFieldArrayReturn;
|
|
3357
|
+
|
|
3358
|
+
/** The store provided by `<Form>` to descendant fields / field-arrays. */
|
|
3359
|
+
declare const FormContext: React$1.Context<FormStore>;
|
|
3360
|
+
/** Read the enclosing `<Form>`'s store. Throws if used outside a `<Form>`. */
|
|
3361
|
+
declare function useFormStore(): FormStore;
|
|
3362
|
+
|
|
3363
|
+
export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, fieldShell, isRequired, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
|