@startupjs-ui/progress 0.1.13 → 0.1.18

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.18](https://github.com/startupjs/startupjs-ui/compare/v0.1.17...v0.1.18) (2026-02-23)
+
+
+### Features
+
+* add rounded progress ([#16](https://github.com/startupjs/startupjs-ui/issues/16)) ([d219deb](https://github.com/startupjs/startupjs-ui/commit/d219deb050cd352852d8fad2c09044ead1106bb7))
+
+
+
+
+
+## [0.1.16](https://github.com/startupjs/startupjs-ui/compare/v0.1.15...v0.1.16) (2026-02-10)
+
+**Note:** Version bump only for package @startupjs-ui/progress
+
+
+
+
+
 ## [0.1.13](https://github.com/startupjs/startupjs-ui/compare/v0.1.12...v0.1.13) (2026-02-03)
 
 **Note:** Version bump only for package @startupjs-ui/progress

package/README.mdx

@@ -6,7 +6,9 @@ import Br from '@startupjs-ui/br'
 
 # Progress
 
-Progress is used to display the length of process, for example upload or download files.
+Progress displays the completion status of a process, such as a file upload or download. The `value` prop sets the progress percentage (0 to 100, defaults to `0`).
+
+The component supports two visual variants via the `variant` prop: `'linear'` (default) and `'circular'`. You can customize the bar height with the `width` prop, the track shape with the `shape` prop (defaults to `'rounded'`), and apply custom styles using `style` for the wrapper, `progressStyle` for the progress track, and `fillerStyle` for the filled portion.
 
 ```jsx
 import { Progress } from 'startupjs-ui'
@@ -22,6 +24,8 @@ return (
 
 ## Interactive
 
+The progress bar animates smoothly as the `value` changes.
+
 ```jsx example
 const [value, setValue] = useState(0)
 const [startProgress, setStartProgress] = useState(false)
@@ -56,6 +60,8 @@ return (
 
 ## Caption
 
+Pass `children` to display a label below the progress bar.
+
 ```jsx example
 return (
   <Progress value={50}>50 of 100</Progress>

package/circleFiller.tsx

@@ -0,0 +1,73 @@
+import { useState, type ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import Svg, { Circle } from 'react-native-svg'
+import { pug, observer, u } from 'startupjs'
+import { themed, getCssVariable } from '@startupjs-ui/core'
+import STYLE from './index.cssx.styl'
+
+const { config: { filler: { backgroundColor, color } } } = STYLE
+
+interface CircleFillerProps {
+  style?: StyleProp<ViewStyle>
+  value?: number
+  width?: number
+}
+
+function resolveCssVarString (value: string) {
+  const match = String(value || '').match(/^var\((--[^)]+)\)$/)
+  if (!match) return value
+  return getCssVariable(match[1], { convertToString: true }) ?? value
+}
+
+function CircleFiller ({
+  style,
+  value = 0,
+  width = u(0.5)
+}: CircleFillerProps): ReactNode {
+  const [layoutSize, setLayoutSize] = useState(0)
+
+  const normalizedValue = Math.max(0, Math.min(100, value))
+  const diameter = layoutSize > 0 ? layoutSize : u(5)
+  const strokeWidth = Math.max(2, Number(width) || 2)
+  const radius = (diameter - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference * (1 - normalizedValue / 100)
+
+  const trackColor = resolveCssVarString(backgroundColor)
+  const valueColor = resolveCssVarString(color)
+
+  return pug`
+    View(
+      style=[style]
+      onLayout=(event) => {
+        const { width, height } = event.nativeEvent.layout || {}
+        const nextSize = Math.min(width || 0, height || 0)
+        if (nextSize > 0 && nextSize !== layoutSize) setLayoutSize(nextSize)
+      }
+    )
+      Svg(width=diameter height=diameter)
+        Circle(
+          cx=diameter / 2
+          cy=diameter / 2
+          r=radius
+          stroke=trackColor
+          strokeWidth=strokeWidth
+          fill='none'
+        )
+        Circle(
+          cx=diameter / 2
+          cy=diameter / 2
+          r=radius
+          stroke=valueColor
+          strokeWidth=strokeWidth
+          fill='none'
+          strokeLinecap='round'
+          strokeDasharray=[circumference, circumference]
+          strokeDashoffset=strokeDashoffset
+          rotation='-90'
+          origin=(diameter / 2) + ', ' + (diameter / 2)
+        )
+  `
+}
+
+export default observer(themed('Progress', CircleFiller))

package/index.cssx.styl

@@ -1,22 +1,26 @@
 // ----- CONFIG: $UI.Progress
 
 $this = merge({
-  duration: 300
+  duration: 300,
+  filler: {
+    backgroundColor: var(--color-bg-main-subtle-alt),
+    color: var(--color-bg-success)
+  }
 }, $UI.Progress, true)
 
 // ----- COMPONENT
 
-_backgroundColor = var(--color-bg-main-subtle-alt)
-_fillerColor = var(--color-bg-success)
 _duration = $this.duration
 
 .progress
-  background-color _backgroundColor
   overflow hidden
 
+  &.linear
+    background-color $this.filler.backgroundColor
+
 .filler
   height _size
-  background-color _fillerColor
+  background-color $this.filler.color
 
   +web()
     transition width (_duration/1000)s

package/index.tsx

@@ -5,6 +5,7 @@ import { themed } from '@startupjs-ui/core'
 import Div, { type DivProps } from '@startupjs-ui/div'
 import Span from '@startupjs-ui/span'
 import Filler from './filler'
+import CircleFiller from './circleFiller'
 import './index.cssx.styl'
 
 export default observer(themed('Progress', Progress))
@@ -38,13 +39,22 @@ function Progress ({
   shape = 'rounded',
   width = u(0.5)
 }: ProgressProps): ReactNode {
-  const extraStyle = { height: width }
+  const isCircular = variant === 'circular'
+  const extraStyle = isCircular ? {} : { height: width }
 
   return pug`
     View(style=style)
-      Div.progress(part='progress' style=extraStyle shape=shape)
+      Div.progress(
+        part='progress'
+        style=extraStyle
+        styleName=[variant]
+        shape=shape
+      )
         //- To normalize value pass value=Math.min(value, 100)
-        Filler(part='filler' style=extraStyle value=value)
+        if isCircular
+          CircleFiller(part='filler' style=extraStyle value=value width=width)
+        else
+          Filler(part='filler' style=extraStyle value=value)
       if typeof children === 'string'
         Span.label= children
       else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/progress",
-  "version": "0.1.13",
+  "version": "0.1.18",
   "publishConfig": {
     "access": "public"
   },
@@ -9,13 +9,13 @@
   "type": "module",
   "dependencies": {
     "@startupjs-ui/core": "^0.1.11",
-    "@startupjs-ui/div": "^0.1.13",
-    "@startupjs-ui/span": "^0.1.13"
+    "@startupjs-ui/div": "^0.1.16",
+    "@startupjs-ui/span": "^0.1.16"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "5cfdccf2bdae3873e968289a3e6b938fad02101a"
+  "gitHead": "8efcabc51cd49106c430ce6f74d22679017f0689"
 }