@romansmirnov/doku 1.0.0

package/icons/icons/map-pin-off.tsx

@@ -0,0 +1,122 @@
+"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 MapPinOffIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MapPinOffIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, -5, -3],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.6, 1],
+    },
+  },
+};
+
+const BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const MapPinOffIcon = forwardRef<MapPinOffIconHandle, MapPinOffIconProps>(
+  ({ 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}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M12.75 7.09a3 3 0 0 1 2.16 2.16" />
+          <path d="M17.072 17.072c-1.634 2.17-3.527 3.912-4.471 4.727a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 1.432-4.568" />
+          <motion.path
+            animate={controls}
+            d="m2 2 20 20"
+            initial="normal"
+            variants={BAR_VARIANTS}
+          />
+          <path d="M8.475 2.818A8 8 0 0 1 20 10c0 1.183-.31 2.377-.81 3.533" />
+          <path d="M9.13 9.13a3 3 0 0 0 3.74 3.74" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+MapPinOffIcon.displayName = "MapPinOffIcon";
+
+export { MapPinOffIcon };

package/icons/icons/map-pin-plus-inside.tsx

@@ -0,0 +1,141 @@
+"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 MapPinPlusInsideIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MapPinPlusInsideIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, -5, -3],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.6, 1],
+    },
+  },
+};
+
+const VERTICAL_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const HORIZONTAL_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 },
+    },
+  },
+};
+
+const MapPinPlusInsideIcon = forwardRef<
+  MapPinPlusInsideIconHandle,
+  MapPinPlusInsideIconProps
+>(({ 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}
+        initial="normal"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        variants={SVG_VARIANTS}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+        <motion.path
+          animate={controls}
+          d="M12 7v6"
+          initial="normal"
+          variants={HORIZONTAL_BAR_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="M9 10h6"
+          initial="normal"
+          variants={VERTICAL_BAR_VARIANTS}
+        />
+      </motion.svg>
+    </div>
+  );
+});
+
+MapPinPlusInsideIcon.displayName = "MapPinPlusInsideIcon";
+
+export { MapPinPlusInsideIcon };

package/icons/icons/map-pin-plus.tsx

@@ -0,0 +1,141 @@
+"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 MapPinPlusIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MapPinPlusIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, -5, -3],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.6, 1],
+    },
+  },
+};
+
+const VERTICAL_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const HORIZONTAL_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 },
+    },
+  },
+};
+
+const MapPinPlusIcon = forwardRef<MapPinPlusIconHandle, MapPinPlusIconProps>(
+  ({ 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}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M19.914 11.105A7.298 7.298 0 0 0 20 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 1.202 0 32 32 0 0 0 .824-.738" />
+          <circle cx="12" cy="10" r="3" />
+          <motion.path
+            animate={controls}
+            d="M16 18h6"
+            initial="normal"
+            variants={HORIZONTAL_BAR_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M19 15v6"
+            initial="normal"
+            variants={VERTICAL_BAR_VARIANTS}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+MapPinPlusIcon.displayName = "MapPinPlusIcon";
+
+export { MapPinPlusIcon };

package/icons/icons/map-pin-x-inside.tsx

@@ -0,0 +1,141 @@
+"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 MapPinXInsideIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MapPinXInsideIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, -5, -3],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.6, 1],
+    },
+  },
+};
+
+const FIRST_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.3,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const SECOND_BAR_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      delay: 0.6,
+      duration: 0.2,
+      opacity: { duration: 0.1, delay: 0.6 },
+    },
+  },
+};
+
+const MapPinXInsideIcon = forwardRef<
+  MapPinXInsideIconHandle,
+  MapPinXInsideIconProps
+>(({ 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}
+        initial="normal"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        variants={SVG_VARIANTS}
+        viewBox="0 0 24 24"
+        width={size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+        <motion.path
+          animate={controls}
+          d="m14.5 7.5-5 5"
+          initial="normal"
+          variants={FIRST_BAR_VARIANTS}
+        />
+        <motion.path
+          animate={controls}
+          d="m9.5 7.5 5 5"
+          initial="normal"
+          variants={SECOND_BAR_VARIANTS}
+        />
+      </motion.svg>
+    </div>
+  );
+});
+
+MapPinXInsideIcon.displayName = "MapPinXInsideIcon";
+
+export { MapPinXInsideIcon };

package/icons/icons/map-pin.tsx

@@ -0,0 +1,122 @@
+"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 MapPinIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface MapPinIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+  animate: {
+    y: [0, -5, -3],
+    transition: {
+      duration: 0.5,
+      times: [0, 0.6, 1],
+    },
+  },
+};
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [0.5, 0],
+    transition: {
+      delay: 0.3,
+      duration: 0.5,
+      opacity: { duration: 0.1, delay: 0.3 },
+    },
+  },
+};
+
+const MapPinIcon = forwardRef<MapPinIconHandle, MapPinIconProps>(
+  ({ 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}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+          <motion.circle
+            animate={controls}
+            cx="12"
+            cy="10"
+            initial="normal"
+            r="3"
+            variants={CIRCLE_VARIANTS}
+          />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+MapPinIcon.displayName = "MapPinIcon";
+
+export { MapPinIcon };