@bloomneo/uikit 1.5.0

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

@@ -0,0 +1,288 @@
+import React from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Badge } from '@bloomneo/uikit/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bloomneo/uikit/tabs';
+import { SEO } from '../components';
+
+export const ComponentsPage: React.FC = () => {
+  return (
+    <>
+      <SEO
+        title="Components - UIKit Multi-Page Demo"
+        description="Comprehensive showcase of UIKit's production-ready React components with examples and variations"
+      />
+      <div className="space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="voila-heading text-4xl">Component Library</h1>
+        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
+          Comprehensive showcase of UIKit's production-ready React components with examples and variations
+        </p>
+      </div>
+
+      <Tabs defaultValue="buttons" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="buttons">Buttons</TabsTrigger>
+          <TabsTrigger value="cards">Cards</TabsTrigger>
+          <TabsTrigger value="forms">Forms</TabsTrigger>
+          <TabsTrigger value="display">Display</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="buttons" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-primary/10 rounded flex items-center justify-center">
+                  🔘
+                </div>
+                Button Variants
+              </CardTitle>
+              <CardDescription>Interactive elements with multiple variants, sizes, and states</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Primary Actions</h4>
+                <div className="flex flex-wrap gap-3">
+                  <Button size="lg">Primary</Button>
+                  <Button variant="secondary" size="lg">Secondary</Button>
+                  <Button variant="outline" size="lg">Outline</Button>
+                  <Button variant="ghost" size="lg">Ghost</Button>
+                  <Button variant="destructive" size="lg">Destructive</Button>
+                </div>
+              </div>
+              
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Size Variations</h4>
+                <div className="flex flex-wrap items-center gap-3">
+                  <Button size="sm">Small</Button>
+                  <Button>Default</Button>
+                  <Button size="lg">Large</Button>
+                </div>
+              </div>
+              
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">States & Loading</h4>
+                <div className="flex flex-wrap gap-3">
+                  <Button>Normal</Button>
+                  <Button disabled>Disabled</Button>
+                  <Button className="opacity-50 cursor-not-allowed">Loading...</Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Badges & Labels</CardTitle>
+              <CardDescription>Small status indicators and labels</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex flex-wrap gap-3">
+                <Badge>Default</Badge>
+                <Badge variant="secondary">Secondary</Badge>
+                <Badge variant="destructive">Error</Badge>
+                <Badge variant="outline">Outline</Badge>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="cards" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-secondary/10 rounded flex items-center justify-center">
+                  📋
+                </div>
+                Card Layouts
+              </CardTitle>
+              <CardDescription>Flexible containers for displaying content and actions</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <Card className="border-2">
+                  <CardHeader>
+                    <CardTitle className="text-lg">Simple Card</CardTitle>
+                    <CardDescription>Basic card with header and content</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-sm text-muted-foreground">
+                      Cards provide a flexible container for content with consistent spacing and styling.
+                    </p>
+                  </CardContent>
+                </Card>
+                
+                <Card className="border-2 bg-primary/5">
+                  <CardHeader>
+                    <CardTitle className="text-lg">Action Card</CardTitle>
+                    <CardDescription>Card with interactive elements</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-3">
+                    <p className="text-sm text-muted-foreground">
+                      Enhanced with buttons and other interactive components.
+                    </p>
+                    <Button size="sm" className="w-full">Take Action</Button>
+                  </CardContent>
+                </Card>
+                
+                <Card className="border-2 border-dashed">
+                  <CardHeader>
+                    <CardTitle className="text-lg">Custom Styled</CardTitle>
+                    <CardDescription>Customizable appearance</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p className="text-sm text-muted-foreground">
+                      Easy to customize with different borders, backgrounds, and layouts.
+                    </p>
+                  </CardContent>
+                </Card>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="forms" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-accent/10 rounded flex items-center justify-center">
+                  📝
+                </div>
+                Form Controls
+              </CardTitle>
+              <CardDescription>Input fields and form controls with consistent styling</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Text Inputs</h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Standard Input</label>
+                    <input 
+                      type="text" 
+                      placeholder="Enter your text"
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Email Input</label>
+                    <input 
+                      type="email" 
+                      placeholder="your@email.com"
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                    />
+                  </div>
+                </div>
+              </div>
+              
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Selection Controls</h4>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Dropdown Select</label>
+                    <select className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
+                      <option>Choose an option</option>
+                      <option>Option 1</option>
+                      <option>Option 2</option>
+                      <option>Option 3</option>
+                    </select>
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">Multi-select</label>
+                    <select multiple size={3} className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring">
+                      <option>Option A</option>
+                      <option>Option B</option>
+                      <option>Option C</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Text Areas</h4>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Message</label>
+                  <textarea 
+                    placeholder="Enter your message here..."
+                    rows={4}
+                    className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="display" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <div className="w-8 h-8 bg-chart1/10 rounded flex items-center justify-center">
+                  📊
+                </div>
+                Data Display
+              </CardTitle>
+              <CardDescription>Components for presenting structured information</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Chart Colors</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>
+              
+              <div className="space-y-4">
+                <h4 className="text-sm font-medium text-muted-foreground">Status Indicators</h4>
+                <div className="flex flex-wrap gap-3">
+                  <div className="inline-flex items-center gap-2 bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">
+                    <div className="w-2 h-2 bg-green-600 rounded-full"></div>
+                    Active
+                  </div>
+                  <div className="inline-flex items-center gap-2 bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">
+                    <div className="w-2 h-2 bg-yellow-600 rounded-full"></div>
+                    Pending
+                  </div>
+                  <div className="inline-flex items-center gap-2 bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm">
+                    <div className="w-2 h-2 bg-red-600 rounded-full"></div>
+                    Inactive
+                  </div>
+                  <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
+                    <div className="w-2 h-2 bg-blue-600 rounded-full"></div>
+                    Processing
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Typography Scale</CardTitle>
+              <CardDescription>Text hierarchy and styling examples</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-3">
+                <h1 className="text-3xl font-bold">Heading 1 - Main Title</h1>
+                <h2 className="text-2xl font-bold">Heading 2 - Section Title</h2>
+                <h3 className="text-xl font-bold">Heading 3 - Subsection</h3>
+                <h4 className="text-lg font-semibold">Heading 4 - Component Title</h4>
+                <p className="text-base">Body text - Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
+                <p className="text-sm text-muted-foreground">Small text for captions, metadata, and secondary information.</p>
+                <code className="text-sm bg-muted px-2 py-1 rounded font-mono">Code snippet example</code>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+      </div>
+    </>
+  );
+};
+
+export default ComponentsPage;

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

@@ -0,0 +1,348 @@
+import React, { useState } from 'react';
+import { Button } from '@bloomneo/uikit/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@bloomneo/uikit/card';
+import { Badge } from '@bloomneo/uikit/badge';
+import { 
+  Mail, 
+  MessageSquare, 
+  Send, 
+  CheckCircle,
+  AlertCircle,
+  User,
+  Building,
+  Phone
+} from 'lucide-react';
+
+export const ContactPage: React.FC = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    company: '',
+    phone: '',
+    subject: '',
+    message: '',
+    inquiryType: 'general'
+  });
+  
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    
+    // Simulate form submission
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    
+    setIsSubmitting(false);
+    setIsSubmitted(true);
+    
+    // Reset form after 3 seconds
+    setTimeout(() => {
+      setIsSubmitted(false);
+      setFormData({
+        name: '',
+        email: '',
+        company: '',
+        phone: '',
+        subject: '',
+        message: '',
+        inquiryType: 'general'
+      });
+    }, 3000);
+  };
+
+  const inquiryTypes = [
+    { value: 'general', label: 'General Inquiry', icon: MessageSquare },
+    { value: 'support', label: 'Technical Support', icon: AlertCircle },
+    { value: 'business', label: 'Business Partnership', icon: Building },
+    { value: 'feedback', label: 'Feedback & Suggestions', icon: CheckCircle }
+  ];
+
+  if (isSubmitted) {
+    return (
+      <div className="max-w-2xl mx-auto text-center space-y-6 py-16">
+        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto">
+          <CheckCircle className="h-10 w-10 text-green-600" />
+        </div>
+        <h1 className="text-3xl font-bold text-green-700">Message Sent!</h1>
+        <p className="text-muted-foreground max-w-md mx-auto">
+          Thank you for reaching out. We've received your message and will get back to you within 24 hours.
+        </p>
+        <div className="bg-green-50 border border-green-200 rounded-lg p-4 max-w-md mx-auto">
+          <p className="text-sm text-green-700">
+            <strong>What's next?</strong><br />
+            Our team will review your message and respond via email. 
+            For urgent matters, please call our support line.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="text-center space-y-4">
+        <h1 className="voila-heading text-4xl">Get in Touch</h1>
+        <p className="voila-subheading text-muted-foreground max-w-3xl mx-auto">
+          Have questions about UIKit? Need support? Want to provide feedback? We'd love to hear from you.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Contact Form */}
+        <div className="lg:col-span-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Send className="h-5 w-5" />
+                Send us a Message
+              </CardTitle>
+              <CardDescription>
+                Fill out the form below and we'll get back to you as soon as possible
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <form onSubmit={handleSubmit} className="space-y-6">
+                {/* Inquiry Type */}
+                <div className="space-y-3">
+                  <label className="text-sm font-medium">What can we help you with?</label>
+                  <div className="grid grid-cols-2 gap-3">
+                    {inquiryTypes.map(type => {
+                      const Icon = type.icon;
+                      return (
+                        <label key={type.value} className="cursor-pointer">
+                          <input
+                            type="radio"
+                            name="inquiryType"
+                            value={type.value}
+                            checked={formData.inquiryType === type.value}
+                            onChange={handleInputChange}
+                            className="sr-only"
+                          />
+                          <div className={`p-3 border-2 rounded-lg text-center transition-all ${
+                            formData.inquiryType === type.value 
+                              ? 'border-primary bg-primary/5 text-primary' 
+                              : 'border-input hover:border-primary/30'
+                          }`}>
+                            <Icon className="h-5 w-5 mx-auto mb-2" />
+                            <div className="text-sm font-medium">{type.label}</div>
+                          </div>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                {/* Personal Information */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium flex items-center gap-2">
+                      <User className="h-4 w-4" />
+                      Full Name *
+                    </label>
+                    <input
+                      type="text"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                      placeholder="Enter your full name"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium flex items-center gap-2">
+                      <Mail className="h-4 w-4" />
+                      Email Address *
+                    </label>
+                    <input
+                      type="email"
+                      name="email"
+                      value={formData.email}
+                      onChange={handleInputChange}
+                      required
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                      placeholder="your@email.com"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium flex items-center gap-2">
+                      <Building className="h-4 w-4" />
+                      Company
+                    </label>
+                    <input
+                      type="text"
+                      name="company"
+                      value={formData.company}
+                      onChange={handleInputChange}
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                      placeholder="Your company name"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium flex items-center gap-2">
+                      <Phone className="h-4 w-4" />
+                      Phone Number
+                    </label>
+                    <input
+                      type="tel"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleInputChange}
+                      className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                      placeholder="(555) 123-4567"
+                    />
+                  </div>
+                </div>
+
+                {/* Subject */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Subject *</label>
+                  <input
+                    type="text"
+                    name="subject"
+                    value={formData.subject}
+                    onChange={handleInputChange}
+                    required
+                    className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
+                    placeholder="Brief description of your inquiry"
+                  />
+                </div>
+
+                {/* Message */}
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">Message *</label>
+                  <textarea
+                    name="message"
+                    value={formData.message}
+                    onChange={handleInputChange}
+                    required
+                    rows={5}
+                    className="w-full p-3 bg-background border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+                    placeholder="Please provide detailed information about your inquiry..."
+                  />
+                </div>
+
+                {/* Submit Button */}
+                <Button 
+                  type="submit" 
+                  size="lg" 
+                  className="w-full" 
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? (
+                    <>
+                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2" />
+                      Sending Message...
+                    </>
+                  ) : (
+                    <>
+                      <Send className="h-4 w-4 mr-2" />
+                      Send Message
+                    </>
+                  )}
+                </Button>
+              </form>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Contact Information & FAQ */}
+        <div className="space-y-6">
+          {/* Contact Info */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <MessageSquare className="h-5 w-5" />
+                Other Ways to Reach Us
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-3">
+                <div className="flex items-start gap-3">
+                  <Mail className="h-5 w-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">Email Support</div>
+                    <div className="text-sm text-muted-foreground">support@bloomneo.com</div>
+                    <Badge variant="secondary" className="mt-1">24-48h response</Badge>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <MessageSquare className="h-5 w-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">Live Chat</div>
+                    <div className="text-sm text-muted-foreground">Available Mon-Fri 9AM-5PM PST</div>
+                    <Badge variant="secondary" className="mt-1">Instant response</Badge>
+                  </div>
+                </div>
+
+                <div className="flex items-start gap-3">
+                  <Building className="h-5 w-5 text-muted-foreground mt-0.5" />
+                  <div>
+                    <div className="font-medium">Enterprise Sales</div>
+                    <div className="text-sm text-muted-foreground">For custom solutions & partnerships</div>
+                    <Badge variant="secondary" className="mt-1">Same day response</Badge>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* FAQ */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Frequently Asked</CardTitle>
+              <CardDescription>Quick answers to common questions</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-3">
+                <div>
+                  <div className="font-medium text-sm">How do I get started with UIKit?</div>
+                  <div className="text-sm text-muted-foreground mt-1">
+                    Run <code className="bg-muted px-1 rounded">npx create-uikit my-app</code> to create a new project.
+                  </div>
+                </div>
+
+                <div>
+                  <div className="font-medium text-sm">Is UIKit free to use?</div>
+                  <div className="text-sm text-muted-foreground mt-1">
+                    Yes, UIKit is open source and free for both personal and commercial use.
+                  </div>
+                </div>
+
+                <div>
+                  <div className="font-medium text-sm">Can I customize the themes?</div>
+                  <div className="text-sm text-muted-foreground mt-1">
+                    Absolutely! Create custom themes using our theming system and OKLCH colors.
+                  </div>
+                </div>
+
+                <div>
+                  <div className="font-medium text-sm">Do you provide support?</div>
+                  <div className="text-sm text-muted-foreground mt-1">
+                    Yes, we offer community support via GitHub and premium support for enterprises.
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactPage;