@dscout/particle 1.0.0-alpha.13 → 1.0.0-alpha.15
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/lib/cjs/components/checkbox_input.d.ts +3 -2
- package/lib/cjs/components/checkbox_input.js +2 -2
- package/lib/cjs/components/checkbox_input.js.map +1 -1
- package/lib/cjs/components/dropdown.d.ts +2 -1
- package/lib/cjs/components/dropdown.js +4 -3
- package/lib/cjs/components/dropdown.js.map +1 -1
- package/lib/cjs/components/radio_input.d.ts +3 -2
- package/lib/cjs/components/radio_input.js +2 -2
- package/lib/cjs/components/radio_input.js.map +1 -1
- package/lib/cjs/components/textarea.d.ts +2 -1
- package/lib/cjs/components/textarea.js +2 -2
- package/lib/cjs/components/textarea.js.map +1 -1
- package/lib/cjs/components/toggle.d.ts +4 -2
- package/lib/cjs/components/toggle.js +3 -2
- package/lib/cjs/components/toggle.js.map +1 -1
- package/lib/cjs/types.d.ts +2 -1
- package/lib/esm/components/checkbox_input.d.ts +3 -2
- package/lib/esm/components/checkbox_input.js +2 -2
- package/lib/esm/components/checkbox_input.js.map +1 -1
- package/lib/esm/components/dropdown.d.ts +2 -1
- package/lib/esm/components/dropdown.js +4 -3
- package/lib/esm/components/dropdown.js.map +1 -1
- package/lib/esm/components/radio_input.d.ts +3 -2
- package/lib/esm/components/radio_input.js +2 -2
- package/lib/esm/components/radio_input.js.map +1 -1
- package/lib/esm/components/textarea.d.ts +2 -1
- package/lib/esm/components/textarea.js +2 -2
- package/lib/esm/components/textarea.js.map +1 -1
- package/lib/esm/components/toggle.d.ts +4 -2
- package/lib/esm/components/toggle.js +3 -2
- package/lib/esm/components/toggle.js.map +1 -1
- package/lib/esm/types.d.ts +2 -1
- package/lib/stylesheets/particle.css +119 -24
- package/lib/stylesheets/particle.css.map +1 -1
- package/lib/stylesheets/particle.min.css +1 -1
- package/lib/stylesheets/particle.min.css.gz +0 -0
- package/package.json +2 -1
- package/styles/color_schemes/_ai_colors.scss +1 -0
- package/styles/color_schemes/_color_scheme_builder.scss +1 -0
- package/styles/components/selectors/_base.scss +1 -1
- package/styles/components/selectors/themes/_bandit.scss +0 -8
- package/styles/components/selectors/themes/_theme_builder.scss +4 -4
- package/styles/components/toggle/_base.scss +16 -2
- package/styles/components/toggle/themes/_bandit.scss +0 -1
- package/styles/components/toggle/themes/_express.scss +27 -0
- package/styles/components/toggle/themes/_theme_builder.scss +1 -1
- package/styles/utilities/_colors.scss +1 -0
- package/styles/utilities/_typography.scss +50 -10
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { GetRef } from '../utils/refs';
|
|
3
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
3
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
4
4
|
interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
|
|
6
6
|
checked?: boolean;
|
|
7
|
+
color?: Colors;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
getRef?: GetRef<HTMLInputElement>;
|
|
9
10
|
id?: string;
|
|
@@ -15,5 +16,5 @@ interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
|
|
|
15
16
|
tabIndex?: number;
|
|
16
17
|
value?: number | string;
|
|
17
18
|
}
|
|
18
|
-
export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, disabled, getRef, id, indeterminate, label, name, onChange, readOnly, tabIndex, value, ...rest }: CheckboxInputProps): JSX.Element;
|
|
19
|
+
export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, color, disabled, getRef, id, indeterminate, label, name, onChange, readOnly, tabIndex, value, ...rest }: CheckboxInputProps): JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -39,7 +39,7 @@ function renderIcon(checked, indeterminate, readOnly) {
|
|
|
39
39
|
return react_1.default.createElement(checkbox_check_1.IconCheckboxCheck, { "aria-hidden": true });
|
|
40
40
|
}
|
|
41
41
|
function CheckboxInput(_a) {
|
|
42
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
42
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "color", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
43
43
|
var checkboxId = (0, forms_1.looksUnique)(id) ? id : (0, forms_1.unique)(id);
|
|
44
44
|
var className = (0, class_names_1.default)('Selector', _modifierClass, {
|
|
45
45
|
'Selector--with-label': label
|
|
@@ -50,7 +50,7 @@ function CheckboxInput(_a) {
|
|
|
50
50
|
ref.indeterminate = indeterminate;
|
|
51
51
|
(0, refs_1.handleGetRef)(getRef, ref);
|
|
52
52
|
}, tabIndex: tabIndex, type: "checkbox", value: (0, forms_1.inputValue)(value, onChange) })),
|
|
53
|
-
react_1.default.createElement("label", { className:
|
|
53
|
+
react_1.default.createElement("label", { className: (0, class_names_1.default)('Selector__Field', "color--".concat(color)), htmlFor: checkboxId }),
|
|
54
54
|
label && (react_1.default.createElement("label", { className: "Selector__Label", htmlFor: checkboxId }, label)),
|
|
55
55
|
renderIcon(checked, indeterminate, readOnly)));
|
|
56
56
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAiE;AACjE,sCAA6C;AAC7C,6EAAyD;AAEzD,0DAA4D;AAC5D,0EAA4E;
|
|
1
|
+
{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAiE;AACjE,sCAA6C;AAC7C,6EAAyD;AAEzD,0DAA4D;AAC5D,0EAA4E;AAkB5E,SAAS,UAAU,CACjB,OAAgB,EAChB,aAAsB,EACtB,QAAiB;IAEjB,IAAI,aAAa,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC;QACzC,OAAO,8BAAC,kDAAyB,0BAAe,CAAC;IAEnD,OAAO,8BAAC,kCAAiB,0BAAe,CAAC;AAC3C,CAAC;AAED,SAAgB,aAAa,CAAC,EAmBT;IAlBnB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAlBqB,sNAmB7B,CADQ;IAEP,IAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAA,cAAM,EAAC,EAAE,CAAC,CAAC;IACrD,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,UAAU,EAAE,cAAc,EAAE;QACvD,sBAAsB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS;QACvB,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,UAAC,GAAG;gBACP,IAAI,GAAG;oBAAE,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;gBAC3C,IAAA,mBAAY,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QAGF,yCACE,SAAS,EAAE,IAAA,qBAAU,EAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,EAC3D,OAAO,EAAE,UAAU,GACnB;QACD,KAAK,IAAI,CACR,yCAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,UAAU,IACnD,KAAK,CACA,CACT;QACA,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AA9DD,sCA8DC"}
|
|
@@ -22,6 +22,7 @@ interface DropdownProps extends CommonComponentProps, ModifierProps {
|
|
|
22
22
|
opens?: 'up' | 'down';
|
|
23
23
|
persist?: boolean;
|
|
24
24
|
toggle: React.ReactElement | ToggleRenderProp;
|
|
25
|
+
ignoreClickOutside?: (event: MouseEvent) => boolean;
|
|
25
26
|
}
|
|
26
27
|
interface DropdownState {
|
|
27
28
|
isOpen: boolean;
|
|
@@ -36,7 +37,7 @@ export declare class Dropdown extends Component<DropdownProps, DropdownState> {
|
|
|
36
37
|
dropdownElem: HTMLDivElement;
|
|
37
38
|
constructor(props: DropdownProps);
|
|
38
39
|
componentWillUnmount(): void;
|
|
39
|
-
handleClickOutside(
|
|
40
|
+
handleClickOutside(event: MouseEvent): void;
|
|
40
41
|
handleKeyDown({ key }: KeyboardEvent): void;
|
|
41
42
|
handleToggle(): void;
|
|
42
43
|
handleTransitionEnd(event: React.TransitionEvent): void;
|
|
@@ -90,9 +90,10 @@ var Dropdown = /** @class */ (function (_super) {
|
|
|
90
90
|
document.removeEventListener('click', this.handleClickOutside);
|
|
91
91
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
92
92
|
};
|
|
93
|
-
Dropdown.prototype.handleClickOutside = function (
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
Dropdown.prototype.handleClickOutside = function (event) {
|
|
94
|
+
if (this.props.ignoreClickOutside && this.props.ignoreClickOutside(event))
|
|
95
|
+
return;
|
|
96
|
+
if (!this.dropdownElem.contains(event.target))
|
|
96
97
|
this.close();
|
|
97
98
|
};
|
|
98
99
|
Dropdown.prototype.handleKeyDown = function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown.tsx"],"names":[],"mappings":";AAAA,4DAA4D;AAC5D,oDAAoD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEpD,6CAAmD;AAKnD,sCAA6C;AAC7C,gDAAiE;AACjE,qEAA8C;AAC9C,6EAAyD;
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown.tsx"],"names":[],"mappings":";AAAA,4DAA4D;AAC5D,oDAAoD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEpD,6CAAmD;AAKnD,sCAA6C;AAC7C,gDAAiE;AACjE,qEAA8C;AAC9C,6EAAyD;AAiCzD,IAAM,kBAAkB,GAAG;IACzB,EAAE,EAAE,QAAQ;IACZ,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF;IAA8B,4BAAuC;IAUnE,kBAAY,KAAoB;QAAhC,YACE,kBAAM,KAAK,CAAC,SAQb;QANC,KAAI,CAAC,KAAK,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;QAEjD,KAAI,CAAC,kBAAkB,GAAG,KAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QAC7D,KAAI,CAAC,aAAa,GAAG,KAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACnD,KAAI,CAAC,YAAY,GAAG,KAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACjD,KAAI,CAAC,mBAAmB,GAAG,KAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;IACjE,CAAC;IAED,uCAAoB,GAApB;QACE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC/D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9D,CAAC;IAED,qCAAkB,GAAlB,UAAmB,KAAiB;QAClC,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,KAAK,CAAC;YACvE,OAAO;QACT,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAiB,CAAC;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;IACzE,CAAC;IAED,gCAAa,GAAb,UAAc,EAAsB;YAApB,GAAG,SAAA;QACjB,IAAI,GAAG,KAAK,QAAQ;YAAE,IAAI,CAAC,KAAK,EAAE,CAAC;IACrC,CAAC;IAED,+BAAY,GAAZ;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACrB,IAAI,CAAC,KAAK,EAAE,CAAC;SACd;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;IACH,CAAC;IAED,sCAAmB,GAAnB,UAAoB,KAA4B;QAAhD,iBASC;QARC,IACE,IAAI,CAAC,KAAK,CAAC,SAAS;YACpB,IAAA,uCAA2B,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,EAC/D;YACA,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;gBAClC,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ;oBAAE,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAClE,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,uBAAI,GAAJ;QAAA,iBAOC;QANC,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE;YAChD,IAAI,KAAI,CAAC,KAAK,CAAC,QAAQ;gBAAE,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAEhE,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAI,CAAC,kBAAkB,CAAC,CAAC;YAC5D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAI,CAAC,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,wBAAK,GAAL;QAAA,iBAKC;QAJC,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;YAChD,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,KAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAI,CAAC,aAAa,CAAC,CAAC;QAC9D,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iCAAc,GAAd;QACQ,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,SAAS,eAAA,EAAE,MAAM,YAAe,CAAC;QACnC,IAAA,KAAwB,IAAI,CAAC,KAAK,EAAhC,QAAQ,cAAA,EAAE,OAAO,aAAe,CAAC;QAEzC,IAAI,CAAC,OAAO,IAAI,CAAC,MAAM,IAAI,CAAC,SAAS;YAAE,OAAO;QAE9C,IAAM,UAAU,GAAG;YACjB,MAAM,QAAA;YACN,cAAc,EAAE,IAAI,CAAC,YAAY;SAClC,CAAC;QAEF,IAAI,OAAO,QAAQ,KAAK,UAAU;YAAE,OAAO,QAAQ,CAAC,UAAU,CAAC,CAAC;QAEhE,OAAO,gBAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;YAClC,OAAA,eAAK,CAAC,YAAY,CAAC,KAA2B,EAAE,UAAU,CAAC;QAA3D,CAA2D,CAC5D,CAAC;IACJ,CAAC;IAED,+BAAY,GAAZ,UAAa,cAAsB;QACzB,IAAA,MAAM,GAAK,IAAI,CAAC,KAAK,OAAf,CAAgB;QACtB,IAAA,MAAM,GAAK,IAAI,CAAC,KAAK,OAAf,CAAgB;QAC9B,IAAM,WAAW,GAAG;YAClB,eAAe,EAAE,cAAc;YAC/B,eAAe,EAAE,MAAM;YACvB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;YAC5B,OAAO,EAAE,IAAI,CAAC,YAAY;SAC3B,CAAC;QAEF,IAAI,OAAO,MAAM,KAAK,UAAU;YAAE,OAAO,MAAM,CAAC,WAAW,CAAC,CAAC;QAE7D,OAAO,eAAK,CAAC,YAAY,CACvB,IAAI,CAAC,KAAK,CAAC,MAA4B,EACvC,WAAW,CACZ,CAAC;IACJ,CAAC;IAED,yBAAM,GAAN;;QAAA,iBAyDC;QAxDS,IAAA,MAAM,GAAK,IAAI,CAAC,KAAK,OAAf,CAAgB;QAC9B,IAAM,KAaF,IAAI,CAAC,KAAK;QAZZ,gEAAgE;QAChE,cAAc,oBAAA,EACd,KAAK,WAAA,EACS,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,EAAE,QAAA,EACF,SAAS,eAAA,EACT,KAAK,WAAA,EACF,IAAI,cAZH,sIAaL,CAAa,CAAC;QAEf,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,UAAU,EAAE,cAAc,CAAC,CAAC;QACzD,IAAM,gBAAgB,GAAG,IAAA,qBAAU,EAAC,mBAAmB,EAAE;YACvD,yBAAyB,EAAE,MAAM;SAClC,CAAC,CAAC;QAEH,IAAM,KAAK;YACT,GAAC,KAAK,IAAG,CAAC;YACV,GAAC,kBAAkB,CAAC,KAAK,CAAC,IAAG,MAAM;YACnC,QAAK,GAAE,YAAY;YACnB,YAAS,YAAA;eACV,CAAC;QAEF,IAAM,cAAc,GAAG,EAAE,CAAC,CAAC,CAAC,qCAA8B,EAAE,CAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QAEtE,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,UAAC,GAAG;gBACP,IAAI,GAAG;oBAAE,KAAI,CAAC,YAAY,GAAG,GAAG,CAAC;gBACjC,IAAA,mBAAY,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5B,CAAC;YAEA,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC;YAClC,uCACE,EAAE,EAAE,cAAc,EAClB,SAAS,EAAE,gBAAgB,EAC3B,GAAG,EAAE,UAAC,EAAE;oBACN,IAAI,EAAE;wBAAE,KAAI,CAAC,WAAW,GAAG,EAAE,CAAC;gBAChC,CAAC,EACD,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,IAAI,CAAC,mBAAmB,IAExC,IAAI,CAAC,cAAc,EAAE,CAClB,CACF,CACP,CAAC;IACJ,CAAC;IAnKM,qBAAY,GAAG;QACpB,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;KACd,CAAC;IAiKJ,eAAC;CAAA,AArKD,CAA8B,iBAAS,GAqKtC;AArKY,4BAAQ"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
2
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
3
3
|
import type { GetRef } from '../utils/refs';
|
|
4
4
|
interface RadioInputProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
|
|
6
6
|
checked?: boolean;
|
|
7
|
+
color?: Colors;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
getRef?: GetRef<HTMLInputElement>;
|
|
9
10
|
id?: string;
|
|
@@ -14,5 +15,5 @@ interface RadioInputProps extends CommonComponentProps, ModifierProps {
|
|
|
14
15
|
tabIndex?: number;
|
|
15
16
|
value?: number | string;
|
|
16
17
|
}
|
|
17
|
-
export declare function RadioInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, disabled, getRef, id, label, name, onChange, readOnly, tabIndex, value, ...rest }: RadioInputProps): JSX.Element;
|
|
18
|
+
export declare function RadioInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, color, disabled, getRef, id, label, name, onChange, readOnly, tabIndex, value, ...rest }: RadioInputProps): JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -32,14 +32,14 @@ var forms_1 = require("../utils/forms");
|
|
|
32
32
|
var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
|
|
33
33
|
var radio_circle_1 = require("../icons/radio_circle");
|
|
34
34
|
function RadioInput(_a) {
|
|
35
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "disabled", "getRef", "id", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
35
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "color", "disabled", "getRef", "id", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
36
36
|
var radioId = (0, forms_1.looksUnique)(id) ? id : (0, forms_1.unique)(id);
|
|
37
37
|
var className = (0, class_names_1.default)('Selector', _modifierClass, {
|
|
38
38
|
'Selector--with-label': label
|
|
39
39
|
});
|
|
40
40
|
return (react_1.default.createElement("div", { className: className },
|
|
41
41
|
react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked: checked, className: "Selector__Radio", disabled: disabled, id: radioId, name: name, onChange: onChange, readOnly: readOnly, ref: getRef, tabIndex: tabIndex, type: "radio", value: (0, forms_1.inputValue)(value, onChange) })),
|
|
42
|
-
react_1.default.createElement("label", { className:
|
|
42
|
+
react_1.default.createElement("label", { className: (0, class_names_1.default)('Selector__Field', "color--".concat(color)), htmlFor: radioId }),
|
|
43
43
|
label && (react_1.default.createElement("label", { className: "Selector__Label", htmlFor: radioId }, label)),
|
|
44
44
|
react_1.default.createElement(radio_circle_1.IconRadioCircle, { "aria-hidden": true })));
|
|
45
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio_input.js","sourceRoot":"","sources":["../../../src/components/radio_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAiE;AACjE,6EAAyD;AAEzD,sDAAwD;
|
|
1
|
+
{"version":3,"file":"radio_input.js","sourceRoot":"","sources":["../../../src/components/radio_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAiE;AACjE,6EAAyD;AAEzD,sDAAwD;AAiBxD,SAAgB,UAAU,CAAC,EAkBT;IAjBhB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAjBkB,qMAkB1B,CADQ;IAEP,IAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAA,cAAM,EAAC,EAAE,CAAC,CAAC;IAClD,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,UAAU,EAAE,cAAc,EAAE;QACvD,sBAAsB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS;QAEvB,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QAEF,yCACE,SAAS,EAAE,IAAA,qBAAU,EAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,EAC3D,OAAO,EAAE,OAAO,GAChB;QACD,KAAK,IAAI,CACR,yCAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,OAAO,IAChD,KAAK,CACA,CACT;QACD,8BAAC,8BAAe,0BAAe,CAC3B,CACP,CAAC;AACJ,CAAC;AA1DD,gCA0DC"}
|
|
@@ -14,6 +14,7 @@ interface TextareaProps extends CommonComponentProps, ModifierProps {
|
|
|
14
14
|
name?: string;
|
|
15
15
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
16
16
|
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
17
|
+
onCut?: React.ClipboardEventHandler<HTMLTextAreaElement>;
|
|
17
18
|
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
18
19
|
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
19
20
|
onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
|
|
@@ -21,5 +22,5 @@ interface TextareaProps extends CommonComponentProps, ModifierProps {
|
|
|
21
22
|
readOnly?: boolean;
|
|
22
23
|
value?: string;
|
|
23
24
|
}
|
|
24
|
-
export declare function Textarea({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, autoFocus, disabled, getRef, height, id, invalid, maxLength, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, readOnly, value, ...rest }: TextareaProps): JSX.Element;
|
|
25
|
+
export declare function Textarea({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, autoFocus, disabled, getRef, height, id, invalid, maxLength, name, onBlur, onChange, onCut, onFocus, onKeyDown, onPaste, placeholder, readOnly, value, ...rest }: TextareaProps): JSX.Element;
|
|
25
26
|
export {};
|
|
@@ -31,7 +31,7 @@ var class_names_1 = __importDefault(require("../utils/class_names"));
|
|
|
31
31
|
var forms_1 = require("../utils/forms");
|
|
32
32
|
var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
|
|
33
33
|
function Textarea(_a) {
|
|
34
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, disabled = _a.disabled, getRef = _a.getRef, height = _a.height, id = _a.id, invalid = _a.invalid, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, readOnly = _a.readOnly, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "autoComplete", "autoFocus", "disabled", "getRef", "height", "id", "invalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "readOnly", "value"]);
|
|
34
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, disabled = _a.disabled, getRef = _a.getRef, height = _a.height, id = _a.id, invalid = _a.invalid, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onCut = _a.onCut, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, readOnly = _a.readOnly, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "autoComplete", "autoFocus", "disabled", "getRef", "height", "id", "invalid", "maxLength", "name", "onBlur", "onChange", "onCut", "onFocus", "onKeyDown", "onPaste", "placeholder", "readOnly", "value"]);
|
|
35
35
|
var textareaClassName = (0, class_names_1.default)('Input', 'resize--vertical', _modifierClass, {
|
|
36
36
|
'Input--filled': value,
|
|
37
37
|
'Input--invalid': invalid,
|
|
@@ -42,7 +42,7 @@ function Textarea(_a) {
|
|
|
42
42
|
});
|
|
43
43
|
return (react_1.default.createElement("textarea", __assign({}, (0, data_attributes_1.default)(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, autoComplete: autoComplete,
|
|
44
44
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
45
|
-
autoFocus: autoFocus, className: textareaClassName, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, ref: getRef, value: (0, forms_1.inputValue)(value, onChange) })));
|
|
45
|
+
autoFocus: autoFocus, className: textareaClassName, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onCut: onCut, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, ref: getRef, value: (0, forms_1.inputValue)(value, onChange) })));
|
|
46
46
|
}
|
|
47
47
|
exports.Textarea = Textarea;
|
|
48
48
|
//# sourceMappingURL=textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAA4C;AAC5C,6EAAyD;
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAA4C;AAC5C,6EAAyD;AAwBzD,SAAgB,QAAQ,CAAC,EAyBT;IAxBd,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAxBgB,gSAyBxB,CADQ;IAEP,IAAM,iBAAiB,GAAG,IAAA,qBAAU,EAClC,OAAO,EACP,kBAAkB,EAClB,cAAc,EACd;QACE,eAAe,EAAE,KAAK;QACtB,gBAAgB,EAAE,OAAO;QACzB,WAAW,EAAE,MAAM,KAAK,OAAO;QAC/B,WAAW,EAAE,MAAM,KAAK,QAAQ;QAChC,WAAW,EAAE,CAAC,MAAM;QACpB,YAAY,EAAE,MAAM,KAAK,OAAO;KACjC,CACF,CAAC;IAEF,OAAO,CACL,uDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,YAAY,EAAE,YAAY;QAC1B,iDAAiD;QACjD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC,CACH,CAAC;AACJ,CAAC;AAnED,4BAmEC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
2
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
3
3
|
import type { GetRef } from '../utils/refs';
|
|
4
4
|
interface ToggleProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
disabled?: boolean;
|
|
@@ -9,6 +9,8 @@ interface ToggleProps extends CommonComponentProps, ModifierProps {
|
|
|
9
9
|
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
10
10
|
toggled?: boolean;
|
|
11
11
|
value?: number | string;
|
|
12
|
+
color?: Colors;
|
|
13
|
+
variant?: 'ai';
|
|
12
14
|
}
|
|
13
|
-
export declare function Toggle({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, disabled, getRef, id, name, onChange, toggled, value, ...rest }: ToggleProps): JSX.Element;
|
|
15
|
+
export declare function Toggle({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, disabled, getRef, id, name, onChange, toggled, value, color, variant, ...rest }: ToggleProps): JSX.Element;
|
|
14
16
|
export {};
|
|
@@ -31,9 +31,10 @@ var class_names_1 = __importDefault(require("../utils/class_names"));
|
|
|
31
31
|
var forms_1 = require("../utils/forms");
|
|
32
32
|
var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
|
|
33
33
|
function Toggle(_a) {
|
|
34
|
-
var
|
|
34
|
+
var _b, _c;
|
|
35
|
+
var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], disabled = _a.disabled, getRef = _a.getRef, id = _a.id, name = _a.name, onChange = _a.onChange, toggled = _a.toggled, value = _a.value, _d = _a.color, color = _d === void 0 ? 'dscout' : _d, variant = _a.variant, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "disabled", "getRef", "id", "name", "onChange", "toggled", "value", "color", "variant"]);
|
|
35
36
|
var toggleId = (0, forms_1.looksUnique)(id) ? id : (0, forms_1.unique)(id);
|
|
36
|
-
return (react_1.default.createElement("fieldset", { className: (0, class_names_1.default)('Toggle', _modifierClass), ref: getRef },
|
|
37
|
+
return (react_1.default.createElement("fieldset", { className: (0, class_names_1.default)('Toggle', { 'Toggle--ai': variant === 'ai' }, (_b = {}, _b["color--ai-purple-500"] = variant === 'ai', _b), (_c = {}, _c["color--".concat(color)] = color && variant !== 'ai', _c), _modifierClass), ref: getRef },
|
|
37
38
|
react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, checked: toggled, className: "Toggle__Checkbox", disabled: disabled, id: toggleId, name: name, onChange: onChange, type: "checkbox", value: value })),
|
|
38
39
|
react_1.default.createElement("label", { className: "Toggle__Track", htmlFor: toggleId })));
|
|
39
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAqD;AACrD,6EAAyD;
|
|
1
|
+
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAAqD;AACrD,6EAAyD;AAczD,SAAgB,MAAM,CAAC,EAeT;;IAdZ,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,KAAK,WAAA,EACL,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,OAAO,aAAA,EACJ,IAAI,cAdc,+JAetB,CADQ;IAEP,IAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAA,cAAM,EAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,4CACE,SAAS,EAAE,IAAA,qBAAU,EACnB,QAAQ,EACR,EAAE,YAAY,EAAE,OAAO,KAAK,IAAI,EAAE,YAChC,GAAC,sBAAsB,IAAG,OAAO,KAAK,IAAI,iBAC1C,GAAC,iBAAU,KAAK,CAAE,IAAG,KAAK,IAAI,OAAO,KAAK,IAAI,OAChD,cAAc,CACf,EACD,GAAG,EAAE,MAAM;QAEX,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,IACZ;QAGF,yCAAO,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ,GAAI,CAC7C,CACZ,CAAC;AACJ,CAAC;AAhDD,wBAgDC"}
|
package/lib/cjs/types.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export interface CommonComponentProps {
|
|
|
6
6
|
export interface ModifierProps {
|
|
7
7
|
_modifierClass?: string;
|
|
8
8
|
}
|
|
9
|
-
export type Colors = 'alert-light' | 'alert' | 'alert-dark' | 'alert-darkest' | 'archive-light' | 'archive' | 'archive-dark' | 'archive-darkest' | 'black' | 'close-light' | 'close' | 'close-darkest' | 'close-dark' | 'coachmark-light' | 'coachmark' | 'coachmark-dark' | 'coachmark-darkest' | 'dscout-light' | 'dscout' | 'dscout-dark' | 'dscout-darkest' | 'gray-1' | 'gray-2' | 'gray-3' | 'gray-4' | 'gray-5' | 'gray-6' | 'invert' | 'main' | 'marker-light' | 'marker' | 'marker-dark' | 'marker-darkest' | 'note-light' | 'note' | 'note-dark' | 'note-darkest' | 'success-light' | 'success' | 'success-dark' | 'success-darkest' | 'test-light' | 'test' | 'test-dark' | 'test-darkest' | 'white' | 'part-0' | 'part-1' | 'part-2' | 'part-3' | 'part-4' | 'part-5' | 'part-6' | 'part-7' | 'part-8' | 'part-9' | 'gray-25' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-500' | 'gray-800' | 'green-100' | 'green-300' | 'green-500' | 'green-600' | 'green-700' | 'red-100' | 'red-300' | 'red-500' | 'red-600' | 'red-700' | 'purple-100' | 'purple-300' | 'purple-500' | 'purple-600' | 'purple-700' | 'blue-50' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-600' | 'blue-700' | 'sea-100' | 'sea-300' | 'sea-500' | 'sea-600' | 'sea-700' | 'sky-100' | 'sky-300' | 'sky-500' | 'sky-600' | 'sky-700' | 'caribbean-100' | 'caribbean-300' | 'caribbean-500' | 'caribbean-600' | 'caribbean-700' | 'amethyst-100' | 'amethyst-300' | 'amethyst-500' | 'amethyst-600' | 'amethyst-700' | 'rose-100' | 'rose-300' | 'rose-500' | 'rose-600' | 'rose-700' | 'tomato-100' | 'tomato-300' | 'tomato-500' | 'tomato-600' | 'tomato-700' | 'gold-100' | 'gold-300' | 'gold-500' | 'gold-600' | 'gold-700' | 'sand-100' | 'sand-300' | 'sand-500' | 'sand-600' | 'sand-700' | 'jungle-100' | 'jungle-300' | 'jungle-500' | 'jungle-600' | 'jungle-700' | 'lime-100' | 'lime-300' | 'lime-500' | 'lime-600' | 'lime-700';
|
|
9
|
+
export type Colors = 'alert-light' | 'alert' | 'alert-dark' | 'alert-darkest' | 'archive-light' | 'archive' | 'archive-dark' | 'archive-darkest' | 'black' | 'close-light' | 'close' | 'close-darkest' | 'close-dark' | 'coachmark-light' | 'coachmark' | 'coachmark-dark' | 'coachmark-darkest' | 'dscout-light' | 'dscout' | 'dscout-dark' | 'dscout-darkest' | 'gray-1' | 'gray-2' | 'gray-3' | 'gray-4' | 'gray-5' | 'gray-6' | 'invert' | 'main' | 'marker-light' | 'marker' | 'marker-dark' | 'marker-darkest' | 'note-light' | 'note' | 'note-dark' | 'note-darkest' | 'success-light' | 'success' | 'success-dark' | 'success-darkest' | 'test-light' | 'test' | 'test-dark' | 'test-darkest' | 'white' | 'part-0' | 'part-1' | 'part-2' | 'part-3' | 'part-4' | 'part-5' | 'part-6' | 'part-7' | 'part-8' | 'part-9' | 'gray-25' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-500' | 'gray-800' | 'green-100' | 'green-300' | 'green-500' | 'green-600' | 'green-700' | 'red-100' | 'red-300' | 'red-500' | 'red-600' | 'red-700' | 'purple-100' | 'purple-300' | 'purple-500' | 'purple-600' | 'purple-700' | 'blue-50' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-600' | 'blue-700' | 'sea-100' | 'sea-300' | 'sea-500' | 'sea-600' | 'sea-700' | 'sky-100' | 'sky-300' | 'sky-500' | 'sky-600' | 'sky-700' | 'caribbean-100' | 'caribbean-300' | 'caribbean-500' | 'caribbean-600' | 'caribbean-700' | 'amethyst-100' | 'amethyst-300' | 'amethyst-500' | 'amethyst-600' | 'amethyst-700' | 'rose-100' | 'rose-300' | 'rose-500' | 'rose-600' | 'rose-700' | 'tomato-100' | 'tomato-300' | 'tomato-500' | 'tomato-600' | 'tomato-700' | 'gold-100' | 'gold-300' | 'gold-500' | 'gold-600' | 'gold-700' | 'sand-100' | 'sand-300' | 'sand-500' | 'sand-600' | 'sand-700' | 'jungle-100' | 'jungle-300' | 'jungle-500' | 'jungle-600' | 'jungle-700' | 'lime-100' | 'lime-300' | 'lime-500' | 'lime-600' | 'lime-700' | 'ai-purple-50' | 'ai-purple-100' | 'ai-purple-300' | 'ai-purple-500' | 'ai-purple-600' | 'ai-purple-700' | 'ai-pink-50' | 'ai-pink-100' | 'ai-pink-300' | 'ai-pink-500' | 'ai-pink-600' | 'ai-pink-700' | 'ai-pink-800';
|
|
10
|
+
export type Gradients = 'ai-light-a' | 'ai-a' | 'ai-reverse-a' | 'ai-light-b' | 'ai-b';
|
|
10
11
|
export type Dimensions = 'none' | '0.25' | '0.5' | '0.75' | '1' | '1.25' | '1.5' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '10' | '12' | '14' | '16' | '18' | '20' | '22' | '24' | '26' | '28' | '30' | '32' | '36' | '40' | '48' | '60' | '10%' | '20%' | '30%' | '40%' | '50%' | '60%' | '70%' | '80%' | '90%' | '100%';
|
|
11
12
|
export type Spacing = 'none' | '0.25' | '0.5' | '0.75' | '1' | '1.25' | '1.5' | '2' | '3' | '4';
|
|
12
13
|
export type Shadows = 's' | 'm' | 'l' | 'xl';
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { GetRef } from '../utils/refs';
|
|
3
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
3
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
4
4
|
interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
|
|
6
6
|
checked?: boolean;
|
|
7
|
+
color?: Colors;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
getRef?: GetRef<HTMLInputElement>;
|
|
9
10
|
id?: string;
|
|
@@ -15,5 +16,5 @@ interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
|
|
|
15
16
|
tabIndex?: number;
|
|
16
17
|
value?: number | string;
|
|
17
18
|
}
|
|
18
|
-
export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, disabled, getRef, id, indeterminate, label, name, onChange, readOnly, tabIndex, value, ...rest }: CheckboxInputProps): JSX.Element;
|
|
19
|
+
export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, color, disabled, getRef, id, indeterminate, label, name, onChange, readOnly, tabIndex, value, ...rest }: CheckboxInputProps): JSX.Element;
|
|
19
20
|
export {};
|
|
@@ -33,7 +33,7 @@ function renderIcon(checked, indeterminate, readOnly) {
|
|
|
33
33
|
return React.createElement(IconCheckboxCheck, { "aria-hidden": true });
|
|
34
34
|
}
|
|
35
35
|
export function CheckboxInput(_a) {
|
|
36
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
36
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "color", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
37
37
|
var checkboxId = looksUnique(id) ? id : unique(id);
|
|
38
38
|
var className = classNames('Selector', _modifierClass, {
|
|
39
39
|
'Selector--with-label': label
|
|
@@ -44,7 +44,7 @@ export function CheckboxInput(_a) {
|
|
|
44
44
|
ref.indeterminate = indeterminate;
|
|
45
45
|
handleGetRef(getRef, ref);
|
|
46
46
|
}, tabIndex: tabIndex, type: "checkbox", value: inputValue(value, onChange) })),
|
|
47
|
-
React.createElement("label", { className:
|
|
47
|
+
React.createElement("label", { className: classNames('Selector__Field', "color--".concat(color)), htmlFor: checkboxId }),
|
|
48
48
|
label && (React.createElement("label", { className: "Selector__Label", htmlFor: checkboxId }, label)),
|
|
49
49
|
renderIcon(checked, indeterminate, readOnly)));
|
|
50
50
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAkB5E,SAAS,UAAU,CACjB,OAAgB,EAChB,aAAsB,EACtB,QAAiB;IAEjB,IAAI,aAAa,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC;QACzC,OAAO,oBAAC,yBAAyB,0BAAe,CAAC;IAEnD,OAAO,oBAAC,iBAAiB,0BAAe,CAAC;AAC3C,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAmBT;IAlBnB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAlBqB,sNAmB7B,CADQ;IAEP,IAAM,UAAU,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACrD,IAAM,SAAS,GAAG,UAAU,CAAC,UAAU,EAAE,cAAc,EAAE;QACvD,sBAAsB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QACvB,0CACM,iBAAiB,CAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,oBAAoB,EAC9B,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,UAAC,GAAG;gBACP,IAAI,GAAG;oBAAE,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;gBAC3C,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QAGF,+BACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,EAC3D,OAAO,EAAE,UAAU,GACnB;QACD,KAAK,IAAI,CACR,+BAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,UAAU,IACnD,KAAK,CACA,CACT;QACA,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CACzC,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -22,6 +22,7 @@ interface DropdownProps extends CommonComponentProps, ModifierProps {
|
|
|
22
22
|
opens?: 'up' | 'down';
|
|
23
23
|
persist?: boolean;
|
|
24
24
|
toggle: React.ReactElement | ToggleRenderProp;
|
|
25
|
+
ignoreClickOutside?: (event: MouseEvent) => boolean;
|
|
25
26
|
}
|
|
26
27
|
interface DropdownState {
|
|
27
28
|
isOpen: boolean;
|
|
@@ -36,7 +37,7 @@ export declare class Dropdown extends Component<DropdownProps, DropdownState> {
|
|
|
36
37
|
dropdownElem: HTMLDivElement;
|
|
37
38
|
constructor(props: DropdownProps);
|
|
38
39
|
componentWillUnmount(): void;
|
|
39
|
-
handleClickOutside(
|
|
40
|
+
handleClickOutside(event: MouseEvent): void;
|
|
40
41
|
handleKeyDown({ key }: KeyboardEvent): void;
|
|
41
42
|
handleToggle(): void;
|
|
42
43
|
handleTransitionEnd(event: React.TransitionEvent): void;
|
|
@@ -61,9 +61,10 @@ var Dropdown = /** @class */ (function (_super) {
|
|
|
61
61
|
document.removeEventListener('click', this.handleClickOutside);
|
|
62
62
|
document.removeEventListener('keydown', this.handleKeyDown);
|
|
63
63
|
};
|
|
64
|
-
Dropdown.prototype.handleClickOutside = function (
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
Dropdown.prototype.handleClickOutside = function (event) {
|
|
65
|
+
if (this.props.ignoreClickOutside && this.props.ignoreClickOutside(event))
|
|
66
|
+
return;
|
|
67
|
+
if (!this.dropdownElem.contains(event.target))
|
|
67
68
|
this.close();
|
|
68
69
|
};
|
|
69
70
|
Dropdown.prototype.handleKeyDown = function (_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown.tsx"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,oDAAoD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEpD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKnD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../src/components/dropdown.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
2
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
3
3
|
import type { GetRef } from '../utils/refs';
|
|
4
4
|
interface RadioInputProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
'aria-invalid'?: React.AriaAttributes['aria-invalid'];
|
|
6
6
|
checked?: boolean;
|
|
7
|
+
color?: Colors;
|
|
7
8
|
disabled?: boolean;
|
|
8
9
|
getRef?: GetRef<HTMLInputElement>;
|
|
9
10
|
id?: string;
|
|
@@ -14,5 +15,5 @@ interface RadioInputProps extends CommonComponentProps, ModifierProps {
|
|
|
14
15
|
tabIndex?: number;
|
|
15
16
|
value?: number | string;
|
|
16
17
|
}
|
|
17
|
-
export declare function RadioInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, disabled, getRef, id, label, name, onChange, readOnly, tabIndex, value, ...rest }: RadioInputProps): JSX.Element;
|
|
18
|
+
export declare function RadioInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, color, disabled, getRef, id, label, name, onChange, readOnly, tabIndex, value, ...rest }: RadioInputProps): JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -26,14 +26,14 @@ import { inputValue, looksUnique, unique } from '../utils/forms';
|
|
|
26
26
|
import getDataAttributes from '../utils/data_attributes';
|
|
27
27
|
import { IconRadioCircle } from '../icons/radio_circle';
|
|
28
28
|
export function RadioInput(_a) {
|
|
29
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "disabled", "getRef", "id", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
29
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "color", "disabled", "getRef", "id", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
|
|
30
30
|
var radioId = looksUnique(id) ? id : unique(id);
|
|
31
31
|
var className = classNames('Selector', _modifierClass, {
|
|
32
32
|
'Selector--with-label': label
|
|
33
33
|
});
|
|
34
34
|
return (React.createElement("div", { className: className },
|
|
35
35
|
React.createElement("input", __assign({}, getDataAttributes(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked: checked, className: "Selector__Radio", disabled: disabled, id: radioId, name: name, onChange: onChange, readOnly: readOnly, ref: getRef, tabIndex: tabIndex, type: "radio", value: inputValue(value, onChange) })),
|
|
36
|
-
React.createElement("label", { className:
|
|
36
|
+
React.createElement("label", { className: classNames('Selector__Field', "color--".concat(color)), htmlFor: radioId }),
|
|
37
37
|
label && (React.createElement("label", { className: "Selector__Label", htmlFor: radioId }, label)),
|
|
38
38
|
React.createElement(IconRadioCircle, { "aria-hidden": true })));
|
|
39
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio_input.js","sourceRoot":"","sources":["../../../src/components/radio_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"radio_input.js","sourceRoot":"","sources":["../../../src/components/radio_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAiBxD,MAAM,UAAU,UAAU,CAAC,EAkBT;IAjBhB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAjBkB,qMAkB1B,CADQ;IAEP,IAAM,OAAO,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAClD,IAAM,SAAS,GAAG,UAAU,CAAC,UAAU,EAAE,cAAc,EAAE;QACvD,sBAAsB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS;QAEvB,0CACM,iBAAiB,CAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,iBAAiB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,OAAO,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QAEF,+BACE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,EAC3D,OAAO,EAAE,OAAO,GAChB;QACD,KAAK,IAAI,CACR,+BAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,OAAO,IAChD,KAAK,CACA,CACT;QACD,oBAAC,eAAe,0BAAe,CAC3B,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -14,6 +14,7 @@ interface TextareaProps extends CommonComponentProps, ModifierProps {
|
|
|
14
14
|
name?: string;
|
|
15
15
|
onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
16
16
|
onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
|
|
17
|
+
onCut?: React.ClipboardEventHandler<HTMLTextAreaElement>;
|
|
17
18
|
onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
|
|
18
19
|
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
|
|
19
20
|
onPaste?: React.ClipboardEventHandler<HTMLTextAreaElement>;
|
|
@@ -21,5 +22,5 @@ interface TextareaProps extends CommonComponentProps, ModifierProps {
|
|
|
21
22
|
readOnly?: boolean;
|
|
22
23
|
value?: string;
|
|
23
24
|
}
|
|
24
|
-
export declare function Textarea({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, autoFocus, disabled, getRef, height, id, invalid, maxLength, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, readOnly, value, ...rest }: TextareaProps): JSX.Element;
|
|
25
|
+
export declare function Textarea({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, autoComplete, autoFocus, disabled, getRef, height, id, invalid, maxLength, name, onBlur, onChange, onCut, onFocus, onKeyDown, onPaste, placeholder, readOnly, value, ...rest }: TextareaProps): JSX.Element;
|
|
25
26
|
export {};
|
|
@@ -25,7 +25,7 @@ import classNames from '../utils/class_names';
|
|
|
25
25
|
import { inputValue } from '../utils/forms';
|
|
26
26
|
import getDataAttributes from '../utils/data_attributes';
|
|
27
27
|
export function Textarea(_a) {
|
|
28
|
-
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, disabled = _a.disabled, getRef = _a.getRef, height = _a.height, id = _a.id, invalid = _a.invalid, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, readOnly = _a.readOnly, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "autoComplete", "autoFocus", "disabled", "getRef", "height", "id", "invalid", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "readOnly", "value"]);
|
|
28
|
+
var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, disabled = _a.disabled, getRef = _a.getRef, height = _a.height, id = _a.id, invalid = _a.invalid, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onCut = _a.onCut, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, readOnly = _a.readOnly, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "autoComplete", "autoFocus", "disabled", "getRef", "height", "id", "invalid", "maxLength", "name", "onBlur", "onChange", "onCut", "onFocus", "onKeyDown", "onPaste", "placeholder", "readOnly", "value"]);
|
|
29
29
|
var textareaClassName = classNames('Input', 'resize--vertical', _modifierClass, {
|
|
30
30
|
'Input--filled': value,
|
|
31
31
|
'Input--invalid': invalid,
|
|
@@ -36,6 +36,6 @@ export function Textarea(_a) {
|
|
|
36
36
|
});
|
|
37
37
|
return (React.createElement("textarea", __assign({}, getDataAttributes(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, autoComplete: autoComplete,
|
|
38
38
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
39
|
-
autoFocus: autoFocus, className: textareaClassName, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, ref: getRef, value: inputValue(value, onChange) })));
|
|
39
|
+
autoFocus: autoFocus, className: textareaClassName, disabled: disabled, id: id, maxLength: maxLength, name: name, onBlur: onBlur, onChange: onChange, onCut: onCut, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, ref: getRef, value: inputValue(value, onChange) })));
|
|
40
40
|
}
|
|
41
41
|
//# sourceMappingURL=textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAwBzD,MAAM,UAAU,QAAQ,CAAC,EAyBT;IAxBd,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAxBgB,gSAyBxB,CADQ;IAEP,IAAM,iBAAiB,GAAG,UAAU,CAClC,OAAO,EACP,kBAAkB,EAClB,cAAc,EACd;QACE,eAAe,EAAE,KAAK;QACtB,gBAAgB,EAAE,OAAO;QACzB,WAAW,EAAE,MAAM,KAAK,OAAO;QAC/B,WAAW,EAAE,MAAM,KAAK,QAAQ;QAChC,WAAW,EAAE,CAAC,MAAM;QACpB,YAAY,EAAE,MAAM,KAAK,OAAO;KACjC,CACF,CAAC;IAEF,OAAO,CACL,6CACM,iBAAiB,CAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,YAAY,EAAE,YAAY;QAC1B,iDAAiD;QACjD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,iBAAiB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,IAClC,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { CommonComponentProps, ModifierProps } from '../types';
|
|
2
|
+
import type { Colors, CommonComponentProps, ModifierProps } from '../types';
|
|
3
3
|
import type { GetRef } from '../utils/refs';
|
|
4
4
|
interface ToggleProps extends CommonComponentProps, ModifierProps {
|
|
5
5
|
disabled?: boolean;
|
|
@@ -9,6 +9,8 @@ interface ToggleProps extends CommonComponentProps, ModifierProps {
|
|
|
9
9
|
onChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
10
10
|
toggled?: boolean;
|
|
11
11
|
value?: number | string;
|
|
12
|
+
color?: Colors;
|
|
13
|
+
variant?: 'ai';
|
|
12
14
|
}
|
|
13
|
-
export declare function Toggle({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, disabled, getRef, id, name, onChange, toggled, value, ...rest }: ToggleProps): JSX.Element;
|
|
15
|
+
export declare function Toggle({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, disabled, getRef, id, name, onChange, toggled, value, color, variant, ...rest }: ToggleProps): JSX.Element;
|
|
14
16
|
export {};
|
|
@@ -25,9 +25,10 @@ import classNames from '../utils/class_names';
|
|
|
25
25
|
import { looksUnique, unique } from '../utils/forms';
|
|
26
26
|
import getDataAttributes from '../utils/data_attributes';
|
|
27
27
|
export function Toggle(_a) {
|
|
28
|
-
var
|
|
28
|
+
var _b, _c;
|
|
29
|
+
var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], disabled = _a.disabled, getRef = _a.getRef, id = _a.id, name = _a.name, onChange = _a.onChange, toggled = _a.toggled, value = _a.value, _d = _a.color, color = _d === void 0 ? 'dscout' : _d, variant = _a.variant, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "disabled", "getRef", "id", "name", "onChange", "toggled", "value", "color", "variant"]);
|
|
29
30
|
var toggleId = looksUnique(id) ? id : unique(id);
|
|
30
|
-
return (React.createElement("fieldset", { className: classNames('Toggle', _modifierClass), ref: getRef },
|
|
31
|
+
return (React.createElement("fieldset", { className: classNames('Toggle', { 'Toggle--ai': variant === 'ai' }, (_b = {}, _b["color--ai-purple-500"] = variant === 'ai', _b), (_c = {}, _c["color--".concat(color)] = color && variant !== 'ai', _c), _modifierClass), ref: getRef },
|
|
31
32
|
React.createElement("input", __assign({}, getDataAttributes(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, checked: toggled, className: "Toggle__Checkbox", disabled: disabled, id: toggleId, name: name, onChange: onChange, type: "checkbox", value: value })),
|
|
32
33
|
React.createElement("label", { className: "Toggle__Track", htmlFor: toggleId })));
|
|
33
34
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AAczD,MAAM,UAAU,MAAM,CAAC,EAeT;;IAdZ,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,KAAK,WAAA,EACL,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,OAAO,aAAA,EACJ,IAAI,cAdc,+JAetB,CADQ;IAEP,IAAM,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,kCACE,SAAS,EAAE,UAAU,CACnB,QAAQ,EACR,EAAE,YAAY,EAAE,OAAO,KAAK,IAAI,EAAE,YAChC,GAAC,sBAAsB,IAAG,OAAO,KAAK,IAAI,iBAC1C,GAAC,iBAAU,KAAK,CAAE,IAAG,KAAK,IAAI,OAAO,KAAK,IAAI,OAChD,cAAc,CACf,EACD,GAAG,EAAE,MAAM;QAEX,0CACM,iBAAiB,CAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,QAAQ,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,KAAK,IACZ;QAGF,+BAAO,SAAS,EAAC,eAAe,EAAC,OAAO,EAAE,QAAQ,GAAI,CAC7C,CACZ,CAAC;AACJ,CAAC"}
|
package/lib/esm/types.d.ts
CHANGED
|
@@ -6,7 +6,8 @@ export interface CommonComponentProps {
|
|
|
6
6
|
export interface ModifierProps {
|
|
7
7
|
_modifierClass?: string;
|
|
8
8
|
}
|
|
9
|
-
export type Colors = 'alert-light' | 'alert' | 'alert-dark' | 'alert-darkest' | 'archive-light' | 'archive' | 'archive-dark' | 'archive-darkest' | 'black' | 'close-light' | 'close' | 'close-darkest' | 'close-dark' | 'coachmark-light' | 'coachmark' | 'coachmark-dark' | 'coachmark-darkest' | 'dscout-light' | 'dscout' | 'dscout-dark' | 'dscout-darkest' | 'gray-1' | 'gray-2' | 'gray-3' | 'gray-4' | 'gray-5' | 'gray-6' | 'invert' | 'main' | 'marker-light' | 'marker' | 'marker-dark' | 'marker-darkest' | 'note-light' | 'note' | 'note-dark' | 'note-darkest' | 'success-light' | 'success' | 'success-dark' | 'success-darkest' | 'test-light' | 'test' | 'test-dark' | 'test-darkest' | 'white' | 'part-0' | 'part-1' | 'part-2' | 'part-3' | 'part-4' | 'part-5' | 'part-6' | 'part-7' | 'part-8' | 'part-9' | 'gray-25' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-500' | 'gray-800' | 'green-100' | 'green-300' | 'green-500' | 'green-600' | 'green-700' | 'red-100' | 'red-300' | 'red-500' | 'red-600' | 'red-700' | 'purple-100' | 'purple-300' | 'purple-500' | 'purple-600' | 'purple-700' | 'blue-50' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-600' | 'blue-700' | 'sea-100' | 'sea-300' | 'sea-500' | 'sea-600' | 'sea-700' | 'sky-100' | 'sky-300' | 'sky-500' | 'sky-600' | 'sky-700' | 'caribbean-100' | 'caribbean-300' | 'caribbean-500' | 'caribbean-600' | 'caribbean-700' | 'amethyst-100' | 'amethyst-300' | 'amethyst-500' | 'amethyst-600' | 'amethyst-700' | 'rose-100' | 'rose-300' | 'rose-500' | 'rose-600' | 'rose-700' | 'tomato-100' | 'tomato-300' | 'tomato-500' | 'tomato-600' | 'tomato-700' | 'gold-100' | 'gold-300' | 'gold-500' | 'gold-600' | 'gold-700' | 'sand-100' | 'sand-300' | 'sand-500' | 'sand-600' | 'sand-700' | 'jungle-100' | 'jungle-300' | 'jungle-500' | 'jungle-600' | 'jungle-700' | 'lime-100' | 'lime-300' | 'lime-500' | 'lime-600' | 'lime-700';
|
|
9
|
+
export type Colors = 'alert-light' | 'alert' | 'alert-dark' | 'alert-darkest' | 'archive-light' | 'archive' | 'archive-dark' | 'archive-darkest' | 'black' | 'close-light' | 'close' | 'close-darkest' | 'close-dark' | 'coachmark-light' | 'coachmark' | 'coachmark-dark' | 'coachmark-darkest' | 'dscout-light' | 'dscout' | 'dscout-dark' | 'dscout-darkest' | 'gray-1' | 'gray-2' | 'gray-3' | 'gray-4' | 'gray-5' | 'gray-6' | 'invert' | 'main' | 'marker-light' | 'marker' | 'marker-dark' | 'marker-darkest' | 'note-light' | 'note' | 'note-dark' | 'note-darkest' | 'success-light' | 'success' | 'success-dark' | 'success-darkest' | 'test-light' | 'test' | 'test-dark' | 'test-darkest' | 'white' | 'part-0' | 'part-1' | 'part-2' | 'part-3' | 'part-4' | 'part-5' | 'part-6' | 'part-7' | 'part-8' | 'part-9' | 'gray-25' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-500' | 'gray-800' | 'green-100' | 'green-300' | 'green-500' | 'green-600' | 'green-700' | 'red-100' | 'red-300' | 'red-500' | 'red-600' | 'red-700' | 'purple-100' | 'purple-300' | 'purple-500' | 'purple-600' | 'purple-700' | 'blue-50' | 'blue-100' | 'blue-300' | 'blue-500' | 'blue-600' | 'blue-700' | 'sea-100' | 'sea-300' | 'sea-500' | 'sea-600' | 'sea-700' | 'sky-100' | 'sky-300' | 'sky-500' | 'sky-600' | 'sky-700' | 'caribbean-100' | 'caribbean-300' | 'caribbean-500' | 'caribbean-600' | 'caribbean-700' | 'amethyst-100' | 'amethyst-300' | 'amethyst-500' | 'amethyst-600' | 'amethyst-700' | 'rose-100' | 'rose-300' | 'rose-500' | 'rose-600' | 'rose-700' | 'tomato-100' | 'tomato-300' | 'tomato-500' | 'tomato-600' | 'tomato-700' | 'gold-100' | 'gold-300' | 'gold-500' | 'gold-600' | 'gold-700' | 'sand-100' | 'sand-300' | 'sand-500' | 'sand-600' | 'sand-700' | 'jungle-100' | 'jungle-300' | 'jungle-500' | 'jungle-600' | 'jungle-700' | 'lime-100' | 'lime-300' | 'lime-500' | 'lime-600' | 'lime-700' | 'ai-purple-50' | 'ai-purple-100' | 'ai-purple-300' | 'ai-purple-500' | 'ai-purple-600' | 'ai-purple-700' | 'ai-pink-50' | 'ai-pink-100' | 'ai-pink-300' | 'ai-pink-500' | 'ai-pink-600' | 'ai-pink-700' | 'ai-pink-800';
|
|
10
|
+
export type Gradients = 'ai-light-a' | 'ai-a' | 'ai-reverse-a' | 'ai-light-b' | 'ai-b';
|
|
10
11
|
export type Dimensions = 'none' | '0.25' | '0.5' | '0.75' | '1' | '1.25' | '1.5' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '10' | '12' | '14' | '16' | '18' | '20' | '22' | '24' | '26' | '28' | '30' | '32' | '36' | '40' | '48' | '60' | '10%' | '20%' | '30%' | '40%' | '50%' | '60%' | '70%' | '80%' | '90%' | '100%';
|
|
11
12
|
export type Spacing = 'none' | '0.25' | '0.5' | '0.75' | '1' | '1.25' | '1.5' | '2' | '3' | '4';
|
|
12
13
|
export type Shadows = 's' | 'm' | 'l' | 'xl';
|