@bloomneo/uikit 1.5.0

package/bin/templates/multi/src/pages/Login.tsx.template

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Button } from '@bloomneo/uikit/button';
+import { AuthLayout } from '@bloomneo/uikit/auth';
+import { Eye, EyeOff, Mail, Lock, ArrowRight, Github } from 'lucide-react';
+
+const LoginPage: React.FC = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    rememberMe: false
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Login attempt:', formData);
+    // Handle login logic here
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value, type, checked } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value
+    }));
+  };
+
+  return (
+    <AuthLayout 
+      scheme="hero" 
+      tone="clean" 
+      size="md"
+      title="Welcome back"
+      subtitle="Sign in to your account to continue"
+      imageUrl="https://images.pexels.com/photos/9754/mountains-clouds-forest-fog.jpg"
+      imageAlt="Mountains with clouds and forest fog"
+      imageOverlay="dark"
+    >
+      <form onSubmit={handleSubmit} className="space-y-4">
+        {/* Email Field */}
+        <div className="space-y-2">
+          <label htmlFor="email" className="text-sm font-medium">
+            Email
+          </label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <input
+              id="email"
+              name="email"
+              type="email"
+              placeholder="Enter your email"
+              value={formData.email}
+              onChange={handleInputChange}
+              className="w-full pl-10 pr-3 py-2 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+              required
+            />
+          </div>
+        </div>
+
+        {/* Password Field */}
+        <div className="space-y-2">
+          <label htmlFor="password" className="text-sm font-medium">
+            Password
+          </label>
+          <div className="relative">
+            <Lock className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+            <input
+              id="password"
+              name="password"
+              type={showPassword ? 'text' : 'password'}
+              placeholder="Enter your password"
+              value={formData.password}
+              onChange={handleInputChange}
+              className="w-full pl-10 pr-10 py-2 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+              required
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="absolute right-1 top-1 h-8 w-8 p-0"
+              onClick={() => setShowPassword(!showPassword)}
+            >
+              {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </Button>
+          </div>
+        </div>
+
+        {/* Remember Me & Forgot Password */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <input
+              id="rememberMe"
+              name="rememberMe"
+              type="checkbox"
+              checked={formData.rememberMe}
+              onChange={handleInputChange}
+              className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
+            />
+            <label htmlFor="rememberMe" className="text-sm">
+              Remember me
+            </label>
+          </div>
+          <Button variant="link" size="sm" className="px-0">
+            Forgot password?
+          </Button>
+        </div>
+
+        {/* Submit Button */}
+        <Button type="submit" className="w-full">
+          Sign in
+          <ArrowRight className="ml-2 h-4 w-4" />
+        </Button>
+      </form>
+
+      {/* Divider */}
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center">
+          <span className="w-full border-t" />
+        </div>
+        <div className="relative flex justify-center text-xs uppercase">
+          <span className="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+
+      {/* Social Login */}
+      <Button variant="outline" className="w-full">
+        <Github className="mr-2 h-4 w-4" />
+        Continue with GitHub
+      </Button>
+
+      {/* Sign Up Link */}
+      <div className="text-center">
+        <p className="text-sm text-muted-foreground">
+          Don't have an account?{' '}
+          <Link to="/dashboard" className="font-medium text-primary hover:underline">
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </AuthLayout>
+  );
+};
+
+export default LoginPage;

package/bin/templates/multi/src/pages/Themes.tsx.template

@@ -0,0 +1,207 @@
+import React from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { useTheme } from '@bloomneo/uikit/theme-provider';
+import { Palette, Sun, Moon, Sparkles } from 'lucide-react';
+import { SEO } from '../components';
+
+export const ThemesPage: React.FC = () => {
+  const { theme, mode, setTheme, availableThemes, toggleMode } = useTheme();
+
+  const themeDetails = {
+    base: {
+      description: 'Clean default configuration showcasing the base system with Inter typography',
+      features: ['Inter font family', 'Neutral color palette', 'Clean and minimal design', 'Perfect for business apps'],
+      color: 'from-gray-400 to-gray-600'
+    },
+    elegant: {
+      description: 'Fresh sky blue theme with clean design and modern aesthetics',
+      features: ['Sky blue primary colors', 'Elegant typography', 'Fresh and modern', 'Great for creative projects'],
+      color: 'from-sky-400 to-blue-600'
+    },
+    metro: {
+      description: 'Dark teal theme with bright yellow accents for bold interfaces',
+      features: ['Dark teal foundation', 'Bright yellow accents', 'High contrast design', 'Perfect for tech platforms'],
+      color: 'from-teal-500 to-yellow-500'
+    },
+    studio: {
+      description: 'Sophisticated neutral theme with golden accents for premium feel',
+      features: ['Warm neutral tones', 'Golden accent colors', 'Professional appearance', 'Ideal for portfolios'],
+      color: 'from-amber-400 to-orange-600'
+    },
+    vivid: {
+      description: 'Premium cursive theme with sophisticated typography for luxury brands',
+      features: ['Cursive typography', 'Rich color palette', 'Luxury brand feeling', 'High-end aesthetics'],
+      color: 'from-purple-500 to-pink-600'
+    }
+  };
+
+  return (
+    <>
+      <SEO
+        title="Themes - UIKit Multi-Page Demo"
+        description="Interactive theme switching with OKLCH color science and comprehensive design tokens"
+      />
+      <div className="space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="voila-heading text-4xl">Theme System</h1>
+        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
+          Interactive theme switching with OKLCH color science and comprehensive design tokens
+        </p>
+      </div>
+
+
+        {/* Available Themes */}
+       <div className="space-y-6">
+        <h2 className="text-2xl font-bold text-center">Available Themes</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
+          {availableThemes.map(themeId => {
+            const details = themeDetails[themeId as keyof typeof themeDetails];
+            const isActive = theme === themeId;
+            
+            return (
+              <Card 
+                key={themeId} 
+                className={`border-2 transition-all duration-200 hover:shadow-lg ${
+                  isActive ? 'ring-2 ring-primary border-primary/50 shadow-lg' : 'hover:border-primary/30'
+                }`}
+              >
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <CardTitle className="text-lg capitalize flex items-center gap-2">
+                      {isActive && <Sparkles className="h-4 w-4 text-primary" />}
+                      {themeId}
+                    </CardTitle>
+                    {isActive && <div className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded-full">Active</div>}
+                  </div>
+                  <CardDescription className="text-sm">
+                    {details?.description}
+                  </CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Theme preview gradient */}
+                  <div className={` rounded-lg bg-gradient-to-r ${details?.color} opacity-80`} />
+                  
+                  {/* Features */}
+                  <ul className="text-sm space-y-1 text-muted-foreground">
+                    {details?.features.map((feature, index) => (
+                      <li key={index}>• {feature}</li>
+                    ))}
+                  </ul>
+                  
+                  <Button 
+                    onClick={() => setTheme(themeId as any)}
+                    variant={isActive ? 'default' : 'outline'}
+                    className="w-full"
+                    disabled={isActive}
+                  >
+                    {isActive ? 'Currently Active' : 'Apply Theme'}
+                  </Button>
+                </CardContent>
+              </Card>
+            );
+          })}
+        </div>
+      </div>
+
+
+      {/* Current Theme Preview */}
+      <Card className="border-2 border-primary/20">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Palette className="h-5 w-5" />
+            Current Theme: {theme.charAt(0).toUpperCase() + theme.slice(1)}
+          </CardTitle>
+          <CardDescription>
+            {themeDetails[theme as keyof typeof themeDetails]?.description}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            <div className="bg-primary text-primary-foreground p-4 rounded-lg text-center shadow-lg">
+              <div className="text-lg font-bold">Primary</div>
+              <div className="text-sm opacity-90 mt-1">Brand color</div>
+            </div>
+            <div className="bg-secondary text-secondary-foreground p-4 rounded-lg text-center shadow-lg">
+              <div className="text-lg font-bold">Secondary</div>
+              <div className="text-sm opacity-90 mt-1">Supporting</div>
+            </div>
+            <div className="bg-accent text-accent-foreground p-4 rounded-lg text-center shadow-lg">
+              <div className="text-lg font-bold">Accent</div>
+              <div className="text-sm opacity-90 mt-1">Highlights</div>
+            </div>
+            <div className="bg-muted text-muted-foreground p-4 rounded-lg text-center shadow-lg border">
+              <div className="text-lg font-bold">Muted</div>
+              <div className="text-sm opacity-90 mt-1">Subtle</div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between p-4 bg-muted/30 rounded-lg">
+            <div className="flex items-center gap-3">
+              {mode === 'dark' ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
+              <span className="font-medium">
+                {mode === 'dark' ? 'Dark Mode' : 'Light Mode'}
+              </span>
+            </div>
+            <Button onClick={toggleMode} variant="outline" size="sm">
+              {mode === 'dark' ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
+              Switch to {mode === 'dark' ? 'Light' : 'Dark'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+    
+
+      {/* Color Science Information */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <div className="w-8 h-8 bg-gradient-to-br from-red-400 via-yellow-400 to-blue-400 rounded-full" />
+            OKLCH Color Science
+          </CardTitle>
+          <CardDescription>
+            UIKit uses the OKLCH color space for perceptually uniform colors and better accessibility
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+            <div className="p-4 bg-muted/50 rounded-lg">
+              <div className="font-semibold mb-2">Perceptual Uniformity</div>
+              <div className="text-muted-foreground">
+                Colors with the same lightness appear equally bright to the human eye
+              </div>
+            </div>
+            <div className="p-4 bg-muted/50 rounded-lg">
+              <div className="font-semibold mb-2">Better Accessibility</div>
+              <div className="text-muted-foreground">
+                Improved contrast ratios and color differentiation for accessibility
+              </div>
+            </div>
+            <div className="p-4 bg-muted/50 rounded-lg">
+              <div className="font-semibold mb-2">Future-Proof</div>
+              <div className="text-muted-foreground">
+                Native browser support in modern browsers with graceful fallbacks
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h4 className="font-semibold">Chart Color Palette</h4>
+            <div className="grid grid-cols-5 gap-3">
+              {[1, 2, 3, 4, 5].map(i => (
+                <div key={i} className="text-center">
+                  <div className={`w-full h-16 rounded-lg mb-2 bg-chart${i} shadow-sm`} />
+                  <div className="text-xs text-muted-foreground font-medium">chart{i}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      </div>
+    </>
+  );
+};
+
+export default ThemesPage;

package/bin/templates/multi/src/router.tsx.template

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+
+// Import your pages
+import Home from './pages/Home';
+import Components from './pages/Components';
+import Themes from './pages/Themes';
+import About from './pages/About';
+import Contact from './pages/Contact';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import ErrorPage from './pages/ErrorPage';
+
+// Simple route configuration - users can easily add/remove routes here
+export const routes = [
+  { path: '/', component: Home },
+  { path: '/components', component: Components },
+  { path: '/themes', component: Themes },
+  { path: '/about', component: About },
+  { path: '/contact', component: Contact },
+  { path: '/login', component: Login },
+  { path: '/dashboard', component: Dashboard },
+  { path: '/error', component: ErrorPage },
+];
+
+// Simple router - just routes, nothing else
+export const AppRouter: React.FC = () => (
+  <Routes>
+    {routes.map(({ path, component: Component }) => (
+      <Route key={path} path={path} element={<Component />} />
+    ))}
+    <Route path="*" element={<ErrorPage />} />
+  </Routes>
+);

package/bin/templates/multi/src/utils/asset.ts

@@ -0,0 +1,6 @@
+export const asset = (path: string): string => {
+  const base = (import.meta as any).env?.BASE_URL || '/';
+  const cleanPath = path.startsWith('/') ? path.slice(1) : path;
+  if (base === '/') return `/${cleanPath}`;
+  return `${base}${cleanPath}`;
+};

package/bin/templates/multi/tsconfig.json.template

@@ -0,0 +1,30 @@
+{
+  "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,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/bin/templates/multi/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/bin/templates/multi/vite.config.ts.template

@@ -0,0 +1,36 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import tailwindcss from '@tailwindcss/vite'
+import { fileURLToPath } from 'url'
+
+// Get __dirname equivalent in ESM
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  // base: '/', // Uncomment this line to make the default asset loading to '/' rather than relative paths
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    port: 5173,
+    host: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: ['react', 'react-dom', 'react-router-dom'],
+          uikit: ['@bloomneo/uikit']
+        }
+      }
+    }
+  }
+})

package/bin/templates/single/README.md.template

@@ -0,0 +1,131 @@
+# {{PROJECT_NAME}}
+
+**A modern React application built with @bloomneo/uikit**
+
+## 🚀 Quick Start
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## 🎨 UIKit Features
+
+This project is built with [@bloomneo/uikit](https://github.com/bloomneo/uikit) - a complete React UI framework with:
+
+- **37 UI Components** - Forms, tables, navigation, overlays, and more
+- **5 Professional Themes** - Base, Elegant, Metro, Studio, Vivid
+- **5 Layout Systems** - Admin, Auth, Page, Popup, Blank layouts
+- **ScrollToTop Navigation** - Automatic scroll-to-top on route changes
+- **Theme System** - Light/dark mode with semantic OKLCH colors
+- **TypeScript Support** - Full type safety out of the box
+
+## 🏗️ Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/
+│   ├── App.tsx             # Main application component
+│   ├── main.tsx            # Application entry point
+│   ├── index.css           # Tailwind CSS v4+ and UIKit styles
+│   └── utils/
+│       └── asset.ts        # Asset utility for deployment paths
+├── public/                 # Static assets
+├── package.json            # Dependencies and scripts
+└── README.md              # This file
+```
+
+**Single Template Features:**
+- All components in single `App.tsx` file - perfect for demos and prototypes
+- Complete UIKit theme showcase with interactive theme switcher
+- Built-in asset utility for deployment flexibility
+
+## 🎯 Development Commands
+
+```bash
+npm run dev         # Start development server (localhost:5173)
+npm run build       # Build for production
+npm run preview     # Preview production build
+npm run deploy:gh   # Deploy to GitHub Pages
+```
+
+## 🎨 Theme Customization
+
+Change your theme by updating the ThemeProvider in `src/App.tsx`:
+
+```jsx
+<ThemeProvider theme="elegant" mode="light">
+  <App />
+</ThemeProvider>
+```
+
+Available themes: `base` | `elegant` | `metro` | `studio` | `vivid`
+Available modes: `light` | `dark`
+
+## 📦 Built With
+
+- **[React 19](https://react.dev)** - UI library
+- **[TypeScript](https://typescriptlang.org)** - Type safety
+- **[Vite](https://vitejs.dev)** - Build tool and dev server
+- **[Tailwind CSS v4+](https://tailwindcss.com)** - Utility-first CSS framework
+- **[@bloomneo/uikit](https://github.com/bloomneo/uikit)** - UI components and layouts
+- **[Lucide React](https://lucide.dev)** - Icon library
+
+## 🎨 Component Usage
+
+Import UIKit components individually for optimal tree-shaking:
+
+```jsx
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardHeader } from '@bloomneo/uikit/card';
+import { asset } from './utils/asset';
+
+function MyComponent() {
+  return (
+    <Card className="bg-card border-border">
+      <CardHeader>
+        <h2 className="text-foreground">Welcome</h2>
+      </CardHeader>
+      <CardContent>
+        <img src={asset('/images/logo.png')} alt="Logo" />
+        <Button className="bg-primary text-primary-foreground">
+          Submit
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## 🌐 Asset Management
+
+Use the included asset utility for deployment-friendly paths:
+
+```jsx
+import { asset } from './utils/asset';
+
+// Works in both development and production deployments
+<img src={asset('/images/hero.jpg')} alt="Hero" />
+<link rel="icon" href={asset('/favicon.ico')} />
+```
+
+## 📚 Resources
+
+- **[UIKit Documentation](https://docs.anthropic.com/en/docs/claude-code/claude_code_docs_map.md)** - Complete component reference
+- **[UIKit LLM Guide](https://github.com/bloomneo/uikit/blob/main/docs/UIKIT_LLM_GUIDE.md)** - Comprehensive usage guide
+- **[React Documentation](https://react.dev)** - React framework guide
+- **[Vite Documentation](https://vitejs.dev)** - Build tool documentation
+- **[Tailwind CSS v4+](https://tailwindcss.com)** - Utility-first CSS framework
+
+---
+
+**Built with ❤️ using [@bloomneo/uikit](https://github.com/bloomneo/uikit)** ✨