techsaraz-loader 1.0.0

package/README.md

@@ -0,0 +1,102 @@
+# TechSaraZ Loader
+
+An animated full-screen React loader with rotating inspirational quotes. Fully customizable with dynamic brand name, logo, and quotes.
+
+## Installation
+
+```bash
+npm install @techsaraz/core-loader
+```
+
+## Usage
+
+### Basic Usage (with TechSaraZ defaults)
+
+```tsx
+import TechSaraZLoader from '@techsaraz/core-loader';
+
+function App() {
+  return <TechSaraZLoader />;
+}
+```
+
+### Custom Brand Name
+
+```tsx
+import TechSaraZLoader from '@techsaraz/core-loader';
+
+function App() {
+  return <TechSaraZLoader brandName="MyBrand" />;
+}
+```
+
+### With Brand Logo
+
+```tsx
+import TechSaraZLoader from '@techsaraz/core-loader';
+
+function App() {
+  return (
+    <TechSaraZLoader 
+      brandName="MyCompany"
+      brandLogo="/logo.png"
+      logoWidth={100}
+      logoHeight={100}
+    />
+  );
+}
+```
+
+### Custom Quotes
+
+```tsx
+import TechSaraZLoader from '@techsaraz/core-loader';
+
+function App() {
+  const customQuotes = [
+    'Loading your experience...',
+    'Almost there...',
+    'Preparing something awesome...',
+  ];
+
+  return (
+    <TechSaraZLoader 
+      brandName="MyApp"
+      quotes={customQuotes}
+      quoteInterval={3000}
+    />
+  );
+}
+```
+
+### Without Braces
+
+```tsx
+import TechSaraZLoader from '@techsaraz/core-loader';
+
+function App() {
+  return <TechSaraZLoader brandName="MyBrand" showBraces={false} />;
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `brandName` | `string` | `"TechSaraZ"` | Brand name to display in the loader |
+| `brandLogo` | `string` | `undefined` | URL of the brand logo to display above the brand name |
+| `brandLogoAlt` | `string` | `brandName` | Alt text for the brand logo |
+| `logoWidth` | `number` | `80` | Logo width in pixels |
+| `logoHeight` | `number` | `80` | Logo height in pixels |
+| `quotes` | `string[]` | Default TechSaraZ quotes | Custom quotes to cycle through |
+| `quoteInterval` | `number` | `4000` | Interval in milliseconds between quote changes |
+| `showBraces` | `boolean` | `true` | Whether to show curly braces around the brand name |
+| `className` | `string` | `undefined` | Custom class name for the container |
+
+## Styling
+
+The loader uses Tailwind CSS classes. Make sure you have Tailwind CSS configured in your project for proper styling.
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+const defaultQuotes = [
+    'Crafting Future-Ready Digital Experiences...',
+    'Integrity in Every Line of Code.',
+    'Designing With Purpose. Building With Precision.',
+    'Where Creativity Meets Technology.',
+    'Delivering Trust Through Technology.',
+    'Innovating at the Speed of Thought.',
+    'Smart Solutions. Real Impact.',
+    'Pixels with Purpose. Code with Character.',
+    "We Don't Just Build, We Engineer.",
+];
+const TechSaraZLoader = ({ brandName = 'TechSaraZ', brandLogo, brandLogoAlt, logoWidth = 80, logoHeight = 80, quotes = defaultQuotes, quoteInterval = 4000, showBraces = true, className, }) => {
+    const [quoteIndex, setQuoteIndex] = useState(0);
+    useEffect(() => {
+        if (quotes.length === 0)
+            return;
+        const interval = setInterval(() => {
+            setQuoteIndex((prev) => (prev + 1) % quotes.length);
+        }, quoteInterval);
+        return () => clearInterval(interval);
+    }, [quotes.length, quoteInterval]);
+    return (_jsxs("div", { className: `fixed inset-0 z-50 flex flex-col items-center justify-center bg-white/70 text-center px-4 ${className || ''}`, children: [brandLogo && (_jsx("img", { src: brandLogo, alt: brandLogoAlt || brandName, width: logoWidth, height: logoHeight, className: "mb-4 object-contain" })), _jsxs("div", { className: "text-2xl sm:text-3xl font-mono text-blue-800 mb-6", children: [showBraces && '{', brandName, _jsx("span", { className: "dots" }), showBraces && '}'] }), quotes.length > 0 && (_jsx("p", { className: "text-lg text-blue-900 font-medium transition-opacity duration-700 ease-in-out", children: quotes[quoteIndex] })), _jsx("style", { children: `
+        .dots::after {
+          content: '';
+          animation: dots 1.5s steps(4, end) infinite;
+        }
+        @keyframes dots {
+          0%   { content: ''; }
+          25%  { content: '.'; }
+          50%  { content: '..'; }
+          75%  { content: '...'; }
+          100% { content: ''; }
+        }
+      ` })] }));
+};
+export default TechSaraZLoader;
+export { TechSaraZLoader };

package/dist/types/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export interface TechSaraZLoaderProps {
+    /** Brand name to display in the loader. Defaults to "TechSaraZ" */
+    brandName?: string;
+    /** Brand logo URL to display above the brand name */
+    brandLogo?: string;
+    /** Alt text for the brand logo. Defaults to brandName value */
+    brandLogoAlt?: string;
+    /** Logo width in pixels. Defaults to 80 */
+    logoWidth?: number;
+    /** Logo height in pixels. Defaults to 80 */
+    logoHeight?: number;
+    /** Custom quotes to cycle through. Defaults to TechSaraZ quotes */
+    quotes?: string[];
+    /** Interval in milliseconds between quote changes. Defaults to 4000 */
+    quoteInterval?: number;
+    /** Whether to show curly braces around the brand name. Defaults to true */
+    showBraces?: boolean;
+    /** Custom class name for the container */
+    className?: string;
+}
+declare const TechSaraZLoader: React.FC<TechSaraZLoaderProps>;
+export default TechSaraZLoader;
+export { TechSaraZLoader };

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "techsaraz-loader",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
+}