@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Icon/icon.tsx

@@ -0,0 +1,119 @@
+import { ElementType, memo, useMemo } from 'react';
+
+import { Box } from '@/components';
+import { cn } from '@/utils';
+
+const ICON_SIZES = {
+  small: 'size-4',
+  medium: 'size-6',
+  large: 'size-8',
+};
+
+const CONTAINER_SIZES = {
+  small: 'size-8 min-w-8 min-h-8',
+  medium: 'size-12 min-w-12 min-h-12',
+  large: 'size-16 min-w-16 min-h-16',
+};
+
+const SPIRAL_CONFIG = {
+  CIRCLE_COUNT: 7,
+  BASE_SIZE: 100,
+  SIZE_INCREMENT: 100,
+  OPACITY_DECREMENT: 0.2,
+};
+
+export interface IconProps {
+  icon: ElementType;
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'outline' | 'success' | 'error' | 'warning';
+  hasSpiralEffect?: boolean;
+  size?: keyof typeof ICON_SIZES;
+}
+
+const IconComponent = ({
+  icon: IconComponent,
+  className,
+  variant = 'primary',
+  hasSpiralEffect = false,
+  size = 'medium',
+  ...rest
+}: IconProps) => {
+  const spiralCircles = useMemo(() => {
+    if (!hasSpiralEffect) return [];
+
+    return Array.from({ length: SPIRAL_CONFIG.CIRCLE_COUNT }, (_, i) => {
+      const size = SPIRAL_CONFIG.BASE_SIZE + i * SPIRAL_CONFIG.SIZE_INCREMENT;
+      const opacity = Math.max(0, 1 - i * SPIRAL_CONFIG.OPACITY_DECREMENT);
+
+      return {
+        id: i,
+        size,
+        opacity,
+      };
+    });
+  }, [ hasSpiralEffect ]);
+
+  const containerClasses = cn(
+    'relative flex justify-center items-center',
+    CONTAINER_SIZES[size],
+    className,
+    {
+      'rounded-full': variant !== 'outline',
+      'bg-white rounded-lg border border-gray-200': variant === 'outline',
+      'bg-primary/10': variant === 'primary',
+      'bg-gray-100': variant === 'secondary',
+      'bg-success-100': variant === 'success',
+      'bg-error-100': variant === 'error',
+      'bg-warning-100': variant === 'warning',
+    }
+  );
+
+  const iconClasses = cn(
+    ICON_SIZES[size],
+    {
+      'text-primary': variant === 'primary',
+      'text-gray-700': variant === 'secondary' || variant === 'outline',
+      'text-success-600': variant === 'success',
+      'text-error-600': variant === 'error',
+      'text-warning-600': variant === 'warning',
+    }
+  );
+
+  return (
+    <div
+      className={containerClasses}
+      {...rest}
+    >
+      {hasSpiralEffect && spiralCircles.length > 0 && (
+        <Box
+          className="absolute inset-0 rounded-full pointer-events-none"
+        >
+          {spiralCircles.map(({ id, size: circleSize, opacity }) => (
+            <Box
+              key={id}
+              className="absolute border border-gray-200 rounded-full"
+              style={{
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: `${circleSize}px`,
+                height: `${circleSize}px`,
+                opacity,
+                animationDelay: `${id * 0.1}s`,
+              }}
+            />
+          ))}
+        </Box>
+      )}
+
+      <IconComponent
+        className={iconClasses}
+      />
+    </div>
+  );
+};
+
+const Icon = memo(IconComponent);
+Icon.displayName = 'Icon';
+
+export { Icon };

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1 @@
+export * from './icon';

package/src/components/atoms/Input/index.ts

@@ -0,0 +1 @@
+export { Input } from './input';