@sportswik/icons-react 1.3.0 → 1.4.0

package/dist/animated.js

@@ -680,10 +680,28 @@ var flip = (delay = 0) => ({
   rest: { scaleX: 1, transition: settleSpring },
   play: { scaleX: [1, 0, 1], transition: { ...gesture, delay } }
 });
-var globeSpin = () => ({
-  rest: { scaleX: 1, transition: settleSpring },
-  play: { scaleX: [1, -1, 1], transition: { ...gesture, duration: 0.5 } }
-});
+var MERIDIAN_FRAMES = 32;
+var meridianEase = (t) => 0.5 - Math.cos(Math.PI * t) / 2;
+var round = (n) => String(Math.round(n * 1e3) / 1e3);
+var pathOf = (strings, ...values) => strings.reduce((d, s, i) => d + s + (i < values.length ? round(values[i]) : ""), "");
+var meridianTurn = (shape, rests, r, fixed = "") => {
+  const starts = rests.map((s0) => Math.asin(s0 / r));
+  const wraps = starts.map((start) => Math.acos(1 - 2 * (Math.PI / 2 - start) / Math.PI) / Math.PI);
+  const uniform = Array.from({ length: MERIDIAN_FRAMES + 1 }, (_, i) => i / MERIDIAN_FRAMES);
+  const times = [.../* @__PURE__ */ new Set([...uniform, ...wraps.flatMap((t) => [t, t + 1e-4])])].filter((t) => t <= 1).sort((a, b) => a - b);
+  const frame = (t) => [fixed, ...rests.map((s0, k) => {
+    if (t === wraps[k]) return shape(r);
+    if (t === wraps[k] + 1e-4) return shape(-r);
+    if (t === 0 || t === 1) return shape(s0);
+    let lon = starts[k] + Math.PI * meridianEase(t);
+    if (lon > Math.PI / 2) lon -= Math.PI;
+    return shape(r * Math.sin(lon));
+  })].filter(Boolean).join(" ");
+  return {
+    rest: { d: frame(0), transition: settleTween },
+    play: { d: times.map(frame), transition: { duration: 1.4, ease: "linear", times } }
+  };
+};
 var burst = (dx2, dy, delay = 0) => ({
   rest: { x: 0, y: 0, opacity: 0, transition: settleTween },
   play: {
@@ -1830,8 +1848,12 @@ var Frown_default = Frown;
 // src/animated/Gem.tsx
 var import_react55 = require("motion/react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
-var spin = globeSpin();
-var Gem = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var facet = (s) => {
+  const w = Math.min(Math.max((Math.abs(s) - 4) / 6, 0), 1);
+  return pathOf`M12 22L${12 + s} 9L${12 + s * (0.25 + 0.35 * w)} 3`;
+};
+var turn2 = meridianTurn(facet, [4, -4, 10], 10, "M22 9l-4-6H6L2 9 M22 9L12 22 M22 9H2 M12 22L2 9");
+var Gem = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
   AnimatedSvg,
   {
     stroke: "currentColor",
@@ -1839,10 +1861,10 @@ var Gem = (props) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react55.motion.g, { variants: spin, children: [
+    children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Fill, { d: GemFillPath }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: "M22 9l-4-6H6L2 9 M22 9L12 22 M22 9H2 M12 22L2 9 M12 22l4-13l-3-6 M12 22L8 9l3-6" })
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react55.motion.path, { variants: turn2 })
+    ]
   }
 );
 var Gem_default = Gem;
@@ -1915,8 +1937,17 @@ var GenderMix_default = GenderMix;
 // src/animated/Globe.tsx
 var import_react59 = require("motion/react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var spin2 = globeSpin();
-var Globe = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+var meridian = (s) => {
+  const w = Math.min(Math.max((Math.abs(s) - 4) / 6, 0), 1);
+  const mix = (arc2, ellipse) => arc2 + (ellipse - arc2) * w;
+  const x1 = 12 + mix(0.6253, 0.5523) * s;
+  const y1 = mix(19.2616, 22);
+  const x22 = 12 + mix(0.9807, 1) * s;
+  const y2 = mix(15.708, 17.523);
+  return pathOf`M12 22C${x1} ${y1} ${x22} ${y2} ${12 + s} 12C${x22} ${24 - y2} ${x1} ${24 - y1} 12 2`;
+};
+var turn3 = meridianTurn(meridian, [4, -4, 10], 10, "M22 12c0 5.523-4.477 10-10 10M22 12c0-5.523-4.477-10-10-10M22 12H2M12 22C6.477 22 2 17.523 2 12M2 12C2 6.477 6.477 2 12 2");
+var Globe = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
   AnimatedSvg,
   {
     stroke: "currentColor",
@@ -1924,15 +1955,10 @@ var Globe = (props) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react59.motion.g, { variants: spin2, children: [
+    children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Fill, { d: GlobeFillPath }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
-        "path",
-        {
-          d: "M22 12c0 5.523-4.477 10-10 10M22 12c0-5.523-4.477-10-10-10M22 12H2M12 22C6.477 22 2 17.523 2 12M12 22a15.3 15.3 0 0 0 4-10a15.3 15.3 0 0 0-4-10M12 22a15.3 15.3 0 0 1-4-10a15.3 15.3 0 0 1 4-10M2 12C2 6.477 6.477 2 12 2"
-        }
-      )
-    ] })
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react59.motion.path, { variants: turn3 })
+    ]
   }
 );
 var Globe_default = Globe;
@@ -5098,7 +5124,7 @@ var Referee_default = Referee;
 // src/animated/RefreshCcw.tsx
 var import_react199 = require("motion/react");
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var spin3 = spinOnce(-1);
+var spin = spinOnce(-1);
 var RefreshCcw = (props) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
   AnimatedSvg,
   {
@@ -5107,7 +5133,7 @@ var RefreshCcw = (props) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_react199.motion.g, { variants: spin3, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("path", { d: "M21 22v-6M21 16h-6M21 16l-3 2.7A9 9 0 0 1 3 12M3 2v6M3 8h6M3 8l3-2.7A9 9 0 0 1 21 12" }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_react199.motion.g, { variants: spin, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("path", { d: "M21 22v-6M21 16h-6M21 16l-3 2.7A9 9 0 0 1 3 12M3 2v6M3 8h6M3 8l3-2.7A9 9 0 0 1 21 12" }) })
   }
 );
 var RefreshCcw_default = RefreshCcw;
@@ -5115,7 +5141,7 @@ var RefreshCcw_default = RefreshCcw;
 // src/animated/RefreshCw.tsx
 var import_react200 = require("motion/react");
 var import_jsx_runtime197 = require("react/jsx-runtime");
-var spin4 = spinOnce(1);
+var spin2 = spinOnce(1);
 var RefreshCw = (props) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
   AnimatedSvg,
   {
@@ -5124,7 +5150,7 @@ var RefreshCw = (props) => /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_react200.motion.g, { variants: spin4, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("path", { d: "M3 22v-6M3 16h6M3 16l3 2.7A9 9 0 0 0 21 12M21 2v6M21 8h-6M21 8l-3-2.7A9 9 0 0 0 3 12" }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(import_react200.motion.g, { variants: spin2, children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("path", { d: "M3 22v-6M3 16h6M3 16l3 2.7A9 9 0 0 0 21 12M21 2v6M21 8h-6M21 8l-3-2.7A9 9 0 0 0 3 12" }) })
   }
 );
 var RefreshCw_default = RefreshCw;

package/dist/animated.mjs

@@ -311,10 +311,28 @@ var flip = (delay = 0) => ({
   rest: { scaleX: 1, transition: settleSpring },
   play: { scaleX: [1, 0, 1], transition: { ...gesture, delay } }
 });
-var globeSpin = () => ({
-  rest: { scaleX: 1, transition: settleSpring },
-  play: { scaleX: [1, -1, 1], transition: { ...gesture, duration: 0.5 } }
-});
+var MERIDIAN_FRAMES = 32;
+var meridianEase = (t) => 0.5 - Math.cos(Math.PI * t) / 2;
+var round = (n) => String(Math.round(n * 1e3) / 1e3);
+var pathOf = (strings, ...values) => strings.reduce((d, s, i) => d + s + (i < values.length ? round(values[i]) : ""), "");
+var meridianTurn = (shape, rests, r, fixed = "") => {
+  const starts = rests.map((s0) => Math.asin(s0 / r));
+  const wraps = starts.map((start) => Math.acos(1 - 2 * (Math.PI / 2 - start) / Math.PI) / Math.PI);
+  const uniform = Array.from({ length: MERIDIAN_FRAMES + 1 }, (_, i) => i / MERIDIAN_FRAMES);
+  const times = [.../* @__PURE__ */ new Set([...uniform, ...wraps.flatMap((t) => [t, t + 1e-4])])].filter((t) => t <= 1).sort((a, b) => a - b);
+  const frame = (t) => [fixed, ...rests.map((s0, k) => {
+    if (t === wraps[k]) return shape(r);
+    if (t === wraps[k] + 1e-4) return shape(-r);
+    if (t === 0 || t === 1) return shape(s0);
+    let lon = starts[k] + Math.PI * meridianEase(t);
+    if (lon > Math.PI / 2) lon -= Math.PI;
+    return shape(r * Math.sin(lon));
+  })].filter(Boolean).join(" ");
+  return {
+    rest: { d: frame(0), transition: settleTween },
+    play: { d: times.map(frame), transition: { duration: 1.4, ease: "linear", times } }
+  };
+};
 var burst = (dx2, dy, delay = 0) => ({
   rest: { x: 0, y: 0, opacity: 0, transition: settleTween },
   play: {
@@ -1461,8 +1479,12 @@ var Frown_default = Frown;
 // src/animated/Gem.tsx
 import { motion as motion52 } from "motion/react";
 import { jsx as jsx52, jsxs as jsxs50 } from "react/jsx-runtime";
-var spin = globeSpin();
-var Gem = (props) => /* @__PURE__ */ jsx52(
+var facet = (s) => {
+  const w = Math.min(Math.max((Math.abs(s) - 4) / 6, 0), 1);
+  return pathOf`M12 22L${12 + s} 9L${12 + s * (0.25 + 0.35 * w)} 3`;
+};
+var turn2 = meridianTurn(facet, [4, -4, 10], 10, "M22 9l-4-6H6L2 9 M22 9L12 22 M22 9H2 M12 22L2 9");
+var Gem = (props) => /* @__PURE__ */ jsxs50(
   AnimatedSvg,
   {
     stroke: "currentColor",
@@ -1470,10 +1492,10 @@ var Gem = (props) => /* @__PURE__ */ jsx52(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ jsxs50(motion52.g, { variants: spin, children: [
+    children: [
       /* @__PURE__ */ jsx52(Fill, { d: GemFillPath }),
-      /* @__PURE__ */ jsx52("path", { d: "M22 9l-4-6H6L2 9 M22 9L12 22 M22 9H2 M12 22L2 9 M12 22l4-13l-3-6 M12 22L8 9l3-6" })
-    ] })
+      /* @__PURE__ */ jsx52(motion52.path, { variants: turn2 })
+    ]
   }
 );
 var Gem_default = Gem;
@@ -1546,8 +1568,17 @@ var GenderMix_default = GenderMix;
 // src/animated/Globe.tsx
 import { motion as motion56 } from "motion/react";
 import { jsx as jsx56, jsxs as jsxs54 } from "react/jsx-runtime";
-var spin2 = globeSpin();
-var Globe = (props) => /* @__PURE__ */ jsx56(
+var meridian = (s) => {
+  const w = Math.min(Math.max((Math.abs(s) - 4) / 6, 0), 1);
+  const mix = (arc2, ellipse) => arc2 + (ellipse - arc2) * w;
+  const x1 = 12 + mix(0.6253, 0.5523) * s;
+  const y1 = mix(19.2616, 22);
+  const x22 = 12 + mix(0.9807, 1) * s;
+  const y2 = mix(15.708, 17.523);
+  return pathOf`M12 22C${x1} ${y1} ${x22} ${y2} ${12 + s} 12C${x22} ${24 - y2} ${x1} ${24 - y1} 12 2`;
+};
+var turn3 = meridianTurn(meridian, [4, -4, 10], 10, "M22 12c0 5.523-4.477 10-10 10M22 12c0-5.523-4.477-10-10-10M22 12H2M12 22C6.477 22 2 17.523 2 12M2 12C2 6.477 6.477 2 12 2");
+var Globe = (props) => /* @__PURE__ */ jsxs54(
   AnimatedSvg,
   {
     stroke: "currentColor",
@@ -1555,15 +1586,10 @@ var Globe = (props) => /* @__PURE__ */ jsx56(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ jsxs54(motion56.g, { variants: spin2, children: [
+    children: [
       /* @__PURE__ */ jsx56(Fill, { d: GlobeFillPath }),
-      /* @__PURE__ */ jsx56(
-        "path",
-        {
-          d: "M22 12c0 5.523-4.477 10-10 10M22 12c0-5.523-4.477-10-10-10M22 12H2M12 22C6.477 22 2 17.523 2 12M12 22a15.3 15.3 0 0 0 4-10a15.3 15.3 0 0 0-4-10M12 22a15.3 15.3 0 0 1-4-10a15.3 15.3 0 0 1 4-10M2 12C2 6.477 6.477 2 12 2"
-        }
-      )
-    ] })
+      /* @__PURE__ */ jsx56(motion56.path, { variants: turn3 })
+    ]
   }
 );
 var Globe_default = Globe;
@@ -4729,7 +4755,7 @@ var Referee_default = Referee;
 // src/animated/RefreshCcw.tsx
 import { motion as motion196 } from "motion/react";
 import { jsx as jsx196 } from "react/jsx-runtime";
-var spin3 = spinOnce(-1);
+var spin = spinOnce(-1);
 var RefreshCcw = (props) => /* @__PURE__ */ jsx196(
   AnimatedSvg,
   {
@@ -4738,7 +4764,7 @@ var RefreshCcw = (props) => /* @__PURE__ */ jsx196(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ jsx196(motion196.g, { variants: spin3, children: /* @__PURE__ */ jsx196("path", { d: "M21 22v-6M21 16h-6M21 16l-3 2.7A9 9 0 0 1 3 12M3 2v6M3 8h6M3 8l3-2.7A9 9 0 0 1 21 12" }) })
+    children: /* @__PURE__ */ jsx196(motion196.g, { variants: spin, children: /* @__PURE__ */ jsx196("path", { d: "M21 22v-6M21 16h-6M21 16l-3 2.7A9 9 0 0 1 3 12M3 2v6M3 8h6M3 8l3-2.7A9 9 0 0 1 21 12" }) })
   }
 );
 var RefreshCcw_default = RefreshCcw;
@@ -4746,7 +4772,7 @@ var RefreshCcw_default = RefreshCcw;
 // src/animated/RefreshCw.tsx
 import { motion as motion197 } from "motion/react";
 import { jsx as jsx197 } from "react/jsx-runtime";
-var spin4 = spinOnce(1);
+var spin2 = spinOnce(1);
 var RefreshCw = (props) => /* @__PURE__ */ jsx197(
   AnimatedSvg,
   {
@@ -4755,7 +4781,7 @@ var RefreshCw = (props) => /* @__PURE__ */ jsx197(
     strokeLinejoin: "round",
     strokeWidth: 1.8,
     ...props,
-    children: /* @__PURE__ */ jsx197(motion197.g, { variants: spin4, children: /* @__PURE__ */ jsx197("path", { d: "M3 22v-6M3 16h6M3 16l3 2.7A9 9 0 0 0 21 12M21 2v6M21 8h-6M21 8l-3-2.7A9 9 0 0 0 3 12" }) })
+    children: /* @__PURE__ */ jsx197(motion197.g, { variants: spin2, children: /* @__PURE__ */ jsx197("path", { d: "M3 22v-6M3 16h6M3 16l3 2.7A9 9 0 0 0 21 12M21 2v6M21 8h-6M21 8l-3-2.7A9 9 0 0 0 3 12" }) })
   }
 );
 var RefreshCw_default = RefreshCw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sportswik/icons-react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": false,
   "description": "Sportswik icon components for React",
   "main": "dist/index.js",