@aiready/components 0.11.13 → 0.11.15

package/src/components/icons.tsx

@@ -0,0 +1,409 @@
+import React from 'react';
+
+export function RocketIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 2c1.5 0 3 1 3 1s1.2 1.8 1.2 4.2c0 2.4-1.2 5-3.6 7.4-2.4 2.4-5 3.6-7.4 3.6C3.8 18.2 2 17 2 17S3 15.5 3 14c0-2.1 1.5-3.6 1.5-3.6S7.5 9 9 9c2.4 0 3-7 3-7z"
+        strokeWidth="0"
+        fill="currentColor"
+      />
+      <path
+        d="M14 10c.8.8 2 2 3 3"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function ChartIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" strokeWidth="1.2" />
+      <rect x="7" y="11" width="2" height="6" fill="currentColor" />
+      <rect x="11" y="8" width="2" height="9" fill="currentColor" />
+      <rect x="15" y="5" width="2" height="12" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function TargetIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" strokeWidth="1.2" />
+      <circle cx="12" cy="12" r="5" fill="currentColor" />
+      <path
+        d="M22 12h-3M5 12H2M12 2v3M12 19v3"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+export function RobotIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="3" y="7" width="18" height="11" rx="2" strokeWidth="1.2" />
+      <rect x="7" y="10" width="2" height="2" fill="currentColor" />
+      <rect x="15" y="10" width="2" height="2" fill="currentColor" />
+      <path d="M9 3v2M15 3v2" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function FileIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" />
+      <polyline points="14 2 14 8 20 8" />
+    </svg>
+  );
+}
+
+export function ShieldIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+    </svg>
+  );
+}
+
+export function TrendingUpIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18" />
+      <polyline points="17 6 23 6 23 12" />
+    </svg>
+  );
+}
+
+export function TrashIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  );
+}
+
+export function PlayIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polygon points="5 3 19 12 5 21 5 3" />
+    </svg>
+  );
+}
+
+export function UploadIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v4" />
+      <polyline points="17 8 12 3 7 8" />
+      <line x1="12" y1="3" x2="12" y2="15" />
+    </svg>
+  );
+}
+
+export function AlertCircleIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+
+export function InfoIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+
+export function BrainIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.74-3.41A2.5 2.5 0 0 1 2 14c0-1.5 1-2 1-2s-1-.5-1-2a2.5 2.5 0 0 1 2.3-2.48A2.5 2.5 0 0 1 7 5.5a2.5 2.5 0 0 1 2.5-3.5z" />
+      <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.74-3.41A2.5 2.5 0 0 0 22 14c0-1.5-1-2-1-2s1-.5 1-2a2.5 2.5 0 0 0-2.3-2.48A2.5 2.5 0 0 0 17 5.5a2.5 2.5 0 0 0-2.5-3.5z" />
+    </svg>
+  );
+}
+
+export function TerminalIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <polyline points="4 17 10 11 4 5" />
+      <line x1="12" y1="19" x2="20" y2="19" />
+    </svg>
+  );
+}
+
+export function CommandLineIcon(
+  props: { className?: string } & React.SVGProps<SVGSVGElement>
+) {
+  return <TerminalIcon {...props} />;
+}
+
+export function SettingsIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.38a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
+
+export function SaveIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
+      <polyline points="17 21 17 13 7 13 7 21" />
+      <polyline points="7 3 7 8 15 8" />
+    </svg>
+  );
+}
+
+export function RefreshCwIcon({
+  className = 'w-6 h-6',
+  ...props
+}: { className?: string } & React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+      <path d="M21 3v5h-5" />
+      <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+      <path d="M3 21v-5h5" />
+    </svg>
+  );
+}
+
+export default {
+  RocketIcon,
+  ChartIcon,
+  TargetIcon,
+  RobotIcon,
+  FileIcon,
+  ShieldIcon,
+  TrendingUpIcon,
+  TrashIcon,
+  PlayIcon,
+  UploadIcon,
+  AlertCircleIcon,
+  InfoIcon,
+  BrainIcon,
+  TerminalIcon,
+  CommandLineIcon,
+};

package/src/components/modal.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import { useEffect } from 'react';
+import { cn } from '../utils/cn';
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  maxWidth?: string;
+  showClose?: boolean;
+  variant?: 'default' | 'glass';
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  children,
+  maxWidth = 'max-w-4xl',
+  showClose = true,
+  variant = 'glass',
+}: ModalProps) {
+  // Prevent scrolling when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
+  // Close on escape key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleEsc);
+    return () => window.removeEventListener('keydown', handleEsc);
+  }, [onClose]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={onClose}
+            className="absolute inset-0 bg-slate-950/60 backdrop-blur-md"
+          />
+
+          {/* Modal Content */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className={cn(
+              'relative w-full max-h-[90vh] overflow-y-auto shadow-2xl transition-all',
+              maxWidth,
+              variant === 'glass'
+                ? 'bg-slate-900/90 backdrop-blur-xl rounded-3xl border border-indigo-500/30'
+                : 'bg-white rounded-3xl',
+              'scrollbar-thin scrollbar-thumb-slate-700'
+            )}
+          >
+            {/* Close Button */}
+            {showClose && (
+              <button
+                onClick={onClose}
+                className={cn(
+                  'absolute top-6 right-6 p-2 rounded-full transition-colors z-50',
+                  variant === 'glass'
+                    ? 'text-slate-400 hover:text-white hover:bg-slate-800'
+                    : 'bg-white/80 backdrop-blur-sm text-slate-500 hover:bg-slate-100'
+                )}
+                aria-label="Close modal"
+              >
+                <X className="w-6 h-6" />
+              </button>
+            )}
+
+            <div className="p-2 sm:p-4">{children}</div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/data-display/ScoreCircle.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { cn } from '../utils/cn';
+
+export interface ScoreCircleProps {
+  score: number;
+  progress?: number;
+  isInView?: boolean;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  showLabel?: boolean;
+  className?: string;
+}
+
+export function ScoreCircle({
+  score,
+  progress: customProgress,
+  isInView = true,
+  size = 'md',
+  showLabel = true,
+  className,
+}: ScoreCircleProps) {
+  const progress = customProgress ?? score;
+
+  const getScoreColor = () => {
+    if (score >= 80)
+      return { stroke: '#10b981', glow: 'rgba(16, 185, 129, 0.3)' };
+    if (score >= 60)
+      return { stroke: '#eab308', glow: 'rgba(234, 179, 8, 0.3)' };
+    return { stroke: '#ef4444', glow: 'rgba(239, 68, 68, 0.3)' };
+  };
+
+  const scoreColor = getScoreColor();
+
+  const sizeMap = {
+    sm: 'w-32 h-32',
+    md: 'w-48 h-48',
+    lg: 'w-64 h-64',
+    xl: 'w-80 h-80',
+  };
+
+  const textMap = {
+    sm: { score: 'text-3xl', label: 'text-[8px]', title: 'text-sm' },
+    md: { score: 'text-5xl', label: 'text-[10px]', title: 'text-lg' },
+    lg: { score: 'text-6xl', label: 'text-xs', title: 'text-xl' },
+    xl: { score: 'text-7xl', label: 'text-sm', title: 'text-2xl' },
+  };
+
+  const currentSize = sizeMap[size];
+  const currentText = textMap[size];
+
+  return (
+    <div className={cn('relative', currentSize, className)}>
+      <div
+        className="absolute inset-0 rounded-full blur-2xl opacity-50 transition-all duration-500"
+        style={{ backgroundColor: scoreColor.glow }}
+      />
+
+      <svg
+        className="w-full h-full transform -rotate-90 relative z-10"
+        viewBox="0 0 100 100"
+      >
+        {Array.from({ length: 20 }).map((_, i) => {
+          const angle = (i * 360) / 20;
+          const startAngle = angle - 85;
+          const radius = 42; // Out of 50
+          const strokeWidth = 6;
+          const gapAngle = 4;
+
+          const startX = 50 + radius * Math.cos((startAngle * Math.PI) / 180);
+          const startY = 50 + radius * Math.sin((startAngle * Math.PI) / 180);
+          const endX =
+            50 +
+            radius *
+              Math.cos(((startAngle + 360 / 20 - gapAngle) * Math.PI) / 180);
+          const endY =
+            50 +
+            radius *
+              Math.sin(((startAngle + 360 / 20 - gapAngle) * Math.PI) / 180);
+
+          const isActive = (i / 20) * 100 <= progress;
+
+          return (
+            <motion.line
+              key={i}
+              x1={`${startX}`}
+              y1={`${startY}`}
+              x2={`${endX}`}
+              y2={`${endY}`}
+              stroke={isActive ? scoreColor.stroke : '#334155'}
+              strokeWidth={strokeWidth}
+              strokeLinecap="round"
+              initial={{ opacity: 0.3 }}
+              animate={{
+                opacity: isActive ? 1 : 0.3,
+                filter: isActive
+                  ? `drop-shadow(0 0 2px ${scoreColor.stroke})`
+                  : 'none',
+              }}
+              transition={{ duration: 0.3 }}
+            />
+          );
+        })}
+      </svg>
+
+      <div className="absolute inset-0 flex flex-col items-center justify-center z-20">
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={isInView ? { scale: 1 } : { scale: 0 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="text-center"
+        >
+          <motion.div
+            className={cn('font-black mb-1', currentText.score)}
+            style={{ color: scoreColor.stroke }}
+            animate={{
+              textShadow: `0 0 20px ${scoreColor.glow}, 0 0 40px ${scoreColor.glow}`,
+            }}
+          >
+            {score}
+          </motion.div>
+          {showLabel && (
+            <>
+              <div
+                className={cn(
+                  'font-bold uppercase tracking-wider text-slate-400 mb-0.5',
+                  currentText.label
+                )}
+              >
+                AI Readiness
+              </div>
+              <div
+                className={cn('font-black tracking-tight', currentText.title)}
+                style={{ color: scoreColor.stroke }}
+              >
+                SCORE
+              </div>
+            </>
+          )}
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/data-display/index.ts

@@ -1,7 +1,2 @@
-export {
-  ScoreBar,
-  ScoreCard,
-  type ScoreBarProps,
-  type ScoreCardProps,
-  type ScoreRating,
-} from './ScoreBar';
+export * from './ScoreBar';
+export * from './ScoreCircle';