@romansmirnov/doku 1.0.0

package/icons/icons/shower-head.tsx

@@ -0,0 +1,129 @@
+"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 ShowerHeadIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ShowerHeadIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DROP_VARIANTS: Variants = {
+  animate: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const DROP_CHILD_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+  },
+  animate: {
+    opacity: [1, 0.2, 1],
+    transition: {
+      duration: 1,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut",
+    },
+  },
+};
+
+const DROP_PATH = [
+  { id: "drop1", d: "M14 17v.01" },
+  { id: "drop2", d: "M10 16v.01" },
+  { id: "drop3", d: "M13 13v.01" },
+  { id: "drop4", d: "M16 10v.01" },
+  { id: "drop5", d: "M11 20v.01" },
+  { id: "drop6", d: "M17 14v.01" },
+  { id: "drop7", d: "M20 11v.01" },
+];
+
+const ShowerHeadIcon = forwardRef<ShowerHeadIconHandle, ShowerHeadIconProps>(
+  ({ 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="m4 4 2.5 2.5" />
+          <path d="M13.5 6.5a4.95 4.95 0 0 0-7 7" />
+          <path d="M15 5 5 15" />
+          <motion.g
+            animate={controls}
+            initial="normal"
+            variants={DROP_VARIANTS}
+          >
+            {DROP_PATH.map((path) => (
+              <motion.path
+                d={path.d}
+                key={path.id}
+                variants={DROP_CHILD_VARIANTS}
+              />
+            ))}
+          </motion.g>
+        </svg>
+      </div>
+    );
+  }
+);
+
+ShowerHeadIcon.displayName = "ShowerHeadIcon";
+
+export { ShowerHeadIcon };

package/icons/icons/shrink.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import type { Transition } 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 ShrinkIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface ShrinkIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 250,
+  damping: 25,
+};
+
+const ShrinkIcon = forwardRef<ShrinkIconHandle, ShrinkIconProps>(
+  ({ 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"
+        >
+          <motion.path
+            animate={controls}
+            d="M9 4.2V9m0 0H4.2M9 9 3 3"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "1px", translateY: "1px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M15 4.2V9m0 0h4.8M15 9l6-6"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "-1px", translateY: "1px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 19.8V15m0 0H4.2M9 15l-6 6"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "1px", translateY: "-1px" },
+            }}
+          />
+          <motion.path
+            animate={controls}
+            d="m15 15 6 6m-6-6v4.8m0-4.8h4.8"
+            transition={DEFAULT_TRANSITION}
+            variants={{
+              normal: { translateX: "0%", translateY: "0%" },
+              animate: { translateX: "-1px", translateY: "-1px" },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+ShrinkIcon.displayName = "ShrinkIcon";
+
+export { ShrinkIcon };

package/icons/icons/sliders-horizontal.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import type { Transition } 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 SlidersHorizontalIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SlidersHorizontalIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 100,
+  damping: 12,
+  mass: 0.4,
+};
+
+const SlidersHorizontalIcon = forwardRef<
+  SlidersHorizontalIconHandle,
+  SlidersHorizontalIconProps
+>(({ 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"
+      >
+        <motion.line
+          animate={controls}
+          initial={false}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 14,
+            },
+            animate: {
+              x2: 10,
+            },
+          }}
+          x1="21"
+          x2="14"
+          y1="4"
+          y2="4"
+        />
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 10,
+            },
+            animate: {
+              x1: 5,
+            },
+          }}
+          x1="10"
+          x2="3"
+          y1="4"
+          y2="4"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 12,
+            },
+            animate: {
+              x2: 18,
+            },
+          }}
+          x1="21"
+          x2="12"
+          y1="12"
+          y2="12"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 8,
+            },
+            animate: {
+              x1: 13,
+            },
+          }}
+          x1="8"
+          x2="3"
+          y1="12"
+          y2="12"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x2: 12,
+            },
+            animate: {
+              x2: 4,
+            },
+          }}
+          x1="3"
+          x2="12"
+          y1="20"
+          y2="20"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 16,
+            },
+            animate: {
+              x1: 8,
+            },
+          }}
+          x1="16"
+          x2="21"
+          y1="20"
+          y2="20"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 14,
+              x2: 14,
+            },
+            animate: {
+              x1: 9,
+              x2: 9,
+            },
+          }}
+          x1="14"
+          x2="14"
+          y1="2"
+          y2="6"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 8,
+              x2: 8,
+            },
+            animate: {
+              x1: 14,
+              x2: 14,
+            },
+          }}
+          x1="8"
+          x2="8"
+          y1="10"
+          y2="14"
+        />
+
+        <motion.line
+          animate={controls}
+          transition={DEFAULT_TRANSITION}
+          variants={{
+            normal: {
+              x1: 16,
+              x2: 16,
+            },
+            animate: {
+              x1: 8,
+              x2: 8,
+            },
+          }}
+          x1="16"
+          x2="16"
+          y1="18"
+          y2="22"
+        />
+      </svg>
+    </div>
+  );
+});
+
+SlidersHorizontalIcon.displayName = "SlidersHorizontalIcon";
+
+export { SlidersHorizontalIcon };

package/icons/icons/smartphone-charging.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+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 SmartphoneChargingIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface SmartphoneChargingIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SmartphoneChargingIcon = forwardRef<
+  SmartphoneChargingIconHandle,
+  SmartphoneChargingIconProps
+>(({ 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"
+      >
+        <rect height="20" rx="2" ry="2" width="14" x="5" y="2" />
+        <motion.path
+          animate={controls}
+          d="M12.667 8 10 12h4l-2.667 4"
+          initial="normal"
+          variants={{
+            normal: { opacity: 1 },
+            animate: {
+              opacity: [1, 0.4, 1],
+              transition: {
+                duration: 1,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "easeInOut",
+              },
+            },
+          }}
+        />
+      </svg>
+    </div>
+  );
+});
+
+SmartphoneChargingIcon.displayName = "SmartphoneChargingIcon";
+
+export { SmartphoneChargingIcon };