From afc58ff1486737dcbb23b9e1ec094cf9ca52da18 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Wed, 6 May 2026 16:09:27 +0200 Subject: [PATCH 1/2] [UIK-5140][tag] rewrite component to TS --- playground/entries/Tag.tsx | 4 +- semcore/input-tags/src/InputTags.tsx | 8 +- semcore/tag/src/{Tag.jsx => Tag.tsx} | 106 +++++++++++------- semcore/tag/src/Tag.type.ts | 104 +++++++++++++++++ semcore/tag/src/index.d.ts | 73 ------------ semcore/tag/src/{index.js => index.ts} | 1 + .../tests/examples/link-trigger/base.tsx | 4 +- .../link-trigger-different-sizes.tsx | 4 +- .../examples/link-trigger/with-select.tsx | 4 +- .../table_perf/cells/payment_status.tsx | 4 +- .../tag/tests/examples/basic_usage.tsx | 4 +- .../table_perf/cells/payment_status.tsx | 4 +- website/docs/components/tag/tag-api.md | 4 +- 13 files changed, 189 insertions(+), 135 deletions(-) rename semcore/tag/src/{Tag.jsx => Tag.tsx} (71%) create mode 100644 semcore/tag/src/Tag.type.ts delete mode 100644 semcore/tag/src/index.d.ts rename semcore/tag/src/{index.js => index.ts} (62%) diff --git a/playground/entries/Tag.tsx b/playground/entries/Tag.tsx index 01be39558e..c7adba5abc 100644 --- a/playground/entries/Tag.tsx +++ b/playground/entries/Tag.tsx @@ -1,5 +1,5 @@ import EditM from '@semcore/icon/Edit/m'; -import type { TagProps } from '@semcore/ui/tag'; +import type { NSTag } from '@semcore/ui/tag'; import { TagContainer } from '@semcore/ui/tag'; import React from 'react'; @@ -13,7 +13,7 @@ type AdditionalJSXProps = { addon: (typeof Addons)[number]; closeIcon: boolean; }; -export type TagJSXProps = JSXProps & AdditionalJSXProps; +export type TagJSXProps = JSXProps & AdditionalJSXProps; function getJSX(props: TagJSXProps) { return ( diff --git a/semcore/input-tags/src/InputTags.tsx b/semcore/input-tags/src/InputTags.tsx index 6f64041b1c..4344bbe1e0 100644 --- a/semcore/input-tags/src/InputTags.tsx +++ b/semcore/input-tags/src/InputTags.tsx @@ -15,7 +15,7 @@ import fire from '@semcore/core/lib/utils/fire'; import { getAccessibleName } from '@semcore/core/lib/utils/getAccessibleName'; import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID'; import Input, { type InputProps, type InputValueProps } from '@semcore/input'; -import Tag, { type TagProps, TagContainer, type TagTextProps, type TagContext } from '@semcore/tag'; +import Tag, { type NSTag, TagContainer } from '@semcore/tag'; import React from 'react'; import style from './style/input-tag.shadow.css'; @@ -44,7 +44,7 @@ export type InputTagsProps = Omit & locale?: string; }; -export type InputTagsTagProps = TagProps & { +export type InputTagsTagProps = NSTag.Props & { /** Property enabling the ability to remove a tag on click */ editable?: boolean; }; @@ -399,8 +399,8 @@ const InputTags = createComponent(InputTagsRoot, { Value: typeof Input.Value; TagsContainer: Intergalactic.Component<'ul'>; Tag: Intergalactic.Component<'div', InputTagsTagProps> & { - Text: Intergalactic.Component<'div', TagProps, TagContext> & { - Content: Intergalactic.Component<'div', TagTextProps>; + Text: Intergalactic.Component<'div', NSTag.Props, NSTag.Ctx> & { + Content: Intergalactic.Component<'div', NSTag.Text.Props>; }; Close: typeof TagContainer.Close; Addon: typeof Tag.Addon; diff --git a/semcore/tag/src/Tag.jsx b/semcore/tag/src/Tag.tsx similarity index 71% rename from semcore/tag/src/Tag.jsx rename to semcore/tag/src/Tag.tsx index 2cdcacc070..88083e79cb 100644 --- a/semcore/tag/src/Tag.jsx +++ b/semcore/tag/src/Tag.tsx @@ -1,4 +1,5 @@ import { Box } from '@semcore/base-components'; +import type { Intergalactic } from '@semcore/core'; import { createComponent, Component, sstyled, Root } from '@semcore/core'; import addonTextChildren from '@semcore/core/lib/utils/addonTextChildren'; import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance'; @@ -12,12 +13,16 @@ import { Text as TypographyText } from '@semcore/typography'; import React from 'react'; import style from './style/tag.shadow.css'; +import type { NSTag } from './Tag.type'; import { localizedMessages } from './translations/__intergalactic-dynamic-locales'; -class RootTag extends Component { +class RootTag extends Component< + Intergalactic.InternalTypings.InferComponentProps, + typeof RootTag.enhance +> { static displayName = 'Tag'; static style = style; - static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()]; + static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()] as const; static defaultProps = { theme: 'primary', color: 'gray-500', @@ -44,12 +49,15 @@ class RootTag extends Component { }; } - handleKeyDown = (event) => { + handleKeyDown = (event: React.KeyboardEvent) => { switch (event.key) { case ' ': case 'Enter': if (this.asProps.onClick) { event.preventDefault(); + + // TODO: Keyboard event isn't assignable to MouseEvent. + // @ts-ignore this.asProps.onClick(event); } break; @@ -75,47 +83,50 @@ class RootTag extends Component { const isInteractive = !disabled && interactive; return sstyled(styles)( - <> - - {addonLeft ? : null} - {addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])} - {addonRight ? : null} - - , + + {addonLeft ? : null} + {addonTextChildren(Children, Tag.Text, [Tag.Addon, TagContainer.Circle])} + {addonRight ? : null} + , ); } } -class RootTagContainer extends Component { +class RootTagContainer extends Component< + Intergalactic.InternalTypings.InferComponentProps, + typeof RootTagContainer.enhance +> { static displayName = 'TagContainer'; static style = style; - static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()]; + static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()] as const; static defaultProps = { color: 'gray-500', theme: 'primary', }; - tagRef = React.createRef(); + tagRef = React.createRef(); componentWillUnmount() { const tagElement = this.tagRef.current; - if (isFocusInside(tagElement)) { + if (tagElement && isFocusInside(tagElement)) { const nextTagElement = tagElement.nextElementSibling; - if (nextTagElement) { + const nextParentElementSibling = tagElement.parentElement?.nextElementSibling; + + if (nextTagElement && nextTagElement instanceof HTMLElement) { setFocus(nextTagElement); - } else { - setFocus(tagElement.parentElement?.nextElementSibling); + } else if (nextParentElementSibling && nextParentElementSibling instanceof HTMLElement) { + setFocus(nextParentElementSibling); } } } @@ -222,7 +233,10 @@ class RootTagContainer extends Component { } } -class RootCloseTagContainer extends Component { +class Close extends Component< + Intergalactic.InternalTypings.InferComponentProps, + typeof Close.enhance +> { static displayName = 'CloseTagContainer'; static style = style; @@ -233,13 +247,13 @@ class RootCloseTagContainer extends Component { size: 'm', i18n: localizedMessages, locale: 'en', - children: , + children: , }; }; - static enhance = [resolveColorEnhance()]; + static enhance = [resolveColorEnhance()] as const; - handleKeyDown = (event) => { + handleKeyDown = (event: React.KeyboardEvent) => { const { onKeyDown, onClick } = this.asProps; if (onKeyDown) { @@ -248,6 +262,9 @@ class RootCloseTagContainer extends Component { if (onClick && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); + + // TODO: Keyboard event isn't assignable to MouseEvent. + // @ts-ignore onClick(event); } }; @@ -272,7 +289,9 @@ class RootCloseTagContainer extends Component { } } -function TagContainerCircle(props) { +function TagContainerCircle( + props: Intergalactic.InternalTypings.InferChildComponentProps, +) { const SAddon = Box; const SCircle = Root; const { styles, color, resolveColor } = props; @@ -283,7 +302,9 @@ function TagContainerCircle(props) { ); } -function Text(props) { +function Text( + props: Intergalactic.InternalTypings.InferChildComponentProps, +) { const SText = Root; const { styles, tagRef } = props; @@ -297,7 +318,9 @@ function Text(props) { ); } -function Addon(props) { +function Addon( + props: Intergalactic.InternalTypings.InferChildComponentProps, +) { const SAddon = Root; const { styles, color, resolveColor } = props; @@ -309,7 +332,10 @@ function Addon(props) { return sstyled(styles)(); } -function Circle(props) { +function Circle( + props: Intergalactic.InternalTypings.InferChildComponentProps + & Intergalactic.InternalTypings.InferChildComponentProps, +) { const SCircle = Root; const { styles, color, resolveColor } = props; const tagColor = React.useMemo(() => { @@ -323,17 +349,13 @@ const Tag = createComponent(RootTag, { Text, Addon, Circle, -}); - -const CloseTagContainer = createComponent(RootCloseTagContainer, { - Close: CloseM, -}); +}) as NSTag.Component; export const TagContainer = createComponent(RootTagContainer, { Tag, Addon, - Close: CloseTagContainer, + Close, Circle: TagContainerCircle, -}); +}) as NSTag.Container.Component; export default Tag; diff --git a/semcore/tag/src/Tag.type.ts b/semcore/tag/src/Tag.type.ts new file mode 100644 index 0000000000..1ed8e5038e --- /dev/null +++ b/semcore/tag/src/Tag.type.ts @@ -0,0 +1,104 @@ +import type { BoxProps } from '@semcore/base-components'; +import type { PropGetterFn, Intergalactic } from '@semcore/core'; +import type { IconProps } from '@semcore/icon'; +import type { NSText } from '@semcore/typography'; +import type React from 'react'; + +declare namespace NSTag { + type Size = 'xl' | 'l' | 'm'; + type Theme = 'primary' | 'secondary' | 'additional'; + type Use = 'primary' | 'secondary'; + type Ctx = Props & { + getCloseProps?: PropGetterFn; + }; + type Props = BoxProps & { + /** Value responsible for tag availability + */ + disabled?: boolean; + /** Value responsible for tag activity + */ + active?: boolean; + /** Interactive tag + */ + interactive?: boolean; + /** Tag theme, there are several default themes or you can use your color + * @default primary + */ + theme?: NSTag.Theme; + /** Tag color text */ + color?: string; + /** Tag size + * @default m + */ + size?: NSTag.Size; + /** Left addon tag */ + addonLeft?: React.ElementType; + /** Right addon tag */ + addonRight?: React.ElementType; + /** Specifies the locale for i18n support */ + locale?: string; + }; + + namespace Text { + type Props = NSText.Props; + type Component = Intergalactic.Component<'div', Props>; + } + + namespace Addon { + type Props = BoxProps; + type Component = Intergalactic.Component<'div', Props>; + } + + namespace Circle { + type Props = BoxProps; + type Component = Intergalactic.Component<'div', Props>; + } + + namespace Close { + type Props = IconProps & { + /** Tag type + * @default secondary + */ + use?: NSTag.Use; + /** Tag theme, there are several default themes or you can use your color + * @default muted + */ + theme?: NSTag.Theme; + }; + type Component = Intergalactic.Component<'button', Props>; + } + + namespace Container { + type Component = Intergalactic.Component<'div', NSTag.Props, NSTag.Ctx> & { + Tag: NSTag.Component; + Close: NSTag.Close.Component; + Addon: NSTag.Addon.Component; + Circle: NSTag.Circle.Component; + }; + } + + type Component = Intergalactic.Component<'div', Props, Ctx> & { + Text: Text.Component; + Addon: Addon.Component; + Circle: Circle.Component; + }; +} + +/** @deprecated It will be removed in v18. */ +export type TagSize = NSTag.Size; +/** @deprecated It will be removed in v18. */ +export type TagTheme = NSTag.Theme; +/** @deprecated It will be removed in v18. */ +export type TagUse = NSTag.Use; +/** @deprecated It will be removed in v18. */ +export type TagProps = NSTag.Props; +/** @deprecated It will be removed in v18. */ +export type TagCloseProps = NSTag.Close.Props; +/** @deprecated It will be removed in v18. */ +export type TagContext = NSTag.Ctx; +/** @deprecated It will be removed in v18. */ +export type TagAddonProps = NSTag.Addon.Props; +/** @deprecated It will be removed in v18. */ +export type TagTextProps = NSTag.Text.Props; + +export type { NSTag }; diff --git a/semcore/tag/src/index.d.ts b/semcore/tag/src/index.d.ts deleted file mode 100644 index a442667552..0000000000 --- a/semcore/tag/src/index.d.ts +++ /dev/null @@ -1,73 +0,0 @@ -import type { BoxProps } from '@semcore/base-components'; -import type { PropGetterFn, Intergalactic } from '@semcore/core'; -import type { IconProps } from '@semcore/icon'; -import type { NSText } from '@semcore/typography'; -import type React from 'react'; - -export type TagSize = 'xl' | 'l' | 'm'; - -export type TagTheme = 'primary' | 'secondary' | 'additional'; -export type TagUse = 'primary' | 'secondary'; - -export type TagProps = BoxProps & { - /** Value responsible for tag availability - */ - disabled?: boolean; - /** Value responsible for tag activity - */ - active?: boolean; - /** Interactive tag - */ - interactive?: boolean; - /** Tag theme, there are several default themes or you can use your color - * @default primary - */ - theme?: TagTheme; - /** Tag color text */ - color?: string; - /** Tag size - * @default m - */ - size?: TagSize; - /** Left addon tag */ - addonLeft?: React.ElementType; - /** Right addon tag */ - addonRight?: React.ElementType; - /** Specifies the locale for i18n support */ - locale?: string; -}; - -export type TagCloseProps = IconProps & { - /** Tag type - * @default secondary - */ - use?: TagUse; - /** Tag theme, there are several default themes or you can use your color - * @default muted - */ - theme?: TagTheme; -}; - -export type TagContext = TagProps & { - getCloseProps?: PropGetterFn; -}; - -export type TagAddonProps = BoxProps & {}; - -export type TagTextProps = NSText.Props; - -declare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & { - Text: Intergalactic.Component<'div', TagTextProps>; - Addon: Intergalactic.Component<'div', TagAddonProps>; - Circle: Intergalactic.Component<'div', TagAddonProps>; -}; - -declare const TagContainer: Intergalactic.Component<'div', TagProps, TagContext> & { - Tag: typeof Tag; - Close: Intergalactic.Component<'button'>; - Addon: Intergalactic.Component<'div', TagAddonProps>; - Circle: Intergalactic.Component<'div', TagAddonProps>; -}; - -export default Tag; -export { TagContainer }; diff --git a/semcore/tag/src/index.js b/semcore/tag/src/index.ts similarity index 62% rename from semcore/tag/src/index.js rename to semcore/tag/src/index.ts index dd600c8c0a..e420442d64 100644 --- a/semcore/tag/src/index.js +++ b/semcore/tag/src/index.ts @@ -1 +1,2 @@ export { default, TagContainer } from './Tag'; +export * from './Tag.type'; diff --git a/stories/components/base-trigger/tests/examples/link-trigger/base.tsx b/stories/components/base-trigger/tests/examples/link-trigger/base.tsx index 6bdfdc10bf..d278c29430 100644 --- a/stories/components/base-trigger/tests/examples/link-trigger/base.tsx +++ b/stories/components/base-trigger/tests/examples/link-trigger/base.tsx @@ -5,7 +5,7 @@ import { LinkTrigger } from '@semcore/ui/base-trigger'; import type { LinkTriggerProps } from '@semcore/ui/base-trigger'; import Counter, { type CounterProps } from '@semcore/ui/counter'; import Flags from '@semcore/ui/flags'; -import Tag, { type TagSize } from '@semcore/ui/tag'; +import Tag, { type NSTag } from '@semcore/ui/tag'; import type { NSText } from '@semcore/ui/typography'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -55,7 +55,7 @@ const Demo = (props: BasicLinktriggerProps) => { counterSize = 'm'; } - let tagSize: TagSize | undefined; + let tagSize: NSTag.Size | undefined; if (numSize >= 600) { tagSize = 'xl'; } else if (numSize >= 300) { diff --git a/stories/components/base-trigger/tests/examples/link-trigger/link-trigger-different-sizes.tsx b/stories/components/base-trigger/tests/examples/link-trigger/link-trigger-different-sizes.tsx index 94c94335da..4eef186883 100644 --- a/stories/components/base-trigger/tests/examples/link-trigger/link-trigger-different-sizes.tsx +++ b/stories/components/base-trigger/tests/examples/link-trigger/link-trigger-different-sizes.tsx @@ -4,7 +4,7 @@ import Badge from '@semcore/ui/badge'; import { LinkTrigger } from '@semcore/ui/base-trigger'; import Counter, { type CounterProps } from '@semcore/ui/counter'; import Flags from '@semcore/ui/flags'; -import Tag, { type TagSize } from '@semcore/ui/tag'; +import Tag, { type NSTag } from '@semcore/ui/tag'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -32,7 +32,7 @@ const Demo = (props: LinkTriggerSizesProps) => { counterSize = 'm'; } - let tagSize: TagSize; + let tagSize: NSTag.Size; if (size >= 600) { tagSize = 'xl'; } else if (size >= 300) { diff --git a/stories/components/base-trigger/tests/examples/link-trigger/with-select.tsx b/stories/components/base-trigger/tests/examples/link-trigger/with-select.tsx index 1910bdc851..8f84a2412e 100644 --- a/stories/components/base-trigger/tests/examples/link-trigger/with-select.tsx +++ b/stories/components/base-trigger/tests/examples/link-trigger/with-select.tsx @@ -7,7 +7,7 @@ import type { LinkTriggerProps } from '@semcore/ui/base-trigger'; import Counter, { type CounterProps } from '@semcore/ui/counter'; import Flags from '@semcore/ui/flags'; import Select from '@semcore/ui/select'; -import Tag, { type TagSize } from '@semcore/ui/tag'; +import Tag, { type NSTag } from '@semcore/ui/tag'; import type { NSText } from '@semcore/ui/typography'; import { Text } from '@semcore/ui/typography'; import React from 'react'; @@ -58,7 +58,7 @@ const Demo = (props: LinkTriggerSelectDDMenuExample) => { counterSize = 'm'; } - let tagSize: TagSize | undefined; + let tagSize: NSTag.Size | undefined; if (numSize >= 600) { tagSize = 'xl'; } else if (numSize >= 300) { diff --git a/stories/components/data-table/advanced/examples/table_perf/cells/payment_status.tsx b/stories/components/data-table/advanced/examples/table_perf/cells/payment_status.tsx index 3e44113834..a68dbefdf4 100644 --- a/stories/components/data-table/advanced/examples/table_perf/cells/payment_status.tsx +++ b/stories/components/data-table/advanced/examples/table_perf/cells/payment_status.tsx @@ -1,5 +1,5 @@ import { Box } from '@semcore/ui/base-components'; -import type { TagProps } from '@semcore/ui/tag'; +import type { NSTag } from '@semcore/ui/tag'; import Tag from '@semcore/ui/tag'; import React from 'react'; import type { FC } from 'react'; @@ -9,7 +9,7 @@ type PaymentStatusProps = { status: 'success' | 'failed'; short?: boolean; testIdPrefix?: string; -} & Omit; +} & Omit; const colorsMap = { success: 'green-500', diff --git a/stories/components/tag/tests/examples/basic_usage.tsx b/stories/components/tag/tests/examples/basic_usage.tsx index bf57752f7f..ac2caee886 100644 --- a/stories/components/tag/tests/examples/basic_usage.tsx +++ b/stories/components/tag/tests/examples/basic_usage.tsx @@ -2,9 +2,9 @@ import CheckM from '@semcore/icon/Check/m'; import CloseM from '@semcore/icon/Close/m'; import { Box, Flex } from '@semcore/ui/base-components'; import Tag, { TagContainer } from '@semcore/ui/tag'; -import type { TagProps } from '@semcore/ui/tag'; +import type { NSTag } from '@semcore/ui/tag'; import React from 'react'; -export type BasicTagProps = TagProps & { +export type BasicTagProps = NSTag.Props & { text?: string; disabled?: boolean; showAddonLeft?: boolean; diff --git a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx index 3e44113834..a68dbefdf4 100644 --- a/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx +++ b/stories/patterns/core/tests/all-components/components/Tables/table_perf/cells/payment_status.tsx @@ -1,5 +1,5 @@ import { Box } from '@semcore/ui/base-components'; -import type { TagProps } from '@semcore/ui/tag'; +import type { NSTag } from '@semcore/ui/tag'; import Tag from '@semcore/ui/tag'; import React from 'react'; import type { FC } from 'react'; @@ -9,7 +9,7 @@ type PaymentStatusProps = { status: 'success' | 'failed'; short?: boolean; testIdPrefix?: string; -} & Omit; +} & Omit; const colorsMap = { success: 'green-500', diff --git a/website/docs/components/tag/tag-api.md b/website/docs/components/tag/tag-api.md index 2e3b6c47f4..28abe49099 100644 --- a/website/docs/components/tag/tag-api.md +++ b/website/docs/components/tag/tag-api.md @@ -8,7 +8,7 @@ tabs: Design('tag'), A11y('tag-a11y'), API('tag-api'), Example('tag-code'), Chan `TagContainer` is necessary for the correct appearance and behavior of the **Delete tag** button. - + ## TagContainer.Close @@ -43,7 +43,7 @@ import Tag from '@semcore/ui/tag'; ; ``` - + ## Tag.Circle From 0d65da668dfa0ca375772cddf4a9b590ce7464c0 Mon Sep 17 00:00:00 2001 From: Slizhevsky Vladislav Date: Wed, 6 May 2026 16:30:26 +0200 Subject: [PATCH 2/2] [UIK-5140][tag] rewrite component to TS --- semcore/tab-panel/src/TabPanel.type.ts | 2 +- semcore/tag/package.json | 2 +- semcore/tag/vite.config.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/semcore/tab-panel/src/TabPanel.type.ts b/semcore/tab-panel/src/TabPanel.type.ts index 22d3d856c6..6cf7b8da8e 100644 --- a/semcore/tab-panel/src/TabPanel.type.ts +++ b/semcore/tab-panel/src/TabPanel.type.ts @@ -81,7 +81,7 @@ declare namespace NSTabPanel { /** @deprecated It will be removed in v18. */ export type TabPanelValue = NSTabPanel.Value; /** @deprecated It will be removed in v18. */ -export type TabPanelProps = NSTabPanel.Props; +export type TabPanelProps = NSTabPanel.Props; /** @deprecated It will be removed in v18. */ export type TabPanelItemProps = NSTabPanel.Item.Props; /** @deprecated It will be removed in v18. */ diff --git a/semcore/tag/package.json b/semcore/tag/package.json index 24fa6891cb..029e4ed8b8 100644 --- a/semcore/tag/package.json +++ b/semcore/tag/package.json @@ -9,7 +9,7 @@ "author": "UI-kit team ", "license": "MIT", "scripts": { - "build": "pnpm semcore-builder --source=js && pnpm vite build" + "build": "pnpm semcore-builder && pnpm vite build" }, "exports": { "types": "./lib/types/index.d.ts", diff --git a/semcore/tag/vite.config.ts b/semcore/tag/vite.config.ts index 0991a16528..90f46b4cb2 100644 --- a/semcore/tag/vite.config.ts +++ b/semcore/tag/vite.config.ts @@ -7,7 +7,7 @@ export default mergeConfig( defineConfig({ build: { lib: { - entry: './src/index.js', + entry: './src/index.ts', }, rollupOptions: { external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],