@semcore/feature-highlight 16.0.1-prerelease.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/LICENSE +21 -0
- package/README.md +39 -0
- package/lib/cjs/components/badge/Badge.js +46 -0
- package/lib/cjs/components/badge/Badge.js.map +1 -0
- package/lib/cjs/components/badge/badge.shadow.css +14 -0
- package/lib/cjs/components/button/Button.js +107 -0
- package/lib/cjs/components/button/Button.js.map +1 -0
- package/lib/cjs/components/button/Button.type.js +2 -0
- package/lib/cjs/components/button/Button.type.js.map +1 -0
- package/lib/cjs/components/button/button.shadow.css +76 -0
- package/lib/cjs/components/checkbox/Checkbox.js +86 -0
- package/lib/cjs/components/checkbox/Checkbox.js.map +1 -0
- package/lib/cjs/components/checkbox/Checkbox.type.js +2 -0
- package/lib/cjs/components/checkbox/Checkbox.type.js.map +1 -0
- package/lib/cjs/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/cjs/components/input/Input.js +63 -0
- package/lib/cjs/components/input/Input.js.map +1 -0
- package/lib/cjs/components/input/input.shadow.css +41 -0
- package/lib/cjs/components/notice/Notice.js +73 -0
- package/lib/cjs/components/notice/Notice.js.map +1 -0
- package/lib/cjs/components/notice/notice.shadow.css +26 -0
- package/lib/cjs/components/pills/Pills.js +117 -0
- package/lib/cjs/components/pills/Pills.js.map +1 -0
- package/lib/cjs/components/pills/Pills.type.js +2 -0
- package/lib/cjs/components/pills/Pills.type.js.map +1 -0
- package/lib/cjs/components/pills/pills.shadow.css +57 -0
- package/lib/cjs/components/radio/Radio.js +100 -0
- package/lib/cjs/components/radio/Radio.js.map +1 -0
- package/lib/cjs/components/radio/Radio.type.js +2 -0
- package/lib/cjs/components/radio/Radio.type.js.map +1 -0
- package/lib/cjs/components/radio/radio.shadow.css +43 -0
- package/lib/cjs/components/select/Select.js +53 -0
- package/lib/cjs/components/select/Select.js.map +1 -0
- package/lib/cjs/components/switch/Switch.js +94 -0
- package/lib/cjs/components/switch/Switch.js.map +1 -0
- package/lib/cjs/components/switch/Switch.type.js +2 -0
- package/lib/cjs/components/switch/Switch.type.js.map +1 -0
- package/lib/cjs/components/switch/switch.shadow.css +22 -0
- package/lib/cjs/components/tab-line/TabLine.js +119 -0
- package/lib/cjs/components/tab-line/TabLine.js.map +1 -0
- package/lib/cjs/components/tab-line/TabLine.type.js +2 -0
- package/lib/cjs/components/tab-line/TabLine.type.js.map +1 -0
- package/lib/cjs/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/cjs/index.js +116 -0
- package/lib/cjs/index.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js +66 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.type.js +2 -0
- package/lib/cjs/inner-components/button-trigger/ButtonTrigger.type.js.map +1 -0
- package/lib/cjs/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js +28 -0
- package/lib/cjs/inner-components/sparkle/AnimatedSparkles.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/Sparkle.js +59 -0
- package/lib/cjs/inner-components/sparkle/Sparkle.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/index.js +14 -0
- package/lib/cjs/inner-components/sparkle/index.js.map +1 -0
- package/lib/cjs/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/es6/components/badge/Badge.js +41 -0
- package/lib/es6/components/badge/Badge.js.map +1 -0
- package/lib/es6/components/badge/badge.shadow.css +14 -0
- package/lib/es6/components/button/Button.js +103 -0
- package/lib/es6/components/button/Button.js.map +1 -0
- package/lib/es6/components/button/Button.type.js +2 -0
- package/lib/es6/components/button/Button.type.js.map +1 -0
- package/lib/es6/components/button/button.shadow.css +76 -0
- package/lib/es6/components/checkbox/Checkbox.js +81 -0
- package/lib/es6/components/checkbox/Checkbox.js.map +1 -0
- package/lib/es6/components/checkbox/Checkbox.type.js +2 -0
- package/lib/es6/components/checkbox/Checkbox.type.js.map +1 -0
- package/lib/es6/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/es6/components/input/Input.js +59 -0
- package/lib/es6/components/input/Input.js.map +1 -0
- package/lib/es6/components/input/input.shadow.css +41 -0
- package/lib/es6/components/notice/Notice.js +68 -0
- package/lib/es6/components/notice/Notice.js.map +1 -0
- package/lib/es6/components/notice/notice.shadow.css +26 -0
- package/lib/es6/components/pills/Pills.js +113 -0
- package/lib/es6/components/pills/Pills.js.map +1 -0
- package/lib/es6/components/pills/Pills.type.js +2 -0
- package/lib/es6/components/pills/Pills.type.js.map +1 -0
- package/lib/es6/components/pills/pills.shadow.css +57 -0
- package/lib/es6/components/radio/Radio.js +94 -0
- package/lib/es6/components/radio/Radio.js.map +1 -0
- package/lib/es6/components/radio/Radio.type.js +2 -0
- package/lib/es6/components/radio/Radio.type.js.map +1 -0
- package/lib/es6/components/radio/radio.shadow.css +43 -0
- package/lib/es6/components/select/Select.js +48 -0
- package/lib/es6/components/select/Select.js.map +1 -0
- package/lib/es6/components/switch/Switch.js +90 -0
- package/lib/es6/components/switch/Switch.js.map +1 -0
- package/lib/es6/components/switch/Switch.type.js +2 -0
- package/lib/es6/components/switch/Switch.type.js.map +1 -0
- package/lib/es6/components/switch/switch.shadow.css +22 -0
- package/lib/es6/components/tab-line/TabLine.js +116 -0
- package/lib/es6/components/tab-line/TabLine.js.map +1 -0
- package/lib/es6/components/tab-line/TabLine.type.js +2 -0
- package/lib/es6/components/tab-line/TabLine.type.js.map +1 -0
- package/lib/es6/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/es6/index.js +11 -0
- package/lib/es6/index.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js +62 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.type.js +2 -0
- package/lib/es6/inner-components/button-trigger/ButtonTrigger.type.js.map +1 -0
- package/lib/es6/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js +21 -0
- package/lib/es6/inner-components/sparkle/AnimatedSparkles.js.map +1 -0
- package/lib/es6/inner-components/sparkle/Sparkle.js +54 -0
- package/lib/es6/inner-components/sparkle/Sparkle.js.map +1 -0
- package/lib/es6/inner-components/sparkle/index.js +3 -0
- package/lib/es6/inner-components/sparkle/index.js.map +1 -0
- package/lib/es6/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/esm/components/badge/Badge.mjs +49 -0
- package/lib/esm/components/badge/badge.shadow.css +14 -0
- package/lib/esm/components/button/Button.mjs +106 -0
- package/lib/esm/components/button/button.shadow.css +76 -0
- package/lib/esm/components/checkbox/Checkbox.mjs +86 -0
- package/lib/esm/components/checkbox/checkbox.shadow.css +38 -0
- package/lib/esm/components/input/Input.mjs +65 -0
- package/lib/esm/components/input/input.shadow.css +41 -0
- package/lib/esm/components/notice/Notice.mjs +66 -0
- package/lib/esm/components/notice/notice.shadow.css +26 -0
- package/lib/esm/components/pills/Pills.mjs +117 -0
- package/lib/esm/components/pills/pills.shadow.css +57 -0
- package/lib/esm/components/radio/Radio.mjs +98 -0
- package/lib/esm/components/radio/radio.shadow.css +43 -0
- package/lib/esm/components/select/Select.mjs +49 -0
- package/lib/esm/components/switch/Switch.mjs +96 -0
- package/lib/esm/components/switch/switch.shadow.css +22 -0
- package/lib/esm/components/tab-line/TabLine.mjs +119 -0
- package/lib/esm/components/tab-line/tabLine.shadow.css +25 -0
- package/lib/esm/index.mjs +22 -0
- package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs +67 -0
- package/lib/esm/inner-components/button-trigger/buttonTrigger.shadow.css +57 -0
- package/lib/esm/inner-components/sparkle/AnimatedSparkles.mjs +19 -0
- package/lib/esm/inner-components/sparkle/Sparkle.mjs +57 -0
- package/lib/esm/inner-components/sparkle/style/sparkle.shadow.css +31 -0
- package/lib/types/components/badge/Badge.d.ts +3 -0
- package/lib/types/components/button/Button.d.ts +2 -0
- package/lib/types/components/button/Button.type.d.ts +8 -0
- package/lib/types/components/checkbox/Checkbox.d.ts +2 -0
- package/lib/types/components/checkbox/Checkbox.type.d.ts +8 -0
- package/lib/types/components/input/Input.d.ts +2 -0
- package/lib/types/components/notice/Notice.d.ts +3 -0
- package/lib/types/components/pills/Pills.d.ts +2 -0
- package/lib/types/components/pills/Pills.type.d.ts +13 -0
- package/lib/types/components/radio/Radio.d.ts +2 -0
- package/lib/types/components/radio/Radio.type.d.ts +9 -0
- package/lib/types/components/select/Select.d.ts +2 -0
- package/lib/types/components/switch/Switch.d.ts +2 -0
- package/lib/types/components/switch/Switch.type.d.ts +6 -0
- package/lib/types/components/tab-line/TabLine.d.ts +2 -0
- package/lib/types/components/tab-line/TabLine.type.d.ts +9 -0
- package/lib/types/index.d.ts +10 -0
- package/lib/types/inner-components/button-trigger/ButtonTrigger.d.ts +2 -0
- package/lib/types/inner-components/button-trigger/ButtonTrigger.type.d.ts +7 -0
- package/lib/types/inner-components/sparkle/AnimatedSparkles.d.ts +10 -0
- package/lib/types/inner-components/sparkle/Sparkle.d.ts +10 -0
- package/lib/types/inner-components/sparkle/index.d.ts +2 -0
- package/package.json +47 -0
- package/vite.config.ts +33 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
SHighlightedInput[state='normal'] {
|
|
2
|
+
& SOutline {
|
|
3
|
+
background:
|
|
4
|
+
linear-gradient(white, white) padding-box,
|
|
5
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
|
|
6
|
+
background-origin: border-box;
|
|
7
|
+
background-clip: padding-box, border-box;
|
|
8
|
+
border-color: transparent;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
&:has(SValue:focus-visible) SOutline {
|
|
12
|
+
box-shadow: none;
|
|
13
|
+
border-color: transparent;
|
|
14
|
+
|
|
15
|
+
&::before {
|
|
16
|
+
content: "";
|
|
17
|
+
position: absolute;
|
|
18
|
+
z-index: -1;
|
|
19
|
+
inset: 0;
|
|
20
|
+
margin: -4px;
|
|
21
|
+
padding: 4px;
|
|
22
|
+
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
23
|
+
|
|
24
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
|
|
25
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
26
|
+
mask-composite: exclude;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&[neighborLocation='left']:has(SValue:focus-visible) SOutline::before {
|
|
31
|
+
border-top-left-radius: 0;
|
|
32
|
+
border-bottom-left-radius: 0;
|
|
33
|
+
}
|
|
34
|
+
&[neighborLocation='right']:has(SValue:focus-visible) SOutline::before {
|
|
35
|
+
border-top-right-radius: 0;
|
|
36
|
+
border-bottom-right-radius: 0;
|
|
37
|
+
}
|
|
38
|
+
&[neighborLocation='both']:has(SValue:focus-visible) SOutline::before {
|
|
39
|
+
border-radius: 0;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
11
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
12
|
+
import { createComponent, Component, Root, sstyled } from '@semcore/core';
|
|
13
|
+
import isNode from '@semcore/core/lib/utils/isNode';
|
|
14
|
+
import Notice from '@semcore/notice';
|
|
15
|
+
import React from 'react';
|
|
16
|
+
/*!__reshadow-styles__:"./notice.shadow.css"*/
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedNotice_xwtcx_gg_{background-image:var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));border-color:transparent;background-clip:padding-box;position:relative}.___SHighlightedNotice_xwtcx_gg_:before{content:\"\";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;margin:-1px;border-radius:inherit;background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n ) border-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box}.___SHighlightedNotice_xwtcx_gg_ .___SCloseIcon_xwtcx_gg_{color:var(--intergalactic-icon-primary-neutral, #6c6e79)}@media (hover:hover){.___SHighlightedNotice_xwtcx_gg_ .___SCloseIcon_xwtcx_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #565861)}}", /*__inner_css_end__*/"xwtcx_gg_"),
|
|
18
|
+
/*__reshadow_css_end__*/
|
|
19
|
+
{
|
|
20
|
+
"__SHighlightedNotice": "___SHighlightedNotice_xwtcx_gg_",
|
|
21
|
+
"__SCloseIcon": "___SCloseIcon_xwtcx_gg_"
|
|
22
|
+
});
|
|
23
|
+
var NoticeFHRoot = /*#__PURE__*/function (_Component) {
|
|
24
|
+
function NoticeFHRoot() {
|
|
25
|
+
_classCallCheck(this, NoticeFHRoot);
|
|
26
|
+
return _callSuper(this, NoticeFHRoot, arguments);
|
|
27
|
+
}
|
|
28
|
+
_inherits(NoticeFHRoot, _Component);
|
|
29
|
+
return _createClass(NoticeFHRoot, [{
|
|
30
|
+
key: "renderContent",
|
|
31
|
+
value: function renderContent() {
|
|
32
|
+
var _this$asProps = this.asProps,
|
|
33
|
+
Children = _this$asProps.Children,
|
|
34
|
+
label = _this$asProps.label,
|
|
35
|
+
title = _this$asProps.title,
|
|
36
|
+
closable = _this$asProps.closable;
|
|
37
|
+
var textContent = /*#__PURE__*/React.createElement(Children, null);
|
|
38
|
+
if (typeof Children.origin === 'string') {
|
|
39
|
+
textContent = isNode(title) || isNode(label) || closable ? /*#__PURE__*/React.createElement(Notice.Text, null, /*#__PURE__*/React.createElement(Children, null)) : /*#__PURE__*/React.createElement(Children, null);
|
|
40
|
+
}
|
|
41
|
+
return textContent;
|
|
42
|
+
}
|
|
43
|
+
}, {
|
|
44
|
+
key: "render",
|
|
45
|
+
value: function render() {
|
|
46
|
+
var _ref = this.asProps,
|
|
47
|
+
_ref2;
|
|
48
|
+
var SHighlightedNotice = Notice;
|
|
49
|
+
var _this$asProps2 = this.asProps,
|
|
50
|
+
label = _this$asProps2.label,
|
|
51
|
+
title = _this$asProps2.title,
|
|
52
|
+
styles = _this$asProps2.styles,
|
|
53
|
+
actions = _this$asProps2.actions,
|
|
54
|
+
closable = _this$asProps2.closable,
|
|
55
|
+
onClose = _this$asProps2.onClose;
|
|
56
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SHighlightedNotice, _ref2.cn("SHighlightedNotice", _objectSpread({}, _assignProps({
|
|
57
|
+
"__excludeProps": ['title'],
|
|
58
|
+
"use:theme": undefined
|
|
59
|
+
}, _ref))), isNode(label) && /*#__PURE__*/React.createElement(Notice.Label, null, label), /*#__PURE__*/React.createElement(Notice.Content, null, isNode(title) && /*#__PURE__*/React.createElement(Notice.Title, null, title), this.renderContent(), isNode(actions) && /*#__PURE__*/React.createElement(Notice.Actions, null, actions)), closable && /*#__PURE__*/React.createElement(Notice.Close, {
|
|
60
|
+
onClick: onClose
|
|
61
|
+
}));
|
|
62
|
+
}
|
|
63
|
+
}]);
|
|
64
|
+
}(Component);
|
|
65
|
+
_defineProperty(NoticeFHRoot, "displayName", 'NoticeFH');
|
|
66
|
+
_defineProperty(NoticeFHRoot, "style", style);
|
|
67
|
+
export var NoticeFH = createComponent(NoticeFHRoot);
|
|
68
|
+
//# sourceMappingURL=Notice.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notice.js","names":["createComponent","Component","Root","sstyled","isNode","Notice","React","style","_sstyled","insert","NoticeFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","renderContent","_this$asProps","asProps","Children","label","title","closable","textContent","createElement","origin","Text","render","_ref","_ref2","SHighlightedNotice","_this$asProps2","styles","actions","onClose","cn","_objectSpread","_assignProps","undefined","Label","Content","Title","Actions","Close","onClick","_defineProperty","NoticeFH"],"sources":["../../../../src/components/notice/Notice.tsx"],"sourcesContent":["import { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport isNode from '@semcore/core/lib/utils/isNode';\nimport type { NoticeSmartProps } from '@semcore/notice';\nimport Notice from '@semcore/notice';\nimport React from 'react';\n\nimport style from './notice.shadow.css';\n\nclass NoticeFHRoot extends Component<NoticeSmartProps> {\n static displayName = 'NoticeFH';\n static style = style;\n\n renderContent() {\n const { Children, label, title, closable } = this.asProps;\n let textContent = <Children />;\n\n if (typeof Children.origin === 'string') {\n textContent =\n isNode(title) || isNode(label) || closable\n ? (\n <Notice.Text>\n <Children />\n </Notice.Text>\n )\n : (\n <Children />\n );\n }\n\n return textContent;\n }\n\n render() {\n const SHighlightedNotice = Root;\n const { label, title, styles, actions, closable, onClose } = this.asProps;\n\n return sstyled(styles)(\n <SHighlightedNotice render={Notice} __excludeProps={['title']} use:theme={undefined}>\n {isNode(label) && <Notice.Label>{label}</Notice.Label>}\n <Notice.Content>\n {isNode(title) && <Notice.Title>{title}</Notice.Title>}\n {this.renderContent()}\n {isNode(actions) && <Notice.Actions>{actions}</Notice.Actions>}\n </Notice.Content>\n {closable && <Notice.Close onClick={onClose} />}\n </SHighlightedNotice>,\n );\n }\n}\n\nexport const NoticeFH = createComponent(NoticeFHRoot);\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
SHighlightedNotice {
|
|
2
|
+
background-image: var(--intergalactic-bg-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff));
|
|
3
|
+
border-color: transparent;
|
|
4
|
+
background-clip: padding-box;
|
|
5
|
+
position: relative;
|
|
6
|
+
|
|
7
|
+
&:before {
|
|
8
|
+
content: '';
|
|
9
|
+
position: absolute;
|
|
10
|
+
top: 0; right: 0; bottom: 0; left: 0;
|
|
11
|
+
z-index: -1;
|
|
12
|
+
margin: -1px;
|
|
13
|
+
border-radius: inherit;
|
|
14
|
+
|
|
15
|
+
background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
16
|
+
) border-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
& SCloseIcon {
|
|
20
|
+
color: var(--intergalactic-icon-primary-neutral, #6c6e79);
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
color: var(--intergalactic-icon-primary-neutral-hover-active, #565861);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
11
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
12
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
13
|
+
import { createComponent, Root, Component, sstyled } from '@semcore/core';
|
|
14
|
+
import SummaryAI from '@semcore/icon/SummaryAI/m';
|
|
15
|
+
import Pills from '@semcore/pills';
|
|
16
|
+
import React from 'react';
|
|
17
|
+
/*!__reshadow-styles__:"./pills.shadow.css"*/
|
|
18
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedPill_4manu_gg_{border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n ) border-box;background-origin:border-box;background-clip:padding-box,border-box;z-index:1}@media (hover:hover){.___SHighlightedPill_4manu_gg_:hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n ) border-box}}.___SHighlightedPill_4manu_gg_.__selected_4manu_gg_{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedPill_4manu_gg_:focus-visible{outline:0;position:relative}.___SHighlightedPill_4manu_gg_:focus-visible::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude}.___SHighlightedPill_4manu_gg_._neighborLocation_left_4manu_gg_:focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedPill_4manu_gg_._neighborLocation_right_4manu_gg_:focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedPill_4manu_gg_._neighborLocation_both_4manu_gg_:focus-visible::before{border-radius:0}", /*__inner_css_end__*/"4manu_gg_"),
|
|
19
|
+
/*__reshadow_css_end__*/
|
|
20
|
+
{
|
|
21
|
+
"__SHighlightedPill": "___SHighlightedPill_4manu_gg_",
|
|
22
|
+
"_selected": "__selected_4manu_gg_",
|
|
23
|
+
"_neighborLocation_left": "_neighborLocation_left_4manu_gg_",
|
|
24
|
+
"_neighborLocation_right": "_neighborLocation_right_4manu_gg_",
|
|
25
|
+
"_neighborLocation_both": "_neighborLocation_both_4manu_gg_"
|
|
26
|
+
});
|
|
27
|
+
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
28
|
+
var PillsFHRoot = /*#__PURE__*/function (_Component) {
|
|
29
|
+
function PillsFHRoot() {
|
|
30
|
+
_classCallCheck(this, PillsFHRoot);
|
|
31
|
+
return _callSuper(this, PillsFHRoot, arguments);
|
|
32
|
+
}
|
|
33
|
+
_inherits(PillsFHRoot, _Component);
|
|
34
|
+
return _createClass(PillsFHRoot, [{
|
|
35
|
+
key: "render",
|
|
36
|
+
value: function render() {
|
|
37
|
+
var _ref = this.asProps;
|
|
38
|
+
return /*#__PURE__*/React.createElement(Pills, _assignProps({}, _ref));
|
|
39
|
+
}
|
|
40
|
+
}]);
|
|
41
|
+
}(Component);
|
|
42
|
+
_defineProperty(PillsFHRoot, "displayName", 'PillsFH');
|
|
43
|
+
_defineProperty(PillsFHRoot, "style", style);
|
|
44
|
+
var HighlightedItemRoot = /*#__PURE__*/function (_Component2) {
|
|
45
|
+
function HighlightedItemRoot() {
|
|
46
|
+
var _this;
|
|
47
|
+
_classCallCheck(this, HighlightedItemRoot);
|
|
48
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
49
|
+
args[_key] = arguments[_key];
|
|
50
|
+
}
|
|
51
|
+
_this = _callSuper(this, HighlightedItemRoot, [].concat(args));
|
|
52
|
+
_defineProperty(_this, "state", {
|
|
53
|
+
clicked: false
|
|
54
|
+
});
|
|
55
|
+
return _this;
|
|
56
|
+
}
|
|
57
|
+
_inherits(HighlightedItemRoot, _Component2);
|
|
58
|
+
return _createClass(HighlightedItemRoot, [{
|
|
59
|
+
key: "handleClick",
|
|
60
|
+
value: function handleClick(e) {
|
|
61
|
+
var _this2 = this;
|
|
62
|
+
var onClick = this.asProps.onClick;
|
|
63
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
64
|
+
this.setState({
|
|
65
|
+
clicked: false
|
|
66
|
+
});
|
|
67
|
+
setTimeout(function () {
|
|
68
|
+
_this2.setState({
|
|
69
|
+
clicked: true
|
|
70
|
+
});
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
}, {
|
|
74
|
+
key: "getAddonProps",
|
|
75
|
+
value: function getAddonProps() {
|
|
76
|
+
return {
|
|
77
|
+
clicked: this.state.clicked
|
|
78
|
+
};
|
|
79
|
+
}
|
|
80
|
+
}, {
|
|
81
|
+
key: "render",
|
|
82
|
+
value: function render() {
|
|
83
|
+
var _ref2 = this.asProps,
|
|
84
|
+
_ref3;
|
|
85
|
+
var SHighlightedPill = Pills.Item;
|
|
86
|
+
return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SHighlightedPill, _ref3.cn("SHighlightedPill", _objectSpread({}, _assignProps2({
|
|
87
|
+
"onClick": this.handleClick.bind(this)
|
|
88
|
+
}, _ref2))));
|
|
89
|
+
}
|
|
90
|
+
}]);
|
|
91
|
+
}(Component);
|
|
92
|
+
_defineProperty(HighlightedItemRoot, "displayName", 'HighlightedItem');
|
|
93
|
+
_defineProperty(HighlightedItemRoot, "style", style);
|
|
94
|
+
function HighlightedItemAddon(props) {
|
|
95
|
+
var clicked = props.clicked,
|
|
96
|
+
animatedSparkleCount = props.animatedSparkleCount,
|
|
97
|
+
Children = props.Children,
|
|
98
|
+
hasChildren = props.children;
|
|
99
|
+
return /*#__PURE__*/React.createElement(Pills.Item.Addon, null, hasChildren ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SummaryAI, {
|
|
100
|
+
color: "--intergalactic-icon-primary-feature-highlight"
|
|
101
|
+
}), /*#__PURE__*/React.createElement(AnimatedSparkles, {
|
|
102
|
+
show: clicked,
|
|
103
|
+
count: animatedSparkleCount
|
|
104
|
+
})));
|
|
105
|
+
}
|
|
106
|
+
export var PillsFH = createComponent(PillsFHRoot, {
|
|
107
|
+
Item: Pills.Item,
|
|
108
|
+
HighlightedItem: createComponent(HighlightedItemRoot, {
|
|
109
|
+
Text: Pills.Item.Text,
|
|
110
|
+
Addon: HighlightedItemAddon
|
|
111
|
+
})
|
|
112
|
+
});
|
|
113
|
+
//# sourceMappingURL=Pills.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["createComponent","Root","Component","sstyled","SummaryAI","Pills","React","style","_sstyled","insert","AnimatedSparkles","PillsFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","createElement","_assignProps","_defineProperty","HighlightedItemRoot","_Component2","_this","_len","length","args","Array","_key","concat","clicked","handleClick","e","_this2","onClick","setState","setTimeout","getAddonProps","state","_ref2","_ref3","SHighlightedPill","Item","styles","cn","_objectSpread","_assignProps2","bind","HighlightedItemAddon","props","animatedSparkleCount","Children","hasChildren","children","Addon","Fragment","color","show","count","PillsFH","HighlightedItem","Text"],"sources":["../../../../src/components/pills/Pills.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Pills from '@semcore/pills';\nimport React from 'react';\n\nimport style from './pills.shadow.css';\nimport type { HighlightedItemAddonProps, HighlightedPillComponent } from './Pills.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass PillsFHRoot extends Component {\n static displayName = 'PillsFH';\n static style = style;\n\n render() {\n return (<Root render={Pills} />);\n }\n}\n\nclass HighlightedItemRoot extends Component {\n static displayName = 'HighlightedItem';\n static style = style;\n\n state = {\n clicked: false,\n };\n\n handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n const { onClick } = this.asProps;\n\n onClick?.(e);\n this.setState({ clicked: false });\n setTimeout(() => {\n this.setState({ clicked: true });\n });\n }\n\n getAddonProps() {\n return {\n clicked: this.state.clicked,\n };\n }\n\n render() {\n const SHighlightedPill = Root;\n\n return sstyled(this.asProps.styles)(<SHighlightedPill render={Pills.Item} onClick={this.handleClick.bind(this)} />);\n }\n}\n\nfunction HighlightedItemAddon(props: HighlightedItemAddonProps & { clicked: boolean } & IRootComponentProps) {\n const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n return (\n <Pills.Item.Addon>\n {hasChildren\n ? (<Children />)\n : (\n <>\n <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n </>\n )}\n </Pills.Item.Addon>\n );\n}\n\nexport const PillsFH = createComponent(PillsFHRoot, {\n Item: Pills.Item,\n HighlightedItem: createComponent(HighlightedItemRoot, { Text: Pills.Item.Text, Addon: HighlightedItemAddon }),\n}) as HighlightedPillComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Pills.type.js","names":[],"sources":["../../../../src/components/pills/Pills.type.ts"],"sourcesContent":["import type { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport type Pills from '@semcore/pills';\nimport type { PillProps } from '@semcore/pills';\n\nexport type HighlightedItemAddonProps = {\n animatedSparkleCount?: number;\n};\n\nexport type HighlightedPillComponent = typeof Pills & {\n HighlightedItem: Intergalactic.Component<'div', PillProps> & {\n Text: typeof Box;\n Addon: Intergalactic.Component<'div', HighlightedItemAddonProps>;\n };\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
SHighlightedPill {
|
|
2
|
+
border: 1px solid transparent;
|
|
3
|
+
background:
|
|
4
|
+
linear-gradient(white, white) padding-box,
|
|
5
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
6
|
+
) border-box;
|
|
7
|
+
background-origin: border-box;
|
|
8
|
+
background-clip: padding-box, border-box;
|
|
9
|
+
z-index: 1;
|
|
10
|
+
|
|
11
|
+
&:hover {
|
|
12
|
+
background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,
|
|
13
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
14
|
+
) border-box;
|
|
15
|
+
}
|
|
16
|
+
&[selected] {
|
|
17
|
+
background:
|
|
18
|
+
var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,
|
|
19
|
+
var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;
|
|
20
|
+
background-origin: border-box;
|
|
21
|
+
background-clip: padding-box, border-box;
|
|
22
|
+
border-color: transparent;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
SHighlightedPill:focus-visible {
|
|
27
|
+
outline: none;
|
|
28
|
+
position: relative;
|
|
29
|
+
/*isolation: isolate;*/
|
|
30
|
+
|
|
31
|
+
&::before {
|
|
32
|
+
content: "";
|
|
33
|
+
position: absolute;
|
|
34
|
+
z-index: -1;
|
|
35
|
+
inset: 0;
|
|
36
|
+
margin: -4px;
|
|
37
|
+
padding: 4px;
|
|
38
|
+
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
39
|
+
|
|
40
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
|
|
41
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
42
|
+
mask-composite: exclude;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[neighborLocation='left']::before {
|
|
46
|
+
border-top-left-radius: 0;
|
|
47
|
+
border-bottom-left-radius: 0;
|
|
48
|
+
}
|
|
49
|
+
&[neighborLocation='right']::before {
|
|
50
|
+
border-top-right-radius: 0;
|
|
51
|
+
border-bottom-right-radius: 0;
|
|
52
|
+
}
|
|
53
|
+
&[neighborLocation='both']::before {
|
|
54
|
+
border-radius: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
10
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
11
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
12
|
+
import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';
|
|
13
|
+
import Radio, { RadioGroup } from '@semcore/radio';
|
|
14
|
+
import React from 'react';
|
|
15
|
+
/*!__reshadow-styles__:"./radio.shadow.css"*/
|
|
16
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedRadio_ts8qi_gg_{position:relative}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{box-shadow:none;border-color:transparent;content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:1px;opacity:1;border-width:3px;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:focus-visible+[data-ui-name=\"Value.RadioMark\"]::before{-webkit-mask:none;mask:none;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]+[data-ui-name=\"Value.RadioMark\"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n ) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedRadio_ts8qi_gg_:not(._state_invalid_ts8qi_gg_) input[data-ui-name=\"RadioFH.Value\"]:checked:not(:focus-visible)+[data-ui-name=\"Value.RadioMark\"]::before{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}", /*__inner_css_end__*/"ts8qi_gg_"),
|
|
17
|
+
/*__reshadow_css_end__*/
|
|
18
|
+
{
|
|
19
|
+
"__SHighlightedRadio": "___SHighlightedRadio_ts8qi_gg_",
|
|
20
|
+
"_state_invalid": "_state_invalid_ts8qi_gg_"
|
|
21
|
+
});
|
|
22
|
+
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
23
|
+
var RadioFHRoot = /*#__PURE__*/function (_Component) {
|
|
24
|
+
function RadioFHRoot() {
|
|
25
|
+
var _this;
|
|
26
|
+
_classCallCheck(this, RadioFHRoot);
|
|
27
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
28
|
+
args[_key] = arguments[_key];
|
|
29
|
+
}
|
|
30
|
+
_this = _callSuper(this, RadioFHRoot, [].concat(args));
|
|
31
|
+
_defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
|
|
32
|
+
_defineProperty(_this, "state", {
|
|
33
|
+
checked: false
|
|
34
|
+
});
|
|
35
|
+
_defineProperty(_this, "setChecked", function () {
|
|
36
|
+
_this.setState({
|
|
37
|
+
checked: false
|
|
38
|
+
});
|
|
39
|
+
setTimeout(function () {
|
|
40
|
+
var _this$inputRef$curren;
|
|
41
|
+
_this.setState({
|
|
42
|
+
checked: (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
return _this;
|
|
47
|
+
}
|
|
48
|
+
_inherits(RadioFHRoot, _Component);
|
|
49
|
+
return _createClass(RadioFHRoot, [{
|
|
50
|
+
key: "getValueProps",
|
|
51
|
+
value: function getValueProps() {
|
|
52
|
+
return {
|
|
53
|
+
ref: this.inputRef,
|
|
54
|
+
onChange: this.setChecked,
|
|
55
|
+
// for click by label / programmatically changed
|
|
56
|
+
onClick: this.setChecked // for click by radio
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
}, {
|
|
60
|
+
key: "getAnimatedSparklesProps",
|
|
61
|
+
value: function getAnimatedSparklesProps() {
|
|
62
|
+
// @ts-ignore
|
|
63
|
+
var size = this.context.size;
|
|
64
|
+
var checked = this.state.checked;
|
|
65
|
+
return {
|
|
66
|
+
show: checked,
|
|
67
|
+
top: size === 'l' ? '7px' : '5px',
|
|
68
|
+
left: size === 'l' ? '5px' : '3px'
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
}, {
|
|
72
|
+
key: "render",
|
|
73
|
+
value: function render() {
|
|
74
|
+
var _ref = this.asProps,
|
|
75
|
+
_ref2;
|
|
76
|
+
var SHighlightedRadio = Radio;
|
|
77
|
+
var _this$asProps = this.asProps,
|
|
78
|
+
styles = _this$asProps.styles,
|
|
79
|
+
Children = _this$asProps.Children,
|
|
80
|
+
hasChildren = _this$asProps.children;
|
|
81
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SHighlightedRadio, _ref2.cn("SHighlightedRadio", _objectSpread({}, _assignProps({}, _ref))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioFH.Value, null), /*#__PURE__*/React.createElement(RadioFH.Text, null)));
|
|
82
|
+
}
|
|
83
|
+
}]);
|
|
84
|
+
}(Component);
|
|
85
|
+
_defineProperty(RadioFHRoot, "displayName", 'RadioFH');
|
|
86
|
+
_defineProperty(RadioFHRoot, "style", style);
|
|
87
|
+
// @ts-ignore
|
|
88
|
+
_defineProperty(RadioFHRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
|
|
89
|
+
export var RadioFH = createComponent(RadioFHRoot, {
|
|
90
|
+
Text: Radio.Text,
|
|
91
|
+
Value: Radio.Value,
|
|
92
|
+
AnimatedSparkles: AnimatedSparkles
|
|
93
|
+
});
|
|
94
|
+
//# sourceMappingURL=Radio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["Component","createComponent","Root","sstyled","CONTEXT_COMPONENT","Radio","RadioGroup","React","style","_sstyled","insert","AnimatedSparkles","RadioFHRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","checked","setState","setTimeout","_this$inputRef$curren","inputRef","current","_inherits","_createClass","key","value","getValueProps","ref","onChange","setChecked","onClick","getAnimatedSparklesProps","size","context","state","show","top","left","render","_ref","asProps","_ref2","SHighlightedRadio","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread","_assignProps","Fragment","RadioFH","Value","Text"],"sources":["../../../../src/components/radio/Radio.tsx"],"sourcesContent":["import { Component, createComponent, Root, sstyled, CONTEXT_COMPONENT } from '@semcore/core';\nimport type { RadioProps } from '@semcore/radio';\nimport Radio, { RadioGroup } from '@semcore/radio';\nimport React from 'react';\n\nimport style from './radio.shadow.css';\nimport type { HighlightedRadioComponent } from './Radio.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass RadioFHRoot extends Component<RadioProps> {\n static displayName = 'RadioFH';\n static style = style;\n // @ts-ignore\n static contextType = RadioGroup[CONTEXT_COMPONENT];\n\n inputRef = React.createRef<HTMLInputElement>();\n\n state = {\n checked: false,\n };\n\n getValueProps() {\n return {\n ref: this.inputRef,\n onChange: this.setChecked, // for click by label / programmatically changed\n onClick: this.setChecked, // for click by radio\n };\n }\n\n getAnimatedSparklesProps() {\n // @ts-ignore\n const { size } = this.context;\n const checked = this.state.checked;\n\n return {\n show: checked,\n top: size === 'l' ? '7px' : '5px',\n left: size === 'l' ? '5px' : '3px',\n };\n }\n\n setChecked = () => {\n this.setState({ checked: false });\n setTimeout(() => {\n this.setState({ checked: this.inputRef.current?.checked });\n });\n };\n\n render() {\n const SHighlightedRadio = Root;\n const { styles, Children, children: hasChildren } = this.asProps;\n\n return sstyled(styles)(\n <SHighlightedRadio render={Radio}>\n {hasChildren\n ? <Children />\n : (\n <>\n <RadioFH.Value />\n <RadioFH.Text />\n </>\n )}\n </SHighlightedRadio>,\n );\n }\n}\n\nexport const RadioFH = createComponent(RadioFHRoot, {\n Text: Radio.Text,\n Value: Radio.Value,\n AnimatedSparkles,\n}) as HighlightedRadioComponent;\n"],"mappings":";;;;;;;;;;;AAAA,SAASA,SAAS,EAAEC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,iBAAiB,QAAQ,eAAe;AAE5F,OAAOC,KAAK,IAAIC,UAAU,QAAQ,gBAAgB;AAClD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;AAAA;AAI1B,SAASC,gBAAgB,QAAQ,iDAAiD;AAAC,IAE7EC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,KAAA;IAAAC,eAAA,OAAAH,WAAA;IAAA,SAAAI,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,GAAAQ,UAAA,OAAAV,WAAA,KAAAW,MAAA,CAAAJ,IAAA;IAAAK,eAAA,CAAAV,KAAA,2BAMJP,KAAK,CAACkB,SAAS,CAAmB,CAAC;IAAAD,eAAA,CAAAV,KAAA,WAEtC;MACNY,OAAO,EAAE;IACX,CAAC;IAAAF,eAAA,CAAAV,KAAA,gBAsBY,YAAM;MACjBA,KAAA,CAAKa,QAAQ,CAAC;QAAED,OAAO,EAAE;MAAM,CAAC,CAAC;MACjCE,UAAU,CAAC,YAAM;QAAA,IAAAC,qBAAA;QACff,KAAA,CAAKa,QAAQ,CAAC;UAAED,OAAO,GAAAG,qBAAA,GAAEf,KAAA,CAAKgB,QAAQ,CAACC,OAAO,cAAAF,qBAAA,uBAArBA,qBAAA,CAAuBH;QAAQ,CAAC,CAAC;MAC5D,CAAC,CAAC;IACJ,CAAC;IAAA,OAAAZ,KAAA;EAAA;EAAAkB,SAAA,CAAApB,WAAA,EAAAC,UAAA;EAAA,OAAAoB,YAAA,CAAArB,WAAA;IAAAsB,GAAA;IAAAC,KAAA,EAzBD,SAAAC,aAAaA,CAAA,EAAG;MACd,OAAO;QACLC,GAAG,EAAE,IAAI,CAACP,QAAQ;QAClBQ,QAAQ,EAAE,IAAI,CAACC,UAAU;QAAE;QAC3BC,OAAO,EAAE,IAAI,CAACD,UAAU,CAAE;MAC5B,CAAC;IACH;EAAC;IAAAL,GAAA;IAAAC,KAAA,EAED,SAAAM,wBAAwBA,CAAA,EAAG;MACzB;MACA,IAAQC,IAAI,GAAK,IAAI,CAACC,OAAO,CAArBD,IAAI;MACZ,IAAMhB,OAAO,GAAG,IAAI,CAACkB,KAAK,CAAClB,OAAO;MAElC,OAAO;QACLmB,IAAI,EAAEnB,OAAO;QACboB,GAAG,EAAEJ,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG,KAAK;QACjCK,IAAI,EAAEL,IAAI,KAAK,GAAG,GAAG,KAAK,GAAG;MAC/B,CAAC;IACH;EAAC;IAAAR,GAAA;IAAAC,KAAA,EASD,SAAAa,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIM/C,KAAK;MAHlC,IAAAgD,aAAA,GAAoD,IAAI,CAACH,OAAO;QAAxDI,MAAM,GAAAD,aAAA,CAANC,MAAM;QAAEC,QAAQ,GAAAF,aAAA,CAARE,QAAQ;QAAYC,WAAW,GAAAH,aAAA,CAArBI,QAAQ;MAElC,OAAAN,KAAA,GAAOhD,OAAO,CAACmD,MAAM,CAAC,eACpB/C,KAAA,CAAAmD,aAAA,CAACN,iBAAiB,EAAAD,KAAA,CAAAQ,EAAA,sBAAAC,aAAA,KAAAC,YAAA,KAAAZ,IAAA,KACfO,WAAW,gBACRjD,KAAA,CAAAmD,aAAA,CAACH,QAAQ,EAAAJ,KAAA,CAAAQ,EAAA,gBAAE,CAAC,gBAEVpD,KAAA,CAAAmD,aAAA,CAAAnD,KAAA,CAAAuD,QAAA,qBACEvD,KAAA,CAAAmD,aAAA,CAACK,OAAO,CAACC,KAAK,MAAE,CAAC,eACjBzD,KAAA,CAAAmD,aAAA,CAACK,OAAO,CAACE,IAAI,MAAE,CACf,CAES,CAAC;IAExB;EAAC;AAAA,EAvDuBjE,SAAS;AAAAwB,eAAA,CAA7BZ,WAAW,iBACM,SAAS;AAAAY,eAAA,CAD1BZ,WAAW,WAEAJ,KAAK;AACpB;AAAAgB,eAAA,CAHIZ,WAAW,iBAIMN,UAAU,CAACF,iBAAiB,CAAC;AAsDpD,OAAO,IAAM2D,OAAO,GAAG9D,eAAe,CAACW,WAAW,EAAE;EAClDqD,IAAI,EAAE5D,KAAK,CAAC4D,IAAI;EAChBD,KAAK,EAAE3D,KAAK,CAAC2D,KAAK;EAClBrD,gBAAgB,EAAhBA;AACF,CAAC,CAA8B","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Radio.type.js","names":[],"sources":["../../../../src/components/radio/Radio.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type { RadioCtx, RadioProps, RadioValueProps } from '@semcore/radio';\nimport type { Text } from '@semcore/typography';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedRadioComponent = Intergalactic.Component<'label', RadioProps, RadioCtx> & {\n Value: Intergalactic.Component<'input', RadioValueProps>;\n Text: typeof Text;\n AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
SHighlightedRadio {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
SHighlightedRadio:not([state="invalid"]) {
|
|
6
|
+
input[data-ui-name="RadioFH.Value"]:focus-visible + [data-ui-name="Value.RadioMark"]::before {
|
|
7
|
+
box-shadow: none;
|
|
8
|
+
border-color: transparent;
|
|
9
|
+
content: "";
|
|
10
|
+
position: absolute;
|
|
11
|
+
z-index: -1;
|
|
12
|
+
inset: 0;
|
|
13
|
+
margin: -3px;
|
|
14
|
+
padding: 1px;
|
|
15
|
+
opacity: 1;
|
|
16
|
+
border-width: 3px;
|
|
17
|
+
|
|
18
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
|
|
19
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
20
|
+
mask-composite: exclude;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
input[data-ui-name="RadioFH.Value"]:checked:focus-visible + [data-ui-name="Value.RadioMark"]::before {
|
|
24
|
+
mask: none;
|
|
25
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
input[data-ui-name="RadioFH.Value"] + [data-ui-name="Value.RadioMark"]::before {
|
|
29
|
+
/*SValue[state='normal']::before {*/
|
|
30
|
+
border-color: transparent;
|
|
31
|
+
background: linear-gradient(white, white) padding-box,
|
|
32
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
33
|
+
) border-box;
|
|
34
|
+
background-origin: border-box;
|
|
35
|
+
background-clip: padding-box, border-box;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
input[data-ui-name="RadioFH.Value"]:checked:not(:focus-visible) + [data-ui-name="Value.RadioMark"]::before {
|
|
39
|
+
border-color: transparent;
|
|
40
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,
|
|
41
|
+
var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
4
|
+
import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
9
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
10
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
11
|
+
import { createComponent, Root, Component } from '@semcore/core';
|
|
12
|
+
import Select from '@semcore/select';
|
|
13
|
+
import React from 'react';
|
|
14
|
+
import { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';
|
|
15
|
+
var SelectFHRoot = /*#__PURE__*/function (_Component) {
|
|
16
|
+
function SelectFHRoot() {
|
|
17
|
+
_classCallCheck(this, SelectFHRoot);
|
|
18
|
+
return _callSuper(this, SelectFHRoot, arguments);
|
|
19
|
+
}
|
|
20
|
+
_inherits(SelectFHRoot, _Component);
|
|
21
|
+
return _createClass(SelectFHRoot, [{
|
|
22
|
+
key: "render",
|
|
23
|
+
value: function render() {
|
|
24
|
+
var _ref = this.asProps;
|
|
25
|
+
return /*#__PURE__*/React.createElement(Select, _assignProps({}, _ref));
|
|
26
|
+
}
|
|
27
|
+
}]);
|
|
28
|
+
}(Component);
|
|
29
|
+
_defineProperty(SelectFHRoot, "displayName", 'SelectFH');
|
|
30
|
+
function Trigger(props) {
|
|
31
|
+
var _ref2 = arguments[0];
|
|
32
|
+
var Children = props.Children,
|
|
33
|
+
hasChildren = props.children;
|
|
34
|
+
return /*#__PURE__*/React.createElement(Select.Trigger, _assignProps2({
|
|
35
|
+
"tag": ButtonTriggerFH
|
|
36
|
+
}, _ref2), hasChildren ? /*#__PURE__*/React.createElement(Children, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectFH.Trigger.Addon, null), /*#__PURE__*/React.createElement(SelectFH.Trigger.Text, null)));
|
|
37
|
+
}
|
|
38
|
+
export var SelectFH = createComponent(SelectFHRoot, {
|
|
39
|
+
Trigger: [Trigger, {
|
|
40
|
+
Text: ButtonTriggerFH.Text,
|
|
41
|
+
Addon: ButtonTriggerFH.Addon
|
|
42
|
+
}],
|
|
43
|
+
Popper: Select.Popper,
|
|
44
|
+
Menu: Select.Menu,
|
|
45
|
+
Option: Select.Option,
|
|
46
|
+
List: Select.List
|
|
47
|
+
});
|
|
48
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","names":["createComponent","Root","Component","Select","React","ButtonTriggerFH","SelectFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","createElement","_assignProps","_defineProperty","Trigger","props","_ref2","arguments[0]","Children","hasChildren","children","_assignProps2","Fragment","SelectFH","Addon","Text","Popper","Menu","Option","List"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, Component } from '@semcore/core';\nimport Select from '@semcore/select';\nimport React from 'react';\n\nimport { ButtonTriggerFH } from '../../inner-components/button-trigger/ButtonTrigger';\n\nclass SelectFHRoot extends Component {\n static displayName = 'SelectFH';\n\n render() {\n return (\n <Root render={Select} />\n );\n }\n}\n\nfunction Trigger(props: IRootComponentProps) {\n const { Children, children: hasChildren } = props;\n\n return (\n <Root render={Select.Trigger} tag={ButtonTriggerFH}>\n {hasChildren\n ? <Children />\n : (\n <>\n <SelectFH.Trigger.Addon />\n <SelectFH.Trigger.Text />\n </>\n )}\n </Root>\n );\n}\n\nexport const SelectFH = createComponent(SelectFHRoot, {\n Trigger: [Trigger, {\n Text: ButtonTriggerFH.Text,\n Addon: ButtonTriggerFH.Addon,\n }],\n Popper: Select.Popper,\n Menu: Select.Menu,\n Option: Select.Option,\n List: Select.List,\n}) as typeof Select;\n"],"mappings":";;;;;;;;;;AACA,SAASA,eAAe,EAAEC,IAAI,EAAEC,SAAS,QAAQ,eAAe;AAChE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,eAAe,QAAQ,qDAAqD;AAAC,IAEhFC,YAAY,0BAAAC,UAAA;EAAA,SAAAD,aAAA;IAAAE,eAAA,OAAAF,YAAA;IAAA,OAAAG,UAAA,OAAAH,YAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,YAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,YAAA;IAAAO,GAAA;IAAAC,KAAA,EAGhB,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;MACP,oBACEb,KAAA,CAAAc,aAAA,CAAcf,MAAM,EAAAgB,YAAA,KAAAH,IAAA,CAAG,CAAC;IAE5B;EAAC;AAAA,EAPwBd,SAAS;AAAAkB,eAAA,CAA9Bd,YAAY,iBACK,UAAU;AASjC,SAASe,OAAOA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAC3C,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAE1B,oBACEvB,KAAA,CAAAc,aAAA,CAAcf,MAAM,CAACkB,OAAO,EAAAO,aAAA;IAAA,OAAOvB;EAAe,GAAAkB,KAAA,GAC/CG,WAAW,gBACRtB,KAAA,CAAAc,aAAA,CAACO,QAAQ,MAAE,CAAC,gBAEVrB,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAyB,QAAA,qBACEzB,KAAA,CAAAc,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACU,KAAK,MAAE,CAAC,eAC1B3B,KAAA,CAAAc,aAAA,CAACY,QAAQ,CAACT,OAAO,CAACW,IAAI,MAAE,CACxB,CAEJ,CAAC;AAEX;AAEA,OAAO,IAAMF,QAAQ,GAAG9B,eAAe,CAACM,YAAY,EAAE;EACpDe,OAAO,EAAE,CAACA,OAAO,EAAE;IACjBW,IAAI,EAAE3B,eAAe,CAAC2B,IAAI;IAC1BD,KAAK,EAAE1B,eAAe,CAAC0B;EACzB,CAAC,CAAC;EACFE,MAAM,EAAE9B,MAAM,CAAC8B,MAAM;EACrBC,IAAI,EAAE/B,MAAM,CAAC+B,IAAI;EACjBC,MAAM,EAAEhC,MAAM,CAACgC,MAAM;EACrBC,IAAI,EAAEjC,MAAM,CAACiC;AACf,CAAC,CAAkB","ignoreList":[]}
|