@semcore/progress-bar 17.0.0-prerelease.31 → 17.0.0-prerelease.36

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 CHANGED
@@ -2,12 +2,16 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
- ## [17.0.0] - 2026-03-27
5
+ ## [17.0.0] - 2026-04-10
6
6
 
7
7
  ### BREAK
8
8
 
9
9
  - **ellipsis**: New major version.
10
10
 
11
+ ### Fixed
12
+
13
+ - Rewrite component to TS.
14
+
11
15
  ## [16.0.11] - 2025-10-29
12
16
 
13
17
  ### Changed
@@ -30,6 +30,7 @@ const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_star
30
30
  "_theme_custom": "_theme_custom_u2ua8_gg_"
31
31
  });
32
32
  function isCustomTheme(theme) {
33
+ if (!theme) return false;
33
34
  return !['dark', 'invert'].includes(theme);
34
35
  }
35
36
  class ProgressBarRoot extends _core.Component {
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","Component","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Box","Children","styles","useTheme","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","createComponent","_default","exports"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()];\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.js","names":["_core","require","_baseComponents","_resolveColorEnhance","_interopRequireDefault","_react","style","sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","Component","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Box","Children","styles","useTheme","default","createElement","cn","assignProps","_defineProperty2","resolveColorEnhance","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","createComponent","_default","exports"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { ProgressBarRootComponent, ProgressBarComponent, ProgressBarValueComponent } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<ProgressBarRootComponent>,\n typeof ProgressBarRoot.enhance\n> {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n ProgressBarValueComponent,\n typeof ProgressBarRoot,\n 'Value'\n >,\n) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n}) as ProgressBarComponent;\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ //# sourceMappingURL=ProgressBar.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\nexport type ProgressBarRootComponent = Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt>;\nexport type ProgressBarValueComponent = Intergalactic.Component<'div', ValueProps>;\n\nexport type ProgressBarComponent = ProgressBarRootComponent & {\n Value: ProgressBarValueComponent;\n};\n"],"mappings":"","ignoreList":[]}
package/lib/cjs/index.js CHANGED
@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
+ var _exportNames = {};
7
8
  Object.defineProperty(exports, "default", {
8
9
  enumerable: true,
9
10
  get: function () {
@@ -11,4 +12,16 @@ Object.defineProperty(exports, "default", {
11
12
  }
12
13
  });
13
14
  var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
15
+ var _ProgressBar2 = require("./ProgressBar.type");
16
+ Object.keys(_ProgressBar2).forEach(function (key) {
17
+ if (key === "default" || key === "__esModule") return;
18
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
19
+ if (key in exports && exports[key] === _ProgressBar2[key]) return;
20
+ Object.defineProperty(exports, key, {
21
+ enumerable: true,
22
+ get: function () {
23
+ return _ProgressBar2[key];
24
+ }
25
+ });
26
+ });
14
27
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_ProgressBar","_interopRequireDefault","require"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["_ProgressBar","_interopRequireDefault","require","_ProgressBar2","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar.type';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,aAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,aAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,aAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
@@ -26,6 +26,7 @@ const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/
26
26
  "_theme_custom": "_theme_custom_u2ua8_gg_"
27
27
  });
28
28
  function isCustomTheme(theme) {
29
+ if (!theme) return false;
29
30
  return !['dark', 'invert'].includes(theme);
30
31
  }
31
32
  class ProgressBarRoot extends Component {
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","names":["Box","createComponent","Component","sstyled","Root","resolveColorEnhance","React","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Children","styles","useTheme","createElement","cn","_assignProps","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","_assignProps2"],"sources":["../../src/ProgressBar.jsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()];\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"ProgressBar.js","names":["Box","createComponent","Component","sstyled","Root","resolveColorEnhance","React","style","_sstyled","insert","isCustomTheme","theme","includes","ProgressBarRoot","getValueProps","value","duration","size","resolveColor","asProps","render","_ref","_ref3","SProgressBar","Children","styles","useTheme","createElement","cn","_assignProps","_defineProperty","children","ProgressBar","Value","props","_ref2","arguments[0]","_ref4","SValue","width","_assignProps2"],"sources":["../../src/ProgressBar.tsx"],"sourcesContent":["import { Box } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport resolveColorEnhance from '@semcore/core/lib/utils/enhances/resolveColorEnhance';\nimport React from 'react';\n\nimport type { ProgressBarRootComponent, ProgressBarComponent, ProgressBarValueComponent } from './ProgressBar.type';\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme?: string) {\n if (!theme) return false;\n\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component<\n Intergalactic.InternalTypings.InferComponentProps<ProgressBarRootComponent>,\n typeof ProgressBarRoot.enhance\n> {\n static displayName = 'ProgressBar';\n static style = style;\n static enhance = [resolveColorEnhance()] as const;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size, resolveColor } = this.asProps;\n return {\n value,\n duration,\n size,\n resolveColor,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value, resolveColor } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n role='progressbar'\n aria-valuenow={value}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(\n props: Intergalactic.InternalTypings.InferChildComponentProps<\n ProgressBarValueComponent,\n typeof ProgressBarRoot,\n 'Value'\n >,\n) {\n const SValue = Root;\n const { styles, value, theme, duration, resolveColor } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n}) as ProgressBarComponent;\n\nexport default ProgressBar;\n"],"mappings":"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","ignoreList":[]}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=ProgressBar.type.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ProgressBar.type.js","names":[],"sources":["../../src/ProgressBar.type.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\nexport type ProgressBarRootComponent = Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt>;\nexport type ProgressBarValueComponent = Intergalactic.Component<'div', ValueProps>;\n\nexport type ProgressBarComponent = ProgressBarRootComponent & {\n Value: ProgressBarValueComponent;\n};\n"],"mappings":"","ignoreList":[]}
package/lib/es6/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default } from './ProgressBar';
2
+ export * from './ProgressBar.type';
2
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './ProgressBar';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe","ignoreList":[]}
1
+ {"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default } from './ProgressBar';\nexport * from './ProgressBar.type';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAe;AACvC,cAAc,oBAAoB","ignoreList":[]}
@@ -30,6 +30,7 @@ const style = (
30
30
  })
31
31
  );
32
32
  function isCustomTheme(theme) {
33
+ if (!theme) return false;
33
34
  return !["dark", "invert"].includes(theme);
34
35
  }
35
36
  class ProgressBarRoot extends Component {
@@ -0,0 +1,3 @@
1
+ import type { ProgressBarComponent } from './ProgressBar.type';
2
+ declare const ProgressBar: ProgressBarComponent;
3
+ export default ProgressBar;
@@ -0,0 +1,38 @@
1
+ import type { BoxProps } from '@semcore/base-components';
2
+ import type { PropGetterFn, Intergalactic } from '@semcore/core';
3
+ export type ProgressBarProps = BoxProps & {
4
+ /**
5
+ * Progress bar theme
6
+ * @default invert
7
+ */
8
+ theme?: 'dark' | 'invert' | string;
9
+ /**
10
+ * Progress bar size
11
+ * @default m
12
+ */
13
+ size?: 's' | 'm' | 'l';
14
+ /** Value as a percentage */
15
+ value?: number;
16
+ /** Duration of animation, ms
17
+ * @default 1000
18
+ */
19
+ duration?: number;
20
+ };
21
+ export type ValueProps = BoxProps & {
22
+ /** Controls the size of the value bar */
23
+ size?: 's' | 'm' | 'l';
24
+ /** Progress value */
25
+ value?: number;
26
+ /** Animation diration in milliseconds for transitions */
27
+ duration?: number;
28
+ /** Color theme */
29
+ theme?: string;
30
+ };
31
+ export type ProgressBarCxt = {
32
+ getValueProps: PropGetterFn;
33
+ };
34
+ export type ProgressBarRootComponent = Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt>;
35
+ export type ProgressBarValueComponent = Intergalactic.Component<'div', ValueProps>;
36
+ export type ProgressBarComponent = ProgressBarRootComponent & {
37
+ Value: ProgressBarValueComponent;
38
+ };
@@ -1,42 +1,2 @@
1
- import type { BoxProps } from '@semcore/base-components';
2
- import type { PropGetterFn, Intergalactic } from '@semcore/core';
3
-
4
- export type ProgressBarProps = BoxProps & {
5
- /**
6
- * Progress bar theme
7
- * @default invert
8
- */
9
- theme?: 'dark' | 'invert' | string;
10
- /**
11
- * Progress bar size
12
- * @default m
13
- */
14
- size?: 's' | 'm' | 'l';
15
- /** Value as a percentage */
16
- value?: number;
17
- /** Duration of animation, ms
18
- * @default 1000
19
- */
20
- duration?: number;
21
- };
22
-
23
- export type ValueProps = BoxProps & {
24
- /** Controls the size of the value bar */
25
- size?: 's' | 'm' | 'l';
26
- /** Progress value */
27
- value?: number;
28
- /** Animation diration in milliseconds for transitions */
29
- duration?: number;
30
- /** Color theme */
31
- theme?: string;
32
- };
33
-
34
- export type ProgressBarCxt = {
35
- getValueProps: PropGetterFn;
36
- };
37
-
38
- declare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {
39
- Value: Intergalactic.Component<'div', ValueProps>;
40
- };
41
-
42
- export default ProgressBar;
1
+ export { default } from './ProgressBar';
2
+ export * from './ProgressBar.type';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/progress-bar",
3
3
  "description": "Semrush ProgressBar Component",
4
- "version": "17.0.0-prerelease.31",
4
+ "version": "17.0.0-prerelease.36",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -22,11 +22,11 @@
22
22
  "directory": "semcore/progress-bar"
23
23
  },
24
24
  "devDependencies": {
25
- "@semcore/core": "17.0.0-prerelease.31",
26
- "@semcore/base-components": "17.0.0-prerelease.31",
25
+ "@semcore/core": "17.0.0-prerelease.36",
26
+ "@semcore/base-components": "17.0.0-prerelease.36",
27
27
  "@semcore/testing-utils": "1.0.0"
28
28
  },
29
29
  "scripts": {
30
- "build": "pnpm semcore-builder --source=js && pnpm vite build"
30
+ "build": "pnpm semcore-builder && pnpm vite build"
31
31
  }
32
32
  }
package/vite.config.ts CHANGED
@@ -7,7 +7,7 @@ export default mergeConfig(
7
7
  defineConfig({
8
8
  build: {
9
9
  lib: {
10
- entry: './src/index.js',
10
+ entry: './src/index.ts',
11
11
  },
12
12
  rollupOptions: {
13
13
  external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
@@ -1,2 +0,0 @@
1
- "use strict";
2
- //# sourceMappingURL=index.d.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":"","ignoreList":[]}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=index.d.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import type { BoxProps } from '@semcore/base-components';\nimport type { PropGetterFn, Intergalactic } from '@semcore/core';\n\nexport type ProgressBarProps = BoxProps & {\n /**\n * Progress bar theme\n * @default invert\n */\n theme?: 'dark' | 'invert' | string;\n /**\n * Progress bar size\n * @default m\n */\n size?: 's' | 'm' | 'l';\n /** Value as a percentage */\n value?: number;\n /** Duration of animation, ms\n * @default 1000\n */\n duration?: number;\n};\n\nexport type ValueProps = BoxProps & {\n /** Controls the size of the value bar */\n size?: 's' | 'm' | 'l';\n /** Progress value */\n value?: number;\n /** Animation diration in milliseconds for transitions */\n duration?: number;\n /** Color theme */\n theme?: string;\n};\n\nexport type ProgressBarCxt = {\n getValueProps: PropGetterFn;\n};\n\ndeclare const ProgressBar: Intergalactic.Component<'div', ProgressBarProps, ProgressBarCxt> & {\n Value: Intergalactic.Component<'div', ValueProps>;\n};\n\nexport default ProgressBar;\n"],"mappings":"","ignoreList":[]}