@peculiar/react-components 1.8.4 → 1.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/SegmentedControls/index.js +8 -0
- package/dist/cjs/SegmentedControls/index.js.map +1 -0
- package/dist/cjs/SegmentedControls/segmented_control.js +149 -0
- package/dist/cjs/SegmentedControls/segmented_control.js.map +1 -0
- package/dist/cjs/SegmentedControls/segmented_controls.js +82 -0
- package/dist/cjs/SegmentedControls/segmented_controls.js.map +1 -0
- package/dist/cjs/Tabs/tab.js +12 -22
- package/dist/cjs/Tabs/tab.js.map +1 -1
- package/dist/cjs/Tabs/tabs.js +0 -4
- package/dist/cjs/Tabs/tabs.js.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/SegmentedControls/index.js +3 -0
- package/dist/esm/SegmentedControls/index.js.map +1 -0
- package/dist/esm/SegmentedControls/segmented_control.js +110 -0
- package/dist/esm/SegmentedControls/segmented_control.js.map +1 -0
- package/dist/esm/SegmentedControls/segmented_controls.js +43 -0
- package/dist/esm/SegmentedControls/segmented_controls.js.map +1 -0
- package/dist/esm/Tabs/tab.js +12 -22
- package/dist/esm/Tabs/tab.js.map +1 -1
- package/dist/esm/Tabs/tabs.js +0 -4
- package/dist/esm/Tabs/tabs.js.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esnext/SegmentedControls/index.js +3 -0
- package/dist/esnext/SegmentedControls/index.js.map +1 -0
- package/dist/esnext/SegmentedControls/segmented_control.js +104 -0
- package/dist/esnext/SegmentedControls/segmented_control.js.map +1 -0
- package/dist/esnext/SegmentedControls/segmented_controls.js +32 -0
- package/dist/esnext/SegmentedControls/segmented_controls.js.map +1 -0
- package/dist/esnext/Tabs/tab.js +11 -21
- package/dist/esnext/Tabs/tab.js.map +1 -1
- package/dist/esnext/Tabs/tabs.js +0 -4
- package/dist/esnext/Tabs/tabs.js.map +1 -1
- package/dist/esnext/index.js +1 -0
- package/dist/esnext/index.js.map +1 -1
- package/dist/types/SegmentedControls/index.d.ts +3 -0
- package/dist/types/SegmentedControls/segmented_control.d.ts +36 -0
- package/dist/types/SegmentedControls/segmented_controls.d.ts +28 -0
- package/dist/types/Tabs/tab.d.ts +0 -5
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SegmentedControl = exports.SegmentedControls = void 0;
|
|
4
|
+
var segmented_controls_1 = require("./segmented_controls");
|
|
5
|
+
Object.defineProperty(exports, "SegmentedControls", { enumerable: true, get: function () { return segmented_controls_1.SegmentedControls; } });
|
|
6
|
+
var segmented_control_1 = require("./segmented_control");
|
|
7
|
+
Object.defineProperty(exports, "SegmentedControl", { enumerable: true, get: function () { return segmented_control_1.SegmentedControl; } });
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SegmentedControls/index.ts"],"names":[],"mappings":";;;AAAA,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA;AAC1B,yDAAuD;AAA9C,qHAAA,gBAAgB,OAAA"}
|
|
@@ -0,0 +1,149 @@
|
|
|
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
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
47
|
+
var t = {};
|
|
48
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
49
|
+
t[p] = s[p];
|
|
50
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
51
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
52
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
53
|
+
t[p[i]] = s[p[i]];
|
|
54
|
+
}
|
|
55
|
+
return t;
|
|
56
|
+
};
|
|
57
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
58
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
59
|
+
};
|
|
60
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
61
|
+
exports.SegmentedControl = void 0;
|
|
62
|
+
var React = __importStar(require("react"));
|
|
63
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
64
|
+
var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
|
|
65
|
+
var Typography_1 = require("../Typography");
|
|
66
|
+
/**
|
|
67
|
+
*
|
|
68
|
+
*/
|
|
69
|
+
/**
|
|
70
|
+
* Styles.
|
|
71
|
+
*/
|
|
72
|
+
var SegmentedControlRoot = (0, styled_1.default)('button', {
|
|
73
|
+
shouldForwardProp: is_prop_valid_1.default,
|
|
74
|
+
})(function (props) { return (__assign({ fontFamily: 'inherit', outline: 'none', cursor: 'pointer', boxSizing: 'border-box', border: '1px solid transparent', minHeight: 'calc(var(--pv-size-base) * 4 + 2px)', height: '100%', padding: '0 calc(var(--pv-size-base) * 2)', borderRadius: 'calc(var(--pv-size-base) * 4)', transition: 'background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }, (props.selected && ({
|
|
75
|
+
boxShadow: 'var(--pv-shadow-light-soft)',
|
|
76
|
+
pointerEvents: 'none',
|
|
77
|
+
})))); }, function (props) {
|
|
78
|
+
var isDark = props.theme.mode === 'dark';
|
|
79
|
+
var color = 'var(--pv-color-gray-10)';
|
|
80
|
+
var colorDisabled = isDark
|
|
81
|
+
? 'var(--pv-color-gray-5)'
|
|
82
|
+
: 'var(--pv-color-gray-8)';
|
|
83
|
+
var backgroundColor = 'transparent';
|
|
84
|
+
var backgroundColorHover = 'var(--pv-color-gray-5)';
|
|
85
|
+
var backgroundColorActive = 'var(--pv-color-gray-6)';
|
|
86
|
+
var borderColor = 'transparent';
|
|
87
|
+
var borderColorHover = 'var(--pv-color-gray-5)';
|
|
88
|
+
var borderColorActive = 'var(--pv-color-gray-6)';
|
|
89
|
+
if (isDark) {
|
|
90
|
+
backgroundColorHover = 'var(--pv-color-gray-4)';
|
|
91
|
+
backgroundColorActive = 'var(--pv-color-gray-5)';
|
|
92
|
+
borderColorHover = 'var(--pv-color-gray-4)';
|
|
93
|
+
borderColorActive = 'var(--pv-color-gray-5)';
|
|
94
|
+
color = 'var(--pv-color-gray-8)';
|
|
95
|
+
}
|
|
96
|
+
if (props.selected) {
|
|
97
|
+
if (isDark) {
|
|
98
|
+
backgroundColor = 'var(--pv-color-gray-6)';
|
|
99
|
+
color = 'var(--pv-color-white)';
|
|
100
|
+
borderColor = 'var(--pv-color-gray-5)';
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
backgroundColor = 'var(--pv-color-white)';
|
|
104
|
+
color = 'var(--pv-color-black)';
|
|
105
|
+
borderColor = 'var(--pv-color-gray-3)';
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
return {
|
|
109
|
+
backgroundColor: backgroundColor,
|
|
110
|
+
borderColor: borderColor,
|
|
111
|
+
'&:disabled': {
|
|
112
|
+
cursor: 'not-allowed',
|
|
113
|
+
color: colorDisabled,
|
|
114
|
+
},
|
|
115
|
+
'&:not(:disabled)': {
|
|
116
|
+
color: color,
|
|
117
|
+
'&:hover': {
|
|
118
|
+
backgroundColor: backgroundColorHover,
|
|
119
|
+
borderColor: borderColorHover,
|
|
120
|
+
},
|
|
121
|
+
'&:focus-visible': {
|
|
122
|
+
borderColor: 'var(--pv-color-secondary)',
|
|
123
|
+
},
|
|
124
|
+
'&:active': {
|
|
125
|
+
backgroundColor: backgroundColorActive,
|
|
126
|
+
borderColor: borderColorActive,
|
|
127
|
+
},
|
|
128
|
+
},
|
|
129
|
+
};
|
|
130
|
+
});
|
|
131
|
+
/**
|
|
132
|
+
*
|
|
133
|
+
*/
|
|
134
|
+
exports.SegmentedControl = React.forwardRef(function (props, ref) {
|
|
135
|
+
var component = props.component, id = props.id, _a = props.disabled, disabled = _a === void 0 ? false : _a,
|
|
136
|
+
// @ts-expect-error: Property `selected` does not exist
|
|
137
|
+
// on type 'TSegmentedControlProps<"button">'
|
|
138
|
+
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["component", "id", "disabled", "selected", "children", "onChange"]);
|
|
139
|
+
var Component = component || 'button';
|
|
140
|
+
var handleClick = function (event) {
|
|
141
|
+
if (!selected && onChange) {
|
|
142
|
+
onChange(event, id);
|
|
143
|
+
}
|
|
144
|
+
};
|
|
145
|
+
return (React.createElement(SegmentedControlRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick }, other),
|
|
146
|
+
React.createElement(Typography_1.Typography, { variant: "btn2", component: "span", color: "inherit" }, children)));
|
|
147
|
+
});
|
|
148
|
+
exports.SegmentedControl.displayName = 'SegmentedControl';
|
|
149
|
+
//# sourceMappingURL=segmented_control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_control.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_control.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,82 @@
|
|
|
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
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
30
|
+
var ownKeys = function(o) {
|
|
31
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
32
|
+
var ar = [];
|
|
33
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
34
|
+
return ar;
|
|
35
|
+
};
|
|
36
|
+
return ownKeys(o);
|
|
37
|
+
};
|
|
38
|
+
return function (mod) {
|
|
39
|
+
if (mod && mod.__esModule) return mod;
|
|
40
|
+
var result = {};
|
|
41
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
42
|
+
__setModuleDefault(result, mod);
|
|
43
|
+
return result;
|
|
44
|
+
};
|
|
45
|
+
})();
|
|
46
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
47
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
48
|
+
};
|
|
49
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
50
|
+
exports.SegmentedControls = void 0;
|
|
51
|
+
var React = __importStar(require("react"));
|
|
52
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
53
|
+
var Tabs_1 = require("../Tabs");
|
|
54
|
+
;
|
|
55
|
+
/**
|
|
56
|
+
*
|
|
57
|
+
*/
|
|
58
|
+
/**
|
|
59
|
+
* Styles.
|
|
60
|
+
*/
|
|
61
|
+
var SegmentedControlsRoot = (0, styled_1.default)(Tabs_1.Tabs)(function (props) {
|
|
62
|
+
var isDark = props.theme.mode === 'dark';
|
|
63
|
+
var backgroundColor = 'var(--pv-color-gray-4)';
|
|
64
|
+
if (isDark) {
|
|
65
|
+
backgroundColor = 'var(--pv-color-gray-3)';
|
|
66
|
+
}
|
|
67
|
+
return {
|
|
68
|
+
whiteSpace: 'nowrap',
|
|
69
|
+
overflowX: 'auto',
|
|
70
|
+
backgroundColor: backgroundColor,
|
|
71
|
+
borderRadius: 'calc(var(--pv-size-base) * 4)',
|
|
72
|
+
display: 'inline-flex',
|
|
73
|
+
padding: 'calc(var(--pv-size-base) - 1px)',
|
|
74
|
+
};
|
|
75
|
+
});
|
|
76
|
+
/**
|
|
77
|
+
*
|
|
78
|
+
*/
|
|
79
|
+
// eslint-disable-next-line @stylistic/max-len
|
|
80
|
+
exports.SegmentedControls = React.forwardRef(function (props, ref) { return (React.createElement(SegmentedControlsRoot, __assign({ ref: ref }, (props)), props.children)); });
|
|
81
|
+
exports.SegmentedControls.displayName = 'SegmentedControls';
|
|
82
|
+
//# sourceMappingURL=segmented_controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_controls.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_controls.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,2DAAqC;AACrC,gCAA+B;AAuB9B,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,qBAAqB,GAAG,IAAA,gBAAM,EAAC,WAAI,CAAC,CAAC,UAAC,KAAK;IAC/C,IAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IAC3C,IAAI,eAAe,GAAG,wBAAwB,CAAC;IAE/C,IAAI,MAAM,EAAE,CAAC;QACX,eAAe,GAAG,wBAAwB,CAAC;IAC7C,CAAC;IAED,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM;QACjB,eAAe,iBAAA;QACf,YAAY,EAAE,+BAA+B;QAC7C,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,iCAAiC;KAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH;;GAEG;AAEH,8CAA8C;AACjC,QAAA,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAA0C,UAAC,KAAK,EAAE,GAAG,IAAK,OAAA,CACzG,oBAAC,qBAAqB,aACpB,GAAG,EAAE,GAAG,IACJ,CAAC,KAAK,CAAC,GAEV,KAAK,CAAC,QAAQ,CACO,CACzB,EAP0G,CAO1G,CAAC,CAAC;AAEH,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}
|
package/dist/cjs/Tabs/tab.js
CHANGED
|
@@ -70,35 +70,25 @@ var Typography_1 = require("../Typography");
|
|
|
70
70
|
* Styles.
|
|
71
71
|
*/
|
|
72
72
|
var TabRoot = (0, styled_1.default)('button', {
|
|
73
|
-
shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop)
|
|
73
|
+
shouldForwardProp: function (prop) { return (0, is_prop_valid_1.default)(prop); },
|
|
74
74
|
})(function (props) { return (__assign({ fontFamily: 'inherit', outline: 'none', cursor: 'pointer', boxSizing: 'border-box', border: 0, borderBottom: '3px solid transparent', minHeight: 'calc(var(--pv-size-base) * 12)', height: '100%', padding: '0 calc(var(--pv-size-base) * 3)', backgroundColor: 'transparent', transition: 'background-color 200ms, color 200ms, border-color 200ms', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }, (props.selected && ({
|
|
75
75
|
borderColor: 'var(--pv-color-secondary)',
|
|
76
76
|
})))); }, function (props) {
|
|
77
77
|
var isDark = props.theme.mode === 'dark';
|
|
78
|
-
var
|
|
79
|
-
var color;
|
|
80
|
-
var
|
|
81
|
-
? 'var(--pv-color-gray-5)'
|
|
82
|
-
: 'var(--pv-color-gray-7)';
|
|
83
|
-
var backgroundColorHove = 'var(--pv-color-secondary-tint-5)';
|
|
78
|
+
var color = 'var(--pv-color-gray-10)';
|
|
79
|
+
var colorDisabled = 'var(--pv-color-gray-7)';
|
|
80
|
+
var backgroundColorHover = 'var(--pv-color-secondary-tint-5)';
|
|
84
81
|
var backgroundColorFocus = 'var(--pv-color-secondary-tint-4)';
|
|
85
82
|
var backgroundColorActive = 'var(--pv-color-secondary-tint-3)';
|
|
86
|
-
if (isWhite) {
|
|
87
|
-
color = 'var(--pv-color-gray-9)';
|
|
88
|
-
}
|
|
89
|
-
else if (isDark) {
|
|
90
|
-
color = 'var(--pv-color-gray-7)';
|
|
91
|
-
}
|
|
92
|
-
else {
|
|
93
|
-
color = 'var(--pv-color-gray-10)';
|
|
94
|
-
}
|
|
95
83
|
if (isDark) {
|
|
96
|
-
|
|
84
|
+
color = 'var(--pv-color-gray-7)';
|
|
85
|
+
colorDisabled = 'var(--pv-color-gray-5)';
|
|
86
|
+
backgroundColorHover = 'var(--pv-color-secondary-shade-4)';
|
|
97
87
|
backgroundColorFocus = 'var(--pv-color-secondary-shade-3)';
|
|
98
88
|
backgroundColorActive = 'var(--pv-color-secondary-shade-2)';
|
|
99
89
|
}
|
|
100
90
|
if (props.selected) {
|
|
101
|
-
if (isDark
|
|
91
|
+
if (isDark) {
|
|
102
92
|
color = 'var(--pv-color-white)';
|
|
103
93
|
}
|
|
104
94
|
else {
|
|
@@ -113,7 +103,7 @@ var TabRoot = (0, styled_1.default)('button', {
|
|
|
113
103
|
'&:not(:disabled)': {
|
|
114
104
|
color: color,
|
|
115
105
|
'&:hover': {
|
|
116
|
-
backgroundColor:
|
|
106
|
+
backgroundColor: backgroundColorHover,
|
|
117
107
|
},
|
|
118
108
|
'&:focus-visible': {
|
|
119
109
|
backgroundColor: backgroundColorFocus,
|
|
@@ -128,16 +118,16 @@ var TabRoot = (0, styled_1.default)('button', {
|
|
|
128
118
|
*
|
|
129
119
|
*/
|
|
130
120
|
exports.Tab = React.forwardRef(function (props, ref) {
|
|
131
|
-
var
|
|
121
|
+
var component = props.component, id = props.id, _a = props.disabled, disabled = _a === void 0 ? false : _a,
|
|
132
122
|
// @ts-expect-error: Property `selected` does not exist on type 'TabProps<"button">'
|
|
133
|
-
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["
|
|
123
|
+
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["component", "id", "disabled", "selected", "children", "onChange"]);
|
|
134
124
|
var Component = component || 'button';
|
|
135
125
|
var handleClick = function (event) {
|
|
136
126
|
if (!selected && onChange) {
|
|
137
127
|
onChange(event, id);
|
|
138
128
|
}
|
|
139
129
|
};
|
|
140
|
-
return (React.createElement(TabRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id,
|
|
130
|
+
return (React.createElement(TabRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick }, other),
|
|
141
131
|
React.createElement(Typography_1.Typography, { variant: "s2", component: "span", color: "inherit" }, children)));
|
|
142
132
|
});
|
|
143
133
|
exports.Tab.displayName = 'Tab';
|
package/dist/cjs/Tabs/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,2DAAqC;AACrC,yEAAiD;
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/Tabs/tabs.js
CHANGED
|
@@ -81,10 +81,6 @@ exports.Tabs = React.forwardRef(function (props, ref) {
|
|
|
81
81
|
if (!React.isValidElement(child)) {
|
|
82
82
|
return null;
|
|
83
83
|
}
|
|
84
|
-
if (child.type.displayName !== 'Tab') {
|
|
85
|
-
console.error('Peculiar-UI: The Tabs component doesn\'t accept a Element as not a Tab.');
|
|
86
|
-
return null;
|
|
87
|
-
}
|
|
88
84
|
var childValue = child.props.id;
|
|
89
85
|
var selected = childValue === value;
|
|
90
86
|
return React.cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,2DAAqC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEU,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAExE,IAAU,YAAY,GAIpB,KAAK,SAJe,EACtB,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EALH,iCAKL,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAAgD;QAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA+B;AAC/B,2DAAqC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,IAAA,gBAAM,EAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEU,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAExE,IAAU,YAAY,GAIpB,KAAK,SAJe,EACtB,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EALH,iCAKL,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAAgD;QAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,IAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,aACP,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,IACV,KAAK,GAER,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -53,4 +53,5 @@ __exportStar(require("./styles"), exports);
|
|
|
53
53
|
__exportStar(require("./hooks"), exports);
|
|
54
54
|
__exportStar(require("./OverridableComponent"), exports);
|
|
55
55
|
__exportStar(require("./Flex"), exports);
|
|
56
|
+
__exportStar(require("./SegmentedControls"), exports);
|
|
56
57
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,iDAA+B;AAC/B,2CAAyB;AACzB,wCAAsB;AACtB,2CAAyB;AACzB,6CAA2B;AAC3B,yCAAuB;AACvB,qDAAmC;AACnC,6CAA2B;AAC3B,2CAAyB;AACzB,2CAAyB;AACzB,wCAAsB;AACtB,yCAAuB;AACvB,+CAA6B;AAC7B,0CAAwB;AACxB,0CAAwB;AACxB,mDAAiC;AACjC,yCAAuB;AACvB,6CAA2B;AAC3B,2CAAyB;AACzB,4CAA0B;AAC1B,2CAAyB;AACzB,0CAAwB;AACxB,iDAA+B;AAC/B,6CAA2B;AAC3B,2CAAyB;AACzB,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,yCAAuB;AACvB,kDAAgC;AAChC,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,+CAA6B;AAC7B,2CAAyB;AACzB,0CAAwB;AACxB,yDAAuC;AACvC,yCAAuB"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,iDAA+B;AAC/B,2CAAyB;AACzB,wCAAsB;AACtB,2CAAyB;AACzB,6CAA2B;AAC3B,yCAAuB;AACvB,qDAAmC;AACnC,6CAA2B;AAC3B,2CAAyB;AACzB,2CAAyB;AACzB,wCAAsB;AACtB,yCAAuB;AACvB,+CAA6B;AAC7B,0CAAwB;AACxB,0CAAwB;AACxB,mDAAiC;AACjC,yCAAuB;AACvB,6CAA2B;AAC3B,2CAAyB;AACzB,4CAA0B;AAC1B,2CAAyB;AACzB,0CAAwB;AACxB,iDAA+B;AAC/B,6CAA2B;AAC3B,2CAAyB;AACzB,0CAAwB;AACxB,2CAAyB;AACzB,2CAAyB;AACzB,yCAAuB;AACvB,kDAAgC;AAChC,8CAA4B;AAC5B,0CAAwB;AACxB,4CAA0B;AAC1B,+CAA6B;AAC7B,2CAAyB;AACzB,0CAAwB;AACxB,yDAAuC;AACvC,yCAAuB;AACvB,sDAAoC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SegmentedControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
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 * as React from 'react';
|
|
24
|
+
import styled from '@emotion/styled';
|
|
25
|
+
import isPropValid from '@emotion/is-prop-valid';
|
|
26
|
+
import { Typography } from '../Typography';
|
|
27
|
+
/**
|
|
28
|
+
*
|
|
29
|
+
*/
|
|
30
|
+
/**
|
|
31
|
+
* Styles.
|
|
32
|
+
*/
|
|
33
|
+
var SegmentedControlRoot = styled('button', {
|
|
34
|
+
shouldForwardProp: isPropValid,
|
|
35
|
+
})(function (props) { return (__assign({ fontFamily: 'inherit', outline: 'none', cursor: 'pointer', boxSizing: 'border-box', border: '1px solid transparent', minHeight: 'calc(var(--pv-size-base) * 4 + 2px)', height: '100%', padding: '0 calc(var(--pv-size-base) * 2)', borderRadius: 'calc(var(--pv-size-base) * 4)', transition: 'background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }, (props.selected && ({
|
|
36
|
+
boxShadow: 'var(--pv-shadow-light-soft)',
|
|
37
|
+
pointerEvents: 'none',
|
|
38
|
+
})))); }, function (props) {
|
|
39
|
+
var isDark = props.theme.mode === 'dark';
|
|
40
|
+
var color = 'var(--pv-color-gray-10)';
|
|
41
|
+
var colorDisabled = isDark
|
|
42
|
+
? 'var(--pv-color-gray-5)'
|
|
43
|
+
: 'var(--pv-color-gray-8)';
|
|
44
|
+
var backgroundColor = 'transparent';
|
|
45
|
+
var backgroundColorHover = 'var(--pv-color-gray-5)';
|
|
46
|
+
var backgroundColorActive = 'var(--pv-color-gray-6)';
|
|
47
|
+
var borderColor = 'transparent';
|
|
48
|
+
var borderColorHover = 'var(--pv-color-gray-5)';
|
|
49
|
+
var borderColorActive = 'var(--pv-color-gray-6)';
|
|
50
|
+
if (isDark) {
|
|
51
|
+
backgroundColorHover = 'var(--pv-color-gray-4)';
|
|
52
|
+
backgroundColorActive = 'var(--pv-color-gray-5)';
|
|
53
|
+
borderColorHover = 'var(--pv-color-gray-4)';
|
|
54
|
+
borderColorActive = 'var(--pv-color-gray-5)';
|
|
55
|
+
color = 'var(--pv-color-gray-8)';
|
|
56
|
+
}
|
|
57
|
+
if (props.selected) {
|
|
58
|
+
if (isDark) {
|
|
59
|
+
backgroundColor = 'var(--pv-color-gray-6)';
|
|
60
|
+
color = 'var(--pv-color-white)';
|
|
61
|
+
borderColor = 'var(--pv-color-gray-5)';
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
backgroundColor = 'var(--pv-color-white)';
|
|
65
|
+
color = 'var(--pv-color-black)';
|
|
66
|
+
borderColor = 'var(--pv-color-gray-3)';
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
return {
|
|
70
|
+
backgroundColor: backgroundColor,
|
|
71
|
+
borderColor: borderColor,
|
|
72
|
+
'&:disabled': {
|
|
73
|
+
cursor: 'not-allowed',
|
|
74
|
+
color: colorDisabled,
|
|
75
|
+
},
|
|
76
|
+
'&:not(:disabled)': {
|
|
77
|
+
color: color,
|
|
78
|
+
'&:hover': {
|
|
79
|
+
backgroundColor: backgroundColorHover,
|
|
80
|
+
borderColor: borderColorHover,
|
|
81
|
+
},
|
|
82
|
+
'&:focus-visible': {
|
|
83
|
+
borderColor: 'var(--pv-color-secondary)',
|
|
84
|
+
},
|
|
85
|
+
'&:active': {
|
|
86
|
+
backgroundColor: backgroundColorActive,
|
|
87
|
+
borderColor: borderColorActive,
|
|
88
|
+
},
|
|
89
|
+
},
|
|
90
|
+
};
|
|
91
|
+
});
|
|
92
|
+
/**
|
|
93
|
+
*
|
|
94
|
+
*/
|
|
95
|
+
export var SegmentedControl = React.forwardRef(function (props, ref) {
|
|
96
|
+
var component = props.component, id = props.id, _a = props.disabled, disabled = _a === void 0 ? false : _a,
|
|
97
|
+
// @ts-expect-error: Property `selected` does not exist
|
|
98
|
+
// on type 'TSegmentedControlProps<"button">'
|
|
99
|
+
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["component", "id", "disabled", "selected", "children", "onChange"]);
|
|
100
|
+
var Component = component || 'button';
|
|
101
|
+
var handleClick = function (event) {
|
|
102
|
+
if (!selected && onChange) {
|
|
103
|
+
onChange(event, id);
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
return (React.createElement(SegmentedControlRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick }, other),
|
|
107
|
+
React.createElement(Typography, { variant: "btn2", component: "span", color: "inherit" }, children)));
|
|
108
|
+
});
|
|
109
|
+
SegmentedControl.displayName = 'SegmentedControl';
|
|
110
|
+
//# sourceMappingURL=segmented_control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_control.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_control.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,43 @@
|
|
|
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 * as React from 'react';
|
|
13
|
+
import styled from '@emotion/styled';
|
|
14
|
+
import { Tabs } from '../Tabs';
|
|
15
|
+
;
|
|
16
|
+
/**
|
|
17
|
+
*
|
|
18
|
+
*/
|
|
19
|
+
/**
|
|
20
|
+
* Styles.
|
|
21
|
+
*/
|
|
22
|
+
var SegmentedControlsRoot = styled(Tabs)(function (props) {
|
|
23
|
+
var isDark = props.theme.mode === 'dark';
|
|
24
|
+
var backgroundColor = 'var(--pv-color-gray-4)';
|
|
25
|
+
if (isDark) {
|
|
26
|
+
backgroundColor = 'var(--pv-color-gray-3)';
|
|
27
|
+
}
|
|
28
|
+
return {
|
|
29
|
+
whiteSpace: 'nowrap',
|
|
30
|
+
overflowX: 'auto',
|
|
31
|
+
backgroundColor: backgroundColor,
|
|
32
|
+
borderRadius: 'calc(var(--pv-size-base) * 4)',
|
|
33
|
+
display: 'inline-flex',
|
|
34
|
+
padding: 'calc(var(--pv-size-base) - 1px)',
|
|
35
|
+
};
|
|
36
|
+
});
|
|
37
|
+
/**
|
|
38
|
+
*
|
|
39
|
+
*/
|
|
40
|
+
// eslint-disable-next-line @stylistic/max-len
|
|
41
|
+
export var SegmentedControls = React.forwardRef(function (props, ref) { return (React.createElement(SegmentedControlsRoot, __assign({ ref: ref }, (props)), props.children)); });
|
|
42
|
+
SegmentedControls.displayName = 'SegmentedControls';
|
|
43
|
+
//# sourceMappingURL=segmented_controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_controls.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_controls.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAuB9B,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,UAAC,KAAK;IAC/C,IAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IAC3C,IAAI,eAAe,GAAG,wBAAwB,CAAC;IAE/C,IAAI,MAAM,EAAE,CAAC;QACX,eAAe,GAAG,wBAAwB,CAAC;IAC7C,CAAC;IAED,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM;QACjB,eAAe,iBAAA;QACf,YAAY,EAAE,+BAA+B;QAC7C,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,iCAAiC;KAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH;;GAEG;AAEH,8CAA8C;AAC9C,MAAM,CAAC,IAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAA0C,UAAC,KAAK,EAAE,GAAG,IAAK,OAAA,CACzG,oBAAC,qBAAqB,aACpB,GAAG,EAAE,GAAG,IACJ,CAAC,KAAK,CAAC,GAEV,KAAK,CAAC,QAAQ,CACO,CACzB,EAP0G,CAO1G,CAAC,CAAC;AAEH,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}
|
package/dist/esm/Tabs/tab.js
CHANGED
|
@@ -31,35 +31,25 @@ import { Typography } from '../Typography';
|
|
|
31
31
|
* Styles.
|
|
32
32
|
*/
|
|
33
33
|
var TabRoot = styled('button', {
|
|
34
|
-
shouldForwardProp: function (prop) { return isPropValid(prop)
|
|
34
|
+
shouldForwardProp: function (prop) { return isPropValid(prop); },
|
|
35
35
|
})(function (props) { return (__assign({ fontFamily: 'inherit', outline: 'none', cursor: 'pointer', boxSizing: 'border-box', border: 0, borderBottom: '3px solid transparent', minHeight: 'calc(var(--pv-size-base) * 12)', height: '100%', padding: '0 calc(var(--pv-size-base) * 3)', backgroundColor: 'transparent', transition: 'background-color 200ms, color 200ms, border-color 200ms', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', textDecoration: 'none' }, (props.selected && ({
|
|
36
36
|
borderColor: 'var(--pv-color-secondary)',
|
|
37
37
|
})))); }, function (props) {
|
|
38
38
|
var isDark = props.theme.mode === 'dark';
|
|
39
|
-
var
|
|
40
|
-
var color;
|
|
41
|
-
var
|
|
42
|
-
? 'var(--pv-color-gray-5)'
|
|
43
|
-
: 'var(--pv-color-gray-7)';
|
|
44
|
-
var backgroundColorHove = 'var(--pv-color-secondary-tint-5)';
|
|
39
|
+
var color = 'var(--pv-color-gray-10)';
|
|
40
|
+
var colorDisabled = 'var(--pv-color-gray-7)';
|
|
41
|
+
var backgroundColorHover = 'var(--pv-color-secondary-tint-5)';
|
|
45
42
|
var backgroundColorFocus = 'var(--pv-color-secondary-tint-4)';
|
|
46
43
|
var backgroundColorActive = 'var(--pv-color-secondary-tint-3)';
|
|
47
|
-
if (isWhite) {
|
|
48
|
-
color = 'var(--pv-color-gray-9)';
|
|
49
|
-
}
|
|
50
|
-
else if (isDark) {
|
|
51
|
-
color = 'var(--pv-color-gray-7)';
|
|
52
|
-
}
|
|
53
|
-
else {
|
|
54
|
-
color = 'var(--pv-color-gray-10)';
|
|
55
|
-
}
|
|
56
44
|
if (isDark) {
|
|
57
|
-
|
|
45
|
+
color = 'var(--pv-color-gray-7)';
|
|
46
|
+
colorDisabled = 'var(--pv-color-gray-5)';
|
|
47
|
+
backgroundColorHover = 'var(--pv-color-secondary-shade-4)';
|
|
58
48
|
backgroundColorFocus = 'var(--pv-color-secondary-shade-3)';
|
|
59
49
|
backgroundColorActive = 'var(--pv-color-secondary-shade-2)';
|
|
60
50
|
}
|
|
61
51
|
if (props.selected) {
|
|
62
|
-
if (isDark
|
|
52
|
+
if (isDark) {
|
|
63
53
|
color = 'var(--pv-color-white)';
|
|
64
54
|
}
|
|
65
55
|
else {
|
|
@@ -74,7 +64,7 @@ var TabRoot = styled('button', {
|
|
|
74
64
|
'&:not(:disabled)': {
|
|
75
65
|
color: color,
|
|
76
66
|
'&:hover': {
|
|
77
|
-
backgroundColor:
|
|
67
|
+
backgroundColor: backgroundColorHover,
|
|
78
68
|
},
|
|
79
69
|
'&:focus-visible': {
|
|
80
70
|
backgroundColor: backgroundColorFocus,
|
|
@@ -89,16 +79,16 @@ var TabRoot = styled('button', {
|
|
|
89
79
|
*
|
|
90
80
|
*/
|
|
91
81
|
export var Tab = React.forwardRef(function (props, ref) {
|
|
92
|
-
var
|
|
82
|
+
var component = props.component, id = props.id, _a = props.disabled, disabled = _a === void 0 ? false : _a,
|
|
93
83
|
// @ts-expect-error: Property `selected` does not exist on type 'TabProps<"button">'
|
|
94
|
-
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["
|
|
84
|
+
selected = props.selected, children = props.children, onChange = props.onChange, other = __rest(props, ["component", "id", "disabled", "selected", "children", "onChange"]);
|
|
95
85
|
var Component = component || 'button';
|
|
96
86
|
var handleClick = function (event) {
|
|
97
87
|
if (!selected && onChange) {
|
|
98
88
|
onChange(event, id);
|
|
99
89
|
}
|
|
100
90
|
};
|
|
101
|
-
return (React.createElement(TabRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id,
|
|
91
|
+
return (React.createElement(TabRoot, __assign({ as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick }, other),
|
|
102
92
|
React.createElement(Typography, { variant: "s2", component: "span", color: "inherit" }, children)));
|
|
103
93
|
});
|
|
104
94
|
Tab.displayName = 'Tab';
|
package/dist/esm/Tabs/tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/Tabs/tabs.js
CHANGED
|
@@ -42,10 +42,6 @@ export var Tabs = React.forwardRef(function (props, ref) {
|
|
|
42
42
|
if (!React.isValidElement(child)) {
|
|
43
43
|
return null;
|
|
44
44
|
}
|
|
45
|
-
if (child.type.displayName !== 'Tab') {
|
|
46
|
-
console.error('Peculiar-UI: The Tabs component doesn\'t accept a Element as not a Tab.');
|
|
47
|
-
return null;
|
|
48
|
-
}
|
|
49
45
|
var childValue = child.props.id;
|
|
50
46
|
var selected = childValue === value;
|
|
51
47
|
return React.cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAExE,IAAU,YAAY,GAIpB,KAAK,SAJe,EACtB,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EALH,iCAKL,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAAgD;QAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,IAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,UAAC,KAAK,EAAE,GAAG;IAExE,IAAU,YAAY,GAIpB,KAAK,SAJe,EACtB,KAAK,GAGH,KAAK,MAHF,EACL,QAAQ,GAEN,KAAK,SAFC,EACL,KAAK,UACN,KAAK,EALH,iCAKL,CADS,CACA;IAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,UAAC,KAAgD;QAC/C,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,IAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,aACP,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,IACV,KAAK,GAER,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
package/dist/esm/index.js
CHANGED
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SegmentedControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import isPropValid from '@emotion/is-prop-valid';
|
|
4
|
+
import { Typography } from '../Typography';
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Styles.
|
|
10
|
+
*/
|
|
11
|
+
const SegmentedControlRoot = styled('button', {
|
|
12
|
+
shouldForwardProp: isPropValid,
|
|
13
|
+
})((props) => ({
|
|
14
|
+
fontFamily: 'inherit',
|
|
15
|
+
outline: 'none',
|
|
16
|
+
cursor: 'pointer',
|
|
17
|
+
boxSizing: 'border-box',
|
|
18
|
+
border: '1px solid transparent',
|
|
19
|
+
minHeight: 'calc(var(--pv-size-base) * 4 + 2px)',
|
|
20
|
+
height: '100%',
|
|
21
|
+
padding: '0 calc(var(--pv-size-base) * 2)',
|
|
22
|
+
borderRadius: 'calc(var(--pv-size-base) * 4)',
|
|
23
|
+
transition: 'background-color 200ms, color 200ms, border-color 200ms, box-shadow 200ms',
|
|
24
|
+
display: 'inline-flex',
|
|
25
|
+
alignItems: 'center',
|
|
26
|
+
justifyContent: 'center',
|
|
27
|
+
textDecoration: 'none',
|
|
28
|
+
...(props.selected && ({
|
|
29
|
+
boxShadow: 'var(--pv-shadow-light-soft)',
|
|
30
|
+
pointerEvents: 'none',
|
|
31
|
+
})),
|
|
32
|
+
}), (props) => {
|
|
33
|
+
const isDark = props.theme.mode === 'dark';
|
|
34
|
+
let color = 'var(--pv-color-gray-10)';
|
|
35
|
+
const colorDisabled = isDark
|
|
36
|
+
? 'var(--pv-color-gray-5)'
|
|
37
|
+
: 'var(--pv-color-gray-8)';
|
|
38
|
+
let backgroundColor = 'transparent';
|
|
39
|
+
let backgroundColorHover = 'var(--pv-color-gray-5)';
|
|
40
|
+
let backgroundColorActive = 'var(--pv-color-gray-6)';
|
|
41
|
+
let borderColor = 'transparent';
|
|
42
|
+
let borderColorHover = 'var(--pv-color-gray-5)';
|
|
43
|
+
let borderColorActive = 'var(--pv-color-gray-6)';
|
|
44
|
+
if (isDark) {
|
|
45
|
+
backgroundColorHover = 'var(--pv-color-gray-4)';
|
|
46
|
+
backgroundColorActive = 'var(--pv-color-gray-5)';
|
|
47
|
+
borderColorHover = 'var(--pv-color-gray-4)';
|
|
48
|
+
borderColorActive = 'var(--pv-color-gray-5)';
|
|
49
|
+
color = 'var(--pv-color-gray-8)';
|
|
50
|
+
}
|
|
51
|
+
if (props.selected) {
|
|
52
|
+
if (isDark) {
|
|
53
|
+
backgroundColor = 'var(--pv-color-gray-6)';
|
|
54
|
+
color = 'var(--pv-color-white)';
|
|
55
|
+
borderColor = 'var(--pv-color-gray-5)';
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
backgroundColor = 'var(--pv-color-white)';
|
|
59
|
+
color = 'var(--pv-color-black)';
|
|
60
|
+
borderColor = 'var(--pv-color-gray-3)';
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
return {
|
|
64
|
+
backgroundColor,
|
|
65
|
+
borderColor,
|
|
66
|
+
'&:disabled': {
|
|
67
|
+
cursor: 'not-allowed',
|
|
68
|
+
color: colorDisabled,
|
|
69
|
+
},
|
|
70
|
+
'&:not(:disabled)': {
|
|
71
|
+
color,
|
|
72
|
+
'&:hover': {
|
|
73
|
+
backgroundColor: backgroundColorHover,
|
|
74
|
+
borderColor: borderColorHover,
|
|
75
|
+
},
|
|
76
|
+
'&:focus-visible': {
|
|
77
|
+
borderColor: 'var(--pv-color-secondary)',
|
|
78
|
+
},
|
|
79
|
+
'&:active': {
|
|
80
|
+
backgroundColor: backgroundColorActive,
|
|
81
|
+
borderColor: borderColorActive,
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
/**
|
|
87
|
+
*
|
|
88
|
+
*/
|
|
89
|
+
export const SegmentedControl = React.forwardRef((props, ref) => {
|
|
90
|
+
const { component, id, disabled = false,
|
|
91
|
+
// @ts-expect-error: Property `selected` does not exist
|
|
92
|
+
// on type 'TSegmentedControlProps<"button">'
|
|
93
|
+
selected, children, onChange, ...other } = props;
|
|
94
|
+
const Component = component || 'button';
|
|
95
|
+
const handleClick = (event) => {
|
|
96
|
+
if (!selected && onChange) {
|
|
97
|
+
onChange(event, id);
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
return (React.createElement(SegmentedControlRoot, { as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick, ...other },
|
|
101
|
+
React.createElement(Typography, { variant: "btn2", component: "span", color: "inherit" }, children)));
|
|
102
|
+
});
|
|
103
|
+
SegmentedControl.displayName = 'SegmentedControl';
|
|
104
|
+
//# sourceMappingURL=segmented_control.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_control.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAoC3C;;GAEG;AAEH;;GAEG;AACH,MAAM,oBAAoB,GAAG,MAAM,CAAC,QAAQ,EAAE;IAC5C,iBAAiB,EAAE,WAAW;CAC/B,CAAC,CACA,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACV,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,SAAS;IACjB,SAAS,EAAE,YAAY;IACvB,MAAM,EAAE,uBAAuB;IAC/B,SAAS,EAAE,qCAAqC;IAChD,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,iCAAiC;IAC1C,YAAY,EAAE,+BAA+B;IAC7C,UAAU,EAAE,2EAA2E;IACvF,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,cAAc,EAAE,MAAM;IACtB,GAAG,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC;QACrB,SAAS,EAAE,6BAA6B;QACxC,aAAa,EAAE,MAAM;KACtB,CAAC,CAAC;CACJ,CAAC,EACF,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IAC3C,IAAI,KAAK,GAAG,yBAAyB,CAAC;IACtC,MAAM,aAAa,GAAG,MAAM;QAC1B,CAAC,CAAC,wBAAwB;QAC1B,CAAC,CAAC,wBAAwB,CAAC;IAC7B,IAAI,eAAe,GAAG,aAAa,CAAC;IACpC,IAAI,oBAAoB,GAAG,wBAAwB,CAAC;IACpD,IAAI,qBAAqB,GAAG,wBAAwB,CAAC;IACrD,IAAI,WAAW,GAAG,aAAa,CAAC;IAChC,IAAI,gBAAgB,GAAG,wBAAwB,CAAC;IAChD,IAAI,iBAAiB,GAAG,wBAAwB,CAAC;IAEjD,IAAI,MAAM,EAAE,CAAC;QACX,oBAAoB,GAAG,wBAAwB,CAAC;QAChD,qBAAqB,GAAG,wBAAwB,CAAC;QACjD,gBAAgB,GAAG,wBAAwB,CAAC;QAC5C,iBAAiB,GAAG,wBAAwB,CAAC;QAC7C,KAAK,GAAG,wBAAwB,CAAC;IACnC,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,IAAI,MAAM,EAAE,CAAC;YACX,eAAe,GAAG,wBAAwB,CAAC;YAC3C,KAAK,GAAG,uBAAuB,CAAC;YAChC,WAAW,GAAG,wBAAwB,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,eAAe,GAAG,uBAAuB,CAAC;YAC1C,KAAK,GAAG,uBAAuB,CAAC;YAChC,WAAW,GAAG,wBAAwB,CAAC;QACzC,CAAC;IACH,CAAC;IAED,OAAO;QACL,eAAe;QACf,WAAW;QACX,YAAY,EAAE;YACZ,MAAM,EAAE,aAAa;YACrB,KAAK,EAAE,aAAa;SACrB;QACD,kBAAkB,EAAE;YAClB,KAAK;YACL,SAAS,EAAE;gBACT,eAAe,EAAE,oBAAoB;gBACrC,WAAW,EAAE,gBAAgB;aAC9B;YACD,iBAAiB,EAAE;gBACjB,WAAW,EAAE,2BAA2B;aACzC;YACD,UAAU,EAAE;gBACV,eAAe,EAAE,qBAAqB;gBACtC,WAAW,EAAE,iBAAiB;aAC/B;SACF;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AACF;;GAEG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAA8B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3F,MAAM,EACJ,SAAS,EACT,EAAE,EACF,QAAQ,GAAG,KAAK;IAChB,uDAAuD;IACvD,6CAA6C;IAC7C,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,SAAS,IAAI,QAAQ,CAAC;IAExC,MAAM,WAAW,GAAG,CAAC,KAAsD,EAAE,EAAE;QAC7E,IAAI,CAAC,QAAQ,IAAI,QAAQ,EAAE,CAAC;YAC1B,QAAQ,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,oBAAoB,IACnB,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,mBACH,OAAO,CAAC,QAAQ,CAAC,EAChC,OAAO,EAAE,WAAW,KAChB,KAAK;QAET,oBAAC,UAAU,IACT,OAAO,EAAC,MAAM,EACd,SAAS,EAAC,MAAM,EAChB,KAAK,EAAC,SAAS,IAEd,QAAQ,CACE,CACQ,CACxB,CAAC;AACJ,CAAC,CAAoD,CAAC;AAEtD,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import { Tabs } from '../Tabs';
|
|
4
|
+
;
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Styles.
|
|
10
|
+
*/
|
|
11
|
+
const SegmentedControlsRoot = styled(Tabs)((props) => {
|
|
12
|
+
const isDark = props.theme.mode === 'dark';
|
|
13
|
+
let backgroundColor = 'var(--pv-color-gray-4)';
|
|
14
|
+
if (isDark) {
|
|
15
|
+
backgroundColor = 'var(--pv-color-gray-3)';
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
whiteSpace: 'nowrap',
|
|
19
|
+
overflowX: 'auto',
|
|
20
|
+
backgroundColor,
|
|
21
|
+
borderRadius: 'calc(var(--pv-size-base) * 4)',
|
|
22
|
+
display: 'inline-flex',
|
|
23
|
+
padding: 'calc(var(--pv-size-base) - 1px)',
|
|
24
|
+
};
|
|
25
|
+
});
|
|
26
|
+
/**
|
|
27
|
+
*
|
|
28
|
+
*/
|
|
29
|
+
// eslint-disable-next-line @stylistic/max-len
|
|
30
|
+
export const SegmentedControls = React.forwardRef((props, ref) => (React.createElement(SegmentedControlsRoot, { ref: ref, ...(props) }, props.children)));
|
|
31
|
+
SegmentedControls.displayName = 'SegmentedControls';
|
|
32
|
+
//# sourceMappingURL=segmented_controls.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"segmented_controls.js","sourceRoot":"","sources":["../../../src/SegmentedControls/segmented_controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAuB9B,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,CAAC;IAC3C,IAAI,eAAe,GAAG,wBAAwB,CAAC;IAE/C,IAAI,MAAM,EAAE,CAAC;QACX,eAAe,GAAG,wBAAwB,CAAC;IAC7C,CAAC;IAED,OAAO;QACL,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,MAAM;QACjB,eAAe;QACf,YAAY,EAAE,+BAA+B;QAC7C,OAAO,EAAE,aAAa;QACtB,OAAO,EAAE,iCAAiC;KAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AACH;;GAEG;AAEH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAA0C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACzG,oBAAC,qBAAqB,IACpB,GAAG,EAAE,GAAG,KACJ,CAAC,KAAK,CAAC,IAEV,KAAK,CAAC,QAAQ,CACO,CACzB,CAAC,CAAC;AAEH,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC"}
|
package/dist/esnext/Tabs/tab.js
CHANGED
|
@@ -9,7 +9,7 @@ import { Typography } from '../Typography';
|
|
|
9
9
|
* Styles.
|
|
10
10
|
*/
|
|
11
11
|
const TabRoot = styled('button', {
|
|
12
|
-
shouldForwardProp: (prop) => isPropValid(prop)
|
|
12
|
+
shouldForwardProp: (prop) => isPropValid(prop),
|
|
13
13
|
})((props) => ({
|
|
14
14
|
fontFamily: 'inherit',
|
|
15
15
|
outline: 'none',
|
|
@@ -31,30 +31,20 @@ const TabRoot = styled('button', {
|
|
|
31
31
|
})),
|
|
32
32
|
}), (props) => {
|
|
33
33
|
const isDark = props.theme.mode === 'dark';
|
|
34
|
-
|
|
35
|
-
let color;
|
|
36
|
-
|
|
37
|
-
? 'var(--pv-color-gray-5)'
|
|
38
|
-
: 'var(--pv-color-gray-7)';
|
|
39
|
-
let backgroundColorHove = 'var(--pv-color-secondary-tint-5)';
|
|
34
|
+
let color = 'var(--pv-color-gray-10)';
|
|
35
|
+
let colorDisabled = 'var(--pv-color-gray-7)';
|
|
36
|
+
let backgroundColorHover = 'var(--pv-color-secondary-tint-5)';
|
|
40
37
|
let backgroundColorFocus = 'var(--pv-color-secondary-tint-4)';
|
|
41
38
|
let backgroundColorActive = 'var(--pv-color-secondary-tint-3)';
|
|
42
|
-
if (isWhite) {
|
|
43
|
-
color = 'var(--pv-color-gray-9)';
|
|
44
|
-
}
|
|
45
|
-
else if (isDark) {
|
|
46
|
-
color = 'var(--pv-color-gray-7)';
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
color = 'var(--pv-color-gray-10)';
|
|
50
|
-
}
|
|
51
39
|
if (isDark) {
|
|
52
|
-
|
|
40
|
+
color = 'var(--pv-color-gray-7)';
|
|
41
|
+
colorDisabled = 'var(--pv-color-gray-5)';
|
|
42
|
+
backgroundColorHover = 'var(--pv-color-secondary-shade-4)';
|
|
53
43
|
backgroundColorFocus = 'var(--pv-color-secondary-shade-3)';
|
|
54
44
|
backgroundColorActive = 'var(--pv-color-secondary-shade-2)';
|
|
55
45
|
}
|
|
56
46
|
if (props.selected) {
|
|
57
|
-
if (isDark
|
|
47
|
+
if (isDark) {
|
|
58
48
|
color = 'var(--pv-color-white)';
|
|
59
49
|
}
|
|
60
50
|
else {
|
|
@@ -69,7 +59,7 @@ const TabRoot = styled('button', {
|
|
|
69
59
|
'&:not(:disabled)': {
|
|
70
60
|
color,
|
|
71
61
|
'&:hover': {
|
|
72
|
-
backgroundColor:
|
|
62
|
+
backgroundColor: backgroundColorHover,
|
|
73
63
|
},
|
|
74
64
|
'&:focus-visible': {
|
|
75
65
|
backgroundColor: backgroundColorFocus,
|
|
@@ -84,7 +74,7 @@ const TabRoot = styled('button', {
|
|
|
84
74
|
*
|
|
85
75
|
*/
|
|
86
76
|
export const Tab = React.forwardRef((props, ref) => {
|
|
87
|
-
const {
|
|
77
|
+
const { component, id, disabled = false,
|
|
88
78
|
// @ts-expect-error: Property `selected` does not exist on type 'TabProps<"button">'
|
|
89
79
|
selected, children, onChange, ...other } = props;
|
|
90
80
|
const Component = component || 'button';
|
|
@@ -93,7 +83,7 @@ export const Tab = React.forwardRef((props, ref) => {
|
|
|
93
83
|
onChange(event, id);
|
|
94
84
|
}
|
|
95
85
|
};
|
|
96
|
-
return (React.createElement(TabRoot, { as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id,
|
|
86
|
+
return (React.createElement(TabRoot, { as: Component, type: "button", role: "tab", ref: ref, disabled: disabled, id: id, selected: selected, "aria-selected": Boolean(selected), onClick: handleClick, ...other },
|
|
97
87
|
React.createElement(Typography, { variant: "s2", component: "span", color: "inherit" }, children)));
|
|
98
88
|
});
|
|
99
89
|
Tab.displayName = 'Tab';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/Tabs/tab.tsx"],"names":[],"mappings":"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"}
|
package/dist/esnext/Tabs/tabs.js
CHANGED
|
@@ -20,10 +20,6 @@ export const Tabs = React.forwardRef((props, ref) => {
|
|
|
20
20
|
if (!React.isValidElement(child)) {
|
|
21
21
|
return null;
|
|
22
22
|
}
|
|
23
|
-
if (child.type.displayName !== 'Tab') {
|
|
24
|
-
console.error('Peculiar-UI: The Tabs component doesn\'t accept a Element as not a Tab.');
|
|
25
|
-
return null;
|
|
26
|
-
}
|
|
27
23
|
const childValue = child.props.id;
|
|
28
24
|
const selected = childValue === value;
|
|
29
25
|
return React.cloneElement(child, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,EACJ,QAAQ,EAAE,YAAY,EACtB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,CAAC,KAAgD,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/Tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAuBpC,CAAC;AAGF;;GAEG;AAEH;;GAEG;AACH,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ;IACpB,SAAS,EAAE,MAAM;CAClB,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC9E,MAAM,EACJ,QAAQ,EAAE,YAAY,EACtB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CACjC,YAAY,EACZ,CAAC,KAAgD,EAAE,EAAE;QACnD,IAAI,CAAC,KAAK,CAAC,cAAc,CAAa,KAAK,CAAC,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,UAAU,KAAK,KAAK,CAAC;QAEtC,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;YAC/B,QAAQ;YACR,QAAQ;SACT,CAAC,CAAC;IACL,CAAC,CACF,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,SAAS,KACV,KAAK,IAER,QAAQ,CACA,CACZ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}
|
package/dist/esnext/index.js
CHANGED
package/dist/esnext/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { IOverridableComponent, TOverrideProps } from '../OverridableComponent';
|
|
3
|
+
/**
|
|
4
|
+
* Types.
|
|
5
|
+
*/
|
|
6
|
+
export interface ISegmentedControlOwnProps {
|
|
7
|
+
/**
|
|
8
|
+
* The content of the component.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Unique identifier used to control which segmented control is selected.
|
|
13
|
+
*/
|
|
14
|
+
id: string;
|
|
15
|
+
/**
|
|
16
|
+
* If `true`, the segmented control will be disabled.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Callback fired when the value changes.
|
|
22
|
+
*/
|
|
23
|
+
onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
|
|
24
|
+
onClick?: never;
|
|
25
|
+
}
|
|
26
|
+
export interface ISegmentedControlTypeMap<P = object, D extends React.ElementType = 'button'> {
|
|
27
|
+
props: P & ISegmentedControlOwnProps;
|
|
28
|
+
defaultComponent: D;
|
|
29
|
+
}
|
|
30
|
+
export type TSegmentedControlProps<D extends React.ElementType = ISegmentedControlTypeMap['defaultComponent']> = TOverrideProps<ISegmentedControlTypeMap<object, D>, D> & {
|
|
31
|
+
component?: D;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
*
|
|
35
|
+
*/
|
|
36
|
+
export declare const SegmentedControl: IOverridableComponent<ISegmentedControlTypeMap>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { SegmentedControl, TSegmentedControlProps } from './segmented_control';
|
|
3
|
+
/**
|
|
4
|
+
* Types.
|
|
5
|
+
*/
|
|
6
|
+
interface ISegmentedControlsOwnProps {
|
|
7
|
+
/**
|
|
8
|
+
* The content of the component.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactElement<TSegmentedControlProps, typeof SegmentedControl>[];
|
|
11
|
+
/**
|
|
12
|
+
* The value of the currently selected `SegmentedControl`.
|
|
13
|
+
*/
|
|
14
|
+
value: string;
|
|
15
|
+
/**
|
|
16
|
+
* The className of the component.
|
|
17
|
+
*/
|
|
18
|
+
className?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Callback fired when the value changes.
|
|
21
|
+
*/
|
|
22
|
+
onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, value: string) => void;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
*
|
|
26
|
+
*/
|
|
27
|
+
export declare const SegmentedControls: React.ForwardRefExoticComponent<ISegmentedControlsOwnProps & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
export {};
|
package/dist/types/Tabs/tab.d.ts
CHANGED
package/dist/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peculiar/react-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.8.
|
|
4
|
+
"version": "1.8.6",
|
|
5
5
|
"author": "PeculiarVentures Team",
|
|
6
6
|
"description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
|
|
7
7
|
"keywords": [
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"node": ">=18.x"
|
|
80
80
|
},
|
|
81
81
|
"license": "MIT",
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "f6324a9b51ef74464fed108ec8b4380fae16e3bf"
|
|
83
83
|
}
|