@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,90 @@
|
|
|
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 { Component, createComponent, Root, sstyled } from '@semcore/core';
|
|
14
|
+
import Switch from '@semcore/switch';
|
|
15
|
+
import React from 'react';
|
|
16
|
+
/*!__reshadow-styles__:"./switch.shadow.css"*/
|
|
17
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SToggle_1qdzt_gg_.__checked_1qdzt_gg_{color:var(--intergalactic-control-primary-info, #008ff8);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}.___SToggle_1qdzt_gg_:has(.___SInput_1qdzt_gg_:focus-visible){box-shadow:none}.___SToggle_1qdzt_gg_:has(.___SInput_1qdzt_gg_:focus-visible)::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:inherit;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}", /*__inner_css_end__*/"1qdzt_gg_"),
|
|
18
|
+
/*__reshadow_css_end__*/
|
|
19
|
+
{
|
|
20
|
+
"__SToggle": "___SToggle_1qdzt_gg_",
|
|
21
|
+
"_checked": "__checked_1qdzt_gg_",
|
|
22
|
+
"__SInput": "___SInput_1qdzt_gg_"
|
|
23
|
+
});
|
|
24
|
+
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
25
|
+
var SwitchFHRoot = /*#__PURE__*/function (_Component) {
|
|
26
|
+
function SwitchFHRoot() {
|
|
27
|
+
var _this;
|
|
28
|
+
_classCallCheck(this, SwitchFHRoot);
|
|
29
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
30
|
+
args[_key] = arguments[_key];
|
|
31
|
+
}
|
|
32
|
+
_this = _callSuper(this, SwitchFHRoot, [].concat(args));
|
|
33
|
+
_defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
|
|
34
|
+
return _this;
|
|
35
|
+
}
|
|
36
|
+
_inherits(SwitchFHRoot, _Component);
|
|
37
|
+
return _createClass(SwitchFHRoot, [{
|
|
38
|
+
key: "getValueProps",
|
|
39
|
+
value: function getValueProps() {
|
|
40
|
+
var _this2 = this;
|
|
41
|
+
return {
|
|
42
|
+
ref: this.inputRef,
|
|
43
|
+
onChange: function onChange() {
|
|
44
|
+
setTimeout(function () {
|
|
45
|
+
_this2.forceUpdate();
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
}, {
|
|
51
|
+
key: "getAnimatedSparklesProps",
|
|
52
|
+
value: function getAnimatedSparklesProps() {
|
|
53
|
+
var _this$inputRef$curren;
|
|
54
|
+
var size = this.asProps.size;
|
|
55
|
+
var checked = (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked;
|
|
56
|
+
var left = '4px';
|
|
57
|
+
if (size === 'l') left = '12px';
|
|
58
|
+
if (size === 'xl') left = '14px';
|
|
59
|
+
return {
|
|
60
|
+
show: checked,
|
|
61
|
+
curve: size === 'l' || size === 'xl' ? 9 : undefined,
|
|
62
|
+
left: left
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
}, {
|
|
66
|
+
key: "render",
|
|
67
|
+
value: function render() {
|
|
68
|
+
var _ref = this.asProps,
|
|
69
|
+
_ref3;
|
|
70
|
+
var SInput = Switch;
|
|
71
|
+
return _ref3 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SInput, _ref3.cn("SInput", _objectSpread({}, _assignProps({}, _ref))));
|
|
72
|
+
}
|
|
73
|
+
}]);
|
|
74
|
+
}(Component);
|
|
75
|
+
_defineProperty(SwitchFHRoot, "displayName", 'SwitchFH');
|
|
76
|
+
_defineProperty(SwitchFHRoot, "style", style);
|
|
77
|
+
function Value(props) {
|
|
78
|
+
var _ref2 = arguments[0],
|
|
79
|
+
_ref4;
|
|
80
|
+
var SToggle = Switch.Value;
|
|
81
|
+
return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SToggle, _ref4.cn("SToggle", _objectSpread({}, _assignProps2({
|
|
82
|
+
"onChange": props.onChange
|
|
83
|
+
}, _ref2))));
|
|
84
|
+
}
|
|
85
|
+
export var SwitchFH = createComponent(SwitchFHRoot, {
|
|
86
|
+
Addon: Switch.Addon,
|
|
87
|
+
Value: Value,
|
|
88
|
+
AnimatedSparkles: AnimatedSparkles
|
|
89
|
+
});
|
|
90
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","names":["Component","createComponent","Root","sstyled","Switch","React","style","_sstyled","insert","AnimatedSparkles","SwitchFHRoot","_Component","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","concat","_defineProperty","createRef","_inherits","_createClass","key","value","getValueProps","_this2","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","_this$inputRef$curren","size","asProps","checked","current","left","show","curve","undefined","render","_ref","_ref3","SInput","styles","createElement","cn","_objectSpread","_assignProps","Value","props","_ref2","arguments[0]","_ref4","SToggle","_assignProps2","SwitchFH","Addon"],"sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport type { SwitchProps } from '@semcore/switch';\nimport Switch from '@semcore/switch';\nimport React from 'react';\n\nimport style from './switch.shadow.css';\nimport type { HighlightedSwitchComponent } from './Switch.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass SwitchFHRoot extends Component<SwitchProps> {\n static displayName = 'SwitchFH';\n static style = style;\n\n inputRef = React.createRef<HTMLInputElement>();\n\n getValueProps() {\n return {\n ref: this.inputRef,\n onChange: () => {\n setTimeout(() => {\n this.forceUpdate();\n });\n },\n };\n }\n\n getAnimatedSparklesProps() {\n const { size } = this.asProps;\n const checked = this.inputRef.current?.checked;\n let left = '4px';\n if (size === 'l') left = '12px';\n if (size === 'xl') left = '14px';\n\n return {\n show: checked,\n curve: size === 'l' || size === 'xl' ? 9 : undefined,\n left,\n };\n }\n\n render() {\n const SInput = Root;\n return sstyled(this.asProps.styles)(\n <SInput render={Switch} />,\n );\n }\n}\n\nfunction Value(props: IRootComponentProps & { onChange: () => void }) {\n const SToggle = Root;\n\n return sstyled(props.styles)(<SToggle render={Switch.Value} onChange={props.onChange} />);\n}\n\nexport const SwitchFH = createComponent(SwitchFHRoot, {\n Addon: Switch.Addon,\n Value: Value,\n AnimatedSparkles,\n}) as HighlightedSwitchComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.type.js","names":[],"sources":["../../../../src/components/switch/Switch.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type Switch from '@semcore/switch';\n\nimport type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';\n\nexport type HighlightedSwitchComponent = typeof Switch & {\n AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
SToggle[checked] {
|
|
2
|
+
color: var(--intergalactic-control-primary-info, #008ff8);
|
|
3
|
+
background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8));
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
SToggle:has(SInput:focus-visible) {
|
|
7
|
+
box-shadow: none;
|
|
8
|
+
|
|
9
|
+
&::before {
|
|
10
|
+
content: "";
|
|
11
|
+
position: absolute;
|
|
12
|
+
z-index: -1;
|
|
13
|
+
inset: 0;
|
|
14
|
+
margin: -4px;
|
|
15
|
+
padding: 4px;
|
|
16
|
+
border-radius: inherit;
|
|
17
|
+
|
|
18
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
|
|
19
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
20
|
+
mask-composite: exclude;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,116 @@
|
|
|
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 _assignProps3 } from "@semcore/core";
|
|
11
|
+
import { assignProps as _assignProps2 } from "@semcore/core";
|
|
12
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
13
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
14
|
+
import { Component, createComponent, Root, sstyled } from '@semcore/core';
|
|
15
|
+
import SummaryAI from '@semcore/icon/SummaryAI/m';
|
|
16
|
+
import TabLine from '@semcore/tab-line';
|
|
17
|
+
import React from 'react';
|
|
18
|
+
/*!__reshadow-styles__:"./tabLine.shadow.css"*/
|
|
19
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedItem_fe5js_gg_::after,.___SHighlightedItem_fe5js_gg_:not(:focus-visible)::before{opacity:0;transition:opacity calc(var(--intergalactic-duration-control, 200)*1ms) ease-in-out}.___SHighlightedItem_fe5js_gg_:not(:focus-visible)::before{background:var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff))}@media (hover:hover){.___SHighlightedItem_fe5js_gg_:hover:not(:focus-visible)::before{opacity:1}}.___SHighlightedItem_fe5js_gg_.__selected_fe5js_gg_::after{opacity:1;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}.___SHighlightedItem_fe5js_gg_:focus-visible::before{height:auto}.___SHighlightedCaret_fe5js_gg_{background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8))}", /*__inner_css_end__*/"fe5js_gg_"),
|
|
20
|
+
/*__reshadow_css_end__*/
|
|
21
|
+
{
|
|
22
|
+
"__SHighlightedCaret": "___SHighlightedCaret_fe5js_gg_",
|
|
23
|
+
"__SHighlightedItem": "___SHighlightedItem_fe5js_gg_",
|
|
24
|
+
"_selected": "__selected_fe5js_gg_"
|
|
25
|
+
});
|
|
26
|
+
import { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';
|
|
27
|
+
var TabLineFHRoot = /*#__PURE__*/function (_Component) {
|
|
28
|
+
function TabLineFHRoot() {
|
|
29
|
+
_classCallCheck(this, TabLineFHRoot);
|
|
30
|
+
return _callSuper(this, TabLineFHRoot, arguments);
|
|
31
|
+
}
|
|
32
|
+
_inherits(TabLineFHRoot, _Component);
|
|
33
|
+
return _createClass(TabLineFHRoot, [{
|
|
34
|
+
key: "render",
|
|
35
|
+
value: function render() {
|
|
36
|
+
var _ref = this.asProps;
|
|
37
|
+
return /*#__PURE__*/React.createElement(TabLine, _assignProps({}, _ref));
|
|
38
|
+
}
|
|
39
|
+
}]);
|
|
40
|
+
}(Component);
|
|
41
|
+
_defineProperty(TabLineFHRoot, "displayName", 'TabLineFH');
|
|
42
|
+
_defineProperty(TabLineFHRoot, "style", style);
|
|
43
|
+
var HighlightedItemRoot = /*#__PURE__*/function (_Component2) {
|
|
44
|
+
function HighlightedItemRoot() {
|
|
45
|
+
var _this;
|
|
46
|
+
_classCallCheck(this, HighlightedItemRoot);
|
|
47
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
48
|
+
args[_key] = arguments[_key];
|
|
49
|
+
}
|
|
50
|
+
_this = _callSuper(this, HighlightedItemRoot, [].concat(args));
|
|
51
|
+
_defineProperty(_this, "state", {
|
|
52
|
+
clicked: false
|
|
53
|
+
});
|
|
54
|
+
return _this;
|
|
55
|
+
}
|
|
56
|
+
_inherits(HighlightedItemRoot, _Component2);
|
|
57
|
+
return _createClass(HighlightedItemRoot, [{
|
|
58
|
+
key: "handleClick",
|
|
59
|
+
value: function handleClick(e) {
|
|
60
|
+
var _this2 = this;
|
|
61
|
+
var onClick = this.asProps.onClick;
|
|
62
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
63
|
+
this.setState({
|
|
64
|
+
clicked: false
|
|
65
|
+
});
|
|
66
|
+
setTimeout(function () {
|
|
67
|
+
_this2.setState({
|
|
68
|
+
clicked: true
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
}, {
|
|
73
|
+
key: "getAddonProps",
|
|
74
|
+
value: function getAddonProps() {
|
|
75
|
+
return {
|
|
76
|
+
clicked: this.state.clicked
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
}, {
|
|
80
|
+
key: "render",
|
|
81
|
+
value: function render() {
|
|
82
|
+
var _ref2 = this.asProps,
|
|
83
|
+
_ref4;
|
|
84
|
+
var SHighlightedItem = TabLine.Item;
|
|
85
|
+
return _ref4 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", _objectSpread({}, _assignProps2({
|
|
86
|
+
"onClick": this.handleClick.bind(this)
|
|
87
|
+
}, _ref2))));
|
|
88
|
+
}
|
|
89
|
+
}]);
|
|
90
|
+
}(Component);
|
|
91
|
+
_defineProperty(HighlightedItemRoot, "displayName", 'HighlightedItem');
|
|
92
|
+
_defineProperty(HighlightedItemRoot, "style", style);
|
|
93
|
+
function HighlightedAddon(props) {
|
|
94
|
+
var _ref3 = arguments[0];
|
|
95
|
+
var clicked = props.clicked,
|
|
96
|
+
animatedSparkleCount = props.animatedSparkleCount,
|
|
97
|
+
Children = props.Children,
|
|
98
|
+
hasChildren = props.children;
|
|
99
|
+
return /*#__PURE__*/React.createElement(TabLine.Item.Addon, _assignProps3({}, _ref3), 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 TabLineFH = createComponent(TabLineFHRoot, {
|
|
107
|
+
Item: [TabLine.Item, {
|
|
108
|
+
Text: TabLine.Item.Text,
|
|
109
|
+
Addon: TabLine.Item.Addon
|
|
110
|
+
}],
|
|
111
|
+
HighlightedItem: createComponent(HighlightedItemRoot, {
|
|
112
|
+
Text: TabLine.Item.Text,
|
|
113
|
+
Addon: HighlightedAddon
|
|
114
|
+
})
|
|
115
|
+
});
|
|
116
|
+
//# sourceMappingURL=TabLine.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabLine.js","names":["Component","createComponent","Root","sstyled","SummaryAI","TabLine","React","style","_sstyled","insert","AnimatedSparkles","TabLineFHRoot","_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","_ref4","SHighlightedItem","Item","styles","cn","_objectSpread","_assignProps2","bind","HighlightedAddon","props","_ref3","arguments[0]","animatedSparkleCount","Children","hasChildren","children","Addon","_assignProps3","Fragment","color","show","count","TabLineFH","Text","HighlightedItem"],"sources":["../../../../src/components/tab-line/TabLine.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport TabLine from '@semcore/tab-line';\nimport React from 'react';\n\nimport style from './tabLine.shadow.css';\nimport type { HighlightedTabLineComponent } from './TabLine.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass TabLineFHRoot extends Component {\n static displayName = 'TabLineFH';\n static style = style;\n\n render() {\n return (<Root render={TabLine} />);\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 SHighlightedItem = Root;\n\n return sstyled(this.asProps.styles)(<SHighlightedItem render={TabLine.Item} onClick={this.handleClick.bind(this)} />);\n }\n}\n\nfunction HighlightedAddon(props: { animatedSparkleCount?: number; clicked: boolean } & IRootComponentProps) {\n const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n\n return (\n <Root render={TabLine.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 </Root>\n );\n}\n\nexport const TabLineFH = createComponent(TabLineFHRoot, {\n Item: [TabLine.Item, { Text: TabLine.Item.Text, Addon: TabLine.Item.Addon }],\n HighlightedItem: createComponent(HighlightedItemRoot, { Text: TabLine.Item.Text, Addon: HighlightedAddon }),\n}) as HighlightedTabLineComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TabLine.type.js","names":[],"sources":["../../../../src/components/tab-line/TabLine.type.ts"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport type TabLine from '@semcore/tab-line';\n\nexport type HighlightedTabLineComponent = typeof TabLine & {\n HighlightedItem: typeof TabLine.Item & {\n Addon: Intergalactic.Component<'div', { animatedSparkleCount?: number }>;\n };\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
SHighlightedItem {
|
|
2
|
+
&::after,
|
|
3
|
+
&:not(:focus-visible)::before {
|
|
4
|
+
opacity: 0;
|
|
5
|
+
transition: opacity calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
|
|
6
|
+
}
|
|
7
|
+
&:not(:focus-visible)::before {
|
|
8
|
+
background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff));
|
|
9
|
+
}
|
|
10
|
+
&:hover:not(:focus-visible)::before {
|
|
11
|
+
opacity: 1;
|
|
12
|
+
}
|
|
13
|
+
&[selected]::after {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&:focus-visible::before {
|
|
19
|
+
height: auto;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
SHighlightedCaret {
|
|
24
|
+
background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8));
|
|
25
|
+
}
|
package/lib/es6/index.js
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export * from './components/button/Button';
|
|
2
|
+
export * from './components/pills/Pills';
|
|
3
|
+
export * from './components/select/Select';
|
|
4
|
+
export * from './components/input/Input';
|
|
5
|
+
export * from './components/switch/Switch';
|
|
6
|
+
export * from './components/tab-line/TabLine';
|
|
7
|
+
export * from './components/notice/Notice';
|
|
8
|
+
export * from './components/badge/Badge';
|
|
9
|
+
export * from './components/radio/Radio';
|
|
10
|
+
export * from './components/checkbox/Checkbox';
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './components/button/Button';\nexport * from './components/pills/Pills';\nexport * from './components/select/Select';\nexport * from './components/input/Input';\nexport * from './components/switch/Switch';\nexport * from './components/tab-line/TabLine';\nexport * from './components/notice/Notice';\nexport * from './components/badge/Badge';\nexport * from './components/radio/Radio';\nexport * from './components/checkbox/Checkbox';\n"],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,0BAA0B;AACxC,cAAc,4BAA4B;AAC1C,cAAc,0BAA0B;AACxC,cAAc,4BAA4B;AAC1C,cAAc,+BAA+B;AAC7C,cAAc,4BAA4B;AAC1C,cAAc,0BAA0B;AACxC,cAAc,0BAA0B;AACxC,cAAc,gCAAgC","ignoreList":[]}
|
|
@@ -0,0 +1,62 @@
|
|
|
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 { ButtonTrigger } from '@semcore/base-trigger';
|
|
14
|
+
import { createComponent, Root, sstyled, Component } from '@semcore/core';
|
|
15
|
+
import SummaryAI from '@semcore/icon/SummaryAI/m';
|
|
16
|
+
import React from 'react';
|
|
17
|
+
/*!__reshadow-styles__:"./buttonTrigger.shadow.css"*/
|
|
18
|
+
var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_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}@media (hover:hover){.___SHighlightedButtonTrigger_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_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}}.___SHighlightedButtonTrigger_17qw8_gg_.__active_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_),.___SHighlightedButtonTrigger_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_):active{background:linear-gradient(white,white) 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}.___SHighlightedButtonTrigger_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_):focus-visible{outline:0;position:relative;border-color:transparent}.___SHighlightedButtonTrigger_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_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}.___SHighlightedButtonTrigger_17qw8_gg_._neighborLocation_left_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_):focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_17qw8_gg_._neighborLocation_right_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_):focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_17qw8_gg_._neighborLocation_both_17qw8_gg_:not(._state_invalid_17qw8_gg_):not(._state_valid_17qw8_gg_):focus-visible::before{border-radius:0}", /*__inner_css_end__*/"17qw8_gg_"),
|
|
19
|
+
/*__reshadow_css_end__*/
|
|
20
|
+
{
|
|
21
|
+
"__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_17qw8_gg_",
|
|
22
|
+
"_state_invalid": "_state_invalid_17qw8_gg_",
|
|
23
|
+
"_state_valid": "_state_valid_17qw8_gg_",
|
|
24
|
+
"_active": "__active_17qw8_gg_",
|
|
25
|
+
"_neighborLocation_left": "_neighborLocation_left_17qw8_gg_",
|
|
26
|
+
"_neighborLocation_right": "_neighborLocation_right_17qw8_gg_",
|
|
27
|
+
"_neighborLocation_both": "_neighborLocation_both_17qw8_gg_"
|
|
28
|
+
});
|
|
29
|
+
var ButtonTriggerFHRoot = /*#__PURE__*/function (_Component) {
|
|
30
|
+
function ButtonTriggerFHRoot() {
|
|
31
|
+
_classCallCheck(this, ButtonTriggerFHRoot);
|
|
32
|
+
return _callSuper(this, ButtonTriggerFHRoot, arguments);
|
|
33
|
+
}
|
|
34
|
+
_inherits(ButtonTriggerFHRoot, _Component);
|
|
35
|
+
return _createClass(ButtonTriggerFHRoot, [{
|
|
36
|
+
key: "render",
|
|
37
|
+
value: function render() {
|
|
38
|
+
var _ref = this.asProps,
|
|
39
|
+
_ref3;
|
|
40
|
+
var styles = this.asProps.styles;
|
|
41
|
+
var SHighlightedButtonTrigger = ButtonTrigger;
|
|
42
|
+
return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SHighlightedButtonTrigger, _ref3.cn("SHighlightedButtonTrigger", _objectSpread({}, _assignProps({}, _ref))));
|
|
43
|
+
}
|
|
44
|
+
}]);
|
|
45
|
+
}(Component);
|
|
46
|
+
_defineProperty(ButtonTriggerFHRoot, "displayName", 'ButtonTriggerFH');
|
|
47
|
+
_defineProperty(ButtonTriggerFHRoot, "style", style);
|
|
48
|
+
function Addon(props) {
|
|
49
|
+
var _ref2 = arguments[0],
|
|
50
|
+
_ref4;
|
|
51
|
+
var SAddon = ButtonTrigger.Addon;
|
|
52
|
+
var Children = props.Children,
|
|
53
|
+
hasChildren = props.children;
|
|
54
|
+
return _ref4 = sstyled(props.styles), /*#__PURE__*/React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, _assignProps2({}, _ref2))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref4.cn("Children", {})) : /*#__PURE__*/React.createElement(SummaryAI, _ref4.cn("SummaryAI", {
|
|
55
|
+
"color": '--intergalactic-icon-primary-feature-highlight'
|
|
56
|
+
})));
|
|
57
|
+
}
|
|
58
|
+
export var ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {
|
|
59
|
+
Text: ButtonTrigger.Text,
|
|
60
|
+
Addon: Addon
|
|
61
|
+
});
|
|
62
|
+
//# sourceMappingURL=ButtonTrigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonTrigger.js","names":["ButtonTrigger","createComponent","Root","sstyled","Component","SummaryAI","React","style","_sstyled","insert","ButtonTriggerFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref3","styles","SHighlightedButtonTrigger","createElement","cn","_objectSpread","_assignProps","_defineProperty","Addon","props","_ref2","arguments[0]","_ref4","SAddon","Children","hasChildren","children","_assignProps2","ButtonTriggerFH","Text"],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.tsx"],"sourcesContent":["import { ButtonTrigger } from '@semcore/base-trigger';\nimport Button from '@semcore/button';\nimport type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './buttonTrigger.shadow.css';\nimport type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';\nimport { AnimatedSparkles } from '../sparkle/AnimatedSparkles';\n\nclass ButtonTriggerFHRoot extends Component {\n static displayName = 'ButtonTriggerFH';\n static style = style;\n\n render() {\n const { styles } = this.asProps;\n const SHighlightedButtonTrigger = Root;\n return sstyled(styles)(\n <SHighlightedButtonTrigger render={ButtonTrigger} />,\n );\n }\n}\n\nfunction Addon(props: IRootComponentProps) {\n const SAddon = Root;\n const { Children, children: hasChildren } = props;\n return sstyled(props.styles)(\n <SAddon render={ButtonTrigger.Addon}>\n {hasChildren\n ? (<Children />)\n : (\n <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n )}\n </SAddon>,\n );\n}\n\nexport const ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {\n Text: ButtonTrigger.Text,\n Addon,\n}) as HighlightedButtonTriggerComponent;\n"],"mappings":";;;;;;;;;;;;AAAA,SAASA,aAAa,QAAQ,uBAAuB;AAGrD,SAASC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAMpBC,mBAAmB,0BAAAC,UAAA;EAAA,SAAAD,oBAAA;IAAAE,eAAA,OAAAF,mBAAA;IAAA,OAAAG,UAAA,OAAAH,mBAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,mBAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,mBAAA;IAAAO,GAAA;IAAAC,KAAA,EAIvB,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAQC,MAAM,GAAK,IAAI,CAACF,OAAO,CAAvBE,MAAM;MACd,IAAMC,yBAAyB,GAEMxB,aAAa;MADlD,OAAAsB,KAAA,GAAOnB,OAAO,CAACoB,MAAM,CAAC,eACpBjB,KAAA,CAAAmB,aAAA,CAACD,yBAAyB,EAAAF,KAAA,CAAAI,EAAA,8BAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,GAAyB,CAAC;IAExD;EAAC;AAAA,EAV+BhB,SAAS;AAAAyB,eAAA,CAArCnB,mBAAmB,iBACF,iBAAiB;AAAAmB,eAAA,CADlCnB,mBAAmB,WAERH,KAAK;AAWtB,SAASuB,KAAKA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,IAAMC,MAAM,GAGMnC,aAAa,CAAC8B,KAAK;EAFrC,IAAQM,QAAQ,GAA4BL,KAAK,CAAzCK,QAAQ;IAAYC,WAAW,GAAKN,KAAK,CAA/BO,QAAQ;EAC1B,OAAAJ,KAAA,GAAO/B,OAAO,CAAC4B,KAAK,CAACR,MAAM,CAAC,eAC1BjB,KAAA,CAAAmB,aAAA,CAACU,MAAM,EAAAD,KAAA,CAAAR,EAAA,WAAAC,aAAA,KAAAY,aAAA,KAAAP,KAAA,KACJK,WAAW,gBACP/B,KAAA,CAAAmB,aAAA,CAACW,QAAQ,EAAAF,KAAA,CAAAR,EAAA,gBAAE,CAAC,gBAEXpB,KAAA,CAAAmB,aAAA,CAACpB,SAAS,EAAA6B,KAAA,CAAAR,EAAA;IAAA,SAAO;EAAgD,EAAE,CAEnE,CAAC;AAEb;AAEA,OAAO,IAAMc,eAAe,GAAGvC,eAAe,CAACS,mBAAmB,EAAE;EAClE+B,IAAI,EAAEzC,aAAa,CAACyC,IAAI;EACxBX,KAAK,EAALA;AACF,CAAC,CAAsC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ButtonTrigger.type.js","names":[],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.type.ts"],"sourcesContent":["import type { ButtonTriggerProps } from '@semcore/base-trigger';\nimport type BaseTrigger from '@semcore/base-trigger';\nimport type { Intergalactic } from '@semcore/core';\n\nexport type HighlightedButtonTriggerComponent = Intergalactic.Component<'div', ButtonTriggerProps> & {\n Text: typeof BaseTrigger.Text;\n Addon: typeof BaseTrigger.Addon;\n};\n"],"mappings":"","ignoreList":[]}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
|
|
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; /* border */
|
|
7
|
+
background-origin: border-box;
|
|
8
|
+
background-clip: padding-box, border-box;
|
|
9
|
+
|
|
10
|
+
&:hover {
|
|
11
|
+
background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,
|
|
12
|
+
var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
|
|
13
|
+
) border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&:active,
|
|
17
|
+
&[active] {
|
|
18
|
+
background:
|
|
19
|
+
linear-gradient(white, white) padding-box,
|
|
20
|
+
var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;
|
|
21
|
+
background-origin: border-box;
|
|
22
|
+
background-clip: padding-box, border-box;
|
|
23
|
+
border-color: transparent;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible {
|
|
28
|
+
outline: none;
|
|
29
|
+
position: relative;
|
|
30
|
+
border-color: transparent;
|
|
31
|
+
|
|
32
|
+
&::before {
|
|
33
|
+
content: "";
|
|
34
|
+
position: absolute;
|
|
35
|
+
z-index: -1;
|
|
36
|
+
inset: 0;
|
|
37
|
+
margin: -4px;
|
|
38
|
+
padding: 4px;
|
|
39
|
+
border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
|
|
40
|
+
|
|
41
|
+
background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
|
|
42
|
+
mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
|
|
43
|
+
mask-composite: exclude;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&[neighborLocation='left']::before {
|
|
47
|
+
border-top-left-radius: 0;
|
|
48
|
+
border-bottom-left-radius: 0;
|
|
49
|
+
}
|
|
50
|
+
&[neighborLocation='right']::before {
|
|
51
|
+
border-top-right-radius: 0;
|
|
52
|
+
border-bottom-right-radius: 0;
|
|
53
|
+
}
|
|
54
|
+
&[neighborLocation='both']::before {
|
|
55
|
+
border-radius: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Sparkle from './Sparkle';
|
|
4
|
+
export function AnimatedSparkles(props) {
|
|
5
|
+
var count = props.count,
|
|
6
|
+
curve = props.curve,
|
|
7
|
+
show = props.show,
|
|
8
|
+
top = props.top,
|
|
9
|
+
left = props.left;
|
|
10
|
+
return show && count !== undefined && _toConsumableArray(new Array(count)).map(function (_, index) {
|
|
11
|
+
return /*#__PURE__*/React.createElement(Sparkle, {
|
|
12
|
+
key: index,
|
|
13
|
+
index: index,
|
|
14
|
+
num: count,
|
|
15
|
+
curve: curve,
|
|
16
|
+
top: top,
|
|
17
|
+
left: left
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=AnimatedSparkles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AnimatedSparkles.js","names":["React","Sparkle","AnimatedSparkles","props","count","curve","show","top","left","undefined","_toConsumableArray","Array","map","_","index","createElement","key","num"],"sources":["../../../../src/inner-components/sparkle/AnimatedSparkles.tsx"],"sourcesContent":["import React from 'react';\n\nimport Sparkle from './Sparkle';\n\nexport type AnimatedSparklesProps = {\n count?: number;\n curve?: number;\n top?: string;\n left?: string;\n};\n\nexport function AnimatedSparkles(props: AnimatedSparklesProps & { show: boolean }) {\n const { count, curve, show, top, left } = props;\n\n return show && count !== undefined && [...new Array(count)].map((_, index) => {\n return (\n <Sparkle key={index} index={index} num={count} curve={curve} top={top} left={left} />\n );\n });\n}\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,OAAO,MAAM,WAAW;AAS/B,OAAO,SAASC,gBAAgBA,CAACC,KAAgD,EAAE;EACjF,IAAQC,KAAK,GAA6BD,KAAK,CAAvCC,KAAK;IAAEC,KAAK,GAAsBF,KAAK,CAAhCE,KAAK;IAAEC,IAAI,GAAgBH,KAAK,CAAzBG,IAAI;IAAEC,GAAG,GAAWJ,KAAK,CAAnBI,GAAG;IAAEC,IAAI,GAAKL,KAAK,CAAdK,IAAI;EAErC,OAAOF,IAAI,IAAIF,KAAK,KAAKK,SAAS,IAAIC,kBAAA,CAAI,IAAIC,KAAK,CAACP,KAAK,CAAC,EAAEQ,GAAG,CAAC,UAACC,CAAC,EAAEC,KAAK,EAAK;IAC5E,oBACEd,KAAA,CAAAe,aAAA,CAACd,OAAO;MAACe,GAAG,EAAEF,KAAM;MAACA,KAAK,EAAEA,KAAM;MAACG,GAAG,EAAEb,KAAM;MAACC,KAAK,EAAEA,KAAM;MAACE,GAAG,EAAEA,GAAI;MAACC,IAAI,EAAEA;IAAK,CAAE,CAAC;EAEzF,CAAC,CAAC;AACJ","ignoreList":[]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import { sstyled as _sstyled } from "@semcore/core";
|
|
3
|
+
import { assignProps as _assignProps } from "@semcore/core";
|
|
4
|
+
import { createBaseComponent, Root, sstyled } from '@semcore/core';
|
|
5
|
+
import React from 'react';
|
|
6
|
+
/*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
|
|
7
|
+
var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_10q33{50%{transform:rotate(calc(1deg*var(--angle_10q33))) translateY(200%) scale(var(--scale_10q33))}to{transform:rotate(calc(1deg*var(--angle_10q33))) translateY(200%) scale(0)}}.___SSparkle_10q33_gg_{position:absolute}.___SSparkle_10q33_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SSparkle_10q33_gg_.__angle_10q33_gg_.__scale_10q33_gg_.__duration_10q33_gg_{transform:rotate(calc(1deg*var(--angle_10q33))) scale(var(--scale_10q33));animation-name:sparkles_10q33;animation-fill-mode:forwards;animation-duration:var(--duration_10q33)}.___SSparkle_10q33_gg_.__left_10q33_gg_{left:var(--left_10q33)}.___SSparkle_10q33_gg_.__top_10q33_gg_{top:var(--top_10q33)}", /*__inner_css_end__*/"10q33_gg_"),
|
|
8
|
+
/*__reshadow_css_end__*/
|
|
9
|
+
{
|
|
10
|
+
"__SSparkle": "___SSparkle_10q33_gg_",
|
|
11
|
+
"_angle": "__angle_10q33_gg_",
|
|
12
|
+
"_scale": "__scale_10q33_gg_",
|
|
13
|
+
"_duration": "__duration_10q33_gg_",
|
|
14
|
+
"--angle": "--angle_10q33",
|
|
15
|
+
"--scale": "--scale_10q33",
|
|
16
|
+
"--duration": "--duration_10q33",
|
|
17
|
+
"@sparkles": "sparkles_10q33",
|
|
18
|
+
"_left": "__left_10q33_gg_",
|
|
19
|
+
"--left": "--left_10q33",
|
|
20
|
+
"_top": "__top_10q33_gg_",
|
|
21
|
+
"--top": "--top_10q33"
|
|
22
|
+
});
|
|
23
|
+
function SvgSparkle(props) {
|
|
24
|
+
var _ref = arguments[0],
|
|
25
|
+
_ref2;
|
|
26
|
+
var SSparkle = 'svg';
|
|
27
|
+
var num = props.num,
|
|
28
|
+
index = props.index,
|
|
29
|
+
curve = props.curve,
|
|
30
|
+
left = props.left;
|
|
31
|
+
var rand = Math.floor(Math.random() * 50);
|
|
32
|
+
var angle = 360 / num * index + rand;
|
|
33
|
+
var sin = Math.sin(Math.PI * angle / 180);
|
|
34
|
+
var x = curve ? Math.trunc(sin * -1 * curve) : 0;
|
|
35
|
+
var odd = index % 2;
|
|
36
|
+
var scale = 1 - odd * 0.3;
|
|
37
|
+
var animationDuration = "".concat(0.6 - odd * 0.2, "s");
|
|
38
|
+
return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SSparkle, _ref2.cn("SSparkle", _objectSpread({}, _assignProps({
|
|
39
|
+
"aria-hidden": true,
|
|
40
|
+
"use:left": x ? "".concat(x + 14, "px") : left,
|
|
41
|
+
"scale": scale,
|
|
42
|
+
"duration": animationDuration,
|
|
43
|
+
"angle": angle,
|
|
44
|
+
"width": '10',
|
|
45
|
+
"height": '10',
|
|
46
|
+
"viewBox": '0 0 10 10',
|
|
47
|
+
"fill": 'none',
|
|
48
|
+
"xmlns": 'http://www.w3.org/2000/svg'
|
|
49
|
+
}, _ref))), /*#__PURE__*/React.createElement("path", _ref2.cn("path", {
|
|
50
|
+
"d": 'M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z'
|
|
51
|
+
})));
|
|
52
|
+
}
|
|
53
|
+
export default createBaseComponent(SvgSparkle);
|
|
54
|
+
//# sourceMappingURL=Sparkle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sparkle.js","names":["createBaseComponent","Root","sstyled","React","styles","_sstyled","insert","SvgSparkle","props","_ref","arguments[0]","_ref2","SSparkle","num","index","curve","left","rand","Math","floor","random","angle","sin","PI","x","trunc","odd","scale","animationDuration","concat","createElement","cn","_objectSpread","_assignProps"],"sources":["../../../../src/inner-components/sparkle/Sparkle.tsx"],"sourcesContent":["import type { Intergalactic } from '@semcore/core';\nimport { createBaseComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport styles from './style/sparkle.shadow.css';\n\ntype SparkleProps = {\n index: number;\n num: number;\n curve?: number;\n top?: string;\n left?: string;\n};\n\nfunction SvgSparkle(props: SparkleProps) {\n const SSparkle = Root;\n const { num, index, curve, left } = props;\n const rand = Math.floor(Math.random() * 50);\n const angle = (360 / num) * index + rand;\n const sin = Math.sin((Math.PI * angle) / 180);\n const x = curve ? Math.trunc(sin * -1 * curve) : 0;\n const odd = index % 2;\n const scale = 1 - odd * 0.3;\n const animationDuration = `${0.6 - odd * 0.2}s`;\n\n return sstyled(styles)(\n <SSparkle\n aria-hidden={true}\n render='svg'\n use:left={x ? `${x + 14}px` : left}\n scale={scale}\n duration={animationDuration}\n angle={angle}\n width='10'\n height='10'\n viewBox='0 0 10 10'\n fill='none'\n xmlns='http://www.w3.org/2000/svg'\n >\n <path d='M5.371.269a.39.39 0 0 0-.742 0L3.704 3.08a.977.977 0 0 1-.623.623L.27 4.629a.39.39 0 0 0 0 .742l2.812.925a.977.977 0 0 1 .623.623l.925 2.812a.39.39 0 0 0 .742 0l.925-2.812a.977.977 0 0 1 .623-.623l2.812-.925a.39.39 0 0 0 0-.742L6.92 3.704a.977.977 0 0 1-.623-.623L5.371.27Z' />\n </SSparkle>,\n );\n}\n\nexport default createBaseComponent(SvgSparkle) as unknown as Intergalactic.Component<'svg', SparkleProps>;\n"],"mappings":";;;AACA,SAASA,mBAAmB,EAAEC,IAAI,EAAEC,OAAO,QAAQ,eAAe;AAClE,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,MAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAY1B,SAASC,UAAUA,CAACC,KAAmB,EAAE;EAAA,IAAAC,IAAA,GAAAC,YAAA;IAAAC,KAAA;EACvC,IAAMC,QAAQ,GAaH,KAAK;EAZhB,IAAQC,GAAG,GAAyBL,KAAK,CAAjCK,GAAG;IAAEC,KAAK,GAAkBN,KAAK,CAA5BM,KAAK;IAAEC,KAAK,GAAWP,KAAK,CAArBO,KAAK;IAAEC,IAAI,GAAKR,KAAK,CAAdQ,IAAI;EAC/B,IAAMC,IAAI,GAAGC,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC;EAC3C,IAAMC,KAAK,GAAI,GAAG,GAAGR,GAAG,GAAIC,KAAK,GAAGG,IAAI;EACxC,IAAMK,GAAG,GAAGJ,IAAI,CAACI,GAAG,CAAEJ,IAAI,CAACK,EAAE,GAAGF,KAAK,GAAI,GAAG,CAAC;EAC7C,IAAMG,CAAC,GAAGT,KAAK,GAAGG,IAAI,CAACO,KAAK,CAACH,GAAG,GAAG,CAAC,CAAC,GAAGP,KAAK,CAAC,GAAG,CAAC;EAClD,IAAMW,GAAG,GAAGZ,KAAK,GAAG,CAAC;EACrB,IAAMa,KAAK,GAAG,CAAC,GAAGD,GAAG,GAAG,GAAG;EAC3B,IAAME,iBAAiB,MAAAC,MAAA,CAAM,GAAG,GAAGH,GAAG,GAAG,GAAG,MAAG;EAE/C,OAAAf,KAAA,GAAOT,OAAO,CAACE,MAAM,CAAC,eACpBD,KAAA,CAAA2B,aAAA,CAAClB,QAAQ,EAAAD,KAAA,CAAAoB,EAAA,aAAAC,aAAA,KAAAC,YAAA;IAAA,eACM,IAAI;IAAA,YAEPT,CAAC,MAAAK,MAAA,CAAML,CAAC,GAAG,EAAE,UAAOR,IAAI;IAAA,SAC3BW,KAAK;IAAA,YACFC,iBAAiB;IAAA,SACpBP,KAAK;IAAA,SACN,IAAI;IAAA,UACH,IAAI;IAAA,WACH,WAAW;IAAA,QACd,MAAM;IAAA,SACL;EAA4B,GAAAZ,IAAA,kBAElCN,KAAA,CAAA2B,aAAA,SAAAnB,KAAA,CAAAoB,EAAA;IAAA,KAAQ;EAAmR,EAAE,CACrR,CAAC;AAEf;AAEA,eAAe/B,mBAAmB,CAACO,UAAU,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["Sparkle"],"sources":["../../../../src/inner-components/sparkle/index.ts"],"sourcesContent":["import Sparkle from './Sparkle';\n\nexport {\n Sparkle,\n};\n"],"mappings":"AAAA,OAAOA,OAAO,MAAM,WAAW;AAE/B,SACEA,OAAO","ignoreList":[]}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
SSparkle {
|
|
2
|
+
position: absolute;
|
|
3
|
+
|
|
4
|
+
& path {
|
|
5
|
+
fill: var(--intergalactic-icon-primary-feature-highlight, #8649e1);
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
SSparkle[angle][scale][duration] {
|
|
10
|
+
transform: rotate(calc(1deg * var(--angle))) scale(var(--scale));
|
|
11
|
+
|
|
12
|
+
animation-name: sparkles;
|
|
13
|
+
animation-fill-mode: forwards;
|
|
14
|
+
animation-duration: var(--duration);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@keyframes sparkles {
|
|
18
|
+
50% {
|
|
19
|
+
transform: rotate(calc(1deg * var(--angle))) translateY(200%)
|
|
20
|
+
scale(var(--scale));
|
|
21
|
+
}
|
|
22
|
+
100% {
|
|
23
|
+
transform: rotate(calc(1deg * var(--angle))) translateY(200%) scale(0);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
SSparkle[left] {
|
|
27
|
+
left: var(--left);
|
|
28
|
+
}
|
|
29
|
+
SSparkle[top] {
|
|
30
|
+
top: var(--top);
|
|
31
|
+
}
|