@aristobyte-ui/spinner 0.0.0-beta.1

package/styles/_settings.scss

@@ -0,0 +1,179 @@
+// === Design Tokens — Color Palette ===
+
+// Base
+$white: #ffffff;
+$black: #000000;
+$transparent: transparent;
+
+// === Black Transparent Scale ===
+$black-transparent-100: rgba(0, 0, 0, 0.1);
+$black-transparent-200: rgba(0, 0, 0, 0.2);
+$black-transparent-300: rgba(0, 0, 0, 0.3);
+$black-transparent-400: rgba(0, 0, 0, 0.4);
+$black-transparent-500: rgba(0, 0, 0, 0.5);
+$black-transparent-600: rgba(0, 0, 0, 0.6);
+$black-transparent-700: rgba(0, 0, 0, 0.7);
+$black-transparent-800: rgba(0, 0, 0, 0.8);
+$black-transparent-900: rgba(0, 0, 0, 0.9);
+
+// === Black Transparent Scale ===
+$white-transparent-100: rgba(255, 255, 255, 0.1);
+$white-transparent-200: rgba(255, 255, 255, 0.2);
+$white-transparent-300: rgba(255, 255, 255, 0.3);
+$white-transparent-400: rgba(255, 255, 255, 0.4);
+$white-transparent-500: rgba(255, 255, 255, 0.5);
+$white-transparent-600: rgba(255, 255, 255, 0.6);
+$white-transparent-700: rgba(255, 255, 255, 0.7);
+$white-transparent-800: rgba(255, 255, 255, 0.8);
+$white-transparent-900: rgba(255, 255, 255, 0.9);
+
+// === Neutral Scale (Grey) ===
+$grey-50: #f9fafb;
+$grey-100: #f3f4f6;
+$grey-200: #e5e7eb;
+$grey-300: #d1d5db;
+$grey-400: #9ca3af;
+$grey-500: #6b7280;
+$grey-600: #4b5563;
+$grey-700: #374151;
+$grey-800: #1f2937;
+$grey-900: #111827;
+
+// === Primary Scale (Blue) ===
+$blue-50: #eff6ff;
+$blue-100: #dbeafe;
+$blue-200: #bfdbfe;
+$blue-300: #93c5fd;
+$blue-400: #60a5fa;
+$blue-500: #3b82f6;
+$blue-600: #2563eb; // Main
+$blue-700: #1d4ed8; // Hover
+$blue-800: #1e40af;
+$blue-900: #1e3a8a;
+
+// === Secondary Scale (Indigo) ===
+$indigo-50: #eef2ff;
+$indigo-100: #e0e7ff;
+$indigo-200: #c7d2fe;
+$indigo-300: #a5b4fc;
+$indigo-400: #818cf8;
+$indigo-500: #6366f1;
+$indigo-600: #4f46e5; // Main
+$indigo-700: #4338ca; // Hover
+
+// === Error Scale (Red) ===
+$red-50: #fef2f2;
+$red-100: #fee2e2;
+$red-200: #fecaca;
+$red-300: #fca5a5;
+$red-400: #f87171;
+$red-500: #ef4444;
+$red-600: #dc2626; // Main
+$red-700: #b91c1c; // Hover
+
+// === Success Scale (Green) ===
+$green-50: #f0fdf4;
+$green-100: #dcfce7;
+$green-200: #bbf7d0;
+$green-300: #86efac;
+$green-400: #4ade80;
+$green-500: #22c55e;
+$green-600: #16a34a; // Main
+$green-700: #15803d; // Hover
+
+// === Warning Scale (Amber) ===
+$amber-50: #fffbeb;
+$amber-100: #fef3c7;
+$amber-200: #fde68a;
+$amber-300: #fcd34d;
+$amber-400: #fbbf24;
+$amber-500: #f59e0b;
+$amber-600: #d97706; // Main
+$amber-700: #b45309; // Hover
+
+// === Semantic Tokens ===
+$color-default: $grey-800;
+$color-default-hover: $grey-900;
+$color-default-disabled: rgba($color-default, 0.5);
+
+$color-primary: $blue-600;
+$color-primary-hover: $blue-700;
+$color-primary-disabled: rgba($color-primary, 0.5);
+
+$color-secondary: $indigo-600;
+$color-secondary-hover: $indigo-700;
+$color-secondary-disabled: rgba($color-secondary, 0.5);
+
+$color-error: $red-600;
+$color-error-hover: $red-700;
+$color-error-disabled: rgba($color-error, 0.5);
+
+$color-success: $green-600;
+$color-success-hover: $green-700;
+$color-success-disabled: rgba($color-success, 0.5);
+
+$color-warning: $amber-600;
+$color-warning-hover: $amber-700;
+$color-warning-disabled: rgba($color-warning, 0.5);
+
+$text-color-white: $white;
+$text-color-black: $black;
+$text-color-white-disabled: rgba($white, 0.5);
+$text-color-black-disabled: rgba($black, 0.5);
+
+// === Shadows ===
+$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);
+$shadow-md:
+  0 4px 6px -1px rgba($black, 0.1),
+  0 2px 4px -1px rgba($black, 0.06);
+$shadow-lg:
+  0 10px 15px -3px rgba($black, 0.1),
+  0 4px 6px -2px rgba($black, 0.05);
+
+// === Font families ===
+$font-family-sans: "Inter", sans-serif;
+$font-family-serif: "Georgia", serif;
+$font-family-mono: "Fira Code", monospace;
+
+// === Font weights ===
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// === Line heights ===
+$line-height-tight: 1.2;
+$line-height-snug: 1.375;
+$line-height-normal: 1.5;
+$line-height-loose: 1.625;
+
+// === Font Sizes — Semantic Tokens ===
+
+// === Titles ===
+$font-size-hero: 3rem; // 48px
+$font-size-title-1: 2.25rem; // 36px
+$font-size-title-2: 1.875rem; // 30px
+$font-size-title-3: 1.5rem; // 24px
+
+// === Subtitles ===
+$font-size-subtitle-1: 1.25rem; // 20px
+$font-size-subtitle-2: 1.125rem; // 18px
+
+// === Body text ===
+$font-size-body-lg: 1rem; // 16px
+$font-size-body-md: 0.9375rem; // 15px
+$font-size-body-sm: 0.875rem; // 14px
+
+// === Captions / Descriptions ===
+$font-size-caption: 0.75rem; // 12px
+$font-size-footnote: 0.6875rem; // 11px
+
+// === Buttons ===
+$font-size-button-lg: 1rem; // 16px
+$font-size-button-md: 0.875rem; // 14px
+$font-size-button-sm: 0.75rem; // 12px
+
+// === Animations ===
+
+$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);
+$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@aristobyte-ui/typescript-config/package",
+  "compilerOptions": {
+    "outDir": "dist",
+    "declarationDir": "dist/types",
+    "baseUrl": ".",
+    "typeRoots": ["./@types", "./node_modules/@types"]
+  },
+  "include": ["@types", "components", "utils", "index.ts"],
+  "exclude": ["node_modules", "dist"]
+}

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();
+  });
+};