@bloomneo/uikit 1.5.0

package/bin/templates/generate/feature/list-page.tsx.template

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { Card, CardContent, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Button } from '@bloomneo/uikit/button';
+
+export const {{FeatureName}}ListPage: React.FC = () => {
+  return (
+    <PageLayout>
+      <PageLayout.Content>
+        <div className="space-y-6">
+          <div className="flex justify-between items-center">
+            <h1 className="voila-heading text-3xl">{{FeatureName}} List</h1>
+            <Button>Add New {{FeatureName}}</Button>
+          </div>
+
+          <div className="grid gap-4">
+            {Array.from({ length: 3 }, (_, i) => (
+              <Card key={i}>
+                <CardHeader>
+                  <CardTitle>{{FeatureName}} Item {i + 1}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-muted-foreground">
+                    Sample {{featureName}} item content goes here.
+                  </p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </PageLayout.Content>
+    </PageLayout>
+  );
+};

package/bin/templates/generate/feature/main-component.tsx.template

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Button } from '@bloomneo/uikit/button';
+import { Badge } from '@bloomneo/uikit/badge';
+
+interface {{FeatureName}}CardProps {
+  title?: string;
+  description?: string;
+  onAction?: () => void;
+}
+
+export const {{FeatureName}}Card: React.FC<{{FeatureName}}CardProps> = ({
+  title = '{{FeatureName}} Card',
+  description = 'A generated {{featureName}} component',
+  onAction
+}) => {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <CardTitle>{title}</CardTitle>
+          <Badge variant="outline">{{theme}} theme</Badge>
+        </div>
+        {description && <p className="text-muted-foreground">{description}</p>}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <p className="text-sm text-muted-foreground">
+          This is a reusable {{featureName}} card component. Customize it according to your needs.
+        </p>
+        <div className="flex gap-2">
+          <Button onClick={onAction}>Primary Action</Button>
+          <Button variant="outline">Secondary</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

package/bin/templates/generate/feature/main-page.tsx.template

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { {{FeatureName}}Card } from '../components/{{FeatureName}}Card';
+
+export const {{FeatureName}}Page: React.FC = () => {
+  return (
+    <PageLayout>
+      <PageLayout.Content>
+        <div className="space-y-8">
+          <div className="text-center space-y-4">
+            <h1 className="voila-heading text-4xl md:text-5xl text-gradient-primary">
+              {{FeatureName}}
+            </h1>
+            <p className="voila-subheading text-muted-foreground max-w-2xl mx-auto text-xl">
+              Main {{featureName}} page with full feature implementation
+            </p>
+          </div>
+
+          <div className="max-w-4xl mx-auto">
+            <{{FeatureName}}Card
+              title="{{FeatureName}} Feature"
+              description="Complete feature implementation with components and pages"
+              onAction={() => console.log('{{FeatureName}} action triggered')}
+            />
+          </div>
+        </div>
+      </PageLayout.Content>
+    </PageLayout>
+  );
+};

package/bin/templates/generate/feature/types.ts.template

@@ -0,0 +1,34 @@
+export interface {{FeatureName}}Data {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'active' | 'inactive' | 'pending';
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface {{FeatureName}}ListItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  badge?: string;
+  href?: string;
+}
+
+export interface {{FeatureName}}State {
+  items: {{FeatureName}}Data[];
+  selectedItem: {{FeatureName}}Data | null;
+  loading: boolean;
+  error: string | null;
+  filters: {
+    status?: {{FeatureName}}Data['status'];
+    search?: string;
+  };
+}
+
+export interface {{FeatureName}}Actions {
+  create: (data: Omit<{{FeatureName}}Data, 'id' | 'createdAt' | 'updatedAt'>) => void;
+  update: (id: string, data: Partial<{{FeatureName}}Data>) => void;
+  delete: (id: string) => void;
+  setFilter: (filters: Partial<{{FeatureName}}State['filters']>) => void;
+}

package/bin/templates/generate/hook/hook.ts.template

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * {{hookName}} - Custom hook
+ * Generated with UIKit {{theme}} theme
+ */
+export const {{hookName}} = () => {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Add your hook logic here
+    console.log('{{hookName}} initialized');
+  }, []);
+
+  const handleAction = () => {
+    setLoading(true);
+    setError(null);
+
+    // Add your action logic here
+
+    setTimeout(() => {
+      setLoading(false);
+      setData('Sample data from {{hookName}}');
+    }, 1000);
+  };
+
+  return {
+    data,
+    loading,
+    error,
+    handleAction,
+  };
+};

package/bin/templates/generate/index.css.template

@@ -0,0 +1,10 @@
+/**
+ * Main Styles Entry Point
+ * Tailwind CSS v4+ with UIKit integration
+ */
+
+/* Tailwind CSS v4+ - REQUIRED */
+@import "tailwindcss";
+
+/* UIKit base styles - REQUIRED */
+@import '@bloomneo/uikit/styles';

package/bin/templates/generate/main.tsx.template

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/bin/templates/generate/page/index.ts.template

@@ -0,0 +1,2 @@
+export { {{FeatureName}}Page } from './pages/index';
+export { default as {{FeatureName}}PageDefault } from './pages/index';

package/bin/templates/generate/page/page.tsx.template

@@ -0,0 +1,86 @@
+import React from 'react';
+import { PageLayout } from '@bloomneo/uikit/page';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Button } from '@bloomneo/uikit/button';
+import { Badge } from '@bloomneo/uikit/badge';
+
+export const {{FeatureName}}Page: React.FC = () => {
+  return (
+    <PageLayout>
+      <PageLayout.Content>
+        <div className="space-y-8">
+          {/* Page Header */}
+          <div className="text-center space-y-4">
+            <h1 className="voila-heading text-4xl md:text-5xl text-gradient-primary">
+              {{FeatureName}}
+            </h1>
+            <p className="voila-subheading text-muted-foreground max-w-2xl mx-auto text-xl">
+              Welcome to your new {{featureName}} page powered by UIKit
+            </p>
+            <Badge variant="outline" className="text-sm">
+              Generated with UIKit CLI
+            </Badge>
+          </div>
+
+          {/* Main Content */}
+          <div className="max-w-4xl mx-auto">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  🎨 {{FeatureName}} Content
+                </CardTitle>
+                <CardDescription>
+                  This is your generated {{featureName}} page. Customize it with UIKit components and your own content.
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-muted-foreground">
+                  Start building your {{featureName}} feature here. You have access to all UIKit components
+                  with the {{theme}} theme applied.
+                </p>
+
+                <div className="flex gap-2 flex-wrap">
+                  <Button variant="default">
+                    Primary Action
+                  </Button>
+                  <Button variant="outline">
+                    Secondary Action
+                  </Button>
+                  <Button variant="ghost">
+                    Tertiary Action
+                  </Button>
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Feature 1</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-sm text-muted-foreground">
+                        Add your first {{featureName}} feature here.
+                      </p>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle className="text-lg">Feature 2</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <p className="text-sm text-muted-foreground">
+                        Add your second {{featureName}} feature here.
+                      </p>
+                    </CardContent>
+                  </Card>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </PageLayout.Content>
+    </PageLayout>
+  );
+};
+
+export default {{FeatureName}}Page;

package/bin/templates/generate/theme/README.md

@@ -0,0 +1,31 @@
+# UIKit Custom Theme Generator
+
+This template generates custom theme files for UIKit projects.
+
+## Usage
+
+```bash
+npx uikit generate theme brand        # Creates theme-brand.js
+npx uikit generate theme my-company   # Creates theme-my-company.js
+```
+
+## Generated Files
+
+- `src/themes/presets/theme-{name}.js` - Complete theme with light/dark modes
+- All 29 semantic colors included
+- Ready for customization
+- Works with existing bundle system
+
+## Next Steps After Generation
+
+1. **Customize Colors** - Edit the generated theme file with your brand colors
+2. **Bundle CSS** - Run `npx uikit bundle` to generate CSS
+3. **Use in App** - Apply theme: `<ThemeProvider theme="your-theme-name">`
+
+## Template Features
+
+✅ **Complete Color System** - All 29 UIKit semantic colors
+✅ **Light & Dark Modes** - Automatically adapted colors
+✅ **Design Tokens** - Optional custom fonts and styles
+✅ **OKLCH Ready** - Comments for upgrading to OKLCH colors
+✅ **Bundle Compatible** - Works with existing `npx uikit bundle`

package/bin/templates/generate/theme/theme.js.template

@@ -0,0 +1,155 @@
+/**
+ * {{ThemeName}} Theme - Custom brand theme for your project
+ * @description Generated theme based on your brand colors
+ * @package {{projectName}}
+ * @file src/themes/presets/theme-{{themeName}}.js
+ */
+
+/**
+ * {{ThemeName}} theme preset - Customize these colors to match your brand
+ *
+ * 🎨 Color Customization Tips:
+ * - primary: Your main brand color (buttons, links, focus states)
+ * - secondary: Supporting color for less prominent elements
+ * - accent: Highlight color for special elements
+ * - destructive: Error/danger color (usually red variants)
+ *
+ * 💡 OKLCH Colors (recommended for better consistency):
+ * - Replace hex values with oklch() for better color science
+ * - Format: oklch(lightness chroma hue)
+ * - Example: oklch(0.60 0.15 250) for a nice blue
+ * - Tool: https://oklch.com/
+ */
+const {{themeName}}Theme = {
+  id: '{{themeName}}',
+  name: '{{ThemeName}}',
+  description: 'Custom {{themeName}} theme with brand colors and modern design',
+
+  // Light mode colors - customize these to match your brand
+  light: {
+    // Base colors
+    background: '#FFFFFF',           // Main page background
+    foreground: '#0F172A',           // Primary text color
+    card: '#FFFFFF',                 // Card/panel backgrounds
+    cardForeground: '#0F172A',       // Text on cards
+    popover: '#FFFFFF',              // Dropdown/modal backgrounds
+    popoverForeground: '#0F172A',    // Text in popovers
+
+    // Brand colors - UPDATE THESE WITH YOUR BRAND COLORS
+    primary: '#3B82F6',              // 🎨 YOUR MAIN BRAND COLOR
+    primaryForeground: '#FFFFFF',    // Text on primary elements
+    secondary: '#F1F5F9',            // Secondary buttons/elements
+    secondaryForeground: '#0F172A',  // Text on secondary elements
+
+    // Supporting colors
+    muted: '#F8FAFC',                // Subtle background areas
+    mutedForeground: '#64748B',      // Secondary/subtle text
+    accent: '#F1F5F9',               // Accent elements
+    accentForeground: '#0F172A',     // Text on accent elements
+
+    // State colors
+    destructive: '#EF4444',          // Error/danger elements
+    destructiveForeground: '#FFFFFF', // Text on destructive elements
+
+    // Border colors
+    border: '#E2E8F0',               // Standard borders
+    input: '#E2E8F0',                // Input field borders
+    ring: '#3B82F6',                 // Focus ring color (usually matches primary)
+
+    // Chart colors for data visualization
+    chart1: '#3B82F6',               // Primary data series
+    chart2: '#10B981',               // Secondary data series (green)
+    chart3: '#F59E0B',               // Tertiary data series (orange)
+    chart4: '#EF4444',               // Warning data series (red)
+    chart5: '#8B5CF6',               // Additional data series (purple)
+
+    // Sidebar colors for AdminLayout
+    sidebar: '#F8FAFC',              // Sidebar background
+    sidebarForeground: '#334155',    // Sidebar text
+    sidebarPrimary: '#3B82F6',       // Active nav items
+    sidebarPrimaryForeground: '#FFFFFF', // Text on active items
+    sidebarAccent: '#F1F5F9',        // Hover states
+    sidebarAccentForeground: '#334155', // Text on hover
+    sidebarBorder: '#E2E8F0',        // Sidebar borders
+    sidebarRing: '#3B82F6',          // Focus indicators
+  },
+
+  // Dark mode colors - automatically adapted from light mode
+  dark: {
+    background: '#0F172A',           // Dark page background
+    foreground: '#F8FAFC',           // Light text on dark
+    card: '#1E293B',                 // Dark card backgrounds
+    cardForeground: '#F8FAFC',       // Light text on dark cards
+    popover: '#1E293B',              // Dark dropdown backgrounds
+    popoverForeground: '#F8FAFC',    // Light text in dark popovers
+
+    // Brand colors - lighter versions for dark mode
+    primary: '#60A5FA',              // Lighter version of brand color
+    primaryForeground: '#1E293B',    // Dark text on light brand color
+    secondary: '#1E293B',            // Dark secondary elements
+    secondaryForeground: '#F8FAFC',  // Light text on dark secondary
+
+    // Supporting colors
+    muted: '#1E293B',                // Dark muted backgrounds
+    mutedForeground: '#94A3B8',      // Muted text in dark mode
+    accent: '#1E293B',               // Dark accent elements
+    accentForeground: '#F8FAFC',     // Light text on dark accent
+
+    // State colors
+    destructive: '#F87171',          // Lighter red for dark mode
+    destructiveForeground: '#1F2937', // Dark text on light red
+
+    // Border colors
+    border: '#334155',               // Dark borders
+    input: '#334155',                // Dark input borders
+    ring: '#60A5FA',                 // Light focus ring
+
+    // Chart colors - adjusted for dark mode
+    chart1: '#60A5FA',               // Light blue
+    chart2: '#34D399',               // Light green
+    chart3: '#FBBF24',               // Light orange
+    chart4: '#F87171',               // Light red
+    chart5: '#A78BFA',               // Light purple
+
+    // Sidebar colors for dark mode
+    sidebar: '#0F172A',              // Dark sidebar
+    sidebarForeground: '#CBD5E1',    // Light sidebar text
+    sidebarPrimary: '#60A5FA',       // Light active nav
+    sidebarPrimaryForeground: '#1E293B', // Dark text on light active
+    sidebarAccent: '#1E293B',        // Dark hover states
+    sidebarAccentForeground: '#CBD5E1', // Light text on dark hover
+    sidebarBorder: '#334155',        // Dark sidebar borders
+    sidebarRing: '#60A5FA',          // Light focus indicators
+  },
+
+  // Optional: Custom design tokens
+  design: {
+    fontPrimary: 'Inter, system-ui, sans-serif',
+    fontDisplay: 'Inter, system-ui, sans-serif',
+    fontMono: 'JetBrains Mono, Monaco, monospace',
+  },
+
+  // Optional: Custom CSS styles for this theme
+  customStyles: `
+    /* Essential heading styles for {{themeName}} theme */
+    .theme-{{themeName}} .voila-heading {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-weight: 800;
+      letter-spacing: -0.04em;
+      line-height: 1.1;
+      font-size: clamp(2.5rem, 6vw, 4rem);
+      color: var(--color-foreground);
+    }
+
+    .theme-{{themeName}} .voila-subheading {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      line-height: 1.3;
+      font-size: clamp(1.25rem, 3vw, 2rem);
+      color: var(--color-muted-foreground);
+    }
+  `
+};
+
+export default {{themeName}}Theme;

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

@@ -0,0 +1,120 @@
+# {{PROJECT_NAME}}
+
+**A modern React Multi-Page 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 Multi-Page Features
+
+This Multi-Page Application is built with [@bloomneo/uikit](https://github.com/bloomneo/uikit) featuring:
+
+- **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
+- **React Router Integration** - Client-side routing with ScrollToTop
+- **Theme System** - Light/dark mode with semantic OKLCH colors
+- **TypeScript Support** - Full type safety out of the box
+- **SEO Optimization** - Built-in SEO components and hooks
+
+## 🏗️ Project Structure
+
+```
+{{PROJECT_NAME}}/
+├── src/
+│   ├── App.tsx             # Main application with routing
+│   ├── main.tsx            # Application entry point
+│   ├── index.css           # Tailwind CSS v4+ and UIKit styles
+│   ├── router.tsx          # Route definitions
+│   ├── pages/              # Page components
+│   │   ├── Home.tsx        # Home page
+│   │   ├── About.tsx       # About page
+│   │   ├── Components.tsx  # Components showcase
+│   │   ├── Themes.tsx      # Theme showcase
+│   │   ├── Contact.tsx     # Contact page
+│   │   ├── Dashboard.tsx   # Dashboard page
+│   │   ├── Login.tsx       # Login page
+│   │   └── ErrorPage.tsx   # 404 error page
+│   ├── components/         # Reusable components
+│   │   ├── Header.tsx      # Navigation header
+│   │   ├── Footer.tsx      # Footer component
+│   │   ├── SEO.tsx         # SEO component
+│   │   └── index.ts        # Component exports
+│   ├── hooks/              # Custom hooks
+│   │   └── useSEO.ts       # SEO hook
+│   └── utils/
+│       └── asset.ts        # Asset utility for deployment paths
+├── public/                 # Static assets
+├── docs/                   # Documentation guides
+├── package.json            # Dependencies and scripts
+└── README.md              # This file
+```
+
+## 🎯 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/main.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
+- **[React Router](https://reactrouter.com)** - Client-side routing
+- **[Lucide React](https://lucide.dev)** - Icon library
+
+## 🌐 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](./docs/UIKIT_LLM_GUIDE.md)** - Comprehensive usage guide
+- **[React Documentation](https://react.dev)** - React framework guide
+- **[React Router Documentation](https://reactrouter.com)** - Routing guide
+- **[Vite Documentation](https://vitejs.dev)** - Build tool documentation
+
+---
+
+**Built with ❤️ using [@bloomneo/uikit](https://github.com/bloomneo/uikit)** ✨