feat: add component progress

Author: Ohh-889

packages/ui/package.json

@@ -38,6 +38,7 @@
     "@radix-ui/react-menubar": "1.1.15",
     "@radix-ui/react-navigation-menu": "1.2.13",
     "@radix-ui/react-popover": "1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-radio-group": "1.3.7",
     "@radix-ui/react-scroll-area": "1.2.9",
     "@radix-ui/react-select": "^2.2.5",

packages/ui/src/components/progress/Progress.tsx

@@ -0,0 +1,39 @@
+import { Indicator, Root } from '@radix-ui/react-progress';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { progressVariants } from './progress-variants';
+import type { ProgressProps } from './types';
+
+const Progress = forwardRef<ComponentRef<typeof Root>, ProgressProps>((props, ref) => {
+  const { className, classNames, color, size, value, ...rest } = props;
+
+  const { indicator, root } = progressVariants({ color, size });
+
+  const mergedCls = {
+    indicator: cn(indicator(), classNames?.indicator),
+    root: cn(root(), className, classNames?.root)
+  };
+
+  return (
+    <Root
+      className={mergedCls.root}
+      data-slot="progress-root"
+      ref={ref}
+      value={value}
+      {...rest}
+    >
+      <Indicator
+        className={mergedCls.indicator}
+        data-slot="progress-indicator"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </Root>
+  );
+});
+
+Progress.displayName = 'Progress';
+
+export default Progress;

packages/ui/src/components/progress/index.ts

@@ -0,0 +1,3 @@
+export { default as Progress } from './Progress';
+
+export * from './types';

packages/ui/src/components/progress/progress-variants.ts

@@ -0,0 +1,70 @@
+import { tv } from 'tailwind-variants';
+
+export const progressVariants = tv({
+  defaultVariants: {
+    color: 'primary',
+    size: 'md'
+  },
+  slots: {
+    indicator: 'flex-1 size-full transition-all duration-200',
+    root: 'relative w-full overflow-hidden rounded-full'
+  },
+  variants: {
+    color: {
+      accent: {
+        indicator: 'bg-accent-foreground',
+        root: 'bg-accent-foreground/20'
+      },
+      carbon: {
+        indicator: 'bg-carbon',
+        root: 'bg-carbon/20'
+      },
+      destructive: {
+        indicator: 'bg-destructive',
+        root: 'bg-destructive/20'
+      },
+      info: {
+        indicator: 'bg-info',
+        root: 'bg-info/20'
+      },
+      primary: {
+        indicator: 'bg-primary',
+        root: 'bg-primary/20'
+      },
+      secondary: {
+        indicator: 'bg-secondary-foreground',
+        root: 'bg-secondary-foreground/20'
+      },
+      success: {
+        indicator: 'bg-success',
+        root: 'bg-success/20'
+      },
+      warning: {
+        indicator: 'bg-warning',
+        root: 'bg-warning/20'
+      }
+    },
+    size: {
+      '2xl': {
+        root: 'h-4'
+      },
+      lg: {
+        root: 'h-3'
+      },
+      md: {
+        root: 'h-2.5'
+      },
+      sm: {
+        root: 'h-2'
+      },
+      xl: {
+        root: 'h-3.5'
+      },
+      xs: {
+        root: 'h-1.75'
+      }
+    }
+  }
+});
+
+export type ProgressSlots = keyof typeof progressVariants.slots;

packages/ui/src/components/progress/types.ts

@@ -0,0 +1,12 @@
+import type { ProgressProps as _ProgressProps } from '@radix-ui/react-progress';
+
+import type { BaseNodeProps, ClassValue, ThemeColor } from '@/types/other';
+
+import type { ProgressSlots } from './progress-variants';
+
+export type ProgressClassNames = Partial<Record<ProgressSlots, ClassValue>>;
+
+export interface ProgressProps extends BaseNodeProps<Omit<_ProgressProps, 'children'>> {
+  classNames?: ProgressClassNames;
+  color?: ThemeColor;
+}

packages/ui/src/index.ts

@@ -52,6 +52,8 @@ export * from './components/label';
 
 export * from './components/popover';
 
+export * from './components/progress';
+
 export * from './components/radio';
 
 export * from './components/scroll-area';

playground/src/app/(demo)/progress/modules/Color.tsx

@@ -0,0 +1,33 @@
+import type { ProgressProps } from 'soybean-react-ui';
+import { Card, Progress } from 'soybean-react-ui';
+
+const colors: ProgressProps['color'][] = [
+  'primary',
+  'destructive',
+  'success',
+  'warning',
+  'info',
+  'carbon',
+  'secondary',
+  'accent'
+];
+
+export const Color = () => {
+  return (
+    <Card
+      split
+      title="Color"
+    >
+      <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">
+        {colors.map(color => (
+          <Progress
+            color={color}
+            defaultValue={66}
+            key={color}
+            value={50}
+          />
+        ))}
+      </div>
+    </Card>
+  );
+};

playground/src/app/(demo)/progress/modules/Size.tsx

@@ -0,0 +1,36 @@
+import type { ProgressProps } from 'soybean-react-ui';
+import { Card, Progress } from 'soybean-react-ui';
+
+const sizes: ProgressProps['size'][] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+
+const colors: ProgressProps['color'][] = [
+  'primary',
+  'destructive',
+  'success',
+  'warning',
+  'info',
+  'carbon',
+  'secondary',
+  'accent'
+];
+
+export const Size = () => {
+  return (
+    <Card
+      split
+      title="Size"
+    >
+      <div className="flex w-[320px] flex-col gap-[12px] lt-sm:w-auto">
+        {sizes.map((size, index) => (
+          <Progress
+            color={colors[index]}
+            defaultValue={66}
+            key={size}
+            size={size}
+            value={50}
+          />
+        ))}
+      </div>
+    </Card>
+  );
+};

playground/src/app/(demo)/progress/page.tsx

@@ -0,0 +1,12 @@
+import { Color } from './modules/Color';
+import { Size } from './modules/Size';
+
+export default function ProgressPage() {
+  return (
+    <div className="flex-c gap-4">
+      <Color />
+
+      <Size />
+    </div>
+  );
+}