warqadui 0.0.8 → 0.0.10

package/apps/dev-app/src/pages/Modals.tsx

@@ -1,151 +0,0 @@
-import { useState } from "react";
-import {
-  Modal,
-  Button,
-  CodeBlock,
-  Card,
-  LoadingSpin,
-  PageHeader,
-  useModal,
-} from "warqadui";
-
-const ModalsShowcase = () => {
-  const basicModal = useModal();
-  const loadingModal = useModal();
-  const [isModalLoading, setIsModalLoading] = useState(false);
-
-  const triggerLoadingModal = () => {
-    loadingModal.open();
-    setIsModalLoading(true);
-    setTimeout(() => setIsModalLoading(false), 3000);
-  };
-
-  const importCode = `import { Modal, useModalBox } from "warqadui";`;
-
-  const hookUsageCode = `const modal = useModalBox();\n\n<Button onClick={modal.open}>Open</Button>\n\n<Modal \n  isOpen={modal.isOpen} \n  onClose={modal.close} \n  title="Title"\n>\n  Content\n</Modal>`;
-
-  const loadingUsageCode = `<Modal \n  isOpen={isOpen} \n  onClose={onClose} \n  title="Processing"\n  isLoading={true}\n>\n  Blurred content...\n</Modal>`;
-
-  return (
-    <div className="p-8 space-y-12 pb-20">
-      <PageHeader
-        title="Modals"
-        description="Premium, animated dialogs with built-in loading states and iOS-inspired aesthetics."
-      />
-
-      {/* Quick Start */}
-      <section className="space-y-4">
-        <h2 className="text-xl font-bold">Usage</h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
-          <Card variant="flat" className="space-y-3">
-            <p className="text-sm font-medium">1. Simple Import</p>
-            <CodeBlock code={importCode} />
-          </Card>
-          <Card variant="flat" className="space-y-3">
-            <p className="text-sm font-medium">
-              2. Recommended: useModalBox hook
-            </p>
-            <CodeBlock code={hookUsageCode} className="text-xs" />
-          </Card>
-        </div>
-      </section>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <Card className="flex flex-col justify-between">
-          <div>
-            <Card.Header>
-              <Card.Title>Basic Modal</Card.Title>
-              <Card.Description>
-                Simple dialog with a title and close button.
-              </Card.Description>
-            </Card.Header>
-            <Card.Content className="pb-6">
-              <Button
-                onClick={basicModal.open}
-                variant="primary"
-                className="w-full"
-              >
-                Open Basic Modal
-              </Button>
-            </Card.Content>
-          </div>
-          <CodeBlock
-            code={buttonUsageHtml(basicModal.isOpen)}
-            className="text-xs"
-          />
-        </Card>
-
-        <Card className="flex flex-col justify-between">
-          <div>
-            <Card.Header>
-              <Card.Title>Loading State</Card.Title>
-              <Card.Description>
-                Built-in loading overlay that blurs and protects content.
-              </Card.Description>
-            </Card.Header>
-            <Card.Content className="pb-6">
-              <Button
-                onClick={triggerLoadingModal}
-                variant="secondary"
-                className="w-full"
-              >
-                Open Loading Modal (3s)
-              </Button>
-            </Card.Content>
-          </div>
-          <CodeBlock code={loadingUsageCode} className="text-xs" />
-        </Card>
-      </div>
-
-      <Modal
-        isOpen={basicModal.isOpen}
-        onClose={basicModal.close}
-        title="Welcome to Warqad"
-      >
-        <div className="space-y-4">
-          <p className="text-gray-600 dark:text-gray-400 leading-relaxed">
-            This modal features a premium{" "}
-            <span className="text-indigo-500 font-medium">squircle</span>{" "}
-            rounding and smooth entrance.
-          </p>
-          <Button
-            onClick={basicModal.close}
-            variant="primary"
-            className="w-full"
-          >
-            Got it, thanks!
-          </Button>
-        </div>
-      </Modal>
-
-      <Modal
-        isOpen={loadingModal.isOpen}
-        onClose={loadingModal.close}
-        title="System Update"
-        isLoading={isModalLoading}
-      >
-        <div className="space-y-4">
-          <div className="flex items-center gap-3 p-4 bg-blue-50 dark:bg-blue-500/10 rounded-2xl text-blue-700 dark:text-blue-400">
-            <LoadingSpin size="sm" />
-            <span className="text-sm font-medium">
-              Synchronizing with cloud...
-            </span>
-          </div>
-          <Button
-            onClick={loadingModal.close}
-            variant="outline"
-            className="w-full"
-            disabled={isModalLoading}
-          >
-            Cancel Process
-          </Button>
-        </div>
-      </Modal>
-    </div>
-  );
-};
-
-const buttonUsageHtml = (isOpen: boolean) =>
-  `<Modal \n  isOpen={${isOpen}} \n  onClose={() => {}} \n  title="..."\n>\n  ...\n</Modal>`;
-
-export default ModalsShowcase;

package/apps/dev-app/src/pages/Spins.tsx

@@ -1,161 +0,0 @@
-import { useState } from "react";
-import {
-  ClassicSpin,
-  OverlaySpin,
-  LoadingSpin,
-  Button,
-  CodeBlock,
-  Card,
-  PageHeader,
-} from "warqadui";
-
-const SpinsShowcase = () => {
-  const [showClassic, setShowClassic] = useState(false);
-  const [showOverlay, setShowOverlay] = useState(false);
-
-  const triggerClassic = () => {
-    setShowClassic(true);
-    setTimeout(() => setShowClassic(false), 3000);
-  };
-
-  const triggerOverlay = () => {
-    setShowOverlay(true);
-    setTimeout(() => setShowOverlay(false), 3000);
-  };
-
-  const importCode = `import { \n  ClassicSpin, \n  OverlaySpin, \n  LoadingSpin \n} from "warqadui";`;
-
-  const classicCode = `<ClassicSpin msg="Loading dashboard..." />`;
-
-  const overlayCode = `<div className="relative h-64">\n  {/* Content */}\n  {isLoading && <OverlaySpin msg="Saving changes..." />}\n</div>`;
-
-  const rawCode = `<LoadingSpin \n  size="md" \n  className="text-blue-600" \n/>`;
-
-  return (
-    <div className="p-8 space-y-12 pb-20">
-      <PageHeader
-        title="Spins & Loaders"
-        description="A collection of premium loading states designed for the Warqad ecosystem. Includes full-page modals, container-aware overlays, and raw SVG spinners."
-      />
-
-      {/* Quick Start Documentation */}
-      <section className="space-y-4">
-        <h2 className="text-xl font-bold flex items-center gap-2"> Usage </h2>
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
-          <Card variant="flat">
-            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
-              1. Import components:
-            </p>
-            <CodeBlock code={importCode} />
-          </Card>
-          <Card variant="flat">
-            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
-              2. Example Usage:
-            </p>
-            <CodeBlock code={rawCode} />
-          </Card>
-        </div>
-      </section>
-
-      <section>
-        <h2 className="text-xl font-bold mb-6">Live Demos</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {/* Classic Spin Card */}
-          <Card className="relative overflow-hidden group">
-            <Card.Header>
-              <Card.Title>Classic Spin</Card.Title>
-              <Card.Description>
-                Centered modal indicator for full-page or section loading.
-              </Card.Description>
-            </Card.Header>
-            <Card.Content className="space-y-4">
-              <Button
-                onClick={triggerClassic}
-                variant="primary"
-                className="w-full"
-              >
-                Preview (3s)
-              </Button>
-              <CodeBlock code={classicCode} className="text-[11px]" />
-            </Card.Content>
-
-            {showClassic && <ClassicSpin msg="Loading dashboard..." />}
-          </Card>
-
-          {/* Overlay Spin Card */}
-          <Card className="relative overflow-hidden group">
-            <Card.Header>
-              <Card.Title>Overlay Spin</Card.Title>
-              <Card.Description>
-                Container-bound overlay. Parent must be{" "}
-                <code className="text-[10px] px-1 bg-gray-100 dark:bg-gray-700 rounded text-blue-500">
-                  relative
-                </code>
-                .
-              </Card.Description>
-            </Card.Header>
-            <Card.Content className="space-y-4">
-              <div className="relative h-24 w-full bg-gray-50 dark:bg-gray-900 rounded-xl flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600">
-                <span className="text-xs text-gray-400">Content Area</span>
-                {showOverlay && <OverlaySpin msg="Saving changes..." />}
-              </div>
-              <Button
-                onClick={triggerOverlay}
-                variant="secondary"
-                className="w-full"
-              >
-                Preview (3s)
-              </Button>
-              <CodeBlock code={overlayCode} className="text-[10px]" />
-            </Card.Content>
-          </Card>
-
-          {/* Raw LoadingSpin Card */}
-          <Card className="flex flex-col justify-between">
-            <div>
-              <Card.Header>
-                <Card.Title>LoadingSpin</Card.Title>
-                <Card.Description>
-                  Lightweight SVG spinner for inline placements.
-                </Card.Description>
-              </Card.Header>
-              <Card.Content>
-                <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-900 p-4 rounded-xl mb-4">
-                  <div className="flex flex-col items-center gap-1">
-                    <LoadingSpin size="sm" className="text-blue-500" />
-                    <span className="text-[10px] text-gray-400">Small</span>
-                  </div>
-                  <div className="flex flex-col items-center gap-1">
-                    <LoadingSpin size="md" className="text-indigo-500" />
-                    <span className="text-[10px] text-gray-400">Medium</span>
-                  </div>
-                  <div className="flex flex-col items-center gap-1">
-                    <LoadingSpin size="lg" className="text-purple-500" />
-                    <span className="text-[10px] text-gray-400">Large</span>
-                  </div>
-                </div>
-              </Card.Content>
-            </div>
-            <CodeBlock code={rawCode} className="text-[11px]" />
-          </Card>
-        </div>
-      </section>
-
-      <Card
-        variant="glass"
-        className="bg-blue-50/50 dark:bg-blue-900/10 border-blue-100 dark:border-blue-900/20"
-      >
-        <Card.Title className="text-blue-900 dark:text-blue-400 mb-2">
-          Documentation Note
-        </Card.Title>
-        <Card.Description className="text-blue-700 dark:text-blue-600">
-          The <code>CodeBlock</code> and <code>Card</code> components above are
-          also part of the <strong>warqadui</strong> package. Use them to build
-          beautiful documentation or high-end dashboard interfaces.
-        </Card.Description>
-      </Card>
-    </div>
-  );
-};
-
-export default SpinsShowcase;

package/apps/dev-app/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/apps/dev-app/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/apps/dev-app/vite.config.ts

@@ -1,11 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import tailwindcss from "@tailwindcss/vite";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  server: {
-    port: 3000,
-  },
-});

package/packages/ui/package.json

@@ -1,70 +0,0 @@
-{
-  "name": "warqadui",
-  "version": "0.0.7",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./styles.css": "./dist/index.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup src/index.ts src/styles.css --format esm,cjs --dts --injectStyle",
-    "dev": "tsup src/index.ts src/styles.css --format esm,cjs --dts --watch --injectStyle",
-    "prepublish": "npm run build"
-  },
-  "peerDependencies": {
-    "@tanstack/react-table": "^8.12.0",
-    "antd": "^6.3.1",
-    "axios": "^1.6.0",
-    "framer-motion": ">=10",
-    "react": ">=18",
-    "react-dom": ">=18",
-    "react-hook-form": ">=7",
-    "react-phone-number-input": ">=3.4.0",
-    "react-router-dom": ">=6",
-    "tailwindcss": ">=3.4.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
-    "html2canvas-pro": "^2.0.2",
-    "jspdf": "^4.2.0",
-    "lucide-react": "^0.344.0",
-    "moment": "^2.30.1",
-    "react-to-pdf": "^3.2.1",
-    "tailwind-merge": "^2.2.1",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
-  },
-  "devDependencies": {
-    "@tanstack/react-table": "^8.12.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "@types/react-router-dom": "^5.3.3",
-    "antd": "^6.3.1",
-    "autoprefixer": "^10.4.17",
-    "axios": "^1.6.0",
-    "clsx": "^2.1.0",
-    "dayjs": "^1.11.10",
-    "lucide-react": "^0.344.0",
-    "moment": "^2.30.1",
-    "postcss": "^8.4.35",
-    "react-hook-form": "^7.51.0",
-    "react-phone-number-input": "^3.4.0",
-    "tailwind-merge": "^2.2.1",
-    "tailwindcss": "^3.4.1",
-    "tsup": "^8.0.2",
-    "typescript": "^5.3.3",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.0"
-  }
-}

package/packages/ui/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/packages/ui/src/components/Button.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import { cn } from "../utils/cn";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?:
-    | "primary"
-    | "secondary"
-    | "outline"
-    | "ghost"
-    | "danger"
-    | "warning";
-  size?: "sm" | "md" | "lg";
-  isLoading?: boolean;
-  icon?: React.ReactNode;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  className,
-  variant = "primary",
-  size = "md",
-  isLoading,
-  icon,
-  ...props
-}) => {
-  const variants: Record<NonNullable<ButtonProps["variant"]>, string> = {
-    primary:
-      "bg-[#007AFF] text-white hover:bg-[#0071e3] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#007AFF]",
-    secondary:
-      "bg-[#F5F5F7] text-[#1D1D1F] hover:bg-[#E8E8ED] dark:bg-[#FFFFFF]/10 dark:text-[#F5F5F7] dark:hover:bg-[#FFFFFF]/15 active:scale-[0.98] focus:ring-gray-400",
-    outline:
-      "border border-gray-200 dark:border-gray-800 bg-white/50 dark:bg-black/50 backdrop-blur-md text-[#1D1D1F] dark:text-white hover:bg-gray-50 dark:hover:bg-gray-900 active:scale-[0.98] focus:ring-gray-400",
-    ghost:
-      "bg-transparent text-[#007AFF] hover:bg-[#007AFF]/10 active:scale-[0.98] focus:ring-[#007AFF]",
-    danger:
-      "bg-[#FF3B30] text-white hover:bg-[#E03126] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF3B30]",
-    warning:
-      "bg-[#FF9500] text-white hover:bg-[#E68600] active:scale-[0.98] active:opacity-90 shadow-[0_1px_2px_rgba(0,0,0,0.1)] focus:ring-[#FF9500]",
-  };
-
-  const sizes: Record<NonNullable<ButtonProps["size"]>, string> = {
-    sm: "px-3 py-1.5 text-sm rounded-[10px] gap-1.5 font-medium",
-    md: "px-5 py-2.5 rounded-[12px] gap-2 font-medium tracking-tight",
-    lg: "px-7 py-3.5 text-lg rounded-[16px] font-semibold tracking-tight gap-2.5",
-  };
-
-  return (
-    <button
-      className={cn(
-        "inline-flex items-center justify-center transition-all duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 select-none cursor-pointer disabled:cursor-not-allowed",
-        variants[variant as keyof typeof variants],
-        sizes[size as keyof typeof sizes],
-        className,
-      )}
-      disabled={isLoading || props.disabled}
-      {...props}
-    >
-      {isLoading ? (
-        <svg
-          className="animate-spin -ml-1 mr-2 h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          />
-        </svg>
-      ) : (
-        icon && <span className="flex-shrink-0">{icon}</span>
-      )}
-      {children}
-    </button>
-  );
-};

package/packages/ui/src/components/Card.tsx

@@ -1,97 +0,0 @@
-import React from "react";
-import { cn } from "../utils/cn";
-
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  variant?: "default" | "flat" | "glass";
-}
-
-export const Card = ({
-  children,
-  className,
-  variant = "default",
-  ...props
-}: CardProps) => {
-  const variants = {
-    default:
-      "bg-white dark:bg-zinc-900 border-gray-200 dark:border-zinc-800 shadow-sm",
-    flat: "bg-gray-50/50 dark:bg-zinc-950/50 border-gray-100 dark:border-zinc-900",
-    glass:
-      "bg-white/70 dark:bg-black/40 backdrop-blur-md border-white/20 dark:border-white/5 shadow-xl",
-  };
-
-  return (
-    <div
-      className={cn(
-        "rounded-[2rem] border p-6 transition-all duration-300",
-        variants[variant],
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const CardHeader = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => <div className={cn("mb-4 space-y-1.5", className)}>{children}</div>;
-
-export const CardTitle = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <h3
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight text-gray-900 dark:text-gray-100",
-      className,
-    )}
-  >
-    {children}
-  </h3>
-);
-
-export const CardDescription = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <p className={cn("text-sm text-gray-500 dark:text-gray-400", className)}>
-    {children}
-  </p>
-);
-
-export const CardContent = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => <div className={cn("", className)}>{children}</div>;
-
-export const CardFooter = ({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) => (
-  <div className={cn("mt-6 flex items-center pt-0", className)}>{children}</div>
-);
-
-// Attach subcomponents to Card for better DX
-Card.Header = CardHeader;
-Card.Title = CardTitle;
-Card.Description = CardDescription;
-Card.Content = CardContent;
-Card.Footer = CardFooter;

package/packages/ui/src/components/CodeBlock.tsx

@@ -1,53 +0,0 @@
-import React, { useState } from "react";
-import { Check, Copy } from "lucide-react";
-import { cn } from "../utils/cn";
-
-interface CodeBlockProps {
-  code: string;
-  language?: string;
-  className?: string;
-}
-
-export const CodeBlock: React.FC<CodeBlockProps> = ({
-  code,
-  language = "tsx",
-  className,
-}) => {
-  const [copied, setCopied] = useState(false);
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div
-      className={cn(
-        "relative group rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-black/50 backdrop-blur-sm",
-        className,
-      )}
-    >
-      <div className="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-gray-800">
-        <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">
-          {language}
-        </span>
-        <button
-          onClick={handleCopy}
-          className="p-1.5 rounded-lg text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-white dark:hover:bg-zinc-800 transition-all duration-200"
-        >
-          {copied ? (
-            <Check size={14} className="text-green-500" />
-          ) : (
-            <Copy size={14} />
-          )}
-        </button>
-      </div>
-      <div className="p-4 overflow-x-auto">
-        <pre className="text-sm font-mono leading-relaxed text-gray-800 dark:text-gray-300">
-          {code}
-        </pre>
-      </div>
-    </div>
-  );
-};