fix: update @pezkuwi/api packages to 16.5.22

packages/react-components/src/KurdistanSun.tsx

@@ -0,0 +1,167 @@
+// Copyright 2017-2026 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { styled, keyframes } from 'styled-components';
+
+interface Props {
+  size?: number;
+  className?: string;
+}
+
+const rotateHalo = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+`;
+
+const pulseRays = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+`;
+
+const rayShine = keyframes`
+  0%, 100% { opacity: 0.9; }
+  50% { opacity: 0.5; }
+`;
+
+const pulseGlow = keyframes`
+  0%, 100% { opacity: 0.6; }
+  50% { opacity: 0.3; }
+`;
+
+const StyledContainer = styled.div<{ size: number }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+
+  .sun-halos {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .halo {
+    position: absolute;
+    border-radius: 50%;
+    animation: ${rotateHalo} 3s linear infinite;
+  }
+
+  .halo-green {
+    width: 100%;
+    height: 100%;
+    border: 4px solid transparent;
+    border-top-color: #00a550;
+    border-bottom-color: #00a550;
+    animation-duration: 3s;
+  }
+
+  .halo-red {
+    width: 80%;
+    height: 80%;
+    border: 4px solid transparent;
+    border-left-color: #ed1c24;
+    border-right-color: #ed1c24;
+    animation-duration: 2.5s;
+    animation-direction: reverse;
+  }
+
+  .halo-yellow {
+    width: 60%;
+    height: 60%;
+    border: 4px solid transparent;
+    border-top-color: #ffed00;
+    border-bottom-color: #ffed00;
+    animation-duration: 2s;
+  }
+
+  .kurdistan-sun-svg {
+    position: relative;
+    z-index: 1;
+    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
+  }
+
+  .sun-rays {
+    animation: ${pulseRays} 2s ease-in-out infinite;
+  }
+
+  .ray {
+    animation: ${rayShine} 2s ease-in-out infinite;
+  }
+
+  .sun-center {
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
+  }
+
+  .sun-glow {
+    animation: ${pulseGlow} 2s ease-in-out infinite;
+  }
+`;
+
+function KurdistanSun ({ className = '', size = 200 }: Props): React.ReactElement<Props> {
+  return (
+    <StyledContainer className={className} size={size}>
+      <div className="sun-halos">
+        <div className="halo halo-green" />
+        <div className="halo halo-red" />
+        <div className="halo halo-yellow" />
+      </div>
+
+      <svg
+        className="kurdistan-sun-svg"
+        viewBox="0 0 200 200"
+      >
+        <g className="sun-rays">
+          {Array.from({ length: 21 }).map((_, i) => {
+            const angle = (i * 360) / 21;
+            return (
+              <line
+                key={i}
+                className="ray"
+                style={{ animationDelay: `${i * 0.05}s` }}
+                stroke="rgba(255, 255, 255, 0.9)"
+                strokeLinecap="round"
+                strokeWidth="3"
+                transform={`rotate(${angle} 100 100)`}
+                x1="100"
+                x2="100"
+                y1="100"
+                y2="20"
+              />
+            );
+          })}
+        </g>
+
+        <circle
+          className="sun-center"
+          cx="100"
+          cy="100"
+          fill="white"
+          r="35"
+        />
+
+        <circle
+          className="sun-glow"
+          cx="100"
+          cy="100"
+          fill="url(#sunGradient)"
+          r="35"
+        />
+
+        <defs>
+          <radialGradient id="sunGradient">
+            <stop offset="0%" stopColor="rgba(255, 255, 255, 0.8)" />
+            <stop offset="100%" stopColor="rgba(255, 255, 255, 0.2)" />
+          </radialGradient>
+        </defs>
+      </svg>
+    </StyledContainer>
+  );
+}
+
+export default React.memo(KurdistanSun);