@sportswik/icons-react 0.2.8 → 1.1.0

package/dist/animated.mjs

@@ -0,0 +1,367 @@
+"use client";
+
+// src/animated/AlertTriangle.tsx
+import { motion as motion2 } from "motion/react";
+
+// src/animated/AnimatedSvg.tsx
+import { motion } from "motion/react";
+
+// src/animated/useIconAnimation.ts
+import { useState } from "react";
+import { useReducedMotion } from "motion/react";
+function useIconAnimation(animate, { onPointerEnter, onPointerLeave }) {
+  const [hovered, setHovered] = useState(false);
+  const reducedMotion = useReducedMotion();
+  const playing = !reducedMotion && (animate ?? hovered);
+  const handlers = {
+    onPointerEnter(event) {
+      if (event.pointerType === "mouse") setHovered(true);
+      onPointerEnter?.(event);
+    },
+    onPointerLeave(event) {
+      setHovered(false);
+      onPointerLeave?.(event);
+    }
+  };
+  return { state: playing ? "play" : "rest", handlers };
+}
+
+// src/animated/AnimatedSvg.tsx
+import { jsx } from "react/jsx-runtime";
+function AnimatedSvg({
+  animate,
+  children,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const { state, handlers } = useIconAnimation(animate, {
+    onPointerEnter,
+    onPointerLeave
+  });
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      overflow: "visible",
+      focusable: "false",
+      "aria-hidden": "true",
+      "data-animating": state === "play",
+      ...props,
+      ...handlers,
+      children: /* @__PURE__ */ jsx(motion.g, { initial: false, animate: state, children })
+    }
+  );
+}
+
+// src/animated/transition.ts
+var holdSpring = { type: "spring", stiffness: 260, damping: 15 };
+var settleSpring = { type: "spring", stiffness: 320, damping: 26 };
+var settleTween = { duration: 0.2, ease: "easeOut" };
+var gesture = { duration: 0.45, ease: "easeInOut" };
+var stagger = 0.06;
+
+// src/animated/AlertTriangle.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var shake = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: [0, -8, 8, -6, 6, -3, 0], transition: { ...gesture, duration: 0.5 } }
+};
+var AlertTriangle = (props) => /* @__PURE__ */ jsxs(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(
+        motion2.path,
+        {
+          variants: shake,
+          style: { originX: 0.5, originY: 1 },
+          d: "M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        }
+      ),
+      /* @__PURE__ */ jsx2("path", { d: "M12 9v4M12 17h.01" })
+    ]
+  }
+);
+var AlertTriangle_default = AlertTriangle;
+
+// src/animated/Box.tsx
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var lid = {
+  rest: { y: 0, rotate: 0, transition: settleSpring },
+  play: { y: -2, rotate: -8, transition: holdSpring }
+};
+var Box = (props) => /* @__PURE__ */ jsx3(AnimatedSvg, { ...props, children: /* @__PURE__ */ jsxs2("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, children: [
+  /* @__PURE__ */ jsx3("path", { d: "M19.364 8v13H4.636V8M10.364 12h3.272" }),
+  /* @__PURE__ */ jsx3(
+    motion3.path,
+    {
+      variants: lid,
+      style: { originX: 0, originY: 1 },
+      d: "M3 3h18v5H3z"
+    }
+  )
+] }) });
+var Box_default = Box;
+
+// src/animated/Dashboard.tsx
+import { motion as motion4 } from "motion/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var TILE = "a1.1 1.1 0 0 0-1.1-1.1h-4a1.1 1.1 0 0 0-1.1 1.1v4a1.1 1.1 0 0 0 1.1 1.1h4a1.1 1.1 0 0 0 1.1-1.1zm1.8 4a2.9 2.9 0 0 1-2.9 2.9h-4a2.9 2.9 0 0 1-2.9-2.9v-4a2.9 2.9 0 0 1 2.9-2.9h4a2.9 2.9 0 0 1 2.9 2.9z";
+var STARTS = ["M9.6 4.5", "M20.6 4.5", "M20.6 15.5", "M9.6 15.5"];
+var pulse = {
+  rest: { scale: 1, transition: settleTween },
+  play: (i) => ({
+    scale: [1, 0.85, 1],
+    transition: { ...gesture, duration: 0.35, delay: i * stagger }
+  })
+};
+var Dashboard = (props) => /* @__PURE__ */ jsx4(AnimatedSvg, { ...props, children: STARTS.map((start, i) => /* @__PURE__ */ jsx4(
+  motion4.path,
+  {
+    custom: i,
+    variants: pulse,
+    fill: "currentColor",
+    d: `${start}${TILE}`
+  },
+  start
+)) });
+var Dashboard_default = Dashboard;
+
+// src/animated/Database.tsx
+import { motion as motion5 } from "motion/react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var topDisc = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, -1, 0], transition: gesture }
+};
+var band = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, 1.5, 0], transition: { ...gesture, delay: stagger } }
+};
+var Database = (props) => /* @__PURE__ */ jsxs3(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx5("path", { d: "M21 5v14c0 1.66-4 3-9 3s-9-1.34-9-3V5" }),
+      /* @__PURE__ */ jsx5(motion5.path, { variants: band, d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+      /* @__PURE__ */ jsx5(
+        motion5.path,
+        {
+          variants: topDisc,
+          d: "M21 5c0 1.657-4.03 3-9 3S3 6.657 3 5M21 5c0-1.657-4.03-3-9-3S3 3.343 3 5"
+        }
+      )
+    ]
+  }
+);
+var Database_default = Database;
+
+// src/animated/Idea.tsx
+import { motion as motion6 } from "motion/react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var RAYS = [
+  "M3.9 10.889H3",
+  "M6.272 5.232l-.636-.628",
+  "M12 2.889V2",
+  "M17.4 4.667l.45-.445",
+  "M20.1 10.889h.9"
+];
+var ray = {
+  rest: { pathLength: 1, opacity: 1, transition: settleTween },
+  play: (i) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { ...gesture, duration: 0.3, delay: i * stagger }
+  })
+};
+var Idea = (props) => /* @__PURE__ */ jsxs4(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx6("path", { d: "M14.25 15.778c.15-.778.525-1.322 1.125-1.945.75-.7 1.125-1.71 1.125-2.722a4.76 4.76 0 0 0-1.318-3.3A4.42 4.42 0 0 0 12 6.444a4.42 4.42 0 0 0-3.182 1.367 4.76 4.76 0 0 0-1.318 3.3c0 .778.15 1.711 1.125 2.722.525.545.975 1.167 1.125 1.945M9.75 18.888h4.5M10.5 22h3" }),
+      RAYS.map((d, i) => /* @__PURE__ */ jsx6(motion6.path, { d, custom: i, variants: ray }, d))
+    ]
+  }
+);
+var Idea_default = Idea;
+
+// src/animated/Menu.tsx
+import { motion as motion7 } from "motion/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var LINES = ["M4 6h16", "M4 12h16", "M4 18h16"];
+var shrink = {
+  rest: { pathLength: 1, transition: settleTween },
+  play: (i) => ({
+    pathLength: [1, 0.6, 1],
+    transition: { ...gesture, delay: i * stagger }
+  })
+};
+var Menu = (props) => /* @__PURE__ */ jsx7(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: LINES.map((d, i) => /* @__PURE__ */ jsx7(motion7.path, { d, custom: i, variants: shrink }, d))
+  }
+);
+var Menu_default = Menu;
+
+// src/animated/Puzzle.tsx
+import { motion as motion8 } from "motion/react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var snap = {
+  rest: { x: 0, y: 0, transition: settleSpring },
+  play: { x: [0, 1, 0], y: [0, -1, 0], transition: gesture }
+};
+var Puzzle = (props) => /* @__PURE__ */ jsx8(AnimatedSvg, { ...props, children: /* @__PURE__ */ jsx8(
+  motion8.path,
+  {
+    variants: snap,
+    stroke: "currentColor",
+    strokeWidth: 1.8,
+    d: "M10.15 2.25a2.25 2.25 0 0 1 1.717 3.703c-.284.334-.321.925.048 1.16.088.057.19.087.295.087h3.69a.9.9 0 0 1 .9.9v3.69c0 .104.03.207.086.295.236.37.827.332 1.16.048a2.25 2.25 0 1 1 0 3.433c-.333-.283-.924-.32-1.16.049a.55.55 0 0 0-.086.295v4.69a.9.9 0 0 1-.9.9h-3.69a.55.55 0 0 1-.295-.086c-.37-.236-.332-.827-.048-1.16a2.25 2.25 0 1 0-3.433 0c.283.333.32.924-.049 1.16a.55.55 0 0 1-.295.086H3.4a.9.9 0 0 1-.9-.9v-4.69c0-.104.03-.207.086-.295.236-.37.827-.332 1.16-.049a2.25 2.25 0 1 0 0-3.433c-.333.284-.924.321-1.16-.048a.55.55 0 0 1-.086-.295V8.1a.9.9 0 0 1 .9-.9h4.69c.104 0 .207-.03.295-.086.37-.236.332-.827.049-1.16A2.25 2.25 0 0 1 10.15 2.25Z"
+  }
+) });
+var Puzzle_default = Puzzle;
+
+// src/animated/Rocket.tsx
+import { motion as motion9 } from "motion/react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var liftOff = {
+  rest: { x: 0, y: 0, transition: settleSpring },
+  play: { x: 2, y: -2, transition: holdSpring }
+};
+var Rocket = (props) => /* @__PURE__ */ jsxs5(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx9(
+        motion9.path,
+        {
+          variants: liftOff,
+          d: "M12 15l-3-3m3 3a22.4 22.4 0 0 0 4-2m-4 2v5s3.03-.55 4-2c1.08-1.62 0-5 0-5m-7-1a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11m-7-1H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"
+        }
+      ),
+      /* @__PURE__ */ jsx9("path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09" })
+    ]
+  }
+);
+var Rocket_default = Rocket;
+
+// src/animated/Settings.tsx
+import { motion as motion10 } from "motion/react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var gear = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: 90, transition: holdSpring }
+};
+var Settings = (props) => /* @__PURE__ */ jsx10(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: /* @__PURE__ */ jsxs6(motion10.g, { variants: gear, children: [
+      /* @__PURE__ */ jsx10("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" }),
+      /* @__PURE__ */ jsx10("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })
+    ] })
+  }
+);
+var Settings_default = Settings;
+
+// src/animated/Ticket.tsx
+import { motion as motion11 } from "motion/react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var tilt = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: [0, -10, 4, 0], transition: gesture }
+};
+var Ticket = (props) => /* @__PURE__ */ jsx11(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: /* @__PURE__ */ jsx11(
+      motion11.path,
+      {
+        variants: tilt,
+        d: "M13 5v2m0 10v2m0-8v2M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"
+      }
+    )
+  }
+);
+var Ticket_default = Ticket;
+
+// src/animated/UserShield.tsx
+import { motion as motion12 } from "motion/react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var bob = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, -1.5, 0], transition: gesture }
+};
+var UserShield = (props) => /* @__PURE__ */ jsxs7(AnimatedSvg, { ...props, children: [
+  /* @__PURE__ */ jsx12(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.8,
+      d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"
+    }
+  ),
+  /* @__PURE__ */ jsx12(
+    motion12.path,
+    {
+      variants: bob,
+      fill: "currentColor",
+      d: "M12 11.85c1.68 0 3.4 1.121 3.4 2.9a.9.9 0 0 1-.9.9h-5a.9.9 0 0 1-.9-.9c0-1.779 1.72-2.9 3.4-2.9m0-5.25a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8"
+    }
+  )
+] });
+var UserShield_default = UserShield;
+export {
+  AlertTriangle_default as AlertTriangle,
+  Box_default as Box,
+  Dashboard_default as Dashboard,
+  Database_default as Database,
+  Idea_default as Idea,
+  Menu_default as Menu,
+  Puzzle_default as Puzzle,
+  Rocket_default as Rocket,
+  Settings_default as Settings,
+  Ticket_default as Ticket,
+  UserShield_default as UserShield
+};