@romansmirnov/doku 1.0.0

package/icons/icons/panel-left-open.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { Transition, 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 PanelLeftOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelLeftOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, 1.5, 0] },
+};
+
+const PanelLeftOpenIcon = forwardRef<
+  PanelLeftOpenIconHandle,
+  PanelLeftOpenIconProps
+>(({ 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="18" rx="2" width="18" x="3" y="3" />
+        <path d="M9 3v18" />
+        <motion.path
+          animate={controls}
+          d="m14 9 3 3-3 3"
+          transition={DEFAULT_TRANSITION}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelLeftOpenIcon.displayName = "PanelLeftOpenIcon";
+
+export { PanelLeftOpenIcon };

package/icons/icons/panel-right-open.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { Transition, 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 PanelRightOpenIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PanelRightOpenIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const DEFAULT_TRANSITION: Transition = {
+  times: [0, 0.4, 1],
+  duration: 0.5,
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] },
+};
+
+const PanelRightOpenIcon = forwardRef<
+  PanelRightOpenIconHandle,
+  PanelRightOpenIconProps
+>(({ 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="18" rx="2" width="18" x="3" y="3" />
+        <path d="M15 3v18" />
+        <motion.path
+          animate={controls}
+          d="m10 15-3-3 3-3"
+          transition={DEFAULT_TRANSITION}
+          variants={PATH_VARIANTS}
+        />
+      </svg>
+    </div>
+  );
+});
+
+PanelRightOpenIcon.displayName = "PanelRightOpenIcon";
+
+export { PanelRightOpenIcon };

package/icons/icons/party-popper.tsx

@@ -0,0 +1,171 @@
+"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 PartyPopperIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PartyPopperIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const LINES_VARIANTS: Variants = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    scale: 1,
+    translateX: 0,
+    translateY: 0,
+  },
+  animate: {
+    opacity: [0, 1],
+    scale: [0.3, 0.8, 1, 1.1, 1],
+    pathLength: [0, 0.5, 1],
+    translateX: [-5, 0],
+    translateY: [5, 0],
+    transition: {
+      duration: 0.7,
+      velocity: 0.3,
+    },
+  },
+};
+
+const DOTS_VARIANTS: Variants = {
+  normal: { opacity: 1, scale: 1, translateX: 0, translateY: 0 },
+  animate: {
+    opacity: [0, 1],
+    translateX: [-5, 0],
+    translateY: [5, 0],
+    scale: [0.5, 0.8, 1, 1.1, 1],
+    transition: {
+      duration: 0.7,
+    },
+  },
+};
+
+const POPPER_VARIANTS: Variants = {
+  normal: { translateX: 0, translateY: 0 },
+  animate: {
+    translateX: [-1.5, 0],
+    translateY: [1.5, 0],
+    transition: {
+      velocity: 0.3,
+    },
+  },
+};
+
+const PartyPopperIcon = forwardRef<PartyPopperIconHandle, PartyPopperIconProps>(
+  ({ 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="M5.8 11.3 2 22l10.7-3.79"
+            variants={POPPER_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M11 13c1.93 1.93 2.83 4.17 2 5-.83.83-3.07-.07-5-2-1.93-1.93-2.83-4.17-2-5 .83-.83 3.07.07 5 2Z"
+            variants={POPPER_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M4 3h.01"
+            variants={DOTS_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M22 8h.01"
+            variants={DOTS_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M15 2h.01"
+            variants={DOTS_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M22 20h.01"
+            variants={DOTS_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="m14 10 1.21-1.06c0.16-0.84 0.9-1.44 1.76-1.44h0.38c0.88 0 1.55-0.77 1.45-1.63a2.9 2.9 0 0 1 1.96-3.12L22 2"
+            variants={LINES_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M17 15h0.77c0.71 0 1.32-0.52 1.43-1.22c0.16-0.91 1.12-1.45 1.98-1.11L22 13"
+            variants={LINES_VARIANTS}
+          />
+          <motion.path
+            animate={controls}
+            d="M9 7V6.23c0-0.71 0.52-1.33 1.22-1.43c0.91-0.16 1.45-1.12 1.11-1.98L11 2"
+            variants={LINES_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+PartyPopperIcon.displayName = "PartyPopperIcon";
+
+export { PartyPopperIcon };

package/icons/icons/pause.tsx

@@ -0,0 +1,130 @@
+"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 PauseIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PauseIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const BASE_RECT_VARIANTS: Variants = {
+  normal: {
+    y: 0,
+  },
+};
+
+const BASE_RECT_TRANSITION = {
+  transition: {
+    times: [0, 0.2, 0.5, 1],
+    duration: 0.5,
+    stiffness: 260,
+    damping: 20,
+  },
+};
+
+const LEFT_RECT_VARIANTS: Variants = {
+  ...BASE_RECT_VARIANTS,
+  animate: {
+    y: [0, 2, 0, 0],
+    ...BASE_RECT_TRANSITION,
+  },
+};
+
+const RIGHT_RECT_VARIANTS: Variants = {
+  ...BASE_RECT_VARIANTS,
+  animate: {
+    y: [0, 0, 2, 0],
+    ...BASE_RECT_TRANSITION,
+  },
+};
+
+const PauseIcon = forwardRef<PauseIconHandle, PauseIconProps>(
+  ({ 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.rect
+            animate={controls}
+            height="16"
+            rx="1"
+            variants={LEFT_RECT_VARIANTS}
+            width="4"
+            x="6"
+            y="4"
+          />
+          <motion.rect
+            animate={controls}
+            height="16"
+            rx="1"
+            variants={RIGHT_RECT_VARIANTS}
+            width="4"
+            x="14"
+            y="4"
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+PauseIcon.displayName = "PauseIcon";
+
+export { PauseIcon };

package/icons/icons/pen-tool.tsx

@@ -0,0 +1,114 @@
+"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 PenToolIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface PenToolIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const SVG_VARIANTS: Variants = {
+  normal: { rotate: 0, translateX: 0, translateY: 0 },
+  animate: {
+    rotate: [0, 0, 8, -3, 8, 0],
+    translateY: [0, 2, 0, -1, 0],
+  },
+};
+
+const PATH_VARIANTS: Variants = {
+  normal: { pathLength: 1, opacity: 1, pathOffset: 0 },
+  animate: {
+    pathLength: [0, 0, 1],
+    opacity: [0, 1],
+    pathOffset: [0, 1, 0],
+  },
+};
+
+const PenToolIcon = forwardRef<PenToolIconHandle, PenToolIconProps>(
+  ({ 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"
+          transition={{
+            duration: 1,
+          }}
+          variants={SVG_VARIANTS}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" />
+          <path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" />
+          <motion.path
+            animate={controls}
+            d="m2.3 2.3 7.286 7.286"
+            transition={{
+              duration: 0.8,
+            }}
+            variants={PATH_VARIANTS}
+          />
+          <circle cx="11" cy="11" r="2" />
+        </motion.svg>
+      </div>
+    );
+  }
+);
+
+PenToolIcon.displayName = "PenToolIcon";
+
+export { PenToolIcon };