@semcore/feature-highlight 16.0.1-prerelease.0

package/lib/esm/components/pills/Pills.mjs

@@ -0,0 +1,117 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, assignProps, Component, sstyled } from "@semcore/core";
+import SummaryAI from "@semcore/icon/SummaryAI/m";
+import Pills from "@semcore/pills";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./pills.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedPill": "___SHighlightedPill_4manu_gg_",
+    "_selected": "__selected_4manu_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_4manu_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_4manu_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_4manu_gg_"
+  })
+);
+var PillsFHRoot = /* @__PURE__ */ function(_Component) {
+  function PillsFHRoot2() {
+    _classCallCheck(this, PillsFHRoot2);
+    return _callSuper(this, PillsFHRoot2, arguments);
+  }
+  _inherits(PillsFHRoot2, _Component);
+  return _createClass(PillsFHRoot2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      return /* @__PURE__ */ React.createElement(Pills, assignProps({}, _ref));
+    }
+  }]);
+}(Component);
+_defineProperty(PillsFHRoot, "displayName", "PillsFH");
+_defineProperty(PillsFHRoot, "style", style);
+var HighlightedItemRoot = /* @__PURE__ */ function(_Component2) {
+  function HighlightedItemRoot2() {
+    var _this;
+    _classCallCheck(this, HighlightedItemRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, HighlightedItemRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
+      clicked: false
+    });
+    return _this;
+  }
+  _inherits(HighlightedItemRoot2, _Component2);
+  return _createClass(HighlightedItemRoot2, [{
+    key: "handleClick",
+    value: function handleClick(e) {
+      var _this2 = this;
+      var onClick = this.asProps.onClick;
+      onClick === null || onClick === void 0 || onClick(e);
+      this.setState({
+        clicked: false
+      });
+      setTimeout(function() {
+        _this2.setState({
+          clicked: true
+        });
+      });
+    }
+  }, {
+    key: "getAddonProps",
+    value: function getAddonProps() {
+      return {
+        clicked: this.state.clicked
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2 = this.asProps, _ref3;
+      var SHighlightedPill = Pills.Item;
+      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedPill, _ref3.cn("SHighlightedPill", _objectSpread({}, assignProps({
+        "onClick": this.handleClick.bind(this)
+      }, _ref2))));
+    }
+  }]);
+}(Component);
+_defineProperty(HighlightedItemRoot, "displayName", "HighlightedItem");
+_defineProperty(HighlightedItemRoot, "style", style);
+function HighlightedItemAddon(props) {
+  var clicked = props.clicked, animatedSparkleCount = props.animatedSparkleCount, Children = props.Children, hasChildren = props.children;
+  return /* @__PURE__ */ React.createElement(Pills.Item.Addon, null, hasChildren ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SummaryAI, {
+    color: "--intergalactic-icon-primary-feature-highlight"
+  }), /* @__PURE__ */ React.createElement(AnimatedSparkles, {
+    show: clicked,
+    count: animatedSparkleCount
+  })));
+}
+var PillsFH = createComponent(PillsFHRoot, {
+  Item: Pills.Item,
+  HighlightedItem: createComponent(HighlightedItemRoot, {
+    Text: Pills.Item.Text,
+    Addon: HighlightedItemAddon
+  })
+});
+export {
+  PillsFH
+};

package/lib/esm/components/pills/pills.shadow.css

@@ -0,0 +1,57 @@
+SHighlightedPill {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(white, white) padding-box,
+    var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
+  ) border-box;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  z-index: 1;
+
+  &: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)
+    ) border-box;
+  }
+  &[selected] {
+    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:focus-visible {
+  outline: none;
+  position: relative;
+  /*isolation: isolate;*/
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 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)));
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+  }
+
+  &[neighborLocation='left']::before {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  &[neighborLocation='right']::before {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &[neighborLocation='both']::before {
+    border-radius: 0;
+  }
+}
+

package/lib/esm/components/radio/Radio.mjs

@@ -0,0 +1,98 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component, CONTEXT_COMPONENT } from "@semcore/core";
+import Radio, { RadioGroup } from "@semcore/radio";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./radio.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedRadio": "___SHighlightedRadio_ts8qi_gg_",
+    "_state_invalid": "_state_invalid_ts8qi_gg_"
+  })
+);
+var RadioFHRoot = /* @__PURE__ */ function(_Component) {
+  function RadioFHRoot2() {
+    var _this;
+    _classCallCheck(this, RadioFHRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, RadioFHRoot2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_this, "state", {
+      checked: false
+    });
+    _defineProperty(_this, "setChecked", function() {
+      _this.setState({
+        checked: false
+      });
+      setTimeout(function() {
+        var _this$inputRef$curren;
+        _this.setState({
+          checked: (_this$inputRef$curren = _this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked
+        });
+      });
+    });
+    return _this;
+  }
+  _inherits(RadioFHRoot2, _Component);
+  return _createClass(RadioFHRoot2, [{
+    key: "getValueProps",
+    value: function getValueProps() {
+      return {
+        ref: this.inputRef,
+        onChange: this.setChecked,
+        // for click by label / programmatically changed
+        onClick: this.setChecked
+        // for click by radio
+      };
+    }
+  }, {
+    key: "getAnimatedSparklesProps",
+    value: function getAnimatedSparklesProps() {
+      var size = this.context.size;
+      var checked = this.state.checked;
+      return {
+        show: checked,
+        top: size === "l" ? "7px" : "5px",
+        left: size === "l" ? "5px" : "3px"
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SHighlightedRadio = Radio;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, hasChildren = _this$asProps.children;
+      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)));
+    }
+  }]);
+}(Component);
+_defineProperty(RadioFHRoot, "displayName", "RadioFH");
+_defineProperty(RadioFHRoot, "style", style);
+_defineProperty(RadioFHRoot, "contextType", RadioGroup[CONTEXT_COMPONENT]);
+var RadioFH = createComponent(RadioFHRoot, {
+  Text: Radio.Text,
+  Value: Radio.Value,
+  AnimatedSparkles
+});
+export {
+  RadioFH
+};

package/lib/esm/components/radio/radio.shadow.css

@@ -0,0 +1,43 @@
+SHighlightedRadio {
+  position: relative;
+}
+
+SHighlightedRadio:not([state="invalid"]) {
+  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;
+    inset: 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;
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+  }
+
+  input[data-ui-name="RadioFH.Value"]:checked:focus-visible + [data-ui-name="Value.RadioMark"]::before {
+    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;
+  }
+
+  input[data-ui-name="RadioFH.Value"] + [data-ui-name="Value.RadioMark"]::before {
+    /*SValue[state='normal']::before {*/
+    border-color: transparent;
+    background: linear-gradient(white, white) padding-box,
+      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
+    ) border-box;
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+  }
+
+  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;
+  }
+}

package/lib/esm/components/select/Select.mjs

@@ -0,0 +1,49 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, assignProps, Component } from "@semcore/core";
+import Select from "@semcore/select";
+import React from "react";
+import { ButtonTriggerFH } from "../../inner-components/button-trigger/ButtonTrigger.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+var SelectFHRoot = /* @__PURE__ */ function(_Component) {
+  function SelectFHRoot2() {
+    _classCallCheck(this, SelectFHRoot2);
+    return _callSuper(this, SelectFHRoot2, arguments);
+  }
+  _inherits(SelectFHRoot2, _Component);
+  return _createClass(SelectFHRoot2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      return /* @__PURE__ */ React.createElement(Select, assignProps({}, _ref));
+    }
+  }]);
+}(Component);
+_defineProperty(SelectFHRoot, "displayName", "SelectFH");
+function Trigger(props) {
+  var _ref2 = arguments[0];
+  var Children = props.Children, hasChildren = props.children;
+  return /* @__PURE__ */ React.createElement(Select.Trigger, assignProps({
+    "tag": ButtonTriggerFH
+  }, _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)));
+}
+var SelectFH = createComponent(SelectFHRoot, {
+  Trigger: [Trigger, {
+    Text: ButtonTriggerFH.Text,
+    Addon: ButtonTriggerFH.Addon
+  }],
+  Popper: Select.Popper,
+  Menu: Select.Menu,
+  Option: Select.Option,
+  List: Select.List
+});
+export {
+  SelectFH
+};

package/lib/esm/components/switch/Switch.mjs

@@ -0,0 +1,96 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import Switch from "@semcore/switch";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./switch.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SToggle": "___SToggle_1qdzt_gg_",
+    "_checked": "__checked_1qdzt_gg_",
+    "__SInput": "___SInput_1qdzt_gg_"
+  })
+);
+var SwitchFHRoot = /* @__PURE__ */ function(_Component) {
+  function SwitchFHRoot2() {
+    var _this;
+    _classCallCheck(this, SwitchFHRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, SwitchFHRoot2, [].concat(args));
+    _defineProperty(_this, "inputRef", /* @__PURE__ */ React.createRef());
+    return _this;
+  }
+  _inherits(SwitchFHRoot2, _Component);
+  return _createClass(SwitchFHRoot2, [{
+    key: "getValueProps",
+    value: function getValueProps() {
+      var _this2 = this;
+      return {
+        ref: this.inputRef,
+        onChange: function onChange() {
+          setTimeout(function() {
+            _this2.forceUpdate();
+          });
+        }
+      };
+    }
+  }, {
+    key: "getAnimatedSparklesProps",
+    value: function getAnimatedSparklesProps() {
+      var _this$inputRef$curren;
+      var size = this.asProps.size;
+      var checked = (_this$inputRef$curren = this.inputRef.current) === null || _this$inputRef$curren === void 0 ? void 0 : _this$inputRef$curren.checked;
+      var left = "4px";
+      if (size === "l") left = "12px";
+      if (size === "xl") left = "14px";
+      return {
+        show: checked,
+        curve: size === "l" || size === "xl" ? 9 : void 0,
+        left
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SInput = Switch;
+      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SInput, _ref3.cn("SInput", _objectSpread({}, assignProps({}, _ref))));
+    }
+  }]);
+}(Component);
+_defineProperty(SwitchFHRoot, "displayName", "SwitchFH");
+_defineProperty(SwitchFHRoot, "style", style);
+function Value(props) {
+  var _ref2 = arguments[0], _ref4;
+  var SToggle = Switch.Value;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SToggle, _ref4.cn("SToggle", _objectSpread({}, assignProps({
+    "onChange": props.onChange
+  }, _ref2))));
+}
+var SwitchFH = createComponent(SwitchFHRoot, {
+  Addon: Switch.Addon,
+  Value,
+  AnimatedSparkles
+});
+export {
+  SwitchFH
+};

package/lib/esm/components/switch/switch.shadow.css

@@ -0,0 +1,22 @@
+SToggle[checked] {
+  color: var(--intergalactic-control-primary-info, #008ff8);
+  background-image: var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8));
+}
+
+SToggle:has(SInput:focus-visible) {
+  box-shadow: none;
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 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)));
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+  }
+}

package/lib/esm/components/tab-line/TabLine.mjs

@@ -0,0 +1,119 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, assignProps, Component, sstyled } from "@semcore/core";
+import SummaryAI from "@semcore/icon/SummaryAI/m";
+import TabLine from "@semcore/tab-line";
+import React from "react";
+import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+/*!__reshadow-styles__:"./tabLine.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedCaret": "___SHighlightedCaret_fe5js_gg_",
+    "__SHighlightedItem": "___SHighlightedItem_fe5js_gg_",
+    "_selected": "__selected_fe5js_gg_"
+  })
+);
+var TabLineFHRoot = /* @__PURE__ */ function(_Component) {
+  function TabLineFHRoot2() {
+    _classCallCheck(this, TabLineFHRoot2);
+    return _callSuper(this, TabLineFHRoot2, arguments);
+  }
+  _inherits(TabLineFHRoot2, _Component);
+  return _createClass(TabLineFHRoot2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps;
+      return /* @__PURE__ */ React.createElement(TabLine, assignProps({}, _ref));
+    }
+  }]);
+}(Component);
+_defineProperty(TabLineFHRoot, "displayName", "TabLineFH");
+_defineProperty(TabLineFHRoot, "style", style);
+var HighlightedItemRoot = /* @__PURE__ */ function(_Component2) {
+  function HighlightedItemRoot2() {
+    var _this;
+    _classCallCheck(this, HighlightedItemRoot2);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, HighlightedItemRoot2, [].concat(args));
+    _defineProperty(_this, "state", {
+      clicked: false
+    });
+    return _this;
+  }
+  _inherits(HighlightedItemRoot2, _Component2);
+  return _createClass(HighlightedItemRoot2, [{
+    key: "handleClick",
+    value: function handleClick(e) {
+      var _this2 = this;
+      var onClick = this.asProps.onClick;
+      onClick === null || onClick === void 0 || onClick(e);
+      this.setState({
+        clicked: false
+      });
+      setTimeout(function() {
+        _this2.setState({
+          clicked: true
+        });
+      });
+    }
+  }, {
+    key: "getAddonProps",
+    value: function getAddonProps() {
+      return {
+        clicked: this.state.clicked
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref2 = this.asProps, _ref4;
+      var SHighlightedItem = TabLine.Item;
+      return _ref4 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SHighlightedItem, _ref4.cn("SHighlightedItem", _objectSpread({}, assignProps({
+        "onClick": this.handleClick.bind(this)
+      }, _ref2))));
+    }
+  }]);
+}(Component);
+_defineProperty(HighlightedItemRoot, "displayName", "HighlightedItem");
+_defineProperty(HighlightedItemRoot, "style", style);
+function HighlightedAddon(props) {
+  var _ref3 = arguments[0];
+  var clicked = props.clicked, animatedSparkleCount = props.animatedSparkleCount, Children = props.Children, hasChildren = props.children;
+  return /* @__PURE__ */ React.createElement(TabLine.Item.Addon, assignProps({}, _ref3), hasChildren ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SummaryAI, {
+    color: "--intergalactic-icon-primary-feature-highlight"
+  }), /* @__PURE__ */ React.createElement(AnimatedSparkles, {
+    show: clicked,
+    count: animatedSparkleCount
+  })));
+}
+var TabLineFH = createComponent(TabLineFHRoot, {
+  Item: [TabLine.Item, {
+    Text: TabLine.Item.Text,
+    Addon: TabLine.Item.Addon
+  }],
+  HighlightedItem: createComponent(HighlightedItemRoot, {
+    Text: TabLine.Item.Text,
+    Addon: HighlightedAddon
+  })
+});
+export {
+  TabLineFH
+};

package/lib/esm/components/tab-line/tabLine.shadow.css

@@ -0,0 +1,25 @@
+SHighlightedItem {
+  &::after,
+  &:not(:focus-visible)::before {
+    opacity: 0;
+    transition: opacity calc(var(--intergalactic-duration-control, 200) * 1ms) ease-in-out;
+  }
+  &:not(:focus-visible)::before {
+    background: var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff));
+  }
+  &:hover:not(:focus-visible)::before {
+    opacity: 1;
+  }
+  &[selected]::after {
+    opacity: 1;
+    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8));
+  }
+
+  &:focus-visible::before {
+    height: auto;
+  }
+}
+
+SHighlightedCaret {
+  background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8));
+}

package/lib/esm/index.mjs

@@ -0,0 +1,22 @@
+import { ButtonFH } from "./components/button/Button.mjs";
+import { PillsFH } from "./components/pills/Pills.mjs";
+import { SelectFH } from "./components/select/Select.mjs";
+import { InputFH } from "./components/input/Input.mjs";
+import { SwitchFH } from "./components/switch/Switch.mjs";
+import { TabLineFH } from "./components/tab-line/TabLine.mjs";
+import { NoticeFH } from "./components/notice/Notice.mjs";
+import { BadgeFH } from "./components/badge/Badge.mjs";
+import { RadioFH } from "./components/radio/Radio.mjs";
+import { CheckboxFH } from "./components/checkbox/Checkbox.mjs";
+export {
+  BadgeFH,
+  ButtonFH,
+  CheckboxFH,
+  InputFH,
+  NoticeFH,
+  PillsFH,
+  RadioFH,
+  SelectFH,
+  SwitchFH,
+  TabLineFH
+};