@romansmirnov/doku 1.0.0

package/icons/icons/brain.tsx

@@ -0,0 +1,192 @@
+"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 BrainIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface BrainIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BRAIN_STEM_VARIANTS: Variants = {
+  normal: { pathLength: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [1, 0.4, 1],
+    pathOffset: [0, 0.25, 0],
+    transition: {
+      duration: 1.4,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "mirror",
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BRAIN_SIDE_VARIANTS: Variants = {
+  normal: { pathLength: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [1, 0.5, 1],
+    pathOffset: [0, 0.25, 0],
+    transition: {
+      duration: 1.4,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "mirror",
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BRAIN_TOP_ARC_VARIANTS: Variants = {
+  normal: { pathLength: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [1, 0.8, 1],
+    pathOffset: [0, 0.07, 0],
+    transition: {
+      duration: 1.4,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "mirror",
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BRAIN_LOWER_ARC_VARIANTS: Variants = {
+  normal: { pathLength: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [1, 0.8, 1],
+    pathOffset: [0, 0.14, 0],
+    transition: {
+      duration: 1.4,
+      repeat: Number.POSITIVE_INFINITY,
+      repeatType: "mirror",
+      ease: "easeInOut",
+    },
+  },
+};
+
+const BrainIcon = forwardRef<BrainIconHandle, BrainIconProps>(
+  ({ 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}
+      >
+        <motion.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          variants={{
+            normal: {
+              scale: 1,
+              strokeWidth: 2,
+            },
+            animate: {
+              scale: [1, 1.08, 1],
+              strokeWidth: [2, 2.25, 2],
+              transition: {
+                duration: 1.4,
+                repeat: Number.POSITIVE_INFINITY,
+                repeatType: "mirror",
+                ease: "easeInOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <motion.path
+            animate={controls}
+            d="M12 18V5"
+            variants={BRAIN_STEM_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"
+            variants={BRAIN_SIDE_VARIANTS}
+          />
+
+          <motion.path
+            animate={controls}
+            d="M12 5A3 3 0 1 1 17.598 6.5"
+            variants={BRAIN_TOP_ARC_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M12 5A3 3 0 1 0 6.402 6.5"
+            variants={BRAIN_TOP_ARC_VARIANTS}
+          />
+
+          <path d="M17.997 5.125a4 4 0 0 1 2.526 5.77" />
+
+          <motion.path
+            animate={controls}
+            d="M18 18a4 4 0 0 0 2-7.464"
+            variants={BRAIN_LOWER_ARC_VARIANTS}
+          />
+
+          <path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" />
+
+          <motion.path
+            animate={controls}
+            d="M6 18a4 4 0 0 1-2-7.464"
+            variants={BRAIN_LOWER_ARC_VARIANTS}
+          />
+          <path d="M6.003 5.125a4 4 0 0 0-2.526 5.77" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+BrainIcon.displayName = "BrainIcon";
+
+export { BrainIcon };

package/icons/icons/calendar-check-2.tsx

@@ -0,0 +1,111 @@
+"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 CalendarCheck2IconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CalendarCheck2IconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CHECK_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const CalendarCheck2Icon = forwardRef<
+  CalendarCheck2IconHandle,
+  CalendarCheck2IconProps
+>(({ 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"
+      >
+        <path d="M8 2v4" />
+        <path d="M16 2v4" />
+        <path d="M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" />
+        <path d="M3 10h18" />
+        <motion.path
+          animate={controls}
+          d="m16 20 2 2 4-4"
+          initial="normal"
+          style={{ transformOrigin: "center" }}
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+CalendarCheck2Icon.displayName = "CalendarCheck2Icon";
+
+export { CalendarCheck2Icon };

package/icons/icons/calendar-check.tsx

@@ -0,0 +1,111 @@
+"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 CalendarCheckIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CalendarCheckIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CHECK_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3,
+    },
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" },
+    },
+  },
+};
+
+const CalendarCheckIcon = forwardRef<
+  CalendarCheckIconHandle,
+  CalendarCheckIconProps
+>(({ 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"
+      >
+        <path d="M8 2v4" />
+        <path d="M16 2v4" />
+        <rect height="18" rx="2" width="18" x="3" y="4" />
+        <path d="M3 10h18" />
+        <motion.path
+          animate={controls}
+          d="m9 16 2 2 4-4"
+          initial="normal"
+          style={{ transformOrigin: "center" }}
+          variants={CHECK_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+CalendarCheckIcon.displayName = "CalendarCheckIcon";
+
+export { CalendarCheckIcon };

package/icons/icons/calendar-cog.tsx

@@ -0,0 +1,105 @@
+"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 CalendarCogIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CalendarCogIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const G_VARIANTS: Variants = {
+  normal: { rotate: 0 },
+  animate: { rotate: 180 },
+};
+
+const CalendarCogIcon = forwardRef<CalendarCogIconHandle, CalendarCogIconProps>(
+  ({ 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"
+        >
+          <path d="M21 10.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6" />
+          <path d="M16 2v4" />
+          <path d="M3 10h18" />
+          <path d="M8 2v4" />
+          <motion.g
+            animate={controls}
+            transition={{ type: "spring", stiffness: 50, damping: 10 }}
+            variants={G_VARIANTS}
+          >
+            <path d="m15.2 16.9-.9-.4" />
+            <path d="m15.2 19.1-.9.4" />
+            <path d="m16.9 15.2-.4-.9" />
+            <path d="m16.9 20.8-.4.9" />
+            <path d="m19.5 14.3-.4.9" />
+            <path d="m19.5 21.7-.4-.9" />
+            <path d="m21.7 16.5-.9.4" />
+            <path d="m21.7 19.5-.9-.4" />
+            <circle cx="18" cy="18" r="3" />
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+CalendarCogIcon.displayName = "CalendarCogIcon";
+
+export { CalendarCogIcon };

package/icons/icons/calendar-days.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import type { Variants } from "motion/react";
+import { AnimatePresence, motion, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface CalendarDaysIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CalendarDaysIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DOTS = [
+  { cx: 8, cy: 14 },
+  { cx: 12, cy: 14 },
+  { cx: 16, cy: 14 },
+  { cx: 8, cy: 18 },
+  { cx: 12, cy: 18 },
+  { cx: 16, cy: 18 },
+];
+
+const VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.2,
+    },
+  },
+  animate: (i: number) => ({
+    opacity: [1, 0.3, 1],
+    transition: {
+      delay: i * 0.1,
+      duration: 0.4,
+      times: [0, 0.5, 1],
+    },
+  }),
+};
+
+const CalendarDaysIcon = forwardRef<
+  CalendarDaysIconHandle,
+  CalendarDaysIconProps
+>(({ 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"
+      >
+        <path d="M8 2v4" />
+        <path d="M16 2v4" />
+        <rect height="18" rx="2" width="18" x="3" y="4" />
+        <path d="M3 10h18" />
+        <AnimatePresence>
+          {DOTS.map((dot, index) => (
+            <motion.circle
+              animate={controls}
+              custom={index}
+              cx={dot.cx}
+              cy={dot.cy}
+              fill="currentColor"
+              initial="normal"
+              key={`${dot.cx}-${dot.cy}`}
+              r="1"
+              stroke="none"
+              variants={VARIANTS}
+            />
+          ))}
+        </AnimatePresence>
+      </svg>
+    </div>
+  );
+});
+
+CalendarDaysIcon.displayName = "CalendarDaysIcon";
+
+export { CalendarDaysIcon };