feat(Progress): new component (#75)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/theme/progress.ts

@@ -0,0 +1,204 @@
+export default (config: { colors: string[] }) => ({
+  slots: {
+    root: 'gap-2',
+    base: 'relative overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
+    indicator: 'rounded-full size-full transition-transform duration-200 ease-out',
+    status: 'flex justify-end text-gray-400 dark:text-gray-500 transition-transform',
+    steps: 'grid items-end',
+    step: 'transition-opacity truncate text-end row-start-1 col-start-1'
+  },
+  variants: {
+    animation: {
+      'carousel': '',
+      'carousel-inverse': '',
+      'swing': '',
+      'elastic': ''
+    },
+    color: Object.fromEntries(config.colors.map((color: string) => [color, {
+      indicator: `bg-${color}-500 dark:bg-${color}-400`,
+      steps: `text-${color}-500 dark:text-${color}-400`
+    }])),
+    size: {
+      '2xs': {
+        status: 'text-xs',
+        steps: 'text-xs'
+      },
+      'xs': {
+        status: 'text-xs',
+        steps: 'text-xs'
+      },
+      'sm': {
+        status: 'text-sm',
+        steps: 'text-sm'
+      },
+      'md': {
+        status: 'text-sm',
+        steps: 'text-sm'
+      },
+      'lg': {
+        status: 'text-sm',
+        steps: 'text-sm'
+      },
+      'xl': {
+        status: 'text-base',
+        steps: 'text-base'
+      },
+      '2xl': {
+        status: 'text-base',
+        steps: 'text-base'
+      }
+    },
+    step: {
+      active: {
+        step: 'opacity-100'
+      },
+      first: {
+        step: 'opacity-100 text-gray-500 dark:text-gray-400'
+      },
+      other: {
+        step: 'opacity-0'
+      }
+    },
+    orientation: {
+      horizontal: {
+        root: 'w-full flex flex-col',
+        base: 'w-full',
+        status: 'flex-row'
+      },
+      vertical: {
+        root: 'h-full flex flex-row-reverse',
+        base: 'h-full',
+        status: 'flex-col'
+      }
+    },
+    inverted: {
+      true: {
+        status: 'self-end'
+      }
+    }
+  },
+  compoundVariants: [{
+    inverted: true,
+    orientation: 'horizontal',
+    class: {
+      step: 'text-start',
+      status: 'flex-row-reverse'
+    }
+  }, {
+    inverted: true,
+    orientation: 'vertical',
+    class: {
+      steps: 'items-start',
+      status: 'flex-col-reverse'
+    }
+  }, {
+    orientation: 'horizontal',
+    size: '2xs',
+    class: 'h-px'
+  }, {
+    orientation: 'horizontal',
+    size: 'xs',
+    class: 'h-0.5'
+  }, {
+    orientation: 'horizontal',
+    size: 'sm',
+    class: 'h-1'
+  }, {
+    orientation: 'horizontal',
+    size: 'md',
+    class: 'h-2'
+  }, {
+    orientation: 'horizontal',
+    size: 'lg',
+    class: 'h-3'
+  }, {
+    orientation: 'horizontal',
+    size: 'xl',
+    class: 'h-4'
+  }, {
+    orientation: 'horizontal',
+    size: '2xl',
+    class: 'h-5'
+  }, {
+    orientation: 'vertical',
+    size: '2xs',
+    class: 'w-px'
+  }, {
+    orientation: 'vertical',
+    size: 'xs',
+    class: 'w-0.5'
+  }, {
+    orientation: 'vertical',
+    size: 'sm',
+    class: 'w-1'
+  }, {
+    orientation: 'vertical',
+    size: 'md',
+    class: 'w-2'
+  }, {
+    orientation: 'vertical',
+    size: 'lg',
+    class: 'w-3'
+  }, {
+    orientation: 'vertical',
+    size: 'xl',
+    class: 'w-4'
+  }, {
+    orientation: 'vertical',
+    size: '2xl',
+    class: 'w-5'
+  }, {
+    orientation: 'horizontal',
+    animation: 'carousel',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[carousel_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'vertical',
+    animation: 'carousel',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[carousel-vertical_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'horizontal',
+    animation: 'carousel-inverse',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'vertical',
+    animation: 'carousel-inverse',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[carousel-inverse-vertical_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'horizontal',
+    animation: 'swing',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[swing_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'vertical',
+    animation: 'swing',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[swing-vertical_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'horizontal',
+    animation: 'elastic',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[elastic_2s_ease-in-out_infinite]'
+    }
+  }, {
+    orientation: 'vertical',
+    animation: 'elastic',
+    class: {
+      indicator: 'data-[state=indeterminate]:animate-[elastic-vertical_2s_ease-in-out_infinite]'
+    }
+  }],
+  defaultVariants: {
+    animation: 'carousel',
+    color: 'primary',
+    size: 'md'
+  }
+})