Initial commit: AI-powered numerology analysis application

src/components/ui/Button.tsx

@@ -0,0 +1,36 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'outline' | 'secondary' | 'destructive';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  className,
+  variant = 'default',
+  size = 'md',
+  ...props
+}) => {
+  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none';
+  
+  const variants = {
+    default: 'bg-purple-600 text-white hover:bg-purple-700',
+    outline: 'border border-purple-300 text-purple-600 hover:bg-purple-50',
+    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
+    destructive: 'bg-red-600 text-white hover:bg-red-700',
+  };
+  
+  const sizes = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-4',
+    lg: 'h-12 px-6 text-lg',
+  };
+  
+  return (
+    <button
+      className={cn(baseStyles, variants[variant], sizes[size], className)}
+      {...props}
+    />
+  );
+};

src/components/ui/Card.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import { cn } from '../../lib/utils';
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const Card: React.FC<CardProps> = ({ children, className }) => {
+  return (
+    <div className={cn('bg-white rounded-lg shadow-lg p-6', className)}>
+      {children}
+    </div>
+  );
+};
+
+interface CardHeaderProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardHeader: React.FC<CardHeaderProps> = ({ children, className }) => {
+  return (
+    <div className={cn('mb-4', className)}>
+      {children}
+    </div>
+  );
+};
+
+interface CardTitleProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardTitle: React.FC<CardTitleProps> = ({ children, className }) => {
+  return (
+    <h3 className={cn('text-xl font-semibold text-gray-900', className)}>
+      {children}
+    </h3>
+  );
+};
+
+interface CardContentProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const CardContent: React.FC<CardContentProps> = ({ children, className }) => {
+  return (
+    <div className={cn('text-gray-700', className)}>
+      {children}
+    </div>
+  );
+};

src/components/ui/Input.tsx

@@ -0,0 +1,35 @@
+import React, { InputHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  className,
+  label,
+  error,
+  ...props
+}) => {
+  return (
+    <div className="space-y-1">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+      <input
+        className={cn(
+          'w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500',
+          error && 'border-red-300 focus:border-red-500 focus:ring-red-500',
+          className
+        )}
+        {...props}
+      />
+      {error && (
+        <p className="text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+};

src/components/ui/Select.tsx

@@ -0,0 +1,43 @@
+import React, { SelectHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils';
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  error?: string;
+  options: { value: string; label: string }[];
+}
+
+export const Select: React.FC<SelectProps> = ({
+  className,
+  label,
+  error,
+  options,
+  ...props
+}) => {
+  return (
+    <div className="space-y-1">
+      {label && (
+        <label className="block text-sm font-medium text-gray-700">
+          {label}
+        </label>
+      )}
+      <select
+        className={cn(
+          'w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 bg-white',
+          error && 'border-red-300 focus:border-red-500 focus:ring-red-500',
+          className
+        )}
+        {...props}
+      >
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {error && (
+        <p className="text-sm text-red-600">{error}</p>
+      )}
+    </div>
+  );
+};