@geomak/ui 5.7.2 → 5.8.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 +214 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +296 -2
- package/dist/index.d.ts +296 -2
- package/dist/index.js +205 -11
- package/dist/index.js.map +1 -1
- package/dist/styles.css +30 -52
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1787,6 +1787,7 @@ interface SkeletonCardProps extends SkeletonBaseProps {
|
|
|
1787
1787
|
declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
|
|
1788
1788
|
|
|
1789
1789
|
interface ButtonProps {
|
|
1790
|
+
/** Button content (text or nodes). */
|
|
1790
1791
|
content?: React__default.ReactNode;
|
|
1791
1792
|
/** Visual style variant */
|
|
1792
1793
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
@@ -1794,12 +1795,15 @@ interface ButtonProps {
|
|
|
1794
1795
|
size?: 'sm' | 'md' | 'lg';
|
|
1795
1796
|
/** HTML button type */
|
|
1796
1797
|
buttonType?: 'button' | 'submit' | 'reset';
|
|
1798
|
+
/** Show a loading spinner and disable the control. */
|
|
1797
1799
|
loading?: boolean;
|
|
1800
|
+
/** Disable interaction and dim the control. */
|
|
1798
1801
|
disabled?: boolean;
|
|
1799
1802
|
/** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
|
|
1800
1803
|
style?: React__default.CSSProperties;
|
|
1801
1804
|
/** Leading icon — rendered before content */
|
|
1802
1805
|
icon?: React__default.ReactNode;
|
|
1806
|
+
/** Click handler. */
|
|
1803
1807
|
onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
|
|
1804
1808
|
/**
|
|
1805
1809
|
* @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
|
|
@@ -1937,22 +1941,33 @@ interface FieldProps {
|
|
|
1937
1941
|
declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelAlign, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
|
|
1938
1942
|
|
|
1939
1943
|
interface TextInputProps {
|
|
1944
|
+
/** Controlled string value. */
|
|
1940
1945
|
value?: string;
|
|
1946
|
+
/** Native change handler — read `e.target.value`. */
|
|
1941
1947
|
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
1948
|
+
/** Disable interaction and dim the field. */
|
|
1942
1949
|
disabled?: boolean;
|
|
1950
|
+
/** Field label rendered above (vertical) or beside (horizontal) the input. */
|
|
1943
1951
|
label?: React__default.ReactNode;
|
|
1952
|
+
/** `id` for the input + the `<label htmlFor>` link. */
|
|
1944
1953
|
htmlFor?: string;
|
|
1954
|
+
/** Placeholder shown when the field is empty. */
|
|
1945
1955
|
placeholder?: string;
|
|
1956
|
+
/** Native form field name (used for `FormData` serialisation). */
|
|
1946
1957
|
name?: string;
|
|
1947
1958
|
/** Native input type. Defaults to `'text'`. */
|
|
1948
1959
|
type?: 'text' | 'email' | 'url' | 'tel';
|
|
1960
|
+
/** Inline style applied to the `<input>` element. */
|
|
1949
1961
|
inputStyle?: React__default.CSSProperties;
|
|
1962
|
+
/** Inline style applied to the field shell / adornment wrapper. */
|
|
1950
1963
|
style?: React__default.CSSProperties;
|
|
1951
1964
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
1952
1965
|
layout?: 'horizontal' | 'vertical';
|
|
1953
1966
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
1954
1967
|
size?: FieldSize;
|
|
1968
|
+
/** Native blur handler. */
|
|
1955
1969
|
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
1970
|
+
/** Validation message — shown under the input; also flags it red + `aria-invalid`. */
|
|
1956
1971
|
errorMessage?: React__default.ReactNode;
|
|
1957
1972
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
1958
1973
|
helperText?: React__default.ReactNode;
|
|
@@ -1962,6 +1977,7 @@ interface TextInputProps {
|
|
|
1962
1977
|
prefix?: React__default.ReactNode;
|
|
1963
1978
|
/** Optional trailing adornment (icon / suffix / unit). */
|
|
1964
1979
|
suffix?: React__default.ReactNode;
|
|
1980
|
+
/** @deprecated Use `htmlFor`. */
|
|
1965
1981
|
id?: string;
|
|
1966
1982
|
}
|
|
1967
1983
|
/**
|
|
@@ -2000,24 +2016,37 @@ interface NumberInputProps {
|
|
|
2000
2016
|
name?: string;
|
|
2001
2017
|
};
|
|
2002
2018
|
}) => void;
|
|
2019
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2003
2020
|
label?: React__default.ReactNode;
|
|
2021
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2004
2022
|
htmlFor?: string;
|
|
2023
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2005
2024
|
name?: string;
|
|
2025
|
+
/** Disable interaction and dim the control. */
|
|
2006
2026
|
disabled?: boolean;
|
|
2007
2027
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2008
2028
|
layout?: 'horizontal' | 'vertical';
|
|
2009
2029
|
/** Size preset. Default `'md'`. */
|
|
2010
2030
|
size?: FieldSize;
|
|
2031
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2011
2032
|
errorMessage?: React__default.ReactNode;
|
|
2012
2033
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2013
2034
|
helperText?: React__default.ReactNode;
|
|
2035
|
+
/** Show a required asterisk after the label. */
|
|
2014
2036
|
required?: boolean;
|
|
2037
|
+
/** Inline style applied to the inner input element. */
|
|
2015
2038
|
inputStyle?: React__default.CSSProperties;
|
|
2039
|
+
/** Inline style applied to the label. */
|
|
2016
2040
|
labelStyle?: React__default.CSSProperties;
|
|
2041
|
+
/** Placeholder shown when the field is empty. */
|
|
2017
2042
|
placeholder?: string;
|
|
2043
|
+
/** Inline style applied to the control shell. */
|
|
2018
2044
|
style?: React__default.CSSProperties;
|
|
2045
|
+
/** Minimum allowed value. */
|
|
2019
2046
|
min?: number;
|
|
2047
|
+
/** Maximum allowed value. */
|
|
2020
2048
|
max?: number;
|
|
2049
|
+
/** Render read-only — visible but not editable. */
|
|
2021
2050
|
readOnly?: boolean;
|
|
2022
2051
|
/** Optional precision for floating-point steps (number of decimal places to round to). */
|
|
2023
2052
|
precision?: number;
|
|
@@ -2057,23 +2086,35 @@ interface NumberInputProps {
|
|
|
2057
2086
|
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;
|
|
2058
2087
|
|
|
2059
2088
|
interface PasswordProps {
|
|
2089
|
+
/** Controlled value. */
|
|
2060
2090
|
value?: string;
|
|
2091
|
+
/** Fires when the value changes. */
|
|
2061
2092
|
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2093
|
+
/** Disable interaction and dim the control. */
|
|
2062
2094
|
disabled?: boolean;
|
|
2095
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2063
2096
|
label?: React__default.ReactNode;
|
|
2097
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2064
2098
|
htmlFor?: string;
|
|
2099
|
+
/** Placeholder shown when the field is empty. */
|
|
2065
2100
|
placeholder?: string;
|
|
2101
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2066
2102
|
name?: string;
|
|
2103
|
+
/** Inline style applied to the inner input element. */
|
|
2067
2104
|
inputStyle?: React__default.CSSProperties;
|
|
2105
|
+
/** Inline style applied to the control shell. */
|
|
2068
2106
|
style?: React__default.CSSProperties;
|
|
2069
2107
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2070
2108
|
layout?: 'horizontal' | 'vertical';
|
|
2071
2109
|
/** Size preset — controls height, padding, and font. Default `'md'`. */
|
|
2072
2110
|
size?: FieldSize;
|
|
2111
|
+
/** Blur handler — useful for touched/validation timing. */
|
|
2073
2112
|
onBlur?: React__default.FocusEventHandler<HTMLInputElement>;
|
|
2113
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2074
2114
|
errorMessage?: React__default.ReactNode;
|
|
2075
2115
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2076
2116
|
helperText?: React__default.ReactNode;
|
|
2117
|
+
/** Show a required asterisk after the label. */
|
|
2077
2118
|
required?: boolean;
|
|
2078
2119
|
/** Override the "reveal" (password hidden) icon. */
|
|
2079
2120
|
showIcon?: React__default.ReactNode;
|
|
@@ -2092,14 +2133,23 @@ interface PasswordProps {
|
|
|
2092
2133
|
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;
|
|
2093
2134
|
|
|
2094
2135
|
interface SearchInputProps {
|
|
2136
|
+
/** Controlled value. */
|
|
2095
2137
|
value?: string;
|
|
2138
|
+
/** Fires when the value changes. */
|
|
2096
2139
|
onChange?: React__default.ChangeEventHandler<HTMLInputElement>;
|
|
2140
|
+
/** Disable interaction and dim the control. */
|
|
2097
2141
|
disabled?: boolean;
|
|
2142
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2098
2143
|
label?: React__default.ReactNode;
|
|
2144
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2099
2145
|
htmlFor?: string;
|
|
2146
|
+
/** Placeholder shown when the field is empty. */
|
|
2100
2147
|
placeholder?: string;
|
|
2148
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2101
2149
|
name?: string;
|
|
2150
|
+
/** Inline style applied to the inner input element. */
|
|
2102
2151
|
inputStyle?: React__default.CSSProperties;
|
|
2152
|
+
/** Inline style applied to the control shell. */
|
|
2103
2153
|
style?: React__default.CSSProperties;
|
|
2104
2154
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2105
2155
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2198,13 +2248,17 @@ interface RadioOption {
|
|
|
2198
2248
|
disabled?: boolean;
|
|
2199
2249
|
}
|
|
2200
2250
|
interface RadioGroupProps {
|
|
2251
|
+
/** The selectable options. */
|
|
2201
2252
|
options: RadioOption[];
|
|
2202
2253
|
/** Controlled selected value. */
|
|
2203
2254
|
value?: string;
|
|
2204
2255
|
/** Uncontrolled initial value. */
|
|
2205
2256
|
defaultValue?: string;
|
|
2257
|
+
/** Fires when the value changes. */
|
|
2206
2258
|
onChange?: (value: string) => void;
|
|
2259
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2207
2260
|
name?: string;
|
|
2261
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2208
2262
|
label?: React__default.ReactNode;
|
|
2209
2263
|
/**
|
|
2210
2264
|
* Option arrangement. `'vertical'` (default) stacks options in a column;
|
|
@@ -2219,10 +2273,13 @@ interface RadioGroupProps {
|
|
|
2219
2273
|
labelPosition?: 'left' | 'right';
|
|
2220
2274
|
/** Size preset — controls the dot + text size. Default `'md'`. */
|
|
2221
2275
|
size?: FieldSize;
|
|
2276
|
+
/** Disable interaction and dim the control. */
|
|
2222
2277
|
disabled?: boolean;
|
|
2278
|
+
/** Show a required asterisk after the label. */
|
|
2223
2279
|
required?: boolean;
|
|
2224
2280
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2225
2281
|
helperText?: React__default.ReactNode;
|
|
2282
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2226
2283
|
errorMessage?: React__default.ReactNode;
|
|
2227
2284
|
}
|
|
2228
2285
|
/**
|
|
@@ -2255,6 +2312,7 @@ interface SwitchInputProps {
|
|
|
2255
2312
|
checked?: boolean;
|
|
2256
2313
|
/** Uncontrolled initial state. */
|
|
2257
2314
|
defaultChecked?: boolean;
|
|
2315
|
+
/** Fires when the value changes. */
|
|
2258
2316
|
onChange?: (e: {
|
|
2259
2317
|
target: {
|
|
2260
2318
|
checked: boolean;
|
|
@@ -2278,9 +2336,13 @@ interface SwitchInputProps {
|
|
|
2278
2336
|
offLabel?: React__default.ReactNode;
|
|
2279
2337
|
/** Label rendered to the right of the track, emphasised while on. */
|
|
2280
2338
|
onLabel?: React__default.ReactNode;
|
|
2339
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2281
2340
|
name?: string;
|
|
2341
|
+
/** Show a required asterisk after the label. */
|
|
2282
2342
|
required?: boolean;
|
|
2343
|
+
/** Disable interaction and dim the control. */
|
|
2283
2344
|
disabled?: boolean;
|
|
2345
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2284
2346
|
errorMessage?: React__default.ReactNode;
|
|
2285
2347
|
}
|
|
2286
2348
|
/**
|
|
@@ -2318,11 +2380,17 @@ type DropdownKey = string | number;
|
|
|
2318
2380
|
*/
|
|
2319
2381
|
type DropdownValue = DropdownKey | DropdownKey[];
|
|
2320
2382
|
interface DropdownProps {
|
|
2383
|
+
/** Enable multi-select (value becomes an array of keys). */
|
|
2321
2384
|
isMultiselect?: boolean;
|
|
2385
|
+
/** Show a search box inside the dropdown panel. */
|
|
2322
2386
|
hasSearch?: boolean;
|
|
2387
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2323
2388
|
label?: React__default.ReactNode;
|
|
2389
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2324
2390
|
name?: string;
|
|
2391
|
+
/** Controlled value. */
|
|
2325
2392
|
value?: DropdownValue;
|
|
2393
|
+
/** Fires when the value changes. */
|
|
2326
2394
|
onChange?: (e: {
|
|
2327
2395
|
target: {
|
|
2328
2396
|
value: DropdownValue;
|
|
@@ -2330,18 +2398,27 @@ interface DropdownProps {
|
|
|
2330
2398
|
name?: string;
|
|
2331
2399
|
};
|
|
2332
2400
|
}) => void;
|
|
2401
|
+
/** Blur handler — useful for touched/validation timing. */
|
|
2333
2402
|
onBlur?: React__default.FocusEventHandler;
|
|
2403
|
+
/** Disable interaction and dim the control. */
|
|
2334
2404
|
disabled?: boolean;
|
|
2335
2405
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2336
2406
|
layout?: 'horizontal' | 'vertical';
|
|
2337
2407
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2338
2408
|
helperText?: React__default.ReactNode;
|
|
2409
|
+
/** Show a required asterisk after the label. */
|
|
2339
2410
|
required?: boolean;
|
|
2411
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2340
2412
|
errorMessage?: React__default.ReactNode;
|
|
2413
|
+
/** Inline style applied to the control shell. */
|
|
2341
2414
|
style?: React__default.CSSProperties;
|
|
2415
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2342
2416
|
htmlFor?: string;
|
|
2417
|
+
/** The selectable items. */
|
|
2343
2418
|
items?: DropdownItem[];
|
|
2419
|
+
/** Inline style applied to the label. */
|
|
2344
2420
|
labelStyle?: React__default.CSSProperties;
|
|
2421
|
+
/** Placeholder shown when the field is empty. */
|
|
2345
2422
|
placeholder?: string;
|
|
2346
2423
|
/** Size preset. Default `'md'`. */
|
|
2347
2424
|
size?: FieldSize;
|
|
@@ -2370,11 +2447,17 @@ interface AutoCompleteItem {
|
|
|
2370
2447
|
icon?: React__default.ReactNode;
|
|
2371
2448
|
}
|
|
2372
2449
|
interface AutoCompleteProps {
|
|
2450
|
+
/** Disable interaction and dim the control. */
|
|
2373
2451
|
disabled?: boolean;
|
|
2452
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2374
2453
|
label?: React__default.ReactNode;
|
|
2454
|
+
/** Placeholder shown when the field is empty. */
|
|
2375
2455
|
placeholder?: string;
|
|
2456
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2376
2457
|
name?: string;
|
|
2458
|
+
/** Inline style applied to the inner input element. */
|
|
2377
2459
|
inputStyle?: React__default.CSSProperties;
|
|
2460
|
+
/** Inline style applied to the control shell. */
|
|
2378
2461
|
style?: React__default.CSSProperties;
|
|
2379
2462
|
/** Label/input orientation. Defaults to `'vertical'`. */
|
|
2380
2463
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2396,6 +2479,7 @@ interface AutoCompleteProps {
|
|
|
2396
2479
|
* typing. Default `250`. Ignored when `items` is used.
|
|
2397
2480
|
*/
|
|
2398
2481
|
debounce?: number;
|
|
2482
|
+
/** Fires when a suggestion is selected, with its value. */
|
|
2399
2483
|
onItemClick?: (value: string) => void;
|
|
2400
2484
|
/** Custom "empty" message */
|
|
2401
2485
|
emptyText?: string;
|
|
@@ -2411,6 +2495,7 @@ interface AutoCompleteProps {
|
|
|
2411
2495
|
helperText?: React__default.ReactNode;
|
|
2412
2496
|
/** Mark required (asterisk after the label). */
|
|
2413
2497
|
required?: boolean;
|
|
2498
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2414
2499
|
htmlFor?: string;
|
|
2415
2500
|
}
|
|
2416
2501
|
/**
|
|
@@ -2473,10 +2558,13 @@ interface TreeSelectProps {
|
|
|
2473
2558
|
name?: string;
|
|
2474
2559
|
};
|
|
2475
2560
|
}) => void;
|
|
2561
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2476
2562
|
label?: React__default.ReactNode;
|
|
2563
|
+
/** Placeholder shown when the field is empty. */
|
|
2477
2564
|
placeholder?: string;
|
|
2478
2565
|
/** Form control id linkage. */
|
|
2479
2566
|
htmlFor?: string;
|
|
2567
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2480
2568
|
name?: string;
|
|
2481
2569
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2482
2570
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2484,8 +2572,11 @@ interface TreeSelectProps {
|
|
|
2484
2572
|
helperText?: React__default.ReactNode;
|
|
2485
2573
|
/** Show a required asterisk after the label. */
|
|
2486
2574
|
required?: boolean;
|
|
2575
|
+
/** Disable interaction and dim the control. */
|
|
2487
2576
|
disabled?: boolean;
|
|
2577
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2488
2578
|
errorMessage?: React__default.ReactNode;
|
|
2579
|
+
/** Inline style applied to the control shell. */
|
|
2489
2580
|
style?: React__default.CSSProperties;
|
|
2490
2581
|
/**
|
|
2491
2582
|
* Whether parent (branch) nodes can be selected. When `false`, parents
|
|
@@ -2537,7 +2628,9 @@ interface TreeSelectProps {
|
|
|
2537
2628
|
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;
|
|
2538
2629
|
|
|
2539
2630
|
interface FileInputProps {
|
|
2631
|
+
/** Allow selecting more than one file. */
|
|
2540
2632
|
allowMultiple?: boolean;
|
|
2633
|
+
/** Fires when the value changes. */
|
|
2541
2634
|
onChange?: (e: {
|
|
2542
2635
|
target: {
|
|
2543
2636
|
files: File[];
|
|
@@ -2546,8 +2639,11 @@ interface FileInputProps {
|
|
|
2546
2639
|
value?: string;
|
|
2547
2640
|
};
|
|
2548
2641
|
}) => void;
|
|
2642
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2549
2643
|
name?: string;
|
|
2644
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2550
2645
|
htmlFor?: string;
|
|
2646
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2551
2647
|
label?: React__default.ReactNode;
|
|
2552
2648
|
/** Accepted MIME types / extensions, e.g. `'.xlsx,application/pdf'`. */
|
|
2553
2649
|
accept?: string;
|
|
@@ -2557,10 +2653,13 @@ interface FileInputProps {
|
|
|
2557
2653
|
hint?: React__default.ReactNode;
|
|
2558
2654
|
/** Maximum file size in bytes. Files above this are rejected with an error. */
|
|
2559
2655
|
maxSize?: number;
|
|
2656
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2560
2657
|
errorMessage?: React__default.ReactNode;
|
|
2561
2658
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2562
2659
|
helperText?: React__default.ReactNode;
|
|
2660
|
+
/** Disable interaction and dim the control. */
|
|
2563
2661
|
disabled?: boolean;
|
|
2662
|
+
/** Show a required asterisk after the label. */
|
|
2564
2663
|
required?: boolean;
|
|
2565
2664
|
/** Override the upload glyph in the empty state. */
|
|
2566
2665
|
icon?: React__default.ReactNode;
|
|
@@ -2592,10 +2691,13 @@ interface DatePickerProps {
|
|
|
2592
2691
|
value?: Date | null;
|
|
2593
2692
|
/** Fires with the next date (or `null` if cleared via the clear button). */
|
|
2594
2693
|
onChange?: (date: Date | null) => void;
|
|
2694
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2595
2695
|
label?: React__default.ReactNode;
|
|
2596
2696
|
/** Text shown in the trigger when no date is selected. Default `"Select a date…"`. */
|
|
2597
2697
|
placeholder?: string;
|
|
2698
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2598
2699
|
htmlFor?: string;
|
|
2700
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2599
2701
|
name?: string;
|
|
2600
2702
|
/** Label/trigger orientation. Defaults to `'horizontal'`. */
|
|
2601
2703
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2603,12 +2705,15 @@ interface DatePickerProps {
|
|
|
2603
2705
|
helperText?: React__default.ReactNode;
|
|
2604
2706
|
/** Show a required asterisk after the label. */
|
|
2605
2707
|
required?: boolean;
|
|
2708
|
+
/** Disable interaction and dim the control. */
|
|
2606
2709
|
disabled?: boolean;
|
|
2710
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2607
2711
|
errorMessage?: React__default.ReactNode;
|
|
2608
2712
|
/** Earliest selectable date. Dates before this render disabled. */
|
|
2609
2713
|
min?: Date;
|
|
2610
2714
|
/** Latest selectable date. Dates after this render disabled. */
|
|
2611
2715
|
max?: Date;
|
|
2716
|
+
/** Inline style applied to the control shell. */
|
|
2612
2717
|
style?: React__default.CSSProperties;
|
|
2613
2718
|
/**
|
|
2614
2719
|
* Custom formatter for the trigger display. Defaults to
|
|
@@ -2661,13 +2766,21 @@ type TemporalPickerProps = DatePickerProps;
|
|
|
2661
2766
|
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;
|
|
2662
2767
|
|
|
2663
2768
|
interface TextAreaProps {
|
|
2769
|
+
/** Controlled value. */
|
|
2664
2770
|
value?: string;
|
|
2771
|
+
/** Fires when the value changes. */
|
|
2665
2772
|
onChange?: React__default.ChangeEventHandler<HTMLTextAreaElement>;
|
|
2773
|
+
/** Blur handler — useful for touched/validation timing. */
|
|
2666
2774
|
onBlur?: React__default.FocusEventHandler<HTMLTextAreaElement>;
|
|
2775
|
+
/** Disable interaction and dim the control. */
|
|
2667
2776
|
disabled?: boolean;
|
|
2777
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2668
2778
|
label?: React__default.ReactNode;
|
|
2779
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2669
2780
|
htmlFor?: string;
|
|
2781
|
+
/** Placeholder shown when the field is empty. */
|
|
2670
2782
|
placeholder?: string;
|
|
2783
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2671
2784
|
name?: string;
|
|
2672
2785
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2673
2786
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2688,11 +2801,15 @@ interface TextAreaProps {
|
|
|
2688
2801
|
showCount?: boolean;
|
|
2689
2802
|
/** CSS `resize` behaviour. Default `'vertical'` (or `'none'` when autoGrow). */
|
|
2690
2803
|
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
2804
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2691
2805
|
errorMessage?: React__default.ReactNode;
|
|
2692
2806
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2693
2807
|
helperText?: React__default.ReactNode;
|
|
2808
|
+
/** Show a required asterisk after the label. */
|
|
2694
2809
|
required?: boolean;
|
|
2810
|
+
/** Inline style applied to the control shell. */
|
|
2695
2811
|
style?: React__default.CSSProperties;
|
|
2812
|
+
/** Inline style applied to the inner input element. */
|
|
2696
2813
|
inputStyle?: React__default.CSSProperties;
|
|
2697
2814
|
}
|
|
2698
2815
|
/**
|
|
@@ -2720,16 +2837,19 @@ interface SegmentedOption {
|
|
|
2720
2837
|
disabled?: boolean;
|
|
2721
2838
|
}
|
|
2722
2839
|
interface SegmentedControlProps {
|
|
2840
|
+
/** The selectable options. */
|
|
2723
2841
|
options: SegmentedOption[];
|
|
2724
2842
|
/** Controlled selected value. */
|
|
2725
2843
|
value?: string;
|
|
2726
2844
|
/** Uncontrolled initial value. */
|
|
2727
2845
|
defaultValue?: string;
|
|
2846
|
+
/** Fires when the value changes. */
|
|
2728
2847
|
onChange?: (value: string) => void;
|
|
2729
2848
|
/** Size preset. Default `'md'`. */
|
|
2730
2849
|
size?: FieldSize;
|
|
2731
2850
|
/** Stretch to fill the container, segments share the width equally. */
|
|
2732
2851
|
fullWidth?: boolean;
|
|
2852
|
+
/** Disable interaction and dim the control. */
|
|
2733
2853
|
disabled?: boolean;
|
|
2734
2854
|
/** Optional label, positioned per `layout`. */
|
|
2735
2855
|
label?: React__default.ReactNode;
|
|
@@ -2739,8 +2859,11 @@ interface SegmentedControlProps {
|
|
|
2739
2859
|
helperText?: React__default.ReactNode;
|
|
2740
2860
|
/** Native form field name (emits a hidden input carrying the value). */
|
|
2741
2861
|
name?: string;
|
|
2862
|
+
/** Show a required asterisk after the label. */
|
|
2742
2863
|
required?: boolean;
|
|
2864
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2743
2865
|
errorMessage?: React__default.ReactNode;
|
|
2866
|
+
/** Accessible label for the control. */
|
|
2744
2867
|
'aria-label'?: string;
|
|
2745
2868
|
}
|
|
2746
2869
|
/**
|
|
@@ -2782,14 +2905,21 @@ interface SliderMark {
|
|
|
2782
2905
|
label?: React__default.ReactNode;
|
|
2783
2906
|
}
|
|
2784
2907
|
interface SliderProps {
|
|
2908
|
+
/** Controlled value. */
|
|
2785
2909
|
value?: SliderValue;
|
|
2910
|
+
/** Uncontrolled initial value. */
|
|
2786
2911
|
defaultValue?: SliderValue;
|
|
2912
|
+
/** Fires when the value changes. */
|
|
2787
2913
|
onChange?: (value: SliderValue) => void;
|
|
2788
2914
|
/** Fired once at the end of a drag/keyboard interaction. */
|
|
2789
2915
|
onChangeEnd?: (value: SliderValue) => void;
|
|
2916
|
+
/** Minimum allowed value. */
|
|
2790
2917
|
min?: number;
|
|
2918
|
+
/** Maximum allowed value. */
|
|
2791
2919
|
max?: number;
|
|
2920
|
+
/** Step increment between values. */
|
|
2792
2921
|
step?: number;
|
|
2922
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2793
2923
|
label?: React__default.ReactNode;
|
|
2794
2924
|
/** Show the current value(s) next to the label. */
|
|
2795
2925
|
showValue?: boolean;
|
|
@@ -2799,14 +2929,19 @@ interface SliderProps {
|
|
|
2799
2929
|
marks?: SliderMark[];
|
|
2800
2930
|
/** Show a value tooltip above the thumb while dragging. */
|
|
2801
2931
|
tooltip?: boolean;
|
|
2932
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
2802
2933
|
size?: FieldSize;
|
|
2934
|
+
/** Disable interaction and dim the control. */
|
|
2803
2935
|
disabled?: boolean;
|
|
2936
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2804
2937
|
errorMessage?: React__default.ReactNode;
|
|
2805
2938
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2806
2939
|
helperText?: React__default.ReactNode;
|
|
2807
2940
|
/** Show a required asterisk after the label. */
|
|
2808
2941
|
required?: boolean;
|
|
2942
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2809
2943
|
name?: string;
|
|
2944
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2810
2945
|
htmlFor?: string;
|
|
2811
2946
|
}
|
|
2812
2947
|
/**
|
|
@@ -2837,17 +2972,27 @@ interface TagsInputProps {
|
|
|
2837
2972
|
value?: string[];
|
|
2838
2973
|
/** Uncontrolled initial tags. */
|
|
2839
2974
|
defaultValue?: string[];
|
|
2975
|
+
/** Fires when the value changes. */
|
|
2840
2976
|
onChange?: (tags: string[]) => void;
|
|
2977
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2841
2978
|
label?: React__default.ReactNode;
|
|
2979
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2842
2980
|
htmlFor?: string;
|
|
2981
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2843
2982
|
name?: string;
|
|
2983
|
+
/** Placeholder shown when the field is empty. */
|
|
2844
2984
|
placeholder?: string;
|
|
2985
|
+
/** Label/control orientation: 'horizontal' or 'vertical'. */
|
|
2845
2986
|
layout?: 'horizontal' | 'vertical';
|
|
2987
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
2846
2988
|
size?: FieldSize;
|
|
2989
|
+
/** Disable interaction and dim the control. */
|
|
2847
2990
|
disabled?: boolean;
|
|
2991
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2848
2992
|
errorMessage?: React__default.ReactNode;
|
|
2849
2993
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2850
2994
|
helperText?: React__default.ReactNode;
|
|
2995
|
+
/** Show a required asterisk after the label. */
|
|
2851
2996
|
required?: boolean;
|
|
2852
2997
|
/** Maximum number of tags. Further input is ignored once reached. */
|
|
2853
2998
|
maxTags?: number;
|
|
@@ -2878,20 +3023,29 @@ declare function TagsInput({ value, defaultValue, onChange, label, htmlFor, name
|
|
|
2878
3023
|
interface OtpInputProps {
|
|
2879
3024
|
/** Number of code boxes. Default `6`. */
|
|
2880
3025
|
length?: number;
|
|
3026
|
+
/** Controlled value. */
|
|
2881
3027
|
value?: string;
|
|
3028
|
+
/** Fires when the value changes. */
|
|
2882
3029
|
onChange?: (code: string) => void;
|
|
2883
3030
|
/** Fired when every box is filled. */
|
|
2884
3031
|
onComplete?: (code: string) => void;
|
|
3032
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2885
3033
|
label?: React__default.ReactNode;
|
|
3034
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2886
3035
|
htmlFor?: string;
|
|
3036
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2887
3037
|
name?: string;
|
|
2888
3038
|
/** `'numeric'` (default) restricts to digits; `'alphanumeric'` allows letters too. */
|
|
2889
3039
|
mode?: 'numeric' | 'alphanumeric';
|
|
2890
3040
|
/** Render boxes as masked dots (for PIN entry). */
|
|
2891
3041
|
masked?: boolean;
|
|
3042
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
2892
3043
|
size?: FieldSize;
|
|
3044
|
+
/** Disable interaction and dim the control. */
|
|
2893
3045
|
disabled?: boolean;
|
|
3046
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2894
3047
|
errorMessage?: React__default.ReactNode;
|
|
3048
|
+
/** Show a required asterisk after the label. */
|
|
2895
3049
|
required?: boolean;
|
|
2896
3050
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2897
3051
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2913,8 +3067,11 @@ interface OtpInputProps {
|
|
|
2913
3067
|
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;
|
|
2914
3068
|
|
|
2915
3069
|
interface RatingProps {
|
|
3070
|
+
/** Controlled value. */
|
|
2916
3071
|
value?: number;
|
|
3072
|
+
/** Uncontrolled initial value. */
|
|
2917
3073
|
defaultValue?: number;
|
|
3074
|
+
/** Fires when the value changes. */
|
|
2918
3075
|
onChange?: (value: number) => void;
|
|
2919
3076
|
/** Number of icons. Default `5`. */
|
|
2920
3077
|
count?: number;
|
|
@@ -2924,12 +3081,17 @@ interface RatingProps {
|
|
|
2924
3081
|
readOnly?: boolean;
|
|
2925
3082
|
/** Clicking the current value again clears to 0. Default `true`. */
|
|
2926
3083
|
clearable?: boolean;
|
|
3084
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2927
3085
|
label?: React__default.ReactNode;
|
|
3086
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
2928
3087
|
size?: FieldSize;
|
|
3088
|
+
/** Disable interaction and dim the control. */
|
|
2929
3089
|
disabled?: boolean;
|
|
2930
3090
|
/** Override the icon. Receives a `filled` flag. Default is a star. */
|
|
2931
3091
|
icon?: (filled: boolean) => React__default.ReactNode;
|
|
3092
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2932
3093
|
errorMessage?: React__default.ReactNode;
|
|
3094
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2933
3095
|
name?: string;
|
|
2934
3096
|
/** Label/control orientation. Default `'vertical'`. */
|
|
2935
3097
|
layout?: 'horizontal' | 'vertical';
|
|
@@ -2958,12 +3120,19 @@ declare function Rating({ value, defaultValue, onChange, count, allowHalf, readO
|
|
|
2958
3120
|
interface TimePickerProps {
|
|
2959
3121
|
/** Value as `"HH:mm"` (24h) or `"HH:mm:ss"`. `null`/`undefined` = unset. */
|
|
2960
3122
|
value?: string | null;
|
|
3123
|
+
/** Fires when the value changes. */
|
|
2961
3124
|
onChange?: (value: string | null) => void;
|
|
3125
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
2962
3126
|
label?: React__default.ReactNode;
|
|
3127
|
+
/** The control id; the field label links to it for accessibility. */
|
|
2963
3128
|
htmlFor?: string;
|
|
3129
|
+
/** Native form field name (used for FormData serialisation). */
|
|
2964
3130
|
name?: string;
|
|
3131
|
+
/** Placeholder shown when the field is empty. */
|
|
2965
3132
|
placeholder?: string;
|
|
3133
|
+
/** Label/control orientation: 'horizontal' or 'vertical'. */
|
|
2966
3134
|
layout?: 'horizontal' | 'vertical';
|
|
3135
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
2967
3136
|
size?: FieldSize;
|
|
2968
3137
|
/** Display in 12-hour format with AM/PM (value stays 24h `"HH:mm"`). */
|
|
2969
3138
|
use12Hours?: boolean;
|
|
@@ -2971,11 +3140,15 @@ interface TimePickerProps {
|
|
|
2971
3140
|
withSeconds?: boolean;
|
|
2972
3141
|
/** Minute step. Default `1`. Use `5` / `15` for coarse pickers. */
|
|
2973
3142
|
minuteStep?: number;
|
|
3143
|
+
/** Disable interaction and dim the control. */
|
|
2974
3144
|
disabled?: boolean;
|
|
3145
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
2975
3146
|
errorMessage?: React__default.ReactNode;
|
|
2976
3147
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
2977
3148
|
helperText?: React__default.ReactNode;
|
|
3149
|
+
/** Show a required asterisk after the label. */
|
|
2978
3150
|
required?: boolean;
|
|
3151
|
+
/** Inline style applied to the control shell. */
|
|
2979
3152
|
style?: React__default.CSSProperties;
|
|
2980
3153
|
}
|
|
2981
3154
|
/**
|
|
@@ -3000,25 +3173,39 @@ interface DateRangePreset {
|
|
|
3000
3173
|
range: () => DateRange;
|
|
3001
3174
|
}
|
|
3002
3175
|
interface DateRangePickerProps {
|
|
3176
|
+
/** Controlled value. */
|
|
3003
3177
|
value?: DateRange;
|
|
3178
|
+
/** Fires when the value changes. */
|
|
3004
3179
|
onChange?: (range: DateRange) => void;
|
|
3180
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
3005
3181
|
label?: React__default.ReactNode;
|
|
3182
|
+
/** The control id; the field label links to it for accessibility. */
|
|
3006
3183
|
htmlFor?: string;
|
|
3184
|
+
/** Placeholder shown when the field is empty. */
|
|
3007
3185
|
placeholder?: string;
|
|
3186
|
+
/** Label/control orientation: 'horizontal' or 'vertical'. */
|
|
3008
3187
|
layout?: 'horizontal' | 'vertical';
|
|
3188
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
3009
3189
|
size?: FieldSize;
|
|
3190
|
+
/** Earliest selectable date. */
|
|
3010
3191
|
min?: Date;
|
|
3192
|
+
/** Latest selectable date. */
|
|
3011
3193
|
max?: Date;
|
|
3012
3194
|
/** 0 = Sunday, 1 = Monday. Default `0`. */
|
|
3013
3195
|
weekStartsOn?: 0 | 1;
|
|
3014
3196
|
/** Quick-select presets shown in a rail beside the calendars. */
|
|
3015
3197
|
presets?: DateRangePreset[];
|
|
3198
|
+
/** Custom formatter for the displayed value. */
|
|
3016
3199
|
format?: (d: Date) => string;
|
|
3200
|
+
/** Disable interaction and dim the control. */
|
|
3017
3201
|
disabled?: boolean;
|
|
3202
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
3018
3203
|
errorMessage?: React__default.ReactNode;
|
|
3019
3204
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
3020
3205
|
helperText?: React__default.ReactNode;
|
|
3206
|
+
/** Show a required asterisk after the label. */
|
|
3021
3207
|
required?: boolean;
|
|
3208
|
+
/** Inline style applied to the control shell. */
|
|
3022
3209
|
style?: React__default.CSSProperties;
|
|
3023
3210
|
}
|
|
3024
3211
|
/**
|
|
@@ -3043,21 +3230,31 @@ declare function DateRangePicker({ value, onChange, label, htmlFor, placeholder,
|
|
|
3043
3230
|
interface ColorPickerProps {
|
|
3044
3231
|
/** Hex string, e.g. `"#0466c8"`. */
|
|
3045
3232
|
value?: string;
|
|
3233
|
+
/** Fires when the value changes. */
|
|
3046
3234
|
onChange?: (hex: string) => void;
|
|
3235
|
+
/** Field label, placed above (vertical) or beside (horizontal) the control. */
|
|
3047
3236
|
label?: React__default.ReactNode;
|
|
3237
|
+
/** The control id; the field label links to it for accessibility. */
|
|
3048
3238
|
htmlFor?: string;
|
|
3239
|
+
/** Native form field name (used for FormData serialisation). */
|
|
3049
3240
|
name?: string;
|
|
3241
|
+
/** Label/control orientation: 'horizontal' or 'vertical'. */
|
|
3050
3242
|
layout?: 'horizontal' | 'vertical';
|
|
3243
|
+
/** Size preset — controls height, padding, and font. Default 'md'. */
|
|
3051
3244
|
size?: FieldSize;
|
|
3052
3245
|
/** Preset swatches shown in the popover. Defaults to a balanced 12-color set. */
|
|
3053
3246
|
swatches?: string[];
|
|
3054
3247
|
/** Show the native eyedropper / full picker fallback via `<input type="color">`. Default `true`. */
|
|
3055
3248
|
allowCustom?: boolean;
|
|
3249
|
+
/** Disable interaction and dim the control. */
|
|
3056
3250
|
disabled?: boolean;
|
|
3251
|
+
/** Validation message — shown under the control; also flags it red and sets aria-invalid. */
|
|
3057
3252
|
errorMessage?: React__default.ReactNode;
|
|
3058
3253
|
/** Contextual help revealed via an info icon + tooltip beside the label. */
|
|
3059
3254
|
helperText?: React__default.ReactNode;
|
|
3255
|
+
/** Show a required asterisk after the label. */
|
|
3060
3256
|
required?: boolean;
|
|
3257
|
+
/** Placeholder shown when the field is empty. */
|
|
3061
3258
|
placeholder?: string;
|
|
3062
3259
|
}
|
|
3063
3260
|
/**
|
|
@@ -3239,7 +3436,10 @@ interface UseFormReturn {
|
|
|
3239
3436
|
isValid: boolean;
|
|
3240
3437
|
getValue: (name: string) => unknown;
|
|
3241
3438
|
getValues: () => FormValues;
|
|
3242
|
-
setValue: (name: string, value: unknown
|
|
3439
|
+
setValue: (name: string, value: unknown, opts?: {
|
|
3440
|
+
validate?: boolean;
|
|
3441
|
+
touch?: boolean;
|
|
3442
|
+
}) => void;
|
|
3243
3443
|
setValues: (patch: FormValues) => void;
|
|
3244
3444
|
setError: (name: string, error: string | undefined) => void;
|
|
3245
3445
|
validateField: (name: string) => Promise<string | undefined>;
|
|
@@ -3386,4 +3586,98 @@ declare const FormContext: React$1.Context<FormStore>;
|
|
|
3386
3586
|
/** Read the enclosing `<Form>`'s store. Throws if used outside a `<Form>`. */
|
|
3387
3587
|
declare function useFormStore(): FormStore;
|
|
3388
3588
|
|
|
3389
|
-
|
|
3589
|
+
/** The normalised value emitted on change / submit. */
|
|
3590
|
+
interface CreditCardValue {
|
|
3591
|
+
/** Digits only (no spaces). */
|
|
3592
|
+
number: string;
|
|
3593
|
+
/** Cardholder name. */
|
|
3594
|
+
name: string;
|
|
3595
|
+
/** `MM/YY`. */
|
|
3596
|
+
expiry: string;
|
|
3597
|
+
/** Digits only. */
|
|
3598
|
+
cvv: string;
|
|
3599
|
+
/** Detected brand id (`'visa'`, `'amex'`…) or `null`. */
|
|
3600
|
+
brand: string | null;
|
|
3601
|
+
}
|
|
3602
|
+
interface CreditCardFormProps {
|
|
3603
|
+
/** Called with the validated card once every field passes on submit. */
|
|
3604
|
+
onSubmit?: (card: CreditCardValue) => void | Promise<void>;
|
|
3605
|
+
/** Called on every keystroke with the current (possibly invalid) card. */
|
|
3606
|
+
onChange?: (card: CreditCardValue) => void;
|
|
3607
|
+
/** Seed the fields (uncontrolled). Number/expiry are auto-formatted. */
|
|
3608
|
+
defaultValue?: Partial<CreditCardValue>;
|
|
3609
|
+
/** Size preset for the inner fields. Default `'md'`. */
|
|
3610
|
+
size?: FieldSize;
|
|
3611
|
+
/** Disable every field + the submit button. */
|
|
3612
|
+
disabled?: boolean;
|
|
3613
|
+
/** Require the cardholder name. Default `true`. */
|
|
3614
|
+
requireName?: boolean;
|
|
3615
|
+
/** Hide the built-in submit button (when embedding in a larger form). */
|
|
3616
|
+
hideSubmit?: boolean;
|
|
3617
|
+
/** Submit button label. Default `'Pay'`. */
|
|
3618
|
+
submitLabel?: React__default.ReactNode;
|
|
3619
|
+
/** Extra classes on the root `<form>`. */
|
|
3620
|
+
className?: string;
|
|
3621
|
+
/** Inline style on the root `<form>`. */
|
|
3622
|
+
style?: React__default.CSSProperties;
|
|
3623
|
+
}
|
|
3624
|
+
/**
|
|
3625
|
+
* Unified credit-card form built on the oxygen-ui {@link useForm} Form API.
|
|
3626
|
+
*
|
|
3627
|
+
* One component owns all four fields and their cross-field rules — card number
|
|
3628
|
+
* (brand detection + grouping + Luhn), expiry (`MM/YY`, real month, not past),
|
|
3629
|
+
* CVV (brand-aware length), and cardholder name. It is deliberately NOT shipped
|
|
3630
|
+
* as separate inputs: a CVV or expiry field has no meaning outside a card form.
|
|
3631
|
+
*
|
|
3632
|
+
* Self-contained: render it and handle `onSubmit(card)`; the card is only
|
|
3633
|
+
* delivered once everything validates. Use `onChange` for live updates (e.g. a
|
|
3634
|
+
* card preview) and `hideSubmit` to embed it inside a larger form.
|
|
3635
|
+
*
|
|
3636
|
+
* @example
|
|
3637
|
+
* <CreditCardForm onSubmit={(card) => pay(card)} submitLabel="Pay $49" />
|
|
3638
|
+
*/
|
|
3639
|
+
declare function CreditCardForm({ onSubmit, onChange, defaultValue, size, disabled, requireName, hideSubmit, submitLabel, className, style, }: CreditCardFormProps): react_jsx_runtime.JSX.Element;
|
|
3640
|
+
|
|
3641
|
+
/**
|
|
3642
|
+
* Zero-dependency credit-card helpers: brand detection, Luhn checksum, and
|
|
3643
|
+
* display formatting. Pure functions — no React, no deps — so they're unit
|
|
3644
|
+
* testable and reusable.
|
|
3645
|
+
*/
|
|
3646
|
+
interface CardBrand {
|
|
3647
|
+
/** Stable id, e.g. `'visa'`. */
|
|
3648
|
+
id: string;
|
|
3649
|
+
/** Human label, e.g. `'Visa'`. */
|
|
3650
|
+
label: string;
|
|
3651
|
+
/** Short badge text, e.g. `'VISA'`. */
|
|
3652
|
+
short: string;
|
|
3653
|
+
/** Accent colour for the brand badge (hex). */
|
|
3654
|
+
color: string;
|
|
3655
|
+
/** Matches the leading digits of the card number. */
|
|
3656
|
+
pattern: RegExp;
|
|
3657
|
+
/** Valid total digit lengths for this brand. */
|
|
3658
|
+
lengths: number[];
|
|
3659
|
+
/** Expected CVV length (3 for most, 4 for Amex). */
|
|
3660
|
+
cvv: number;
|
|
3661
|
+
/** Zero-based digit indices to insert a space before (grouping). */
|
|
3662
|
+
gaps: number[];
|
|
3663
|
+
}
|
|
3664
|
+
/** Recognised brands, in match-priority order. */
|
|
3665
|
+
declare const CARD_BRANDS: CardBrand[];
|
|
3666
|
+
/** Strip everything but digits. */
|
|
3667
|
+
declare const onlyDigits: (s: string) => string;
|
|
3668
|
+
/** Detect the card brand from a (possibly partial) number. `null` if unknown. */
|
|
3669
|
+
declare function detectBrand(value: string): CardBrand | null;
|
|
3670
|
+
/** Luhn (mod-10) checksum — the standard card-number integrity check. */
|
|
3671
|
+
declare function luhnValid(value: string): boolean;
|
|
3672
|
+
/** Format a card number with brand-aware grouping (e.g. `4242 4242 4242 4242`). */
|
|
3673
|
+
declare function formatCardNumber(value: string): string;
|
|
3674
|
+
/** Validate a card number: known brand, complete length, passing Luhn. */
|
|
3675
|
+
declare function cardNumberError(value: string): string | undefined;
|
|
3676
|
+
/** Format expiry keystrokes into `MM/YY`, auto-padding the month and slashing. */
|
|
3677
|
+
declare function formatExpiry(value: string): string;
|
|
3678
|
+
/** Validate `MM/YY`: well-formed, real month, not in the past. */
|
|
3679
|
+
declare function expiryError(value: string, now?: Date): string | undefined;
|
|
3680
|
+
/** Validate the CVV against the detected brand's expected length. */
|
|
3681
|
+
declare function cvvError(value: string, cardNumber: string): string | undefined;
|
|
3682
|
+
|
|
3683
|
+
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, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, 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, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
|