cleanplate 0.2.2 → 0.2.4
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/components/form-controls/Checkbox.d.ts +54 -6
- package/dist/components/form-controls/Checkbox.d.ts.map +1 -1
- package/dist/components/form-controls/Date.d.ts +3 -0
- package/dist/components/form-controls/Date.d.ts.map +1 -1
- package/dist/components/form-controls/File.d.ts +30 -4
- package/dist/components/form-controls/File.d.ts.map +1 -1
- package/dist/components/form-controls/Input.d.ts +36 -0
- package/dist/components/form-controls/Input.d.ts.map +1 -1
- package/dist/components/form-controls/Radio.d.ts +54 -6
- package/dist/components/form-controls/Radio.d.ts.map +1 -1
- package/dist/components/form-controls/Select.d.ts +3 -0
- package/dist/components/form-controls/Select.d.ts.map +1 -1
- package/dist/components/form-controls/Stepper.d.ts +7 -0
- package/dist/components/form-controls/Stepper.d.ts.map +1 -1
- package/dist/components/form-controls/TextArea.d.ts +1 -0
- package/dist/components/form-controls/TextArea.d.ts.map +1 -1
- package/dist/components/form-controls/Toggle.d.ts +5 -3
- package/dist/components/form-controls/Toggle.d.ts.map +1 -1
- package/dist/components/form-controls/index.d.ts +3 -3
- package/dist/components/form-controls/index.d.ts.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +3 -3
- package/dist/index.js +3 -3
- package/docs/FormControls.md +230 -11
- package/llms.txt +3 -2
- package/package.json +1 -1
|
@@ -1,15 +1,63 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
export type CheckboxValue = string | number;
|
|
3
|
+
export interface CheckboxOption {
|
|
4
|
+
/** Visible label next to the checkbox. */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Submitted value when the option is checked. */
|
|
7
|
+
value: CheckboxValue;
|
|
8
|
+
/** Disable just this option (group-level `isDisabled` overrides this). */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/** Optional helper text rendered below the option label. */
|
|
11
|
+
description?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Optional leading visual. Pass any node — a CleanPlate `<Icon>`, an image
|
|
14
|
+
* (e.g. brand logo), an emoji, or custom SVG.
|
|
15
|
+
*/
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
/** Maps to `data-testid` on this option's underlying `<input>`. */
|
|
18
|
+
dataTestId?: string;
|
|
19
|
+
/** Optional explicit id for this option (otherwise derived from name + value). */
|
|
20
|
+
id?: string;
|
|
21
|
+
}
|
|
2
22
|
export interface CheckboxProps {
|
|
3
|
-
|
|
23
|
+
/** At least one option; use a one-element array for a single checkbox. */
|
|
24
|
+
options: [CheckboxOption, ...CheckboxOption[]];
|
|
25
|
+
/** Shared `name` for every checkbox in the group (form submission + grouping). */
|
|
26
|
+
name: string;
|
|
27
|
+
/** Group label rendered in `<legend>`. Required `*` is appended here when `isRequired`. */
|
|
28
|
+
label: string;
|
|
29
|
+
/** Stable id used to derive option ids and the legend / error ids. */
|
|
4
30
|
id?: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
31
|
+
/** Controlled selected values (multi-select). */
|
|
32
|
+
value?: CheckboxValue[];
|
|
33
|
+
/** Uncontrolled initial values. */
|
|
34
|
+
defaultValue?: CheckboxValue[];
|
|
35
|
+
/** Fires with the next array of selected values (and the underlying change event). */
|
|
36
|
+
onChange?: (value: CheckboxValue[], e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
37
|
+
/** Disable every option in the group. */
|
|
9
38
|
isDisabled?: boolean;
|
|
10
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Mark the group as required. Renders `*` on the legend and sets
|
|
41
|
+
* `aria-required` on the radiogroup. Native HTML5 "at least one" validation
|
|
42
|
+
* for checkbox groups requires custom validation logic at the form layer.
|
|
43
|
+
*/
|
|
44
|
+
isRequired?: boolean;
|
|
45
|
+
/** Full-width wrapper. */
|
|
11
46
|
isFluid?: boolean;
|
|
47
|
+
/** Layout direction for the options. */
|
|
48
|
+
orientation?: "vertical" | "horizontal";
|
|
49
|
+
/**
|
|
50
|
+
* Visual style for each option.
|
|
51
|
+
* - `default`: stacked rows with the box inline.
|
|
52
|
+
* - `card`: tile with the box in the top-right, icon on the left, primary-brand
|
|
53
|
+
* border + tint when checked.
|
|
54
|
+
*/
|
|
55
|
+
variant?: "default" | "card";
|
|
56
|
+
/** Error message rendered under the group. */
|
|
12
57
|
error?: string;
|
|
58
|
+
className?: string;
|
|
59
|
+
/** Maps to `data-testid` on the wrapping `<fieldset>`. */
|
|
60
|
+
dataTestId?: string;
|
|
13
61
|
}
|
|
14
62
|
declare const Checkbox: React.FC<CheckboxProps>;
|
|
15
63
|
export default Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,aAAa,CAAC;IACrB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,OAAO,EAAE,CAAC,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC,CAAC;IAC/C,kFAAkF;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,mCAAmC;IACnC,YAAY,CAAC,EAAE,aAAa,EAAE,CAAC;IAC/B,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,aAAa,EAAE,EACtB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACnC,IAAI,CAAC;IACV,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAkLrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export interface DateProps {
|
|
3
|
+
id?: string;
|
|
3
4
|
onChange?: (dateValue: string) => void;
|
|
4
5
|
defaultValue?: string;
|
|
5
6
|
label?: string;
|
|
6
7
|
isDisabled?: boolean;
|
|
8
|
+
isRequired?: boolean;
|
|
7
9
|
className?: string;
|
|
8
10
|
error?: string;
|
|
9
11
|
isFluid?: boolean;
|
|
12
|
+
dataTestId?: string;
|
|
10
13
|
}
|
|
11
14
|
declare const Date: React.FC<DateProps>;
|
|
12
15
|
export default Date;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAW1D,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+H7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,15 +1,41 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
export type FileVariant = "button" | "card";
|
|
2
3
|
export interface FileProps {
|
|
3
4
|
name?: string;
|
|
4
5
|
id?: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Fires with the next list of selected files (and the underlying change event
|
|
8
|
+
* when triggered by the native picker). For removals / drag-and-drop the
|
|
9
|
+
* second argument is `undefined`.
|
|
10
|
+
*/
|
|
11
|
+
onChange?: (files: File[], e?: React.ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
/** Controlled list of currently selected files. */
|
|
13
|
+
value?: File[];
|
|
14
|
+
/** Uncontrolled initial file list. Note: this seeds the visual list only — browsers
|
|
15
|
+
* don't allow programmatic pre-population of `<input type="file">` for security. */
|
|
16
|
+
defaultValue?: File[];
|
|
17
|
+
/** Allow selecting multiple files (and append on subsequent selections / drops). */
|
|
18
|
+
multiple?: boolean;
|
|
19
|
+
/** Native `accept` attribute (e.g. `"image/*"`, `".pdf,image/*"`). */
|
|
20
|
+
accept?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Visual style for the trigger:
|
|
23
|
+
* - `button` (default): a single primary-brand button.
|
|
24
|
+
* - `card`: a dashed drop zone with icon, helper text, and "Browse file" CTA.
|
|
25
|
+
*/
|
|
26
|
+
variant?: FileVariant;
|
|
27
|
+
/** Label rendered on the trigger button / card CTA. */
|
|
28
|
+
buttonLabel?: string;
|
|
29
|
+
/** Helper text shown above the "or" inside the card drop zone. */
|
|
30
|
+
dropZoneText?: string;
|
|
31
|
+
/** Visible field label rendered above the trigger. */
|
|
8
32
|
label?: string;
|
|
9
33
|
isDisabled?: boolean;
|
|
10
|
-
|
|
34
|
+
isRequired?: boolean;
|
|
11
35
|
isFluid?: boolean;
|
|
36
|
+
className?: string;
|
|
12
37
|
error?: string;
|
|
38
|
+
dataTestId?: string;
|
|
13
39
|
}
|
|
14
40
|
declare const File: React.FC<FileProps>;
|
|
15
41
|
export default File;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/File.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/File.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,IAAI,EAAE,EACb,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IACV,mDAAmD;IACnD,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf;wFACoF;IACpF,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAyBD,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyM7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -4,6 +4,7 @@ export interface InputProps {
|
|
|
4
4
|
id?: string;
|
|
5
5
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
6
6
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
7
|
+
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
7
8
|
defaultValue?: string;
|
|
8
9
|
value?: string;
|
|
9
10
|
label?: string;
|
|
@@ -14,6 +15,41 @@ export interface InputProps {
|
|
|
14
15
|
className?: string;
|
|
15
16
|
placeholder?: string;
|
|
16
17
|
error?: string;
|
|
18
|
+
dataTestId?: string;
|
|
19
|
+
/** Native `autocomplete` attribute (e.g. `"email"`, `"current-password"`, `"off"`). */
|
|
20
|
+
autoComplete?: string;
|
|
21
|
+
/** Hard cap on the number of characters the user can type. */
|
|
22
|
+
maxLength?: number;
|
|
23
|
+
/**
|
|
24
|
+
* Numeric lower bound (inclusive). Applied via the native `min` attribute
|
|
25
|
+
* (used by HTML5 form validation) and clamped on `blur` for `type="number"`
|
|
26
|
+
* since our text-mapped numeric input doesn't get native min/max enforcement.
|
|
27
|
+
*/
|
|
28
|
+
min?: number | string;
|
|
29
|
+
/** Numeric upper bound — see `min`. */
|
|
30
|
+
max?: number | string;
|
|
31
|
+
/**
|
|
32
|
+
* Short text rendered inside the field on the leading edge — currency symbol
|
|
33
|
+
* (`$`), country code (`+91`), etc. Soft-capped at 4 characters; longer
|
|
34
|
+
* strings are truncated to keep the layout predictable. Exposed to assistive
|
|
35
|
+
* tech via `aria-describedby` so e.g. `$500` is announced as "dollars 500".
|
|
36
|
+
* Ignored when `type="search"` (the search icon already occupies that slot).
|
|
37
|
+
*/
|
|
38
|
+
prefix?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Short text rendered inside the field on the trailing edge — unit (`kg`,
|
|
41
|
+
* `%`), TLD (`.com`), etc. Same 4-character cap and a11y wiring as `prefix`.
|
|
42
|
+
* Ignored when `type="search"` (the clear button already occupies that slot).
|
|
43
|
+
*/
|
|
44
|
+
suffix?: string;
|
|
45
|
+
/**
|
|
46
|
+
* Optional spoken label for screen readers (`aria-label` on the prefix span).
|
|
47
|
+
* Use when the visible affix is a symbol or abbreviation that wouldn't read
|
|
48
|
+
* well on its own (e.g. `prefix="$"`, `prefixA11yLabel="dollars"`).
|
|
49
|
+
*/
|
|
50
|
+
prefixA11yLabel?: string;
|
|
51
|
+
/** See `prefixA11yLabel`. */
|
|
52
|
+
suffixA11yLabel?: string;
|
|
17
53
|
}
|
|
18
54
|
declare const Input: React.FC<InputProps>;
|
|
19
55
|
export default Input;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6BAA6B;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAgCD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuS/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,15 +1,63 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
export type RadioValue = string | number;
|
|
3
|
+
export interface RadioOption {
|
|
4
|
+
/** Visible label next to the radio control. */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Submitted value when the option is selected. */
|
|
7
|
+
value: RadioValue;
|
|
8
|
+
/** Disable just this option (group-level `isDisabled` overrides this). */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/** Optional helper text rendered below the option label. */
|
|
11
|
+
description?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Optional leading visual. Pass any node — a CleanPlate `<Icon>`, an image
|
|
14
|
+
* (e.g. brand logo), an emoji, or custom SVG.
|
|
15
|
+
*/
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
/** Maps to `data-testid` on this option's underlying `<input>`. */
|
|
18
|
+
dataTestId?: string;
|
|
19
|
+
/** Optional explicit id for this option (otherwise derived from name + value). */
|
|
20
|
+
id?: string;
|
|
21
|
+
}
|
|
2
22
|
export interface RadioProps {
|
|
3
|
-
|
|
23
|
+
/** At least one option; use a one-element array for a single radio. */
|
|
24
|
+
options: [RadioOption, ...RadioOption[]];
|
|
25
|
+
/** Shared `name` for every radio in the group (form submission + grouping). */
|
|
26
|
+
name: string;
|
|
27
|
+
/** Group label rendered in `<legend>`. Required `*` is appended here when `isRequired`. */
|
|
28
|
+
label: string;
|
|
29
|
+
/** Stable id used to derive option ids and the legend / error ids. */
|
|
4
30
|
id?: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
value
|
|
8
|
-
|
|
31
|
+
/** Controlled selected value. */
|
|
32
|
+
value?: RadioValue;
|
|
33
|
+
/** Uncontrolled initial value. */
|
|
34
|
+
defaultValue?: RadioValue;
|
|
35
|
+
/** Fires with the next value (and the underlying change event). */
|
|
36
|
+
onChange?: (value: RadioValue, e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
37
|
+
/** Disable every option in the group. */
|
|
9
38
|
isDisabled?: boolean;
|
|
10
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Mark the group as required. Renders `*` on the legend, sets `required` /
|
|
41
|
+
* `aria-required` on the first enabled option (HTML5 group validation only
|
|
42
|
+
* needs one input in the group to carry `required`).
|
|
43
|
+
*/
|
|
44
|
+
isRequired?: boolean;
|
|
45
|
+
/** Full-width wrapper. */
|
|
11
46
|
isFluid?: boolean;
|
|
47
|
+
/** Layout direction for the options. */
|
|
48
|
+
orientation?: "vertical" | "horizontal";
|
|
49
|
+
/**
|
|
50
|
+
* Visual style for each option.
|
|
51
|
+
* - `default`: stacked rows with the ring inline.
|
|
52
|
+
* - `card`: tile with the ring in the top-right, icon on the left, primary-brand
|
|
53
|
+
* border + tint when selected.
|
|
54
|
+
*/
|
|
55
|
+
variant?: "default" | "card";
|
|
56
|
+
/** Error message rendered under the group. */
|
|
12
57
|
error?: string;
|
|
58
|
+
className?: string;
|
|
59
|
+
/** Maps to `data-testid` on the wrapping `<fieldset>`. */
|
|
60
|
+
dataTestId?: string;
|
|
13
61
|
}
|
|
14
62
|
declare const Radio: React.FC<RadioProps>;
|
|
15
63
|
export default Radio;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,EAAE,UAAU,CAAC;IAClB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kFAAkF;IAClF,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,UAAU;IACzB,uEAAuE;IACvE,OAAO,EAAE,CAAC,WAAW,EAAE,GAAG,WAAW,EAAE,CAAC,CAAC;IACzC,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,kCAAkC;IAClC,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/E,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAOD,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkL/B,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -4,6 +4,8 @@ export interface SelectOption {
|
|
|
4
4
|
value: string | number;
|
|
5
5
|
}
|
|
6
6
|
export interface SelectProps {
|
|
7
|
+
name?: string;
|
|
8
|
+
id?: string;
|
|
7
9
|
onChange?: (option: SelectOption | SelectOption[]) => void;
|
|
8
10
|
value?: SelectOption | SelectOption[] | null;
|
|
9
11
|
label?: string;
|
|
@@ -18,6 +20,7 @@ export interface SelectProps {
|
|
|
18
20
|
error?: string;
|
|
19
21
|
isFluid?: boolean;
|
|
20
22
|
isMulti?: boolean;
|
|
23
|
+
dataTestId?: string;
|
|
21
24
|
}
|
|
22
25
|
declare const Select: React.FC<SelectProps>;
|
|
23
26
|
export default Select;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAKlE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,GAAG,YAAY,EAAE,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,GAAG,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0OjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -13,6 +13,13 @@ export interface FormControlsStepperProps {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
placeholder?: string;
|
|
15
15
|
error?: string;
|
|
16
|
+
dataTestId?: string;
|
|
17
|
+
/** Lower bound (inclusive) for the stepper when `type="number"`. */
|
|
18
|
+
min?: number | string;
|
|
19
|
+
/** Upper bound (inclusive) for the stepper when `type="number"`. */
|
|
20
|
+
max?: number | string;
|
|
21
|
+
/** Increment/decrement step. Defaults to `1`. */
|
|
22
|
+
step?: number | string;
|
|
16
23
|
}
|
|
17
24
|
declare const Stepper: React.FC<FormControlsStepperProps>;
|
|
18
25
|
export default Stepper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAKvD,MAAM,WAAW,wBAAwB;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,oEAAoE;IACpE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAiBD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuN/C,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiErC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -2,14 +2,16 @@ import React from "react";
|
|
|
2
2
|
export interface ToggleProps {
|
|
3
3
|
name?: string;
|
|
4
4
|
id?: string;
|
|
5
|
-
onChange?: (
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
onChange?: (checked: boolean) => void;
|
|
6
|
+
defaultChecked?: boolean;
|
|
7
|
+
checked?: boolean;
|
|
8
8
|
label?: string;
|
|
9
9
|
isDisabled?: boolean;
|
|
10
|
+
isRequired?: boolean;
|
|
10
11
|
className?: string;
|
|
11
12
|
isFluid?: boolean;
|
|
12
13
|
error?: string;
|
|
14
|
+
dataTestId?: string;
|
|
13
15
|
}
|
|
14
16
|
declare const Toggle: React.FC<ToggleProps>;
|
|
15
17
|
export default Toggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0FjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -22,10 +22,10 @@ export default _default;
|
|
|
22
22
|
export { Input, TextArea, Select, File, Checkbox, Radio, Date, Stepper, Toggle };
|
|
23
23
|
export type { InputProps } from "./Input";
|
|
24
24
|
export type { SelectProps, SelectOption } from "./Select";
|
|
25
|
-
export type { CheckboxProps } from "./Checkbox";
|
|
25
|
+
export type { CheckboxProps, CheckboxOption, CheckboxValue } from "./Checkbox";
|
|
26
26
|
export type { TextAreaProps } from "./TextArea";
|
|
27
|
-
export type { FileProps } from "./File";
|
|
28
|
-
export type { RadioProps } from "./Radio";
|
|
27
|
+
export type { FileProps, FileVariant } from "./File";
|
|
28
|
+
export type { RadioProps, RadioOption, RadioValue } from "./Radio";
|
|
29
29
|
export type { ToggleProps } from "./Toggle";
|
|
30
30
|
export type { DateProps } from "./Date";
|
|
31
31
|
export type { FormControlsStepperProps } from "./Stepper";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;;;;;;;;;;;;AAE9B,wBAUE;AAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AACjF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;;;;;;;;;;;;AAE9B,wBAUE;AAEF,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;AACjF,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC/E,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AACrD,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC"}
|