@aristobyte-ui/radio 0.0.0-beta.1

package/turbo/generators/config.ts

@@ -0,0 +1,30 @@
+import type { PlopTypes } from "@turbo/gen";
+
+// Learn more about Turborepo Generators at https://turborepo.com/docs/guides/generating-code
+
+export default function generator(plop: PlopTypes.NodePlopAPI): void {
+  // A simple generator to add a new React component to the internal UI library
+  plop.setGenerator("react-component", {
+    description: "Adds a new react component",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "What is the name of the component?",
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/{{kebabCase name}}.tsx",
+        templateFile: "templates/component.hbs",
+      },
+      {
+        type: "append",
+        path: "package.json",
+        pattern: /"exports": {(?<insertion>)/g,
+        template: '    "./{{kebabCase name}}": "./src/{{kebabCase name}}.tsx",',
+      },
+    ],
+  });
+}

package/turbo/generators/templates/component.hbs

@@ -0,0 +1,8 @@
+export const {{ pascalCase name }} = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div>
+      <h1>{{ pascalCase name }} Component</h1>
+      {children}
+    </div>
+  );
+};

package/utils/Portal.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+export const Portal: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted || typeof window === "undefined") return null;
+  return createPortal(children, document.body);
+};

package/utils/icons.ts

@@ -0,0 +1,13 @@
+import Copy from "../assets/svg/i_Copy.svg";
+import Error from "../assets/svg/i_Error.svg";
+import Info from "../assets/svg/i_Info.svg";
+import Success from "../assets/svg/i_Success.svg";
+import Warning from "../assets/svg/i_Warning.svg";
+
+export const Icons = {
+  Copy,
+  Error,
+  Info,
+  Success,
+  Warning,
+};

package/utils/index.ts

@@ -0,0 +1,2 @@
+export { renderRipple, type RippleParams } from "./ripple";
+export { Icons } from "./icons";

package/utils/ripple.tsx

@@ -0,0 +1,54 @@
+type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;
+
+export type RippleParams<HTMLElementType extends RippleParamsRef> = {
+  ref: React.RefObject<HTMLElementType | null>;
+  clientX: number;
+  clientY: number;
+};
+
+export const renderRipple = <HTMLElementType extends RippleParamsRef>({
+  ref,
+  clientX,
+  clientY,
+}: RippleParams<HTMLElementType>) => {
+  const button = ref.current;
+  if (!button) return;
+
+  const circle = document.createElement("span");
+  const diameter = Math.max(button.clientWidth, button.clientHeight);
+  const radius = diameter / 2;
+
+  circle.id = "ripple";
+
+  const style = document.createElement("style");
+  style.innerHTML = `
+      #ripple {
+        animation: ripple 300ms linear;
+        background-color: rgba(255, 255, 255, 0.3);
+        border-radius: 50%;
+        height: ${diameter}px;
+        left: ${clientX - button.getBoundingClientRect().left - radius}px;
+        pointer-events: none;
+        position: absolute;
+        top: ${clientY - button.getBoundingClientRect().top - radius}px;
+        transform: scale(0);
+        width: ${diameter}px;
+        z-index: 0;
+      }
+      
+      @keyframes ripple {
+        to {
+          opacity: 0;
+          transform: scale(2);
+        }
+      }
+    `;
+
+  button.appendChild(style);
+  button.appendChild(circle);
+
+  circle.addEventListener("animationend", () => {
+    circle.remove();
+    style.remove();
+  });
+};