datocms-react-ui 0.3.8 → 0.3.9

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.
@@ -1 +1 @@
1
- { "canvas": "_canvas_1kptt_1" }
1
+ { "canvas": "_canvas_jzho9_1" }
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.Section = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var classnames_1 = __importDefault(require("classnames"));
9
+ var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
10
+ function Section(_a) {
11
+ var _b, _c;
12
+ var title = _a.title, children = _a.children, highlighted = _a.highlighted, collapsible = _a.collapsible, headerClassName = _a.headerClassName, titleClassName = _a.titleClassName, headerStyle = _a.headerStyle, titleStyle = _a.titleStyle;
13
+ return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section'], (_b = {}, _b[styles_module_css_json_1.default['Section--highlighted']] = highlighted, _b)) },
14
+ react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__header'], headerClassName), style: headerStyle },
15
+ react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__title'], titleClassName), style: titleStyle },
16
+ collapsible && (react_1.default.createElement("button", { type: "button", className: (0, classnames_1.default)(styles_module_css_json_1.default['Section__arrow'], (_c = {},
17
+ _c[styles_module_css_json_1.default['Section__arrow--is-open']] = collapsible.isOpen,
18
+ _c)), onClick: collapsible.onToggle })),
19
+ react_1.default.createElement("div", { className: styles_module_css_json_1.default['Section__title__content'] }, title))),
20
+ (!collapsible || collapsible.isOpen) && children));
21
+ }
22
+ exports.Section = Section;
23
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Section/index.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwD;AACxD,0DAA4B;AAC5B,oFAAyC;AAazC,SAAgB,OAAO,CAAC,EAST;;QARb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA;IAEV,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,SAAS,CAAC,YAAI,GAAC,gCAAC,CAAC,sBAAsB,CAAC,IAAG,WAAW,MAAG;QAC5E,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC,EAAE,KAAK,EAAE,WAAW;YAC3E,uCACE,SAAS,EAAE,IAAA,oBAAE,EACX,gCAAC,CAAC,gBAAgB,CAAC,EAEnB,cAAc,CACf,EACD,KAAK,EAAE,UAAU;gBAEhB,WAAW,IAAI,CACd,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,gCAAC,CAAC,gBAAgB,CAAC;wBAC/B,GAAC,gCAAC,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,MAAM;4BAClD,EACF,OAAO,EAAE,WAAW,CAAC,QAAQ,GAC7B,CACH;gBACD,uCAAK,SAAS,EAAE,gCAAC,CAAC,yBAAyB,CAAC,IAAG,KAAK,CAAO,CACvD,CACF;QACL,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,QAAQ,CAC7C,CACP,CAAC;AACJ,CAAC;AApCD,0BAoCC"}
@@ -0,0 +1 @@
1
+ { "Section": "_Section_zpctu_1", "Section--highlighted": "_Section--highlighted_zpctu_5", "pageContentSectionHighligh": "_pageContentSectionHighligh_zpctu_1", "Section__header": "_Section__header_zpctu_19", "Section__title": "_Section__title_zpctu_38", "Section__title__content": "_Section__title__content_zpctu_52", "Section__arrow": "_Section__arrow_zpctu_55", "Section__arrow--is-open": "_Section__arrow--is-open_zpctu_82" }
@@ -0,0 +1,56 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ exports.AsyncCreatableSelectField = exports.CreatableSelectField = exports.AsyncSelectField = exports.SelectField = void 0;
18
+ var react_1 = __importDefault(require("react"));
19
+ var __1 = require("..");
20
+ function SelectField(_a) {
21
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
22
+ return (react_1.default.createElement(react_1.default.Fragment, null,
23
+ react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
24
+ react_1.default.createElement(__1.SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
25
+ error && react_1.default.createElement(__1.FieldError, null, error),
26
+ hint && react_1.default.createElement(__1.FieldHint, null, hint)));
27
+ }
28
+ exports.SelectField = SelectField;
29
+ function AsyncSelectField(_a) {
30
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
31
+ return (react_1.default.createElement(react_1.default.Fragment, null,
32
+ react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
33
+ react_1.default.createElement(__1.AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
34
+ error && react_1.default.createElement(__1.FieldError, null, error),
35
+ hint && react_1.default.createElement(__1.FieldHint, null, hint)));
36
+ }
37
+ exports.AsyncSelectField = AsyncSelectField;
38
+ function CreatableSelectField(_a) {
39
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
40
+ return (react_1.default.createElement(react_1.default.Fragment, null,
41
+ react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
42
+ react_1.default.createElement(__1.CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
43
+ error && react_1.default.createElement(__1.FieldError, null, error),
44
+ hint && react_1.default.createElement(__1.FieldHint, null, hint)));
45
+ }
46
+ exports.CreatableSelectField = CreatableSelectField;
47
+ function AsyncCreatableSelectField(_a) {
48
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
49
+ return (react_1.default.createElement(react_1.default.Fragment, null,
50
+ react_1.default.createElement(__1.FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
51
+ react_1.default.createElement(__1.AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
52
+ error && react_1.default.createElement(__1.FieldError, null, error),
53
+ hint && react_1.default.createElement(__1.FieldHint, null, hint)));
54
+ }
55
+ exports.AsyncCreatableSelectField = AsyncCreatableSelectField;
56
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAAyC;AACzC,wBAaY;AAqBZ,SAAgB,WAAW,CAIzB,EAYyC;QAXzC,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEhB,OAAO,CACL;QACE,8BAAC,aAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,8BAAC,eAAW,eACN,gBAAgB,IACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AArCD,kCAqCC;AAoBD,SAAgB,gBAAgB,CAI9B,EAY8C;QAX9C,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEhB,OAAO,CACL;QACE,8BAAC,aAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,8BAAC,oBAAgB,eACX,gBAAgB,IACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AArCD,4CAqCC;AAoBD,SAAgB,oBAAoB,CAIlC,EAYkD;QAXlD,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEhB,OAAO,CACL;QACE,8BAAC,aAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,8BAAC,wBAAoB,eACf,gBAAgB,IACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AArCD,oDAqCC;AAoBD,SAAgB,yBAAyB,CAIvC,EAYuD;QAXvD,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,gBAAgB,sBAAA;IAEhB,OAAO,CACL;QACE,8BAAC,aAAS,eAAK,cAAc,IAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,KAC3E,KAAK,CACI;QAEZ,8BAAC,6BAAyB,eACpB,gBAAgB,IACpB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,KAAK,IACd;QAED,KAAK,IAAI,8BAAC,cAAU,QAAE,KAAK,CAAc;QACzC,IAAI,IAAI,8BAAC,aAAS,QAAE,IAAI,CAAa,CACrC,CACJ,CAAC;AACJ,CAAC;AArCD,8DAqCC"}
@@ -0,0 +1,133 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
32
+ var __rest = (this && this.__rest) || function (s, e) {
33
+ var t = {};
34
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
35
+ t[p] = s[p];
36
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
37
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
38
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
39
+ t[p[i]] = s[p[i]];
40
+ }
41
+ return t;
42
+ };
43
+ var __importDefault = (this && this.__importDefault) || function (mod) {
44
+ return (mod && mod.__esModule) ? mod : { "default": mod };
45
+ };
46
+ Object.defineProperty(exports, "__esModule", { value: true });
47
+ exports.AsyncCreatableSelectInput = exports.CreatableSelectInput = exports.AsyncSelectInput = exports.SelectInput = void 0;
48
+ var react_1 = __importStar(require("react"));
49
+ var react_select_1 = __importDefault(require("react-select"));
50
+ var async_1 = __importDefault(require("react-select/async"));
51
+ var async_creatable_1 = __importDefault(require("react-select/async-creatable"));
52
+ var creatable_1 = __importDefault(require("react-select/creatable"));
53
+ var themeConfig = function (existing) { return (__assign(__assign({}, existing), { borderRadius: 0, colors: __assign(__assign({}, existing.colors), { primary25: 'var(--semi-transparent-accent-color)',
54
+ // disabled
55
+ neutral10: 'var(--border-color)',
56
+ // normal
57
+ neutral20: 'var(--border-color)',
58
+ // focused
59
+ primary: 'var(--accent-color)',
60
+ // hover
61
+ neutral30: 'var(--darker-border-color)' }) })); };
62
+ var useStyles = function (isDisabled, error) {
63
+ return (0, react_1.useMemo)(function () {
64
+ return {
65
+ placeholder: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--placeholder-body-color)' })); },
66
+ container: function (provided) {
67
+ return __assign(__assign({}, provided), { fontSize: 'inherit' });
68
+ },
69
+ control: function (provided, _a) {
70
+ var isFocused = _a.isFocused;
71
+ var result = provided;
72
+ result = __assign(__assign({}, result), { minHeight: 40 });
73
+ if (isFocused) {
74
+ return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', boxShadow: "0 0 0 3px " + (error
75
+ ? 'rgba(var(--alert-rgb-components), 0.2)'
76
+ : 'var(--semi-transparent-accent-color)'), '&:hover': {
77
+ borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
78
+ } });
79
+ }
80
+ return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--border-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', '&:hover': {
81
+ borderColor: error ? 'var(--alert-color)' : 'var(--darker-border-color)',
82
+ } });
83
+ },
84
+ multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer' })); },
85
+ menu: function (provided) {
86
+ return __assign(__assign({}, provided), { minWidth: 250 });
87
+ },
88
+ input: function (provided) {
89
+ var result = __assign(__assign({}, provided), { boxShadow: 'none', 'input:focus': {
90
+ boxShadow: 'none',
91
+ } });
92
+ return result;
93
+ },
94
+ multiValue: function (provided) {
95
+ return __assign(__assign({}, provided), { zIndex: 100000, backgroundColor: 'var(--light-color)' });
96
+ },
97
+ multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3 })); },
98
+ };
99
+ }, [isDisabled, error]);
100
+ };
101
+ function SelectInput(_a) {
102
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
103
+ var styles = useStyles(isDisabled, error);
104
+ return (react_1.default.createElement(react_select_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
105
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
106
+ styles: styles })));
107
+ }
108
+ exports.SelectInput = SelectInput;
109
+ function AsyncSelectInput(_a) {
110
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
111
+ var styles = useStyles(isDisabled, error);
112
+ return (react_1.default.createElement(async_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
113
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
114
+ styles: styles })));
115
+ }
116
+ exports.AsyncSelectInput = AsyncSelectInput;
117
+ function CreatableSelectInput(_a) {
118
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
119
+ var styles = useStyles(isDisabled, error);
120
+ return (react_1.default.createElement(creatable_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
121
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
122
+ styles: styles })));
123
+ }
124
+ exports.CreatableSelectInput = CreatableSelectInput;
125
+ function AsyncCreatableSelectInput(_a) {
126
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
127
+ var styles = useStyles(isDisabled, error);
128
+ return (react_1.default.createElement(async_creatable_1.default, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
129
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
130
+ styles: styles })));
131
+ }
132
+ exports.AsyncCreatableSelectInput = AsyncCreatableSelectInput;
133
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- { "TextInput": "_TextInput_6kjb7_1", "TextInput--monospaced": "_TextInput--monospaced_6kjb7_30", "TextInput--disabled": "_TextInput--disabled_6kjb7_34", "TextInput--error": "_TextInput--error_6kjb7_40" }
1
+ { "TextInput": "_TextInput_11m1z_1", "TextInput--monospaced": "_TextInput--monospaced_11m1z_30", "TextInput--disabled": "_TextInput--disabled_11m1z_35", "TextInput--error": "_TextInput--error_11m1z_41" }
package/dist/cjs/index.js CHANGED
@@ -22,4 +22,7 @@ __exportStar(require("./SwitchInput"), exports);
22
22
  __exportStar(require("./TextField"), exports);
23
23
  __exportStar(require("./TextInput"), exports);
24
24
  __exportStar(require("./ContextInspector"), exports);
25
+ __exportStar(require("./Section"), exports);
26
+ __exportStar(require("./SelectInput"), exports);
27
+ __exportStar(require("./SelectField"), exports);
25
28
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2CAAyB;AACzB,2CAAyB;AACzB,+CAA6B;AAC7B,+CAA6B;AAC7B,8CAA4B;AAC5B,yCAAuB;AACvB,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,8CAA4B;AAC5B,qDAAmC;AACnC,4CAA0B;AAC1B,gDAA8B;AAC9B,gDAA8B"}
@@ -1 +1 @@
1
- { "canvas": "_canvas_1kptt_1" }
1
+ { "canvas": "_canvas_jzho9_1" }
@@ -0,0 +1,16 @@
1
+ import { CSSProperties, ReactNode } from 'react';
2
+ declare type SectionProps = {
3
+ title: ReactNode;
4
+ children?: ReactNode;
5
+ highlighted?: boolean;
6
+ collapsible?: {
7
+ isOpen: boolean;
8
+ onToggle: () => void;
9
+ };
10
+ headerClassName?: string;
11
+ titleClassName?: string;
12
+ headerStyle?: CSSProperties;
13
+ titleStyle?: CSSProperties;
14
+ };
15
+ export declare function Section({ title, children, highlighted, collapsible, headerClassName, titleClassName, headerStyle, titleStyle, }: SectionProps): JSX.Element;
16
+ export {};
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import cn from 'classnames';
3
+ import s from './styles.module.css.json';
4
+ export function Section(_a) {
5
+ var _b, _c;
6
+ var title = _a.title, children = _a.children, highlighted = _a.highlighted, collapsible = _a.collapsible, headerClassName = _a.headerClassName, titleClassName = _a.titleClassName, headerStyle = _a.headerStyle, titleStyle = _a.titleStyle;
7
+ return (React.createElement("div", { className: cn(s['Section'], (_b = {}, _b[s['Section--highlighted']] = highlighted, _b)) },
8
+ React.createElement("div", { className: cn(s['Section__header'], headerClassName), style: headerStyle },
9
+ React.createElement("div", { className: cn(s['Section__title'], titleClassName), style: titleStyle },
10
+ collapsible && (React.createElement("button", { type: "button", className: cn(s['Section__arrow'], (_c = {},
11
+ _c[s['Section__arrow--is-open']] = collapsible.isOpen,
12
+ _c)), onClick: collapsible.onToggle })),
13
+ React.createElement("div", { className: s['Section__title__content'] }, title))),
14
+ (!collapsible || collapsible.isOpen) && children));
15
+ }
16
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAazC,MAAM,UAAU,OAAO,CAAC,EAST;;QARb,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,WAAW,iBAAA,EACX,eAAe,qBAAA,EACf,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,UAAU,gBAAA;IAEV,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,YAAI,GAAC,CAAC,CAAC,sBAAsB,CAAC,IAAG,WAAW,MAAG;QAC5E,6BAAK,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,eAAe,CAAC,EAAE,KAAK,EAAE,WAAW;YAC3E,6BACE,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,gBAAgB,CAAC,EAEnB,cAAc,CACf,EACD,KAAK,EAAE,UAAU;gBAEhB,WAAW,IAAI,CACd,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;wBAC/B,GAAC,CAAC,CAAC,yBAAyB,CAAC,IAAG,WAAW,CAAC,MAAM;4BAClD,EACF,OAAO,EAAE,WAAW,CAAC,QAAQ,GAC7B,CACH;gBACD,6BAAK,SAAS,EAAE,CAAC,CAAC,yBAAyB,CAAC,IAAG,KAAK,CAAO,CACvD,CACF;QACL,CAAC,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,IAAI,QAAQ,CAC7C,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1 @@
1
+ { "Section": "_Section_zpctu_1", "Section--highlighted": "_Section--highlighted_zpctu_5", "pageContentSectionHighligh": "_pageContentSectionHighligh_zpctu_1", "Section__header": "_Section__header_zpctu_19", "Section__title": "_Section__title_zpctu_38", "Section__title__content": "_Section__title__content_zpctu_52", "Section__arrow": "_Section__arrow_zpctu_55", "Section__arrow--is-open": "_Section__arrow--is-open_zpctu_82" }
@@ -0,0 +1,60 @@
1
+ import { ReactNode } from 'react';
2
+ import { AsyncCreatableSelectInputProps, AsyncSelectInputProps, CreatableSelectInputProps, FormLabelProps, SelectInputProps } from '..';
3
+ import { GroupBase } from 'react-select';
4
+ declare type SelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
5
+ id: string;
6
+ name: string;
7
+ label: ReactNode;
8
+ hint?: ReactNode;
9
+ placeholder?: string;
10
+ error?: ReactNode;
11
+ required?: boolean;
12
+ formLabelProps?: FormLabelProps;
13
+ value: SelectInputProps<Option, IsMulti, Group>['value'];
14
+ onChange: SelectInputProps<Option, IsMulti, Group>['onChange'];
15
+ selectInputProps?: SelectInputProps<Option, IsMulti, Group>;
16
+ };
17
+ export declare function SelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: SelectFieldProps<Option, IsMulti, Group>): JSX.Element;
18
+ declare type AsyncSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
19
+ id: string;
20
+ name: string;
21
+ label: ReactNode;
22
+ hint?: ReactNode;
23
+ placeholder?: string;
24
+ error?: ReactNode;
25
+ required?: boolean;
26
+ formLabelProps?: FormLabelProps;
27
+ value: AsyncSelectInputProps<Option, IsMulti, Group>['value'];
28
+ onChange: AsyncSelectInputProps<Option, IsMulti, Group>['onChange'];
29
+ selectInputProps?: AsyncSelectInputProps<Option, IsMulti, Group>;
30
+ };
31
+ export declare function AsyncSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: AsyncSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
32
+ declare type CreatableSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
33
+ id: string;
34
+ name: string;
35
+ label: ReactNode;
36
+ hint?: ReactNode;
37
+ placeholder?: string;
38
+ error?: ReactNode;
39
+ required?: boolean;
40
+ formLabelProps?: FormLabelProps;
41
+ value: CreatableSelectInputProps<Option, IsMulti, Group>['value'];
42
+ onChange: CreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
43
+ selectInputProps?: CreatableSelectInputProps<Option, IsMulti, Group>;
44
+ };
45
+ export declare function CreatableSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: CreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
46
+ declare type AsyncCreatableSelectFieldProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
47
+ id: string;
48
+ name: string;
49
+ label: ReactNode;
50
+ hint?: ReactNode;
51
+ placeholder?: string;
52
+ error?: ReactNode;
53
+ required?: boolean;
54
+ formLabelProps?: FormLabelProps;
55
+ value: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['value'];
56
+ onChange: AsyncCreatableSelectInputProps<Option, IsMulti, Group>['onChange'];
57
+ selectInputProps?: AsyncCreatableSelectInputProps<Option, IsMulti, Group>;
58
+ };
59
+ export declare function AsyncCreatableSelectField<Option, IsMulti extends boolean, Group extends GroupBase<Option>>({ id, name, label, hint, error, required, placeholder, formLabelProps, value, onChange, selectInputProps, }: AsyncCreatableSelectFieldProps<Option, IsMulti, Group>): JSX.Element;
60
+ export {};
@@ -0,0 +1,46 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import React from 'react';
13
+ import { AsyncCreatableSelectInput, AsyncSelectInput, CreatableSelectInput, FieldError, FieldHint, FormLabel, SelectInput, } from '..';
14
+ export function SelectField(_a) {
15
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
16
+ return (React.createElement(React.Fragment, null,
17
+ React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
18
+ React.createElement(SelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
19
+ error && React.createElement(FieldError, null, error),
20
+ hint && React.createElement(FieldHint, null, hint)));
21
+ }
22
+ export function AsyncSelectField(_a) {
23
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
24
+ return (React.createElement(React.Fragment, null,
25
+ React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
26
+ React.createElement(AsyncSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
27
+ error && React.createElement(FieldError, null, error),
28
+ hint && React.createElement(FieldHint, null, hint)));
29
+ }
30
+ export function CreatableSelectField(_a) {
31
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
32
+ return (React.createElement(React.Fragment, null,
33
+ React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
34
+ React.createElement(CreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
35
+ error && React.createElement(FieldError, null, error),
36
+ hint && React.createElement(FieldHint, null, hint)));
37
+ }
38
+ export function AsyncCreatableSelectField(_a) {
39
+ var id = _a.id, name = _a.name, label = _a.label, hint = _a.hint, error = _a.error, required = _a.required, placeholder = _a.placeholder, formLabelProps = _a.formLabelProps, value = _a.value, onChange = _a.onChange, selectInputProps = _a.selectInputProps;
40
+ return (React.createElement(React.Fragment, null,
41
+ React.createElement(FormLabel, __assign({}, formLabelProps, { htmlFor: id, required: required, error: !!error }), label),
42
+ React.createElement(AsyncCreatableSelectInput, __assign({}, selectInputProps, { id: id, name: name, value: value, placeholder: placeholder, onChange: onChange, error: !!error })),
43
+ error && React.createElement(FieldError, null, error),
44
+ hint && React.createElement(FieldHint, null, hint)));
45
+ }
46
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectField/index.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,17 @@
1
+ /// <reference types="react" />
2
+ import { Props as RawSelectProps, GroupBase } from 'react-select';
3
+ import { AsyncProps } from 'react-select/async';
4
+ import { AsyncCreatableProps } from 'react-select/async-creatable';
5
+ import { CreatableProps } from 'react-select/creatable';
6
+ declare type ErrorProp = {
7
+ error?: boolean;
8
+ };
9
+ export declare type SelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<RawSelectProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
10
+ export declare function SelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: SelectInputProps<Option, IsMulti, Group>): JSX.Element;
11
+ export declare type AsyncSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
12
+ export declare function AsyncSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: AsyncSelectInputProps<Option, IsMulti, Group>): JSX.Element;
13
+ export declare type CreatableSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<CreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
14
+ export declare function CreatableSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: CreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element;
15
+ export declare type AsyncCreatableSelectInputProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = Omit<AsyncCreatableProps<Option, IsMulti, Group>, 'theme' | 'styles'> & ErrorProp;
16
+ export declare function AsyncCreatableSelectInput<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ isDisabled, error, ...other }: AsyncCreatableSelectInputProps<Option, IsMulti, Group>): JSX.Element;
17
+ export {};
@@ -0,0 +1,104 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import React, { useMemo } from 'react';
24
+ import RawSelect from 'react-select';
25
+ import RawAsyncSelect from 'react-select/async';
26
+ import RawAsyncCreatableSelect from 'react-select/async-creatable';
27
+ import RawCreatableSelect from 'react-select/creatable';
28
+ var themeConfig = function (existing) { return (__assign(__assign({}, existing), { borderRadius: 0, colors: __assign(__assign({}, existing.colors), { primary25: 'var(--semi-transparent-accent-color)',
29
+ // disabled
30
+ neutral10: 'var(--border-color)',
31
+ // normal
32
+ neutral20: 'var(--border-color)',
33
+ // focused
34
+ primary: 'var(--accent-color)',
35
+ // hover
36
+ neutral30: 'var(--darker-border-color)' }) })); };
37
+ var useStyles = function (isDisabled, error) {
38
+ return useMemo(function () {
39
+ return {
40
+ placeholder: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--placeholder-body-color)' })); },
41
+ container: function (provided) {
42
+ return __assign(__assign({}, provided), { fontSize: 'inherit' });
43
+ },
44
+ control: function (provided, _a) {
45
+ var isFocused = _a.isFocused;
46
+ var result = provided;
47
+ result = __assign(__assign({}, result), { minHeight: 40 });
48
+ if (isFocused) {
49
+ return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', boxShadow: "0 0 0 3px " + (error
50
+ ? 'rgba(var(--alert-rgb-components), 0.2)'
51
+ : 'var(--semi-transparent-accent-color)'), '&:hover': {
52
+ borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
53
+ } });
54
+ }
55
+ return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--border-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', '&:hover': {
56
+ borderColor: error ? 'var(--alert-color)' : 'var(--darker-border-color)',
57
+ } });
58
+ },
59
+ multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer' })); },
60
+ menu: function (provided) {
61
+ return __assign(__assign({}, provided), { minWidth: 250 });
62
+ },
63
+ input: function (provided) {
64
+ var result = __assign(__assign({}, provided), { boxShadow: 'none', 'input:focus': {
65
+ boxShadow: 'none',
66
+ } });
67
+ return result;
68
+ },
69
+ multiValue: function (provided) {
70
+ return __assign(__assign({}, provided), { zIndex: 100000, backgroundColor: 'var(--light-color)' });
71
+ },
72
+ multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3 })); },
73
+ };
74
+ }, [isDisabled, error]);
75
+ };
76
+ export function SelectInput(_a) {
77
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
78
+ var styles = useStyles(isDisabled, error);
79
+ return (React.createElement(RawSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
80
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
81
+ styles: styles })));
82
+ }
83
+ export function AsyncSelectInput(_a) {
84
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
85
+ var styles = useStyles(isDisabled, error);
86
+ return (React.createElement(RawAsyncSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
87
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
88
+ styles: styles })));
89
+ }
90
+ export function CreatableSelectInput(_a) {
91
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
92
+ var styles = useStyles(isDisabled, error);
93
+ return (React.createElement(RawCreatableSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
94
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
95
+ styles: styles })));
96
+ }
97
+ export function AsyncCreatableSelectInput(_a) {
98
+ var isDisabled = _a.isDisabled, error = _a.error, other = __rest(_a, ["isDisabled", "error"]);
99
+ var styles = useStyles(isDisabled, error);
100
+ return (React.createElement(RawAsyncCreatableSelect, __assign({}, other, { isDisabled: isDisabled, theme: themeConfig,
101
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
102
+ styles: styles })));
103
+ }
104
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- { "TextInput": "_TextInput_6kjb7_1", "TextInput--monospaced": "_TextInput--monospaced_6kjb7_30", "TextInput--disabled": "_TextInput--disabled_6kjb7_34", "TextInput--error": "_TextInput--error_6kjb7_40" }
1
+ { "TextInput": "_TextInput_11m1z_1", "TextInput--monospaced": "_TextInput--monospaced_11m1z_30", "TextInput--disabled": "_TextInput--disabled_11m1z_35", "TextInput--error": "_TextInput--error_11m1z_41" }
@@ -10,3 +10,6 @@ export * from './SwitchInput';
10
10
  export * from './TextField';
11
11
  export * from './TextInput';
12
12
  export * from './ContextInspector';
13
+ export * from './Section';
14
+ export * from './SelectInput';
15
+ export * from './SelectField';
package/dist/esm/index.js CHANGED
@@ -10,4 +10,7 @@ export * from './SwitchInput';
10
10
  export * from './TextField';
11
11
  export * from './TextInput';
12
12
  export * from './ContextInspector';
13
+ export * from './Section';
14
+ export * from './SelectInput';
15
+ export * from './SelectField';
13
16
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { CSSProperties, ReactNode } from 'react';
2
+ declare type SectionProps = {
3
+ title: ReactNode;
4
+ children?: ReactNode;
5
+ highlighted?: boolean;
6
+ collapsible?: {
7
+ isOpen: boolean;
8
+ onToggle: () => void;
9
+ };
10
+ headerClassName?: string;
11
+ titleClassName?: string;
12
+ headerStyle?: CSSProperties;
13
+ titleStyle?: CSSProperties;
14
+ };
15
+ export declare function Section({ title, children, highlighted, collapsible, headerClassName, titleClassName, headerStyle, titleStyle, }: SectionProps): JSX.Element;
16
+ export {};