@semcore/feature-highlight 16.0.1-prerelease.0

package/lib/esm/inner-components/button-trigger/ButtonTrigger.mjs

@@ -0,0 +1,67 @@
+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 { ButtonTrigger } from "@semcore/base-trigger";
+import SummaryAI from "@semcore/icon/SummaryAI/m";
+import React from "react";
+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__:"./buttonTrigger.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_17qw8_gg_",
+    "_state_invalid": "_state_invalid_17qw8_gg_",
+    "_state_valid": "_state_valid_17qw8_gg_",
+    "_active": "__active_17qw8_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_17qw8_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_17qw8_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_17qw8_gg_"
+  })
+);
+var ButtonTriggerFHRoot = /* @__PURE__ */ function(_Component) {
+  function ButtonTriggerFHRoot2() {
+    _classCallCheck(this, ButtonTriggerFHRoot2);
+    return _callSuper(this, ButtonTriggerFHRoot2, arguments);
+  }
+  _inherits(ButtonTriggerFHRoot2, _Component);
+  return _createClass(ButtonTriggerFHRoot2, [{
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var styles = this.asProps.styles;
+      var SHighlightedButtonTrigger = ButtonTrigger;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SHighlightedButtonTrigger, _ref3.cn("SHighlightedButtonTrigger", _objectSpread({}, assignProps({}, _ref))));
+    }
+  }]);
+}(Component);
+_defineProperty(ButtonTriggerFHRoot, "displayName", "ButtonTriggerFH");
+_defineProperty(ButtonTriggerFHRoot, "style", style);
+function Addon(props) {
+  var _ref2 = arguments[0], _ref4;
+  var SAddon = ButtonTrigger.Addon;
+  var Children = props.Children, hasChildren = props.children;
+  return _ref4 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SAddon, _ref4.cn("SAddon", _objectSpread({}, assignProps({}, _ref2))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})) : /* @__PURE__ */ React.createElement(SummaryAI, _ref4.cn("SummaryAI", {
+    "color": "--intergalactic-icon-primary-feature-highlight"
+  })));
+}
+var ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {
+  Text: ButtonTrigger.Text,
+  Addon
+});
+export {
+  ButtonTriggerFH
+};

package/lib/esm/inner-components/button-trigger/buttonTrigger.shadow.css

@@ -0,0 +1,57 @@
+SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(white, white) padding-box,
+    var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
+  ) border-box; /* border */
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+
+  &: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;
+  }
+
+  &:active,
+  &[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:not([state="invalid"]):not([state="valid"]):focus-visible {
+  outline: none;
+  position: relative;
+  border-color: transparent;
+
+  &::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/inner-components/sparkle/AnimatedSparkles.mjs

@@ -0,0 +1,19 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import React from "react";
+import Sparkle from "./Sparkle.mjs";
+function AnimatedSparkles(props) {
+  var count = props.count, curve = props.curve, show = props.show, top = props.top, left = props.left;
+  return show && count !== void 0 && _toConsumableArray(new Array(count)).map(function(_, index) {
+    return /* @__PURE__ */ React.createElement(Sparkle, {
+      key: index,
+      index,
+      num: count,
+      curve,
+      top,
+      left
+    });
+  });
+}
+export {
+  AnimatedSparkles
+};

package/lib/esm/inner-components/sparkle/Sparkle.mjs

@@ -0,0 +1,57 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { createBaseComponent, sstyled, assignProps } from "@semcore/core";
+import React from "react";
+/*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
+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_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SSparkle": "___SSparkle_10q33_gg_",
+    "_angle": "__angle_10q33_gg_",
+    "_scale": "__scale_10q33_gg_",
+    "_duration": "__duration_10q33_gg_",
+    "--angle": "--angle_10q33",
+    "--scale": "--scale_10q33",
+    "--duration": "--duration_10q33",
+    "@sparkles": "sparkles_10q33",
+    "_left": "__left_10q33_gg_",
+    "--left": "--left_10q33",
+    "_top": "__top_10q33_gg_",
+    "--top": "--top_10q33"
+  })
+);
+function SvgSparkle(props) {
+  var _ref = arguments[0], _ref2;
+  var SSparkle = "svg";
+  var num = props.num, index = props.index, curve = props.curve, left = props.left;
+  var rand = Math.floor(Math.random() * 50);
+  var angle = 360 / num * index + rand;
+  var sin = Math.sin(Math.PI * angle / 180);
+  var x = curve ? Math.trunc(sin * -1 * curve) : 0;
+  var odd = index % 2;
+  var scale = 1 - odd * 0.3;
+  var animationDuration = "".concat(0.6 - odd * 0.2, "s");
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SSparkle, _ref2.cn("SSparkle", _objectSpread({}, assignProps({
+    "aria-hidden": true,
+    "use:left": x ? "".concat(x + 14, "px") : left,
+    "scale": scale,
+    "duration": animationDuration,
+    "angle": angle,
+    "width": "10",
+    "height": "10",
+    "viewBox": "0 0 10 10",
+    "fill": "none",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, _ref))), /* @__PURE__ */ React.createElement("path", _ref2.cn("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"
+  })));
+}
+const Sparkle = createBaseComponent(SvgSparkle);
+export {
+  Sparkle as default
+};

package/lib/esm/inner-components/sparkle/style/sparkle.shadow.css

@@ -0,0 +1,31 @@
+SSparkle {
+  position: absolute;
+
+  & path {
+    fill: var(--intergalactic-icon-primary-feature-highlight, #8649e1);
+  }
+}
+
+SSparkle[angle][scale][duration] {
+  transform: rotate(calc(1deg * var(--angle))) scale(var(--scale));
+
+  animation-name: sparkles;
+  animation-fill-mode: forwards;
+  animation-duration: var(--duration);
+}
+
+@keyframes sparkles {
+  50% {
+    transform: rotate(calc(1deg * var(--angle))) translateY(200%)
+      scale(var(--scale));
+  }
+  100% {
+    transform: rotate(calc(1deg * var(--angle))) translateY(200%) scale(0);
+  }
+}
+SSparkle[left] {
+  left: var(--left);
+}
+SSparkle[top] {
+  top: var(--top);
+}

package/lib/types/components/badge/Badge.d.ts

@@ -0,0 +1,3 @@
+export declare const BadgeFH: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedButtonComponent } from './Button.type';
+export declare const ButtonFH: HighlightedButtonComponent;

package/lib/types/components/button/Button.type.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonAddonProps, ButtonComponent } from '@semcore/button';
+import type { Intergalactic } from '@semcore/core';
+export type HighLightedButtonAddonProps = ButtonAddonProps & {
+    animatedSparkleCount?: number;
+};
+export type HighlightedButtonComponent = ButtonComponent & {
+    Addon: Intergalactic.Component<'div', HighLightedButtonAddonProps>;
+};

package/lib/types/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedCheckboxComponent } from './Checkbox.type';
+export declare const CheckboxFH: HighlightedCheckboxComponent;

package/lib/types/components/checkbox/Checkbox.type.d.ts

@@ -0,0 +1,8 @@
+import type { CheckboxContext, CheckboxProps, CheckboxTextProps, CheckboxValueProps } from '@semcore/checkbox';
+import type { Intergalactic } from '@semcore/core';
+import type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';
+export type HighlightedCheckboxComponent = Intergalactic.Component<'label', CheckboxProps, CheckboxContext> & {
+    Text: Intergalactic.Component<'span', CheckboxTextProps>;
+    Value: Intergalactic.Component<'input', CheckboxValueProps>;
+    AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;
+};

package/lib/types/components/input/Input.d.ts

@@ -0,0 +1,2 @@
+import Input from '@semcore/input';
+export declare const InputFH: typeof Input;

package/lib/types/components/notice/Notice.d.ts

@@ -0,0 +1,3 @@
+export declare const NoticeFH: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/pills/Pills.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedPillComponent } from './Pills.type';
+export declare const PillsFH: HighlightedPillComponent;

package/lib/types/components/pills/Pills.type.d.ts

@@ -0,0 +1,13 @@
+import type { Box } from '@semcore/base-components';
+import type { Intergalactic } from '@semcore/core';
+import type Pills from '@semcore/pills';
+import type { PillProps } from '@semcore/pills';
+export type HighlightedItemAddonProps = {
+    animatedSparkleCount?: number;
+};
+export type HighlightedPillComponent = typeof Pills & {
+    HighlightedItem: Intergalactic.Component<'div', PillProps> & {
+        Text: typeof Box;
+        Addon: Intergalactic.Component<'div', HighlightedItemAddonProps>;
+    };
+};

package/lib/types/components/radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedRadioComponent } from './Radio.type';
+export declare const RadioFH: HighlightedRadioComponent;

package/lib/types/components/radio/Radio.type.d.ts

@@ -0,0 +1,9 @@
+import type { Intergalactic } from '@semcore/core';
+import type { RadioCtx, RadioProps, RadioValueProps } from '@semcore/radio';
+import type { Text } from '@semcore/typography';
+import type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';
+export type HighlightedRadioComponent = Intergalactic.Component<'label', RadioProps, RadioCtx> & {
+    Value: Intergalactic.Component<'input', RadioValueProps>;
+    Text: typeof Text;
+    AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;
+};

package/lib/types/components/select/Select.d.ts

@@ -0,0 +1,2 @@
+import Select from '@semcore/select';
+export declare const SelectFH: typeof Select;

package/lib/types/components/switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedSwitchComponent } from './Switch.type';
+export declare const SwitchFH: HighlightedSwitchComponent;

package/lib/types/components/switch/Switch.type.d.ts

@@ -0,0 +1,6 @@
+import type { Intergalactic } from '@semcore/core';
+import type Switch from '@semcore/switch';
+import type { AnimatedSparklesProps } from '../../inner-components/sparkle/AnimatedSparkles';
+export type HighlightedSwitchComponent = typeof Switch & {
+    AnimatedSparkles: Intergalactic.Component<'div', AnimatedSparklesProps>;
+};

package/lib/types/components/tab-line/TabLine.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedTabLineComponent } from './TabLine.type';
+export declare const TabLineFH: HighlightedTabLineComponent;

package/lib/types/components/tab-line/TabLine.type.d.ts

@@ -0,0 +1,9 @@
+import type { Intergalactic } from '@semcore/core';
+import type TabLine from '@semcore/tab-line';
+export type HighlightedTabLineComponent = typeof TabLine & {
+    HighlightedItem: typeof TabLine.Item & {
+        Addon: Intergalactic.Component<'div', {
+            animatedSparkleCount?: number;
+        }>;
+    };
+};

package/lib/types/index.d.ts

@@ -0,0 +1,10 @@
+export * from './components/button/Button';
+export * from './components/pills/Pills';
+export * from './components/select/Select';
+export * from './components/input/Input';
+export * from './components/switch/Switch';
+export * from './components/tab-line/TabLine';
+export * from './components/notice/Notice';
+export * from './components/badge/Badge';
+export * from './components/radio/Radio';
+export * from './components/checkbox/Checkbox';

package/lib/types/inner-components/button-trigger/ButtonTrigger.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';
+export declare const ButtonTriggerFH: HighlightedButtonTriggerComponent;

package/lib/types/inner-components/button-trigger/ButtonTrigger.type.d.ts

@@ -0,0 +1,7 @@
+import type { ButtonTriggerProps } from '@semcore/base-trigger';
+import type BaseTrigger from '@semcore/base-trigger';
+import type { Intergalactic } from '@semcore/core';
+export type HighlightedButtonTriggerComponent = Intergalactic.Component<'div', ButtonTriggerProps> & {
+    Text: typeof BaseTrigger.Text;
+    Addon: typeof BaseTrigger.Addon;
+};

package/lib/types/inner-components/sparkle/AnimatedSparkles.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type AnimatedSparklesProps = {
+    count?: number;
+    curve?: number;
+    top?: string;
+    left?: string;
+};
+export declare function AnimatedSparkles(props: AnimatedSparklesProps & {
+    show: boolean;
+}): false | React.JSX.Element[];

package/lib/types/inner-components/sparkle/Sparkle.d.ts

@@ -0,0 +1,10 @@
+import type { Intergalactic } from '@semcore/core';
+type SparkleProps = {
+    index: number;
+    num: number;
+    curve?: number;
+    top?: string;
+    left?: string;
+};
+declare const _default: Intergalactic.Component<"svg", SparkleProps>;
+export default _default;

package/lib/types/inner-components/sparkle/index.d.ts

@@ -0,0 +1,2 @@
+import Sparkle from './Sparkle';
+export { Sparkle, };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@semcore/feature-highlight",
+  "description": "Semrush toolkit for accent features",
+  "version": "16.0.1-prerelease.0",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.mjs",
+  "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
+  "author": "UI-kit team <ui-kit-team@semrush.com>",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "import": "./lib/esm/index.mjs",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@semcore/badge": "^16.0.0",
+    "@semcore/base-trigger": "^16.2.3-prerelease.0",
+    "@semcore/button": "^16.0.4-prerelease.0",
+    "@semcore/checkbox": "^16.0.4-prerelease.0",
+    "@semcore/input": "^16.0.4-prerelease.0",
+    "@semcore/notice": "^16.1.4-prerelease.0",
+    "@semcore/pills": "^16.0.4-prerelease.0",
+    "@semcore/radio": "^16.0.4-prerelease.0",
+    "@semcore/select": "^16.1.4-prerelease.0",
+    "@semcore/switch": "^16.0.4-prerelease.0",
+    "@semcore/tab-line": "^16.0.4-prerelease.0",
+    "@semcore/typography": "^16.1.4-prerelease.0"
+  },
+  "peerDependencies": {
+    "@semcore/base-components": "^16.1.1-prerelease.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/semrush/intergalactic.git",
+    "directory": "semcore/feature-highlight"
+  },
+  "devDependencies": {
+    "@semcore/testing-utils": "1.0.0",
+    "@semcore/base-components": "16.1.1-prerelease.0"
+  },
+  "scripts": {
+    "build": "pnpm semcore-builder && pnpm vite build"
+  }
+}

package/vite.config.ts

@@ -0,0 +1,33 @@
+import copy from 'rollup-plugin-copy';
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.ts',
+      },
+      rollupOptions: {
+        external: [
+          'react',
+          'react-dom',
+          'react/jsx-runtime',
+          /@babel\/runtime\/*/,
+          /@semcore\/*/,
+        ],
+        plugins: [
+          // @ts-ignore
+          copy({
+            targets: [
+              { src: 'src/theme/**/*.css', dest: 'lib/esm' },
+            ],
+            flatten: false,
+          }),
+        ],
+      },
+    },
+  }),
+);