@romansmirnov/doku 1.0.0

package/icons/icons/sun-dim.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SunDimIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SunDimIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const SunDimIcon = forwardRef<SunDimIconHandle, SunDimIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="4" />
+          {[
+            "M12 4h.01",
+            "M20 12h.01",
+            "M12 20h.01",
+            "M4 12h.01",
+            "M17.657 6.343h.01",
+            "M17.657 17.657h.01",
+            "M6.343 17.657h.01",
+            "M6.343 6.343h.01",
+          ].map((d, index) => (
+            <motion.path
+              animate={controls}
+              custom={index + 1}
+              d={d}
+              key={d}
+              variants={PATH_VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+SunDimIcon.displayName = "SunDimIcon";
+
+export { SunDimIcon };

package/icons/icons/sun-medium.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SunMediumIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SunMediumIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const SunMediumIcon = forwardRef<SunMediumIconHandle, SunMediumIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="4" />
+          {[
+            "M12 3v1",
+            "M12 20v1",
+            "M3 12h1",
+            "M20 12h1",
+            "m18.364 5.636-.707.707",
+            "m6.343 17.657-.707.707",
+            "m5.636 5.636.707.707",
+            "m17.657 17.657.707.707",
+          ].map((d, index) => (
+            <motion.path
+              animate={controls}
+              custom={index + 1}
+              d={d}
+              key={d}
+              variants={PATH_VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+SunMediumIcon.displayName = "SunMediumIcon";
+
+export { SunMediumIcon };

package/icons/icons/sun-moon.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SunMoonIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SunMoonIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SUN_VARIANTS: Variants = {
+  normal: {
+    rotate: 0,
+  },
+  animate: {
+    rotate: [0, -5, 5, -2, 2, 0],
+    transition: {
+      duration: 1.5,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const MOON_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const SunMoonIcon = forwardRef<SunMoonIconHandle, SunMoonIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const sunControls = useAnimation();
+    const moonControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          sunControls.start("animate");
+          moonControls.start("animate");
+        },
+        stopAnimation: () => {
+          sunControls.start("normal");
+          moonControls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          sunControls.start("animate");
+          moonControls.start("animate");
+        }
+      },
+      [sunControls, moonControls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          sunControls.start("normal");
+          moonControls.start("normal");
+        }
+      },
+      [sunControls, moonControls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={sunControls}
+            initial="normal"
+            variants={SUN_VARIANTS}
+          >
+            <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4" />
+          </motion.g>
+          {[
+            "M12 2v2",
+            "M12 20v2",
+            "m4.9 4.9 1.4 1.4",
+            "m17.7 17.7 1.4 1.4",
+            "M2 12h2",
+            "M20 12h2",
+            "m6.3 17.7-1.4 1.4",
+            "m19.1 4.9-1.4 1.4",
+          ].map((d, index) => (
+            <motion.path
+              animate={moonControls}
+              custom={index + 1}
+              d={d}
+              initial="normal"
+              key={d}
+              variants={MOON_VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+SunMoonIcon.displayName = "SunMoonIcon";
+
+export { SunMoonIcon };

package/icons/icons/sun.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SunIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SunIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const PATH_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const SunIcon = forwardRef<SunIconHandle, SunIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="12" cy="12" r="4" />
+          {[
+            "M12 2v2",
+            "m19.07 4.93-1.41 1.41",
+            "M20 12h2",
+            "m17.66 17.66 1.41 1.41",
+            "M12 20v2",
+            "m6.34 17.66-1.41 1.41",
+            "M2 12h2",
+            "m4.93 4.93 1.41 1.41",
+          ].map((d, index) => (
+            <motion.path
+              animate={controls}
+              custom={index + 1}
+              d={d}
+              key={d}
+              variants={PATH_VARIANTS}
+            />
+          ))}
+        </svg>
+      </div>
+    );
+  }
+);
+
+SunIcon.displayName = "SunIcon";
+
+export { SunIcon };

package/icons/icons/sunset.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface SunsetIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SunsetIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const ARROW_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, 1, 0],
+  },
+};
+const RAYS_VARIANTS: Variants = {
+  normal: { opacity: 1 },
+  animate: (i: number) => ({
+    opacity: [0, 1],
+    transition: { delay: i * 0.1, duration: 0.3 },
+  }),
+};
+
+const SunsetIcon = forwardRef<SunsetIconHandle, SunsetIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const arrowControls = useAnimation();
+    const raysControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          arrowControls.start("animate");
+          raysControls.start("animate");
+        },
+        stopAnimation: () => {
+          arrowControls.start("normal");
+          raysControls.start("normal");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          arrowControls.start("animate");
+          raysControls.start("animate");
+        }
+      },
+      [arrowControls, raysControls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          arrowControls.start("normal");
+          raysControls.start("normal");
+        }
+      },
+      [arrowControls, raysControls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.g
+            animate={arrowControls}
+            initial="normal"
+            variants={ARROW_VARIANTS}
+          >
+            <path d="M12 10V2" />
+            <path d="m16 6-4 4-4-4" />
+          </motion.g>
+
+          {[
+            "m4.93 10.93 1.41 1.41",
+            "M2 18h2",
+            "M20 18h2",
+            "m19.07 10.93-1.41 1.41",
+            "M22 22H2",
+            ,
+          ].map((d, index) => (
+            <motion.path
+              animate={raysControls}
+              custom={index + 1}
+              d={d}
+              initial="normal"
+              key={d}
+              variants={RAYS_VARIANTS}
+            />
+          ))}
+          <path d="M16 18a4 4 0 0 0-8 0" />
+        </svg>
+      </div>
+    );
+  }
+);
+
+SunsetIcon.displayName = "SunsetIcon";
+
+export { SunsetIcon };