feat: create progress-circle plugin component

README.md

@@ -84,6 +84,19 @@ export default withShurikenUI({
           text: 'primary-800',
           textDark: 'primary-200',
         },
+        progressCircle: {
+          circleDuration: '500',
+          default: {
+            text: 'muted-200',
+            textDark: 'muted-700',
+            stroke: 'current',
+          },
+          contrast: {
+            text: 'muted-200',
+            textDark: 'muted-900',
+            stroke: 'current',    
+          }
+        },
         slimscroll: {
           width: '[6px]',
           bg: 'black/5',

src/plugins/components/index.ts

@@ -7,6 +7,7 @@ import label from './label'
 import mark from './mark'
 import mask from './mask'
 import placeload from './placeload'
+import progressCircle from './progress-circle'
 import slimscroll from './slimscroll'
 import tooltip from './tooltip'
 
@@ -17,6 +18,7 @@ const components = [
   mark,
   mask,
   placeload,
+  progressCircle,
   slimscroll,
   tooltip,
 ]

src/plugins/components/progress-circle.ts

@@ -0,0 +1,58 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultProgressCircleConfig = {
+  circleDuration: '500',
+  default: {
+    text: 'muted-200',
+    textDark: 'muted-700',
+    stroke: 'current',
+  },
+  contrast: {
+    text: 'muted-200',
+    textDark: 'muted-900',
+    stroke: 'current',
+  },
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.progressCircle'
+      ) satisfies typeof defaultProgressCircleConfig
+
+      addComponents({
+        [`.${prefix}-progress-circle`]: {
+          [`@apply relative inline-flex items-center justify-center`]: {},
+
+          [`circle:nth-child(2)`]: {
+            // Is this a component or a class?
+            [`@apply stroke-current transition-all duration-${config.circleDuration}`]:
+              {},
+          },
+          [`&.${prefix}-progress-default circle:first-child`]: {
+            [`@apply text-${config.default.text} dark:text-${config.default.textDark} stroke-${config.default.stroke}`]:
+              {},
+          },
+          [`&.${prefix}-progress-contrast circle:first-child`]: {
+            [`@apply text-${config.contrast.text} dark:text-${config.contrast.textDark} stroke-${config.contrast.stroke}`]:
+              {},
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          progressCircle: defaultProgressCircleConfig,
+        },
+      },
+    }
+  }
+)