@geomak/ui 5.5.3 → 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 +830 -127
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +629 -188
- package/dist/index.d.ts +629 -188
- package/dist/index.js +819 -129
- package/dist/index.js.map +1 -1
- package/dist/styles.css +34 -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,23 +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. */
|
|
1901
|
+
helperText?: React__default.ReactNode;
|
|
1902
|
+
labelStyle?: React__default.CSSProperties;
|
|
1869
1903
|
/** Width of the label column in horizontal layout (CSS length). */
|
|
1870
1904
|
labelWidth?: string | number;
|
|
1871
1905
|
className?: string;
|
|
1872
1906
|
/** The control itself (input / trigger / dropzone). */
|
|
1873
|
-
children:
|
|
1907
|
+
children: React__default.ReactNode;
|
|
1874
1908
|
}
|
|
1875
1909
|
/**
|
|
1876
1910
|
* Layout wrapper shared by every input. Renders:
|
|
@@ -1887,32 +1921,34 @@ interface FieldProps {
|
|
|
1887
1921
|
* medium weight so it reads as the anchor, while the input's placeholder is
|
|
1888
1922
|
* muted — establishing hierarchy without making the label tiny.
|
|
1889
1923
|
*/
|
|
1890
|
-
declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
1924
|
+
declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
1891
1925
|
|
|
1892
1926
|
interface TextInputProps {
|
|
1893
1927
|
value?: string;
|
|
1894
|
-
onChange?:
|
|
1928
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
1895
1929
|
disabled?: boolean;
|
|
1896
|
-
label?:
|
|
1930
|
+
label?: React__default.ReactNode;
|
|
1897
1931
|
htmlFor?: string;
|
|
1898
1932
|
placeholder?: string;
|
|
1899
1933
|
name?: string;
|
|
1900
1934
|
/** Native input type. Defaults to `'text'`. */
|
|
1901
1935
|
type?: 'text' | 'email' | 'url' | 'tel';
|
|
1902
|
-
inputStyle?:
|
|
1903
|
-
style?:
|
|
1936
|
+
inputStyle?: React__default.CSSProperties;
|
|
1937
|
+
style?: React__default.CSSProperties;
|
|
1904
1938
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
1905
1939
|
layout?: 'horizontal' | 'vertical';
|
|
1906
1940
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
1907
1941
|
size?: FieldSize;
|
|
1908
|
-
onBlur?:
|
|
1909
|
-
errorMessage?:
|
|
1942
|
+
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
1943
|
+
errorMessage?: React__default.ReactNode;
|
|
1944
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
1945
|
+
helperText?: React__default.ReactNode;
|
|
1910
1946
|
/** Mark the field required (renders an asterisk after the label). */
|
|
1911
1947
|
required?: boolean;
|
|
1912
1948
|
/** Optional leading adornment (icon / prefix). */
|
|
1913
|
-
prefix?:
|
|
1949
|
+
prefix?: React__default.ReactNode;
|
|
1914
1950
|
/** Optional trailing adornment (icon / suffix / unit). */
|
|
1915
|
-
suffix?:
|
|
1951
|
+
suffix?: React__default.ReactNode;
|
|
1916
1952
|
id?: string;
|
|
1917
1953
|
}
|
|
1918
1954
|
/**
|
|
@@ -1936,7 +1972,7 @@ interface TextInputProps {
|
|
|
1936
1972
|
* />
|
|
1937
1973
|
* ```
|
|
1938
1974
|
*/
|
|
1939
|
-
declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, type, inputStyle, style, layout, size, onBlur, errorMessage, required, prefix, suffix, }: TextInputProps): react_jsx_runtime.JSX.Element;
|
|
1975
|
+
declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, type, inputStyle, style, layout, size, onBlur, errorMessage, helperText, required, prefix, suffix, }: TextInputProps): react_jsx_runtime.JSX.Element;
|
|
1940
1976
|
|
|
1941
1977
|
interface NumberInputProps {
|
|
1942
1978
|
/** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
|
|
@@ -1951,7 +1987,7 @@ interface NumberInputProps {
|
|
|
1951
1987
|
name?: string;
|
|
1952
1988
|
};
|
|
1953
1989
|
}) => void;
|
|
1954
|
-
label?:
|
|
1990
|
+
label?: React__default.ReactNode;
|
|
1955
1991
|
htmlFor?: string;
|
|
1956
1992
|
name?: string;
|
|
1957
1993
|
disabled?: boolean;
|
|
@@ -1959,12 +1995,14 @@ interface NumberInputProps {
|
|
|
1959
1995
|
layout?: 'horizontal' | 'vertical';
|
|
1960
1996
|
/** Size preset. Default `'md'`. */
|
|
1961
1997
|
size?: FieldSize;
|
|
1962
|
-
errorMessage?:
|
|
1998
|
+
errorMessage?: React__default.ReactNode;
|
|
1999
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2000
|
+
helperText?: React__default.ReactNode;
|
|
1963
2001
|
required?: boolean;
|
|
1964
|
-
inputStyle?:
|
|
1965
|
-
labelStyle?:
|
|
2002
|
+
inputStyle?: React__default.CSSProperties;
|
|
2003
|
+
labelStyle?: React__default.CSSProperties;
|
|
1966
2004
|
placeholder?: string;
|
|
1967
|
-
style?:
|
|
2005
|
+
style?: React__default.CSSProperties;
|
|
1968
2006
|
min?: number;
|
|
1969
2007
|
max?: number;
|
|
1970
2008
|
readOnly?: boolean;
|
|
@@ -2003,29 +2041,31 @@ interface NumberInputProps {
|
|
|
2003
2041
|
* <NumberInput label="Tonnage" step={0.25} precision={2} />
|
|
2004
2042
|
* ```
|
|
2005
2043
|
*/
|
|
2006
|
-
declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, size, errorMessage, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
2044
|
+
declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, size, errorMessage, helperText, required, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
|
|
2007
2045
|
|
|
2008
2046
|
interface PasswordProps {
|
|
2009
2047
|
value?: string;
|
|
2010
|
-
onChange?:
|
|
2048
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2011
2049
|
disabled?: boolean;
|
|
2012
|
-
label?:
|
|
2050
|
+
label?: React__default.ReactNode;
|
|
2013
2051
|
htmlFor?: string;
|
|
2014
2052
|
placeholder?: string;
|
|
2015
2053
|
name?: string;
|
|
2016
|
-
inputStyle?:
|
|
2017
|
-
style?:
|
|
2054
|
+
inputStyle?: React__default.CSSProperties;
|
|
2055
|
+
style?: React__default.CSSProperties;
|
|
2018
2056
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2019
2057
|
layout?: 'horizontal' | 'vertical';
|
|
2020
2058
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
2021
2059
|
size?: FieldSize;
|
|
2022
|
-
onBlur?:
|
|
2023
|
-
errorMessage?:
|
|
2060
|
+
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
2061
|
+
errorMessage?: React__default.ReactNode;
|
|
2062
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2063
|
+
helperText?: React__default.ReactNode;
|
|
2024
2064
|
required?: boolean;
|
|
2025
2065
|
/** Override the "reveal" (password hidden) icon. */
|
|
2026
|
-
showIcon?:
|
|
2066
|
+
showIcon?: React__default.ReactNode;
|
|
2027
2067
|
/** Override the "hide" (password visible) icon. */
|
|
2028
|
-
hideIcon?:
|
|
2068
|
+
hideIcon?: React__default.ReactNode;
|
|
2029
2069
|
}
|
|
2030
2070
|
/**
|
|
2031
2071
|
* Password input with a show/hide reveal toggle. Full-width by default.
|
|
@@ -2036,24 +2076,26 @@ interface PasswordProps {
|
|
|
2036
2076
|
* <Password label="Password" value={pw} onChange={(e) => setPw(e.target.value)} />
|
|
2037
2077
|
* ```
|
|
2038
2078
|
*/
|
|
2039
|
-
declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, size, onBlur, errorMessage, required, showIcon, hideIcon, }: PasswordProps): react_jsx_runtime.JSX.Element;
|
|
2079
|
+
declare function Password({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, size, onBlur, errorMessage, helperText, required, showIcon, hideIcon, }: PasswordProps): react_jsx_runtime.JSX.Element;
|
|
2040
2080
|
|
|
2041
2081
|
interface SearchInputProps {
|
|
2042
2082
|
value?: string;
|
|
2043
|
-
onChange?:
|
|
2083
|
+
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2044
2084
|
disabled?: boolean;
|
|
2045
|
-
label?:
|
|
2085
|
+
label?: React__default.ReactNode;
|
|
2046
2086
|
htmlFor?: string;
|
|
2047
2087
|
placeholder?: string;
|
|
2048
2088
|
name?: string;
|
|
2049
|
-
inputStyle?:
|
|
2050
|
-
style?:
|
|
2089
|
+
inputStyle?: React__default.CSSProperties;
|
|
2090
|
+
style?: React__default.CSSProperties;
|
|
2051
2091
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2052
2092
|
layout?: 'horizontal' | 'vertical';
|
|
2053
2093
|
/** Size preset. Default `'md'`. */
|
|
2054
2094
|
size?: FieldSize;
|
|
2055
2095
|
/** Override the leading search icon. */
|
|
2056
|
-
icon?:
|
|
2096
|
+
icon?: React__default.ReactNode;
|
|
2097
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2098
|
+
helperText?: React__default.ReactNode;
|
|
2057
2099
|
}
|
|
2058
2100
|
/**
|
|
2059
2101
|
* Search field with a leading magnifier icon. Uses `type="search"` for the
|
|
@@ -2065,7 +2107,7 @@ interface SearchInputProps {
|
|
|
2065
2107
|
* <SearchInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search vessels…" />
|
|
2066
2108
|
* ```
|
|
2067
2109
|
*/
|
|
2068
|
-
declare const SearchInput:
|
|
2110
|
+
declare const SearchInput: React__default.ForwardRefExoticComponent<SearchInputProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
2069
2111
|
|
|
2070
2112
|
interface CheckboxProps {
|
|
2071
2113
|
/** Controlled checked state */
|
|
@@ -2077,11 +2119,11 @@ interface CheckboxProps {
|
|
|
2077
2119
|
name?: string;
|
|
2078
2120
|
};
|
|
2079
2121
|
}) => void;
|
|
2080
|
-
label?:
|
|
2122
|
+
label?: React__default.ReactNode;
|
|
2081
2123
|
name?: string;
|
|
2082
2124
|
/** `id` for the hidden input and the `<label htmlFor>` link */
|
|
2083
2125
|
htmlFor?: string;
|
|
2084
|
-
errorMessage?:
|
|
2126
|
+
errorMessage?: React__default.ReactNode;
|
|
2085
2127
|
disabled?: boolean;
|
|
2086
2128
|
/**
|
|
2087
2129
|
* Box + label arrangement.
|
|
@@ -2095,6 +2137,10 @@ interface CheckboxProps {
|
|
|
2095
2137
|
* - In vertical: `'right'` (default) → box then label below; `'left'` → label above then box.
|
|
2096
2138
|
*/
|
|
2097
2139
|
labelPosition?: 'left' | 'right';
|
|
2140
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2141
|
+
helperText?: React__default.ReactNode;
|
|
2142
|
+
/** Show a required asterisk after the label. */
|
|
2143
|
+
required?: boolean;
|
|
2098
2144
|
/** @deprecated Use `checked` */
|
|
2099
2145
|
value?: boolean;
|
|
2100
2146
|
}
|
|
@@ -2113,15 +2159,15 @@ interface CheckboxProps {
|
|
|
2113
2159
|
* />
|
|
2114
2160
|
*/
|
|
2115
2161
|
declare function Checkbox({ checked, value, // legacy alias
|
|
2116
|
-
onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
2162
|
+
onChange, label, name, htmlFor, errorMessage, disabled, layout, labelPosition, helperText, required, }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
2117
2163
|
|
|
2118
2164
|
interface RadioOption {
|
|
2119
2165
|
/** Stable value submitted / reported on change. */
|
|
2120
2166
|
value: string;
|
|
2121
2167
|
/** Main label text. */
|
|
2122
|
-
label:
|
|
2168
|
+
label: React__default.ReactNode;
|
|
2123
2169
|
/** Optional secondary description rendered under the label. */
|
|
2124
|
-
description?:
|
|
2170
|
+
description?: React__default.ReactNode;
|
|
2125
2171
|
/** Disable this option only. */
|
|
2126
2172
|
disabled?: boolean;
|
|
2127
2173
|
}
|
|
@@ -2133,7 +2179,7 @@ interface RadioGroupProps {
|
|
|
2133
2179
|
defaultValue?: string;
|
|
2134
2180
|
onChange?: (value: string) => void;
|
|
2135
2181
|
name?: string;
|
|
2136
|
-
label?:
|
|
2182
|
+
label?: React__default.ReactNode;
|
|
2137
2183
|
/**
|
|
2138
2184
|
* Option arrangement. `'vertical'` (default) stacks options in a column;
|
|
2139
2185
|
* `'horizontal'` lays them in a row. Named `layout` for consistency with
|
|
@@ -2149,7 +2195,9 @@ interface RadioGroupProps {
|
|
|
2149
2195
|
size?: FieldSize;
|
|
2150
2196
|
disabled?: boolean;
|
|
2151
2197
|
required?: boolean;
|
|
2152
|
-
|
|
2198
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2199
|
+
helperText?: React__default.ReactNode;
|
|
2200
|
+
errorMessage?: React__default.ReactNode;
|
|
2153
2201
|
}
|
|
2154
2202
|
/**
|
|
2155
2203
|
* Radio group built on `@radix-ui/react-radio-group`. Each option can carry
|
|
@@ -2174,38 +2222,64 @@ interface RadioGroupProps {
|
|
|
2174
2222
|
* />
|
|
2175
2223
|
* ```
|
|
2176
2224
|
*/
|
|
2177
|
-
declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
2225
|
+
declare function RadioGroup({ options, value, defaultValue, onChange, name, label, layout, labelPosition, size, disabled, required, helperText, errorMessage, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
2178
2226
|
|
|
2179
2227
|
interface SwitchInputProps {
|
|
2228
|
+
/** Controlled on/off state. */
|
|
2180
2229
|
checked?: boolean;
|
|
2230
|
+
/** Uncontrolled initial state. */
|
|
2231
|
+
defaultChecked?: boolean;
|
|
2181
2232
|
onChange?: (e: {
|
|
2182
2233
|
target: {
|
|
2183
2234
|
checked: boolean;
|
|
2235
|
+
name?: string;
|
|
2184
2236
|
};
|
|
2185
2237
|
}) => void;
|
|
2186
|
-
|
|
2187
|
-
|
|
2238
|
+
/** Thumb icon shown when on. */
|
|
2239
|
+
checkedIcon?: React__default.ReactNode;
|
|
2240
|
+
/** Thumb icon shown when off. */
|
|
2241
|
+
uncheckedIcon?: React__default.ReactNode;
|
|
2242
|
+
/**
|
|
2243
|
+
* Central field label, positioned per `layout` (above in vertical, beside
|
|
2244
|
+
* in horizontal) — the same affordance every other input uses.
|
|
2245
|
+
*/
|
|
2246
|
+
label?: React__default.ReactNode;
|
|
2247
|
+
/** Label/control orientation. Default `'horizontal'`. */
|
|
2248
|
+
layout?: 'horizontal' | 'vertical';
|
|
2249
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2250
|
+
helperText?: React__default.ReactNode;
|
|
2251
|
+
/** Label rendered to the left of the track, emphasised while off. */
|
|
2252
|
+
offLabel?: React__default.ReactNode;
|
|
2253
|
+
/** Label rendered to the right of the track, emphasised while on. */
|
|
2254
|
+
onLabel?: React__default.ReactNode;
|
|
2255
|
+
name?: string;
|
|
2256
|
+
required?: boolean;
|
|
2257
|
+
disabled?: boolean;
|
|
2258
|
+
errorMessage?: React__default.ReactNode;
|
|
2188
2259
|
}
|
|
2189
2260
|
/**
|
|
2190
2261
|
* Form switch (on/off toggle) powered by Radix Switch.
|
|
2191
2262
|
*
|
|
2192
|
-
*
|
|
2193
|
-
*
|
|
2263
|
+
* Two labelling modes, usable together or apart:
|
|
2264
|
+
* - **central `label`** positioned by `layout` (the standard field label), and
|
|
2265
|
+
* - **per-state `offLabel` / `onLabel`** flanking the track, each emphasised
|
|
2266
|
+
* when its state is active (the "Off ▮ On" pattern).
|
|
2267
|
+
*
|
|
2268
|
+
* Form-ready: pass `name` for native serialisation (Radix emits a hidden
|
|
2269
|
+
* input), `errorMessage` for validation, `required` for the asterisk.
|
|
2194
2270
|
*
|
|
2195
|
-
*
|
|
2271
|
+
* Works controlled (`checked` + `onChange`) or uncontrolled (`defaultChecked`).
|
|
2196
2272
|
*
|
|
2197
2273
|
* @example
|
|
2198
|
-
* <Switch
|
|
2199
|
-
*
|
|
2200
|
-
* onChange={({ target }) => setField('enabled', target.checked)}
|
|
2201
|
-
* />
|
|
2274
|
+
* <Switch label="Email notifications" checked={on} onChange={({ target }) => setOn(target.checked)} />
|
|
2275
|
+
* <Switch offLabel="Monthly" onLabel="Yearly" checked={yearly} onChange={...} />
|
|
2202
2276
|
*/
|
|
2203
|
-
declare function Switch({ checked, onChange, checkedIcon, uncheckedIcon, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
|
|
2277
|
+
declare function Switch({ checked, defaultChecked, onChange, checkedIcon, uncheckedIcon, label, layout, helperText, offLabel, onLabel, name, required, disabled, errorMessage, }: SwitchInputProps): react_jsx_runtime.JSX.Element;
|
|
2204
2278
|
|
|
2205
2279
|
interface DropdownItem {
|
|
2206
2280
|
key: string | number;
|
|
2207
|
-
label:
|
|
2208
|
-
icon?:
|
|
2281
|
+
label: React__default.ReactNode;
|
|
2282
|
+
icon?: React__default.ReactNode;
|
|
2209
2283
|
}
|
|
2210
2284
|
/**
|
|
2211
2285
|
* Item key type — DOM-friendly subset of `React.Key` (no bigint, since UI
|
|
@@ -2220,7 +2294,7 @@ type DropdownValue = DropdownKey | DropdownKey[];
|
|
|
2220
2294
|
interface DropdownProps {
|
|
2221
2295
|
isMultiselect?: boolean;
|
|
2222
2296
|
hasSearch?: boolean;
|
|
2223
|
-
label?:
|
|
2297
|
+
label?: React__default.ReactNode;
|
|
2224
2298
|
name?: string;
|
|
2225
2299
|
value?: DropdownValue;
|
|
2226
2300
|
onChange?: (e: {
|
|
@@ -2230,15 +2304,18 @@ interface DropdownProps {
|
|
|
2230
2304
|
name?: string;
|
|
2231
2305
|
};
|
|
2232
2306
|
}) => void;
|
|
2233
|
-
onBlur?:
|
|
2307
|
+
onBlur?: React__default.FocusEventHandler;
|
|
2234
2308
|
disabled?: boolean;
|
|
2235
2309
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2236
2310
|
layout?: 'horizontal' | 'vertical';
|
|
2237
|
-
|
|
2238
|
-
|
|
2311
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2312
|
+
helperText?: React__default.ReactNode;
|
|
2313
|
+
required?: boolean;
|
|
2314
|
+
errorMessage?: React__default.ReactNode;
|
|
2315
|
+
style?: React__default.CSSProperties;
|
|
2239
2316
|
htmlFor?: string;
|
|
2240
2317
|
items?: DropdownItem[];
|
|
2241
|
-
labelStyle?:
|
|
2318
|
+
labelStyle?: React__default.CSSProperties;
|
|
2242
2319
|
placeholder?: string;
|
|
2243
2320
|
/** Size preset. Default `'md'`. */
|
|
2244
2321
|
size?: FieldSize;
|
|
@@ -2258,21 +2335,21 @@ interface DropdownProps {
|
|
|
2258
2335
|
* // Multi-select
|
|
2259
2336
|
* <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
|
|
2260
2337
|
*/
|
|
2261
|
-
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
2338
|
+
declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, helperText, required, errorMessage, style, htmlFor, items, labelStyle, placeholder, size, }: DropdownProps): react_jsx_runtime.JSX.Element;
|
|
2262
2339
|
|
|
2263
2340
|
interface AutoCompleteItem {
|
|
2264
2341
|
key: string;
|
|
2265
2342
|
value: string;
|
|
2266
2343
|
label: string;
|
|
2267
|
-
icon?:
|
|
2344
|
+
icon?: React__default.ReactNode;
|
|
2268
2345
|
}
|
|
2269
2346
|
interface AutoCompleteProps {
|
|
2270
2347
|
disabled?: boolean;
|
|
2271
|
-
label?:
|
|
2348
|
+
label?: React__default.ReactNode;
|
|
2272
2349
|
placeholder?: string;
|
|
2273
2350
|
name?: string;
|
|
2274
|
-
inputStyle?:
|
|
2275
|
-
style?:
|
|
2351
|
+
inputStyle?: React__default.CSSProperties;
|
|
2352
|
+
style?: React__default.CSSProperties;
|
|
2276
2353
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2277
2354
|
layout?: 'horizontal' | 'vertical';
|
|
2278
2355
|
/**
|
|
@@ -2301,9 +2378,11 @@ interface AutoCompleteProps {
|
|
|
2301
2378
|
/** Size preset. Default `'md'`. */
|
|
2302
2379
|
size?: FieldSize;
|
|
2303
2380
|
/** Override the leading search icon (hidden while loading). */
|
|
2304
|
-
icon?:
|
|
2381
|
+
icon?: React__default.ReactNode;
|
|
2305
2382
|
/** Validation message — turns the field red and links via aria-describedby. */
|
|
2306
|
-
errorMessage?:
|
|
2383
|
+
errorMessage?: React__default.ReactNode;
|
|
2384
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2385
|
+
helperText?: React__default.ReactNode;
|
|
2307
2386
|
/** Mark required (asterisk after the label). */
|
|
2308
2387
|
required?: boolean;
|
|
2309
2388
|
htmlFor?: string;
|
|
@@ -2344,12 +2423,12 @@ interface AutoCompleteProps {
|
|
|
2344
2423
|
* />
|
|
2345
2424
|
* ```
|
|
2346
2425
|
*/
|
|
2347
|
-
declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
|
|
2426
|
+
declare function AutoComplete({ disabled, label, placeholder, name, inputStyle, style, layout, items, onSearch, debounce, onItemClick, emptyText, loadingText, size, icon, errorMessage, helperText, required, htmlFor, }: AutoCompleteProps): react_jsx_runtime.JSX.Element;
|
|
2348
2427
|
|
|
2349
2428
|
interface TreeSelectNode {
|
|
2350
2429
|
key: string | number;
|
|
2351
|
-
label:
|
|
2352
|
-
icon?:
|
|
2430
|
+
label: React__default.ReactNode;
|
|
2431
|
+
icon?: React__default.ReactNode;
|
|
2353
2432
|
/** Nested children. If present, this node is treated as a parent (branch). */
|
|
2354
2433
|
children?: TreeSelectNode[];
|
|
2355
2434
|
/** Render the node disabled — visible but not selectable. */
|
|
@@ -2368,16 +2447,20 @@ interface TreeSelectProps {
|
|
|
2368
2447
|
name?: string;
|
|
2369
2448
|
};
|
|
2370
2449
|
}) => void;
|
|
2371
|
-
label?:
|
|
2450
|
+
label?: React__default.ReactNode;
|
|
2372
2451
|
placeholder?: string;
|
|
2373
2452
|
/** Form control id linkage. */
|
|
2374
2453
|
htmlFor?: string;
|
|
2375
2454
|
name?: string;
|
|
2376
2455
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2377
2456
|
layout?: 'horizontal' | 'vertical';
|
|
2457
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2458
|
+
helperText?: React__default.ReactNode;
|
|
2459
|
+
/** Show a required asterisk after the label. */
|
|
2460
|
+
required?: boolean;
|
|
2378
2461
|
disabled?: boolean;
|
|
2379
|
-
errorMessage?:
|
|
2380
|
-
style?:
|
|
2462
|
+
errorMessage?: React__default.ReactNode;
|
|
2463
|
+
style?: React__default.CSSProperties;
|
|
2381
2464
|
/**
|
|
2382
2465
|
* Whether parent (branch) nodes can be selected. When `false`, parents
|
|
2383
2466
|
* only expand/collapse and only leaves are picked. Default `true`.
|
|
@@ -2425,7 +2508,7 @@ interface TreeSelectProps {
|
|
|
2425
2508
|
* />
|
|
2426
2509
|
* ```
|
|
2427
2510
|
*/
|
|
2428
|
-
declare function TreeSelect({ label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
|
|
2511
|
+
declare function TreeSelect({ label, name, value, onChange, disabled, layout, helperText, required, errorMessage, style, htmlFor, items, placeholder, parentsSelectable, defaultExpandedKeys, size, }: TreeSelectProps): react_jsx_runtime.JSX.Element;
|
|
2429
2512
|
|
|
2430
2513
|
interface FileInputProps {
|
|
2431
2514
|
allowMultiple?: boolean;
|
|
@@ -2439,20 +2522,22 @@ interface FileInputProps {
|
|
|
2439
2522
|
}) => void;
|
|
2440
2523
|
name?: string;
|
|
2441
2524
|
htmlFor?: string;
|
|
2442
|
-
label?:
|
|
2525
|
+
label?: React__default.ReactNode;
|
|
2443
2526
|
/** Accepted MIME types / extensions, e.g. `'.xlsx,application/pdf'`. */
|
|
2444
2527
|
accept?: string;
|
|
2445
2528
|
/** Primary call-to-action copy. Default `'Click to upload or drag and drop'`. */
|
|
2446
|
-
prompt?:
|
|
2529
|
+
prompt?: React__default.ReactNode;
|
|
2447
2530
|
/** Secondary hint under the prompt — typically the accepted types / max size. */
|
|
2448
|
-
hint?:
|
|
2531
|
+
hint?: React__default.ReactNode;
|
|
2449
2532
|
/** Maximum file size in bytes. Files above this are rejected with an error. */
|
|
2450
2533
|
maxSize?: number;
|
|
2451
|
-
errorMessage?:
|
|
2534
|
+
errorMessage?: React__default.ReactNode;
|
|
2535
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2536
|
+
helperText?: React__default.ReactNode;
|
|
2452
2537
|
disabled?: boolean;
|
|
2453
2538
|
required?: boolean;
|
|
2454
2539
|
/** Override the upload glyph in the empty state. */
|
|
2455
|
-
icon?:
|
|
2540
|
+
icon?: React__default.ReactNode;
|
|
2456
2541
|
}
|
|
2457
2542
|
/**
|
|
2458
2543
|
* Drag-and-drop file input with an enterprise dropzone aesthetic: a calm
|
|
@@ -2474,27 +2559,31 @@ interface FileInputProps {
|
|
|
2474
2559
|
* />
|
|
2475
2560
|
* ```
|
|
2476
2561
|
*/
|
|
2477
|
-
declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
|
|
2562
|
+
declare function FileInput({ allowMultiple, onChange, name, htmlFor, label, accept, prompt, hint, maxSize, errorMessage, helperText, disabled, required, icon, }: FileInputProps): react_jsx_runtime.JSX.Element;
|
|
2478
2563
|
|
|
2479
2564
|
interface DatePickerProps {
|
|
2480
2565
|
/** Current date. `null` / `undefined` means "no date selected". */
|
|
2481
2566
|
value?: Date | null;
|
|
2482
2567
|
/** Fires with the next date (or `null` if cleared via the clear button). */
|
|
2483
2568
|
onChange?: (date: Date | null) => void;
|
|
2484
|
-
label?:
|
|
2569
|
+
label?: React__default.ReactNode;
|
|
2485
2570
|
/** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
|
|
2486
2571
|
placeholder?: string;
|
|
2487
2572
|
htmlFor?: string;
|
|
2488
2573
|
name?: string;
|
|
2489
2574
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2490
2575
|
layout?: 'horizontal' | 'vertical';
|
|
2576
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2577
|
+
helperText?: React__default.ReactNode;
|
|
2578
|
+
/** Show a required asterisk after the label. */
|
|
2579
|
+
required?: boolean;
|
|
2491
2580
|
disabled?: boolean;
|
|
2492
|
-
errorMessage?:
|
|
2581
|
+
errorMessage?: React__default.ReactNode;
|
|
2493
2582
|
/** Earliest selectable date. Dates before this render disabled. */
|
|
2494
2583
|
min?: Date;
|
|
2495
2584
|
/** Latest selectable date. Dates after this render disabled. */
|
|
2496
2585
|
max?: Date;
|
|
2497
|
-
style?:
|
|
2586
|
+
style?: React__default.CSSProperties;
|
|
2498
2587
|
/**
|
|
2499
2588
|
* Custom formatter for the trigger display. Defaults to
|
|
2500
2589
|
* `YYYY-MM-DD` via `toISOString().slice(0, 10)`.
|
|
@@ -2543,14 +2632,14 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
2543
2632
|
* />
|
|
2544
2633
|
* ```
|
|
2545
2634
|
*/
|
|
2546
|
-
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
2635
|
+
declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, helperText, required, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, size, }: DatePickerProps): react_jsx_runtime.JSX.Element;
|
|
2547
2636
|
|
|
2548
2637
|
interface TextAreaProps {
|
|
2549
2638
|
value?: string;
|
|
2550
|
-
onChange?:
|
|
2551
|
-
onBlur?:
|
|
2639
|
+
onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
|
|
2640
|
+
onBlur?: React__default.FocusEventHandler<HTMLTextAreaElement>;
|
|
2552
2641
|
disabled?: boolean;
|
|
2553
|
-
label?:
|
|
2642
|
+
label?: React__default.ReactNode;
|
|
2554
2643
|
htmlFor?: string;
|
|
2555
2644
|
placeholder?: string;
|
|
2556
2645
|
name?: string;
|
|
@@ -2573,10 +2662,12 @@ interface TextAreaProps {
|
|
|
2573
2662
|
showCount?: boolean;
|
|
2574
2663
|
/** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
|
|
2575
2664
|
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
2576
|
-
errorMessage?:
|
|
2665
|
+
errorMessage?: React__default.ReactNode;
|
|
2666
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2667
|
+
helperText?: React__default.ReactNode;
|
|
2577
2668
|
required?: boolean;
|
|
2578
|
-
style?:
|
|
2579
|
-
inputStyle?:
|
|
2669
|
+
style?: React__default.CSSProperties;
|
|
2670
|
+
inputStyle?: React__default.CSSProperties;
|
|
2580
2671
|
}
|
|
2581
2672
|
/**
|
|
2582
2673
|
* Multi-line text input on the shared field foundation. Optional auto-grow
|
|
@@ -2594,12 +2685,12 @@ interface TextAreaProps {
|
|
|
2594
2685
|
* <TextArea label="Bio" maxLength={280} showCount value={bio} onChange={onChange} />
|
|
2595
2686
|
* ```
|
|
2596
2687
|
*/
|
|
2597
|
-
declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
2688
|
+
declare function TextArea({ value, onChange, onBlur, disabled, label, htmlFor, placeholder, name, layout, size, rows, autoGrow, maxRows, maxLength, showCount, resize, errorMessage, helperText, required, style, inputStyle, }: TextAreaProps): react_jsx_runtime.JSX.Element;
|
|
2598
2689
|
|
|
2599
2690
|
interface SegmentedOption {
|
|
2600
2691
|
value: string;
|
|
2601
|
-
label:
|
|
2602
|
-
icon?:
|
|
2692
|
+
label: React__default.ReactNode;
|
|
2693
|
+
icon?: React__default.ReactNode;
|
|
2603
2694
|
disabled?: boolean;
|
|
2604
2695
|
}
|
|
2605
2696
|
interface SegmentedControlProps {
|
|
@@ -2614,6 +2705,16 @@ interface SegmentedControlProps {
|
|
|
2614
2705
|
/** Stretch to fill the container, segments share the width equally. */
|
|
2615
2706
|
fullWidth?: boolean;
|
|
2616
2707
|
disabled?: boolean;
|
|
2708
|
+
/** Optional label, positioned per `layout`. */
|
|
2709
|
+
label?: React__default.ReactNode;
|
|
2710
|
+
/** Label/control orientation. Default `'vertical'`. */
|
|
2711
|
+
layout?: 'horizontal' | 'vertical';
|
|
2712
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2713
|
+
helperText?: React__default.ReactNode;
|
|
2714
|
+
/** Native form field name (emits a hidden input carrying the value). */
|
|
2715
|
+
name?: string;
|
|
2716
|
+
required?: boolean;
|
|
2717
|
+
errorMessage?: React__default.ReactNode;
|
|
2617
2718
|
'aria-label'?: string;
|
|
2618
2719
|
}
|
|
2619
2720
|
/**
|
|
@@ -2626,9 +2727,13 @@ interface SegmentedControlProps {
|
|
|
2626
2727
|
* track, the macOS / iOS segmented-control pattern, rendered with the
|
|
2627
2728
|
* system's tight radii and accent-colored active text.
|
|
2628
2729
|
*
|
|
2730
|
+
* Form-ready: optional `label` (positioned via `layout`), `helperText`,
|
|
2731
|
+
* `errorMessage`, and a hidden input emitted when `name` is set.
|
|
2732
|
+
*
|
|
2629
2733
|
* @example
|
|
2630
2734
|
* ```tsx
|
|
2631
2735
|
* <SegmentedControl
|
|
2736
|
+
* label="View"
|
|
2632
2737
|
* value={view}
|
|
2633
2738
|
* onChange={setView}
|
|
2634
2739
|
* options={[
|
|
@@ -2639,7 +2744,7 @@ interface SegmentedControlProps {
|
|
|
2639
2744
|
* />
|
|
2640
2745
|
* ```
|
|
2641
2746
|
*/
|
|
2642
|
-
declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2747
|
+
declare function SegmentedControl({ options, value, defaultValue, onChange, size, fullWidth, disabled, label, layout, helperText, name, required, errorMessage, 'aria-label': ariaLabel, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
|
|
2643
2748
|
|
|
2644
2749
|
/**
|
|
2645
2750
|
* Slider value. A single number for a one-thumb slider, or a `[min, max]`
|
|
@@ -2648,7 +2753,7 @@ declare function SegmentedControl({ options, value, defaultValue, onChange, size
|
|
|
2648
2753
|
type SliderValue = number | [number, number];
|
|
2649
2754
|
interface SliderMark {
|
|
2650
2755
|
value: number;
|
|
2651
|
-
label?:
|
|
2756
|
+
label?: React__default.ReactNode;
|
|
2652
2757
|
}
|
|
2653
2758
|
interface SliderProps {
|
|
2654
2759
|
value?: SliderValue;
|
|
@@ -2659,7 +2764,7 @@ interface SliderProps {
|
|
|
2659
2764
|
min?: number;
|
|
2660
2765
|
max?: number;
|
|
2661
2766
|
step?: number;
|
|
2662
|
-
label?:
|
|
2767
|
+
label?: React__default.ReactNode;
|
|
2663
2768
|
/** Show the current value(s) next to the label. */
|
|
2664
2769
|
showValue?: boolean;
|
|
2665
2770
|
/** Format the displayed value (tooltip + value readout). */
|
|
@@ -2670,7 +2775,11 @@ interface SliderProps {
|
|
|
2670
2775
|
tooltip?: boolean;
|
|
2671
2776
|
size?: FieldSize;
|
|
2672
2777
|
disabled?: boolean;
|
|
2673
|
-
errorMessage?:
|
|
2778
|
+
errorMessage?: React__default.ReactNode;
|
|
2779
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2780
|
+
helperText?: React__default.ReactNode;
|
|
2781
|
+
/** Show a required asterisk after the label. */
|
|
2782
|
+
required?: boolean;
|
|
2674
2783
|
name?: string;
|
|
2675
2784
|
htmlFor?: string;
|
|
2676
2785
|
}
|
|
@@ -2695,7 +2804,7 @@ interface SliderProps {
|
|
|
2695
2804
|
* />
|
|
2696
2805
|
* ```
|
|
2697
2806
|
*/
|
|
2698
|
-
declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
|
|
2807
|
+
declare function Slider({ value, defaultValue, onChange, onChangeEnd, min, max, step, label, showValue, formatValue, marks, tooltip, size, disabled, errorMessage, helperText, required, name, htmlFor, }: SliderProps): react_jsx_runtime.JSX.Element;
|
|
2699
2808
|
|
|
2700
2809
|
interface TagsInputProps {
|
|
2701
2810
|
/** Controlled list of tags. */
|
|
@@ -2703,14 +2812,16 @@ interface TagsInputProps {
|
|
|
2703
2812
|
/** Uncontrolled initial tags. */
|
|
2704
2813
|
defaultValue?: string[];
|
|
2705
2814
|
onChange?: (tags: string[]) => void;
|
|
2706
|
-
label?:
|
|
2815
|
+
label?: React__default.ReactNode;
|
|
2707
2816
|
htmlFor?: string;
|
|
2708
2817
|
name?: string;
|
|
2709
2818
|
placeholder?: string;
|
|
2710
2819
|
layout?: 'horizontal' | 'vertical';
|
|
2711
2820
|
size?: FieldSize;
|
|
2712
2821
|
disabled?: boolean;
|
|
2713
|
-
errorMessage?:
|
|
2822
|
+
errorMessage?: React__default.ReactNode;
|
|
2823
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2824
|
+
helperText?: React__default.ReactNode;
|
|
2714
2825
|
required?: boolean;
|
|
2715
2826
|
/** Maximum number of tags. Further input is ignored once reached. */
|
|
2716
2827
|
maxTags?: number;
|
|
@@ -2736,7 +2847,7 @@ interface TagsInputProps {
|
|
|
2736
2847
|
* validate={(t) => /.+@.+\..+/.test(t) || 'Not a valid email'} />
|
|
2737
2848
|
* ```
|
|
2738
2849
|
*/
|
|
2739
|
-
declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
|
|
2850
|
+
declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name, placeholder, layout, size, disabled, errorMessage, helperText, required, maxTags, dedupe, validate, separators, }: TagsInputProps): react_jsx_runtime.JSX.Element;
|
|
2740
2851
|
|
|
2741
2852
|
interface OtpInputProps {
|
|
2742
2853
|
/** Number of code boxes. Default `6`. */
|
|
@@ -2745,7 +2856,7 @@ interface OtpInputProps {
|
|
|
2745
2856
|
onChange?: (code: string) => void;
|
|
2746
2857
|
/** Fired when every box is filled. */
|
|
2747
2858
|
onComplete?: (code: string) => void;
|
|
2748
|
-
label?:
|
|
2859
|
+
label?: React__default.ReactNode;
|
|
2749
2860
|
htmlFor?: string;
|
|
2750
2861
|
name?: string;
|
|
2751
2862
|
/** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
|
|
@@ -2754,8 +2865,12 @@ interface OtpInputProps {
|
|
|
2754
2865
|
masked?: boolean;
|
|
2755
2866
|
size?: FieldSize;
|
|
2756
2867
|
disabled?: boolean;
|
|
2757
|
-
errorMessage?:
|
|
2868
|
+
errorMessage?: React__default.ReactNode;
|
|
2758
2869
|
required?: boolean;
|
|
2870
|
+
/** Label/control orientation. Default `'vertical'`. */
|
|
2871
|
+
layout?: 'horizontal' | 'vertical';
|
|
2872
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2873
|
+
helperText?: React__default.ReactNode;
|
|
2759
2874
|
/** Render a visual gap after this many boxes (e.g. `3` → `123 456`). */
|
|
2760
2875
|
groupAfter?: number;
|
|
2761
2876
|
}
|
|
@@ -2769,7 +2884,7 @@ interface OtpInputProps {
|
|
|
2769
2884
|
* <OtpInput length={6} value={code} onChange={setCode} onComplete={verify} />
|
|
2770
2885
|
* ```
|
|
2771
2886
|
*/
|
|
2772
|
-
declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
2887
|
+
declare function OtpInput({ length, value, onChange, onComplete, label, htmlFor, name, mode, masked, size, disabled, errorMessage, required, layout, helperText, groupAfter, }: OtpInputProps): react_jsx_runtime.JSX.Element;
|
|
2773
2888
|
|
|
2774
2889
|
interface RatingProps {
|
|
2775
2890
|
value?: number;
|
|
@@ -2783,13 +2898,19 @@ interface RatingProps {
|
|
|
2783
2898
|
readOnly?: boolean;
|
|
2784
2899
|
/** Clicking the current value again clears to 0. Default `true`. */
|
|
2785
2900
|
clearable?: boolean;
|
|
2786
|
-
label?:
|
|
2901
|
+
label?: React__default.ReactNode;
|
|
2787
2902
|
size?: FieldSize;
|
|
2788
2903
|
disabled?: boolean;
|
|
2789
2904
|
/** Override the icon. Receives a `filled` flag. Default is a star. */
|
|
2790
|
-
icon?: (filled: boolean) =>
|
|
2791
|
-
errorMessage?:
|
|
2905
|
+
icon?: (filled: boolean) => React__default.ReactNode;
|
|
2906
|
+
errorMessage?: React__default.ReactNode;
|
|
2792
2907
|
name?: string;
|
|
2908
|
+
/** Label/control orientation. Default `'vertical'`. */
|
|
2909
|
+
layout?: 'horizontal' | 'vertical';
|
|
2910
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2911
|
+
helperText?: React__default.ReactNode;
|
|
2912
|
+
/** Show a required asterisk after the label. */
|
|
2913
|
+
required?: boolean;
|
|
2793
2914
|
}
|
|
2794
2915
|
/**
|
|
2795
2916
|
* Star (or custom glyph) rating with optional half-steps, hover preview, and
|
|
@@ -2806,13 +2927,13 @@ interface RatingProps {
|
|
|
2806
2927
|
* <Rating value={4.5} allowHalf readOnly />
|
|
2807
2928
|
* ```
|
|
2808
2929
|
*/
|
|
2809
|
-
declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
2930
|
+
declare function Rating({ value, defaultValue, onChange, count, allowHalf, readOnly, clearable, label, size, disabled, icon, errorMessage, name, layout, helperText, required, }: RatingProps): react_jsx_runtime.JSX.Element;
|
|
2810
2931
|
|
|
2811
2932
|
interface TimePickerProps {
|
|
2812
2933
|
/** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
|
|
2813
2934
|
value?: string | null;
|
|
2814
2935
|
onChange?: (value: string | null) => void;
|
|
2815
|
-
label?:
|
|
2936
|
+
label?: React__default.ReactNode;
|
|
2816
2937
|
htmlFor?: string;
|
|
2817
2938
|
name?: string;
|
|
2818
2939
|
placeholder?: string;
|
|
@@ -2825,9 +2946,11 @@ interface TimePickerProps {
|
|
|
2825
2946
|
/** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
|
|
2826
2947
|
minuteStep?: number;
|
|
2827
2948
|
disabled?: boolean;
|
|
2828
|
-
errorMessage?:
|
|
2949
|
+
errorMessage?: React__default.ReactNode;
|
|
2950
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2951
|
+
helperText?: React__default.ReactNode;
|
|
2829
2952
|
required?: boolean;
|
|
2830
|
-
style?:
|
|
2953
|
+
style?: React__default.CSSProperties;
|
|
2831
2954
|
}
|
|
2832
2955
|
/**
|
|
2833
2956
|
* Time picker with scrollable hour / minute (/ second) columns in a popover.
|
|
@@ -2839,7 +2962,7 @@ interface TimePickerProps {
|
|
|
2839
2962
|
* <TimePicker label="Departure" value={time} onChange={setTime} minuteStep={15} use12Hours />
|
|
2840
2963
|
* ```
|
|
2841
2964
|
*/
|
|
2842
|
-
declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
2965
|
+
declare function TimePicker({ value, onChange, label, htmlFor, name, placeholder, layout, size, use12Hours, withSeconds, minuteStep, disabled, errorMessage, helperText, required, style, }: TimePickerProps): react_jsx_runtime.JSX.Element;
|
|
2843
2966
|
|
|
2844
2967
|
interface DateRange {
|
|
2845
2968
|
start: Date | null;
|
|
@@ -2853,7 +2976,7 @@ interface DateRangePreset {
|
|
|
2853
2976
|
interface DateRangePickerProps {
|
|
2854
2977
|
value?: DateRange;
|
|
2855
2978
|
onChange?: (range: DateRange) => void;
|
|
2856
|
-
label?:
|
|
2979
|
+
label?: React__default.ReactNode;
|
|
2857
2980
|
htmlFor?: string;
|
|
2858
2981
|
placeholder?: string;
|
|
2859
2982
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2866,9 +2989,11 @@ interface DateRangePickerProps {
|
|
|
2866
2989
|
presets?: DateRangePreset[];
|
|
2867
2990
|
format?: (d: Date) => string;
|
|
2868
2991
|
disabled?: boolean;
|
|
2869
|
-
errorMessage?:
|
|
2992
|
+
errorMessage?: React__default.ReactNode;
|
|
2993
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2994
|
+
helperText?: React__default.ReactNode;
|
|
2870
2995
|
required?: boolean;
|
|
2871
|
-
style?:
|
|
2996
|
+
style?: React__default.CSSProperties;
|
|
2872
2997
|
}
|
|
2873
2998
|
/**
|
|
2874
2999
|
* Two-month range date picker. Click a start date, then an end date; the span
|
|
@@ -2887,13 +3012,13 @@ interface DateRangePickerProps {
|
|
|
2887
3012
|
* />
|
|
2888
3013
|
* ```
|
|
2889
3014
|
*/
|
|
2890
|
-
declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
3015
|
+
declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder, layout, size, min, max, weekStartsOn, presets, format, disabled, errorMessage, helperText, required, style, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
|
|
2891
3016
|
|
|
2892
3017
|
interface ColorPickerProps {
|
|
2893
3018
|
/** Hex string, e.g. `"#0466c8"`. */
|
|
2894
3019
|
value?: string;
|
|
2895
3020
|
onChange?: (hex: string) => void;
|
|
2896
|
-
label?:
|
|
3021
|
+
label?: React__default.ReactNode;
|
|
2897
3022
|
htmlFor?: string;
|
|
2898
3023
|
name?: string;
|
|
2899
3024
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2903,7 +3028,9 @@ interface ColorPickerProps {
|
|
|
2903
3028
|
/** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
|
|
2904
3029
|
allowCustom?: boolean;
|
|
2905
3030
|
disabled?: boolean;
|
|
2906
|
-
errorMessage?:
|
|
3031
|
+
errorMessage?: React__default.ReactNode;
|
|
3032
|
+
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
3033
|
+
helperText?: React__default.ReactNode;
|
|
2907
3034
|
required?: boolean;
|
|
2908
3035
|
placeholder?: string;
|
|
2909
3036
|
}
|
|
@@ -2917,6 +3044,320 @@ interface ColorPickerProps {
|
|
|
2917
3044
|
* <ColorPicker label="Brand colour" value={color} onChange={setColor} />
|
|
2918
3045
|
* ```
|
|
2919
3046
|
*/
|
|
2920
|
-
declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
3047
|
+
declare function ColorPicker({ value, onChange, label, htmlFor, name, layout, size, swatches, allowCustom, disabled, errorMessage, helperText, required, placeholder, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
|
|
3048
|
+
|
|
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;
|
|
2921
3362
|
|
|
2922
|
-
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 ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldProps, type FieldShellOptions, type FieldSize, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, 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, 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, Wizard, type WizardProps, type WizardStep, fieldShell, useNotification };
|
|
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 };
|