@studiocubics/components 0.0.1

package/src/Misc/Cursor/Cursor.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import styles from "./Cursor.module.css";
+import { useMousePosition } from "@studiocubics/hooks";
+import { cn } from "@studiocubics/utils";
+
+/**
+ * Converts a number from one range to another
+ * @param number Number to convert
+ * @param fromMin
+ * @param fromMax
+ * @param toMin
+ * @param toMax
+ */
+function scale(
+  number: number,
+  fromMin: number,
+  fromMax: number,
+  toMin: number,
+  toMax: number
+) {
+  return ((number - fromMin) * (toMax - toMin)) / (fromMax - fromMin) + toMin;
+}
+
+function calculateScale(value: number, mouseSpeed: number) {
+  return value - Math.round(scale(mouseSpeed, 33, 1000, 0, 100));
+}
+
+export function Cursor() {
+  const { mousePosition, touchPosition, mouseSpeed } = useMousePosition({
+    includeTouch: true,
+  });
+
+  // const [mouseDowned, setMouseDowned] = useState(false);
+
+  // useEffect(() => {
+  //   function handleMouseDown() {
+  //     setMouseDowned(true);
+  //   }
+  //   function handleMouseUp() {
+  //     setMouseDowned(false);
+  //   }
+
+  //   document.addEventListener("pointerdown", handleMouseDown);
+  //   document.addEventListener("pointerup", handleMouseUp);
+
+  //   return () => {
+  //     document.removeEventListener("pointerdown", handleMouseDown);
+  //     document.removeEventListener("pointerup", handleMouseUp);
+  //   };
+  // }, []);
+
+  return (
+    <div className={styles.root}>
+      <div
+        className={cn(
+          styles.main
+          // mouseDowned ? styles.mouseDowned : ""
+        )}
+        style={{
+          left: `${mousePosition.x ?? touchPosition.x}px`,
+          top: `${mousePosition.y ?? touchPosition.y}px`,
+          width:
+            // !mouseDowned
+            // ?
+            `${calculateScale(33.75, mouseSpeed)}em`,
+          // : undefined,
+          height:
+            // !mouseDowned
+            // ?
+            `${calculateScale(24, mouseSpeed)}em`,
+          // : undefined,
+        }}
+      />
+    </div>
+  );
+}

package/src/Misc/Logos.tsx

@@ -0,0 +1,230 @@
+"use client";
+import { type ComponentProps } from "react";
+
+export type LogoProps = {
+  favicon?: ComponentProps<"svg">["children"];
+  faviconClass?: ComponentProps<"g">["className"];
+  logoText?: ComponentProps<"svg">["children"];
+  logoClass?: ComponentProps<"g">["className"];
+  onlyLogoText?: boolean;
+  onlyFavicon?: boolean;
+  viewBox?: ComponentProps<"svg">["viewBox"];
+  logoViewBox?: ComponentProps<"svg">["viewBox"];
+  logoTextViewBox?: ComponentProps<"svg">["viewBox"];
+} & ComponentProps<"svg">;
+
+export const CubicsUILogo = ({
+  onlyFavicon = false,
+  onlyLogoText = false,
+  faviconClass = "",
+  logoClass = "",
+  favicon = (
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 45.8089C0 48.1236 1.87644 50 4.19114 50H45.8089C48.1236 50 50 48.1236 50 45.8089V4.19114C50 1.87643 48.1236 0 45.8089 0H4.19114C1.87643 0 0 1.87644 0 4.19114V45.8089ZM4.19391 45.8061V4.19391H45.8061V24H28.1911C25.8764 24 24 25.8764 24 28.1911V45.8061H4.19391ZM33.8393 40.1607V45.8061H28.1939V40.1607H33.8393ZM45.8061 45.8061H38.0332V40.1579C38.0332 37.8432 36.1568 35.9668 33.8421 35.9668H28.1939V28.1939H45.8061V45.8061Z"
+      fill="currentcolor"
+    />
+  ),
+  logoText = (
+    <>
+      <path
+        d="M142.418 13.8937C138.849 13.8937 137.065 15.0724 137.065 17.4299C137.065 18.4776 137.507 19.2798 138.391 19.8364C139.275 20.3931 141.337 21.1953 144.579 22.243C147.853 23.2908 150.145 24.4859 151.455 25.8283C152.765 27.138 153.419 29.1681 153.419 31.9185C153.419 35.4219 152.355 38.0741 150.227 39.8749C148.099 41.6758 145.316 42.5762 141.878 42.5762C139.324 42.5762 136.197 42.1833 132.497 41.3974L130.729 41.0537L131.416 35.7985C135.804 36.3878 139.16 36.6825 141.485 36.6825C144.956 36.6825 146.691 35.2418 146.691 32.3605C146.691 31.3127 146.282 30.4942 145.463 29.9048C144.677 29.3154 143.089 28.677 140.699 27.9894C136.901 26.9089 134.216 25.6319 132.644 24.1585C131.105 22.6523 130.336 20.5732 130.336 17.921C130.336 14.5813 131.351 12.0928 133.381 10.4557C135.411 8.81857 138.194 8 141.73 8C144.153 8 147.231 8.32743 150.964 8.98228L152.732 9.32608L152.192 14.6795C147.575 14.1556 144.317 13.8937 142.418 13.8937Z"
+        fill="currentcolor"
+      />
+      <path
+        d="M89.9941 41.9868V8.58936H101.536L107.43 32.9498L113.323 8.58936H124.865V41.9868H118.087V16.1529H117.351L110.818 40.5134H104.041L97.5086 16.1529H96.7719V41.9868H89.9941Z"
+        fill="currentcolor"
+      />
+      <path
+        d="M84.4942 41.4466C81.0234 42.1996 77.8965 42.5762 75.1134 42.5762C72.3303 42.5762 70.1038 42.2324 68.4339 41.5448C66.764 40.8572 65.4543 39.7603 64.5048 38.2542C63.5553 36.748 62.9004 34.9799 62.5403 32.9499C62.1801 30.9198 62 28.3659 62 25.2881C62 18.8378 62.9004 14.3521 64.7013 11.8309C66.5348 9.27696 69.891 8 74.7696 8C77.5855 8 80.8434 8.44203 84.5433 9.32608L84.3468 14.7286C81.1053 14.2375 78.404 13.9919 76.243 13.9919C74.1148 13.9919 72.5922 14.2866 71.6754 14.8759C70.7586 15.4326 70.071 16.5131 69.6127 18.1175C69.187 19.7219 68.9742 22.4559 68.9742 26.3195C68.9742 30.1831 69.4162 32.868 70.3002 34.3742C71.217 35.8476 73.0179 36.5843 75.7028 36.5843C78.4204 36.5843 81.3018 36.3551 84.3468 35.8967L84.4942 41.4466Z"
+        fill="currentcolor"
+      />
+    </>
+  ),
+  viewBox = "0 0 154 50",
+  logoViewBox = "0 0 50 50",
+  logoTextViewBox = "50 0 104 50",
+  ...rest
+}: LogoProps) => {
+  return (
+    <svg
+      viewBox={
+        onlyFavicon ? logoViewBox : onlyLogoText ? logoTextViewBox : viewBox
+      }
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {/* Favicon */}
+      <g
+        className={faviconClass}
+        style={{
+          transition: "all var(--transition-time) var(--transition-tf)",
+          scale: onlyLogoText ? "0" : "1",
+          opacity: onlyLogoText ? "0" : "1",
+        }}
+      >
+        {favicon}
+      </g>
+      {/* Logo text */}
+      <g
+        className={logoClass}
+        style={{
+          transition: "all var(--transition-time) var(--transition-tf)",
+          scale: onlyFavicon ? "0" : "1",
+          opacity: onlyFavicon ? "0" : "1",
+        }}
+      >
+        {logoText}
+      </g>
+    </svg>
+  );
+};
+export const StudioCubicsLogo = ({
+  onlyFavicon = false,
+  onlyLogoText = false,
+  faviconClass = "",
+  logoClass = "",
+  favicon = (
+    <>
+      <path
+        d="M54.5 58.0341L0 81.445V151.677L54.5 128.267L54.5 58.0341Z"
+        fill="#42047E"
+      />
+      <path
+        d="M54.5 57.6807L109 81.1799L54.5 104.679L0 81.1799L54.5 57.6807Z"
+        fill="#049560"
+      />
+      <path
+        d="M54.5 128.002L109 151.501L54.5 175L0 151.501L54.5 128.002Z"
+        fill="#5B05AD"
+      />
+      <path
+        d="M109 81.0032L54.5 104.502V175L109 151.501L109 81.0032Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M54.5 0L101.968 20.3868V81.5472L54.5 61.1604V0Z"
+        fill="#036340"
+      />
+      <path
+        d="M54.5 0L101.968 20.3868L54.5 40.7736L7.03223 20.3868L54.5 0Z"
+        fill="#07F8A1"
+      />
+      <path
+        d="M54.5 61.1605L101.968 81.5473L54.5 101.934L7.03223 81.5473L54.5 61.1605Z"
+        fill="#049560"
+      />
+      <path
+        d="M7.03223 20.3868L54.5 40.7736V101.934L7.03223 81.5472V20.3868Z"
+        fill="#06C680"
+      />
+    </>
+  ),
+  logoText = (
+    <>
+      <path
+        d="M366.229 127.001C365.332 127.001 364.552 126.669 363.888 126.006L352.184 114.302C351.56 113.678 351.248 112.897 351.248 111.961V77.6685C351.248 76.7322 351.56 75.9519 352.184 75.3277L363.888 63.6238C364.552 62.9606 365.332 62.629 366.229 62.629H384.019C384.916 62.629 385.697 62.9606 386.36 63.6238L398.064 75.3277C398.688 75.9519 399 76.7322 399 77.6685V111.961C399 112.897 398.688 113.678 398.064 114.302L386.36 126.006C385.697 126.669 384.916 127.001 384.019 127.001H366.229ZM375.007 107.514H375.124C375.904 107.514 376.509 107.299 376.938 106.87C377.367 106.441 377.582 105.836 377.582 105.056V84.5738C377.582 83.7936 377.367 83.1889 376.938 82.7597C376.509 82.3306 375.904 82.116 375.124 82.116H374.949C374.168 82.116 373.583 82.3306 373.193 82.7597C372.842 83.1889 372.666 83.7936 372.666 84.5738V105.056C372.666 105.836 372.861 106.441 373.251 106.87C373.681 107.299 374.266 107.514 375.007 107.514Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M326.423 127.001C325.448 127.001 324.96 126.513 324.96 125.538V64.0919C324.96 63.1166 325.448 62.6289 326.423 62.6289H344.915C345.891 62.6289 346.378 63.1166 346.378 64.0919V125.538C346.378 126.513 345.891 127.001 344.915 127.001H326.423ZM326.13 57.7718C325.35 57.7718 324.96 57.3817 324.96 56.6014V49.1694C324.96 48.3892 325.35 47.999 326.13 47.999H345.325C346.027 47.999 346.378 48.3892 346.378 49.1694V56.6014C346.378 57.3817 346.027 57.7718 345.325 57.7718H326.13Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M287.251 127.001C286.353 127.001 285.573 126.669 284.91 126.006L273.206 114.302C272.582 113.678 272.27 112.898 272.27 111.961V77.6688C272.27 76.7325 272.582 75.9522 273.206 75.328L284.91 63.6241C285.573 62.9608 286.353 62.6292 287.251 62.6292H293.337C294.234 62.6292 295.014 62.9608 295.677 63.6241L298.603 66.55V50.4571C298.603 49.4818 299.091 48.9941 300.066 48.9941H318.559C319.534 48.9941 320.022 49.4818 320.022 50.4571V125.538C320.022 126.513 319.534 127.001 318.559 127.001H303.461C302.953 127.001 302.583 126.903 302.349 126.708C302.115 126.513 301.841 126.279 301.529 126.006L298.603 123.08L295.677 126.006C295.014 126.669 294.234 127.001 293.337 127.001H287.251ZM296.029 107.514H296.263C297.043 107.514 297.628 107.299 298.018 106.87C298.408 106.441 298.603 105.836 298.603 105.056V82.1163H296.146C295.365 82.1163 294.761 82.3308 294.331 82.76C293.902 83.1891 293.688 83.7938 293.688 84.5741V105.056C293.688 105.836 293.883 106.441 294.273 106.87C294.702 107.299 295.287 107.514 296.029 107.514Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M234.56 127.001C233.662 127.001 232.882 126.669 232.219 126.006L220.515 114.302C219.891 113.678 219.579 112.897 219.579 111.961V64.092C219.579 63.1166 220.066 62.629 221.042 62.629H239.534C240.509 62.629 240.997 63.1166 240.997 64.092V103.125C240.997 104.724 241.816 105.524 243.455 105.524H245.912V64.092C245.912 63.1166 246.4 62.629 247.375 62.629H265.868C266.843 62.629 267.331 63.1166 267.331 64.092V125.538C267.331 126.513 266.843 127.001 265.868 127.001H234.56Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M200.402 127.001C199.505 127.001 198.724 126.669 198.061 126.006L188.288 116.292C187.664 115.628 187.352 114.848 187.352 113.951V82.116H184.894C183.919 82.116 183.431 81.6284 183.431 80.653V64.092C183.431 63.1166 183.919 62.629 184.894 62.629H187.352V55.314C187.352 54.3387 187.84 53.851 188.815 53.851H207.307C208.283 53.851 208.77 54.3387 208.77 55.314V62.629H214.447C215.422 62.629 215.91 63.1166 215.91 64.092V80.653C215.91 81.6284 215.422 82.116 214.447 82.116H208.77V105.524C208.77 106.304 209.004 106.928 209.472 107.397L215.207 113.131C215.597 113.522 215.793 114.107 215.793 114.887V125.538C215.793 126.513 215.305 127.001 214.33 127.001H200.402Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M140.463 127.001C139.488 127.001 139 126.513 139 125.538V109.035C139 108.567 139.02 108.197 139.059 107.923C139.137 107.611 139.371 107.338 139.761 107.104L152.167 99.9648V97.0388L139.936 90.6016C139.312 90.2505 139 89.6653 139 88.846V62.5122C139 61.888 139.039 61.4393 139.117 61.1662C139.195 60.8541 139.468 60.5225 139.936 60.1714L155.386 49.7549C155.698 49.5208 156.029 49.3453 156.38 49.2282C156.731 49.0722 157.18 48.9941 157.726 48.9941H178.384C179.359 48.9941 179.847 49.4818 179.847 50.4571V67.779C179.847 68.6372 179.554 69.2224 178.969 69.5345L163.637 76.2643V79.3073L178.969 88.0853C179.554 88.3584 179.847 88.9826 179.847 89.9579V115.414C179.847 115.726 179.788 116.058 179.671 116.409C179.593 116.721 179.398 116.974 179.086 117.17L160.711 126.299C160.477 126.455 160.184 126.611 159.833 126.767C159.521 126.923 159.209 127.001 158.897 127.001H140.463Z"
+        fill="#8108F7"
+      />
+      <path
+        d="M624.711 127.001C623.736 127.001 623.248 126.513 623.248 125.538V112.195C623.248 111.298 623.541 110.713 624.126 110.44L636.005 104.178V102.13L624.126 95.6926C623.541 95.3805 623.248 94.7563 623.248 93.82V74.2159C623.248 73.9038 623.287 73.6112 623.365 73.3381C623.443 73.026 623.658 72.7334 624.009 72.4603L636.474 63.3312C636.747 63.1751 637.039 63.0191 637.351 62.863C637.663 62.707 637.995 62.629 638.346 62.629H656.487C657.463 62.629 657.95 63.1166 657.95 64.092V77.1418C657.95 77.649 657.911 78.0587 657.833 78.3708C657.794 78.6829 657.58 78.9365 657.189 79.1315L646.246 85.042V87.0317L656.955 92.8836C657.619 93.1957 657.95 93.7809 657.95 94.6392V113.541C657.95 114.516 657.619 115.297 656.955 115.882L645.486 126.24C644.861 126.747 644.081 127.001 643.145 127.001H624.711Z"
+        fill="#06C680"
+      />
+      <path
+        d="M603.187 127.001C602.134 127.001 601.353 126.747 600.846 126.24L594.175 119.569L587.153 112.546C586.723 112.117 586.45 111.785 586.333 111.551C586.255 111.278 586.216 110.83 586.216 110.205V79.4241C586.216 78.7609 586.255 78.3122 586.333 78.0782C586.45 77.8441 586.723 77.5125 587.153 77.0833L594.116 70.1195L600.846 63.3897C601.158 63.0776 601.49 62.8826 601.841 62.8045C602.192 62.6875 602.641 62.629 603.187 62.629H616.822C617.797 62.629 618.285 63.1166 618.285 64.092V79.8923C618.285 80.2434 618.246 80.5555 618.168 80.8286C618.129 81.1017 617.934 81.4138 617.583 81.7649L612.843 86.505L608.22 91.128V98.5015L612.433 102.715L617.583 107.865C617.934 108.216 618.129 108.528 618.168 108.801C618.246 109.074 618.285 109.386 618.285 109.737V125.538C618.285 126.513 617.797 127.001 616.822 127.001H603.187Z"
+        fill="#06C680"
+      />
+      <path
+        d="M561.391 127.001C560.416 127.001 559.928 126.513 559.928 125.538V64.0919C559.928 63.1166 560.416 62.6289 561.391 62.6289H579.883C580.859 62.6289 581.346 63.1166 581.346 64.0919V125.538C581.346 126.513 580.859 127.001 579.883 127.001H561.391ZM561.099 57.7718C560.318 57.7718 559.928 57.3817 559.928 56.6014V49.1694C559.928 48.3892 560.318 47.999 561.099 47.999H580.293C580.995 47.999 581.346 48.3892 581.346 49.1694V56.6014C581.346 57.3817 580.995 57.7718 580.293 57.7718H561.099Z"
+        fill="#06C680"
+      />
+      <path
+        d="M508.7 127.001C507.725 127.001 507.237 126.513 507.237 125.538V50.4571C507.237 49.4818 507.725 48.9941 508.7 48.9941H527.193C528.168 48.9941 528.656 49.4818 528.656 50.4571V66.55L531.581 63.6241C532.245 62.9608 533.025 62.6292 533.922 62.6292H540.008C540.906 62.6292 541.686 62.9608 542.349 63.6241L554.053 75.328C554.677 75.9522 554.989 76.7325 554.989 77.6688V111.961C554.989 112.898 554.677 113.678 554.053 114.302L542.349 126.006C541.686 126.669 540.906 127.001 540.008 127.001H508.7ZM528.656 107.514H531.113C531.894 107.514 532.498 107.299 532.927 106.87C533.357 106.441 533.571 105.836 533.571 105.056V84.5741C533.571 83.7938 533.376 83.1891 532.986 82.76C532.596 82.3308 532.011 82.1163 531.23 82.1163H530.996C530.255 82.1163 529.67 82.3308 529.241 82.76C528.851 83.1891 528.656 83.7938 528.656 84.5741V107.514Z"
+        fill="#06C680"
+      />
+      <path
+        d="M469.528 127.001C468.631 127.001 467.85 126.669 467.187 126.006L455.483 114.302C454.859 113.678 454.547 112.897 454.547 111.961V64.092C454.547 63.1166 455.035 62.629 456.01 62.629H474.502C475.477 62.629 475.965 63.1166 475.965 64.092V103.125C475.965 104.724 476.784 105.524 478.423 105.524H480.881V64.092C480.881 63.1166 481.368 62.629 482.344 62.629H500.836C501.811 62.629 502.299 63.1166 502.299 64.092V125.538C502.299 126.513 501.811 127.001 500.836 127.001H469.528Z"
+        fill="#06C680"
+      />
+      <path
+        d="M431.833 127.001C430.819 127.001 430.038 126.747 429.492 126.24L422.997 119.686L411.936 108.684C411.507 108.255 411.234 107.923 411.117 107.689C411.039 107.416 411 106.968 411 106.343V69.6516C411 68.9884 411.039 68.5397 411.117 68.3056C411.234 68.0716 411.507 67.7399 411.936 67.3108L420.714 58.4158L429.492 49.7549C429.843 49.4038 430.194 49.1892 430.546 49.1112C430.897 49.0332 431.326 48.9941 431.833 48.9941H448.219C449.194 48.9941 449.682 49.4818 449.682 50.4571V66.6086C449.682 66.9597 449.642 67.2913 449.564 67.6034C449.525 67.8765 449.35 68.1691 449.038 68.4812L441.313 76.0887L435.169 82.3504V94.6395L442.074 101.662L449.038 108.45C449.35 108.723 449.525 109.016 449.564 109.328C449.642 109.64 449.682 109.972 449.682 110.323V125.538C449.682 126.513 449.194 127.001 448.219 127.001H431.833Z"
+        fill="#06C680"
+      />
+    </>
+  ),
+  viewBox = "0 0 658 175",
+  logoViewBox = "0 0 109 175",
+  logoTextViewBox = "139 0 658 175",
+  ...rest
+}: LogoProps) => {
+  return (
+    <svg
+      viewBox={
+        onlyFavicon ? logoViewBox : onlyLogoText ? logoTextViewBox : viewBox
+      }
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      {/* Favicon */}
+      <g
+        className={faviconClass}
+        style={{
+          transition: "all var(--transition-time) var(--transition-tf)",
+          scale: onlyLogoText ? "0" : "1",
+          opacity: onlyLogoText ? "0" : "1",
+        }}
+      >
+        {favicon}
+      </g>
+      {/* Logo text */}
+      <g
+        className={logoClass}
+        style={{
+          transition: "all var(--transition-time) var(--transition-tf)",
+          scale: onlyFavicon ? "0" : "1",
+          opacity: onlyFavicon ? "0" : "1",
+        }}
+      >
+        {logoText}
+      </g>
+    </svg>
+  );
+};
+
+// <svg width="688" height="339" viewBox="0 0 688 339" fill="none" xmlns="http://www.w3.org/2000/svg">
+{
+  /*
+<svg width="260" height="79" viewBox="0 0 260 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M227.229 79.0016C226.332 79.0016 225.552 78.67 224.888 78.0068L213.184 66.3028C212.56 65.6786 212.248 64.8984 212.248 63.962V29.6695C212.248 28.7332 212.56 27.9529 213.184 27.3287L224.888 15.6248C225.552 14.9616 226.332 14.6299 227.229 14.6299H245.019C245.916 14.6299 246.697 14.9616 247.36 15.6248L259.064 27.3287C259.688 27.9529 260 28.7332 260 29.6695V63.962C260 64.8984 259.688 65.6786 259.064 66.3028L247.36 78.0068C246.697 78.67 245.916 79.0016 245.019 79.0016H227.229ZM236.007 59.5145H236.124C236.904 59.5145 237.509 59.3 237.938 58.8708C238.367 58.4417 238.582 57.837 238.582 57.0567V36.5748C238.582 35.7946 238.367 35.1899 237.938 34.7607C237.509 34.3316 236.904 34.117 236.124 34.117H235.949C235.168 34.117 234.583 34.3316 234.193 34.7607C233.842 35.1899 233.666 35.7946 233.666 36.5748V57.0567C233.666 57.837 233.861 58.4417 234.251 58.8708C234.681 59.3 235.266 59.5145 236.007 59.5145Z" fill="#8108F7"/>
+<path d="M187.423 79.0016C186.448 79.0016 185.96 78.5139 185.96 77.5386V16.0929C185.96 15.1176 186.448 14.6299 187.423 14.6299H205.915C206.891 14.6299 207.378 15.1176 207.378 16.0929V77.5386C207.378 78.5139 206.891 79.0016 205.915 79.0016H187.423ZM187.13 9.77278C186.35 9.77278 185.96 9.38265 185.96 8.60239V1.17039C185.96 0.390129 186.35 0 187.13 0H206.325C207.027 0 207.378 0.390129 207.378 1.17039V8.60239C207.378 9.38265 207.027 9.77278 206.325 9.77278H187.13Z" fill="#8108F7"/>
+<path d="M148.251 79.0018C147.353 79.0018 146.573 78.6702 145.91 78.007L134.206 66.3031C133.582 65.6789 133.27 64.8986 133.27 63.9623V29.6698C133.27 28.7334 133.582 27.9532 134.206 27.329L145.91 15.625C146.573 14.9618 147.353 14.6302 148.251 14.6302H154.337C155.234 14.6302 156.014 14.9618 156.677 15.625L159.603 18.551V2.45811C159.603 1.48278 160.091 0.995117 161.066 0.995117H179.559C180.534 0.995117 181.022 1.48278 181.022 2.45811V77.5389C181.022 78.5142 180.534 79.0018 179.559 79.0018H164.461C163.953 79.0018 163.583 78.9043 163.349 78.7092C163.115 78.5142 162.841 78.2801 162.529 78.007L159.603 75.081L156.677 78.007C156.014 78.6702 155.234 79.0018 154.337 79.0018H148.251ZM157.029 59.5148H157.263C158.043 59.5148 158.628 59.3002 159.018 58.8711C159.408 58.4419 159.603 57.8372 159.603 57.057V34.1173H157.146C156.365 34.1173 155.761 34.3318 155.331 34.761C154.902 35.1901 154.688 35.7948 154.688 36.5751V57.057C154.688 57.8372 154.883 58.4419 155.273 58.8711C155.702 59.3002 156.287 59.5148 157.029 59.5148Z" fill="#8108F7"/>
+<path d="M95.5596 79.0016C94.6623 79.0016 93.8821 78.67 93.2189 78.0068L81.5149 66.3028C80.8907 65.6786 80.5786 64.8984 80.5786 63.962V16.0929C80.5786 15.1176 81.0663 14.6299 82.0416 14.6299H100.534C101.509 14.6299 101.997 15.1176 101.997 16.0929V55.1256C101.997 56.7251 102.816 57.5249 104.455 57.5249H106.912V16.0929C106.912 15.1176 107.4 14.6299 108.375 14.6299H126.868C127.843 14.6299 128.331 15.1176 128.331 16.0929V77.5386C128.331 78.5139 127.843 79.0016 126.868 79.0016H95.5596Z" fill="#8108F7"/>
+<path d="M61.4019 79.0016C60.5046 79.0016 59.7243 78.67 59.0611 78.0068L49.2883 68.2925C48.6641 67.6293 48.352 66.849 48.352 65.9517V34.117H45.8941C44.9188 34.117 44.4312 33.6293 44.4312 32.654V16.0929C44.4312 15.1176 44.9188 14.6299 45.8941 14.6299H48.352V7.31498C48.352 6.33965 48.8396 5.85199 49.815 5.85199H68.3072C69.2825 5.85199 69.7702 6.33965 69.7702 7.31498V14.6299H75.4466C76.4219 14.6299 76.9096 15.1176 76.9096 16.0929V32.654C76.9096 33.6293 76.4219 34.117 75.4466 34.117H69.7702V57.5249C69.7702 58.3051 70.0042 58.9293 70.4724 59.3975L76.2073 65.1324C76.5975 65.5226 76.7925 66.1078 76.7925 66.888V77.5386C76.7925 78.5139 76.3049 79.0016 75.3295 79.0016H61.4019Z" fill="#8108F7"/>
+<path d="M1.46299 79.0018C0.487664 79.0018 0 78.5142 0 77.5389V61.0363C0 60.5681 0.0195065 60.1975 0.0585195 59.9244C0.136546 59.6123 0.370625 59.3392 0.760756 59.1052L13.1669 51.9658V49.0398L0.936315 42.6026C0.312105 42.2515 0 41.6663 0 40.847V14.5132C0 13.889 0.039013 13.4403 0.117039 13.1672C0.195065 12.8551 0.468158 12.5235 0.936315 12.1724L16.3855 1.75587C16.6976 1.52179 17.0292 1.34624 17.3803 1.2292C17.7315 1.07314 18.1801 0.995117 18.7263 0.995117H39.3837C40.3591 0.995117 40.8467 1.48278 40.8467 2.45811V19.7799C40.8467 20.6382 40.5541 21.2234 39.9689 21.5355L24.6368 28.2653V31.3083L39.9689 40.0863C40.5541 40.3594 40.8467 40.9836 40.8467 41.9589V67.4149C40.8467 67.727 40.7882 68.0587 40.6712 68.4098C40.5932 68.7219 40.3981 68.9755 40.086 69.1705L21.7108 78.2996C21.4767 78.4557 21.1841 78.6117 20.833 78.7678C20.5209 78.9238 20.2088 79.0018 19.8967 79.0018H1.46299Z" fill="#8108F7"/>
+</svg>
+
+
+
+  */
+}

package/src/Misc/PoweredByBanner/PoweredByBanner.module.css

@@ -0,0 +1,20 @@
+.root {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-block: var(--spacing-gap);
+  gap: var(--spacing-gap);
+  padding-inline: 8.33%;
+  color: var(--color-on-background-faint);
+  width: 100%;
+}
+.size_sm {
+  font-size: var(--fs-body2);
+}
+.size_md {
+  font-size: var(--fs-body);
+}
+.size_lg {
+  font-size: var(--fs-body);
+  font-weight: bold;
+}

package/src/Misc/PoweredByBanner/PoweredByBanner.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@studiocubics/utils";
+import { StudioCubicsLogo } from "../Logos";
+import styles from "./PoweredByBanner.module.css";
+export function PoweredByBanner({ size = "sm" }: { size?: "sm" | "md" | "lg" }) {
+  return (
+    <div className={cn(styles.root, styles[`size_${size}`])}>
+      Powered by{" "}
+      <span>
+        <StudioCubicsLogo
+          width={size == "sm" ? 10 : size == "md" ? 15 : 18}
+          onlyFavicon
+        />{" "}
+        Studio Cubics
+      </span>
+    </div>
+  );
+}

package/src/Misc/Ripple/Ripple.module.css

@@ -0,0 +1,25 @@
+.container {
+  position: absolute;
+  overflow: hidden;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.ripple {
+  --ripple-color: currentColor;
+  --ripple-duration: 750ms;
+  filter: blur(10px);
+  position: absolute;
+  border-radius: 50%;
+  background: var(--ripple-color);
+  transform: scale(0);
+  opacity: 0.6;
+  animation: ripple-expand var(--ripple-duration, 750ms) var(--transition-tf);
+  pointer-events: none;
+}
+@keyframes ripple-expand {
+  to {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

package/src/Misc/Ripple/Ripple.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import type {
+  ChangeEvent,
+  CSSProperties,
+  FocusEvent,
+  MouseEvent,
+  SyntheticEvent,
+  TouchEvent,
+} from "react";
+import { useCallback, useState } from "react";
+import styles from "./Ripple.module.css";
+
+export interface UseRippleProps {
+  /**
+   * duration of the ripple in miliseconds
+   */
+  duration?: number;
+  /**
+   * color of the ripple
+   */
+  color?: CSSProperties["color"];
+  /**
+   * disabled ripple effect
+   */
+  disabled?: boolean;
+}
+
+interface Ripple {
+  key: number;
+  size: number;
+  x: number;
+  y: number;
+}
+export type RippleEventHandler<T = unknown> = (event: T) => void;
+
+export function eventWithRipple<
+  E extends SyntheticEvent<HTMLElement> = SyntheticEvent<HTMLElement>,
+>(
+  createRipple: (event: E) => void,
+  ...handlers: (RippleEventHandler<E> | undefined)[]
+) {
+  return (event: E) => {
+    createRipple?.(event);
+    for (const h of handlers) h?.(event);
+  };
+}
+
+export function useRipple<C extends HTMLElement>(props: UseRippleProps = {}) {
+  const { duration = 750, color = "currentColor", disabled = false } = props;
+
+  const [ripples, setRipples] = useState<Ripple[]>([]);
+
+  const createRipple = useCallback(
+    (event: TouchEvent<C> | MouseEvent<C> | ChangeEvent<C> | FocusEvent<C>) => {
+      const { currentTarget } = event;
+      const isMouseEvent = "clientX" in event && "clientY" in event;
+      if (!currentTarget) return;
+      if (disabled) return;
+
+      const element = event.currentTarget;
+      const rect = element.getBoundingClientRect();
+
+      const diameter = Math.max(element.offsetWidth, element.offsetHeight);
+      const radius = diameter / 2;
+
+      const left = isMouseEvent
+        ? event.clientX - rect.left - radius
+        : Math.floor((rect.right - rect.left) / 2);
+      const top = isMouseEvent
+        ? event.clientY - rect.top - radius
+        : Math.floor((rect.bottom - rect.top) / 2);
+
+      const newRipple = {
+        key: Date.now(),
+        size: diameter,
+        x: left,
+        y: top,
+        color,
+      };
+
+      setRipples((prev) => (prev.length <= 2 ? [...prev, newRipple] : prev));
+
+      setTimeout(() => {
+        setRipples((prev) =>
+          prev.filter((ripple) => ripple.key !== newRipple.key)
+        );
+      }, duration);
+    },
+    [duration, color, disabled]
+  );
+
+  const rippleElements = ripples.map((ripple) => (
+    <Ripple
+      ripple={ripple}
+      key={ripple.key}
+      duration={duration}
+      color={color}
+    />
+  ));
+
+  return { createRipple, rippleElements };
+}
+function Ripple({
+  ripple,
+  color,
+  duration,
+}: { ripple: Ripple } & UseRippleProps) {
+  return (
+    <span className={styles.container}>
+      <span
+        className={styles.ripple}
+        style={{
+          ...({
+            "--ripple-color": color,
+            "--ripple-duration": `${duration}ms`,
+          } as CSSProperties),
+          width: ripple.size,
+          height: ripple.size,
+          left: ripple.x,
+          top: ripple.y,
+        }}
+      />
+    </span>
+  );
+}

package/src/Misc/Spinner/Spinner.module.css

@@ -0,0 +1,38 @@
+@keyframes spinning {
+  12% {
+    x: 13px;
+    y: 1px;
+  }
+  25% {
+    x: 13px;
+    y: 1px;
+  }
+  37% {
+    x: 13px;
+    y: 13px;
+  }
+  50% {
+    x: 13px;
+    y: 13px;
+  }
+  62% {
+    x: 1px;
+    y: 13px;
+  }
+  75% {
+    x: 1px;
+    y: 13px;
+  }
+  87% {
+    x: 1px;
+    y: 1px;
+  }
+}
+.main {
+  animation: spinning 1.6s linear infinite;
+  animation-delay: -1.6s;
+}
+.trailing {
+  animation-delay: -1s;
+  fill-opacity: 0.5;
+}

package/src/Misc/Spinner/Spinner.tsx

@@ -0,0 +1,36 @@
+"use client";
+import type { ComponentProps } from "react";
+import styles from "./Spinner.module.css";
+import { cn } from "@studiocubics/utils";
+
+export function Spinner(props: ComponentProps<"svg">) {
+  const { width = "24", height = "24", ...rest } = props;
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <rect
+        className={styles.main}
+        x="1"
+        y="1"
+        rx="2"
+        width="10"
+        height="10"
+        fill="currentColor"
+      />
+      <rect
+        className={cn(styles.main, styles.trailing)}
+        x="1"
+        y="1"
+        rx="2"
+        width="10"
+        height="10"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}